styles.css 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784
  1. /**
  2. * Primary Drupal Styles
  3. * Author: Bachir Soussi Chiadmi
  4. */
  5. /* between 0 & 640px */
  6. /* between 640px & 1000px */
  7. /* between 1001px & 1025px */
  8. /* between 1026px & 1920px */
  9. /* between 1920px & infinity */
  10. body {
  11. font-size: 16px;
  12. font-family: "aileron", Arial, "MS Trebuchet", sans-serif; }
  13. h1 {
  14. font-size: 1.6em; }
  15. h2 {
  16. font-size: 1.5em; }
  17. h3 {
  18. font-size: 1.4em; }
  19. h4 {
  20. font-size: 1.3em; }
  21. h5 {
  22. font-size: 1.2em; }
  23. h6 {
  24. font-size: 1.1em; }
  25. input {
  26. font-family: Arial, "MS Trebuchet", sans-serif;
  27. font-size: 0.8em; }
  28. /** layout */
  29. .footer-block .region, .header-block {
  30. display: inline-block;
  31. vertical-align: top; }
  32. #header, #main, #footer {
  33. padding: 0; }
  34. #header {
  35. width: 100%;
  36. z-index: 20;
  37. background-color: rgba(255, 255, 255, 0.95);
  38. background-image: url(../../images/fond-trame-logo-lite.png);
  39. background-repeat: no-repeat;
  40. background-position: center top;
  41. background-size: contain;
  42. max-height: 200px; }
  43. @media only screen and (min-width: 62.5625em) {
  44. #header {
  45. position: fixed; } }
  46. @media only screen and (min-width: 62.5625em) {
  47. #header {
  48. max-height: 400px; } }
  49. #header hgroup.logo {
  50. width: 95%;
  51. margin: 0 auto;
  52. padding: 1em 0 0; }
  53. @media only screen and (min-width: 62.5625em) {
  54. #header hgroup.logo {
  55. max-width: 1000px; } }
  56. #header h1 {
  57. margin: 0; }
  58. #header h1 a {
  59. display: block;
  60. height: 120px;
  61. background-image: url(../../images/logo.png);
  62. background-size: contain;
  63. background-position: center;
  64. background-repeat: no-repeat;
  65. text-indent: -2000px;
  66. overflow: hidden;
  67. margin: 0; }
  68. @media only screen and (min-width: 62.5625em) {
  69. #header h1 a {
  70. height: 320px; } }
  71. #header h2 {
  72. text-align: center;
  73. color: #20c498;
  74. font-size: 1em; }
  75. @media only screen and (min-width: 62.5625em) {
  76. #header h2 {
  77. font-size: 2em; } }
  78. @media only screen and (min-width: 62.5625em) {
  79. #main {
  80. padding-top: 400px; } }
  81. #main > .region {
  82. width: 95%;
  83. margin: 0 auto; }
  84. @media only screen and (min-width: 62.5625em) {
  85. #main > .region {
  86. max-width: 1000px; } }
  87. #node-63 {
  88. padding: 1em 0; }
  89. #node-63 .content section {
  90. display: inline; }
  91. #node-63 .content p {
  92. margin: 0; }
  93. #node-63 ul.links {
  94. text-align: right;
  95. margin: 0;
  96. padding: 0; }
  97. #node-63 ul.links li {
  98. margin: 0;
  99. padding: 0;
  100. display: inline-block; }
  101. #node-63 ul.links a {
  102. color: inherit;
  103. text-decoration: none;
  104. font-weight: 500; }
  105. #thematique-anchor-links {
  106. display: none;
  107. padding: 1em 0; }
  108. @media only screen and (min-width: 62.5625em) {
  109. #thematique-anchor-links {
  110. display: block; } }
  111. #thematique-anchor-links ul {
  112. display: -ms-flexbox;
  113. display: flex;
  114. -ms-flex-flow: row nowrap;
  115. flex-flow: row nowrap;
  116. -ms-flex-pack: justify;
  117. justify-content: space-between;
  118. padding: 0;
  119. margin: 0; }
  120. #thematique-anchor-links ul li {
  121. max-width: 7em;
  122. list-style: none;
  123. padding: 0;
  124. margin: 0; }
  125. #thematique-anchor-links ul li a {
  126. text-decoration: none;
  127. font-weight: 600;
  128. display: block;
  129. min-height: 3em;
  130. background-position: center;
  131. background-repeat: no-repeat;
  132. background-size: contain; }
  133. #thematique-anchor-links ul li a span {
  134. display: block; }
  135. #thematique-anchor-links ul li a.node-32 {
  136. background-image: url(../../images/menu-fond-theme-0-flat.jpg);
  137. color: #2f82ff; }
  138. #thematique-anchor-links ul li a.node-32.en_attente {
  139. color: #aaa;
  140. background-image: url(../../images/menu-fond-theme-0-flat-nb.jpg);
  141. cursor: default; }
  142. #thematique-anchor-links ul li a.node-14 {
  143. background-image: url(../../images/menu-fond-theme-1-flat.jpg);
  144. color: #ff0000; }
  145. #thematique-anchor-links ul li a.node-14.en_attente {
  146. color: #aaa;
  147. background-image: url(../../images/menu-fond-theme-1-flat-nb.jpg);
  148. cursor: default; }
  149. #thematique-anchor-links ul li a.node-38 {
  150. background-image: url(../../images/menu-fond-theme-2-flat.jpg);
  151. color: #88aa00; }
  152. #thematique-anchor-links ul li a.node-38.en_attente {
  153. color: #aaa;
  154. background-image: url(../../images/menu-fond-theme-2-flat-nb.jpg);
  155. cursor: default; }
  156. #thematique-anchor-links ul li a.node-3 {
  157. background-image: url(../../images/menu-fond-theme-3-flat.jpg);
  158. color: #ff6600; }
  159. #thematique-anchor-links ul li a.node-3.en_attente {
  160. color: #aaa;
  161. background-image: url(../../images/menu-fond-theme-3-flat-nb.jpg);
  162. cursor: default; }
  163. #thematique-anchor-links ul li a.node-20 {
  164. background-image: url(../../images/menu-fond-theme-4-flat.jpg);
  165. color: #ff2ad4; }
  166. #thematique-anchor-links ul li a.node-20.en_attente {
  167. color: #aaa;
  168. background-image: url(../../images/menu-fond-theme-4-flat-nb.jpg);
  169. cursor: default; }
  170. #thematique-anchor-links ul li a.node-26 {
  171. background-image: url(../../images/menu-fond-theme-5-flat.jpg);
  172. color: #8800aa; }
  173. #thematique-anchor-links ul li a.node-26.en_attente {
  174. color: #aaa;
  175. background-image: url(../../images/menu-fond-theme-5-flat-nb.jpg);
  176. cursor: default; }
  177. .node-thematique {
  178. min-height: 766px;
  179. margin-bottom: 10em;
  180. position: relative; }
  181. .node-thematique::before {
  182. position: absolute;
  183. content: " ";
  184. z-index: -1;
  185. background-position: center;
  186. background-repeat: no-repeat;
  187. background-size: cover;
  188. width: 100%;
  189. height: 100%;
  190. top: 0;
  191. left: 0; }
  192. @media only screen and (min-width: 62.5625em) {
  193. .node-thematique::before {
  194. background-size: contain;
  195. width: 110%;
  196. height: 110%;
  197. top: -5%;
  198. left: -5%; } }
  199. .node-thematique.node-32::before {
  200. background-image: url(../../images/fond-theme-0-flat.png); }
  201. .node-thematique.node-32.en_attente::before {
  202. background-image: url(../../images/fond-theme-0-flat-nb.jpg); }
  203. .node-thematique.node-32.en_attente > h2,
  204. .node-thematique.node-32.en_attente .group-video .field-name-field-description h3,
  205. .node-thematique.node-32.en_attente .group-description .field-name-field-ecouter,
  206. .node-thematique.node-32.en_attente .node-documentair .field-name-field-doc,
  207. .node-thematique.node-32.en_attente .node-documentair .field-name-title-field,
  208. .node-thematique.node-32.en_attente .field-name-field-episodes .field-label,
  209. .node-thematique.node-32.en_attente .node-episode .field-name-title-field {
  210. color: #aaa; }
  211. .node-thematique.node-32:not(.en_attente) > h2,
  212. .node-thematique.node-32:not(.en_attente) .group-video .field-name-field-description h3,
  213. .node-thematique.node-32:not(.en_attente) .group-description .field-name-field-ecouter,
  214. .node-thematique.node-32:not(.en_attente) .node-documentair .field-name-field-doc,
  215. .node-thematique.node-32:not(.en_attente) .node-documentair .field-name-title-field,
  216. .node-thematique.node-32:not(.en_attente) .field-name-field-episodes .field-label,
  217. .node-thematique.node-32:not(.en_attente) .node-episode .field-name-title-field {
  218. color: #2f82ff; }
  219. .node-thematique.node-14::before {
  220. background-image: url(../../images/fond-theme-1-flat.png); }
  221. .node-thematique.node-14.en_attente::before {
  222. background-image: url(../../images/fond-theme-1-flat-nb.jpg); }
  223. .node-thematique.node-14.en_attente > h2,
  224. .node-thematique.node-14.en_attente .group-video .field-name-field-description h3,
  225. .node-thematique.node-14.en_attente .group-description .field-name-field-ecouter,
  226. .node-thematique.node-14.en_attente .node-documentair .field-name-field-doc,
  227. .node-thematique.node-14.en_attente .node-documentair .field-name-title-field,
  228. .node-thematique.node-14.en_attente .field-name-field-episodes .field-label,
  229. .node-thematique.node-14.en_attente .node-episode .field-name-title-field {
  230. color: #aaa; }
  231. .node-thematique.node-14:not(.en_attente) > h2,
  232. .node-thematique.node-14:not(.en_attente) .group-video .field-name-field-description h3,
  233. .node-thematique.node-14:not(.en_attente) .group-description .field-name-field-ecouter,
  234. .node-thematique.node-14:not(.en_attente) .node-documentair .field-name-field-doc,
  235. .node-thematique.node-14:not(.en_attente) .node-documentair .field-name-title-field,
  236. .node-thematique.node-14:not(.en_attente) .field-name-field-episodes .field-label,
  237. .node-thematique.node-14:not(.en_attente) .node-episode .field-name-title-field {
  238. color: #ff0000; }
  239. .node-thematique.node-38::before {
  240. background-image: url(../../images/fond-theme-2-flat.png); }
  241. .node-thematique.node-38.en_attente::before {
  242. background-image: url(../../images/fond-theme-2-flat-nb.jpg); }
  243. .node-thematique.node-38.en_attente > h2,
  244. .node-thematique.node-38.en_attente .group-video .field-name-field-description h3,
  245. .node-thematique.node-38.en_attente .group-description .field-name-field-ecouter,
  246. .node-thematique.node-38.en_attente .node-documentair .field-name-field-doc,
  247. .node-thematique.node-38.en_attente .node-documentair .field-name-title-field,
  248. .node-thematique.node-38.en_attente .field-name-field-episodes .field-label,
  249. .node-thematique.node-38.en_attente .node-episode .field-name-title-field {
  250. color: #aaa; }
  251. .node-thematique.node-38:not(.en_attente) > h2,
  252. .node-thematique.node-38:not(.en_attente) .group-video .field-name-field-description h3,
  253. .node-thematique.node-38:not(.en_attente) .group-description .field-name-field-ecouter,
  254. .node-thematique.node-38:not(.en_attente) .node-documentair .field-name-field-doc,
  255. .node-thematique.node-38:not(.en_attente) .node-documentair .field-name-title-field,
  256. .node-thematique.node-38:not(.en_attente) .field-name-field-episodes .field-label,
  257. .node-thematique.node-38:not(.en_attente) .node-episode .field-name-title-field {
  258. color: #88aa00; }
  259. .node-thematique.node-3::before {
  260. background-image: url(../../images/fond-theme-3-flat.png); }
  261. .node-thematique.node-3.en_attente::before {
  262. background-image: url(../../images/fond-theme-3-flat-nb.jpg); }
  263. .node-thematique.node-3.en_attente > h2,
  264. .node-thematique.node-3.en_attente .group-video .field-name-field-description h3,
  265. .node-thematique.node-3.en_attente .group-description .field-name-field-ecouter,
  266. .node-thematique.node-3.en_attente .node-documentair .field-name-field-doc,
  267. .node-thematique.node-3.en_attente .node-documentair .field-name-title-field,
  268. .node-thematique.node-3.en_attente .field-name-field-episodes .field-label,
  269. .node-thematique.node-3.en_attente .node-episode .field-name-title-field {
  270. color: #aaa; }
  271. .node-thematique.node-3:not(.en_attente) > h2,
  272. .node-thematique.node-3:not(.en_attente) .group-video .field-name-field-description h3,
  273. .node-thematique.node-3:not(.en_attente) .group-description .field-name-field-ecouter,
  274. .node-thematique.node-3:not(.en_attente) .node-documentair .field-name-field-doc,
  275. .node-thematique.node-3:not(.en_attente) .node-documentair .field-name-title-field,
  276. .node-thematique.node-3:not(.en_attente) .field-name-field-episodes .field-label,
  277. .node-thematique.node-3:not(.en_attente) .node-episode .field-name-title-field {
  278. color: #ff6600; }
  279. .node-thematique.node-20::before {
  280. background-image: url(../../images/fond-theme-4-flat.png); }
  281. .node-thematique.node-20.en_attente::before {
  282. background-image: url(../../images/fond-theme-4-flat-nb.jpg); }
  283. .node-thematique.node-20.en_attente > h2,
  284. .node-thematique.node-20.en_attente .group-video .field-name-field-description h3,
  285. .node-thematique.node-20.en_attente .group-description .field-name-field-ecouter,
  286. .node-thematique.node-20.en_attente .node-documentair .field-name-field-doc,
  287. .node-thematique.node-20.en_attente .node-documentair .field-name-title-field,
  288. .node-thematique.node-20.en_attente .field-name-field-episodes .field-label,
  289. .node-thematique.node-20.en_attente .node-episode .field-name-title-field {
  290. color: #aaa; }
  291. .node-thematique.node-20:not(.en_attente) > h2,
  292. .node-thematique.node-20:not(.en_attente) .group-video .field-name-field-description h3,
  293. .node-thematique.node-20:not(.en_attente) .group-description .field-name-field-ecouter,
  294. .node-thematique.node-20:not(.en_attente) .node-documentair .field-name-field-doc,
  295. .node-thematique.node-20:not(.en_attente) .node-documentair .field-name-title-field,
  296. .node-thematique.node-20:not(.en_attente) .field-name-field-episodes .field-label,
  297. .node-thematique.node-20:not(.en_attente) .node-episode .field-name-title-field {
  298. color: #ff2ad4; }
  299. .node-thematique.node-26::before {
  300. background-image: url(../../images/fond-theme-5-flat.png); }
  301. .node-thematique.node-26.en_attente::before {
  302. background-image: url(../../images/fond-theme-5-flat-nb.jpg); }
  303. .node-thematique.node-26.en_attente > h2,
  304. .node-thematique.node-26.en_attente .group-video .field-name-field-description h3,
  305. .node-thematique.node-26.en_attente .group-description .field-name-field-ecouter,
  306. .node-thematique.node-26.en_attente .node-documentair .field-name-field-doc,
  307. .node-thematique.node-26.en_attente .node-documentair .field-name-title-field,
  308. .node-thematique.node-26.en_attente .field-name-field-episodes .field-label,
  309. .node-thematique.node-26.en_attente .node-episode .field-name-title-field {
  310. color: #aaa; }
  311. .node-thematique.node-26:not(.en_attente) > h2,
  312. .node-thematique.node-26:not(.en_attente) .group-video .field-name-field-description h3,
  313. .node-thematique.node-26:not(.en_attente) .group-description .field-name-field-ecouter,
  314. .node-thematique.node-26:not(.en_attente) .node-documentair .field-name-field-doc,
  315. .node-thematique.node-26:not(.en_attente) .node-documentair .field-name-title-field,
  316. .node-thematique.node-26:not(.en_attente) .field-name-field-episodes .field-label,
  317. .node-thematique.node-26:not(.en_attente) .node-episode .field-name-title-field {
  318. color: #8800aa; }
  319. .node-thematique > h2 {
  320. font-size: 3em;
  321. font-weight: 400;
  322. position: relative;
  323. margin: 2em 0 0;
  324. padding: 0 2em 0 0; }
  325. @media only screen and (min-width: 62.5625em) {
  326. .node-thematique > h2 {
  327. padding: 0; } }
  328. .node-thematique > h2 span {
  329. position: absolute;
  330. top: -170px; }
  331. .node-thematique .content {
  332. letter-spacing: -0.25em; }
  333. .node-thematique .content > * {
  334. letter-spacing: normal; }
  335. .node-thematique .content article.main {
  336. overflow: hidden; }
  337. @media only screen and (min-width: 62.5625em) {
  338. .node-thematique .content article.main {
  339. display: inline-block;
  340. vertical-align: top;
  341. width: 69.5%; } }
  342. .node-thematique .content article.main .field-name-body {
  343. position: relative;
  344. z-index: 3; }
  345. .node-thematique .content article.main .field-name-body > * {
  346. padding: 0 1em 0 0; }
  347. .node-thematique .content article.main .field-name-body .summary {
  348. position: relative;
  349. background-color: rgba(255, 255, 255, 0.7);
  350. transition: background-color 0.5 ease-in-out; }
  351. @media only screen and (min-width: 62.5625em) {
  352. .node-thematique .content article.main .field-name-body .summary {
  353. height: 7em;
  354. overflow: hidden; } }
  355. .node-thematique .content article.main .field-name-body .summary p {
  356. font-size: 1.1em;
  357. padding: 0.5em 0.5em 0.5em 0;
  358. margin: 0;
  359. font-weight: 500; }
  360. .node-thematique .content article.main .field-name-body .value {
  361. display: none;
  362. position: absolute;
  363. height: 1px;
  364. margin-bottom: 0;
  365. transition: height 0.5s ease-in-out;
  366. background-color: #fff;
  367. overflow: hidden; }
  368. @media only screen and (min-width: 62.5625em) {
  369. .node-thematique .content article.main .field-name-body .value {
  370. display: block; } }
  371. .node-thematique .content article.main .field-name-body .value p {
  372. font-size: 1em;
  373. padding: 1em 1em 0;
  374. line-height: 1.3;
  375. margin: 0;
  376. background-color: #fff; }
  377. @media only screen and (min-width: 62.5625em) {
  378. .node-thematique .content article.main .field-name-body:hover .summary {
  379. background-color: #fff; }
  380. .node-thematique .content article.main .field-name-body:hover .value {
  381. height: 700px; } }
  382. .node-thematique .content article.main .group-video {
  383. position: relative; }
  384. .node-thematique .content article.main .group-video .field-name-field-emvideo img {
  385. max-width: 100%;
  386. height: auto; }
  387. .node-thematique .content article.main .group-video .field-name-field-emvideo a {
  388. display: block;
  389. line-height: 0; }
  390. .node-thematique .content article.main .group-video .group-description {
  391. cursor: pointer;
  392. pointer-events: none;
  393. position: absolute;
  394. z-index: 2;
  395. top: 0;
  396. left: 0;
  397. width: 100%;
  398. height: 100%; }
  399. .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
  400. font-size: 1em;
  401. font-weight: 600;
  402. padding: 0.2em 0.4em;
  403. background-color: rgba(255, 255, 255, 0.9);
  404. display: inline-block;
  405. margin: 15px; }
  406. .node-thematique .content article.main .group-video .group-description .field-name-field-description {
  407. position: absolute;
  408. top: 0;
  409. left: 0;
  410. box-sizing: border-box;
  411. width: 80%;
  412. height: 70%;
  413. margin: 10%;
  414. padding: 5%;
  415. opacity: 0;
  416. background-color: rgba(255, 255, 255, 0.9);
  417. transition: opacity 0.3s ease-in-out; }
  418. .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 {
  419. font-weight: 500;
  420. font-size: 2em;
  421. margin: 0; }
  422. .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
  423. opacity: 1; }
  424. .node-thematique .content aside.right {
  425. margin-top: 1.2em; }
  426. @media only screen and (min-width: 62.5625em) {
  427. .node-thematique .content aside.right {
  428. display: inline-block;
  429. vertical-align: top;
  430. width: 30.5%;
  431. margin-top: 0; } }
  432. @media only screen and (min-width: 62.5625em) {
  433. .node-thematique .content aside.right .field-name-field-eclairages {
  434. padding-left: 1em; } }
  435. .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) {
  436. padding-bottom: 1.2em; }
  437. .node-thematique .content aside.right .node-documentair {
  438. min-height: 150px;
  439. background-color: #fff; }
  440. .node-thematique .content aside.right .node-documentair .content {
  441. position: relative; }
  442. .node-thematique .content aside.right .node-documentair .content .group-txt {
  443. cursor: pointer;
  444. pointer-events: none;
  445. box-sizing: border-box;
  446. position: absolute;
  447. z-index: 2;
  448. overflow: hidden;
  449. top: 0;
  450. left: 0;
  451. width: 90%;
  452. height: 80%;
  453. margin: 15px; }
  454. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
  455. font-size: 1em;
  456. font-weight: 600;
  457. padding: 0.2em 0.4em;
  458. background-color: rgba(255, 255, 255, 0.9);
  459. display: inline-block;
  460. z-index: 5;
  461. transition: background-color 0.3s ease-in-out; }
  462. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
  463. position: absolute;
  464. z-index: -1;
  465. top: 0;
  466. left: 0;
  467. width: 100%;
  468. font-size: 1.5em;
  469. font-weight: 500;
  470. padding: 30px 7px 10px;
  471. background-color: rgba(255, 255, 255, 0.9);
  472. opacity: 0;
  473. transition: opacity 0.3s ease-in-out; }
  474. .node-thematique .content aside.right .node-documentair .content .group-video img {
  475. width: 100%;
  476. height: auto; }
  477. .node-thematique .content aside.right .node-documentair .content .group-video a {
  478. display: block;
  479. line-height: 0; }
  480. .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc {
  481. background-color: transparent; }
  482. .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
  483. opacity: 1; }
  484. .node-thematique .content aside.right .node-documentair.en_attente > .content {
  485. position: relative; }
  486. .node-thematique .content aside.right .node-documentair.en_attente > .content::before {
  487. position: absolute;
  488. top: 0;
  489. left: 0;
  490. width: 100%;
  491. height: 100%;
  492. content: " ";
  493. z-index: 10;
  494. background-color: #fff;
  495. opacity: 0.8; }
  496. .node-thematique .content aside.bottom {
  497. padding-top: 1.2em; }
  498. @media only screen and (min-width: 62.5625em) {
  499. .node-thematique .content aside.bottom {
  500. padding-top: 0.6em; } }
  501. .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
  502. font-size: 1em;
  503. font-weight: 600;
  504. padding: 0.2em 0.4em;
  505. background-color: rgba(255, 255, 255, 0.9);
  506. display: inline-block;
  507. margin-bottom: 0.3em; }
  508. @media only screen and (min-width: 62.5625em) {
  509. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
  510. display: -ms-flexbox;
  511. display: flex;
  512. -ms-flex-flow: row nowrap;
  513. flex-flow: row nowrap;
  514. -ms-flex-pack: justify;
  515. justify-content: space-between; } }
  516. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
  517. display: block;
  518. background-color: #fff; }
  519. @media only screen and (min-width: 62.5625em) {
  520. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
  521. width: 19%; } }
  522. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
  523. position: relative; }
  524. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
  525. cursor: pointer;
  526. pointer-events: none;
  527. box-sizing: border-box;
  528. position: absolute;
  529. z-index: 2;
  530. overflow: hidden;
  531. top: 0;
  532. left: 0;
  533. width: 90%;
  534. height: 80%;
  535. margin: 5%;
  536. padding: 5%;
  537. background-color: rgba(255, 255, 255, 0.9);
  538. opacity: 1;
  539. transition: opacity,background-color 0.3s ease-in-out; }
  540. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
  541. font-size: 4em;
  542. font-weight: 800;
  543. font-style: italic;
  544. text-align: center; }
  545. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img {
  546. width: 100%;
  547. height: auto; }
  548. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {
  549. display: block;
  550. line-height: 0; }
  551. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt {
  552. opacity: 0.9;
  553. background-color: rgba(255, 255, 255, 0.3); }
  554. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content {
  555. position: relative; }
  556. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before {
  557. position: absolute;
  558. top: 0;
  559. left: 0;
  560. width: 100%;
  561. height: 100%;
  562. content: " ";
  563. z-index: 10;
  564. background-color: #fff;
  565. opacity: 0.8; }
  566. .node-thematique.en_attente .content > .main {
  567. position: relative; }
  568. .node-thematique.en_attente .content > .main::before {
  569. position: absolute;
  570. top: 0;
  571. left: 0;
  572. width: 100%;
  573. height: 100%;
  574. content: " ";
  575. z-index: 10;
  576. background-color: #fff;
  577. opacity: 0.8; }
  578. #DOMWindow .embedded-video, #DOMWindow .player, #DOMWindow iframe {
  579. width: 100%;
  580. height: 100%; }
  581. .page-title {
  582. font-size: 3em;
  583. font-weight: 400;
  584. text-transform: capitalize; }
  585. #block-menu-menu-footer-menu {
  586. padding: 2em 0; }
  587. #block-menu-menu-footer-menu ul {
  588. margin: 0;
  589. padding: 0;
  590. text-align: center; }
  591. #block-menu-menu-footer-menu li {
  592. display: inline-block;
  593. list-style: none; }
  594. #block-menu-menu-footer-menu a {
  595. text-decoration: none;
  596. color: inherit; }
  597. .region-footer-bottom {
  598. text-align: center; }
  599. .region-footer-bottom .block {
  600. display: inline-block;
  601. font-size: 0.7em;
  602. margin: 2em 0; }
  603. #content {
  604. padding: 1em; }
  605. /** Messages. */
  606. div.messages {
  607. padding: 9px;
  608. margin: 0.5em 0 0;
  609. color: #036;
  610. background: #bdf;
  611. border: 1px solid #ace;
  612. border-radius: 5px; }
  613. div.warning {
  614. color: #840;
  615. background: #fe6;
  616. border-color: #ed5; }
  617. div.error {
  618. color: #fff;
  619. background: #e63;
  620. border-color: #d52; }
  621. div.error p.error {
  622. color: #333; }
  623. div.status {
  624. color: #360;
  625. background: #cf8;
  626. border-color: #be7; }
  627. /** Tab navigation */
  628. ul.primary, .views-admin-links ul {
  629. font: 13px/1.231 sans-serif;
  630. *font-size: small;
  631. border-collapse: collapse;
  632. padding: 0 0 0 1em;
  633. /* LTR */
  634. white-space: nowrap;
  635. list-style: none;
  636. margin: 5px;
  637. height: auto;
  638. line-height: normal; }
  639. ul.primary li, .views-admin-links li {
  640. display: inline; }
  641. ul.primary li a, .views-admin-links li a {
  642. border-width: 1px;
  643. border-style: solid solid none solid;
  644. height: auto;
  645. margin-right: 0.5em;
  646. /* LTR */
  647. padding: 0 1em;
  648. text-decoration: none;
  649. border-top-left-radius: 5px;
  650. border-top-right-radius: 5px; }
  651. /** Form */
  652. #node-form .form-region-main {
  653. border-right: 1px solid #BFBFBF;
  654. padding-right: 10px;
  655. width: 68%; }
  656. #node-form .form-region-main label {
  657. float: left;
  658. min-width: 25%; }
  659. #node-form .form-region-main input.form-text {
  660. width: 40%; }
  661. #node-form .form-region-right {
  662. padding-left: 5px; }
  663. #node-form .form-region-right label {
  664. float: left;
  665. min-width: 35%; }
  666. #node-form .form-region-right input.form-text {
  667. width: 60%; }
  668. #node-form .form-region-main label.option, #node-form .form-region-right label.option {
  669. float: none; }
  670. form:not(#views-ui-config-item-form) .form-item {
  671. position: relative;
  672. /* padding:9px;*/ }
  673. form:not(#views-ui-config-item-form) .form-item .description {
  674. position: absolute;
  675. bottom: 140%;
  676. /* right:-15px;*/
  677. z-index: 5;
  678. left: 50%;
  679. color: #1A1A1A;
  680. line-height: 1.1;
  681. background: url(../images/popup.png) 50% 100% no-repeat;
  682. width: 240px;
  683. margin: 0px 0px -15px;
  684. padding: 9px 10px 20px;
  685. display: none;
  686. border-top: 1px solid #9F9F9F; }
  687. form:not(#views-ui-config-item-form) .form-item:hover {
  688. z-index: 1;
  689. height: auto;
  690. /* Fix for flicker in IE7 */ }
  691. form:not(#views-ui-config-item-form) .form-item:hover > .description {
  692. display: block; }
  693. fieldset {
  694. border: 1px solid #D4D4D4;
  695. padding: 10px;
  696. margin-bottom: 1em;
  697. border-radius: 5px; }
  698. fieldset legend {
  699. font-size: 1.6em; }
  700. input.form-text {
  701. max-width: 95%; }
  702. /** TABLE */
  703. table {
  704. width: 100%;
  705. border-radius: 5px; }
  706. table thead th {
  707. background-color: #CCC;
  708. padding: 0.5em 1em;
  709. text-align: left; }
  710. table tbody tr.even, table tbody tr.odd {
  711. border-bottom: 0 solid #CCCCCC;
  712. padding: 0.1em 0.6em; }
  713. table tbody tr.even {
  714. background-color: #EEE; }
  715. table tbody tr.odd {
  716. background-color: #E5E5E5; }
  717. table tbody td {
  718. padding: 0.5em 1em;
  719. text-align: left; }
  720. td.active {
  721. background-color: transparent; }
  722. #tasks .tabs {
  723. border: none;
  724. padding: 0; }
  725. #tasks .tabs a {
  726. border: none;
  727. border-radius: 3px;
  728. background-color: #eee;
  729. padding: 0.4em;
  730. color: #000;
  731. margin: 0 1em 0 0; }
  732. #tasks .tabs a.active {
  733. background-color: #999; }