/*
    Variables
    background_site     = #CFE2F2
    background_center   = #FFFFFF
    texte               = #040B10
    topbar              = #FFFFFF
    topbar_hover        = #FFAE00
*/


/* ===================================================================
 * SELF-HOSTED WEBFONT
 * =================================================================*/
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v15-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('fonts/open-sans-v15-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v15-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ===================================================================
 * STRUCTURE GENERALE
 * =================================================================*/

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.625em;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.417;
    color: #333333; /* ".$css["texte"]." */
    background-color: #CFE2F2; /* ".$css["background_site"]. */
    -webkit-text-size-adjust: none;
}

#header     {
    min-width: 960px;
    min-height: 179px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

#container .innerCenter {
    margin: 15px auto 10px;
    background: url(/toulal/v8/include/css/images/corps.png) 0 100% repeat-y transparent;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    box-sizing: border-box;
}

/* ===================================================================
 * INITIALISATION
 * =================================================================*/

.clear              { clear : both; }
.invisible          { display: none; }
.visuallyhidden     { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0 0 0 0); border: 0; overflow: hidden; }
.alignleft          { text-align: left; }
.alignright         { text-align: right; }
.aligncenter        { text-align: center; }
.clearfix:before,
.clearfix:after     { content: "."; display: block; height: 0; overflow: hidden; }
.clearfix:after     { clear: both; }
.clearfix           { zoom: 1; }
img                 { max-width: 100%; height: auto; border-color: #000000; }
/*
a img               { border-width: 0; }
*/
abbr,
acronym             { border-bottom: 1px dotted; cursor: help; text-decoration: none; }
td img              { max-width: none; }
blockquote          { margin: 0 0 1.5em; padding: 0 0 0 1em; border-left: 3px solid #cfe2f2; }
blockquote p:last-child { margin-bottom: 0; }
.innerCenter        { width: 96rem; margin: 0 auto; position: relative; }
input, button { font-family: inherit; }

/* ===================================================================
 * HEADER // LOGO + MEMBER CARD
 * =================================================================*/

/* Top bar */
#topbar {
    min-width: 96rem;
    min-height: 2.5rem;
    overflow: hidden;
    color: #FFFFFF;
    background: url(/toulal/v8/include/css/images/topbar.png) 0 100% repeat-x #2b2b2b;
    box-shadow:  0 2px 2px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0px 1px 1px #040B10;
    position: relative;
    z-index: 3;
}
#topbar .topbar-gauche          { float: left; padding-top: 0.5rem; }
#topbar .topbar-droite          { float: right; }
#topbar .topbar-droite ul       { margin: 0; padding: 0; }
#topbar .topbar-droite ul li    { display: inline; }
#topbar .topbar-droite ul li:not(:last-child)::after { content: "\2022"; margin: 0 1 px; }
#topbar .topbar-droite a        { color: #FFFFFF; text-decoration: none; display: inline-block; padding: 0.3rem 0.3rem 0; border-top: 2px solid transparent; }
#topbar .topbar-droite a:hover,
#topbar .topbar-droite a:focus  { color: #FFAE00; border-top: 2px solid #FFAE00; }

#topbar .topbar-droite .lienEvitement::after { content: none !important; }
#topbar .topbar-droite .lienEvitement a { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; }
#topbar .topbar-droite .lienEvitement a:focus { position: static; z-index: 0; opacity: 1; }

/* Bandeau haut */
#header        {
    min-height: 19.5rem;
    background: url(/toulal/v8/include/css/images/top-banniere.jpg) 50% 0 no-repeat #181819;
}
#header #logo {
    position: absolute;
    top: 12.5rem;
    left: 0.6rem;
    width: 21.3rem;
    height: 4.8rem;
    background: url(/toulal/v8/include/css/images/logo.png) 50% 50% no-repeat transparent;
    background-size: contain;
}
#header #logo span {
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    color: #FFFFFF;
}
#header h1 {
    margin: 0;
}
#mogPosteIcon {
    vertical-align: middle;
}

/* Member card */
.memberCardWrapper {
    float: right;
    margin: -1px 0 0;
    text-align: right;
    position: relative;
    z-index: 2;
}
.memberCardWrapperHide {
    display: none;
}
#memberCard {
    position: relative;
    overflow: hidden;
    width: 325px;
    height: 114px;
    margin-top: -114px;
    color: #181819;
    text-align: left;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0 0 0 6px;
    box-sizing: border-box;
    transition: all 0.2s;
}
.openCard #memberCard {
    margin-top: 0;
}
#memberCard::before,
#memberCard::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
#memberCard::before {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    background: url(/toulal/v8/include/css/images/top-banniere.jpg) -871px 114px no-repeat transparent;
    transition: all 0.2;
}
#memberCard::after {
    background: rgba(255,255,255,0.75);
}
.openCard #memberCard::before {
    margin-top: 0;
    background-position: -856px 0;
}
#memberCardToggle { cursor: pointer; padding: 5px 4px; background: #1E1E1E; border: none; border-radius: 0 0 5px 5px;}
#memberCardToggle .inner { display: block; width: 50px; border-radius: 3px; overflow: hidden; background: #2E2E2E; border: 1px solid #494949; }
#memberCardToggle .inner > span { display: table-cell; width: 25px; text-align: center; vertical-align: middle;  }
#memberCardToggle .btn { display: inline-block; width: 25px; white-space: nowrap; text-indent: 100%; background: url(/toulal/v8/include/css/images/btnMemberCard.png) 50% 50% no-repeat transparent; background-size: 15px auto; overflow: hidden; }
#memberCardToggle img  { max-width: 25px; max-height: 25px; vertical-align: middle; }
.openCard #memberCardToggle .btn { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

#memberCard .inner { position: relative; z-index: 1; padding: 13px 0 0 13px; }
#memberCard .memberAvatar     { float: left; margin-right: 13px; }
#memberCard .memberAvatar img { max-width: 60px; max-height: 60px; vertical-align: bottom; box-shadow: 0 0 3px rgba(0, 0, 0, 0.26); display: inline-block; word-wrap:; break-word; }

#memberCard .memberInfos { overflow: hidden; }
#memberCard .nom    { margin: 0 0 2px; font-size: 1.334em; font-weight: 600; }
#memberCard .gauche { width: 100px; float: left; }
#memberCard .droite { width: 130px; float: left; }
#memberCard .liens  { clear: both; margin: 7px 0 0; }
#memberCard .liens li { display: inline-block; line-height: 1; vertical-align: top; }
#memberCard .liens .monProfil { min-width: 72px; }
#memberCard .liens .monInventaire { min-width: 95px; }
#memberCard .liens a { padding: 0 0 0 8px; color: #181819; white-space: nowrap; line-height: normal; text-decoration: underline; background: url(/toulal/v8/include/css/images/memberFleche.png) 0 55% no-repeat transparent; background-size: 4px auto; }
#memberCard .liens a:hover { text-decoration: none; }
#memberCard .liens .logout { padding-left: 12px; background-image: url(/toulal/v8/include/css/images/memberLogout.png); background-size: 8px auto; }
#memberCard ul      { margin: 0; padding: 0; list-style: none; font-size: 0.917em; }

#memberCardToggle.mogposte-animation .btn {
    background-image: url(/toulal/v8/include/css/images/lettre2.gif);
    animation: bounce 0.30s ease infinite alternate;
}
@keyframes bounce {
     from { transform: translateY(2px); }
     to   { transform: translateY(-2px); }
}

/* ===================================================================
 * MENU
 * =================================================================*/

/* Menu principal */
#menu-haut {
    min-width: 96rem;
    height: 3rem;
    color: #FFFFFF;
    background: #488ECC;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}
#menu-haut:before,
#menu-haut:after     { content: "."; display: block; height: 0; overflow: hidden; }
#menu-haut:after     { clear: both; }
#menu-haut           { zoom: 1; }
#menu-haut ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    float: left;
}
#social {
    float: right;
}

#menu .menu-nav1 {
    display: table-cell;
    margin: 0; padding: 0;
    text-transform: uppercase;
    font-weight: normal;
}
#menu .menu-nav1 > a {
    display: block;
    padding: 7px 10px;
    text-decoration: none;
    line-height: 1.6rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25em /*15/12*/;
    font-weight: 600;
    color: #EFF5FB;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);*/
}
#menu .menu-nav1:hover > a,
#menu .menu-nav1.focus > a {
    color: #FFFFFF;
    background: #1f70b8;
    transition: all 0.2s ease;
}
#menu .menu-nav1.accueil a {
    width: 19px;
    height: 16px;
    text-indent: -999em;
    background-image: url(/toulal/v8/include/css/images/menu/menuHome.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 19px auto;
    opacity: 0.8;
}
#menu .menu-nav1.accueil a:hover {
    opacity: 1;
}
#menu .menu-nav1 #LienMenuLeSite {
    background-image: url(/toulal/v8/include/css/images/menu/menuEncoche.png);
    background-repeat: no-repeat;
    background-position: 88% 50%;
    background-size: 8px auto;
    padding-right: 25px;
}

/* Menu déroulant Le Site */
#voile { display: none; width: 100%; position: absolute; top: 250px; bottom: 0; left: 0; background: url(/toulal/v8/include/css/images/voile.png) 0 0 repeat transparent; }

#menuLeSite:before          { content: ""; border: 8px solid #FFFFFF; position: absolute; left: 77px; top: -5px; transform: rotate(45deg); }
#menuLeSite                 { display: none; width: 671px; padding: 10px 10px; position: absolute; z-index: 1; top: 45px; left: 0; background-color: #FFFFFF; border-radius: 5px; }
#menuLeSite ul              { margin: 0; padding: 0; float: left; position: relative; }
#menuLeSite ul li           { margin: 10px 0 0 10px; font-family: Arial, Helvetica, sans-serif; display: block; text-transform: none; /*border-radius: 5px;*/ }
#menuLeSite ul li:first-of-type { margin-top: 0; }
#menuLeSite ul.gauche li    { margin-left: 0; }
#menuLeSite ul li a         { display: block; width: 175px; height: 30px; padding-left: 40px; padding-bottom: 5px; text-decoration: none; border-radius: 5px; background-color: #FFFFFF; background-repeat: no-repeat; background-position: 0 0; background-size: 30px auto; }
#menuLeSite ul li:hover a   { background-color: #EDF4FF; }
#menuLeSite ul.menu-haut li.news a       { background-image: url(/toulal/v8/include/css/images/menu/menuNews.gif); }
#menuLeSite ul.menu-haut li.calendrier a { background-image: url(/toulal/v8/include/css/images/menu/menuCalendrier.gif); }
#menuLeSite ul.menu-haut li.maj a        { background-image: url(/toulal/v8/include/css/images/menu/menuMaj.gif); }
#menuLeSite ul.menu-haut li.annuaire a   { background-image: url(/toulal/v8/include/css/images/menu/menuAnnuaire.gif); }
#menuLeSite ul.menu-haut li.termes a     { background-image: url(/toulal/v8/include/css/images/menu/menuTermes.gif); }
#menuLeSite ul.menu-haut li.sondage a    { background-image: url(/toulal/v8/include/css/images/menu/menuSondage.gif); }
#menuLeSite ul.menu-haut li.livredor a   { background-image: url(/toulal/v8/include/css/images/menu/menuLivredor.gif); }
#menuLeSite ul.menu-haut li.topsites a   { background-image: url(/toulal/v8/include/css/images/menu/menuTopsites.gif); }
#menuLeSite ul.menu-haut li.historique a { background-image: url(/toulal/v8/include/css/images/menu/menuHistorique.gif); }
#menuLeSite ul.menu-haut li.team a       { background-image: url(/toulal/v8/include/css/images/menu/menuTeam.gif); }
#menuLeSite ul.menu-haut li.stats a      { background-image: url(/toulal/v8/include/css/images/menu/menuStats.gif); }
#menuLeSite ul.menu-haut li.recrute a    { background-image: url(/toulal/v8/include/css/images/menu/menuRecrute.gif); }
#menuLeSite ul.menu-haut li.contact a    { background-image: url(/toulal/v8/include/css/images/menu/menuContact.gif); }
#menuLeSite ul.menu-haut li.site a       { background-image: url(/toulal/v8/include/css/images/menu/menuSite.gif); }
#menuLeSite ul.menu-haut li.concours a   { background-image: url(/toulal/v8/include/css/images/menu/menuConcours.gif); }
#menuLeSite ul li a span    { display: block; }
#menuLeSite ul li a .titre  { color: #0d2030; font-weight: bold; font-size: 1.167em/*14/12*/;  padding: 8px 0 3px; }
#menuLeSite ul li a .resume { color: #040B10; font-size: 0.917em/*11/12*/; font-weight: normal; line-height: 12px; }

#menuLeSite a#fermer        { color: #0d2030; width: 30px; height: 25px; position: absolute; right: -25px; top: 0; text-indent: -9999px; background: url(/toulal/v8/include/css/images/menu/btn-fermer.gif) no-repeat 50% 50% #FFFFFF; cursor: pointer; border-radius: 0 25px 25px 0; }

/* ===================================================================
* FOOTER
* =================================================================*/

/* Animation des personnages */
#scene                   { position: relative; }
/*
#scene::before           { content: ""; position: absolute; left: 0; right: 0; bottom: 0;  min-width: 960px; height: 25px; background: #e3eef7; z-index: -1; border-top: 1px solid rgba(255, 255, 255, 0.5); }
*/
#scene .inner            { width: 960px; height: 50px; margin: 0 auto; position: relative; z-index: 1; background: url(/toulal/v8/include/css/images/footer/spr-ombre.jpg) 0 100% no-repeat transparent; background-size: 960px auto; }
#scene .inner:hover      { cursor: url(/toulal/v8/include/css/images/footer/cursor.png), auto; }

#scene .sprite           { position: absolute; bottom: 0; transition: opacity 0.2s; background: url(/toulal/v8/include/css/images/footer/spacer.png) 0 0 repeat transparent; }
#scene .sprite .bulle    { position: absolute; bottom: 30px; width: 10px; height: 40px; filter : alpha(opacity=0); opacity: 0; transition: bottom 0.3s, opacity 0.5s, width 0.3s; background-position: 0 100%; background-repeat: no-repeat; background-size: 100% auto; }
#scene .sprite .couleur  { position: absolute; bottom: 0; height: 70px; filter : alpha(opacity=0); opacity: 0; transition: opacity 0.2s; background-image: url(/toulal/v8/include/css/images/footer/spr-couleur.jpg); background-repeat: no-repeat; background-size: 960px auto; }

#scene .sprite:hover .couleur { filter : alpha(opacity=100); opacity: 1; transition: opacity 0.2s; }
#scene .sprite:hover .bulle   { filter : alpha(opacity=100); opacity: 1; bottom: 40px; transition: bottom 0.3s, opacity 0.5s, width 0.3s; }

#scene .sprite-01lig          { left: 22px; }
#scene .sprite-01lig .couleur { position: absolute; width: 32px; height: 70px; background-position: -23px 100%; }
#scene .sprite-01lig       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-01lig.png); }
#scene .sprite-01lig:hover .bulle { width: 150px; }

#scene .sprite-02xyl          { left: 53px; }
#scene .sprite-02xyl .couleur { position: absolute; width: 67px; height: 70px; background-position: -54px 100%; }
#scene .sprite-02xyl       .bulle { left: 40px; bottom: 35px; background-image: url(/toulal/v8/include/css/images/footer/bul-02xyl.png); }
#scene .sprite-02xyl:hover .bulle { width: 98px; }

#scene .sprite-03vaa          { left: 119px; }
#scene .sprite-03vaa .couleur { position: absolute; width: 35px; height: 70px; background-position: -120px 100%; }
#scene .sprite-03vaa       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-03vaa.png); }
#scene .sprite-03vaa:hover .bulle { width: 158px; }

#scene .sprite-04sha          { left: 166px; }
#scene .sprite-04sha .couleur { position: absolute; width: 24px; height: 70px; background-position: -168px 100%; }
#scene .sprite-04sha       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-04sha.png); }
#scene .sprite-04sha:hover .bulle { width: 136px; }

#scene .sprite-05pot          { left: 194px; }
#scene .sprite-05pot .couleur { position: absolute; width: 31px; height: 70px; background-position: -194px 100%; }
#scene .sprite-05pot       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-05pot.png); }
#scene .sprite-05pot:hover .bulle { width: 118px; }

#scene .sprite-06tid          { left: 236px; }
#scene .sprite-06tid .couleur { position: absolute; width: 39px; height: 70px; background-position: -227px 100%; }
#scene .sprite-06tid       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-06tid.png); }
#scene .sprite-06tid:hover .bulle { width: 136px; }

#scene .sprite-07zid          { left: 274px; }
#scene .sprite-07zid .couleur { position: absolute; width: 33px; height: 70px; background-position: -273px 100%; }
#scene .sprite-07zid       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-07zid.png); }
#scene .sprite-07zid:hover .bulle { width: 110px; }

#scene .sprite-08squ          { left: 330px; }
#scene .sprite-08squ .couleur { position: absolute; width: 40px; height: 70px; background-position: -327px 100%; }
#scene .sprite-08squ       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-08squ.png); }
#scene .sprite-08squ:hover .bulle { width: 52px; }

#scene .sprite-09pup          { left: 368px; }
#scene .sprite-09pup .couleur { position: absolute; width: 37px; height: 70px; background-position: -368px 100%; }
#scene .sprite-09pup       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-09pup.png); }
#scene .sprite-09pup:hover .bulle { width: 127px; }

#scene .sprite-10cla          { left: 415px; }
#scene .sprite-10cla .couleur { position: absolute; width: 50px; height: 70px; background-position: -416px 100%; }
#scene .sprite-10cla       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-10cla.png); }
#scene .sprite-10cla:hover .bulle { width: 136px; }

#scene .sprite-11ter          { left: 466px; }
#scene .sprite-11ter .couleur { position: absolute; width: 45px; height: 70px; background-position: -467px 100%; }
#scene .sprite-11ter       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-11ter.png); }
#scene .sprite-11ter:hover .bulle { width: 110px; }

#scene .sprite-12mog          { left: 511px; }
#scene .sprite-12mog .couleur { position: absolute; width: 31px; height: 70px; background-position: -511px 100%; }
#scene .sprite-12mog       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-12mog.png); }
#scene .sprite-12mog:hover .bulle { width: 84px; }

#scene .sprite-13cho          { left: 542px; }
#scene .sprite-13cho .couleur { position: absolute; width: 40px; height: 70px; background-position: -541px 100%; }
#scene .sprite-13cho       .bulle { left: 25px; background-image: url(/toulal/v8/include/css/images/footer/bul-13cho.png); }
#scene .sprite-13cho:hover .bulle { width: 61px; }

#scene .sprite-14but          { left: 582px; }
#scene .sprite-14but .couleur { position: absolute; width: 44px; height: 70px; background-position: -582px 100%; }
#scene .sprite-14but       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-14but.png); }
#scene .sprite-14but:hover .bulle { width: 118px; }

#scene .sprite-15cec          { left: 624px; }
#scene .sprite-15cec .couleur { position: absolute; width: 40px; height: 70px; background-position: -623px 100%; }
#scene .sprite-15cec       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-15cec.png); }
#scene .sprite-15cec:hover .bulle { width: 134px; }

#scene .sprite-16oni          { left: 668px; }
#scene .sprite-16oni .couleur { position: absolute; width: 37px; height: 70px; background-position: -663px 100%; }
#scene .sprite-16oni       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-16oni.png); }
#scene .sprite-16oni:hover .bulle { width: 150px; }

#scene .sprite-18pam          { left: 709px; }
#scene .sprite-18pam .couleur { position: absolute; width: 31px; height: 70px; background-position: -709px 100%; }
#scene .sprite-18pam       .bulle { left: 25px; background-image: url(/toulal/v8/include/css/images/footer/bul-18pam.png); }
#scene .sprite-18pam:hover .bulle { width: 104px; }

#scene .sprite-17fir          { left: 748px; }
#scene .sprite-17fir .couleur { position: absolute; width: 43px; height: 70px; background-position: -745px 100%; }
#scene .sprite-17fir       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-17fir.png); }
#scene .sprite-17fir:hover .bulle { width: 170px; }

#scene .sprite-19wol          { left: 798px; }
#scene .sprite-19wol .couleur { position: absolute; width: 38px; height: 70px; background-position: -799px 100%; }
#scene .sprite-19wol       .bulle { left: 10px; background-image: url(/toulal/v8/include/css/images/footer/bul-19wol.png); }
#scene .sprite-19wol:hover .bulle { width: 127px; }

#scene .sprite-20bom          { left: 852px; }
#scene .sprite-20bom .couleur { position: absolute; width: 40px; height: 70px; background-position: -852px 100%; }
#scene .sprite-20bom       .bulle { right: -94px; background-image: url(/toulal/v8/include/css/images/footer/bul-20bom.png); }
#scene .sprite-20bom:hover .bulle { right: -94px; width: 147px; }

#scene .sprite-21tom          { left: 898px; }
#scene .sprite-21tom .couleur { position: absolute; width: 40px; height: 70px; background-position: -898px 100%; }
#scene .sprite-21tom       .bulle { right: -45px; background-image: url(/toulal/v8/include/css/images/footer/bul-21tom.png); }
#scene .sprite-21tom:hover .bulle { right: -45px; width: 136px; }

.footer {
    background-color: #1F1F1F;
}

@media screen and (max-width: 1px) {
  .footer-wrapper {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
  }

  .footer-wrapper > * {
    padding: 1.5rem;
  }
}

@media screen and (min-width: 2px) {
    .footer-wrapper {
        display: flex;
        max-width: 96rem;
        margin: 0 auto;
        padding: 2rem 0;
    }

    .footer-liens.partenaires {
        flex-basis: 40%;
    }

    .footer-liens.rapides {
        flex-basis: 40%;
    }

    .footer-liens.contact {
        flex-basis: 20%;
    }
}

.footer-titre {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    margin: 0 0 1em;
    color: #FFFFFF;
    font-size: 1.6rem;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
}

.footer a {
    color: #bfd8ed;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

/* Copyright */
.footer-copyright {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    color: #FFFFFF;
    background-color: #0E0E0F;
}

/* ===================================================================
 * CONTAINER // GAUCHE + CENTRE + DROITE
 * =================================================================*/

/* LAYOUT */
.main-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 96rem;
    margin: 15px auto 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

@media screen and (min-width: 2px) {
  .main-wrapper {
    flex-direction: row;
    gap: 0;
  }

  .main-nav {
    order: 1;
    flex-grow: 1;
    flex-basis: 31%;
    max-width: 21rem;
    background-color: #fff;
  }

  .main-aside {
    order: 3;
    flex-grow: 1;
    max-width: 26.8rem;
    background-color: #e3eef7;
  }

  .main-content {
    position: relative;
    order: 2;
    flex-grow: 1;
    max-width: 26.8rem;
    padding: 1rem 1.5rem 0;
    box-shadow: 3px 0 5px #d0e2f2;
  }
}

.main-content {
    padding: 1rem 1.5rem;
    background-color: #fff;
}

@media screen and (min-width: 2px) {
    .main-content {
        position: relative;
        order: 2;
        flex-grow: 1;
        max-width: 45.1rem;
        padding: 1rem 1.5rem 0;
        box-shadow: 3px 0 5px #d0e2f2;
    }
}

/* COLONNE GAUCHE */
.colonneGauche ul { margin: 0; padding: 0; list-style: none; }
.colonneGauche .section    { background: url(/toulal/v8/include/css/images/sprite-colonne.png) 0 100% no-repeat #DFEBF6; margin: 0 0 10px; padding: 0 0 24px; }
.colonneGauche .section-titre { display: block; margin: 0; padding: 1rem 0.5rem 1rem 1.5rem; font-family: 'Open Sans', sans-serif; font-size: 1.6rem; font-weight: 500; color: #FFFFFF;
                                background-color: #0D2030; }
.colonneGauche .sous-section-titre { margin: 0; padding: 0 0 0 1.5rem; }
.colonneGauche .section-contenu    { background: url(/toulal/v8/include/css/images/sprite-colonne.png) repeat-y -211px 0 transparent; }
.colonneGauche .section-contenu ul { padding: 1rem 0 1rem 1.5rem; }
.colonneGauche .sous-section ul    { margin: 5px 0 10px 15px; padding: 0; border-left: 1px dotted #2678b9; }
.colonneGauche .sous-section ul.ff { padding: 0; }
.colonneGauche .sous-section ul li { padding: 0 0 0 10px; }
.colonneGauche a          { color: #2678B9; text-decoration: none; }
.colonneGauche a:hover    { color: #000000; text-decoration: underline; }
.colonneGauche .section button { width: 100%; text-align: start; -webkit-appearance: none; border-width: 0; padding: 0; background: none; }
.colonneGauche .section p button { display: none; }
.colonneGauche .section-sommaire-titre { display: none; }

/* COLONNE DROITE */
.colonneDroite a             { color: #a3ccf4; text-decoration: none; }
.colonneDroite a:hover       { color: #FFFFFF; text-decoration: underline; }
.colonneDroite img           { display: block; }
.colonneDroite ul            { list-style: none outside none; margin: 0; padding: 0; }
.colonneDroite .section { margin: 0 0 15px 15px; color: #FFFFFF; background: #292E33; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.colonneDroite .social  { padding: 15px 0 0 15px; background: /*url(/toulal/v8/include/css/images/sprite-colonne-social.png) no-repeat scroll 0 0 #1f4a6f*/ /*#FFFFFF*/ none; }
.colonneDroite .online .section-contenu,
.colonneDroite .jukeBox .section-contenu { padding: 1rem; }
.colonneDroite .online .section-contenu p:first-child { margin-top: 0; }

/* COLONNE DROITE - Toolbar accessibilite */
#toolbar { padding: 15px 0; }

/* COLONNE DROITE - Titres */
.colonneDroite h3,
.colonneDroite .section-titre               { margin: 0; padding: 10px 0 10px 40px; font-family: 'Open Sans', sans-serif; font-size: 1.334em/*16/12*/; font-weight: 500; color: #FFFFFF; }
.colonneDroite .actuellement .section-titre { background: url(/toulal/v8/include/css/images/pictoColActuellement.png) 14px 14px / 14px auto no-repeat #181819; }
.colonneDroite .online .section-titre       { background: url(/toulal/v8/include/css/images/pictoColOnline.png) 12px 14px / 18px auto no-repeat #181819; }
.colonneDroite .images .section-titre       { background: url(/toulal/v8/include/css/images/pictoColImage.png) 12px 14px / 18px auto no-repeat #181819; }
.colonneDroite .jukeBox .section-titre      { background: url(/toulal/v8/include/css/images/pictoColJukebox.png) 13px 14px / 15px auto no-repeat #181819; }

/* COLONNE DROITE - Section Social */
#social                     { overflow: hidden; }
#social li                  { float: left; }
#social li a                { display: block; width: 24px; height: 30px; margin: 0 8px 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; opacity: 0.8; background-position: 50% 50%; background-repeat: no-repeat; background-size: 28px auto; }
#social li a.facebook { background-image: url(/toulal/v8/include/css/images/picto-facebook.png); }
#social li a.twitter  { background-image: url(/toulal/v8/include/css/images/picto-twitter.png); }
#social li a.google   { background-image: url(/toulal/v8/include/css/images/picto-googleplus.png); }
#social li a.youtube  { background-image: url(/toulal/v8/include/css/images/picto-youtube.png); }
#social li a.twitch   { background-image: url(/toulal/v8/include/css/images/picto-twitch.png); }
#social li a.discord  { background-image: url(/toulal/v8/include/css/images/picto-discord.png); }
#social li a.instagram{ background-image: url(/toulal/v8/include/css/images/picto-instagram.png); }
#social li a.rss      { background-image: url(/toulal/v8/include/css/images/picto-rss.png); margin: 0; }
#social li a:hover    { opacity: 1; }

/* COLONNE DROITE - Section Actuellement */
.actuellementSlide, .actuellementSolo, .actuellementslide, .actuellementsolo { position:relative; overflow:hidden; width:100%; height: auto; }
.listeActuellement      { height:auto; padding:0; margin:0; list-style: none; }
.itemActuellement       { float:left; margin-left: 0; }
.imageActuellement      { display: block; width: 100%; height: auto; }
.flecheActuellementGauche     { width:13px; height: 26px; border: 0px; position:absolute; top: 52px; left: 2px; }
.flecheActuellementDroite     { width:13px; height: 26px; border: 0px; position:absolute; top: 52px; right: 2px; }
.actuellementTrois      { width: 300%; }    .actuellementTiers      { width: 33.33%; }
.actuellementQuatre     { width: 400%; }    .actuellementQuart      { width: 25%; }
.actuellementCinq       { width: 500%; }    .actuellementCinquieme  { width: 20%; }

/* COLONNE DROITE - Section Online */
.onlineRow { margin: 1em 0 0; overflow: hidden; }
.onlineRow:first-child { margin: 0; }
#mosaique        { margin-left: -4px; margin-right: -4px; text-align: center; position: relative;}
#mosaique li     { display: block; float: left; width: 25%; height: 48px; line-height: 48px; margin: 0 0 12px; border: 0 none; position:absolute; }
#mosaique li img { max-width: 100%; max-height: 100%; margin: 0 auto; vertical-align: bottom; }

/* COLONNE DROITE - Section Images */
.section.images img { width: 100%; box-sizing: border-box; }

/* ===================================================================
 * CONTENU - INITIALISATION
 * =================================================================*/

.content a:link,
.content a:visited,
.content a:active { color: #2678B9; text-decoration: none;}
.content a:hover  { color: #000000; text-decoration: underline; }

.content h1 { margin: 0 0 1em;     padding: 0; line-height: 1.2; font-size: 1.667em; font-weight: 600; font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
.content h2 { margin: 1.5em 0 1em; padding: 0; line-height: 1.5; font-size: 1.334em; font-weight: 600; font-family: 'Open Sans', Arial, Helvetica, sans-serif; clear: both; }
.content h3 { margin: 1.5em 0 1em; padding: 0; line-height: 1.5; font-size: 1.167em; font-weight: 600; clear: both; font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
.content h4 { margin: 1.5em 0 1em; padding: 0; line-height: 1.2; font-size: 1em;     clear: both; }
.content h5 { margin: 1.5em 0 1em; padding: 0; line-height: 1.2; font-size: 1em;     clear: both; text-decoration: underline; font-weight: normal}

/* Fil d'Ariane */
#ariane          { color: #8C8C8C; }
#ariane a:link,
#ariane a:visited,
#ariane a:active { color: #8C8C8C; }
#ariane a:hover  { text-decoration: underline; }
#ariane .active  { color: #333333; }

/* Sections de page : informations, commentaires... */
.content .auteur a { color: #333333; }
.content h2.section      { background: url(/toulal/v8/include/css/images/content-sectionh2.png) 0 -34px repeat-x transparent; }
.content h2.section span { background: url(/toulal/v8/include/css/images/content-sectionh2.png) 0 0 no-repeat #FFFFFF; padding: 0 5px 0 25px; }

.content .articleEntete { margin: 0 0 2em; padding: 0 0 1em; border-bottom: 1px solid #e1e1e1; }
.content .articleInfo { color: #666666; margin: -2.5em 0 0; }

.content .commentaire            { margin: 0 0 1.5em; overflow: hidden; }
.content .commentaire .image     { width: 70px; float: left; overflow: hidden; line-height: 60px; text-align: center; }
.content .commentaire .image img { max-width: 60px; max-height: 60px; margin: 0 1em 0 0; vertical-align: middle; }
.content .commentaire .texte     { width: 381px; float: left; word-wrap: break-word; }
.content .commentaire .infos     { margin: 0; font-weight: bold; }
form[name="commentaire"] input[type="radio"] { margin-right: 1px; }
form[name="commentaire"] td { padding: 3px 0; }

.content .addthis_toolbox { height: 39px; }

.content .notif        { margin-bottom: 18px; padding: 14px; border-radius: 4px; border-width: 1px; border-style: solid; }
.content .notif.succes { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; }
.content .notif.erreur { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }
.content .notif p       { margin: 0 30px 0 0;  }
.content .notif .fermer { float: right; font-size: 20px; font-weight: bold; text-decoration: none; color: #000000; opacity: 0.4; }

/* Picto loupe */
/*
.content .img_gauche:hover > a, #content .img_gauche_avecsoustitre:hover > a,
.content .img_droite:hover > a, #content .img_droite_avecsoustitre:hover > a,
.content .img_seule:hover > a, #content .img_seule_avecsoustitre:hover > a,
.content .img_soustitre:hover > a {
    position:relative;
}

.content .img_gauche:hover > a:after, #content .img_gauche_avecsoustitre:hover > a:after,
.content .img_droite:hover > a:after, #content .img_droite_avecsoustitre:hover > a:after,
.content .img_seule:hover > a:after, #content .img_seule_avecsoustitre:hover > a:after,
.content .img_soustitre:hover > a:after {
    display: inline-block;
    content: url(".$cheminCSSMedia."/loupe.png);
    position: absolute;
}
*/

.content a.bouton {
    display: inline-block;
    min-width: 100px;
    padding: 10px 20px 10px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    background: #488ECC;
    border-radius: 4px;
    transition: all 0.2s;
}
.content a.bouton.medium {
    padding: 8px 12px 7px;
}
.content a.bouton.small {
    min-width: 0;
    padding: 3px 6px 3px;
    font-size: 0.833em;
    border-radius: 2px;
}
.content a.bouton:hover {
    text-decoration: none;
    background: #2166a3;
}

.content a.bouton.rouge {
    background: #cc484a;
}
.content a.bouton.rouge:hover {
    background: #b62e30;
}

.content a.externe::after,
.content a[target="_blank"]:not([class*="fancy"]):not([class*="image"])::after {
    content: "";
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    background: url(/toulal/v8/include/css/images/lien-externe.png) 0 0 / 12px auto no-repeat transparent;
}
.content a.externe:hover::after,
.content a[target="_blank"]:not([class*="fancy"]):hover::after {
    background-image: url(/toulal/v8/include/css/images/lien-externe-survol.png)
}
.content a.bouton.externe::after,
.content a.bouton[target="_blank"]:not([class*="fancy"])::after {
    background-image: url(/toulal/v8/include/css/images/lien-externe-blanc.png);
}

#boutons-partage { text-align: center; }
#boutons-partage img { width: 30px; height: auto; margin: 0 5px; }

/* Gestion des médias */
.content div[data-oembed-url] {
    margin: 0 0 15px;
    padding: 0;
    text-align: center;
}

.content div[data-oembed-url] > div {
    display : inline-block;
    max-width: 100% !important; /* Un important, pour contrer le style imposé par ckeditor... */
}

/* Construction flex */
.row {
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
}
.align-bottom {
    align-items: flex-end;
}
.no-shrink {
    flex-shrink: 0;
}
.row [class*=col] {
    padding-left: 10px;
    padding-right: 10px;
}
.col-10 {
    width: 10%;
}
.col-20 {
    width: 20%;
}
.col-30 {
    width: 30%;
}
.col-40 {
    width: 40%;
}
.col-50 {
    width: 50%;
}
.col-60 {
    width: 60%;
}
.col-70 {
    width: 70%;
}
.col-80 {
    width: 80%;
}
.col-90 {
    width: 90%;
}
.col-100 {
    width: 100%;
}


/* ===================================================================
 * Accueil
 * =================================================================*/

.accueil-actualite,
.accueil-agenda,
.accueil-maj,
.accueil-sondage {
    margin-top: 2em;
}
.accueil-actualite .entete,
.accueil-agenda .entete,
.accueil-maj .entete,
.accueil-sondage .entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.content h2.bloc-accueil {
    display: inline-block;
    margin-top: 0;
}
.accueil-actualite .entete .rss img {
    margin-left: 0.25em;
    background: url(rss.png) 0 0 / 12px auto no-repeat transparent;
    opacity: 0.8;
}
.accueil-actualite .entete .rss a:focus img,
.accueil-actualite .entete .rss a:hover img {
    opacity: 1;
}
.voirTout {
    display: inline-block;
    padding: 0 3px 1px;
    font-size: 0.834em;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #fff !important;
    background: #2678b9;
    border-radius: 3px;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    opacity: 0.8;
}
.voirTout:hover,
.voirTout:focus {
    opacity: 1;
}

.accueil-maj li {
    padding-bottom: 0;
}
.accueil-maj h3 {
    margin: 0 0 0.5em;
}
.accueil-maj .auteur {
    margin: 0;
    font-weight: 700;
}
.accueil-maj .imgtxt p {
    margin-bottom: 0;
}

/* ===================================================================
 * Nouveautés v9
 * =================================================================*/
.width100 { max-width: 100px; }
.width200 { max-width: 200px; }
.width300 { max-width: 300px; }
.width400 { max-width: 400px; }
.margin-0 { margin: 0 !important; }
.margin-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.padding-0 { padding: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.d-block { display: block; }
.border, .bordure { border: 1px solid #333; }
.position-relative { position: reative; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.italic, .font-italic { font-style: italic; }
.bold, .strong { font-weight: bold; }
.nowrap { white-space: nowrap; }

/* Lire aussi */
.content .lireAussi {
    background-color: #e3eef7;
    border-left: 2px solid #2678B9;
    padding: 0.65em 1em 0.5em;
}
.content .lireAussi strong {
    text-transform: uppercase;
}
.content .lireAussi a {
    border-bottom: none;
    background: none;
}
.content .lireAussi a:hover, .lireAussi a:focus {
    color: #040B10;
}
.content .lireAussi a:hover {
    text-decoration: underline;
}
.content .lireAussi a:focus {
    outline: 1px dotted #040B10;
    outline-offset: 0.2em;
}

/* Vidéo responsive */
.video {
    position: relative;
    margin: 2rem auto;
}
.video::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 56.25%; /* 16/9 magique*/
    position: relative;
}
.video iframe,
.video embed,
.video video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Dates de sortie */
.datesSortie {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.datesSortie > div {
    min-width: 200px;
}
.datesSortie table {
    width: 100%;
    margin-bottom: 0;
    margin-top: 2em;
}

/* ===================================================================
 * CONTENU - STYLES REDACTIONNELS
 * =================================================================*/

.h2 { font-family: Arial, Helvetica, sans-serif; /*font-size: 1.334em;*/ font-weight: normal; text-align: center; }
.h3 { font-family: Arial, Helvetica, sans-serif; /*font-size: 1.167em;*/ font-weight: normal; }
.h4 { font-family: Arial, Helvetica, sans-serif; /*font-size: 1em;*/     font-weight: normal; text-align: right; }
.h5 { font-family: Arial, Helvetica, sans-serif; /*font-size: 1em;*/     font-weight: normal; }
.h6 { font-family: Arial, Helvetica, sans-serif; /*font-size: 1em;*/     font-weight: normal; text-align: center; }
.big { font-size: 1.834em; }

.content .titre_avec_icone     { margin: 0; padding: 15px 0 0; }
.content .titre_avec_icone p   { display: inline-block; font-weight: bold; vertical-align: middle; }
.content .titre_avec_icone img { margin: 0; padding: 0 5px 0 0; }

.content p          { margin: 0 0 15px; padding: 0; }
.content q::before  { content: "« "; }
.content q::after   { content: " »"; }
.content pre        { font-family: 'consolas', monospace; }
.content code       { font-family: 'consolas', monospace; }
.img_droite + p,
.img_droite + ul,
.img_droite + ol     { clear: both; }
.content dl dt      { margin: 0; font-weight: 700; }
.content dl dd      { margin: 0 0 1em; }
.content dl dd + dd { margin-top: -1em; }
.content dl.ligne dt {
    float: left;
    clear: left;
    width: 20%;
}
.content dl.ligne dd {
    float: left;
    width: 80%;
    margin-bottom: 0;
}
.content dl.ligne {
    overflow: hidden;
}
.content iframe     { margin: 0 0 15px; padding: 0; max-width: 100%; }

.content hr          { clear: both; width: 85%; height: 4px; border-top: 2px solid #cfe2f2; border-right: none; border-bottom: none; border-left: none; margin: 2em auto 2em; }
.content .centrer    { text-align: center; }
.content .italic   { font-style: italic; }
.content .underline   { text-decoration: underline; }
.content .bold       { font-weight: bold; }
.content [lang] { font-style: italic; }

.content .img_gauche               { width: 49.89%; float: left;  margin: 0 0 15px; padding: 0; text-align: center; clear: left; }
.content .img_droite               { width: 50.11%; float: right; margin: 0 0 15px; padding: 0; text-align: center; }
.content .img_seule                { display: block; margin: 0 0 15px; padding: 0; text-align: center; clear: right; }
.content .img_seule.centre75       { max-width: 75%; margin-left: auto; margin-right: auto; }
.content .bordure                  { border: 1px solid #000; }
.content .bloc                     { display: block !important; }
.content .vignette180x30           { float: left; margin-right: 5px; }

.content .img_tiers_gauche         { width: 31%; float: left;  margin: 0 0 15px;    padding: 0; position: relative; text-align: center; clear: left; }
.content .img_tiers_centre         { width: 31%; float: left;  margin: 0 15px 15px; padding: 0; position: relative; text-align: center; }
.content .img_tiers_droite         { width: 31%; float: right; margin: 0 0 15px;    padding: 0; position: relative; text-align: center; clear: right; }
.content .img_gauche_avecsoustitre { width: 49.89%; float: left;  margin: 0; padding: 0; text-align: center; }
.content .img_droite_avecsoustitre { width: 50.11%; float: right; margin: 0; padding: 0; text-align: center; }
.content .img_seule_avecsoustitre  {                              margin: 0; padding: 0; text-align: center; }
.content .img_soustitre            { font-style: italic; margin: 0 0 15px; padding: 0; text-align: center; }
.content .img_loupe                { position: absolute; bottom: 2px; left: 0; }
.content div[class^='img_'] a     { position: relative; }
.content div[class^='img_'] a img { /*border: 1px solid #000000;*/ }
.content div[class^='img_'] a img.img_loupe { border-width: 0; }

/* YOUPI FLEX */
.content ul[class^="auto-"],
.content > div[class^="auto-"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -7px 1em;
    padding: 0;
}
.content ul[class^="auto-"] > *,
.content div[class^="auto-"] > * {
    display: block;
    box-sizing: border-box;
    padding: 7px;
}
.content [class^="auto-"] img {
    display: block;
    margin: 0 auto;
    height: auto;
}
.content [class^="auto-"] .img_seule,
.content [class^="auto-"] .auto-seule {
    width: 100%;
}
.auto-quadruple > * {
    width: 25%;
}
.auto-triple > * {
    width: 33.33%;
}
.auto-double > * {
    width: 50%;
}
.auto-seule > * {
    width: 100%;
}

.content [class^="auto-"] .img_seule,
.content [class^="auto-"] .auto-seule {
    width: 100%;
}
.content [class^="auto-"] .auto-demi {
    width: 50%;
}
.content [class^="auto-"] .auto-2tiers {
    width: 66.66%;
}
.content [class^="auto-"] .auto-tiers {
    width: 33.33%;
}
.content [class^="auto-"] .auto-quart {
    width: 25%;
}
.content [class^="auto-"] .auto-3quart {
    width: 75%;
}

/*
@media (max-width: 640px) {
    [class^="auto-"] {
        flex-direction: column;
        align-items: center;
    }
    [class^="auto-"] > * {
        width: auto !important;
    }
    .m-auto-double > * {
        width: 50%;
    }
    .m-auto-triple > * {
        width: 33.33%;
    }
}
*/


/* Temporaire : forcer les nouvelles vignettes (300px) aux dimensions de la v8 */
.content img[width="300"] { width: 208px !important; height: auto !important; }
.content img[width="300"][height="210"] { width: 200px !important; }
.content [class^="auto"] img[width="300"] { width: auto !important; }

.imgtxt        { display: table; margin: 0 0 2em; }
.imgtxt .img,
.imgtxt img    { display: table-cell; margin: 0 10px 0 0; padding: 0; vertical-align: top; max-width: none; }
.imgtxt .txt,
.imgtxt > p      { display: table-cell; margin: 0; padding: 0; vertical-align: top; }
.imgtxt .txt img { display: inherit; margin: auto; }

.content .imgul         { margin: 0 0 15px; text-align: center; }
.content .imgul img     { display: inline-block; vertical-align: middle; }
.content .imgul ul      { display: inline-block; margin: 0; padding: 0 0 0 30px; text-align: left; vertical-align: middle; }
.content .imgul ul li   { list-style-type: none; padding-bottom: 0; }
.content .imgtitreul    { clear: both; margin: 0 0 15px; overflow: hidden; }
.content .imgtitreul img    { float: left; }
.content .imgtitreul h4     { display: inline-block; margin: 0; padding: 0 0 0 15px; }
.content .imgtitreul ul     { display: inline-block; margin: 0; padding: 0 0 0 15px; }
.content .imgtitreul ul li  { list-style-type: none; padding-bottom: 0; }

.content .titreimgtxt                 { overflow: hidden; padding: 0 0 15px; }
.content .titreimgtxt > p:first-child { background: none #CFE2F2; font-weight: bold; margin: 0 0 1em; padding: 2px 0; text-align: center; }
.content .titreimgtxt > p:last-child  { margin: 0; }
.content .titreimgtxt > img, #content .titreimgtxt > a > img            { float: left; margin: 3px 15px 5px 0; }

.content .retour    { clear: both; margin: 0; padding: 15px 0 0; text-align: center; }

.content ul         { margin: 0; padding: 0 0 0 17px; }
.content ul > li    { margin: 0; padding: 0 0 10px; }
.content ol         { padding: 0 0 0 20px; list-style-position: outside; }
.content ol > li    { margin: 0; padding: 0 0 10px; }
.content li ul,
.content li ol      { margin-top: 10px; }
.content ol ol      { list-style-type: lower-alpha; }
.content ul.listeNue,
.content ul.presentation { padding: 0; list-style: none; }
.content ul.listeNue li,
.content ul.presentation li { padding: 0; }
.content ul.serree li { padding-bottom: 0; }
.content ul.listeEnLigne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
    padding: 0;
}

.content ul.listeEnLigne li {
    list-style: none;
}

/* Vidéo responsive */
.fnd-video { position: relative; margin-bottom: 2em; }
.fnd-video::before { content: ""; display: block; width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
.fnd-video embed, .fnd-video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Ajouts specifiques - FFXII */
#content .ff12_chasse_img { float: left; padding: 9px 7px 5px 5px; }

/* Ajouts specifiques - FFXI, FFXIV */
.toggle-info table,
.info-panel table { margin: 0; }
.toggle-info td img { display: block; }
.info-panel {
    padding-top: 10px;
}
.toggle-info h2 {
    margin: 0;
    padding: 1px 10px;
}

/* Ajouts specifiques - Galeries */
table a[rel=gallery] img { max-width: 140px; max-height: 100px;  }

/* Ajouts spécifiques - menus déroulants (ff14) */
.toggle-info,
.info-panel {
    cursor: pointer;
}

/* Spécifique - FFVII - CRISISCORE (voir pour généraliser)*/
.collapsible {
    margin: 1rem 0;
}

.collapsible-cta {
    cursor: pointer;
    font-weight: 700;
}
.collapsible-cta:hover {
    text-decoration: underline;
}

.collapsible-content {
    margin-top: 1rem;
    padding: 15px 15px 20px;
    font-size: 1em;
    background: #F9FCFF;
    border: 1px solid #A0C4E4;
}

/* Spécifique - THEATRHYTHM FF - FINAL BAR LINE */
.tff-fbl .grade {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 1em;
    min-height: 1em;
    padding: 0.3em;
    line-height: 1;
    font-weight: 700;
}

.tff-fbl .grade.easy {
    background-color: #f0b300;
}

.tff-fbl .grade.normal {
    color: #fff;
    background-color: #0089b1;
}

.tff-fbl .grade.hard {
    color: #fff;
    background-color: #a60100;
}

.tff-fbl .grade.extreme {
    color: #fff;
    background-color: #7e3888;
}

/* ===================================================================
 * CONTENU - SOMMAIRE
 * =================================================================*/

.sommaire {
    padding: 1em;
    background-color: #E3EEF7;
}
.sommaire h2 {
    margin-top: 0.5em;
}

/* ===================================================================
 * CONTENU - NAVIGATION CHAPITRES
 * =================================================================*/

/* Structure du bloc de navigation :

<nav role="navigation" aria-label="Pagination" class="navigation">
    <ul>
        <li><a href="#" title="Page 1 (active)" class="active">1</a></li>
        <li><a href="#" title="Page 2">2</a></li>
        <li><a href="#" title="Page 3">3</a></li>
    </ul>
</nav>

*/
.navigation {
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: center;
    background-color: #f2f4f5;
    clear: both;
}
.navigation ul {
    padding: 0 !important;
}
.navigation li {
    display: inline-block;
    list-style: none;
    margin: 0 2px !important;
    padding: 0 !important;
}
.navigation li a {
    display: block;
    min-width: 30px;
    padding: 0 0.5em;
    text-align: center;
    color: #333333 !important;
    font-weight: 700;
    border-radius: 4px;
    line-height: 30px;
    border: 1px solid #cbcbcb;
    transition: all 0.3s;
    box-sizing: border-box;
}
.navigation li a:hover {
    background-color: #ffffff;
}
.navigation li a.active {
    color: #ffffff !important;
    background-color: #2976bb;
    border-color: #2976bb;
}

/* ===================================================================
 * CONTENU - TABLEAUX
 * =================================================================*/

table { min-width: 30%; max-width: 100%; /*clear: both;*/ font-size: 1em; margin: 0 0 1em; }
table table { margin: 0; }

table.Tab       { border-color: #A0C4E4; border-style: solid; }
table td.TabHA  { background-color: #A0C4E4; border-style: none; font-weight: bold; text-align: center; height: 20px; }
table td.TabHA1 { background-color: #CFE2F2; border-style: none; text-align: center; height: 20px; }
table td.TabHA2 { background-color: #CFE2F2; border-color: #A0C4E4; border-style: solid none none;       text-align: center; height: 20px; }
table td.TabHB1 { background-color: #CFE2F2; border-color: #A0C4E4; border-style: solid none none;       text-align: center; height: 20px; }
table td.TabHB2 { background-color: #CFE2F2; border-color: #A0C4E4; border-style: solid none none solid; text-align: center; height: 20px; }
table td.TabHB3 { background-color: #CFE2F2; border-color: #A0C4E4; border-style: none;                  text-align: center; height: 20px; }
table td.TabHB4 { background-color: #CFE2F2; border-color: #A0C4E4; border-style: none none none solid;  text-align: center; height: 20px; }
table td.TabHB5 { background-color: #FFFFFF; border-color: #A0C4E4; border-style: solid none none solid; text-align: center; height: 20px; }
table td.TabHB6 { background-color: #CFE2F2; border-color: #A0C4E4; border-style: solid none none;       text-align: center; height: 20px; }
table td.TabHB7 { background-color: #FFFFFF; border-color: #A0C4E4; border-style: none none none solid;  text-align: center; height: 20px; }
table td.Tab1   { background-color: #F9FCFF; border-color: #A0C4E4; border-style: solid none none;       text-align: center; }
table td.Tab2   { background-color: #F9FCFF; border-color: #A0C4E4; border-style: solid none none solid; text-align: center; }
table td.Tab3   { background-color: #F9FCFF; border-color: #A0C4E4; border-style: none;                  text-align: center; }
table td.Tab4   { background-color: #F9FCFF; border-color: #A0C4E4; border-style: none none none solid;  text-align: center; }
table td.Tab5   { background-color: #F9FCFF; border-color: #A0C4E4; border-style: solid none none solid; text-align: center; }

.tableau           { border-collapse: collapse; border-color: #A0C4E4; border-spacing: 0; border-style: solid; border-width: 0 0 1px 1px; margin: 0 auto 1em; padding: 0; }
.tableau .grand_titre,
.tableau caption   {
    background-color: #A0C4E4;
    border-color: #A0C4E4;
    border-style: solid;
    border-width: 1px 1px 0 0;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    padding: 0.5em;
    font-size: 1.167em;
}
.tableau .titre,
.tableau th        { background-color: #CFE2F2; border-color: #A0C4E4; border-style: solid; border-width: 1px 1px 0 0; font-weight: normal; height: 20px; text-align: center; }
.tableau td        { background-color: #F9FCFF; border-color: #A0C4E4; border-style: solid; border-width: 1px 1px 0 0; margin: 0; padding: 3px; text-align: center; }
.tableau .justifie { text-align: justify; }
.tableau .gauche   { text-align: left; }
.tableau .centre   { text-align: center; }
.tableau .droite   { text-align: right; }
.tableau .haut     { vertical-align: top; }
.tableau .milieu   { vertical-align: middle; }
.tableau .bas      { vertical-align: bottom; }
.tableau.reinit td { text-align: left; vertical-align: top; }

.tableau .w10 { width: 10%; }
.tableau .w20 { width: 20%; }
.tableau .w30 { width: 30%; }
.tableau .w40 { width: 40%; }
.tableau .w50 { width: 50%; }
.tableau .w60 { width: 60%; }
.tableau .w70 { width: 70%; }
.tableau .w80 { width: 80%; }
.tableau .w90 { width: 90%; }

.tableau .w25 { width: 25%; }
.tableau .w33 { width: 33%; }
.tableau .w66 { width: 66%; }
.tableau .w75 { width: 75%; }

.background_tableaux_fond_titre { background: none repeat scroll 0 0 #CFE2F2; }

/* Tableau responsive */
.fnd-table { overflow-x: scroll; position: relative; width: 100%; }
.fnd-table table { min-width: 600px; }

table.gauche { margin-right: auto; }
table.droite { margin-left: auto; }
table.centre { margin: 0 auto; }
table.large  { min-width: 100%; }

/* ===================================================================
 * CONTENU - FORMULAIRES
 * =================================================================*/

.content fieldset {
    max-width: 451px;
    margin: 15px 0;
    padding: 15px 15px 20px;
    font-size: 1em;
    background: #F9FCFF;
    border: 1px solid #A0C4E4;
}
.content legend {
    float: left;
    width: 100%;
    max-width: inherit;
    margin: -1.5rem -1.5rem 1.5rem;
    padding: 0.5em 1em;
    font-size: 1.25em;
    font-weight: 700;
    color: #2C3C4C; 
    background: #CFE2F2;
}

.content fieldset.noborder {
    margin: 0 0 2em;
    padding: 0;
    border: none;
}
.content fieldset.noborder legend {
    padding: 0;
    font-size: 1em;
    background: none;
    border: none;
}
.content fieldset.noborder p {
    margin: 0;
}
.content fieldset.noborder label {
    cursor: pointer;
}
.formulaire .entete { font-size: 1.167em; }
.formulaire .contenu { padding: 10px; background: #F9FCFF; border: 1px solid #A0C4E4; }
/*
.formulaire fieldset {
    margin: 15px 0;
    padding: 15px 15px 20px;
    font-size: 1em;
    background: none #F9FCFF;
    border: 1px solid #A0C4E4;
    border-radius: 10px 10px 10px 10px;
}
.formulaire legend {
    padding: 0.25em 1em;
    font-size: 1.25em;
    font-weight: 700;
    color: #2C3C4C;
    background: #CFE2F2;
}
*/
.formulaire .noborder label { display: inline-block; margin-bottom: 0; font-weight: 400; }
.formulaire p        { clear: both; }
.formulaire label    { display: block; font-weight: bold; color: #2C3C4C; margin: 0 0 7px; }
.formulaire input[type="text"],
.formulaire input[type="password"],
.formulaire input[type="date"],
.formulaire textarea,
.formulaire select      { box-sizing: border-box; max-width: 419px; height: 3em; padding: 0 1em; font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #2C3C4C; border: 1px solid #A0C4E4; background-color: #FFFFFF; border-radius: 3px; }
.formulaire textarea    { max-width: 419px; height: auto; resize-x: none; padding-top: 0.75em; line-height:1.5; }
.formulaire .large { width: 100%; }
.formulaire .simili-input {
    display: inline-block;
    box-sizing: border-box;
    max-width: 419px;
    height: 3em;
    line-height: 2.8em;
    padding: 0 1em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #2C3C4C;
    border: 1px solid #A0C4E4;
    background-color: #FFFFFF;
    border-radius: 3px;
}
.formulaire select      {  }
.formulaire select option { padding-left: 5px; }
.formulaire .case       { display: block; }
.formulaire .case label { display: inline; font-weight: normal; margin-right: 15px; }
.formulaire .case input { margin: 0 3px 0 0; border-width: 0; }
.formulaire .action     { clear: both; text-align: right; margin-bottom: 0; }
.formulaire > p.action { margin-top: 15px; margin-bottom: 15px; }
.formulaire .action { text-align: center; }
form input[type="submit"],
.formulaire .submit {
    display: inline-block;
    min-width: 100px;
    padding: 8.5px 20px 9px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    color: #FFFFFF;
    background: #488ECC;
    border: none;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus,
.formulaire .submit:hover,
.formulaire .submit:focus {
    text-decoration: none;
    background: #2166a3;
}

.ie7 .formulaire fieldset { position: relative; margin-top: 1em; padding-top: 2em; }
.ie7 .formulaire legend   { position: absolute; top: -0.5em; left: 0.5em; }

.champ0011  { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: left;   text-decoration: none; color: #2678B9; background-color: #F9FCFF; border: 1px solid #A0C4E4; }
.champ0012  { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: left;   text-decoration: none; color: #2678B9; background-color: #F9FCFF; border: 0 none; margin: 0; padding: 0; }
.champ0013  { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: left;   text-decoration: none; color: #2678B9; background-color: #F9FCFF; border: 0 none;            }
.champ002   { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; text-decoration: none; color: #2678B9; background-color: #F9FCFF; border: 1px solid #A0C4E4; }
.champerror    {
    /*color: #B92626 !important;*/
    background-color: #FFF9F9 !important;
    border: 1px solid #E69696 !important;
}
input:disabled { color: #B9B9B9; background: none #F7F5F1;  border: 1px solid #E6E6E6; }

div.selecteur    { position: absolute; height: 100px; margin: 0; background: none #F9FCFF; overflow: auto; border-color: #A0C4E4; border-style: none solid solid; border-width: 1px;  border-right: 1px solid #A0C4E4; }
div.selecteur ul { list-style-type: none; margin: 0; padding: 0; }
div.selecteur li { color: #2678B9; cursor: pointer; height: 10px; overflow: hidden; padding: 5px 3px; text-align: left; }
div.selecteur li.selected { background: none repeat scroll 0 0 #A0C4E4; color: #FFFFFF; }

.obligatoire {
    color: #B92626;
}

.form_message {
    padding: 1em;
    margin: 0 0 2em;
    border: 1px solid grey;
    border-radius: 2px;
}

.content .form_message a {
    color: #333333;
}

.form_error {
    background-color: #FFF9F9 !important;
    border: 1px solid #E69696 !important;
}

.form_error p:last-child {
    margin-bottom: 0;
}

.form_success {
    color: #155724;
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
}

.form_success p {
    margin-bottom: 0;
}

/* QUIZ VISUEL */
.formulaire .groupeQuestion.quizVisuel {
    padding: 10px;
}

.formulaire .groupeQuestion.quizVisuel legend {
    width: calc(100% + 20px);
    margin: -10px -10px 10px;
    box-sizing: border-box;
}

/* ===================================================================
 * CONTENU - COMMENTAIRES
 * =================================================================*/
.commentaire .smiley {  }
.commentaire .smiley { overflow: hidden; }
.commentaire .smiley span { display: block; float: left; width: 23px; }
.commentaire .smiley input { margin: 3px 1px 0; }

ul.commentaire_liste {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.commentaire_liste .commentaire_item {
    display: flex;
    margin: 0;
    padding: 0;
}
.commentaire_item .avatar {
    width: 15%;
    padding-right: 5px;
}
.commentaire_item .description {
    flex: 0 1 85%;
    position: relative;
}
.commentaire_item .moderation {
    position: absolute;
    right: 0;
    bottom: 0;
}
.commentaire_item .commContenu.avecModeration {
    padding-bottom: 2em;
}

/* ===================================================================
 * CONTENU - MISES EN AVANT
 * =================================================================*/

/* Chapô en tête d'article */
.accroche {
    font-family: 'open sans', Arial, Helvetica, sans-serif;
    font-size: 1.334em;
    font-style: italic;
}
.cadre {
    margin: 0 0 1.5em;
    padding: 1em;
    border: 3px solid #cfe2f2;
}
.cadre h2:first-child,
.cadre h3:first-child {
    margin-top: 0;
}
.cadre div:last-child,
.cadre p:last-child,
.cadre ul:last-child,
.cadre ol:last-child,
.cadre ul:last-child li:last-child,
.cadre ol:last-child li:last-child {
    margin-bottom: 0;
}
.aplat {
    margin: 0 0 1.5em;
    padding: 1em 1.3em 1.3em;
    background-color: #E3EEF7;
}
.aplat h2,
.aplat h3:first-child,
.aplat .h2 {
    margin-top: 0.2em;
    text-align: center;
    font-size: 1.334em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.aplat h2::after,
.aplat h3:first-child::after,
.aplat .h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    margin: 1em auto;
    background-color: #555;
    opacity: 0.5;
}
.aplat div:last-child,
.aplat p:last-child,
.aplat ul:last-child,
.aplat ol:last-child,
.aplat ul:last-child li:last-child,
.aplat ol:last-child li:last-child {
    margin-bottom: 0;
}

blockquote.big {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.334em;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    padding-left: 0;
    border-left: 0;
}
blockquote.big p::before { content: '« '; }
blockquote.big p::after { content: ' »'; }
blockquote.big .author { margin-top: -0.5em; }
blockquote.big .author::before,
blockquote.big .author::after { content: none; }

/* ===================================================================
 * CONTENU - INTERVIEWS
 * =================================================================*/
.interview {
    margin: 0 0 1.5em;
    padding: 0 0 0 1em;
    border-left: 3px solid #cfe2f2;
}
.interview .question {
    font-weight: 400;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.083em;
}
.interview h2:first-child,
.interview h3:first-child {
    margin-top: 0;
}
.interview div:last-child,
.interview p:last-child,
.interview ul:last-child,
.interview ol:last-child,
.interview ul:last-child li:last-child,
.interview ol:last-child li:last-child {
    margin-bottom: 0;
}

/* ===================================================================
 * CONTENU - SPOILER
 * =================================================================*/
.spoiler {
    margin: 0 0 1.5em;
    padding: 1em;
    border: 3px solid #cfe2f2;
}
.spoiler .js-btn-spoiler {
    display: inline-block;
    min-width: 100px;
    padding: 8px 15px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    background: #488ECC;
    border: none;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
}
.spoiler .js-btn-spoiler:hover,
.spoiler .js-btn-spoiler:focus {
    text-decoration: none;
    background: #2166a3;
}
.spoiler .js-btn-spoiler span {
    font-style: italic;
}
.spoiler .js-btn-spoiler::before {
    content: none;
}
.spoiler .js-btn-spoiler:hover, .spoiler .js-btn-spoiler:focus {
    text-decoration: underline;
    color: #fff;
    background-color: #215c91;
}
.spoiler .js-block-spoiler {
  margin-top: 1em;
}
.spoiler .js-block-spoiler :last-child {
  margin-bottom: 0;
}

/* ===================================================================
 * CONTENU - MOG-POSTE
 * =================================================================*/

td.LettreTitre { border-style: none; font-family: 'Grand Hotel', cursive; font-size: 19px; text-align: center; }
td.LettreBody  { border-style: none; font-family: 'Grand Hotel', cursive; font-size: 19px; text-align: left; }

/* ===================================================================
 * ZONE ACTIVE
 * =================================================================*/

.de-texte { font-weight: 800; border: 1px solid black; border-radius: 6px; padding: 0px 2px 0 2px; background: #555555; background: -webkit-linear-gradient(red, yellow); background: -o-linear-gradient(red, yellow); background: -moz-linear-gradient(red, yellow); background: linear-gradient(#d8d8d8, #555555); }

#ZoneActiveGlobal   { position:fixed; bottom:0; width:100%; z-index: 3; }
#ZoneActiveGlobal a { cursor: pointer; }

#ZoneActiveMenu                 { background:#C4C4C4; box-shadow:0 -1px 5px #666666; -moz-box-shadow:0 -1px 5px #666666; -webkit-box-shadow:0 -1px 5px #666666; width:100%; height:30px; }
#ZoneActiveMenu ul              { list-style-type:none; padding:0; margin:0px 0px 0px 57px; zoom:1; height:32px; text-align:left; }
#ZoneActiveMenu ul li           { margin:0; padding:0; position:relative; display:inline-block; }
#ZoneActiveMenu ul li a         { line-height:30px; font-weight: 700; display:block; padding:0px 10px 0px 10px; text-decoration:none; border-right:1px solid #A0A0A0; }
#ZoneActiveMenu ul li a:hover   { text-decoration:none; background-color:#B4B4B4; }

.ZA_Onglet_InActif_Jaune    { padding: 0px 20px 0px 20px; background: #C4C4C4; color: #b38412; }
.ZA_Onglet_InActif_Blanc    { padding: 0px 20px 0px 20px; background: #C4C4C4; color: #444444; }
.ZA_Onglet_Actif_Jaune      { padding: 0px 20px 1px 20px; background: #D8D8D8; color: #b38412; }
.ZA_Onglet_Actif_Blanc      { padding: 0px 20px 1px 20px; background: #D8D8D8; color: #444444; }

#ZAListe { position:relative; }

#ZAConfiguration        { position:absolute; right:51px; top:0px; height:29px; width:19px; cursor: pointer; border-bottom:1px solid #C7C7C7; background-color:#C4C4C4; background-image:url(/design/004-toulal/rouage.png); background-repeat:no-repeat; }
.ZAConfigurationGris    { background-position:2px 9px; }
.ZAConfigurationOrange  { background-position:-14px 9px; }

#ZAModifHauteur { position:absolute; right:0px; top:0px; height:29px; width:17px; border-bottom:1px solid #C7C7C7; background-color:#C4C4C4; background-image:url(/design/004-toulal/redim.png); background-repeat:no-repeat; }

#ZAAgrandir { position:absolute; right:17px; top:0px; height:29px; width:17px; border-bottom:1px solid #C7C7C7; background-color:#C4C4C4; background-image:url(/design/004-toulal/agrandir.png); background-repeat:no-repeat; }
.ZAAgrandirBlanc, .ZAReduireBlanc, .ZAModifHauteurBlanc     { background-position:-9px 4px; }
.ZAAgrandirGris, .ZAReduireGris, .ZAModifHauteurGris        { background-position:4px 4px; }
.ZAAgrandirOrange, .ZAReduireOrange, .ZAModifHauteurOrange  { background-position:-22px 4px; }

#ZAFermerOnglet { position:absolute; right:70px; top:0px; height:29px; width:19px; border-bottom:1px solid #C7C7C7; background-color: #C4C4C4; background-image: url(/design/004-toulal/croix.png); background-repeat: no-repeat; }
.ZAFermerOngletBlanc    { background-position:-13px 9px; }
.ZAFermerOngletGris     { background-position:3px 9px; }
.ZAFermerOngletOrange   { background-position:-29px 9px; }

#ZAReduire { position:absolute; right:34px; top:0px; height:29px; width:17px; border-bottom:1px solid #C7C7C7; background-color:#C4C4C4; background-image:url(/design/004-toulal/reduire.png); background-repeat:no-repeat; }

#ZABougeDroite { position:absolute; right:89px; top:0px; height:29px; width:18px; border-left:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7; background:#C4C4C4 url(/design/004-toulal/bougedroite.png) no-repeat 4px 7px; }
.ZABougeDroiteBlanc, .ZABougeGaucheBlanc    { background-position:-10px 7px; }
.ZABougeDroiteGris, .ZABougeGaucheGris      { background-position:4px 7px; }
.ZABougeDroiteOrange, .ZABougeGaucheOrange  { background-position:-24px 7px; }

#ZABougeGauche { position:absolute; left:40px; top:0px; height:29px; width:18px; border-right:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7; background:#C4C4C4 url(/design/004-toulal/bougegauche.png) no-repeat 4px 7px; background-repeat:no-repeat; }

#ZAStatut { position:absolute; left:0px; top:0px; height:29px; width:18px; cursor: pointer; z-index: 2; border-bottom:1px solid #C7C7C7; background-color:#C4C4C4; background-position:4px 10px; background-repeat:no-repeat; }
#ZASmiley { position:absolute; left:18px; top:0px; height:29px; width:22px; cursor: pointer; z-index: 2; border-bottom:1px solid #C7C7C7; background-color:#C4C4C4; background-position:3px 8px; background-repeat:no-repeat; }

#ZoneActive { background:#EEEEEE; border:0; color:#333333; text-align:left; height:100%; float:left; }

#ZAConteneur {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#ZAConteneur::after {
    content: "";
    position: absolute;
    z-index: -1;

    /* Pikachu */
    right: 0;
    bottom: 20px;
    width: 80px;
    height: 80px;
    background: url('debuchocobo.png') 100% 100% no-repeat transparent;
    background-size: contain;
    animation: ZAbounce 0.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.5,0.01,0.7,0.5);
    animation-iteration-count: infinite;

    /*
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    */

    /* Kupo garou */
    /*
    right: 8px;
    bottom: 14px;
    width: 70px;
    height: 50px;
    background: 
    url('kupogarou.png') 100% 100% / 30px auto no-repeat,
    url('villageois.png') calc(100% - 32px) 100% / 30px auto no-repeat;
    */
    /*animation: ZAbounce 1s;*/
    /*animation-direction: alternate;*/
    /*animation-timing-function: cubic-bezier(0.5,0.01,0.7,0.5);*/
    /*animation-iteration-count: infinite;*/
}

@keyframes ZAbounce {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 3px, 0); }
}

#ZAConteneur #ZAConteneurAffichage p {
    padding-right: 55px;
}
#ZAConteneur p {
    padding:0;
    margin:0;

    /* Gestion de la césure des paragraphes en cas de mots longs... Via http://shouldiprefix.com/#hyphens */
    /* From: http://vlst.nl/x/e2 */
    -ms-word-break: break-all;
        word-break: break-all;

    /* Non standard for webkit */
        word-break: break-word;

    -webkit-hyphens: auto; /* Saf 5.1+ */
       -moz-hyphens: auto; /* Fx 6.0+ */
        -ms-hyphens: auto; /* IE 10+ */
            hyphens: auto; /* None yet */
}

.ZAConteneurDiscordInvite {
    padding: 10px 12px;
    border-bottom: 1px solid #AAA;
}
.ZAConteneurDiscordInvite a {
    position: relative;
    display: inline-block;
    padding: 0.5em 3em 0.5em 1em;
    font-weight: 700;
    color: #fff !important;
    background-color: #2678B9;
    border-radius: 3px;
}
.ZAConteneurDiscordInvite a::after {
    content: "";
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background: url(boko.gif) 100% 100% no-repeat transparent;
    background-size: contain;
}

#ZAConteneurInput { position:absolute; width: 100%; bottom: 0; height: 20px; }

#ZAConteneurAligneBas { padding-left: 4px; overflow-y: auto; position: absolute; width: 100%; top: 0; bottom: 20px; }

#ZAConteneurAffichage { position:absolute; max-height:100%; bottom:0; }
#ZAConteneurAffichage a:link, #ZAConteneurAffichage a:visited, #ZAConteneurAffichage a:active, #ZAConteneurAffichage a { color:#222222; text-decoration:none; font-weight:bold; }
#ZAConteneurAffichage a:hover { color:; text-decoration:underline; }
#ZAConteneurAffichage h1 { margin:10px 10px 10px 0px; padding:0; font-size:16px; color:#000000; font-weight:bold; }

#ZAListeDesCo a:link, #ZAListeDesCo a:visited, #ZAListeDesCo a:active { color:#444444; text-decoration:none; }
#ZAListeDesCo a:hover { color:#000000; text-decoration:underline; }
#ZAListeDesCo { background:#D8D8D8; right:0; text-align:left; float:right; border-left:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7; padding:0; margin:0; overflow-y:auto; color:#444444; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#ZAListeDesCoAffichage { padding: 7px 5px 5px 12px; }

#ZASouleveLeDesign { position:relative; bottom:0; width:100%; height:32px; }

/* Le script suppose qu'il y a 1 px de bord en haut et en bas de ZAChatMessage */
.ZAInput { text-align:left; background-color:#C4C4C4; color:#000000; font-size:12px; font-family:Arial; border:0px; text-decoration:none; height: 100%; width: 100%; margin:0px; padding:0px 0px 0px 2px; bottom:0; left:0; border-top:1px solid #AAAAAA; border-bottom:1px solid #999999; }

.ZAMenuDeroulantSmiley { cursor: pointer; }
#ZAMenuDeroulant                    { display:none; position:fixed; top:0; left:0; margin:0; padding:0; list-style-type:none; z-index: 3; border:1px solid #C7C7C7; }
#ZAMenuDeroulant li:first-child     { color:#444444; background:#D8D8D8; margin:0; padding:4px; text-align:center; list-style-type:none; border-bottom:1px solid #C7C7C7; }
#ZAMenuDeroulant li                 { margin:0; padding:0; text-align:left; background:#C4C4C4; white-space: nowrap; }
#ZAMenuDeroulant li a               { margin:0; padding:4px; display:block; color:#444444; background:#C4C4C4; text-decoration:none; cursor: pointer; }
#ZAMenuDeroulant li a:hover         { background:#D8D8D8; color:#222222; text-decoration:none; }
#ZAMenuDeroulant li ul              { display:none; position:absolute; top:0; left:-150px; margin:0; padding:0; list-style-type:none; text-align:left; background:none; /*border-top:1px solid #C7C7C7; border-right:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7;*/ border-left:none; }
#ZAMenuDeroulant li ul li           { margin:0; padding:0; }
#ZAMenuDeroulant li ul li a         { margin:0; padding:2px; display:block; color:#222222; background:#C4C4C4; text-decoration:none; }
#ZAMenuDeroulant li ul li a:hover   { background:#D8D8D8; color:#000000; text-decoration:none; }

.ZAMsgMe { color:#444444; font-weight:normal; }
.ZAAgrandirOrange, .ZAReduireOrange, .ZAModifHauteurOrange, .ZABougeDroiteOrange, .ZABougeGaucheOrange, .ZAFermerOngletOrange, .ZAConfigurationOrange { cursor:pointer; }

/* ===================================================================
* SONDAGES
* =================================================================*/

.sondage                            { display: flex; margin: 0 0 1em; position: relative; }
.sondage img                        { width: 30%; object-fit: cover; flex-shrink: 0; }
.sondage p                          { margin: 0; }
.sondage label                      { display: block; min-height: 28px; line-height: 1.2; margin: 0.5rem 0 1rem; cursor: pointer; }
.sondage label:last-child           { margin: 0; }
.sondage label input                { float: left; margin: 0.1rem 0.8rem 1.5rem 0; }
.sondage_div                        { flex-grow: 1; min-height: 18.2rem; padding: 1rem; }
.sondage_div strong                 { display: block; font-weight: 700; margin: 0 0 1.5rem 0; }
.sondage_div > div                  { display: none; min-height: 28px; margin: 0 0 9px 18px; }
.sondage_div > div:last-child       { margin-bottom: 0; }
.sondage_div > div > div            { width: 0; height: 27px; overflow: visible !important; background: #95c9ff; margin: 0; padding: 0; }
.sondage_actif                      { background: #E3EEF7; }
.sondage_actif::before              { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #E3EEF7; }
.sondage_inactif                    { background: #E3E3E3; }
.sondage_inactif::before            { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #E3E3E3; }
.sondage_inactif > div > div        { background: #BBBBBB; }

/* ===================================================================
 * LIGHTBOX ALERTE
 * =================================================================*/

#lightalertOverlay     { display: none; position: absolute; left: 0; top: 0; margin: 0; padding: 0; background-color: #000000; opacity: 0.85; filter : alpha(opacity=85); z-index: 9999; }
#lightalert            { display: none; position: absolute; width: 30%; margin: 0; padding: 15px 15px 30px; font-weight: normal; text-align: center;
                         background: none #FFFFFF; border-radius: 10px 10px 10px 10px; z-index: 10000; }
#lightalert h1         { margin: 0; padding: 15px; color: #000000; font-size: 25px; font-weight: bold; }
#lightalert span       { margin: 0 0 15px; padding: 15px 30px; color: #000000; font-size: 20px; font-weight: bold; border-radius: 5px 5px 5px 5px; cursor: pointer;  }
#lightalert span:hover { background: none #F3F3F3; }
#lightalert p          { margin: 0 0 15px; padding: 15px; }

/* ===================================================================
* FANCYBOX
* =================================================================*/

.fancybox-hide { visibility:hidden; }

/* Trophées */
.trophee-container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
}
.trophee-left img {
    max-width: 100%;
}

/* ===================================================================
* CKEDITOR
* =================================================================*/

#content.body_content_ckeditor {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    float: none;
    text-align: left;
}
/* Boutons custom dans modale */
a.cke_dialog_ui_button.helpButton           { background-image:linear-gradient(to bottom,#179ad7,#0b69b1); border-color: #0a62a6 #0a62a6 #004d92; color: #fff; }
a.cke_dialog_ui_button.helpButton:active    { border-color: #0a568c; }
a.cke_dialog_ui_button.helpButton:hover     { border-color: #095b99 #095b99 #004785; background: #1488be; background: linear-gradient(to bottom,#1488be 0,#0a5d9c 100%); }
a.cke_dialog_ui_button.helpButton > span    { font-weight: bold; text-shadow: 0 -1px 0 #0c5583; }

/* Largeur modale */
.cke_dialog                                 { min-width: 0%; }

/* Affichage du placeholder de l'iframe */
.body_content_ckeditor .video::before {
    content: none;
}
.body_content_ckeditor .video .cke_iframe {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25%;
    background-color: #333;
    border: none;
}

/* ===================================================================
* PARTAGE
* =================================================================*/

#boutons-partage{ margin-left: auto; margin-right: auto; width: 150px; }

/* ===================================================================
* ADMINISTRATION
* =================================================================*/

form[name="postage"] {
    margin-left: -5px;
    margin-right: -5px;
}
input[value="Prévisualiser"],
input[value="Modifier"],
input[value="Noter comme vue"] {
    width: auto !important;
}