/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; }

html { width: 100%; min-height: 100%; background-color: #000; }
body { min-height: 100%; width: 100%; background-color: #000; }

/* === LAYOUT CONTAINERS === */
#intermedac { min-height: 100%; width: 100%; background: #000 top center no-repeat fixed; color: #fff; background-image: url(img/fond-acc.jpg); background-size: cover; }
#intermed { min-height: 100%; width: 100%; background: #000 top center no-repeat fixed; color: #fff; background-image: url(img/fond-cont.jpg); background-size: cover; }
#contenu { min-height: 100%; margin: 0 auto; padding: 0 15px; }

/* === HEADINGS === */
h1 { font: normal normal normal 2em/1.3em arial, sans-serif; }
h1.acc { height: 200px; width: 100%; max-width: 513px; background: transparent url(img/logotac.png) top left no-repeat; background-size: contain; }
h1.cont { height: 180px; background: transparent url(img/h1-cont.png) top left no-repeat; background-size: contain; width: 100%; cursor: pointer; }

/* === MOBILE: STACKED LAYOUT === */
#grauche { display: flex; flex-direction: column-reverse; }
#gauchac { width: 100%; }
#gauche { width: 100%; }
#centrac { width: 100%; padding: 0; }
#droite { width: 100%; padding: 0; }
#droitac { width: 100%; padding-top: 2em; }

/* === MENU === */
#gauchac ul#menu, #gauche ul#menu { list-style-type: none; text-align: left; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 5px; }
#gauchac ul#menu li, #gauche ul#menu li { font: normal normal bold 0.9em/1.3em arial, sans-serif; text-transform: uppercase; padding: 8px 5px 8px 0; }
#gauchac ul#menu li a, #gauche ul#menu li a { color: #fff; text-decoration: none; background-color: #000; padding: 3px 3px 2px 5px; margin-right: 10px; border-right: 3px #000 solid; }
#gauche ul#menu li.aqui a { margin-right: 0; padding-right: 6px; color: #a2a096; border-right: 3px #fff solid; }
#gauche ul#menu li a:hover { padding-right: 13px; margin-right: 0; color: #ffe400; border-right: 3px #b4b0a0 solid; }
#gauchac ul#menu li a:hover { padding-right: 8px; margin-right: 5px; color: #ffe400; border-right: 3px #b4b0a0 solid; }
#gauche ul#menu li.aqui a:hover { padding-right: 6px; border-right: 3px #c4c0b0 solid; }

/* === CONTENT TYPOGRAPHY === */
#centrac h2 { font: normal normal normal 1.8em/0.8em arial, sans-serif; margin: 0 0 20px 0; letter-spacing: -1px; color: #fff; }
#centrac h3 { font: normal normal normal 1.45em/0.9em arial, sans-serif; margin: 50px 0 20px 0; letter-spacing: -1px; color: #fefee3; }
#centrac p { font: normal normal normal 0.8em/1.5em arial, sans-serif; padding: 10px 0; margin: 0 0 10px 0; color: #fffecf; }
#centrac li { list-style-position: inside; font: normal normal normal 0.85em/1.55em arial, sans-serif; padding: 0 0 0 20px; margin: 0 0 10px 0; color: #fffecf; }

#droite h2 { font: normal normal normal 2.1em/0.8em arial, sans-serif; margin: 20px 0 30px 0; letter-spacing: -1px; color: #fff; }
#droite h3 { font: normal normal normal 1.45em/0.9em arial, sans-serif; margin: 60px 0 25px 0; padding: 5px 0; letter-spacing: -1px; color: #fefee3; border-bottom: 2px #221 solid; }
#droite p { font: normal normal normal 0.85em/1.65em arial, sans-serif; padding: 10px 0; margin: 0 0 10px 0; color: #fffecf; }
#droite p span.em { font: italic small-caps bold 1.25em/2em arial, sans-serif; }
#droite p strong { font-weight: normal; }
#droite ul { padding: 0; margin: 0 0 10px 0; }
#droite li { list-style-position: inside; list-style-type: square; font: normal normal normal 0.85em/1.55em arial, sans-serif; padding: 0 0 0 20px; margin: 0 0 5px 0; color: #fffecf; }

#centrac a, #droite a { color: #fff; }
#centrac a:hover, #droite a:hover { text-decoration: none; }
#centrac img { margin: 20px 0; max-width: 100%; height: auto; }
#droite img { margin: 20px 0 0 0; max-width: 100%; height: auto; }

/* === CONTACT BOX (accueil) === */
#agac { padding: 8px 8px 8px 12px; font: normal normal bold 0.75em/1.5em arial, sans-serif; border: 3px #ffc400 solid; background: transparent url(img/fonagac.gif) top left repeat; }
#agac h2 { font: normal small-caps bold 1.5em/1em arial, sans-serif; color: #ffc400; margin-bottom: 5px; }
#agac p { font: normal normal normal 0.9em/1.6em arial, sans-serif; color: #fff; }
#agac p a { color: #ffe400; }
#agac p a:hover { text-decoration: none; }

/* === SPECTACLE SUB-MENU === */
ul.ssmenuh { width: 100%; list-style-type: none; margin-bottom: 30px !important; padding: 0; background-color: transparent !important; }
ul.ssmenuh li { width: 100% !important; list-style-type: none !important; margin: 0 !important; padding: 10px 0 !important; background-color: transparent !important; text-transform: lowercase; font: normal normal normal 1.15em/1.3em arial, sans-serif !important; letter-spacing: -0.3px; }
ul.ssmenuh li a { display: block; margin: 0; padding: 25px 10px 5px 10px; color: #ffe400 !important; background: #000 url(img/fonagac.gif) top left repeat !important; border: 3px #fff solid !important; text-decoration: none !important; }
ul.ssmenuh li a:hover { background-color: #555 !important; color: #fff !important; }

#droite ul#ssmenusp { width: 100% !important; margin: 25px 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 15px; }
#droite ul#ssmenusp li { display: block; width: 100%; height: 100px; border: 3px #fff solid; list-style-type: none !important; margin: 0; padding: 0 !important; text-transform: lowercase; font: normal small-caps bold 0.9em/1em arial, sans-serif !important; letter-spacing: -0.01em; background-size: cover; }
#droite ul#ssmenusp li#smsdbb { background: transparent url(img/smdbb.jpg) top left no-repeat; }
#droite ul#ssmenusp li#smscb { background: transparent url(img/smcb.jpg) top left no-repeat; }
#droite ul#ssmenusp li a { display: block; height: 20px; width: 100%; margin: 0; padding: 80px 0 0 0; color: #ffe400 !important; text-decoration: none !important; }
#droite ul#ssmenusp li a:hover { color: #fff !important; }
#droite ul#ssmenusp li a span { margin: 75px 0 0 4px; padding: 2px 4px; background: #111 !important; }

/* === HOVER VIGNETTES (galleries) === */
ul.hovig { width: 100%; max-width: 550px; height: auto; list-style-type: none; margin: 0 0 30px 0 !important; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
ul.hovig li { list-style-type: none !important; margin: 0 !important; padding: 0 !important; }
ul.hovig li a { display: block; margin: 0; padding: 0; }

ul.hovig li#specdbb1 a { width: 230px; height: 162px; margin: 33px 0 5px 0; padding: 0; background: transparent url(img/vigspecdbb1.jpg) top left no-repeat; }
ul.hovig li#specdbb1 a:hover { background-position: -230px 0%; }
ul.hovig li#specdbb2 a { width: 146px; height: 200px; margin: 0; padding: 0; background: transparent url(img/vigspecdbb2.jpg) top left no-repeat; }
ul.hovig li#specdbb2 a:hover { background-position: -146px 0%; }
ul.hovig li#specdbb3 a { width: 174px; height: 174px; margin: 11px 0 15px 0; padding: 0; background: transparent url(img/vigspecdbb3.jpg) top left no-repeat; }
ul.hovig li#specdbb3 a:hover { background-position: -174px 0%; }

ul.hovig li#speccb1 a { width: 191px; height: 148px; margin: 10px 0 42px 0; padding: 0; background: transparent url(img/vigspeccb1.jpg) top left no-repeat; }
ul.hovig li#speccb1 a:hover { background-position: -191px 0%; }
ul.hovig li#speccb2 a { width: 150px; height: 200px; margin: 0; padding: 0; background: transparent url(img/vigspeccb2.jpg) top left no-repeat; }
ul.hovig li#speccb2 a:hover { background-position: -150px 0%; }
ul.hovig li#speccb3 a { width: 209px; height: 160px; margin: 28px 0 12px 0; padding: 0; background: transparent url(img/vigspeccb3.jpg) top left no-repeat; }
ul.hovig li#speccb3 a:hover { background-position: -209px 0%; }

ul.hovig li#batu1 a { width: 115px; height: 180px; margin: 15px 0 5px 0; padding: 0; background: transparent url(img/vigbatu1.jpg) top left no-repeat; }
ul.hovig li#batu1 a:hover { background-position: -115px 0%; }
ul.hovig li#batu2 a { width: 308px; height: 200px; margin: 0; padding: 0; background: transparent url(img/vigbatu2.jpg) top left no-repeat; }
ul.hovig li#batu2 a:hover { background-position: -308px 0%; }
ul.hovig li#batu3 a { width: 127px; height: 132px; margin: 30px 0 28px 0; padding: 0; background: transparent url(img/vigbatu3.jpg) top left no-repeat; }
ul.hovig li#batu3 a:hover { background-position: -127px 0%; }

ul.hovig li#dans1 a { width: 168px; height: 170px; margin: 9px 0 21px 0; padding: 0; background: transparent url(img/vigdans1.jpg) top left no-repeat; }
ul.hovig li#dans1 a:hover { background-position: -168px 0%; }
ul.hovig li#dans2 a { width: 218px; height: 200px; margin: 0; padding: 0; background: transparent url(img/vigdans2.jpg) top left no-repeat; }
ul.hovig li#dans2 a:hover { background-position: -218px 0%; }
ul.hovig li#dans3 a { width: 164px; height: 153px; margin: 35px 0 12px 0; padding: 0; background: transparent url(img/vigdans3.jpg) top left no-repeat; }
ul.hovig li#dans3 a:hover { background-position: -164px 0%; }

/* === MEDIA GALLERY THUMBNAILS === */
a.vigmed { height: 100px; width: 100px; margin: 0 12px 15px 0; padding: 0; border: 0; display: inline-block; }
a.vigmed img { height: 100px !important; width: 100px !important; margin: 0; padding: 0; border: 5px #fff solid; }
a.vigmed:hover img { border-color: #ffe400; }

/* === FOOTER === */
#footac { width: 100%; margin: 30px auto 0 auto; padding: 10px 15px 15px 15px; }
#footac p { font: normal small-caps bold 0.75em arial, sans-serif; padding: 3px 9px 5px 9px; margin: 0; color: #fff; word-spacing: 2px; }
#footac p a { text-decoration: none; color: #ffe400; }
#footac p a:hover { text-decoration: underline; color: #ff6; }
#footac #foog { margin-bottom: 10px; }
#footac #food p { background-color: #110; border: 1px #221 solid; }

#fooc { margin-top: 70px; padding: 20px 0 30px 0; border-top: 1px #fff solid; }
#fooc p { text-transform: uppercase; font: normal normal bold 0.7em/1.6em arial, sans-serif; margin: 0; color: #fff; }
#fooc p a { color: #ffe400; }
#fooc p a:hover { text-decoration: none; color: #ff6; }
#fooc #foog { margin-bottom: 10px; }

#flacc { position: absolute; top: 10px; left: 10px; }
#flaco { position: absolute; top: 10px; right: 10px; }

/* === UTILITIES === */
.oust { position: absolute; left: -6666em; top: 0; width: 1px; height: 1px; overflow: hidden; }
.clearbot { clear: both; padding: 0; margin: 0; border: 0; height: 0; }
.clearbotsp { clear: both; padding: 0; margin: 0 0 25px 0; border: 0; height: 0; }
a.top { clear: both; display: block; text-align: right; width: 100%; height: 8px; border: 0; margin: 0 0 26px 0; }

/* === VIDEO === */
div.vidplayer { width: 100%; max-width: 540px; border: 4px #fff solid; margin: 0 0 10px 0; }
div.vidplayer video { width: 100%; height: auto; display: block; }

/* ==========================================================================
   DESKTOP BREAKPOINT — 760px (original fixed width)
   ========================================================================== */
@media (min-width: 760px) {

    #contenu { width: 760px; padding: 0; }

    h1.acc { height: 300px; width: 513px; background-size: auto; }
    h1.cont { height: 290px; width: 700px; background-size: auto; }

    /* === HOMEPAGE LAYOUT === */
    #grauche { float: left; display: block; }
    #gauchac { width: 170px; float: left; }
    #gauchac ul#menu { display: block; text-align: right; margin: 95px 5px 0 0; }
    #centrac { float: right; margin: 0; width: 320px; padding: 0 30px 0 20px; }
    #centrac h2 { font-size: 2.1em; }

    #droitac { float: right; width: 210px; padding-top: 29em; }

    /* === CONTENT PAGE LAYOUT === */
    #gauche { width: 180px; float: left; }
    #gauche ul#menu { display: block; text-align: right; margin: 60px 10px 0 0; }
    #droite { float: right; margin: 0; width: 550px; padding: 0 0 0 20px; }

    /* === SPECTACLE SUB-MENU DESKTOP === */
    #droite ul#ssmenusp { width: 550px !important; }
    #droite ul#ssmenusp li { width: 260px; }
    #droite ul#ssmenusp li#smsdbb { margin-right: 15px; }

    /* === HOVER VIGNETTES DESKTOP === */
    ul.hovig { width: 550px; height: 200px; flex-wrap: nowrap; }

    /* === MEDIA THUMBNAILS DESKTOP === */
    a.vigmed { margin: 0 22px 25px 0; }

    /* === FOOTER DESKTOP === */
    #footac { width: 570px; padding: 10px 0 15px 190px; background: transparent url(img/ofootac.gif) top right no-repeat; }
    #footac #foog { width: 320px; float: left; margin-bottom: 0; }
    #footac #food { width: 213px; float: right; text-align: right; }

    #fooc { margin-left: 210px; }
    #fooc #foog { width: 300px; padding: 0; float: left; margin-bottom: 0; }
    #fooc #food { width: 250px; padding: 0; float: right; text-align: right; }

    #flacc { left: 50%; margin-left: -186px; }
    #flaco { left: 50%; margin-left: 364px; right: auto; }

    /* === VIDEO DESKTOP === */
    div.vidplayer { width: 540px; }
}

/* ==========================================================================
   PRETTYPHOTO — dark_square theme
   ========================================================================== */
div.dark_square .pp_left,
div.dark_square .pp_middle,
div.dark_square .pp_right,
div.dark_square .pp_content { background: #fff; }
div.dark_square .currentTextHolder { color: #777; font: normal normal normal 0.8em/1em arial, sans-serif; }
div.dark_square .pp_description { color: #aaa; font: italic normal normal 1.15em/1.2em arial, sans-serif; }
div.dark_square .pp_loaderIcon { background: url(img/prettyPhoto/dark_square/loader.gif) center center no-repeat; }
div.dark_square .pp_content_container .pp_left { background: url(img/prettyPhoto/dark_square/contentPattern.png) top left repeat-y; }
div.dark_square .pp_content_container .pp_right { background: url(img/prettyPhoto/dark_square/contentPattern.png) top right repeat-y; }
div.dark_square .pp_expand { background: url(img/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; }
div.dark_square .pp_expand:hover { background: url(img/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; }
div.dark_square .pp_contract { background: url(img/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; }
div.dark_square .pp_contract:hover { background: url(img/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer; }
div.dark_square .pp_close { width: 75px; height: 22px; background: url(img/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer; }
div.dark_square #pp_full_res .pp_inline { color: #777; }
div.dark_square .pp_arrow_previous { background: url(img/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat; vertical-align: middle; }
div.dark_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; }
div.dark_square .pp_arrow_next { background: url(img/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat; vertical-align: middle; }
div.dark_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; }
div.dark_square .pp_next:hover { background: url(img/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer; }
div.dark_square .pp_previous:hover { background: url(img/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer; }

div.pp_pic_holder a:focus { outline: none; }
div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; }
div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; border: 1px #222 solid; background-color: #fff; }
.pp_top { height: 20px; position: relative; }
.pp_top .pp_left { height: 20px; left: 0; position: absolute; width: 20px; }
.pp_top .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; }
.pp_top .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; }
.pp_content { height: 40px; }
.pp_content .ppt { left: auto; margin-bottom: 5px; position: relative; top: auto; }
.pp_fade { display: none; }
.pp_content_container { position: relative; text-align: left; width: 100%; }
.pp_content_container .pp_left { padding-left: 20px; }
.pp_content_container .pp_right { padding-right: 20px; }
.pp_content_container .pp_details { margin: 10px 0 2px 0; }
.pp_description { display: none; margin: 0 0 5px 0; }
.pp_nav { clear: left; float: left; margin: 3px 0 0 0; }
.pp_nav p { float: left; margin: 2px 4px; }
.pp_nav a.pp_arrow_previous,
.pp_nav a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px; }
.pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; }
a.pp_next { background: url(img/prettyPhoto/dark_square/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; }
a.pp_previous { background: url(img/prettyPhoto/dark_square/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; }
a.pp_expand,
a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; }
a.pp_close { display: block; float: right; text-indent: -10000px; }
.pp_bottom { height: 20px; position: relative; }
.pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; }
.pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; }
.pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; }
.pp_loaderIcon { display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; }
#pp_full_res { line-height: 1 !important; }
#pp_full_res .pp_inline { text-align: left; }
#pp_full_res .pp_inline p { margin: 0 0 15px 0; }
div.ppt { color: #fff; display: none; font-size: 17px; left: 0; position: absolute; top: 0; z-index: 9999; }
.clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }