/*
   CSS spécifique pour la partie « Éclairages »
*/

#fond-thorgal-noir {position: absolute; top: calc(50% - 25px); left: 50%; transform: translate(-50%, -50%); max-width: 100%; z-index: 2;}

#halo {position: absolute; top: 50%; left:50%; width: 300px; height: 300px;  border-radius:50%; z-index: 1; transform: translate(-50%, -50%); pointer-events: none; will-change: transform, left, top; background: radial-gradient(circle at center, rgba(255, 170, 150, 0.9) 0%, rgba(255, 180, 150, 0.6) 15%, rgba(255, 190, 150, 0.3) 30%, rgba(255, 200, 150, 0.15) 45%, rgba(255, 210, 150, 0.05) 60%, rgba(255, 220, 150, 0.0) 75%); mix-blend-mode: screen; filter: blur(20px);}

#angle {float: right; position: relative; top: -30px; z-index: 2;}

@media (max-width: 648px) {
  #angle {display:none;}
}

/*
  Icône son - Feu de camp
*/
.son-icone {fill: white; opacity: 0.95; transform-origin: center bottom; animation: danse_flammes 1.4s infinite ease-in-out;}
.buches rect {fill: #eee; opacity: 0.8;}
#btn-coupure.muted .buches rect {opacity: 0.3;}
@keyframes danse_flammes { /* Animation feu de camp */
  0%   { transform: scale(1,1) rotate(0deg); }
  25%  { transform: scale(1.05,1.1) rotate(-1.5deg); }
  50%  { transform: scale(0.97,1.05) rotate(1deg); }
  75%  { transform: scale(1.08,1.12) rotate(-1deg); }
  100% { transform: scale(1,1) rotate(0deg); }
}

/*
  Auteurothèque
*/

#scenaristes, #dessinateurs, #coloristes { text-align: center; }
#scenaristes div.coul-choix, #dessinateurs div.coul-choix, #coloristes div.coul-choix { border-color: black black orange black; }  /* La tuile sélectionnée */
#scenaristes a, #dessinateurs a, #coloristes a { animation: apparition 1s ease; }
@keyframes apparition { from {opacity: 0;} to {opacity: 1;} }

.coul-parag { position: relative; font-size: calc(20px + 2vw) !important; font-family: Rosinski; color: white !important; background: var(--couleur-sombre); margin: 50px auto 20px; border-radius: 5px; }
.coul-parag img { position: absolute; bottom: -513px; right: -100px; max-width: 100%; z-index: -1; }
@media (max-width: 648px) { .coul-parag img {right: 0px;} }
.coul-titre {clear: both; padding: 0; margin: 30px auto -20px !important; font-size: 28px !important; font-family: Artifex; text-transform: uppercase; font-weight: bolder; letter-spacing: -0.1em;}
.coul-img {position: absolute; bottom: 0px; left: 0px; z-index: 10; opacity: .9; pointer-events: none;}
.coul-alb {position: relative; width: 60px; height: 80px; text-align: center; margin: 10px 4px 20px; padding-top: 15px; vertical-align:middle; display:inline-block; box-shadow: 3px 3px 8px #444; border: solid 1px; border-color: #ccc #aaa #aaa #ddd; text-transform: uppercase; line-height: 1em; font-family: "Balthazar", serif; box-sizing: border-box !important; cursor: pointer;}
a.coul-hover { position: relative; width: 60px; height: 80px; display: inline-block; margin: 10px 4px; }
.coul-alb.intro { background-color: white; }
.coul-g { font-size: 20px; position: relative; z-index: 1; line-height: 1em; }
.coul-p { font-size: 12px; color: black; line-height: 12px; position: relative; z-index: 1; line-height: 1em; }

/* Cartouches auteurs */
.coul-legende {position: relative; width: 100px; height: 190px; text-align: center; margin: 0 7px 30px 0; padding: 0; vertical-align:middle; display: inline-block; font-size: 15px; line-height: 13px; font-family: Artifex; color: white; transition: .3s; box-shadow: 3px 3px 8px #aaa; text-transform: uppercase; cursor: pointer; border-radius: 50% 50% 50% 50% / 2% 2% 5% 5%; border-bottom: solid black 6px; box-sizing: border-box !important;}
.coul-legende img  {border-radius: 5% 5% 50% 50% / 2% 2% 5% 5%; width: 100%; height: 150px; object-fit: cover; object-position: 0% 50%;  display:none; }
.coul-legende p { margin: 150px auto 0; filter: drop-shadow(0px 0px 0.3rem black); }
.coul-legende.coul-saga p, .coul-legende.coul-tous p { display: none; }
.coul-legende:hover {transform: rotate(4deg);}
a .coul-legende:hover, a:visited .coul-legende:hover, a .coul-alb:hover, a:visited .coul-alb:hover { color: orange; }
a .coul-legende, a:visited .coul-legende, a .coul-alb, a:visited .coul-alb { color: #600; cursor: pointer; }
.coul-legende::after { content: attr(data-albums); padding-top: 15px; position: fixed; color: black; width: 100%; left: 0; font-size: 12px; font-weight: bold; }

.coul-alb.coul-mar, .coul-alb.coul-ros, .coul-alb.coul-ros2, .coul-alb.coul-yan, .coul-alb.coul-vit, .coul-alb.coul-geo, .coul-alb.coul-sur, .coul-alb.coul-sur2, .coul-alb.coul-dor, .coul-alb.coul-spa, .coul-alb.coul-ham, .coul-alb.coul-vat, .coul-alb.coul-gra, .coul-alb.coul-sen, .coul-alb.coul-vig, .coul-alb.coul-coc {position: absolute; top: -5px; left: -4px; transform: rotate(4deg);}

.coul-legende.coul-tous { background: url('../img/eclairages/auteurotheque/auteurotheque-tous.png') center no-repeat; }
.coul-legende.coul-ros { background: linear-gradient(to bottom, transparent 0 95%, #cc8 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-rosinski.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-sen { background: linear-gradient(to bottom, transparent 0 95%, #cc8 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-sente.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-sur { background: linear-gradient(to bottom, transparent 0 95%, #8a7 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-surzhenko.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-dor { background: linear-gradient(to bottom, transparent 0 95%, #8a7 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-dorison.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-ham { background: linear-gradient(to bottom, transparent 0 95%, #9aa 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-vanhamme.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-gra { background: linear-gradient(to bottom, transparent 0 95%, #9aa 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-graza.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-vig { background: linear-gradient(to bottom, transparent 0 95%, #9aa 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-vignaux.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-mar { background: linear-gradient(to bottom, transparent 0 95%, #a97 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-mariolle.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-vat { background: linear-gradient(to bottom, transparent 0 95%, #a97 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-vattani.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-yan { background: linear-gradient(to bottom, transparent 0 95%, #a9a 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-yann.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-vit { background: linear-gradient(to bottom, transparent 0 95%, #a9a 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-devita.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-geo { background: linear-gradient(to bottom, transparent 0 95%, #a9a 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-georges.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-spa { background: linear-gradient(to bottom, transparent 0 95%, #889 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-spano.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-coc { background: linear-gradient(to bottom, transparent 0 95%, #aa9 95% 100%), url('../img/eclairages/auteurotheque/auteurotheque-decock.jpg') bottom center/cover no-repeat; }
.coul-legende.coul-saga { background: url('../img/eclairages/auteurotheque/auteurotheque-saga.png') center no-repeat; }

.coul-alb {
.coul-ros, .coul-sen { background: linear-gradient(200deg,black,10%,#bb7,90%,white); }
.coul-sur, .coul-dor { background: linear-gradient(200deg,black,10%,#796,90%,white); }
.coul-gra, .coul-ham, .coul-vig { background: linear-gradient(200deg,black,10%,#899,90%,white); }
.coul-mar, .coul-vat { background: linear-gradient(200deg,black,10%,#986,90%,white); }
.coul-yan, .coul-vit, .coul-geo { background: linear-gradient(200deg,black,10%,#989,90%,white); }
.coul-spa { background: linear-gradient(200deg,black,10%,#778,90%,white); }
.coul-coc { background: linear-gradient(200deg,black,10%,#998,90%,white); }
}

.coul-tous, .coul-saga {width: 60px; background: linear-gradient(200deg,black,10%,#777,90%,white);}
.coul-legende.coul-tous p,.coul-legende.coul-yan p, .coul-legende.coul-gra p, .coul-legende.coul-saga p {padding-top: 10px;}
/* pour Thorgal Saga */
.coul-alb.coul-recht, .coul-alb.coul-duval, .coul-alb.coul-rouge, .coul-alb.coul-walter, .coul-alb.coul-bec, .coul-alb.coul-bec-mangin, .coul-alb.coul-etien, .coul-alb.coul-legrand-djian, .coul-alb.coul-tatti, .coul-alb.coul-aouamri, .coul-alb.coul-ozanam { background: linear-gradient(200deg,black,10%,#ddd,90%,white); position: absolute; top: -5px; left: -4px; transform: rotate(4deg); }
.coul-legende.coul-saga::after { display: none; }

/* Version mobile */
@media (max-width: 648px) {
	#scenaristes, #dessinateurs, #coloristes { overflow: auto; }
	.coul-parag { margin-bottom: 20px; }
	.coul-legende { width: 90px; height: 155px; font-size: 13px; line-height: normal; }
	.coul-legende p { margin: 110px auto 0; }
	.coul-legende img { height: 100px; }
	.coul-legende::before { left: 5px; width: 75px; }
	.coul-saga.coul-legende img { width: auto; }
	.coul-tous, .coul-saga { width: 60px; }
	.coul-legende.coul-tous p { padding-top: 114px; }
	.coul-legende.coul-tous::before, .coul-legende.coul-saga::before { width: 45px; }
}

/*
  Atelier des Auteurs
*/

.autour2 { width: 210px; height: 210px; overflow: hidden; float:left; margin: 0 10px 0 0; border: solid black 5px; }

.autour2 a img { width: 200px; height: 200px; vertical-align: middle; display: inline-block; transition: transform .5s, opacity .5s; }
.autour2:hover a img { transform:scale(1.1); opacity: .9; }

.titre0auteurs { text-transform: uppercase; font: bold 24px/1.1em 'Expletus Sans', times, serif; color: #222222; }

.ateliers2 { text-align: left; }
.texte1auteurs { background: white; text-align: justify; }
.texte2auteurs { background: lightgray; text-align: justify; }

/*
  Ligne temporelle Thorgal
*/

.ligne { position: relative; width: 90%; max-width: 1000px; box-sizing: border-box; margin: 0 auto;
	&::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -2px; width: 4px; background-color: var(--couleur-sombre); z-index: 1;}}
.ligne-intro, .ligne-conclu { width: 90%; max-width: 1000px; text-align: center; background-color: var(--couleur-sombre); margin: 0 auto; border-radius: 5px; overflow:hidden;
	img { display: block; width: 100%; }
	p { color: var(--couleur-claire); font-family: Mulish; font-size: 16px; padding: 10px; }}
.drakkars { width: 100%; padding: 10px 0; }
.ligne-tuile {
	position: relative; width: 50%; padding: 10px 40px 10px 0px; z-index: 2; cursor: default; box-sizing: border-box;
    &::after { content: ''; background-color: white; border: 4px solid var(--couleur-sombre); border-radius: 50%; width: 12px; height: 20px; position: absolute; transform: translateY(-50%); top: 50%; z-index: 1; }
    &.animated { animation-duration: 1s; animation-fill-mode: both; opacity: 0; }
    &.fadeIn { animation-name: fadeIn; }
}
/* Tuiles à droite (bureau et mobile) */
.ligne .ligne-tuile:nth-of-type(even) { left: 0;
	&::after {right: -10px;}
	.tuile-contenu {
		&::before {right: -40px;}
} }
@media (min-width: 800px) {
	/* Tuiles à gauche (bureau uniquement) */
	.ligne .ligne-tuile:nth-of-type(odd) { left: 50%; padding: 10px 0px 10px 40px;
		&::after {left: -10px;}
		.tuile-contenu {
			&::before {left: -40px;}
	} }
	/* Décalage des tuiles pour qu'elles se chevauchent (bureau uniquement, à partir de la 2ème tuile) */
	.drakkars { width: 50%; padding: 10px 70px; display: block; }
	.ligne .ligne-tuile:nth-child(n+2) { margin-top: -390px; }
	.ligne .ligne-tuile:nth-child(n+3) { margin-top: -140px; } 
}
@media (max-width: 799px) {
	.ligne::before { left: 0; top: -3px; bottom: -3px; margin-left: 0; }
	.ligne-tuile { left: 0; width: 100%; padding: 10px 0px 10px 40px;
	&::after { left: -8px; }}
	.tuile-contenu::before { left: -40px; }
}
.tuile-contenu {
	position: relative; background: var(--couleur-sombre); border-radius: 5px; color: var(--couleur-claire); padding: 0; transition-duration: .4s;
		&::before { content: ''; position: absolute; background-color: var(--couleur-sombre); transform: translateY(-50%); top: 50%; width: 40px; height: 4px; z-index: 0; }
	h1 { color: var(--couleur-claire); opacity: .15; font-family: Kalam; font-size: 150px; font-weight: 700; position: absolute; top: -55px; right: -15px; margin: 0; }
	h2 { position: relative; font-size: 40px; font-weight: 700; margin: 0 0 10px; font-family: Artifex; padding: 10px; text-align: left; }
    p {	position: relative; font-size: 15px; line-height: 1.5; margin: 0 20px 10px; text-align: center; font-family: Mulish; text-decoration: none;
		i{color: #bce;}}
	p.comm {position: absolute; right: 0; top: 0; left: 0; width: 100%; border-radius: 5px 5px 0px 0px; background-color: white; padding: 3px; font-size: 10px; z-index: 2; display: none; color: black; line-height: 1em; box-sizing: border-box; left: 0; margin: 0; }
	img { display: block; margin: 0 auto; width: 100%; }
	.ombre { position: relative; overflow: hidden; width: 100%; border-radius: 0 0 5px 5px;
		&::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -100px; pointer-events: none; box-shadow: inset 0 0 20px black, inset 0 0 20px black, inset 0 0 20px black; opacity: .2; }
		&::before { content: ""; position: absolute; left: 0; right: 0; height: 20px; top: 0; background: transparent url('../img/barre_bas.png') top left no-repeat; transform: rotateX(180deg); }}
	a.plus { display: flex; align-items: center; justify-content: center; background-color: var(--couleur-claire); border: none; color: var(--couleur-sombre); position: absolute; top: 15px; right: 15px; font-size: 30px; cursor: pointer; width: 30px; height: 30px; font-weight: bold; text-decoration: none; border-radius: 50%; transition: all .5s; z-index: 10;
		&::before { content: "+"; }
		&:hover{ transform: rotate(-90deg) scale(1.5); background-color: var(--couleur-or) !important; color: var(--couleur-claire) !important; }
		&:hover + p.comm { display: inline; }}
}
.tuile-fin { border-radius: 5px 5px 0px 0px; padding-bottom: 10px; margin: 10px 0;
	&::after { content: ""; position: absolute; left: 0; right: 0; height: 20px; bottom: -20px; background: transparent url('../img/barre_bas.png') top left no-repeat; transform: rotateX(180deg); }}