@font-face{font-family:'Oswald';font-style:normal;font-weight:200;src:url('../_polices/oswald/_200.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:200;src:url('../_polices/oswald/_200.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:200;src:url('../_polices/oswald/_200.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:200;src:url('../_polices/oswald/_200.cyrillic.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:200;src:url('../_polices/oswald/_200.cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:300;src:url('../_polices/oswald/_300.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:300;src:url('../_polices/oswald/_300.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:300;src:url('../_polices/oswald/_300.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:300;src:url('../_polices/oswald/_300.cyrillic.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:300;src:url('../_polices/oswald/_300.cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url('../_polices/oswald/_400.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url('../_polices/oswald/_400.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url('../_polices/oswald/_400.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url('../_polices/oswald/_400.cyrillic.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:url('../_polices/oswald/_400.cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:url('../_polices/oswald/_700.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:url('../_polices/oswald/_700.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:url('../_polices/oswald/_700.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:url('../_polices/oswald/_700.cyrillic.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:block;}@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:url('../_polices/oswald/_700.cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:300;src:url('../_polices/red-rose/_300.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:300;src:url('../_polices/red-rose/_300.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:300;src:url('../_polices/red-rose/_300.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:400;src:url('../_polices/red-rose/_400.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:400;src:url('../_polices/red-rose/_400.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:400;src:url('../_polices/red-rose/_400.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:700;src:url('../_polices/red-rose/_700.latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:700;src:url('../_polices/red-rose/_700.latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block;}@font-face{font-family:'Red Rose';font-style:normal;font-weight:700;src:url('../_polices/red-rose/_700.vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;font-display:block;}:root{--c-blanc:rgb(255,255,255);--c-sombre:rgb(34,34,34);--c-systeme:rgb(84,101,255);--c-clair:rgb(216,220,255);--c-bleu-2:rgb(120,139,255);}:root{--ScrollBarWidth:0;} html,body{padding:0;margin:0;width:100%;height:100%;min-width:100%;max-width:100%;min-height:100%;max-height:100%;} img{max-width:100%;}a{color:inherit;text-decoration:inherit;} /* Styles par défaut, Structure des éléments */ .SBformStop>*, .no-events{pointer-events:none;} .border-radius{border-radius:0.5em;} .inline-block{display:inline-block;} .block{display:block;} .gras{font-weight:bold;} .padding{padding:0.5em;}.padding-top{padding-top:0.5em;}.padding-right{padding-right:0.5em;}.padding-bottom{padding-bottom:0.5em;}.padding-left{padding-left:0.5em;} .padding1{padding:1em;}.padding1-top{padding-top:1em;}.padding1-right{padding-right:1em;}.padding1-bottom{padding-bottom:1em;}.padding1-left{padding-left:1em;} .margin{margin:0.5em;}.margin-top{margin-top:0.5em;}.margin-right{margin-right:0.5em;}.margin-bottom{margin-bottom:0.5em;}.margin-left{margin-left:0.5em;} .margin1{margin:1em;}.margin1-top{margin-top:1em;}.margin1-right{margin-right:1em;}.margin1-bottom{margin-bottom:1em;}.margin1-left{margin-left:1em;} .align-left{text-align:left;}.align-center{text-align:center;}.align-right{text-align:right;}.align-justify{text-align:justify;} .align-top{vertical-align:top;}.align-middle{vertical-align:middle;}.align-bottom{vertical-align:bottom;} .float-left{float:left;}.float-right{float:right;} .SB-bloc{display:inline-block;box-sizing:border-box;position:relative;} .SB0{display:none;} .SBflex{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;} .SBflex.align-left{justify-content:left;} .SBflex.reverse{flex-direction:row-reverse;} /* .SBimage.img_4_1::after{content:'';display:inline-block;padding-top:25%;vertical-align:top;} .SBimage.img_2_1::after{content:'';display:inline-block;padding-top:50%;vertical-align:top;} .SBimage.img_4_3::after{content:'';display:inline-block;padding-top:75%;vertical-align:top;} .SBimage.img_1::after{content:'';display:inline-block;padding-top:100%;vertical-align:top;}*/ /*.SBimage.contain{background-size:contain;background-repeat:no-repeat;}*/ .SBimage{max-width:100%;position:relative;} .SBimage>div:first-of-type{transition:opacity 300ms ease-out,transform 300ms ease-out;} .SBimage[data-auto]{display:inline-block;} .SBimage[data-auto] img{vertical-align:top;max-width:100%;max-height:100%;} .SBimage:not([data-auto]) img{display:none;} .SBimage:not([data-auto])>div:first-of-type{background-repeat:no-repeat;background-position:center;background-size:cover;} .SBimage:not([data-auto]):not([data-content])>div:first-of-type{position:absolute;left:0;top:0;right:0;bottom:0;} .SBimage:not([data-auto]).contain>div:first-of-type{background-size:contain;} /* TODO mettre max-height calculé sur img plutot */ /* .SBimage.contain:not([data-unitem]):not(.SBloaded)>div:first-of-type{} .SBimage:not([data-unitem]):not(.SBloaded)>div:first-of-type{opacity:0;} .SBimage:not([data-unitem]).SBloaded .SBchargement{opacity:0;} /*.SBimage.SBloaded>div{opacity:1;}*/ .SBunItem{transition:all 300ms ease-out;} .SBunItem .SBchargement{left:calc(50% - 2.5em);top:calc(50% - 20px);} .SBimage .SBchargement{left:calc(50% - 2.5em);top:calc(50% - 20px);} .SBunItem:not([data-loadimg]):not([data-loadimgclass]):not(.SBimage):not(.SBloaded), .SBunItem[data-loadimg]:not(.SBloaded)>*:not(.SBchargement), .SBunItem[data-loadimg].SBloaded>.SBchargement, .SBimage.SBloaded .SBchargement, .SBimage:not(.SBloaded)>div:first-of-type{opacity:0;} .SBunItem:not([data-loadimgclass]):not(.SBloaded){transform:scale(0.75);} .SBimage.contain:not(.SBloaded)>div:first-of-type{transform:scale(0.25);} .SBunItem[data-loadimg] .SBimage.contain>div:first-of-type{transform:unset;} .SBunItem[data-loadimg] .SBimage.SBloaded .SBchargement, .SBunItem[data-loadimg] .SBimage:not(.SBloaded)>div:first-of-type{opacity:unset;} /* Notifications */ #SBnotif{position:fixed;top:0.5em;right:0.5em;z-index:3;} #SBnotif>div{width:15em;max-width:calc(100vw - 2em);background-color:white;padding:3.25em 1.5em 1.5em 1.5em;box-sizing:border-box;margin:0.5em;border-radius:0.5em;position:relative;box-shadow:0px 0px 1em -0.5em black;transition:opacity 300ms ease-out;} #SBnotif>div.chargement{opacity:0;pointer-events:none;} #SBnotif>div::before{content:'';min-height:2.95em;display:inline-block;box-sizing:border-box;position:absolute;left:1em;top:0;width:calc(100% - 2em);line-height:1em;color:rgb(203,89,52);text-transform:uppercase;background:url('../_ico/information/0,0,0') no-repeat 0.25em 0.75em/1.5em 1.5em transparent;padding:1em 0.5em 0.75em 2.25em;border-bottom:1px solid rgb(245,245,245);} #SBnotif>div>.fermer{width:2em;height:2em;position:absolute;top:0.5em;right:0.5em;border-radius:0.5em;padding-left:0;background:url('../_ico/croix/0,0,0') no-repeat center center/1.2em 1.2em transparent;} #SBnotif>div>.fermer:hover{background-color:rgb(245,245,245);} /* .SBunItem{transition:all 300ms ease-out;} .SBunItem .SBchargement{left:calc(50% - 2.5em);top:calc(50% - 20px);} .SBimage .SBchargement{left:calc(50% - 2.5em);top:calc(50% - 20px);} .SBunItem:not([data-loadimg]):not(.SBloaded), .SBunItem[data-loadimg]:not(.SBloaded)>*:not(.SBchargement), .SBunItem[data-loadimg].SBloaded>.SBchargement, .SBimage.SBloaded .SBchargement, .SBimage:not(.SBloaded)>div:first-of-type{opacity:0;} .SBunItem:not(.SBloaded){transform:scale(0.75);} .SBimage.contain:not(.SBloaded)>div:first-of-type{transform:scale(0.25);} .SBunItem[data-loadimg] .SBimage.contain>div:first-of-type{transform:unset;} .SBunItem[data-loadimg] .SBimage.SBloaded .SBchargement, .SBunItem[data-loadimg] .SBimage:not(.SBloaded)>div:first-of-type{opacity:unset;} */ /* .SBunItem:not([data-loadimg]):not(.SBloaded){opacity:0;} .SBunItem[data-loadimg]:not(.SBloaded)>*:not(.SBchargement), .SBunItem[data-loadimg].SBloaded>.SBchargement{opacity:0;} */ ._l1{width:100%;} ._l2{width:50%;} ._l3{width:33.33%;}._l3x2{width:66.66%;} ._l4{width:25%;}._l4x3{width:75%;} ._l5{width:20%;}._l5x2{width:40%;}._l5x3{width:60%;}._l5x4{width:80%;} ._l6{width:16.66%;} ._l7{width:14.2857%;} ._l8{width:12.5%;} ._l8x7{width:87.5%;} ._l9{width:11.11%;} ._l10{width:10%;} ._l10x3{width:30%;} ._l10x7{width:70%;} ._l10x9{width:90%;} ._l11{width:9.09%;} ._l12{width:8.33%;} ._l12x11{width:8.33%;} ._l20x19{width:95%;} ._h1{height:100%;} ._h2x1::before,._h3x1::before,._h3x1::before,._h4x3::before,._h1x1::before,._h3x4::before,._h16x9::before{content:'';display:inline-block;vertical-align:top;} ._h2x1._v_mid::before,._h3x1._v_mid::before,._h3x1._v_mid::before,._h4x3._v_mid::before,._h1x1._v_mid::before,._h3x4._v_mid::before,._h16x9._v_mid::before{vertical-align:middle;} ._h2x1::before{padding-top:50%;} ._h3x1::before{padding-top:33.33%;} ._h3x2::before{padding-top:66.66%;} ._h5x3::before{padding-top:60%;} ._h4x3::before{padding-top:75%;} ._h1x1::before{padding-top:100%;} ._h3x4::before{padding-top:133.33%;} ._h16x9::before{padding-top:56.25%;} ._h_{height:auto;}._h_::before{display:none;} /* TODO w0 @media screen and (max-width:640px){ .SBflex._w0_reverse{flex-direction:row-reverse;} .SBflex._w0_noreverse{flex-direction:row;} ._w0_l1{width:100%;} ._w0_l2{width:50%;} ._w0_l3{width:33.33%;}._w0_l3x2{width:66.66%;} ._w0_l4{width:25%;}._w0_l4x3{width:75%;} ._w0_l5{width:20%;}._w0_l5x2{width:40%;}._w0_l5x3{width:60%;}._w0_l5x4{width:80%;} ._w0_l6{width:16.66%;} ._w0_l7{width:14.2857%;} ._w0_l8{width:12.5%;} ._w0_l8x7{width:87.5%;} ._w0_l9{width:11.11%;} ._w0_l10{width:10%;} ._w0_l10x3{width:30%;} ._w0_l10x7{width:70%;} ._w0_l10x9{width:90%;} ._w0_l11{width:9.09%;} ._w0_l12{width:8.33%;} ._w0_l12x11{width:8.33%;} ._w0_l20x19{width:95%;} ._w0_h2x1::before,._w0_h3x1::before,._w0_h3x2::before,._w0_h4x3::before,._w0_h1x1::before,._w0_h3x4::before,._w0_h16x9::before{content:'';display:inline-block;vertical-align:top;} ._w0_h2x1::before{padding-top:50%;} ._w0_h3x1::before{padding-top:33.33%;} ._w0_h3x2::before{padding-top:66.66%;} ._w0_h5x3::before{padding-top:60%;} ._w0_h4x3::before{padding-top:75%;} ._w0_h1x1::before{padding-top:100%;} ._w0_h3x4::before{padding-top:133.33%;} ._w0_h16x9::before{padding-top:56.25%;} ._w0_padding0{padding:0.5em;} ._w0_padding{padding:0.5em;} ._w0_padding-right{padding-right:0.5em;} ._w0_padding-left{padding-left:0.5em;} ._w0_padding-top{padding-top:0.5em;} ._w0_padding-bottom{padding-bottom:0.5em;} ._w0_margin0{margin:0.5em;} ._w0_margin{margin:0.5em;} ._w0_margin-right{margin-right:0.5em;} ._w0_margin-left{margin-left:0.5em;} ._w0_margin-top{margin-top:0.5em;} ._w0_margin-bottom{margin-bottom:0.5em;} }*/ @media screen and (min-width:640px){ .SBflex._w1_reverse{flex-direction:row-reverse;} .SBflex._w1_noreverse{flex-direction:row;} ._w1_l1{width:100%;} ._w1_l2{width:50%;} ._w1_l3{width:33.33%;}._w1_l3x2{width:66.66%;} ._w1_l4{width:25%;}._w1_l4x3{width:75%;} ._w1_l5{width:20%;}._w1_l5x2{width:40%;}._w1_l5x3{width:60%;}._w1_l5x4{width:80%;} ._w1_l6{width:16.66%;} ._w1_l7{width:14.2857%;} ._w1_l8{width:12.5%;} ._w1_l8x7{width:87.5%;} ._w1_l9{width:11.11%;} ._w1_l10{width:10%;} ._w1_l10x3{width:30%;} ._w1_l10x7{width:70%;} ._w1_l10x9{width:90%;} ._w1_l11{width:9.09%;} ._w1_l12{width:8.33%;} ._w1_l12x11{width:8.33%;} ._w1_l20x19{width:95%;} ._w1_h2x1::before,._w1_h3x1::before,._w1_h3x2::before,._w1_h4x3::before,._w1_h1x1::before,._w1_h3x4::before,._w1_h16x9::before{content:'';display:inline-block;vertical-align:top;} ._w1_h2x1._v_mid::before,._w1_h3x1._v_mid::before,._w1_h3x2._v_mid::before,._w1_h4x3._v_mid::before,._w1_h1x1._v_mid::before,._w1_h3x4._v_mid::before,._w1_h16x9._v_mid::before{vertical-align:middle;} ._w1_h1{height:100%;} ._w1_h2x1::before{padding-top:50%;} ._w1_h3x1::before{padding-top:33.33%;} ._w1_h3x2::before{padding-top:66.66%;} ._w1_h5x3::before{padding-top:60%;} ._w1_h4x3::before{padding-top:75%;} ._w1_h1x1::before{padding-top:100%;} ._w1_h3x4::before{padding-top:133.33%;} ._w1_h16x9::before{padding-top:56.25%;} ._w1_h_{height:auto;}._w1_h_::before{display:none;} ._w1_padding{padding:0.5em;}._w1_padding0{padding:0;} ._w1_padding-right{padding-right:0.5em;}._w1_padding-right0{padding-right:0;} ._w1_padding-left{padding-left:0.5em;}._w1_padding-left0{padding-left:0;} ._w1_padding-top{padding-top:0.5em;}._w1_padding-top0{padding-top:0;} ._w1_padding-bottom{padding-bottom:0.5em;}._w1_padding-bottom0{padding-bottom:0;} ._w1_margin{margin:0.5em;}._w1_margin0{margin:0;} ._w1_margin-right{margin-right:0.5em;}._w1_margin-right0{margin-right:0;} ._w1_margin-left{margin-left:0.5em;}._w1_margin-left0{margin-left:0;} ._w1_margin-top{margin-top:0.5em;}._w1_margin-top0{margin-top:0;} ._w1_margin-bottom{margin-bottom:0.5em;}._w1_margin-bottom0{margin-bottom:0;} ._w1_align-left{text-align:left;} ._w1_align-center{text-align:center;} ._w1_align-right{text-align:right;} ._w1_align-justify{text-align:justify;} ._w1_float-left{float:left;} ._w1_float-right{float:right;} ._w1_float-none{float:none;} } @media screen and (min-width:920px){ .SBflex._w2_reverse{flex-direction:row-reverse;} .SBflex._w2_noreverse{flex-direction:row;} ._w2_l1{width:100%;} ._w2_l2{width:50%;} ._w2_l3{width:33.33%;}._w2_l3x2{width:66.66%;} ._w2_l4{width:25%;}._w2_l4x3{width:75%;} ._w2_l5{width:20%;}._w2_l5x2{width:40%;}._w2_l5x3{width:60%;}._w2_l5x4{width:80%;} ._w2_l6{width:16.66%;} ._w2_l7{width:14.2857%;} ._w2_l8{width:12.5%;} ._w2_l8x7{width:87.5%;} ._w2_l9{width:11.11%;} ._w2_l10{width:10%;} ._w2_l10x3{width:30%;} ._w2_l10x7{width:70%;} ._w2_l10x9{width:90%;} ._w2_l11{width:9.09%;} ._w2_l12{width:8.33%;} ._w2_l12x11{width:8.33%;} ._w2_l20x19{width:95%;} ._w2_h2x1::before,._w2_h3x1::before,._w2_h3x2::before,._w2_h4x3::before,._w2_h1x1::before,._w2_h3x4::before,._w2_h16x9::before{content:'';display:inline-block;vertical-align:top;} ._w2_h2x1._v_mid::before,._w2_h3x1._v_mid::before,._w2_h3x2._v_mid::before,._w2_h4x3._v_mid::before,._w2_h1x1._v_mid::before,._w2_h3x4._v_mid::before,._w2_h16x9._v_mid::before{vertical-align:middle;} ._w2_h1{height:100%;} ._w2_h2x1::before{padding-top:50%;} ._w2_h3x1::before{padding-top:33.33%;} ._w2_h3x2::before{padding-top:66.66%;} ._w2_h5x3::before{padding-top:60%;} ._w2_h4x3::before{padding-top:75%;} ._w2_h1x1::before{padding-top:100%;} ._w2_h3x4::before{padding-top:133.33%;} ._w2_h16x9::before{padding-top:56.25%;} ._w2_h_{height:auto;}._w2_h_::before{display:none;} ._w2_padding{padding:0.5em;}._w2_padding0{padding:0;} ._w2_padding-right{padding-right:0.5em;}._w2_padding-right0{padding-right:0;} ._w2_padding-left{padding-left:0.5em;}._w2_padding-left0{padding-left:0;} ._w2_padding-top{padding-top:0.5em;}._w2_padding-top0{padding-top:0;} ._w2_padding-bottom{padding-bottom:0.5em;}._w2_padding-bottom0{padding-bottom:0;} ._w2_margin{margin:0.5em;}._w2_margin0{margin:0;} ._w2_margin-right{margin-right:0.5em;}._w2_margin-right0{margin-right:0;} ._w2_margin-left{margin-left:0.5em;}._w2_margin-left0{margin-left:0;} ._w2_margin-top{margin-top:0.5em;}._w2_margin-top0{margin-top:0;} ._w2_margin-bottom{margin-bottom:0.5em;}._w2_margin-bottom0{margin-bottom:0;} ._w2_align-left{text-align:left;} ._w2_align-center{text-align:center;} ._w2_align-right{text-align:right;} ._w2_align-justify{text-align:justify;} ._w2_float-left{float:left;} ._w2_float-right{float:right;} ._w2_float-none{float:none;} } @media screen and (min-width:1240px){ .SBflex._w3_reverse{flex-direction:row-reverse;} .SBflex._w3_noreverse{flex-direction:row;} ._w3_l1{width:100%;} ._w3_l2{width:50%;} ._w3_l3{width:33.33%;}._w3_l3x2{width:66.66%;} ._w3_l4{width:25%;}._w3_l4x3{width:75%;} ._w3_l5{width:20%;}._w3_l5x2{width:40%;}._w3_l5x3{width:60%;}._w3_l5x4{width:80%;} ._w3_l6{width:16.66%;} ._w3_l7{width:14.2857%;} ._w3_l8{width:12.5%;} ._w3_l8x7{width:87.5%;} ._w3_l9{width:11.11%;} ._w3_l10{width:10%;} ._w3_l10x3{width:30%;} ._w3_l10x7{width:70%;} ._w3_l10x9{width:90%;} ._w3_l11{width:9.09%;} ._w3_l12{width:8.33%;} ._w3_l12x11{width:8.33%;} ._w3_l20x19{width:95%;} ._w3_h2x1::before,._w3_h3x1::before,._w3_h3x2::before,._w3_h4x3::before,._w3_h1x1::before,._w3_h3x4::before,._w3_h16x9::before{content:'';display:inline-block;vertical-align:top;} ._w3_h2x1._v_mid::before,._w3_h3x1._v_mid::before,._w3_h3x2._v_mid::before,._w3_h4x3._v_mid::before,._w3_h1x1._v_mid::before,._w3_h3x4._v_mid::before,._w3_h16x9._v_mid::before{vertical-align:middle;} ._w3_h1{height:100%;} ._w3_h2x1::before{padding-top:50%;} ._w3_h3x1::before{padding-top:33.33%;} ._w3_h3x2::before{padding-top:66.66%;} ._w3_h5x3::before{padding-top:60%;} ._w3_h4x3::before{padding-top:75%;} ._w3_h1x1::before{padding-top:100%;} ._w3_h3x4::before{padding-top:133.33%;} ._w3_h16x9::before{padding-top:56.25%;} ._w3_h_{height:auto;}._w3_h_::before{display:none;} ._w3_padding{padding:0.5em;}._w3_padding0{padding:0;} ._w3_padding-right{padding-right:0.5em;}._w3_padding-right0{padding-right:0;} ._w3_padding-left{padding-left:0.5em;}._w3_padding-left0{padding-left:0;} ._w3_padding-top{padding-top:0.5em;}._w3_padding-top0{padding-top:0;} ._w3_padding-bottom{padding-bottom:0.5em;}._w3_padding-bottom0{padding-bottom:0;} ._w3_margin{margin:0.5em;}._w3_margin0{padding:0;} ._w3_margin-right{margin-right:0.5em;}._w3_margin-right0{margin-right:0;} ._w3_margin-left{margin-left:0.5em;}._w3_margin-left0{margin-left:0;} ._w3_margin-top{margin-top:0.5em;}._w3_margin-top0{margin-top:0;} ._w3_margin-bottom{margin-bottom:0.5em;}._w3_margin-bottom0{margin-bottom:0;} ._w3_align-left{text-align:left;} ._w3_align-center{text-align:center;} ._w3_align-right{text-align:right;} ._w3_align-justify{text-align:justify;} ._w3_float-left{float:left;} ._w3_float-right{float:right;} ._w3_float-none{float:none;} } .SBchargement{width:5em;text-align:center;pointer-events:none;position:absolute;transition:opacity 300ms ease-out;}.SBchargement.fixe{position:fixed;z-index:2;} #SBbodyLoad{position:fixed;z-index:5;}#SBbodyLoad{top:calc(50% - 20px - 0.6em);left:0px;width:100%;text-align:center;transition:opacity 300ms ease-out;opacity:0;pointer-events:none;} #SBbodyLoad>div,.SBchargement>div{display:inline-block;position:relative;width:80px;height:40px;vertical-align:top;} #SBbodyLoad>span{padding:0em 1em;display:block;font-size:1.5em;line-height:1em;} #SBbodyLoad>div div,.SBchargement>div div{position:absolute;top:13px;width:13px;height:13px;border-radius:50%;box-sizing:border-box;animation-timing-function:cubic-bezier(0,1,1,0);} #SBbodyLoad>div div:nth-child(1),.SBchargement>div div:nth-child(1){left:8px;animation:SBbodyLoad1 0.6s infinite;} #SBbodyLoad>div div:nth-child(2),.SBchargement>div div:nth-child(2){left:8px;animation:SBbodyLoad2 0.6s infinite;} #SBbodyLoad>div div:nth-child(3),.SBchargement>div div:nth-child(3){left:32px;animation:SBbodyLoad2 0.6s infinite;} #SBbodyLoad>div div:nth-child(4),.SBchargement>div div:nth-child(4){left:56px;animation:SBbodyLoad3 0.6s infinite;} @keyframes SBbodyLoad1{0%{transform:scale(0);} 100%{transform:scale(1);}} @keyframes SBbodyLoad3{0%{transform:scale(1);} 100%{transform:scale(0);}} @keyframes SBbodyLoad2{0%{transform:translate(0,0);} 100%{transform:translate(24px,0);}} main, header, footer, main>div, footer>div, nav{transition:all 300ms ease-out;} body.chargementBody>#SBbodyLoad, body.chargement>#SBbodyLoad{opacity:1;} body.chargement main>div, body.chargementBody main>div, body.chargementBody footer>div, body.chargementBody>nav, body.chargementBody>header{opacity:0;} body.chargementBody, body.chargement{pointer-events:none;}/*overflow:hidden;*/ .SBtable{max-width:100%;overflow:auto;} /* API Galerie */ .SBgalerie_{z-index:1000;position:fixed;left:0;top:0;bottom:0;right:0;text-align:center;transition:opacity 300ms ease-out;} .SBgalerie_::before{content:'';position:absolute;left:0;top:0;bottom:0;right:0;background-color:rgba(0,0,0,0.9125);} .SBgalerie_:not(.chargee), .SBgalerie_:not(.chargement) ._c, .SBgalerie_.chargement>span:not(._c){opacity:0;} .SBgalerie_:not(.chargee)>*{pointer-events:none;} .SBgalerie_>nav{opacity:0;position:absolute;left:0;right:0;background:rgba(0,0,0,0.9);transition:all 300ms ease-out,background 450ms ease-out;}/* TODO hover */ body:not(.SB_tactile) .SBgalerie_>nav:hover, body.SB_tactile .SBgalerie_._nav>nav, .SBgalerie_._init>nav{opacity:1;} body.SB_tactile .SBgalerie_:not(._nav)>nav{pointer-events:none;} /* Les options */ .SBgalerie_>nav:not(:last-child){top:0;bottom:unset;padding:0.25em;text-align:right;} .SBgalerie_>nav:not(:last-child)>div, .SBgalerie_>nav:not(:last-child)>a{display:inline-block;cursor:pointer;margin:0.25em;padding:1em 2em;border:1px solid white;border-radius:0.5em;color:white;font-size:1em;line-height:1.2em;} .SBgalerie_>nav:not(:last-child)>span{position:absolute;left:0.25em;top:0.25em;cursor:pointer;margin:0.25em;padding:1em;width:1.2em;height:1.2em;} .SBgalerie_>nav:not(:last-child)>span::before, .SBgalerie_>nav:not(:last-child)>span::after{content:'';position:absolute;left:0.5em;width:0.25em;border-radius:0.125em;height:1.725em;transition:all 300ms ease-out;background:white;} .SBgalerie_>nav:not(:last-child)>span::before{top:0;transform:rotate(45deg);transform-origin:right bottom;} .SBgalerie_>nav:not(:last-child)>span::after{bottom:0;transform:rotate(-45deg);transform-origin:right top;} .SBgalerie_>nav:not(:last-child)>span:hover::before, .SBgalerie_>nav:not(:last-child)>span:hover::after{height:3.2em;transform-origin:center;margin-left:1em;} /* Liste des miniatures */ .SBgalerie_>nav:last-child{bottom:-11em;top:unset;height:11em;overflow:auto;} body:not(.SB_tactile) .SBgalerie_>nav:last-child{padding-top:2em;overflow:hidden;} body:not(.SB_tactile) .SBgalerie_>nav:last-child:hover, body.SB_tactile .SBgalerie_._nav>nav:last-child, .SBgalerie_._init>nav:last-child, body:not(.SB_tactile) .SBgalerie_._init>nav:last-child{bottom:0;padding-top:0;} body:not(.SB_tactile) .SBgalerie_>nav:last-child>div{position:relative;} .SBgalerie_>nav:last-child>div{display:inline-block;vertical-align:top;white-space:nowrap;top:0;left:0;padding:1.5em;box-sizing:border-box;height:100%;width:auto;transition:left 100ms linear;} .SBgalerie_>nav:last-child>div>img{max-height:calc(100% - 1em);margin:0.5em 1em;vertical-align:top;max-width:none;cursor:pointer;transition:all 300ms ease-out;} .SBgalerie_>nav:last-child>div>img.select{transform:scale(1.1);} .SBgalerie_>nav:last-child>div>img:not(:hover):not(.select){opacity:0.6;}/* TODO pas si tactile ? */ .SBgalerie_>nav:last-child>div>img.select{max-height:calc(100% - 0.5em);margin:0.25em 1em;} /* Zone principale */ .SBgalerie_>div, .SBgalerie_>div>span, .SBgalerie_>div>div, .SBgalerie_>div>div::before{position:absolute;bottom:0;right:0;top:0;left:0;} .SBgalerie_>div>div{background-size:cover;background-position:center;transition:all 300ms ease-out;} .SBgalerie_>div>div>img{display:none;} .SBgalerie_>div>div::before{content:'';background-color:rgba(0,0,0,0.6);} .SBgalerie_>div>span::after{content:'';height:100%;vertical-align:middle;display:inline-block} .SBgalerie_>div>span>span{vertical-align:middle;display:inline-block;position:relative;box-shadow:0 0 1em -0.25em black;transition:all 300ms ease-out;} /* Immage principale */ .SBgalerie_>div>span>span>img{position:relative;vertical-align:top;max-width:calc(100vw - 3em);max-height:calc(100vh - 3em);} .SBgalerie_>div>span>span>span{position:absolute;bottom:0;top:0;width:50%;cursor:pointer} .SBgalerie_>div>span>span>img+span{left:0;} .SBgalerie_>div>span>span>span+span{right:0;} body.SB_tactile .SBgalerie_>div>span>span>span{pointer-events:none;} /* Transitions */ .SBgalerie_:not(.chargementFond)>div>div:last-of-type:not(:first-of-type){opacity:0;} .SBgalerie_>div>span:last-of-type:not(:first-of-type)>span, .SBgalerie_.chargement>div>span:first-of-type>span{transform:scale(0.5);opacity:0;} .SBgalerie_._Gltr>div>span:last-of-type:not(:first-of-type)>span, .SBgalerie_._Grtl.chargement>div>span:first-of-type>span{transform:scale(0.5) translate(100%);} .SBgalerie_._Grtl>div>span:last-of-type:not(:first-of-type)>span, .SBgalerie_._Gltr.chargement>div>span:first-of-type>span{transform:scale(0.5) translate(-100%);} /* Précédent / Suivant */ .SBgalerie_>span{position:absolute;} .SBgalerie_>span:first-of-type, .SBgalerie_>span:last-of-type{top:calc(50% - 3em);height:4em;width:2em;cursor:pointer;transition:all 150ms ease-out;} .SBgalerie_>span:first-of-type{left:0;} .SBgalerie_>span:last-of-type{right:0;} .SBgalerie_>span:first-of-type::before,.SBgalerie_>span:last-of-type::before, .SBgalerie_>span:first-of-type::after,.SBgalerie_>span:last-of-type::after{content:'';height:2em;border-radius:0.125em;width:0.25em;box-shadow:0 0 0.25em rgba(0,0,0,0.75);background-color:white;position:absolute;} .SBgalerie_>span:first-of-type::before,.SBgalerie_>span:last-of-type::before{top:0;} .SBgalerie_>span:first-of-type::after,.SBgalerie_>span:last-of-type::after{bottom:0;} .SBgalerie_>span:first-of-type::before,.SBgalerie_>span:first-of-type::after{left:0.25em;} .SBgalerie_>span:last-of-type::before,.SBgalerie_>span:last-of-type::after{right:0.25em;} .SBgalerie_>span:first-of-type::before{transform-origin:bottom left;transform:rotate(25deg);} .SBgalerie_>span:first-of-type::after{transform-origin:top left;transform:rotate(-25deg);} .SBgalerie_>span:last-of-type::before{transform-origin:bottom right;transform:rotate(-25deg);} .SBgalerie_>span:last-of-type::after{transform-origin:top right;transform:rotate(25deg);} body:not(.SB_tactile) .SBgalerie_>span:first-of-type:hover,.SBgalerie_.hover_before>span:first-of-type{left:-0.25em;padding-right:0.25em;} body:not(.SB_tactile) .SBgalerie_>span:last-of-type:hover,.SBgalerie_.hover_after>span:last-of-type{right:-0.25em;padding-left:0.25em;} @media screen and (min-width:720px){ .SBgalerie_>div>span>span>img{max-width:calc(100vw - 6em);} .SBgalerie_>span:first-of-type, .SBgalerie_>span:last-of-type{width:3em;} .SBgalerie_>span:first-of-type::before,.SBgalerie_>span:first-of-type::after{left:1em;} .SBgalerie_>span:last-of-type::before,.SBgalerie_>span:last-of-type::after{right:1em;} .SBgalerie_>span:first-of-type:hover,.SBgalerie_.hover_before>span:first-of-type{left:-0.5em;padding-right:0.5em;} .SBgalerie_>span:last-of-type:hover,.SBgalerie_.hover_after>span:last-of-type{right:-0.5em;padding-left:0.5em;} } /* Chargement */ @keyframes SBGalLoad1{0%{transform:scale(0);} 100%{transform:scale(1);}} @keyframes SBGalLoad3{0%{transform:scale(1);} 100%{transform:scale(0);}} @keyframes SBGalLoad2{0%{transform:translate(0,0);} 100%{transform:translate(2em,0);}} .SBgalerie_ ._c{width:5em;height:1.5em;text-align:center;pointer-events:none;top:calc(50% - 0.75em);left:calc(50% - 2.5em);transition:all 300ms ease-out;} .SBgalerie_ ._c>div{position:absolute;top:0.25em;width:1em;height:1em;border-radius:50%;background:rgb(245,245,245);border:1px solid rgb(51,51,51);box-sizing:border-box;animation-timing-function:cubic-bezier(0,1,1,0);} .SBgalerie_ ._c>div:nth-child(1){background:rgb(255,255,255);border:1px solid rgb(0,0,0);left:0.25em;animation:SBGalLoad1 0.6s infinite;} .SBgalerie_ ._c>div:nth-child(2){background:rgb(255,255,255);border:1px solid rgb(0,0,0);left:0.25em;animation:SBGalLoad2 0.6s infinite;} .SBgalerie_ ._c>div:nth-child(3){background:rgb(255,255,255);border:1px solid rgb(0,0,0);left:2em;animation:SBGalLoad2 0.6s infinite;z-index:1;} .SBgalerie_ ._c>div:nth-child(4){background:rgb(255,255,255);border:1px solid rgb(0,0,0);left:3.75em;animation:SBGalLoad3 0.6s infinite;} /* API Carroussel */ .SBcarroussel{position:relative;} .SBcarroussel[data-background]>span{display:none;} /* Image principale */ .SBcarroussel>div{position:relative;margin:auto;overflow:hidden;display:flex;flex-wrap:nowrap;align-items:stretch;transition:opacity 300ms ease-out,left 300ms ease-out;} .SBcarroussel>div>div{left:0%;width:100%;flex-shrink:0;position:relative;opacity:1;}/*cursor:pointer;transition:opacity 300ms ease-out,transform 300ms ease-out,left 300ms ease-out;*/ .SBcarroussel>div>div:not(.focus) a{pointer-events:none;} /* Les points */ .SBcarroussel>div+span{display:block;line-height:1em;text-align:center;} .SBcarroussel>span>span{position:relative;vertical-align:top;display:inline-block;width:0.5em;height:0.5em;border-radius:50%;margin:0 0.25em;cursor:default;transition:all 300ms ease-out;} .SBcarroussel>span>span:hover,.SBcarroussel>span>span.focus{transform:scale(1.25);} .SBcarroussel[data-auto]>span>span:not(.focus)>div{opacity:0;font-size:0.5em;} /* Les points : loader défilement auto */ .SBcarroussel>span>span>div{ box-sizing:border-box; font-size:1em;width:1em;height:1em; border-radius:50%; border:.2em solid rgba(70,63,50,0.1);/*couleur de fond de l'anneau*/ background-color:transparent;/*couleur de fond de la progress bar*/ display:inline-block; position:absolute;top:50%;left:50%; transform:translate(-50%) translateY(-50%); transition:all 300ms ease-out; } .SBcarroussel>span>span>div>span{ position:absolute; width:1em; /* 100% de la largeur */ height:1em; /* 100% de la hauteur */ left:-.2em; /* décalage de la largeur bordure de la gauge */ top:-.2em; /* décalage de la largeur bordure de la gauge */ clip:rect(0, 1em, 1em, .5em); /* par défaut seule la partie droite est visible */ } .SBcarroussel>span>span>div[data-value^='5']:not([data-value='5']):not([data-value^='5.'])>span, .SBcarroussel>span>span>div[data-value^='6']:not([data-value='6']):not([data-value^='6.'])>span, .SBcarroussel>span>span>div[data-value^='7']:not([data-value='7']):not([data-value^='7.'])>span, .SBcarroussel>span>span>div[data-value^='8']:not([data-value='8']):not([data-value^='8.'])>span, .SBcarroussel>span>span>div[data-value^='9']:not([data-value='9']):not([data-value^='9.'])>span, .SBcarroussel>span>span>div[data-value^='100']>span{clip:rect(auto, auto, auto, auto);} .SBcarroussel>span>span>div>span>span:first-child, .SBcarroussel>span>span>div>span>span:last-child{ position:absolute; box-sizing:border-box; /* prise en compte bordure dans la dimension */ border-width:.15em; /* largeur bordure de la gauge */ border-style:solid; border-color:var(--c-systeme); border-radius:50%; /* rendu aspect circulaire */ width:1em; /* largeur à 100% */ height:1em; /* hauteur à 100% */ clip:rect(0, .5em, 1em, 0); /* on ne garde que la partie gauche */ left:0;right:0; } .SBcarroussel>span>span>div>span>span:last-child{display:none;clip:rect(0,1em,1em,.5em);} .SBcarroussel>span>span>div[data-value^='5']:not([data-value='5']):not([data-value^='5.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='6']:not([data-value='6']):not([data-value^='6.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='7']:not([data-value='7']):not([data-value^='7.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='8']:not([data-value='8']):not([data-value^='8.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='9']:not([data-value='9']):not([data-value^='9.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='100']>span>span:last-child{display:block;} .SBcarroussel>span>span>div:after { content: attr(data-value) "%"; /* récup. valeur de progression */ font-size: 0.2em; /* taille de la font en % du parent */ height: 100%; /* centrage dans le parent */ display: flex; align-items: center; justify-content: center; /*-- pour effet shadow intérieur --*/ border-radius: 50%; box-shadow: 0 0 .5em rgba(0,0,0,.5) inset; display:none; } /* Flèches */ .SBcarroussel>span+span{position:absolute;height:2em;width:2em;top:calc(25% + 3.75em);cursor:pointer;top:calc(50% - 1em);z-index:1;} .SBcarroussel>span+span:not(:last-child){left:0.25em;transition:left 300ms ease-out,padding 300ms ease-out;} .SBcarroussel>span+span:last-child{right:0.25em;transition:right 300ms ease-out,padding 300ms ease-out;} .SBcarroussel>span+span::before, .SBcarroussel>span+span::after{content:'';height:1em;border-radius:0.125em;width:0.25em;box-shadow:0 0 0.25em rgba(0,0,0,0.75);position:absolute;} .SBcarroussel>span+span::before{top:0;} .SBcarroussel>span+span::after{bottom:0;} .SBcarroussel>span+span:not(:last-child)::before, .SBcarroussel>span+span:not(:last-child)::after{left:0.5em;} .SBcarroussel>span+span:last-child::before, .SBcarroussel>span+span:last-child::after{right:0.5em;} .SBcarroussel>span+span:not(:last-child)::before{transform-origin:bottom left;transform:rotate(25deg);} .SBcarroussel>span+span:not(:last-child)::after{transform-origin:top left;transform:rotate(-25deg);} .SBcarroussel>span+span:last-child::before{transform-origin:bottom right;transform:rotate(-25deg);} .SBcarroussel>span+span:last-child::after{transform-origin:top right;transform:rotate(25deg);} /* TRANSITION Type 1 */ /* Image principale */ .SBcarroussel[data-type="1"]:not(.noAnimation)>div>div{transition:left 300ms ease-out, opacity 300ms ease-out,transform 300ms ease-out;} .SBcarroussel[data-type="1"]>div>div:not(.focus){opacity:0;transform:scale(0.1);z-index:1;} .SBcarroussel[data-type="1"].hover_after>div>div.focus{transform:scale(0.75) translate(-12.5%);} .SBcarroussel[data-type="1"].hover_before>div>div.focus{transform:scale(0.75) translate(12.5%);} .SBcarroussel[data-type="1"].hover_after>div>div:not(.focus){transform:scale(0.5) translate(-100%);opacity:1;} .SBcarroussel[data-type="1"].hover_before>div>div:not(.focus){transform:scale(0.5) translate(100%);opacity:1;} .SBcarroussel[data-type="1"]>div>div.after{transform-origin:left;} .SBcarroussel[data-type="1"]>div>div.before{transform-origin:right;} /* Flèches */ .SBcarroussel[data-type="1"]>span+span:not(:last-child):hover, .SBcarroussel[data-type="1"].hover_before>span+span:not(:last-child){left:-1em;padding-right:1.25em;} .SBcarroussel[data-type="1"]>span+span:last-child:hover, .SBcarroussel[data-type="1"].hover_after>span+span:last-child{right:-1em;padding-left:1.25em;} /* TRANSITION Type 2 & 3 */ /* Image principale */ .SBcarroussel[data-type="2"]:not(.noAnimation)>div>div, .SBcarroussel[data-type="3"]:not(.noAnimation)>div>div{transition:left 300ms ease-out,transform 300ms ease-out;;} .SBcarroussel[data-type="3"]>div>div:not(.focus){z-index:1;} .SBcarroussel[data-type="2"].hover_after>div>div.focus{transform:translate(-12.5%);} .SBcarroussel[data-type="2"].hover_before>div>div.focus{transform:translate(12.5%);} .SBcarroussel[data-type="2"].hover_after>div>div:not(.focus), .SBcarroussel[data-type="3"].hover_after>div>div:not(.focus){transform:translate(-12.5%);} .SBcarroussel[data-type="2"].hover_before>div>div:not(.focus), .SBcarroussel[data-type="3"].hover_before>div>div:not(.focus){transform:translate(12.5%);} .SBcarroussel[data-type="2"]>div>div.after, .SBcarroussel[data-type="3"]>div>div.after{transform-origin:left;} .SBcarroussel[data-type="2"]>div>div.before, .SBcarroussel[data-type="3"]>div>div.before{transform-origin:right;} /* TRANSITION Type 4 */ /* Image principale */ .SBcarroussel[data-type="4"]:not(.noAnimation)>div>div{transition:opacity 600ms ease-out,transform 600ms ease-out;} .SBcarroussel[data-type="4"]>div>div:not(.focus){opacity:0;transform:scale(0.75);z-index:1;} /* TRANSITION Type 5 */ /* Image principale */ .SBcarroussel[data-type="5"]:not(.noAnimation)>div>div{transition:opacity 600ms ease-out;} .SBcarroussel[data-type="5"]>div>div:not(.focus){opacity:0;z-index:1;pointer-events:none;transform:translateX(100%);} .SBcarroussel[data-type="5"]>div>div.focus+div{transform:translateX(-100%);} /* INTERFACE : couleur */ /* Les points */ .SBcarroussel>span>span{background:linear-gradient(180deg, rgba(0,0,0,0) 3%, rgba(255,255,255,0.25) 90%) black;border:1px solid rgb(200,200,200);} .SBcarroussel>span>span:hover,.SBcarroussel>span>span.focus{background:linear-gradient(180deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.1) 100%) var(--c-systeme);} /* Flèches */ .SBcarroussel>span+span::before{background:linear-gradient(180deg, rgba(0,0,0,0) 3%, rgba(255,255,255,0.25) 90%) black;} .SBcarroussel>span+span::after{background:linear-gradient(0deg, rgba(0,0,0,0) 3%, rgba(255,255,255,0.25) 90%) black;} .SBcarroussel>span+span:hover::before, .SBcarroussel.hover_before>span+span:not(:last-child)::before, .SBcarroussel.hover_after>span+span:last-child::before{background:linear-gradient(180deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.1) 100%) var(--c-systeme);} .SBcarroussel>span+span:hover::after, .SBcarroussel.hover_before>span+span:not(:last-child)::after, .SBcarroussel.hover_after>span+span:last-child::after{background:linear-gradient(0deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.1) 100%) var(--c-systeme);} body{color:var(--c-sombre);font-family:'Red Rose',cursive;transition:background 300ms ease-out;} h1,h2,h3{font-family:'Oswald',sans-serif;margin:0;} #SBbodyLoad>span{letter-spacing:0.1em;color:var(--c-sombre);text-shadow:1px 1px 1px var(--c-clair), -1px -1px 1px var(--c-clair);text-transform:uppercase;font-family:'Hina Mincho',serif;font-weight:bold;} #SBbodyLoad>div div,.SBchargement>div div{background:var(--c-sombre);border:1px solid var(--c-clair);} main{min-height:100vh;box-sizing:border-box;transition:padding 300ms ease-out;background:linear-gradient(180deg,white 0%,var(--c-clair) 100%);} nav{height:4em;position:fixed;top:0;left:0;width:100%;z-index:1;transition:all 300ms ease-out;} body:not(.SBp_index) nav, body.SBp_index.SBScroll nav{background:var(--c-sombre);box-shadow: 0 0 0.5em rgba(0,0,0,0.5);} /* TODO à mettre dans _css.php */ header{background:url('../_img/images-du-site/metal.jpg') fixed no-repeat center / cover;} /* OLD HEADER */ /* header{max-height:30.55em;} */ /* TODO vérifier font-weight */ /* h1 : 3.5 / 3 */ /* NOUVELLES CSS */ h1{margin:0;padding:0;font-size:3em;letter-spacing:0.25em;font-weight:100;text-align:center;padding-bottom:0.25em;} /* TODO h2 & h3 ici */ body.SBp_contact h1{color:white;text-shadow:-3px -3px 3px black;} /* Main & Header */ /* TODO main */ header{position:relative;overflow:hidden;color:white;text-shadow:-3px -3px 3px black;text-align:center;letter-spacing:0.1em;text-transform:uppercase;font-weight:100;} header>div{position:relative;top:0;left:0;transition:all 300ms ease-out;} header h1{font-size:3em;}/* TODO responsive */ header img{width:12em;vertical-align:top;transition:all 300ms ease-out;} .SBunItem{ overflow:hidden; border-radius:0.25em; } .SBunItem.SBloaded{ box-shadow:0 0 0.5em -0.25em black; } /* PAGE D'ACCUEIL */ #accueil_1{box-shadow:0 -0.5em 0.5em -0.5em black;} #accueil_1 .SBcarroussel{height:calc(100vh - 4em);} #accueil_1 .SBcarroussel>div, #accueil_1 .SBcarroussel>div>div{height:100%;} #accueil_1 .SBcarroussel>div+span{position: absolute;left:0;bottom:0;right:0;padding:1em 0.5em;} #accueil_1 input{background:transparent;border:1px solid rgba(255,255,255,0.25);color:white;text-shadow:0 0 1px #222;font-weight:200;} #accueil_1 input:hover{background:rgba(255,255,255,0.1);} /* TODO h2 h3 génériques ? */ #accueil_1 h3{ font-size: 3em; font-weight: 200; text-transform: uppercase; letter-spacing: 0.1em; } #accueil_2 h2{ font-size: 2em; font-weight: normal; letter-spacing: 0.1em; padding-bottom: 0.25em; } /* TODO autre nom classe */ /* TODO h2 ??, */ .categorieAccueil{vertical-align:top;} .categorieAccueil h2{ position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; color: white; font-weight: 200; text-transform: uppercase; letter-spacing: 0.1em; font-size: 2.5em; padding: 0.5em 0.25em; transition:all 300ms ease-out; box-sizing:border-box; } .categorieAccueil:hover h2{padding:0.1em 0.25em;} #accueil_2 .SBcarroussel>div>div::before{content:'';display:inline-block;height:100%;vertical-align:middle;} .articleAccueil>.SB-bloc{ position:absolute;bottom:3em;left:0;right:0;color:white;text-align:center; } .articleAccueil .description{ box-sizing:border-box;display:inline-block;vertical-align:top; width:100%;max-width:480px;max-height:4.5em;overflow:hidden; padding:0 1em;text-align:left; /* background:linear-gradient(180deg,#fff 2em, rgba(255,255,255,0) 5em); background-clip:text; color:rgba(255,255,255,0);*/ transition:opacity 300ms ease-out;opacity:0.65; } .articleAccueil .description:hover{opacity:0.9;} .articleAccueil .description>div{font-size:0.9em;} .articleAccueil .description+div:not(.btn){margin-top:-0.5em;position:relative;} .articleAccueil .btn{margin-top:1em;} header::before, header>div::after, .categorieAccueil>.SBimage::after, .articleAccueil>.SBimage::after{content:'';pointer-events:none;position:absolute;left:0;bottom:0;right:0;top:0;} header::before{background:linear-gradient(180deg,rgba(34,34,34,0.75) 0%,rgba(34,34,34,0) 25%,rgba(34,34,34,0) 50%,rgba(34,34,34,0.5) 100%);} header>div::after{background:linear-gradient(180deg,rgba(34,34,34,0.25) 0%,rgba(34,34,34,0) 25%);} .categorieAccueil>.SBimage::after{transition:all 300ms ease-out;background:linear-gradient(180deg,rgba(34,34,34,0.75) 0%,rgba(34,34,34,0) 25%,rgba(34,34,34,0) 50%,rgba(34,34,34,1) 100%) center;background-size:100% 100%;} .categorieAccueil:hover>.SBimage::after{background-size:100% 120%;} .articleAccueil>.SBimage::after{background:linear-gradient(180deg,rgba(34,34,34,0.25) 0%,rgba(34,34,34,0) 25%,rgba(34,34,34,0) 50%,rgba(34,34,34,1) 100%);} .accueilNl{border-radius:0.25em;} .accueilNl .SBimage{border-radius:0.25em 0.25em 0 0;overflow:hidden;} .accueilNl input[type="button"]{border-radius:0 0 0.25em 0.25em;} .accueilNl:hover input[type="button"].couleur{background:rgb(120,139,255);} /* Page d'accueil */ body.SBp_index header>div{padding:4em 1em;} body.SBp_index header>div>div{font-size:1.5em;} /* Page œuvre */ body.SBp_oeuvre header .SBimage::after{ content:'';position:absolute;top:0;left:0;right:0;bottom:0; background:linear-gradient(180deg,rgba(34,34,34,0.25) 0%,rgba(34,34,34,0.5) 75%,rgb(34, 34, 34) 100%) center transparent; transition:background 300ms ease-out; } body.SBp_oeuvre header .SBimage{height:calc(40vh - 4em);position:fixed;top:4em;left:0;right:0;font-size:1em;} body.SBp_oeuvre header>div{height:40vh;} body.SBp_oeuvre header+div{min-height:60vh;position:relative;}/* TODO background ici */ body.SBp_oeuvre.SBScroll header .SBimage::after{background-color:rgba(34,34,34,0.5);} body:not(.SBp_index):not(.SBp_oeuvre):not(.SBp_categorie) header{max-height:0;} body:not(.SBp_index):not(.SBp_oeuvre) main{padding-top:4em;} body:not(.SBp_index):not(.SBp_oeuvre).SBp_categorie.SBScroll main{padding-top:3em;} /* HEADER */ body.SBp_oeuvre header h1{position:absolute;bottom:0;left:0;right:0;} body.SBp_categorie header{height:4em;} body.SBp_categorie header h1{font-size:2em;padding:0.5em;background-color:rgba(34,34,34,0.75); position: fixed; top: 2em; left: 0; right: 0; z-index: 1; line-height:1em; transition:all 300ms ease-out; } body.SBp_categorie.SBScroll header h1{font-size:1.5em;top:2.66em;} nav>div{color:white;text-transform:uppercase;letter-spacing:0.1em;text-align:center;transition:all 300ms ease-out;} nav>div::before{content:"";position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(34,34,34,0.5);transition:all 300ms ease-out;pointer-events:none;opacity:0;} body.SBmode_navPrinc nav>div::before{pointer-events:auto;opacity:1;} nav>div>div{position:fixed;top:-8em;left:-420px;width:420px;max-width:calc(100% - 1em);background-color:var(--c-sombre);padding-top:4em;text-align:left;overflow:hidden;transition:all 300ms ease-out;} body.SBmode_navPrinc nav>div>div{left:0;top:0;} nav>div>div>a, nav>div>div>div{padding:1.4em 2.5em;display:block;transition:all 300ms ease-out;transform-origin:left center;} nav>div>div>a:hover, nav>div>div>div:hover{transform:scale(1.25) translateX(0.25em);} nav>div>div>a.select, nav>div>div>div.select{text-decoration:underline;} nav>img{position: absolute; width:3.5em; top:0.25em; left: calc(50% - 2em);opacity:0;transform:translateY(4em);transition:all 300ms ease-out;} .icoM{z-index:1;cursor:pointer;padding:calc(0.9em - 3px);box-sizing:border-box;text-align:center;display:inline-block;width:3.8em;height:3.8em;transition:all 300ms ease-out;position:absolute;top:0;left:0;} .icoM>span{box-shadow:1px 1px 2px #000;border-radius:3px;margin-left:0.2em;width:1.8em;height:2px;background-color:#fff;display:block;margin-top:0.5em;position:relative;transition:all 300ms ease-out;} .icoM>span:last-child{margin-bottom:0.5em;} body.SBmode_navPrinc .icoM{/*padding:calc(0.4em - 3px);border:0.5em solid white;border-radius:1em;*/} body.SBmode_navPrinc .icoM>span:last-child{transform:rotate(-45deg);top:-0.62em;} body.SBmode_navPrinc .icoM>span:first-child{transform:rotate(45deg);top:0.62em;} body.SBmode_navPrinc .icoM>span:first-child+span{opacity:0;width:0;} /* TODO seulement sur grands écrans */ body:not(.SBp_index) nav>img, body.SBp_index.SBScroll nav>img{opacity:1;transform:translateY(0);} body:not(.SBp_index) header img, body.SBp_index.SBScroll header img{width:4em;opacity:0;transform: translateY(-1em);} main{position:relative;/*padding-top:50vh;*/} footer{background:var(--c-sombre);color:var(--c-clair);padding:5em 2em;text-align:center;} .SBtrame{max-width:1024px;margin:auto;padding:3em 1em 3em 1em;} .SBtrame._w2{max-width:540px;} .SBtrame.SBcarroussel{padding:1em 2em 4em 2em;box-sizing:border-box;} .SBtrame.SBcarroussel>div{align-items:center;} ._bg_blancVclair{background:linear-gradient(180deg,white 0%,var(--c-clair) 100%);} ._bg_blancVclair25{background:linear-gradient(180deg,white 0%,var(--c-clair) 25%);} ._bg_blancVclair50{background:linear-gradient(180deg,white 0%,var(--c-clair) 50%);} ._bg_blancVclair75{background:linear-gradient(180deg,white 0%,var(--c-clair) 75%);} ._bg_clairVblanc{background:linear-gradient(180deg,var(--c-clair) 0%,white 100%);} ._bg_clairVblanc25{background:linear-gradient(180deg,var(--c-clair) 0%,white 25%);} ._bg_clairVblanc50{background:linear-gradient(180deg,var(--c-clair) 0%,white 50%);} ._bg_clairVblanc75{background:linear-gradient(180deg,var(--c-clair) 0%,white 75%);} ._bg_blancVtransparent{background:linear-gradient(180deg,white 0%,transparent 100%);} ._shad_in{box-shadow:0 -0.5em 0.5em -0.5em black inset, 0 0.5em 0.5em -0.5em black inset;} ._shad_t_in{box-shadow:0 0.5em 0.5em -0.5em black inset;} ._shad_b_in{box-shadow:0 -0.5em 0.5em -0.5em black inset;} .gros-texte{font-size:1.5em;text-transform: uppercase; letter-spacing: 0.1em; text-align: center; text-shadow: 1px 1px 1px white;} /* body.chargement main, body.chargementBody main, body.chargement header, body.chargementBody header, body.chargement footer, body.chargementBody footer{margin-top:-4em;}*/ body.chargement header{opacity:0.5;} body.chargementBody,body.chargement{background:linear-gradient(180deg, rgb(255,255,255) 0%, var(--c-clair) 100%) fixed;} .point-blanc .SBchargement>div div:nth-child(1), .point-blanc .SBchargement>div div:nth-child(2), .point-blanc .SBchargement>div div:nth-child(3), .point-blanc .SBchargement>div div:nth-child(4){background:rgb(255,255,255);border:1px solid rgb(0,0,0);} .point-bleu .SBchargement>div div:nth-child(1), .point-bleu .SBchargement>div div:nth-child(2), .point-bleu .SBchargement>div div:nth-child(3), .point-bleu .SBchargement>div div:nth-child(4){background:var(--c-systeme);border:1px solid var(--c-sombre);} main, header, footer, main>div, footer>div, nav{transition:all 300ms ease-out;} input,textarea{ padding:1em 2em;transition:all 300ms ease-out;font-size: 1.2em; line-height: 1em; border:none; box-shadow:0 0 0.5em rgba(34,34,34,0.25); font-family: 'Red Rose',cursive;} textarea{resize:none;min-height:9em;} input[type="button"], input[type="submit"]{ cursor: pointer;box-shadow:0 0 0.5em rgba(34,34,34,0.5);border-radius:0.25em; } input[type="button"]:hover{box-shadow:0 0 0.5em rgba(34,34,34,0);} input[type="button"].couleur, input[type="submit"].couleur{ border:1px solid var(--c-systeme); background-color:var(--c-systeme);text-shadow:0 0 1px #222;color:white; } input[type="button"].couleur:hover, input[type="submit"].couleur:hover{background:rgb(120, 139, 255);} input[type="text"],input[type="email"],textarea{width:100%;} /* TODO progression carroussel auto */ #test{ height:8em;width:8em;position:relative; } #test>div{ box-sizing:border-box; font-size:6em; width:1em; height:1em; border-radius:50%; border:.15em solid rgba(70,63,50,0.5);/*couleur de fond de l'anneau*/ background-color:transparent;/*couleur de fond de la progress bar*/ display:inline-block; top:50%; transform:translate(-50%) translateY(-50%); left:50%; position:absolute; } #test>div>span{ position:absolute; width:1em; /* 100% de la largeur */ height:1em; /* 100% de la hauteur */ left:-.15em; /* décalage de la largeur bordure de la gauge */ top:-.15em; /* décalage de la largeur bordure de la gauge */ clip:rect(0, 1em, 1em, .5em); /* par défaut seule la partie droite est visible */ } #test>div[data-value^='5']:not([data-value='5']):not([data-value^='5.'])>span, #test>div[data-value^='6']:not([data-value='6']):not([data-value^='6.'])>span, #test>div[data-value^='7']:not([data-value='7']):not([data-value^='7.'])>span, #test>div[data-value^='8']:not([data-value='8']):not([data-value^='8.'])>span, #test>div[data-value^='9']:not([data-value='9']):not([data-value^='9.'])>span, #test>div[data-value^='100']>span{clip:rect(auto, auto, auto, auto);} #test>div>span>span:first-child, #test>div>span>span:last-child{ position:absolute; box-sizing:border-box; /* prise en compte bordure dans la dimension */ border-width:.15em; /* largeur bordure de la gauge */ border-style:solid; border-color:rgb(238,135,96); border-radius:50%; /* rendu aspect circulaire */ width:1em; /* largeur à 100% */ height:1em; /* hauteur à 100% */ clip:rect(0, .5em, 1em, 0); /* on ne garde que la partie gauche */ } #test>div>span>span:last-child{ display:none; clip:rect(0, 1em, 1em, .5em); } #test>div[data-value^='5']:not([data-value='5']):not([data-value^='5.'])>span>span:last-child, #test>div[data-value^='6']:not([data-value='6']):not([data-value^='6.'])>span>span:last-child, #test>div[data-value^='7']:not([data-value='7']):not([data-value^='7.'])>span>span:last-child, #test>div[data-value^='8']:not([data-value='8']):not([data-value^='8.'])>span>span:last-child, #test>div[data-value^='9']:not([data-value='9']):not([data-value^='9.'])>span>span:last-child, #test>div[data-value^='100']>span>span:last-child{display:block;} #test>div:after { content: attr(data-value) "%"; /* récup. valeur de progression */ font-size: 0.15em; /* taille de la font en % du parent */ height: 100%; /* centrage dans le parent */ display: flex; align-items: center; justify-content: center; /*-- pour effet shadow intérieur --*/ border-radius: 50%; box-shadow: 0 0 .5em rgba(0, 0, 0, .5) inset; } .SBcarroussel>span>span>div{ box-sizing:border-box; font-size:1em; width:1em; height:1em; border-radius:50%; border:.2em solid rgba(70,63,50,0.1);/*couleur de fond de l'anneau*/ background-color:transparent;/*couleur de fond de la progress bar*/ display:inline-block; top:50%; transform:translate(-50%) translateY(-50%); left:50%; position:absolute; transition:all 300ms ease-out; } .SBcarroussel>span>span>div>span{ position:absolute; width:1em; /* 100% de la largeur */ height:1em; /* 100% de la hauteur */ left:-.2em; /* décalage de la largeur bordure de la gauge */ top:-.2em; /* décalage de la largeur bordure de la gauge */ clip:rect(0, 1em, 1em, .5em); /* par défaut seule la partie droite est visible */ } .SBcarroussel>span>span>div[data-value^='5']:not([data-value='5']):not([data-value^='5.'])>span, .SBcarroussel>span>span>div[data-value^='6']:not([data-value='6']):not([data-value^='6.'])>span, .SBcarroussel>span>span>div[data-value^='7']:not([data-value='7']):not([data-value^='7.'])>span, .SBcarroussel>span>span>div[data-value^='8']:not([data-value='8']):not([data-value^='8.'])>span, .SBcarroussel>span>span>div[data-value^='9']:not([data-value='9']):not([data-value^='9.'])>span, .SBcarroussel>span>span>div[data-value^='100']>span{clip:rect(auto, auto, auto, auto);} .SBcarroussel>span>span>div>span>span:first-child, .SBcarroussel>span>span>div>span>span:last-child{ position:absolute; box-sizing:border-box; /* prise en compte bordure dans la dimension */ border-width:.15em; /* largeur bordure de la gauge */ border-style:solid; border-color:var(--c-systeme); border-radius:50%; /* rendu aspect circulaire */ width:1em; /* largeur à 100% */ height:1em; /* hauteur à 100% */ clip:rect(0, .5em, 1em, 0); /* on ne garde que la partie gauche */ left:0;right:0; } .SBcarroussel>span>span>div>span>span:last-child{ display:none; clip:rect(0, 1em, 1em, .5em); } .SBcarroussel>span>span>div[data-value^='5']:not([data-value='5']):not([data-value^='5.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='6']:not([data-value='6']):not([data-value^='6.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='7']:not([data-value='7']):not([data-value^='7.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='8']:not([data-value='8']):not([data-value^='8.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='9']:not([data-value='9']):not([data-value^='9.'])>span>span:last-child, .SBcarroussel>span>span>div[data-value^='100']>span>span:last-child{display:block;} .SBcarroussel>span>span>div:after { content: attr(data-value) "%"; /* récup. valeur de progression */ font-size: 0.2em; /* taille de la font en % du parent */ height: 100%; /* centrage dans le parent */ display: flex; align-items: center; justify-content: center; /*-- pour effet shadow intérieur --*/ border-radius: 50%; box-shadow: 0 0 .5em rgba(0, 0, 0, .5) inset; display:none; } /* body.SBp_galerie header+.categorieAccueil:last-child .SBimage*/ .SBtexte>div{font-size:1.4em;color:rgb(100,100,100);font-weight:100;text-align:justify;} div[data-count="1"] .categorieAccueil .SBimage{min-height:calc(100vh - 4em);} div[data-count="2"] .categorieAccueil .SBimage{min-height:calc(50vh - 2em);} div[data-count="3"] .categorieAccueil .SBimage{min-height:calc(33.33vh - 1.33em);} /* Page Œuvre */ .oc_image, .oc_images{width:100%;display:inline-block;vertical-align:top;box-sizing:border-box;position:relative;}/*text-align:left;*/ .oc_image{padding:0;}.oc_images{padding:1em 0 0 0;}.oc_images._v{padding-bottom:7.5em;} .oc_image .SBimage, .oc_images .SBimage{cursor:pointer;display:inline-block;vertical-align:top;} .oc_images._1 .SBimage{width:100%;} .oc_images._2 .SBimage{width:calc(50% - 0.5em);} .oc_images._3 .SBimage{width:calc(33.33% - 0.667em);} .oc_images._2 .SBimage:nth-child(2n+1), .oc_images._3 .SBimage:nth-child(3n+1),.oc_images._3 .SBimage:nth-child(3n+2){margin-right:1em;} .oc_images._2 .SBimage:nth-child(1),.oc_images._2 .SBimage:nth-child(2), .oc_images._3 .SBimage:nth-child(1),.oc_images._3 .SBimage:nth-child(2),.oc_images._3 .SBimage:nth-child(3), .oc_images._3 .SBimage:nth-child(4),.oc_images._3 .SBimage:nth-child(5),.oc_images._3 .SBimage:nth-child(6){margin-bottom:1em;} .oc_images._2 .SBimage:nth-child(5),.oc_images._2 .SBimage:nth-child(6){margin-top:1em;} .oc_images._3 .SBimage:nth-child(10),.oc_images._3 .SBimage:nth-child(11),.oc_images._3 .SBimage:nth-child(12){margin-top:1em;} .oc_images._2 .SBimage:nth-child(n+7), .oc_images._2._v .SBimage:nth-child(n+5), .oc_images._3 .SBimage:nth-child(n+13), .oc_images._3._v .SBimage:nth-child(n+10){display:none;} .oc_images._2 .SBimage:nth-child(6):not(:last-of-type)>div::after, .oc_images._2._v .SBimage:nth-child(4):not(:last-of-type)>div::after, .oc_images._3 .SBimage:nth-child(12):not(:last-of-type)>div::after, .oc_images._3._v .SBimage:nth-child(9):not(:last-of-type)>div::after{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background-color:rgba(255,255,255,0.8);font-size:3em;} .oc_images._2 .SBimage:nth-child(6):not(:last-of-type)::after, .oc_images._2._v .SBimage:nth-child(4):not(:last-of-type)::after, .oc_images._3 .SBimage:nth-child(12):not(:last-of-type)::after, .oc_images._3._v .SBimage:nth-child(9):not(:last-of-type)::after{content:"+";display:inline-block;vertical-align:middle;font-size:3em;position:relative;font-weight:100;width:100%;text-align:center;} .oc_images._2 .SBimage:nth-child(6):not(:last-of-type)::after{content:var(--nb-items);/*calc(var(--nb-items) - 6);*/} .oc_images._2._v .SBimage:nth-child(4):not(:last-of-type)::after{content:calc(var(--nb-items) - 4);} .oc_images._3 .SBimage:nth-child(12):not(:last-of-type)::after{content:calc(var(--nb-items) - 12);} .oc_images._3._v .SBimage:nth-child(9):not(:last-of-type)::after{content:"+ " attr(data-nb3);/*var(--nb-items);/*calc(var(--nb-items) - 9);*/} .oc_images._2 .SBimage:nth-child(6):not(:last-of-type)::after, .oc_images._2._v .SBimage:nth-child(4):not(:last-of-type)::after, .oc_images._3 .SBimage:nth-child(12):not(:last-of-type)::after, .oc_images._3._v .SBimage:nth-child(9):not(:last-of-type)::after{content:"+ " attr(data-nb);} .oc_dimension, .oc_achat{position:absolute;bottom:0;} .oc_achat{right:0;text-align:right;} .oc_achat>span{font-size:2em;} .oc_achat>div{margin-top:0.5em;} .oc_dimension{left:0;} .oc_dimension>div{font-size:0.9em;color:rgb(100,100,100);} .oc_description{text-align:justify;padding:3em 0 0 0;} .SBimage .copyright{display:none;} @media screen and (min-width:640px){ } @media screen and (min-width:920px){ body.SBmode_navPrinc nav>div::before{pointer-events:none;opacity:0;} nav>div>div{position:static;top:0;left:0;width:auto;background-color:transparent;padding-top:0;text-align:center;} nav>div>div>a, nav>div>div>div{display:inline-block;transform-origin:center;} nav>div>div>a:hover, nav>div>div>div:hover{transform:scale(1.25) translateY(-0.25em);} .icoM{display:none;} body:not(.SBp_index) nav>div>div>a:nth-child(2), body:not(.SBp_index) nav>div>div>div:nth-child(2), body.SBp_index.SBScroll nav>div>div>a:nth-child(2), body.SBp_index.SBScroll nav>div>div>div:nth-child(2){margin-right:2em;} body:not(.SBp_index) nav>div>div>a:nth-child(3), body:not(.SBp_index) nav>div>div>div:nth-child(3), body.SBp_index.SBScroll nav>div>div>a:nth-child(3), body.SBp_index.SBScroll nav>div>div>div:nth-child(3){margin-left:2em;} .SBtrame._w2{max-width:1024px;} div[data-count="1"] .categorieAccueil .SBimage, div[data-count="2"] .categorieAccueil .SBimage, div[data-count="3"] .categorieAccueil .SBimage{min-height:calc(100vh - 4em);} div[data-count="4"] .categorieAccueil .SBimage, div[data-count="5"] .categorieAccueil .SBimage, div[data-count="6"] .categorieAccueil .SBimage{min-height:calc(50vh - 2em);} div[data-count="7"] .categorieAccueil .SBimage, div[data-count="8"] .categorieAccueil .SBimage, div[data-count="9"] .categorieAccueil .SBimage{min-height:calc(33.33vh - 1.33em);} /* Page Œuvre */ .oc_image{width:60%;} .oc_images{width:40%;padding:0 0 0 1em;} .oc_dimension{padding-left:1em;} .oc_images._2:not(._v) .SBimage{height:calc(33.33% - 0.667em);} .oc_images._3:not(._v) .SBimage{height:calc(25% - 0.75em);} } @media screen and (min-width:1240px){ } .pastille{ background-color: var(--c-systeme); padding: 0.5em 1em; border-radius: 0.5em; display: inline-block; text-shadow: 1px 1px 1px #222; box-shadow:0 0 0.5em rgba(34,34,34,0.5); color:white; } .categorieAccueil .pastille{position:absolute;top:1em;right:1em;padding:0.25em 0.5em;} footer a{display: inline-block; padding: 0.5em 1em; } footer a:hover{text-decoration:underline;} .formContact{ } input,textarea{box-sizing:border-box;border-radius:0.5em;} .formContact>input, .formContact>textarea{ width:100%; } .formContact>input:not(:last-child){ margin-bottom:1em; } /* h1{ font-size:3em; letter-spacing:0.25em; font-weight:100; margin-top:-0.5em; padding-bottom:0.5em; } */ /* body.SBp_galerie header+.SBimage{max-height:50vh;} body.SBp_galerie header+.SBimage>div{background-attachment:fixed;} */ /* var divCircle = document.createElement("div"); divCircle.className = "progress-circle"; divCircle.dataset.value = 0; var progressMasque = document.createElement("div"); progressMasque.className = "progress-masque"; divCircle.appendChild(progressMasque); var progressBarre = document.createElement("div"); progressBarre.className = "progress-barre"; var progressSup50 = document.createElement("div"); progressSup50.className = "progress-sup50"; progressMasque.appendChild(progressBarre); progressMasque.appendChild(progressSup50); sur #test>div var pourcent=Math.min(100,Math.floor(e.loaded/xhr.fichier.size*100)); var deg=pourcent*360/100; cercle.firstChild.firstChild.style.transform='rotate('+deg+'deg)'; cercle.dataset.value=pourcent; */