style.css 30 KB

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