@font-face {
  font-family: 'Karako';
  src: url(/app/www/fonts/Karako.woff) format('woff');
}

@font-face {
  font-family: 'Magda';
  src: url(/app/www/fonts/Magda.woff) format('woff');
}


:root {
    --black: #222;
    --gray-darkest: #444;
    --gray-darker: #666;
    --gray-dark: #888;
    --gray: #999;
    --gray-light: #9b9b9b;
    --gray-lighter: #ccc;
    --gray-lightest-opacity-50: hsla(0, 0%, 90%, .5);
    --off-white: #f7f6f2;
    --white-dark: #e6e6e6;
    --white: #fff;
    --white-opacity-10: hsla(0, 0%, 100%, .1);
    --beige-light: #f7f7f2;
    --beige-dark: #e2dacb;
    --beige: #efe9dc;
    --red: #dd3519;
    --transparent: hsla(0, 0%, 100%, 0);
    --bronze: #97773b;
    --fiction-pink: #fdefed;
    --fiction-blue: #10387b;
    --collection-background-grey: #e0dfdc;
    --collection-background-grey-section: #dad4c6;
    --sand: #f1d5b9;
    --off-pink: #fbf7f9;
    --pink: #f4acca;
    --green:#366c2d;

    --0px:0px;
    --5px:5px;
    --10px:10px;
    --15px:15px;
    --20px:20px;

    --1rem:1rem;
    --1-25rem:1.25rem;
    --1-5rem:1.5rem;
    --2rem:2rem;
    --3rem:3rem;
    --4rem:4rem;
    --6rem:6rem;

    --ratio: 1.5;
    --space-base: 0.9375rem;

    --space-xs: calc(var(--space-base) / var(--ratio));
    --space-sm: calc(var(--space-base) / 1.25);
    --space-lg: calc(var(--space-base) * var(--ratio));
    --space-xl: calc(var(--space-lg) * var(--ratio));
    --space-2xl: calc(var(--space-xl) * var(--ratio));
    --space-3xl: calc(var(--space-2xl) * var(--ratio));
    --space-4xl: calc(var(--space-3xl) * var(--ratio));

    --container-padding-x: clamp(var(--space-base), 3.5vw, var(--space-xl));
    --container-padding-y: clamp(var(--space-3xl), 15vw, var(--space-4xl));
    --container-padding: var(--container-padding-y) var(--container-padding-x);

    --font-sans: Arial,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-serif:'Georgia','times',sans-serif;

    --input-height: 46px;
    --color-focus:var(--gray-dark);
    --color-error:var(--red);
}


* {box-sizing: border-box;}

.alpha-100 {opacity:100%;}
.alpha-75 {opacity:75%;}
.alpha-50 {opacity:50%;}
.alpha-25 {opacity:25%;}
.alpha-0 {opacity:0%;}

.m-0 {margin:0px!important;}

.mb-4xl {margin-bottom: var(--space-4xl);}
.mb-2xl {margin-bottom: var(--space-2xl);}
.mb-xl {margin-bottom:var(--space-xl);}
.mb-0 {margin-bottom:0px!important;}

.mt-4xl {margin-top: var(--space-4xl);}
.mt-2xl {margin-top: var(--space-2xl);}
.mt-xl {margin-top:var(--space-xl);}
.mt-0 {margin-top:0px!important;}

.h-auto {height:auto!important;}

.p-0 {padding:0px!important}



.bg-color-red {background-color:red;}
.bg-color-white {background-color:white;}
.bg-color-blue {background-color:blue;}
.bg-color-green {background-color:green;}
.bg-color-black {background-color:var(--black);}
.bg-color-grey {background-color:grey;}
.bg-color-pink {background-color:pink;}

.relative {position:relative;}
.absolute {position:absolute;}
.hidden {display:none;position:absolute,top:-10000px;left:-10000px;}


.text-strong {font-weight:bold;}




body,p,h1,h2,h3,h4,ul,li,img,article,figure {padding:0;margin:0;}
ul {list-style-type: none;}
ul.ul-horizontal {overflow: hidden;}
ul.ul-horizontal li {float:right;padding-left:var(--space-base);}
ul.left li {float:left;}


[role=toolbar] a {text-transform: uppercase;display:inline-block;line-height:200%;padding-right:10px;padding-left:10px;}
[role=toolbar] a[aria-current=page]{background-color:var(--white);border-radius:5px;}


img {border-style: none;}
a {text-decoration:none;}

p a,.nav-breadcrumb a, a.link 
{
  background-image: linear-gradient(var(--red), var(--red));
  background-position: right 92%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size .3s;
  padding-bottom:2px;
  color:inherit;
  text-decoration: none;
}

a:hover {background-size:0% 1px;}

html.disable-scroll, body.disable-scroll {margin:0;height:100%;overflow:hidden;}


/** FLEX **/
.direction-row {flex-direction: row!important;}
.direction-column {flex-direction: column!important;}
.vertical-align { align-items: center;}

.no-gap {column-gap:0px!important;row-gap:0px!important;}

/** POSITION, SIZE **/

.footer .mention {margin-top:1rem;}
.footer {margin-top:3rem;padding:var(--10px);}
.footer .row {padding-left:var(--10px);padding-right:var(--10px);}
.footer .col {margin-top:1rem;}
.footer a[aria-current=page] {font-weight:bold;color:var(--black);}

.btn {margin-top:.5rem;display:inline-block;}


/** TYPOGRAPHIE **/

.text-align-left {text-align: left!important;}
.text-align-right {text-align:right!important;}
.text-align-center {text-align:center!important;}


body,p {font-family:arial, sans-serif;}
/*body,p {font-weight: 300;font-size: 1.25rem;line-height: 1.5rem;}*/

h1,h2,h3,h4,.category-text,.author-text,.story-title {font-family:Georgia,times,sans-serif;}
h1 {margin-top:3rem;margin-bottom:4rem;text-align:center;font-size:var(--3rem);line-height:90%;word-break: break-word;}

footer a {font-size:1rem;color:var(--gray-darker);}
footer .mention {font-size:.85rem;color:var(--gray-light);line-height:120%;}
footer .mention .btn {font-size:inherit;}

.link, a[href^=mailto], a[href^=http]:not([href*="charlotenia.pottiok.eus"]):not([href*=localhost]) {
    border-bottom: 1px solid var(--pk-300);
}


.l1 {flex:100%;}
.l2 {flex:100%;}
.l3 {flex:100%;}
.l4 {flex:100%;}
.l6 {flex:100%;}
.l8 {flex:100%;}
.l12 {flex:100%;}


.category-text {color:var(--white);text-transform:uppercase;font-size:var(--1rem);background-color:var(--gray-darkest);display:inline-block;padding:2px 4px 2px 4px;margin-top:1rem;margin-bottom:1rem;}
.card-title 
{
	font-family:Georgia, 
	serif;font-size: 1.75rem;
	/*word-break:break-all;*/
	line-height: 1.875rem;
	color:var(--black);
	text-align:inherit;
	color:inherit;
	margin-bottom:var(--10px);
}

.author-text {font-size:.85rem;line-height: 1.125rem;text-transform: uppercase;text-align:inherit;}
.story-title {font-size:3rem;padding-top:0rem;line-height: 3rem;letter-spacing: -.015625rem;text-align:inherit;margin-bottom:var(--10px);}
.story-teaser {text-align: inherit;padding-top: 1rem;font-size: 1.25rem;line-height: 1.5rem;color:var(--gray)}
.link-title {font-size: 1.5rem;line-height: 1.75rem;font-family: Georgia,times,serif;}
.logo-text {font-size:.9rem;line-height:110%;color:var(--black);margin-top:var(--10px);}


.free-container {margin-top:var(--2rem);position:relative;}
.free-container > *:not(:first-child) {margin-top:var(--3rem);margin-bottom:var(--3rem);}

.free-text p:first-child {/*margin-top:2rem;*/min-height:80px;}
.free-text a {color:inherit;}
.free-text {text-align:center;}

/*p.lettrine {margin-top:2rem;}*/
/*.free-text p:first-child:first-of-type:first-letter, p.lettrine:first-of-type:first-letter, .lettrine p:first-child:first-of-type:first-letter
{
  float:left;
  font-size: 5rem;
  line-height:100%;
  font-weight:700;
  padding: 0rem 1rem 0rem 0;
  font-family : Georgia, times, serif;
}*/

/*p.no-lettrine:first-child:first-of-type:first-letter {}*/

.story-center {text-align:center;}
.story-img {width:100%;height:auto;}
.story .free-text p {width:100%!important;max-width:100%!important;text-align:left;}


.modal-title {font-family:Magda,Georgia, times, sans-serif;}
.card-title, .modal-title {text-transform: uppercase;/*font-size:1.25rem;*/line-height:105%;text-align:inherit;}
.card-action a {font-size:.8rem;text-transform:uppercase;text-align:inherit;}

.card-content {flex-grow: 1;}
.card-content p {font-size:1rem;line-height:120%;text-align:inherit;}
.card-content li {font-size:1rem;color:inherit;}
.card-category {font-size:.6rem;text-transform:uppercase;color:var(--gray-light);vertical-align: top;}

.card.center {text-align:center;}

a.action-link {font-size:1rem;color:var(--gray);}

.category-svg 
{
	height:20px;
	width:100%;
	background-color:transparent!important;
	border-radius:0px;
	margin-bottom:1rem/*!important*/;
	padding:0px;
	float:left;
	display:inline-block;
}


/** **/


img.responsive-img, video.responsive-video, .responsive
{
    max-width: 100%;
    height: auto;
}

.circle 
{
    border-radius: 50%;
}


.p0 {padding:0px!important;}
.m0 {margin:0px!important;}
.mt2rem {margin-top:var(--2rem);}




header 
{
	/*height:3.4375rem;*/
}


/*** POSITION ET SIZE **/
.px1 {padding-right:1rem;padding-left:1rem;}


hr.dotted 
{
	border: none;
  	background-image: linear-gradient(to right, var(--black) 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
	height:1px;
}

/*.main-container 
{
	margin:auto,
	padding-left: .9375rem;
    padding-right: .9375rem;
}*/

/*.main {padding-left:5px;padding-right:5px;}*/

.row 
{
	display:flex;
	flex-direction: column;
	justify-content:space-between;
	/*text-align: center;*/
	/*column-gap: 1.5rem;*/
	gap : var(--1-5rem) var(--1-5rem);
}

.row-grid 
{
	display:grid;
	gap : 1.5rem 1.5rem;
}



.col 
{
	text-align:left;
	flex: 1 100%;
	justify-content: stretch;
	
	/*padding :0 1.5rem 3rem 0;*/
}

.stretch {align-items: stretch;}

.fixed-width {flex: 1 1 0px!important;}

/*.col:last-child {padding-left:1.5rem;padding-right:0px}*/

.single-line
{
	flex-wrap: nowrap
}

.multi-line, .multi-lines
{
	flex-wrap:wrap;
}

.aside {max-width:100%;}
.aside .card {height:auto;}
.aside .card:first-child {margin-top:0px;}

img.test {width:100%;height:300px;background-color:#666;}

.card {border:1px solid black;height:100%;position:relative;display:flex;flex-direction:column;margin-bottom:10px;margin-top:10px;}
/*.card-content {padding:.5rem;margin-bottom:1rem;}
.card-content::last-child {margin-bottom:2rem;}*/
/*.card-action {position:absolute;bottom:0;height:2rem;border-top:1px solid black;width:100%;}*/

.card > * {padding:var(--10px);}
.col6 .card > * {padding:var(--20px);}
.col6 .event-dates .day {font-size:var(--4rem);}
.col6 .event-dates .month {font-size:var(--1-5rem);font-family:georgia,times,sans-serif;}

.card-action {margin-top:auto;}
.card .event-dates {max-width:100px;position:relative;}
.card .event-dates .date-container {right:0px;top:0px;position:absolute;}
.card.no-bg {border:none;background-color:transparent;padding:var(--10px);}
.card.no-bg > * {padding:0px;}
.card.no-border {border:none;}

.card.green {color:var(--green);border-color:var(--green);fill: var(--green);}
.card.red {color:var(--red);border-color:var(--red);}

.card img {margin-top:1rem;margin-bottom:1rem;background-color:var(--gray);border-radius:5px;max-width:100%;}
.card img.circle {display:block;max-width:150px;width:75%;aspect-ratio:1;margin-left:auto;margin-right:auto;border-radius:50%;}
.card a {color:inherit;}
.card hr {margin-top:var(--10px)!important;margin-bottom:var(--10px)!important;}


.bg-color-black .card-title {color:var(--white-dark);}
.bg-color-black .card-h2 {color:var(--white-dark);}
.bg-color-black p {color:var(--white-dark);}

.bg-color-pink .card-title, .bg-color-pink p {color:var(--red);}
.bg-color-pink .card-h2 {color:var(--red);}



.logo {margin-top:30px;margin-left:auto;margin-right:auto;max-width:50%;display:none;}



.main-container {margin:auto;max-width:94%;}

.newsletter-block {width:100%;height:3rem;line-height:3rem;border:1px solid black;margin-top:3rem;margin-bottom:3rem;} 
.newsletter-block p {line-height:inherit;}

.events {width:100%;margin-bottom:3rem;}
.separator {width:100%;height:10px;margin-bottom:1rem}
.links {margin-bottom:3rem;}
.by-themes {width:100%;margin-bottom:3rem;}


.grid-events .card-content .row {flex-direction: row;}



/** COMPONENT **/

body {background-color:var(--off-pink);overflow-x: hidden;}

#user, .logo-container {background: linear-gradient(90deg,#ec6798,#fdde19);}
#user {position:fixed;width:100%;z-index:110;padding-top:10px;padding-bottom:10px;}
#user a {font-size:.9rem;line-height:100%}
#user a.selected {font-weight:700;}
#user .user-nav-menu {display:none;}

.logo {z-index:200;position:relative;min-height:13rem;}

#user-nav li {font-size:.8rem;line-height:100%;}


/*.logo-container {background: linear-gradient(90deg,#ec6798,#fdde19);z-index:100;position:relative;}*/
#hamburger {padding-top:10px;max-width:50px;}
#hamburger img {height:22px;width:auto;}

#main-container {max-width:100%;}

#main-nav 
{
	line-height:3.5rem;
	padding-top:0.7rem;
	border-bottom:1px solid black;/*margin-bottom:1.5rem;*/
	text-transform:uppercase;
	font-size:1rem;
	display:none;
}

#main-nav .selected {border-bottom:2px solid black;/*font-weight:bold;*/}
#main-nav *[aria-current=page] {border-bottom:2px solid black;/*font-weight:bold;*/}


.lang-nav li:not(:first-child):after, #user-nav li:not(:first-child):after {content:"•";padding-right:10px;padding-left:10px;line-height:inherit;}
.lang-nav a {text-transform:uppercase;color:var(--black);}
.lang-nav a[aria-current=true], #user-nav a[aria-current=true] {font-weight:bold;}
.lang-nav a:hover, #user-nav a:hover {text-decoration:underline;}

#menu-mobile .lang-nav ul {display:inline-block;height:100%;width:100%;}
#menu-mobile .lang-nav li {float:left;font-family:arial,helvetica,sans-serif;font-size:var(--1rem);margin:auto;}
#menu-mobile .lang-nav li:not(:last-child):after {content:"•";padding-right:var(--10px);padding-left:var(--10px);line-height:inherit;}



#main-content {margin-top:0px;padding:10px;}

/*#main {margin-top:-2rem;margin-bottom:2rem;}*/
#main {margin-top:-2rem;padding-bottom:4rem;background-color:#f5e9ee;}

/*footer {border-top:4px solid var(--black);}*/
/*footer a {font-size:1rem;color:var(--gray);}*/

.event-dates {text-align:center;padding-right:0px;}
.event-dates .day {line-height:100%;font-weight:bold;display:inline-block;font-size:var(--2rem);padding-top:var(--5px);}
.event-dates .month {font-size:0.9rem;line-height:100%;display:inline-block;margin-bottom:.5rem;}
.event-dates .year {font-size:0.8rem;color:var(--gray);line-height:90%;display:inline-block;}
.event-dates hr {margin-right:-20px;margin-left:-20px;margin-top:5px!important;margin-bottom:5px!important;}


.layer 
{
  position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0,.8);z-index:300;display:none;
}

.modal {display:none;position:relative;background-color:var(--off-white);width:90vw;height:80vh;margin:auto;position:relative;top:10vh;padding:var(--10px);}
.modal__inner {padding:var(--20px);border:1px solid var(--black);width:100%;height:100%;}
.modal-content {}
.modal-action {}
.modal .close-icon {padding:var(--5px);position:absolute;width:46px;height:46px;right:0;top:0;background-color:var(--off-white);}
.modal .close-icon img {margin:auto;width:100%;height:auto;}

.icon-decoration img {background-color:transparent;width:15px;height:;margin:0;padding:0;}
.icon-decoration .svg {fill:inherit;}

.calendar {border:1px solid var(--black);padding:var(--10px);}

/** SIDE SHEET **/
.side-sheet {
	position:absolute;top:0;left:0;
	max-width:70vw;width:300px;height:100vh;
	background-color:var(--white);z-index:400;
	padding:var(--20px);
}

.side-sheet ul {width:100%;height:auto;}
.side-sheet li {font-family: Georgie,times,serif;font-size:1.4rem;margin-bottom:var(--10px);}
.side-sheet a {width:inherit;display:inline-block;}
.side-sheet ul.user a {font-size:1rem;line-height:46px;}

.side-sheet-header {height:46px;}
.side-sheet-content {height:calc(100vh - 96px);width:100%;overflow-y:scroll;overflow-x:hidden;}
.side-sheet-action {height:46px;line-height:46px;width:100%;position:absolute;bottom:0;left:0;border-top:solid 1px #000;padding-left:var(--20px);padding-right:var(--20px);}

.side-sheet #close-side-sheet {height:100%;}
.side-sheet #close-side-sheet svg {width:46px;height:46px;}

.side-sheet a {font-family:var(--font-sans);}
.side-sheet .secondary-menu a {font-size:1.1rem;}
/*.side-sheet .seconday-meny a {}*/


.icon-wrapper svg {margin:auto;}
.icon-wrapper {height:46px;width:46px;}


/*** TEMPLATE ***/

#main-content.free *, 
#main-content.liste *,
#main-content.article *, #main-content.newsletter * {text-align:center;}

#main-content .free-text p 
{
  text-align:left!important;
  font-size:var(--space-lg);
}

#main-content hr {margin-top:2rem;margin-bottom:2rem;}
#main-content img {}
#main-content h2.headline {color:var(--gray);font-family:arial,sans-serif;line-height:100%;font-size:1.1rem;font-weight:normal;margin-bottom:1rem;}



.event-headline .event-dates {position:relative;max-width:75px;}
.event-headline .date-container {background-color:var(--white);position:relative!important;}


article img {border-radius:var(--10px);}


.pk-view-params {display:none;}
.pk-params {display:none;}

.tpl-article .category-svg {text-align:center;width:100%;}





/** Reset for users who would prefer no animations **/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/** Ticker **/
.ticker 
{
  --ticker-duration: 45s;
  position: absolute!important;
  top:0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: #000;
  color: #fff;
  overflow: hidden;
  padding: 0.5rem;
}

.ticker__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: var(--ticker-duration);
  text-align: center;
  width: max-content;
  padding-left: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__inner {
    flex-wrap: wrap;
    white-space: inherit;
    padding-left: 0;
    width: auto;
  }
}

.ticker__inner p {
  margin: 0 2rem;
}

@keyframes ticker {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}


/*** FREE LINE **/

.free-line img {max-width:100%;display:block;}
.free-line {margin-bottom:var(--1-5rem);}
.free-line .card {margin:0;width:100%;height:100%;}


/*********************/
/*** CARDS 
/*********************/

.free-cards {width:auto;height:0px;background-color:#FF0000;}
.free-cards .cards-container {height:100%;}

.game-card
{
    width:194px;height:268px;
    position:absolute;
    /*padding-right:17px;padding-left:17px;padding-top:30px;padding-bottom:30px;*/
    touch-action: none;
    user-select:none;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    /*border:solid 1px #FF0000;*/
}




.game-card .front
{
    padding-right:17px;padding-left:17px;padding-top:30px;padding-bottom:30px;
    width:100%;height:100%;overflow:hidden;
    pointer-events: none;
}

.game-card .side
{
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    box-sizing: border-box;
    backface-visibility: hidden;  /* W3C */
    -webkit-backface-visibility: hidden; /* Safari & Chrome */
    -moz-backface-v.info-card .card-versoisibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
    -o-backface-visibility: hidden; /* Opera */
    /*box-shadow: 0 0 10px rgba(0,0,0,0.6);*/
    overflow: auto;
}

.game-card .back
{
    transform: rotateY(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */à
}

.game-card a {
    background-color: #FFFFFF;
    border-radius: 4px;
    /* border: 1px solid #e51b39; */
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    display: block;
    width: 100%;
    height: 100%;
    perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
}

.game-card img {object-fit: cover;border-radius:0px;}

.game-card .content-container {
    /* border: 1px solid #e51b39; */
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* pointer-events: none; */
}

.point {width:3px;height:3px;background-color:#FF0000;}


/** CARD INFO **/
.card-info {position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:5000;background-color:rgba(0,0,0,.4)}
.card-info .close-button {position:absolute;top:var(--gap);left:var(--gap);}
.card-info .prev-button {position:absolute;top:calc(100vh / 2);left:var(--gap);}
.card-info .next-button {position:absolute;top:calc(100vh / 2);right:var(--gap);}
.card-info .card-info-container {padding:20px 96px 96px 96px;;width:100%;height:100%;}
.card-info .card-info-content {width:100%;height:100%;background-color:rgba(0,0,0,.8);text-align:center;padding:5px;overflow-y:auto;}
.card-info .card-info-content .card-info-img {object-fit:scale-down;max-width:100%;margin:auto;max-height:100%;}

.hide-navigation .prev-button, .hide-navigation .next-button {display:none;}

.card-info .citation {font-size:40px;color:var(--c-white);}
.card-info .auteurs {font-size:var(--fs-base);color:var(--c-white);}
.card-info .video-container {width:100%;}

.card-info .book-container {width:100%;height:100%;position:relative;}
.card-info .book-button {background-color:var(--c-selected);position:absolute;right:20px;bottom:20px;}


/** LINK **/
.game-card-link {height:194px;}
.game-card a.game-card-link {border-radius:12px;}


/** SOUND **/
.sound-circle {width:50px;height:50px;background-color:#000000;position:absolute;border-radius:50%;top: 50%;
  left: 50%;transform: translate(-50%, -50%);border:20px solid #FF0000;}
.game-card a.game-card-sound {border-radius:50%;width:150px;height:150px;}
.game-card a.game-card-sound img {width:150px;height:150px;}

.game-card a.game-card-book img {object-fit:contain;width:100%;}
.game-card a.game-card-book {background-color:var(--c-grey);padding:0;}
.game-card .game-card-book .front {padding:0;}

/** CITATION **/
.game-card-citation {width:300px;}

/** SVG **/
.game-card-svg {width:200px;height:200px;}
.game-card a.game-card-svg {background-color:transparent;}
.game-card-svg .front {padding:0;}

.game-card-embed {width:250px;height:165px;}
.game-card-embed .front {padding:4px;}

/** **/
.game-card-page {height:194px;}
.game-card-page p {color:#FF0000;}
.game-card-page .front {padding-top:0;padding-bottom:10px;padding-right:10px;padding-left:10px;background-color#000}
.game-card-page img {object-fit:cover;width:100%;height:100%;}
.game-card .logo {opacity:.2;}


/**********************/
/*** LIGHT DIAPO 
/**********************/

.light-diapo {position:fixed;top:0px;left:0px;width:100vw;height:100vh;}
.light-diapo .next, .light-diapo .prev, .light-diapo .close {position:absolute;top:50vh;width:46px;height:46px;background-color:transparent;}
.light-diapo svg {width:100%;height:100%;object-position:50% 50%;fill:var(--white);}
.light-diapo .next {right:0;top:50vh;}
.light-diapo .prev {left:0;top:50vh;}
.light-diapo .close {right:0;top:0;}
.light-diapo .light-diapo-container {position:relative;padding:96px;width:100vw;height:100vh;}
/*.light-diapo figure {width:100%;height:100%;object-fit:contain;}*/
.light-diapo img {width:100%;height:100%;object-fit:contain;object-position:50% 50%;}
.light-diapo .diapo-text {padding:var(--space-xl);max-width:50%;margin:auto;}
.light-diapo .diapo-text p {font-size:2rem;font-family:var(--font-serif);}




.video-container 
{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width:100%;
  overflow: hidden;
}

.no-img {max-width:70%;margin:auto;}

/**********************/
/*** FORM
/**********************/






@media screen and (min-width: 1200px)
{
	/*#main {padding-right:50px;padding-left:50px;max-width:85%;}*/
	/*.main-container {max-width:85%;}*/
	
}


@media screen and (min-width: 1024px) 
{
	#user .user-nav-menu {display:block;}

	#main-nav {display:flex;}
	#main-content {margin-top:1.5rem;}

	.row {flex-direction: row;}

	.main {flex: 3 0px; }
	.main, .footer    {padding-left:var(--15px);padding-right:var(--15px);}
	/*#main-content {margin-top:15px;}*/

  	.aside-1 { order: 1; } 
  	.main    { order: 2; }
  	.aside-2 { order: 3; }
  	.tpl-accueil .newsletter-block {order:5;}
  	.events {order:6}
  	.links {order:7;}
  	.footer  { order:8;}
  	.links .col {flex :1 auto;}
  	.by-themes {order:9;}

  	.separator {margin-bottom:1rem;}

  	
  	/*
  	.l1 {width:8.33333333%;}
  	.l3 {width:25%;}
  	.l4 {width:33.3333333%;}
  	.l6 {width:50%;}
  	.l12 {width:100%;}
  	*/

  	/*.l1 {flex:8.3333333%}
  	.l2 {flex:16.6666666%}
  	.l3 {flex:0 0 25%;}
  	.l4 {flex:33.3333333%;}
  	.l6 {flex:50%;}
    .l8 {flex:66.6666666%;}
  	.l12 {flex:100%;}*/

  	.row-grid.col2 {grid-template: repeat(1, 1fr) / repeat(6, 1fr);}
  	.row-grid.col4 {grid-template: repeat(1, 1fr) / repeat(3, 1fr);}
  	.row-grid.col3 {grid-template: repeat(1, 1fr) / repeat(4, 1fr);}
  	.row-grid.col6 {grid-template: repeat(1, 1fr) / repeat(2, 1fr);}
  	.row-grid.col12 {grid-template: repeat(1, 1fr) / repeat(1, 1fr);}

  	.row-grid.row1 {grid-template-rows: repeat(1, 1fr)!important;}
  	.row-grid.row-auto {grid-auto-flow:row;}


  	.col1 .card .card-title {font-size:var(--2rem);margin-bottom:var(--1rem);}
  	.col1 .event-dates hr {margin-right:-5px;margin-left:-5px;}
  	.col4 .event-dates hr {margin-right:-7px;margin-left:-7px;}
  	.col3 .event-dates hr {margin-right:-7px;margin-left:-7px;}


  	/*#main {padding-right:25px;padding-left:25px;max-width:90%;}*/
  	/*.main-container {max-width:90%;}*/

  	.modal {width:60vw;height:60vH;top:20vh;}
  	.free-text p, #main-content h2.headline {max-width:66.66666%;margin-left:auto;margin-right:auto;}


  	/** template event **/


  	.tpl-event aside, .tpl-default aside {max-width:20%;}
  	.tpl-event .main , .tpl-default .main {padding:0px;}
  	.tpl-event article, .tpl-default article {text-align:center;}
  	.tpl-event article .free-text p, .tpl-default article .free-text p {max-width:100%;}

  	h1 {font-size:var(--4rem);}

}

/** ACCORDION **/
/* Core styles/functionality */
.tab {position: relative;border:1px solid;}
.tab input {position: absolute;opacity: 0;z-index: -1;}
.tab__content 
{
  max-height: 0;
  overflow: hidden;
  transition: all .5s;
}

.tab input:checked ~ .tab__content {
  max-height: 10rem;
}

/* Visual styles */
.accordion 
{
  border: 1px solid;
  overflow: hidden;
}

.tab__label,.tab__close 
{
  display: flex;
  background: var(--theme);
  cursor: pointer;
}
.tab__label 
{
    justify-content: space-between;
    padding: var(--20px);
}

.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 1s;
}

.tab input:checked + .tab__label::after 
{
  transform: rotate(270deg);
}

.tab__content .* 
{
    margin: 0;
    padding: var(--20px);
    text-align:left!important;
}

.tab__close 
{
  justify-content: flex-end;
  padding: var(--20px);
  font-size: 1rem;
}
/*.accordion--radio 
{
  --theme: var(--secondary);
}*/

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after 
{
    /*animation: bounce 1s infinite;*/
}



/** FILTER **/
.filter-bw 
{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) contrast(150%);

}

/** IMAGE **/
figcaption, caption 
{
    font-size: var(--space-base);
    font-family: var(--font-sans);
    color: var(--gray);
    margin-top: .5em;
    text-align: left;
}

figcaption::before, caption::before {
    content: "↑";
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
    font-weight: 200;
    display: inline-block;
    padding-right: 0.25em;
    color: var(--zinc-500);
    user-select: none;
}


/***************************/
/*** FORMULAIRE
/***************************/

p select 
{
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 10px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

p input, p select 
{
  height:var(--input-height);width:100%;
  border: 1px solid var(--black);
  padding:calc(var(--space-base)/2);margin-top:calc(var(--space-base)/2);
  font-family:var(--font-serif);font-size:var(--space-base);line-height:100%; 
}

p input[type=checkbox] 
{
  width:var(--input-height);
  margin:0;
}


p input:focus, p input:active {border-color:var(--color-focus);}
p.error input {border-color:var(--color-error);color:var(--color-error);}
p.error label {color:var(--color-error);}

form p:not(:first-child) {margin-top:var(--space-base);text-align:left;} 
form label {margin-bottom:var(--space-base);}
form .form-message {background-color:var(--color-error);border:none;color:var(--white);padding:var(--space-base);}
form .error .msg {color:var(--color-error);font-size:var(--space-sm);}

.vanilla-calendar .vanilla-calendar-week {background-color:#ec6798!important;}
.vanilla-calendar {background-color: transparent!important;}

form button, a.button, form input[type=submit], button.button 
{
  display:inline-block;background-color:var(--gray-dark);color:var(--white);border:none;
  font-family: var(--font-serif);font-size:1rem;font-weight:bold;text-transform: uppercase;
  padding:.75rem;line-height:100%;
  width:auto;
}

.button {background-image:none;}
.button[disabled=true],.button::disabled {pointer-events:none;opacity:0.5;}


label.input-stepper input {display:inline-block;}
label.input-stepper a 
{
  border-radius: 50%;
  height: var(--input-height);
  width: var(--input-height);
  line-height:initial;
  overflow: hidden;
  text-align: center;
}

label.input-stepper #spinner {width:3em;vertical-align:top;}
label.input-stepper a:disabled {}

[class^="icon-"],
[class*="icon-"] {
  vertical-align: text-top;
}



/**************************/
/** MEDIA QUERY
/**************************/


@media screen and (min-width: 1024px) 
{
  #user .user-nav-menu {display:block;}

  #main-nav {display:flex;}
  #main-content {margin-top:1.5rem;}

  .row {flex-direction: row;}

  .main {flex: 3 0px; }
  .main, .footer    {padding-left:var(--15px);padding-right:var(--15px);}
  /*#main-content {margin-top:15px;}*/

    .aside-1 { order: 1; } 
    .main    { order: 2; }
    .aside-2 { order: 3; }
    .tpl-accueil .newsletter-block {order:5;}
    .events {order:6}
    .links {order:7;}
    .footer  { order:8;}
    .links .col {flex :1 auto;}
    .by-themes {order:9;}

    .separator {margin-bottom:1rem;}

    
    /*
    .l1 {width:8.33333333%;}
    .l3 {width:25%;}
    .l4 {width:33.3333333%;}
    .l6 {width:50%;}
    .l12 {width:100%;}
    */

    .l1 {flex:8.3333333%}
    .l2 {flex:16.6666666%}
    .l3 {flex:0 0 25%;}
    .l4 {flex:33.3333333%;}
    .l6 {flex:50%;}
    .l8 {flex:66.6666666%;}
    .l12 {flex:100%;}

    .row-grid.col2 {grid-template: repeat(1, 1fr) / repeat(6, 1fr);}
    .row-grid.col4 {grid-template: repeat(1, 1fr) / repeat(3, 1fr);}
    .row-grid.col3 {grid-template: repeat(1, 1fr) / repeat(4, 1fr);}
    .row-grid.col6 {grid-template: repeat(1, 1fr) / repeat(2, 1fr);}
    .row-grid.col12 {grid-template: repeat(1, 1fr) / repeat(1, 1fr);}

    .row-grid.row1 {grid-template-rows: repeat(1, 1fr)!important;}
    .row-grid.row-auto {grid-auto-flow:row;}


    .col1 .card .card-title {font-size:var(--2rem);margin-bottom:var(--1rem);}
    .col1 .event-dates hr {margin-right:-5px;margin-left:-5px;}
    .col4 .event-dates hr {margin-right:-7px;margin-left:-7px;}
    .col3 .event-dates hr {margin-right:-7px;margin-left:-7px;}


    /*#main {padding-right:25px;padding-left:25px;max-width:90%;}*/
    /*.main-container {max-width:90%;}*/

    .modal {width:60vw;height:60vH;top:20vh;}
    .free-text p, #main-content h2.headline {max-width:66.66666%;margin-left:auto;margin-right:auto;}
    .free-text p {font-size:}


    /** template event **/


    .tpl-event aside, .tpl-default aside {max-width:20%;}
    .tpl-event .main , .tpl-default .main {padding:0px;}
    .tpl-event article, .tpl-default article {text-align:center;}
    .tpl-event article .free-text p, .tpl-default article .free-text p {max-width:100%;}

    h1 {font-size:var(--4rem);}

    .masonry-grid {flex-flow: column wrap;display:flex;height:10000px;align-content: space-between;}

    .masonry-grid .item {width: 32%;position: relative;min-height:100px;margin-bottom:2%;}


    .masonry-grid .item:nth-child(3n+1) { order: 1; }
    .masonry-grid .item:nth-child(3n+2) { order: 2; }
    .masonry-grid .item:nth-child(3n)   { order: 3; }

    .masonry-grid::before,
    .masonry-grid::after 
    {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }
}


/*** RESPONSIVE **/
@media screen and (min-width: 768px) 
{
	.aside {flex: 1 auto;}
	.logo {display:block;}
	/*#main {padding-right:5px;padding-left:5px;max-width:100%;}*/
	
}


/** IMPRESSION **/
@media print 
{
	.body {background-color:transparent;}
    .no-display-in-print {
        display: none
    }
}


.pk-phone {max-width:300px;}