/*
	CSS Communauté Thorgal
	Stéphane Hardy
	2025-2026
*/

/* ==========================================================
   Variables trooooop pratiques
   ========================================================== */
:root {
    --couleur-sombre: #1a1a1a;
	--couleur-inter: #454444;
    --couleur-moyen: #6a6a6a;
    --couleur-claire: #efeeed;
    --couleur-or: #d8af30;

    --hauteur-entete-accueil: 100px;
    --hauteur-entete-standard: 60px;
    --hauteur-barre-superieure: 40px;

    --thorgal-claire: #efeeed;
    --thorgal-moyen: #6a6a6a;
	--thorgal-inter: #454444;
    --thorgal-sombre: #1a1a1a;

    --kriss-claire: #b49292;
    --kriss-moyen: #846262;
	--kriss-inter: #593e3e;
    --kriss-sombre: #341212;

    --louve-claire: #87a57c;
    --louve-moyen: #57754c;
	--louve-inter: #354d39;
    --louve-sombre: #07250c;

    --jeunesse-claire: #8e96b1;
    --jeunesse-moyen: #5e6681;
	--jeunesse-inter: #3b4157;
    --jeunesse-sombre: #0e1631;

    --saga-claire: #a79486;
    --saga-moyen: #776456;
	--saga-inter: #4f4034;
    --saga-sombre: #271406;
	
	--bleu1: #477;
	--bleu2: #699;
	--bleu3: #255;
	--rouge1: #754;
	--rouge2: #976;
	--rouge3: #532;
	--gris1: #666;
	--gris2: #888;
	--gris3: #444;
	--vert1: #774;
	--vert2: #996;
	--vert3: #552;
}

/* ==========================================================
   Structure générale
   ========================================================== */
body { margin: 0; padding: 0; background-color: var(--couleur-claire); color: var(--couleur-sombre); }
html {scroll-behavior: smooth;}
html :focus, html :focus:focus-visible {outline: 0 !important;}
input, textarea {padding: 5px; background: white; border: solid var(--couleur-claire) 2px; margin-bottom: 10px; border-radius: 3px; font-size: 1em; color: #666; font-family: inherit;}

/* Animation des éléments */
.apparition { opacity: 0; transform: translateY(20px); transition: 1s ease; }
.apparition.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================
   Header
   ========================================================== */
.entete { position: relative; width: 100%; z-index: 100; transition: background-color 0.5s ease, height 0.5s ease; }
body:not(.home) .entete { background-color: var(--couleur-sombre); margin-top: -1px; }
body.header-sticky .entete { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--couleur-claire) !important; z-index: 100; box-shadow: 0 0 10px 0 rgba(26,26,26,.1); }

/* ==========================================================
   Footer
   ========================================================== */
#barre-bas { position: relative; width: 100%; height: 50px; background: url('../img/barre_bas.png') bottom left repeat-x; clear: both; margin-top: -10px; pointer-events: none; z-index: 99; }
#en-bas { position: relative; background: var(--couleur-sombre); padding-top: 40px; padding-bottom: 5px; overflow: hidden; z-index: 99; }
#fond-footer { position: relative; margin: 0 auto; z-index: 1; background: #bcd; transition: opacity 0.15s linear; width: 100%; overflow: hidden; }
#scene-bas { position: absolute; width: 100%; height: 340px; left: 0; top: 0; z-index: 1; overflow: hidden; max-height: 100%; border-radius: 6px 6px 0px 0px; }
#nuages1 { position: absolute; width: 67%; height: 100%; left: 0; top: 0; }
#nuages2 { position: absolute; width: 100%; height: 60%; left: 0; top: 0; }
#nuages1 img, #nuages2 img { position: absolute; width: 100%; height: 100%; top: 0; }
#image-footer { position: relative; z-index: 2; max-width: 100%; width: 100%; }
#image-footer-g { position: absolute; z-index: 3; width: 100%; left:0; top: 0; }
#image-footer-d { position: absolute; z-index: 3; width: 100%; right: 0; top: 0;}

#mentions-legales { position: relative; font-family: Rosinski; color: var(--couleur-moyen); margin: -5px auto 0; z-index: 10; border-top: solid #afb0ae 1px; width: 100%; display: flex; justify-content: center; background: var(--couleur-sombre); padding-top: 5px; }
#mentions-legales div { padding: 0px 5px 0px 5px; }
#mentions-legales div a { color: var(--couleur-moyen); text-decoration: none; transition: .3s; }
#mentions-legales div a:hover { color: var(--couleur-or); }
#fond-footer::before { width: 100%; height: 50px; background: url('../img/barre_bas.png') bottom right repeat-x; content: ""; position: absolute; top: 0; z-index: 100; transform: rotate(180deg); }
#cartouche-titre-footer { position: absolute; z-index: 3; top: -61px; left: 50%; transform: translate(-50%, 0%); max-width: 100%; }
#papillon-footer { position: absolute; top: -65px; left: calc(50% - 80px); z-index: 4; width: 26px; }

@media (max-width:700px) {
	#en-bas { padding-top: 10px; }
	#fond-footer::before { height: 15px; background-size: cover; }
}

/* ==========================================================
   Barre supérieure (40px, disparaît au scroll)
   ========================================================== */
.barre-superieure { position: relative; z-index: 110; height: var(--hauteur-barre-superieure); width: 100%; color: var(--couleur-claire); display: flex; align-items: center; transition: opacity 0.3s ease; }
/* Accueil : sombre transparent */
body.home .barre-fond { position: relative; z-index: 100; background: linear-gradient(to bottom, rgba(26,26,26,0.2) 0, rgba(26,26,26,0.2) var(--hauteur-barre-superieure), transparent var(--hauteur-barre-superieure), transparent 100%); }
/* Autres pages : sombre opaque */
/*body:not(.home) .barre-superieure { background: var(--couleur-sombre); z-index: 20; }*/
body:not(.home) .barre-fond { position: relative; z-index: 100; background: linear-gradient(to bottom, var(--couleur-sombre) 0, var(--couleur-sombre) var(--hauteur-barre-superieure), transparent var(--hauteur-barre-superieure), transparent 100%); }
body:not(.home).header-sticky .barre-superieure { margin-bottom: var(--hauteur-entete-standard); }
.barre-superieure-contenu { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

/* Contenu de la zone de gauche */
.barre-superieure-gauche { display: flex; align-items: center; padding: 0px 15px; }
.icone-avant-phrase { display: inline-block; width: 18px; height: 18px; fill: var(--couleur-claire); margin-right: 5px; }
.texte-avant-phrase { font-size: 14px; text-transform: uppercase; font-family: "Balthazar", serif; }

/* Contenu de la zone de droite */
.barre-superieure-droite { display: flex; align-items: center; gap: 15px; padding: 0px 15px; }
.formulaire-recherche { display: flex; width: 100%; }
.champ-recherche { padding: 5px 10px; border: none; width: 100%; height: 24px; margin: 0 auto; background: #2a2a2a; color: var(--couleur-claire); font-family: Artifex; font-size: 10px; border-radius: 3px;  }

.icone-connexion-profil { position: relative; display: inline-block; }
.membre-btn-avatar, .membre-btn-connexion { cursor: pointer; }
.membre-btn-avatar img { width: 30px; height: 30px; margin-top: 5px; border-radius: 5px; background-color: white; transition: .2s ease; }
.membre-btn-avatar:hover img { transform: scale(1.3); }
.membre-btn-connexion img { width: 30px; filter: brightness(.6); margin-top: 5px; transition: .2s ease; }
.membre-btn-connexion:hover img { transform: scale(1.5); filter: brightness(1); }

#membre-menu { position: absolute; top: 5px; right: 0;  border-radius: 5px 5px 0 0; background: var(--couleur-claire); width: 250px; font-family: Mulish; font-size: 14px; padding: 10px; opacity: 0; transform: translateY(-50px); pointer-events: none; box-shadow: 0px 20px 25px black; transition: opacity .3s ease, transform .7s ease; }
#membre-menu.ouvert { opacity: 1; transform: translateY(0); pointer-events: auto; }
#membre-menu img { float: right; }
#membre-menu a { display: block; border-radius: 3px; width: 100px; padding: 5px; color: var(--couleur-sombre); text-decoration: none; }
#membre-menu a:hover { background-color: var(--couleur-sombre); color: var(--couleur-claire); }
#membre-menu a:last-of-type { color: gray; }
#membre-menu a:last-of-type:hover { color: var(--couleur-or); }
#membre-menu::after { content: ""; position: absolute; bottom: -22px; left: 0; width: 100%; height: 24px; background: url('../img/barre_profil.png') top left no-repeat; }

/* Décalage si la barre d'administration Wordpress est affichée (bureau et mobile) */
body.admin-bar.header-sticky .entete { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar.header-sticky .entete { top: 0px; } }

/* ==========================================================
   Zone titre et menu
   ========================================================== */
.zone-titre-menu { width: 100%; display: flex; align-items: center; transition: height 0.3s ease; }
.zone-titre-menu-contenu { position: relative; padding: 0px 15px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }

/* Hauteur page d'accueil vs pages internes */
body.home .zone-titre-menu { height: var(--hauteur-entete-accueil); }
body:not(.home) .zone-titre-menu { height: var(--hauteur-entete-standard); }

/* ==========================================================
   Logo Thorgal (la même image partout, invert au scroll)
   ========================================================== */
.logo-site { padding: 15px; transition: filter 0.5s ease, height 0.3s ease; }
body:not(.home) .logo-site { max-height: 40px; }
body.home .logo-site { max-height: 70px; filter: drop-shadow(0 0 .05rem gray); } /* Un peu plus grand et halo gris en page d'accueil */
body.header-sticky .logo-site { filter: invert(1); }

/* ==========================================================
   Menu principal et sous-menus
   ========================================================== */
.zone-menu-principal { display: flex; padding: 15px; }
.menu-principal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: clamp(10px, 3vw, 30px); row-gap: 10px; }
ul.menu-principal > li { position: relative; }
ul.menu-principal > li > a { position: relative; text-decoration: none; color: var(--couleur-claire); padding: 10px 5px; display: inline-block; font-family: Artifex; text-transform: uppercase; text-shadow: #888 0 0 10px; transition: color .3s ease; }
@media (min-width:901px) {
	ul.menu-principal > li > a::before, ul.menu-principal > li > a::after { content: ""; position : absolute; left: 0; width: 100%; height: 1px; inset-inline: 0; margin-inline: auto; background: linear-gradient(to right, transparent 0%, var(--couleur-claire) 50%, transparent 100%); opacity: 0; transition: all .6s; transform: scaleX(0); transform-origin: center; z-index: 100; }
	ul.menu-principal > li > a::before { top: 0; }
	ul.menu-principal > li > a::after { bottom: 0; }
	ul.menu-principal > li:hover > a::before, ul.menu-principal > li:hover > a::after { opacity: 1; transform: scaleX(1); }

	/* Couleur du menu au scroll */
	body.header-sticky .menu-principal > li > a { color: var(--couleur-sombre); }
	body.header-sticky ul.menu-principal > li > a::before, body.header-sticky ul.menu-principal > li > a::after { background: linear-gradient(to right, transparent 0%, var(--couleur-sombre) 50%, transparent 100%); }
}

/* Sous-menus à droite */
.menu-principal li > ul { position: absolute; min-width: 190px; top: 100%; left: -25px; list-style: none; margin-top: 10px; padding: 5px; background-color: white; border-radius: 3px 3px 0 0; box-shadow: white 0px 0px 100px; transition: color .1s; z-index: 100; display: none; }
.menu-principal li > ul::before { content: ''; position: absolute; width: 100%; height: 10px; top: -10px; }
.menu-principal li > ul::after { content: ''; position: absolute; width: 100%; height: 20px; bottom: -20px; left: 0; filter: brightness(2); }
.menu-principal li > ul > li > a { opacity: 0; }

@media (min-width:901px) {
	.menu-principal li:hover > ul { display: block; }
	.menu-principal li:hover > ul > li > a { opacity: 1; }
	.menu-principal li > ul > li > a:hover, .menu-principal li > ul > li.current_page_item > a:hover { background-color: var(--couleur-sombre); box-shadow: var(--couleur-sombre) 0px 0px 30px; color: var(--couleur-claire); z-index: 100; }
	.menu-principal li > ul > li.current_page_item > a { background: #ddd; }
	.menu-principal li > ul::after { background: url('../img/barre_profil.png') top left no-repeat; }
}

.menu-principal li > ul > li > a { position: relative; display: flex; flex-grow: 1; font-family: Mulish; border-bottom: 1px solid hsla(0,0%,50%,0); color: rgb(36,37,38); font-size: 14px; font-weight: 400; background: white; border-radius: 3px; padding: 8px 0px 8px 15px; line-height: 1.5; text-decoration: none; }
.menu-principal li > ul > li { position: relative; }
.menu-principal li > ul > li > ul { left:100%; top: -10px; margin-left: 10px; }
.menu-principal li > ul > li > ul::before { content: ''; position: absolute; width: 10px; height: 100%; top: 0; left: -10px; }

/* ==========================================================
   Menu pour mobile
   ========================================================== */
@media (max-width:900px) {
	.zone-menu-principal { padding: 0; }
	.barre-superieure-contenu { justify-content: flex-end; }
	.barre-superieure-gauche { display: none; }
	.barre-superieure-droite { width: 100%; }
	.logo-site { max-height: 40px !important; }
	
	.menu-mobile { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; width: 31px; background: none; border: none; cursor: pointer; background: var(--couleur-claire); color: var(--couleur-sombre); border-radius: 3px; padding: 6px; z-index: 1000; }
	body.header-sticky .menu-mobile { background: var(--couleur-sombre); }
	
	.menu-mobile span { height:3px; border-radius:2px; transition:.3s; }
	.menu-mobile span:nth-child(1), .menu-mobile span:nth-child(3) { background: var(--couleur-sombre); }
	.menu-mobile span:nth-child(2) { border-bottom: solid var(--couleur-sombre) 3px; border-top: solid var(--couleur-sombre) 3px; border-left: solid var(--couleur-sombre) 3px; background: var(--couleur-claire); }
	body.header-sticky .menu-mobile span:nth-child(1), body.header-sticky .menu-mobile span:nth-child(3) { background: var(--couleur-claire); }
	body.header-sticky .menu-mobile span:nth-child(2) { border-color: var(--couleur-claire); background: var(--couleur-sombre); }
	
	body.menu-ouvrir .menu-mobile span:nth-child(1) { transform: translateY(8px) rotate(25deg); }
	body.menu-ouvrir .menu-mobile span:nth-child(2) { border: 0; width: 10px; z-index: 200; transform: translateX(10.5px) rotate(90deg); }
	body.menu-ouvrir .menu-mobile span:nth-child(3) { transform: translateY(-8px) rotate(-25deg); }

	.menu-principal { position:fixed; top:0; left:0; height:100vh; width:260px; background:var(--couleur-sombre); flex-direction:column; flex-wrap:nowrap; align-items:stretch;  padding:80px 20px; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; row-gap:0; column-gap:0; }
	body.menu-ouvrir .menu-principal { transform:translateX(0); }
	.menu-principal::before {content: ''; width: 70px; min-height: 20px; display: block; margin-bottom: 10px; background: url('../img/deco_h.png') top left no-repeat; opacity: .6; filter: invert(1);}
	.menu-principal::after {content: ''; width: 70px; min-height: 20px; display: block; margin-top: 10px; background: url('../img/deco_b.png') bottom left no-repeat; opacity: .6; filter: invert(1);}

	ul.menu-principal > li { width:100%; }
	ul.menu-principal > li > a { opacity: .6; padding:15px 0; font-size:18px; text-shadow:none; color:var(--couleur-claire); display:block; }
	ul.menu-principal > li > a:hover { opacity: 1; }
	.menu-principal li > ul { display:none; position:static; background:none; box-shadow:none; margin:0; padding:0; }

	.menu-principal li.ouvrir > ul { display:block; }
	.menu-principal li > ul > li.current_page_item > a { background: #2a2a2a; }
	.menu-principal li > ul > li > a { opacity: .6; padding:10px 0 10px 20px; background:none; border:none; color:var(--couleur-claire); font-size:16px; }
	.menu-principal li > ul > li > a:hover { opacity: 1; }
	.menu-principal li > ul > li > ul > li > a { padding:10px 0 10px 40px; font-size:15px; }
}

@media (min-width:901px) { .menu-mobile { display:none; }}

/* ==========================================================
   Bandeau d'images en page d'accueil
   ========================================================== */
.bandeau-accueil { position: relative; z-index: 1; width: 100%; height: 560px; margin-bottom: 140px; }
/*.bandeau-accueil-fond { position: absolute; top: -140px; left: 0; width: 100%; height: 700px; background-size: cover; background-position: center center; overflow: hidden; transition: opacity 1s ease; }
.bandeau-accueil-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 3s ease-in-out; }
.bandeau-accueil-slide.visible { opacity: 1; } */
#bandeau-accueil-decoupe { position: absolute; left: 0; bottom: -1px; width: 100%; height: 50px; background: transparent url('../img/barre_haut.png') bottom left repeat-x; z-index: 10; }

.accueil { position: relative; width: 100%; height: 700px; top: -140px; left: 0; background-color: black; overflow: hidden; }
.accueil .scene { position: absolute; bottom: 0; width: 100%; aspect-ratio: 1998 / 1125; min-height: 700px; opacity: 0; transition: opacity 3s ease-in-out; }
.accueil .scene.visible { opacity: 1; }

.accueil .scene::after { content: ""; position: absolute; inset: 0; background-image: var(--img-after); background-size: cover; background-position: center bottom; background-repeat: no-repeat; transform: scale(1.1); transform-origin: center; z-index: 0; }
.accueil .scene::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%); animation: lumieres 4s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events: none; z-index: 1; }

.accueil .scene .fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: bottom center; z-index: 2; }
.accueil .scene .perso { position: absolute; inset: 0; left: 50%; height: 100%; object-fit: cover; transform-origin: bottom center; z-index: 3; }

.accueil .scene.animate::after { animation: reduire_fond 5s ease-out forwards; }
.accueil .scene.animate .fond { transform: scale(1.2); animation: reduire_img 5s ease-out forwards; }
.accueil .scene.animate .perso { transform: translateX(-50%) scale(.8); animation: agrandir_img 5s ease-out forwards; }

@keyframes reduire_fond { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes lumieres { 0% { opacity: .5; } 12% { opacity: .3; } 25% { opacity: .7; } 56% { opacity: 0; } 63% { opacity: .7; } 82% { opacity: .2; } 100% { opacity: .5; } }
@keyframes agrandir_img { from { transform: translateX(-50%) scale(.8); } to { transform: translateX(-50%) scale(1); } }
@keyframes reduire_img { from { transform: scale(1.2); } to { transform: scale(1); } }

body.home.header-sticky .barre-superieure { margin-bottom: var(--hauteur-entete-accueil); }

/* ==========================================================
   Polices
   ========================================================== */
@font-face {
    font-family: 'atelanblack';
    src: url("../font/atelan-black-webfont.eot");
    src: url("../font/atelan-black-webfont.eot?#iefix") format("embedded-opentype"), url("../font/atelan-black-webfont.woff") format("woff"), url("../font/atelan-black-webfont.ttf") format("truetype"), url("../font/atelan-black-webfont.svg#atelanblack") format("svg");
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'atelanmedium';
    src: url("../font/atelan-medium-webfont.eot");
    src: url("../font/atelan-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../font/atelan-medium-webfont.woff") format("woff"), url("../font/atelan-medium-webfont.ttf") format("truetype"), url("../font/atelan-medium-webfont.svg#atelanblack") format("svg");
    font-weight: normal; font-style: normal;
}
@font-face {font-family : Artifex; src: url('../font/artifex-hand-cf-regular.otf');}
@font-face {font-family : Mulish; src: url('../font/Mulish-VariableFont_wght.ttf');}
@font-face {font-family : Rosinski; src: url('../font/Rosinski-Regular.otf');}

/* ==========================================================
   Général
   ========================================================== */

.titre-thorgal, .sous-titre-thorgal {position: relative; color: #555; text-align: center; cursor: default; clear: both; font-family: Artifex; letter-spacing: -0.1em; padding: 0;}
.titre-thorgal {font-size: calc(24px + 4vw);}
.avec-sous-t {margin-bottom: 0px;}
.sous-titre-thorgal {font-size: calc(16px + 1vw); margin: 0px;}
.titre-accueil, .titre-eclairages, .titre-collection, .titre-albums, .titre-communaute, .titre-taverne, .titre-forum, .titre-kriss, .titre-louve, .titre-jeunesse, .titre-saga {position: relative; cursor: default;}
.titre-accueil::before, .titre-eclairages::before, .titre-collection::before, .titre-albums::before, .titre-albums::before, .titre-communaute::before, .titre-taverne::before, .titre-forum::before, .titre-kriss::before, .titre-louve::before, .titre-jeunesse::before, .titre-saga::before {position: absolute; top: -1em; left: 5px; text-align: left; white-space: nowrap; font-size: calc(10px + 1vw); letter-spacing: normal; color: #aaa; visibility: visible;}
.titre-accueil::before {content: 'Thorgal';}
.titre-eclairages::before {content: 'Éclairages';}
.titre-collection::before {content: 'Collection';}
.titre-albums::before {content: 'Albums';}
.titre-communaute::before {content: 'La Communauté';}
.titre-taverne::before {content: 'La taverne';}
.titre-forum::before {content: 'Le forum';}

.titre-kriss::before {content: 'Kriss de Valnor';}
.titre-louve::before {content: 'Louve';}
.titre-jeunesse::before {content: 'La jeunesse de Thorgal';}
.titre-saga::before {content: 'Thorgal Saga';}

.texte-j p {color: #222; font: 400 14px Mulish, sans-serif; text-align: justify; margin-bottom: 1.2em; cursor: default;} /* Texte justifié */
.texte-c p {color: #222; font: 400 14px Mulish, sans-serif; text-align: center; margin-bottom: 1.2em; cursor: default;} /* Texte centré */
.texte-cb p {color: var(--couleur-claire); font: 300 14px Mulish, sans-serif; text-align: center; margin-bottom: 1.2em; cursor: default;} /* Texte blanc centré */

#menu-principal {background-image: url("../img/deco_menu.png"); background-repeat: no-repeat; background-position: center; background-size: 100% auto;}

/* Eléments décoratifs en arrière-plan */
.page-thorgal { position: relative; }
.element-deco { position: absolute; z-index: -1; opacity: .2; pointer-events: none; max-width: 250px !important; max-height: 250px !important; filter: grayscale(1) contrast(0); }

/* Bandeau noir en haut de page sans contenu */
#barre-haut::before {width: 100%; height: 50px; background: var(--couleur-sombre) url('../img/barre_haut.png') bottom left repeat-x; display: block; content: "";}
body.home #barre-haut::before {display: none;}

/* Bandeau noir en haut de page avec du contenu (section "Éclairages" par exemple) */
#zone-noire {position: relative; background: var(--couleur-sombre); padding-top: 30px; overflow: hidden;}
#zone-noire .titre-thorgal { color: var(--couleur-claire); }
#zone-noire p {color: #f0f0f0; font: 300 14px Mulish, sans-serif; margin-left: 15%; margin-right: 15%; text-align: justify; cursor: default; margin-bottom: 1.2em; position: relative; z-index: 2;}
#zone-noire::after {width: 100%; height: 50px; background: transparent url('../img/barre_haut.png') bottom left repeat-x; clear: both; display: block; content: ""; position: relative; bottom: -1px; z-index: 2;}

/* Bandeau blanc puis noir en haut de page avec du contenu (section "Communauté" par exemple) */
#bandeau-blanc {position: relative; text-align: center;}
#bandeau-blanc::after {width: 100%; height: 40px; background: transparent url('../img/barre_milieu1.png') bottom left repeat-x; content: ""; position: absolute; bottom: -1px; left: 0; z-index: 2; z-index: 20;}
#bandeau-noir {background: var(--couleur-sombre); position: relative; text-align: center; padding: 20px 0 30px 0; margin-bottom: 30px;}
#bandeau-noir::after {width: 100%; height: 50px; background: transparent url('../img/barre_milieu2.png') bottom left repeat-x; content: ""; position: absolute; bottom: -1px; left:0; z-index: 2;}

/* Menu dynamique de gauche pour les pages ayant plusieurs paragraphes */

.menu-thor {width: 200px; position: relative;}
.menu-thor ul {position: sticky; top: 50%; transform: translateY(-50%); list-style: none; padding: 0; margin: 0;}
.menu-thor ul::before {content: ''; width: 70px; height: 20px; display: block; margin-left: 30px; background: url('../img/deco_h.png') top left no-repeat; opacity: .3; transition: .3s;}
.menu-thor ul:hover::before {transform: translateY(-20px);}
.menu-thor ul::after {content: ''; width: 70px; height: 20px; display: block; margin-left: 30px; background: url('../img/deco_b.png') bottom left no-repeat; opacity: .3; transition: .3s;}
.menu-thor ul:hover::after {transform: translateY(20px);}
.menu-thor li {font-family: Mulish; font-size: 10px; margin: 1rem 0;}
.menu-thor a {text-decoration: none; color: #666; font-weight: normal; font-size: 13px; margin-left: 30px; letter-spacing: .5px; transition: .3s;}
.menu-thor a:hover, .menu-thor a.active {color: var(--couleur-sombre); font-weight: bolder;}
.page-thorgal-contenu {flex: 1;}
.paragraphe {padding-top: 10px;}

.page-thorgal-flex { display: flex; text-align: center; }
.page-thorgal-menu { max-width: 100%; margin-right: 100px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .page-thorgal-flex {display: inherit;}
}
@media (max-width: 648px) {
  .page-thorgal-menu {flex-direction: column; margin-right: 0px;}
  .menu-thor ul {position: static; display: none;}
}

/* Page normale avec une petite marge */
.page-thorgal-normal {margin: 0 50px; text-align: center;}
@media (max-width: 648px) {
  .page-thorgal-normal {margin: 0 auto !important;}
  .deco {display:none !important;} /* La classe "deco" est à placer sur tout élément décoratif à retirer dans la version mobile */
}

/* ==========================================================
   Image affichée pendant le chargement d'une nouvelle page
   ========================================================== */

#transition-page { position: fixed; inset: 0; background: var(--couleur-claire); opacity: 0; pointer-events: none; transition: opacity .5s ease; z-index: 999999; }
#transition-page.active { opacity: 1; }
#transition-page .transition-titre { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
#transition-page .transition-image { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: .8s ease; }
#transition-page .transition-image::after { content: ""; position: absolute; top: 50%; left: 50%; width: 90%; height: 90%; opacity: .5; transform: translate(-50%, -50%) scale(1.2); background-image: url('../img/patience-thorgal.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 1s ease; }
#transition-page.animation .transition-image { opacity: 1; }
#transition-page.animation .transition-image::after { transform: translate(-50%, -50%) scale(1); }
#transition-page .titre-transition { font-size: calc(24px + 4vw) !important; }

/* ==========================================================
   Icône couper/mettre le son
   ========================================================== */

#btn-coupure {
  position: fixed; bottom: 25px; left: 18px; width: 35px; height: 35px;
  border-radius: 4px; border: solid #444 1px !important; background: rgba(0,0,0,.5); padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: 0.2s;
}
#btn-coupure:hover {transform: scale(1.1); border: solid gray 1px;}
#btn-coupure.muted .son-icone {opacity: 0.3; animation-play-state: paused;}
.son-icone {display: block; width: 24px; height: 24px;}

/* ==========================================================
   Papillons
   ========================================================== */

.conteneur-papillons { position: relative; max-width: 100%; }
.zone-papillons { position: absolute; max-width: 100%; width: 100%; height:600px; top: -200px; overflow: hidden; pointer-events: none; z-index: 99; }
.papillon-conteneur { position: absolute; transform-origin: center center; }
.papillon-conteneur.inverse { transform: scale(-1, 1); }
.papillon-img { transform-origin: center center; animation: battement_ailes 220ms alternate infinite; }
.papillon-img.v2, .papillon-img.pause { animation-duration: 420ms; }
@keyframes battement_ailes { from { transform: rotateX(0); } to { transform: rotateX(80deg); }}

/* ==========================================================
   Bandeau messagerie
   ========================================================== */

#fep-notification-bar { background-color: var(--couleur-or); border: none; font-family: Mulish; padding: 6px; border-radius: 0; cursor: default; }
#fep-notification-bar .fep-notice-dismiss { padding: 0; font-size: 20px; }

/* ==========================================================
   Bouton et formulaire de connexion
   ========================================================== */
/* Version widget de base pour le forum ou ailleurs */
.connexion-groupe {margin: 0 auto; font-family: Artifex; background: lightgray; max-width: 300px; border-radius: 5px; border: solid var(--couleur-sombre) 3px; text-align: center;}
.connexion-groupe p {background: var(--couleur-sombre); color : var(--couleur-claire); margin: 0; padding: 10px;}
.connexion-groupe a, .connexion-groupe label {text-decoration: none; font-size: 12px; color: #888; transition: .3s;}
.connexion-groupe a:hover {font-weight: normal; color: var(--couleur-claire);}
.connexion-groupe button {cursor: pointer; color: var(--couleur-claire); min-width: 140px; height: 25px; align-content: center; display: inline-block; text-align: center; font-family: Artifex; font-size: 13px; padding: 5px; border: solid #666 1px; background: var(--couleur-sombre); transition-duration: .4s; text-transform: uppercase; margin: 10px; line-height: 1;}
.connexion-groupe button:hover {background: #666; color: orange;}
.connexion-groupe input { max-width: 180px; margin: 5px 5px 0px 5px; }
body.home .connexion-groupe input { max-width: 180px; }
.connexion-groupe input[type="checkbox"]:checked {accent-color: var(--couleur-sombre);}
.connexion-groupe img {float: left; margin-top: 20px; margin-left: 10px;}
.resultat-mdp-oublie, .resultat-connexion, .resultat-mdp {color: var(--couleur-or);}

/* Version pleine page pour les pages de connexion */
.connexion-groupe-p {position: relative; width: 718px;  max-width: 100%; height: 447px; border: 0; background: var(--couleur-claire) url('../img/trou.png') no-repeat center;}
.connexion-groupe-p .formulaire-connexion, .connexion-groupe-p .formulaire-mdp-oublie {position: absolute; width: 320px; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.connexion-groupe-p.connexion-groupe p {background-color: transparent;}

/* Version qui apparaît en fenêtre en cliquant sur le bouton de connexion */
.login-modal {position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; z-index: 100000;}
.login-modal.active {opacity: 1; visibility: visible;}
.login-modal-dedans {position: relative; width: 100%; max-width: 320px; border-radius: 5px; box-shadow: 0 10px 40px rgba(0,0,0,.25); pointer-events: auto;}
.login-overlay {position: fixed; inset: 0; background: var(--couleur-sombre) url('../img/fond_thorgal_gris.png') no-repeat center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; z-index: 99999;}
.login-overlay.active {opacity: .9; visibility: visible; pointer-events: auto;}
.login-fermer {position: absolute; top: 10px; right: 10px; background: var(--couleur-claire); border-radius: 5px; padding: 0 5px; border: none; font-size: 26px; line-height: 1; cursor: pointer;}
.login-voir, .mdp-perdu-voir {transition: opacity 0.3s ease, transform 0.3s ease;}
.cacher {opacity: 0; transform: translateY(10px);}

/* ==========================================================
   Transformer une moche checkbox en switch moderne
   Format : <label class="switch"><input type="checkbox" name="XXX" value="1"><span class="slider"></span><span class="text">texte texte texte</span></label>
   ========================================================== */
.switch {display:inline-flex; align-items:center; gap:12px; cursor:pointer; user-select:none;}
.switch input {display:none;}
.slider {width: 4px; min-width:44px; height:24px; background:white; border:2px solid var(--couleur-sombre); border-radius:5px; position:relative; transition:background .3s;}
.slider::before {content:""; width:18px; height:18px; background:var(--couleur-sombre); border-radius:5px; position:absolute; top:50%; left:2px; transform:translateY(-50%); transition:transform .3s, background .3s;}
.switch input:checked + .slider {background: var(--couleur-sombre);}
.switch input:checked + .slider::before {transform: translate(20px,-50%); background: white;}

/* ======================================
   Antispam
   ====================================== */
.bloc-antispam { border: 2px solid #1a1a1a; border-bottom: 15px solid #1a1a1a; max-width: 300px; width: 100%; margin: 30px auto 0 auto; font-family: Artifex; }
.titre-antispam { background: #1a1a1a; color: #efeeed; padding: 10px; }
.contenu-antispam { display: grid; grid-template-columns: 50% 50%; background: #bba; }
.image-antispam { width: 100%; height: auto; display: block; padding: 0 !important; max-width: 150px !important; }
.liste-antispam { padding: 10px; margin: 0 auto; display: flex; flex-direction: column; }
.choix-antispam { display: flex; flex-direction: column; }
.choix-antispam span {margin-bottom: 5px; border:2px solid #1a1a1a; cursor:pointer; width:75px; height:36px; line-height:36px; text-align:center; border-radius:3px; background:#efeeed; color:#1a1a1a; transition: .2s;}
.choix-antispam span.actif {background:#1a1a1a; color:#efeeed;}
@media (max-width: 300px) { .contenu-antispam { grid-template-columns: 1fr; } }