style.css 24 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268
  1. @font-face {
  2. font-family: Universalis ADF Std, sans-serif;
  3. src: url('asset/fonts/UniversalisADFStd-Regular.otf') format('otf'),
  4. url('asset/fonts/UniversalisADFStd-Regular.woff') format('woff');
  5. font-family: Millimetre, sans-serif;
  6. src: url('asset/fonts/Millimetre-Bold.otf') format('otf'),
  7. url('asset/fonts/Millimetre-Regular.otf') format('otf');
  8. }
  9. *{
  10. box-sizing: border-box;
  11. }
  12. /*START PARALAX*/
  13. .paralax{
  14. z-index: -1;
  15. position: absolute;
  16. width: 50%;
  17. }
  18. #section_proch .paralax{
  19. left: -20%;
  20. }
  21. .section_accueil .paralax{
  22. left: 980px;
  23. top: 1000px;
  24. }
  25. .agenda .paralax{
  26. z-index: -1;
  27. width: 100%;
  28. top: 340px;
  29. left: 315px;
  30. }
  31. .les-projets .paralax{
  32. z-index: -1;
  33. top: 420px;
  34. left: 940px;
  35. }
  36. .la-collecte .paralax{
  37. z-index: -1;
  38. width: 80%;
  39. top: -230px;
  40. left: 580px;
  41. }
  42. .la-benevole-zone .paralax{
  43. z-index: -1;
  44. width: 80%;
  45. top: -685px;
  46. left: 580px;
  47. }
  48. .privatiser-lespace .paralax{
  49. z-index: -1;
  50. width: 80%;
  51. top: -1018px;
  52. left: 580px;
  53. }
  54. .privacy-policy .paralax{
  55. z-index: -1;
  56. width: 70%;
  57. top: 255px;
  58. left: 515px;
  59. }
  60. /*END PARALAX*/
  61. body {
  62. font-size: 16px;
  63. font-family: Universalis ADF Std, sans-serif;
  64. padding: 0!important;
  65. }
  66. h1, h2, h3, h5{
  67. font-family: Millimetre, sans-serif;
  68. }
  69. h1, h5, h6{
  70. text-transform: uppercase;
  71. }
  72. img{
  73. width: 100%;
  74. height: 100%;
  75. }
  76. ul{
  77. padding:0;
  78. }
  79. li ,ul ,ol {
  80. list-style-type:none;
  81. }
  82. a, a:hover{
  83. color: black;
  84. text-decoration: none;
  85. }
  86. /* START HEADER */
  87. header{
  88. width: 100%;
  89. position: fixed;
  90. z-index: 999;
  91. top: 0;
  92. left: 0;
  93. pointer-events: none;
  94. }
  95. header > .nav-wrapper{
  96. height: fit-content;
  97. }
  98. /* START LOGO */
  99. .logoLamine {
  100. width : 150px;
  101. height: 150px;
  102. pointer-events: auto;
  103. }
  104. .logoLamine a{
  105. display: block;
  106. width: 100%;
  107. height: 100%;
  108. }
  109. .logoLamine img{
  110. object-fit: cover;
  111. }
  112. #lumiR_logo {
  113. z-index: 1;
  114. position: absolute;
  115. left: 68px;
  116. top: 60px;
  117. width: 68px;
  118. height: 68px;
  119. background-color: #ffcc00ff;
  120. border-radius: 68px;
  121. opacity: 0.3;
  122. }
  123. .accueil #lumiR_logo, .agenda #lumiR_logo, .association #lumiR_logo, .privacy-policy #lumiR_logo{
  124. background-color: #ffcc00ff;
  125. }
  126. .les-projets #lumiR_logo {
  127. background-color: #ff0000ff;
  128. }
  129. .les-temps-forts #lumiR_logo {
  130. background-color: #009ee0ff;
  131. }
  132. .la-collecte #lumiR_logo {
  133. background-color: #ff56ffff;
  134. }
  135. .la-benevole-zone #lumiR_logo {
  136. background-color: #5353e1ff;
  137. }
  138. .privatiser-lespace #lumiR_logo {
  139. background-color: #26e800ff;
  140. }
  141. #fond_logo{
  142. z-index: -1;
  143. position: absolute;
  144. left: -25px;
  145. top: -25px;
  146. width: 200px;
  147. height: 200px;
  148. background-color: white;
  149. border-radius: 200px;
  150. transform: scale(1);
  151. transition: all 0.3s ease;
  152. }
  153. .logoLamine:hover #fond_logo{
  154. transform: scale(1.1);
  155. transition: all 0.3s ease;
  156. }
  157. /* END LOGO */
  158. /* START RS */
  159. .rs{
  160. /* padding-top: 10px; */
  161. height: fit-content;
  162. pointer-events: auto;
  163. }
  164. .rs > div {
  165. width: 30px;
  166. height: 30px;
  167. object-fit: cover;
  168. margin-right: 15px;
  169. }
  170. /* END RS */
  171. /* START NAV */
  172. /* END NAV */
  173. /* START BURGER */
  174. .burger{
  175. /* padding-top: 10px; */
  176. height: fit-content;
  177. pointer-events: auto;
  178. }
  179. .fond_burger{
  180. background-image: url('../images/form_burger.svg');
  181. background-position: center; /* Center the image */
  182. background-repeat: no-repeat; /* Do not repeat the image */
  183. background-size: contain;
  184. transform: rotate(0deg);
  185. }
  186. .fond_burger:hover{
  187. transform: rotate(10deg);
  188. }
  189. .nav-main{
  190. display: none;
  191. position: fixed;
  192. right: 0;
  193. top: 120px;
  194. width: 280px;
  195. height: 300px;
  196. background: white;
  197. border: 4px solid black;
  198. transition: all 0.2s ease;
  199. }
  200. .nav-main.is-active{
  201. display: block;
  202. pointer-events: auto;
  203. }
  204. #fl_menu{
  205. position:absolute;
  206. z-index: 9999;
  207. width: 30px;
  208. height: auto;
  209. right: 0;
  210. }
  211. .menu-item {
  212. font-family: Millimetre, sans-serif;
  213. text-transform: uppercase;
  214. text-align: left;
  215. pointer-events: auto;
  216. border-bottom: 4px solid black;
  217. }
  218. .menu-item a {
  219. background-color: pink;
  220. width: 100%;
  221. display: block;
  222. }
  223. #nav-main > ul > li > ul {display: none;text-transform: lowercase; border-bottom: none;}
  224. #nav-main > ul > li:first-child > a::after{
  225. content: "";
  226. background-image: url('../images/fleche_menu.svg');
  227. background-repeat: no-repeat;
  228. background-position: center;
  229. display: inline-block;
  230. width: 20px;
  231. height: 15px;
  232. margin-left: 10px;
  233. }
  234. #nav-main > ul > li:first-child:hover > ul {display: block; background-color: #BDBDBD;transition: all 0.2s ease;}
  235. #nav-main > ul > li:first-child:hover{background-color: #424242; color:white;border-bottom: none;}
  236. .menu-item a:hover {
  237. display: block;
  238. width: 100%;
  239. height: 100%;
  240. background-color: black;
  241. color: white;
  242. transition: all 0.2s ease;
  243. }
  244. /* END BURGER */
  245. /* END HEADER */
  246. /* START BODY */
  247. body > .content-wrapper{
  248. margin-top: 200px;
  249. }
  250. /* END BODY */
  251. /* START BUTTON */
  252. .section_accueil .redirection_page{
  253. margin: 10px auto;
  254. padding: 3px 10px;
  255. }
  256. .section_accueil .tout_voir{
  257. margin: 30px auto;
  258. padding: 3px 10px;
  259. }
  260. .btn, #bouton_asso, #bouton_contact {
  261. display: block;
  262. cursor: default!important;
  263. margin: auto;
  264. transform: scale(1) rotate(0deg);
  265. transition: transform 0.3s ease;
  266. }
  267. #bouton_contact {
  268. margin-top: 20px;
  269. }
  270. .btn:hover, #bouton_asso:hover, #bouton_contact:hover{
  271. transform: scale(1.05) rotate(-5deg);
  272. transition: all 0.3s ease;
  273. }
  274. .btn a{
  275. padding: 7px 10px;
  276. background-color: white;
  277. border: 4px solid black;
  278. }
  279. .add_asso{
  280. display: block;
  281. cursor: default!important;
  282. margin: 30px auto 30px auto;;
  283. }
  284. .add_asso a {
  285. padding: 7px 10px;
  286. background-color: white;
  287. border: 4px solid black;
  288. font-weight: bold;
  289. }
  290. .add_asso a:hover {
  291. color: white;
  292. background-color: black;
  293. }
  294. .flickity-button {
  295. background: transparent;
  296. }
  297. .flickity-prev-next-button {
  298. width: 100px;
  299. height: 100px;
  300. }
  301. .flickity-button-icon {
  302. fill: white;
  303. }
  304. .flickity-button-icon:hover {
  305. fill: black;
  306. }
  307. .flickity-prev-next-button:hover {
  308. background: transparent;
  309. }
  310. footer .flickity-prev-next-button:disabled {
  311. display: none;
  312. }
  313. footer .flickity-prev-next-button{
  314. width: 50px;
  315. height: 50px;
  316. }
  317. footer .flickity-button-icon {
  318. fill: grey;
  319. left: 158%!important;
  320. }
  321. /* END BUTTON */
  322. /* START PAGE HOME */
  323. .section_accueil {
  324. position: relative;
  325. padding: 100px 0;
  326. }
  327. .section_accueil .titre{
  328. white-space: nowrap;
  329. }
  330. .section_accueil#section_proch .titre{
  331. border-color: #ffcc00ff;
  332. }
  333. .section_accueil#section_asso .titre,
  334. .section_accueil#section_asso .content_asso {
  335. border-color: #ffcc00ff;
  336. }
  337. .section_accueil#section_projets .titre,
  338. .section_accueil#section_projets .wrap_content {
  339. border-color: #f51212ff;
  340. background-color: white;
  341. }
  342. .section_accueil#section_projets .wrapper__content h3{
  343. color: #f51212ff;
  344. }
  345. .section_accueil#section_projets .wrap_content{
  346. height: calc(100% - 80px);
  347. }
  348. /*ajout chloe drag*/
  349. .group_drag {
  350. z-index: 9999;
  351. width: 200px;
  352. height: auto;
  353. }
  354. #drag_1 {
  355. position:absolute;
  356. top:175px;
  357. left: 645px;
  358. }
  359. #drag_2 {
  360. position:absolute;
  361. top: 265px;
  362. left: 318px;
  363. }
  364. #drag_3 {
  365. position:absolute;
  366. top:630px;
  367. left: 790px;
  368. }
  369. #drag_4 {
  370. position:absolute;
  371. top:385px;
  372. left: 616px;
  373. }
  374. #drag_5 {
  375. position:absolute;
  376. top:255px;
  377. left: 981px;
  378. }
  379. #drag_6 {
  380. position:absolute;
  381. top:280px;
  382. left: -69px;
  383. }
  384. #drag_7 {
  385. position:absolute;
  386. top:555px;
  387. left: 340px;
  388. }
  389. #drag_8 {
  390. position:absolute;
  391. top:420px;
  392. left: 945px;
  393. }
  394. #drag_9 {
  395. position:absolute;
  396. top:515px;
  397. left: 40px;
  398. }
  399. /*fin ajout chloe drag*/
  400. .section_accueil#section_tpsF .titre,
  401. .section_accueil#section_tpsF .content_asso {
  402. border-color: #009ee0ff;
  403. }
  404. .section_accueil#section_tpsF .wrapper__content h3{
  405. color: #009ee0ff;
  406. }
  407. .section_accueil#section_tpsF .colonne_section{
  408. margin-bottom: 50px;
  409. }
  410. .section_accueil#section_tpsF ._content_tpsF{
  411. min-height: 280px;
  412. }
  413. .section_accueil#section_MineVideo .titre {
  414. border-color: #009ee0ff;
  415. }
  416. /* END PAGE HOME */
  417. /* START PAGE AGENDA */
  418. .agenda .titre_page {
  419. border-color: #ffcc00ff;
  420. }
  421. .agenda .cat-list{
  422. padding: 50px 0;
  423. }
  424. .agenda .cat-list li{
  425. cursor: pointer;
  426. margin: 0 10px 20px 10px;
  427. padding: 2px 8px;
  428. border: 4px solid black;
  429. background-color: white;
  430. height: 40px;
  431. display: flex;
  432. align-items: flex-end;
  433. transition: all 0.2s ease;
  434. }
  435. .agenda .cat-list li:hover{
  436. background: black;
  437. color: white;
  438. transition: all 0.2s ease;
  439. }
  440. .cat-list {
  441. text-transform: uppercase;
  442. font-weight: bold;
  443. margin-top: 10px;
  444. }
  445. /* START END AGENDA */
  446. /* START PAGE SINGLE */
  447. .fleche {
  448. position: relative;
  449. left:-50px;
  450. top:-10px;
  451. background-image: url('../images/fleche.svg');
  452. width: 50px;
  453. height: 50px;
  454. background-size: contain;
  455. }
  456. article .header{
  457. margin-bottom: 40px;
  458. }
  459. article .titre_event{
  460. text-transform: uppercase;
  461. font-weight: bold;
  462. text-align: center;
  463. background-color: white;
  464. border: 8px solid #ffcc00ff;
  465. padding: 0.5rem 0 0.2rem 0;
  466. margin: 0!important;
  467. }
  468. .article-content .cat{
  469. text-transform: uppercase;
  470. font-weight: bold;
  471. }
  472. .article-content .data{
  473. background-color: white;
  474. border: 4px solid #ffcc00ff;
  475. padding: 1em;
  476. text-transform: uppercase;
  477. font-weight: bold;
  478. color: #ffcc00ff;
  479. }
  480. .article-content .inscription,
  481. .article-content .partager,
  482. .article-content .tarif{
  483. margin-top: 40px;
  484. }
  485. .article-content h3:not(.titre_event) {
  486. color: #ffcc00ff;
  487. margin-bottom: 0;
  488. }
  489. .article-content .texte_details{
  490. margin: 0;
  491. }
  492. .article-content .voir_event{
  493. font-weight: bold;
  494. }
  495. .article-content .partager a{
  496. display: block;
  497. width: 20px;
  498. height: 20px;
  499. margin-right: 5px;
  500. }
  501. article .__img_event img{
  502. position:relative;
  503. top: 0;
  504. width:100%;
  505. height:auto;
  506. object-fit:contain;
  507. }
  508. .other{
  509. margin-top: 200px;
  510. position: relative;
  511. }
  512. .other .header_other{
  513. position: absolute;
  514. top: 0;
  515. transform: translate(-50% ,-150%);
  516. left: 0;
  517. }
  518. .voir_aussi {
  519. text-transform: uppercase;
  520. font-weight: bold;
  521. background-color: white;
  522. border: 8px solid #ffcc00ff;
  523. transform: rotate(-10deg);
  524. padding: 0.5rem;
  525. }
  526. .cat p{
  527. margin:0;
  528. }
  529. .wrapper__content {
  530. margin-top: 20px;
  531. }
  532. /* END PAGE SINGLE */
  533. /* START PAGE LA COLLECTE */
  534. body.la-collecte .titre_page {
  535. border-color: #ff56ffff;
  536. }
  537. body.la-collecte .__header h3{
  538. color: #ff56ffff;
  539. }
  540. .sider_left_form .acf-field .acf-label label{
  541. display: none!important;
  542. }
  543. .sider_left_form .acf-fields > .acf-field{
  544. border-top: 0;
  545. }
  546. .sider_left_form input{
  547. border: 0px;
  548. border-bottom: 1px solid black;
  549. }
  550. .sider_left_form{
  551. padding: 0 1rem;
  552. border: 8px solid #ff56ffff;
  553. background-color: white;
  554. }
  555. .sider_left_form .acf-form-submit{
  556. padding-top: 0;
  557. }
  558. .sider_left_form .af-submit-button{
  559. margin: 0 auto;
  560. }
  561. .sidebar_left .__content,
  562. .content_zone {
  563. border: 8px solid blue;
  564. background-color: white;
  565. padding: 1em;
  566. }
  567. /* END PAGE LA COLLECTE */
  568. /* START PAGE BENEVOLE */
  569. body.la-benevole-zone .titre_page {
  570. border-color: #5353e1ff;
  571. }
  572. body.la-benevole-zone .__header h3{
  573. color: #5353e1ff;
  574. }
  575. body.la-benevole-zone .__content {
  576. border-color: #5353e1ff;
  577. }
  578. .la-benevole-zone .__bouttons{
  579. text-align: center;
  580. width: max-content;
  581. margin: 30px auto 0 auto;
  582. }
  583. .la-benevole-zone .__bouttons > div{
  584. border: 4px solid #5353e1ff;
  585. background-color: white;
  586. margin: 10px auto;
  587. padding: 0 10px;
  588. font-weight: bold;
  589. }
  590. /* END PAGE BENEVOLE */
  591. /* START PAGE projets */
  592. body.les-projets .titre_page {
  593. border-color: #ff0000ff;
  594. }
  595. body.les-projets .header h3{
  596. color: #ff0000ff;
  597. }
  598. body.les-projets .content_zone {
  599. border-color: #ff0000ff;
  600. }
  601. body.les-projets .title {
  602. color: #ff0000ff;
  603. }
  604. body.les-projets section#content .wrapper section{
  605. margin: 100px auto;
  606. }
  607. .projet .img {
  608. margin: 30px 0;
  609. }
  610. ._pjt{
  611. margin-top: 8%;
  612. /* RETIRE LES % */
  613. }
  614. /* END PAGE projets */
  615. /* START PAGE ASSOCIATION */
  616. body.association .titre_page {
  617. border-color: #ffcc00ff;
  618. }
  619. body.association .__header h3{
  620. color: #ffcc00ff;
  621. }
  622. body.association .__content {
  623. border-color: #ffcc00ff;
  624. }
  625. .association .__bouttons{
  626. text-align: center;
  627. width: max-content;
  628. margin: 30px auto 0 auto;
  629. }
  630. .association .__bouttons > div{
  631. border: 4px solid #ffcc00ff;
  632. background-color: white;
  633. margin: 10px auto;
  634. padding: 0 10px;
  635. font-weight: bold;
  636. }
  637. .tableau_engagements{
  638. margin-top: 100px;
  639. }
  640. .tableau_engagements > div:not(.gutter-sizer) {
  641. margin-bottom: 10px;
  642. border: 4px solid #ffcc00ff;
  643. background-color: white;
  644. padding: 10px;
  645. width: calc(50% - 10px)!important;
  646. }
  647. .gutter-sizer {
  648. width: 10px;
  649. }
  650. /* END PAGE ASSOCIATION */
  651. /* START PAGE privatiser-lespace */
  652. body.privatiser-lespace .titre_page {
  653. border-color: #26e800ff;
  654. }
  655. body.privatiser-lespace .__header h3{
  656. color: #26e800ff;
  657. }
  658. .legendes{
  659. background-color: white;
  660. position : absolute;
  661. bottom: 20px;
  662. margin-left: 20px;
  663. border: 8px solid #26e800ff;
  664. padding: 10px;
  665. }
  666. .privatiser.__slide .img{
  667. height: 100%;
  668. }
  669. .privatiser.__slide .legendes{
  670. opacity: 0;
  671. transform: translateX(50px);
  672. transition: all 0.3s;
  673. }
  674. .privatiser.__slide .is-selected .legendes{
  675. opacity: 1;
  676. transform: translateX(0px);
  677. transition: all 1.3s;
  678. }
  679. .privatiser-lespace .__organisation,
  680. .privatiser-lespace .__organisation .orga{
  681. margin: 40px 0;
  682. }
  683. .privatiser-lespace .__organisation .title{
  684. color: #26e800ff
  685. }
  686. .privatiser-lespace .__organisation .__item{
  687. border: 8px solid #26e800ff;
  688. background-color: white;
  689. padding: 10px;
  690. }
  691. /* END PAGE privatiser-lespace */
  692. /*START PRIVACY-POLICY*/
  693. .privacy-policy .article-h1 {
  694. position: absolute;
  695. top: 100px;
  696. left: 150px;
  697. text-transform: uppercase;
  698. font-weight: bold;
  699. text-align: center;
  700. align-items: center;
  701. border: 8px solid #00FFFF;
  702. transform: rotate(-10deg);
  703. padding: 0.5rem;
  704. background-color: white;
  705. }
  706. .privacy-policy h2, .privacy-policy h3{
  707. font-family: Universalis ADF Std, sans-serif;
  708. color: black!important;
  709. font-size: 1em;
  710. text-transform: uppercase;
  711. font-weight: bold;
  712. }
  713. .privacy-policy .content-wrapper {
  714. margin-top: 300px;
  715. }
  716. .privacy-policy .article-body {
  717. column-count: 2;
  718. }
  719. /*END PRIVACY-POLICY*/
  720. .titre_page, .titre{
  721. position: absolute;
  722. top: -100px;
  723. left: -70px;
  724. text-transform: uppercase;
  725. font-weight: bold;
  726. text-align: center;
  727. align-items: center;
  728. border: 8px solid blue;
  729. background-color: white;
  730. transform: rotate(-10deg);
  731. padding: 0.5rem;
  732. background-color: white;
  733. }
  734. .titre_1{
  735. margin-top:1em;
  736. }
  737. .next_edition{
  738. font-style: italic;
  739. text-align: center;
  740. color:#009ee0ff;
  741. text-transform: uppercase;
  742. }
  743. .title {
  744. text-align: center;
  745. text-transform: uppercase;
  746. }
  747. /*start sections page accueil*/
  748. /* START KEVIN */
  749. /*START SECTION PROCHAINEMENT*/
  750. .coming_soon{
  751. width: 100%;
  752. }
  753. .coming_soon .thumbnails, .other-posts .thumbnails, .item.thumbnails {
  754. margin-top: 30px;
  755. transform: scale(1);
  756. transition: transform 0.3s ease;
  757. }
  758. .coming_soon .thumbnails:hover, .other-posts .thumbnails:hover, .item.thumbnails:hover {
  759. transform: scale(1.05);
  760. transition: all 0.3s ease;
  761. }
  762. /* ALL thumbnails */
  763. .thumbnails .__img{
  764. height: 300px;
  765. }
  766. .thumbnails .__img img{
  767. width: 100%;
  768. height: 100%;
  769. object-fit: cover;
  770. }
  771. .thumbnails .icone_cat{
  772. width: 40px;
  773. height: 40px;
  774. border-radius: 40px;
  775. position: absolute;
  776. transform: translate(-50%, -50%);
  777. background-position: center; /* Center the image */
  778. background-repeat: no-repeat; /* Do not repeat the image */
  779. background-size: cover; /* Resize the background image to cover the entire container */
  780. background-color: black;
  781. }
  782. .thumbnails .atelier_bois{
  783. background-image: url("../images/atelier_couture.png");
  784. }
  785. .thumbnails .atelier_couture{
  786. background-image: url("../images/atelier_couture.png");
  787. }
  788. .thumbnails .atelier_tricot_solidaire{
  789. background-image: url("../images/atelier_tricot.png");
  790. }
  791. .thumbnails .bal_rock, .thumbnails .woodstroc{
  792. background-image: url("../images/bal_rock.png");
  793. }
  794. .thumbnails .chiner_concert{
  795. background-image: url("../images/chiner_concert.png");
  796. }
  797. .thumbnails .atelier_fab_lab{
  798. background-image: url("../images/fab_lab.png");
  799. }
  800. .thumbnails .la_mine_numerique{
  801. background-image: url("../images/fab_lab.png");
  802. }
  803. .thumbnails .gouter_melanie{
  804. background-image: url("../images/gouter.png");
  805. }
  806. .thumbnails .danse_orientale{
  807. background-image: url('../images/bal_rock.png');
  808. }
  809. .thumbnails .hatha_yoga{
  810. background-image: url("../images/hatha_yoga.png");
  811. }
  812. .thumbnails .mineside_jazz{
  813. background-image: url("../images/mineside_jazz.png");
  814. }
  815. .thumbnails .non_programmation{
  816. background-image: url("../images/non_prog.png");
  817. }
  818. .thumbnails .soiree_mine{
  819. background-image: url("../images/soiree_mine.png");
  820. }
  821. .thumbnails .zero_dechets {
  822. background-image: url("../images/zero_dechet.png");
  823. }
  824. /* END SECTION PROCHAINEMENT */
  825. /* SECTION ASSO */
  826. #section_asso .association .__body{
  827. position: relative;
  828. justify-content: flex-end;
  829. margin-top: 50px;
  830. }
  831. .image_sectionasso {
  832. position: absolute;
  833. top: 0;
  834. left: 0;
  835. margin-top: 100px;
  836. width: 70%;
  837. }
  838. .content_asso {
  839. width: 70%;
  840. position: relative;
  841. padding: 20px 10px;
  842. background-color: white;
  843. border: 8px solid yellow;
  844. }
  845. /* START SECTION PROJETS*/
  846. #section_projets{
  847. margin-top: 300px;
  848. }
  849. .title_pjt{
  850. color: #f51212ff;
  851. font-weight: bold;
  852. }
  853. /*END SECTION PROJETS*/
  854. /* responsive iframe */
  855. #section_MineVideo .wrapper__content {
  856. position: relative;
  857. padding-bottom: 56.25%; /* 16:9 */
  858. height: 0;
  859. }
  860. #section_MineVideo .wrapper__content iframe {
  861. position: absolute;
  862. top: 0;
  863. left: 0;
  864. width: 100%;
  865. height: 100%;
  866. }
  867. /* END KEVIN */
  868. /* .item {
  869. margin-top: 50px;
  870. } */
  871. .wrap__content_proch {
  872. position: relative;
  873. width: calc(100% - 40px);
  874. margin: -4rem auto 0 auto;
  875. padding: 10px;
  876. min-height: 160px;
  877. align-items: center;
  878. text-align: center;
  879. background-color: white;
  880. border: 4px solid black;
  881. display: flex;
  882. flex-direction: column;
  883. justify-content: center;
  884. }
  885. .colonne_section{
  886. margin-top: 10px;
  887. }
  888. .colonne_section .wrap_content {
  889. border: 8px solid blue;
  890. padding: 1em;
  891. }
  892. .colonne_section h3 {
  893. color: blue;
  894. text-transform: uppercase;
  895. text-align: center;
  896. }
  897. .projet .colonne_section .header{
  898. height: 80px;
  899. display: flex;
  900. align-items: flex-end ;
  901. }
  902. .projet .colonne_section .header h3{
  903. text-align: center;
  904. width: 100%;
  905. }
  906. .item img{
  907. width: 100%;
  908. height: 100%;
  909. object-fit: cover;
  910. }
  911. ._content_tpsF {
  912. position: relative;
  913. width: 80%;
  914. padding: 10px;
  915. margin: -50px auto;
  916. align-items: center;
  917. text-align: center;
  918. background-color: white;
  919. border: 4px solid black;
  920. }
  921. /*fin sections page accueil*/
  922. /*page collecte avec formulaire*/
  923. /*trouver comment styliser les champs du formulaire*/
  924. .af-submit-button{
  925. position: relative;
  926. margin: 50px auto 10px auto;
  927. display:flex;
  928. border: 4px solid black;
  929. border-radius: 0%;
  930. text-align: center;
  931. padding: 5px;
  932. transform: scale(1) rotate(0deg);
  933. transition: transform 0.3s ease;
  934. }
  935. .af-submit-button:hover{
  936. transform: scale(1.1) rotate(-10deg);
  937. transition: all 0.3s ease;
  938. }
  939. /*fin collecte et form*/
  940. /*gestion des dots*/
  941. .flickity-page-dots {
  942. bottom: 0px;
  943. }
  944. .flickity-page-dots .dot {
  945. width: 12px;
  946. height: 12px;
  947. opacity: 1;
  948. background: transparent;
  949. border: 2px solid white;
  950. }
  951. .flickity-page-dots .dot.is-selected {
  952. background: white;
  953. }
  954. /* dot home */
  955. .hero .flickity-page-dots{
  956. bottom: 30px;
  957. }
  958. /*fin gestion des dots*/
  959. /* START KEVIN */
  960. .hero{
  961. width: 100%;
  962. height: 100vh;
  963. position: relative;
  964. }
  965. .hero .slide{
  966. width: 100%;
  967. height: 100vh;
  968. overflow: hidden;
  969. }
  970. .hero .slide .image{
  971. width: 100%;
  972. height: 100vh;
  973. }
  974. .hero .slide img{
  975. width: 100%;
  976. height: 100%;
  977. object-fit: cover;
  978. }
  979. .hero .__head{
  980. width: 100%;
  981. text-align: center;
  982. position: absolute;
  983. bottom: 60px;
  984. color: white;
  985. }
  986. .wrapper section > div {
  987. position: relative;
  988. }
  989. .tpsF .img{
  990. width: 100%;
  991. height: 400px;
  992. }
  993. .tpsF .img img{
  994. width: 100%;
  995. height: 100%;
  996. object-fit: cover;
  997. }
  998. body.les-temps-forts section{
  999. margin-top: 100px;
  1000. }
  1001. body.les-temps-forts .title, body.les-temps-forts .next_edition {
  1002. color: #009ee0ff;
  1003. text-align: left;
  1004. }
  1005. body.les-temps-forts .titre_page {
  1006. border-color: #009ee0ff;
  1007. }
  1008. .projet .img{
  1009. height: 300px;
  1010. }
  1011. .projet .img img{
  1012. width: 100%;
  1013. height: 100%;
  1014. object-fit: cover;
  1015. }
  1016. .prive .images{
  1017. width: 100%;
  1018. height: 600px;
  1019. }
  1020. .prive .img img{
  1021. width: 100%;
  1022. height: 100%;
  1023. object-fit: cover;
  1024. }
  1025. /* END KEVIN */
  1026. /*START MEDIA QUERIES*/
  1027. @media screen and (min-width: 200px) and (max-width: 1088px) {
  1028. .titre_page,
  1029. .titre{
  1030. top: -150px;
  1031. left: 50%;
  1032. transform: rotate(-10deg) translateX(-50%);
  1033. }
  1034. .privacy-policy .article-h1{
  1035. top: 100px;
  1036. left: 50%;
  1037. transform: rotate(-10deg) translateX(-50%);
  1038. }
  1039. .privacy-policy .article-body {
  1040. column-count: 1;
  1041. }
  1042. .other .header_other {
  1043. left: 50%;
  1044. }
  1045. .article-content{
  1046. margin-top: 30px;
  1047. }
  1048. }
  1049. @media only screen and (max-width : 320px) {
  1050. /* Smartphone */
  1051. /*footer*/
  1052. .accueil .collecte, .accueil .adresse, .accueil .horaires {
  1053. display: block;
  1054. }
  1055. .collecte, .horaires {
  1056. display:none;
  1057. }
  1058. /*fin footer*/
  1059. }
  1060. @media screen and (max-width : 768px){
  1061. article .__img_event{
  1062. max-height: 300px;
  1063. }
  1064. }
  1065. @media screen and (min-width: 200px) and (max-width: 640px) {
  1066. .image_sectionasso {
  1067. display: none;
  1068. width: 100%;
  1069. }
  1070. .content_asso {
  1071. width: 100%;
  1072. }
  1073. }
  1074. @media screen and (min-width: 200px) and (max-width: 755px) {
  1075. .__chapeau, .titre_event{
  1076. margin-top: 20px;
  1077. }
  1078. }
  1079. /*END MEDIA QUERIES*/
  1080. /* START FOOTER */
  1081. footer{
  1082. background-color: rgba(240, 240, 240, 240);
  1083. width: 100%;
  1084. padding: 50px 10px;
  1085. margin-top: 100px;
  1086. }
  1087. /* footer .information > div > div{
  1088. margin: 0 20px;
  1089. } */
  1090. footer > section{
  1091. margin-bottom: 20px;
  1092. }
  1093. footer .logo_lamine {
  1094. max-width: 150px;
  1095. height: auto;
  1096. margin: 10px;
  1097. }
  1098. footer .logo_lamine a{
  1099. display: block;
  1100. }
  1101. footer .logo_lamine img{
  1102. object-fit: contain;
  1103. }
  1104. footer .reseaux_sociaux > div a > img{
  1105. display: block;
  1106. width: 20px;
  1107. height: 20px;
  1108. margin-right: 5px;
  1109. }
  1110. footer .reseaux_sociaux img {
  1111. vertical-align: baseline;
  1112. object-fit: contain;
  1113. }
  1114. /* START Mailchimp */
  1115. footer #mc_embed_signup label, footer #mc-embedded-subscribe{
  1116. padding: 7px 10px;
  1117. background-color: white;
  1118. border: 4px solid black;
  1119. }
  1120. footer .email{
  1121. width: 100%;
  1122. padding: 7px 10px;
  1123. background-color: #D8D8D8;
  1124. border-bottom: 4px solid black;
  1125. border-top: 4px solid black;
  1126. border-left: none;
  1127. border-right: none;
  1128. }
  1129. footer #mc_embed_signup_scroll label{
  1130. white-space: nowrap;
  1131. font-weight: bold;
  1132. }
  1133. footer #mc_embed_signup_scroll input{
  1134. width: 100%;
  1135. }
  1136. footer #mc-embedded-subscribe:hover{
  1137. color: white;
  1138. background-color: black;
  1139. }
  1140. /* END MAILCHIMP */
  1141. /* START SLIDE */
  1142. footer .partenaires ._titre{
  1143. white-space: nowrap;
  1144. font-weight: bold;
  1145. margin: auto 50px auto 0px;
  1146. }
  1147. footer .partenaires{
  1148. width: 100%;
  1149. }
  1150. footer .container_slide li{
  1151. width: 80px;
  1152. height: 80px;
  1153. margin: 0 10px;
  1154. }
  1155. footer .partenaires img{
  1156. object-fit: contain;
  1157. }
  1158. /* END SLIDE */
  1159. /* END FOOTER */