/*
   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 {font-size: calc(20px + 2vw) !important; font-family: Artifex; color: white !important; background: url("../img/fond_titre.png") center no-repeat; padding: 20px; margin-top: 50px; position: relative;}
.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: 30px 0px 0px 0px; margin: 0 auto !important; font-size: calc(20px + 1vw) !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;}
.coul-alb {position: relative; width: 60px; height: 80px; text-align: center; margin: 10px 8px; 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;}
.coul-alb::after {position: absolute; left: -15px; top: 60px; min-width: 80px; border-radius: 50% 20% / 10% 40%; background-color: white; padding: 5px; font-size: 12px; z-index: 2; display: none; color: black; transform: rotate(-6deg); line-height: 1em; z-index: 15; font-family: "Balthazar", serif;}

/* Pour Thorgal et les Mondes de Thorgal */
.coul-alb.coul-ham:hover::after { display: inline; content: 'Jean Van Hamme'; }
.coul-alb.coul-sen:hover::after { display: inline; content: 'Yves Sente'; }
.coul-alb.coul-yan:hover::after { display: inline; content: 'Yann'; }
.coul-alb.coul-dor:hover::after { display: inline; content: 'Xavier Dorison'; }
.coul-alb.coul-mar:hover::after { display: inline; content: 'Mathieu Mariolle'; }
.coul-alb.coul-dor-mar:hover::after { display: inline; content: 'Xavier Dorison et Mathieu Mariolle'; }
.coul-alb.coul-ros:hover::after { display: inline; content: 'Grzegorz Rosinski'; }
.coul-alb.coul-vit:hover::after { display: inline; content: 'Giulio de Vita'; }
.coul-alb.coul-sur:hover::after { display: inline; content: 'Roman Surzhenko'; }
.coul-alb.coul-vig:hover::after { display: inline; content: 'Frédéric Vignaux'; }
.coul-alb.coul-vat:hover::after { display: inline; content: 'Matteo Vattani'; }
.coul-alb.coul-gra:hover::after { display: inline; content: 'Graza'; }
.coul-alb.coul-geo:hover::after { display: inline; content: 'Gaétan Georges'; }
.coul-alb.coul-spa:hover::after { display: inline; content: 'Sara Spano'; }
.coul-alb.coul-vat-spa:hover::after { display: inline; content: 'Matteo Vattani et Sara Spano'; }
.coul-alb.coul-coc:hover::after { display: inline; content: 'Elvire De Cock'; }

/* 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-mangin, .coul-alb.coul-etien, .coul-alb.coul-legrand-djian, .coul-alb.coul-tatti, .coul-alb.coul-aouamri, .coul-alb.coul-ozanam { background: white; position: absolute; top: -5px; left: -4px; transform: rotate(4deg); }
.coul-alb.coul-recht:hover::after { display: inline; content: 'Robin Recht'; }
.coul-alb.coul-duval:hover::after { display: inline; content: 'Fred Duval'; }
.coul-alb.coul-rouge:hover::after { display: inline; content: 'Corentin Rouge'; }
.coul-alb.coul-walter:hover::after { display: inline; content: 'Walter et Corentin Rouge'; }
.coul-alb.coul-bec:hover::after { display: inline; content: 'Christophe Bec'; }
.coul-alb.coul-mangin:hover::after { display: inline; content: 'Valérie Mangin'; }
.coul-alb.coul-etien:hover::after { display: inline; content: 'David Etien'; }
.coul-alb.coul-legrand-djian:hover::after { display: inline; content: 'Olivier Legrand et Jean-Blaise Djian'; }
.coul-alb.coul-tatti:hover::after { display: inline; content: 'Bruno Tatti'; }
.coul-alb.coul-aouamri:hover::after { display: inline; content: 'Mohamed Aouamri'; }
.coul-alb.coul-ozanam:hover::after { display: inline; content: 'Antoine Ozanam'; }

.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; }
.coul-cache { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; opacity: 0; cursor: pointer;}

.coul-legende {position: relative; width: 125px; height: 216px; text-align: center; margin: 0 7px 30px 0; padding: 10px 5px 10px 5px; vertical-align:middle; display:inline-block; font-size: 15px; line-height: 18px; font-weight: bold; font-family: "Balthazar", serif; transition: .3s; box-shadow: 3px 3px 8px #aaa; text-transform: uppercase; cursor: pointer; border-radius: 10% 10% 50% 50% / 5% 5% 5% 5%; border: solid black 3px; border-bottom: solid black 6px; box-sizing: border-box !important;}
.coul-legende img {border-radius: 10% 10% 50% 50% / 5% 5% 5% 5%; border: solid black 2px !important; width: 98%; height: 150px; object-fit: cover; object-position: 0% 50%;}
.coul-legende p {margin: 0 auto;}
.coul-legende::before {background: url('../img/eclairages/auteurotheque/barre_auteur.png') bottom center no-repeat; position: absolute; top: -10px; left: 0; width: 125px; height: 10px; content: '';}
.coul-legende.coul-tous::before, .coul-legende.coul-saga::before {background: url('../img/eclairages/auteurotheque/barre_auteur2.png') bottom center no-repeat; width: 80px;}
.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; width: 100%; left: 0;}

.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-ros, .coul-sen { background: linear-gradient(200deg,white,20%,#bb7,85%,white); }
.coul-sur, .coul-dor { background: linear-gradient(200deg,white,20%,#796,85%,white); }
.coul-gra, .coul-ham, .coul-vig { background: linear-gradient(200deg,white,20%,#899,85%,white); }
.coul-mar, .coul-vat { background: linear-gradient(200deg,white,20%,#986,85%,white); }
.coul-yan, .coul-vit, .coul-geo { background: linear-gradient(200deg,white,20%,#989,85%,white); }
.coul-spa { background: linear-gradient(200deg,white,20%,#778,85%,white); }
.coul-coc { background: linear-gradient(200deg,white,20%,#998,85%,white); }
.coul-tous, .coul-saga {width: 80px; background: linear-gradient(200deg,white,20%,#777,85%,white);}
.coul-legende.coul-tous p {padding-top: 164px; padding-bottom: 10px;}
.coul-legende.coul-yan p, .coul-legende.coul-gra p, .coul-legende.coul-saga p {padding-top: 10px; padding-bottom: 10px;}

/* Version mobile */
@media (max-width: 648px) {
	.coul-parag { margin-bottom: 20px; }
	.coul-legende { width: 90px; height: 155px; font-size: 13px; line-height: normal; }
	.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; }