/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* RESET */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { position:relative; display:block; } body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Rubik, sans-serif; font-size:0.8rem; font-weight:300; line-height:1.4; background-color:rgba(255,255,255,1); color:rgba(43,43,43,1); text-align:left; overflow-x:hidden; overflow-y:scroll; } body.noscrollbar { overflow-y:hidden; } header, main, section, article, aside, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-x:hidden; } h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Rubik, sans-serif; font-size:1.5rem; font-weight:600; color:inherit; } div { position:relative; margin:0; padding:0; } a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; } body.desktop a:hover { color:inherit; text-decoration:underline; outline-color:transparent; } img { margin:0; padding:0; border:0; } svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; } p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; } p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; } span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; } b, strong, i, span { word-wrap:break-word; } ul { position:relative; margin:0; padding:0; } li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; } .fromrte ul { margin-left:1em; } .wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; } .cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; } .cover.top { top:0; transform:translate(-50%,0); } .cover.bottom { top:100%; transform:translate(-50%,-100%); } .cover.left { left:0; transform:translate(0,-50%); } .cover.topleft { left:0; top:0; transform:translate(0,0); } .cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); } .cover.right { left:100%; transform:translate(-100%,-50%); } .cover.topright { left:100%; top:0; transform:translate(-100%,0); } .cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); } .cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; } .clear { clear:both; } .blochref { cursor:pointer; } pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; } .ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); } .ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:rgba(0,0,0,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Mise en forme spécifique des formulaires */ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ input, textarea, select { position:relative; display:inline-block; vertical-align:top; width:100%; font-size:inherit; display:inline-block; background-color:rgba(221,221,221,1); color:rgba(22,22,22,1); line-height:2; height:2em; vertical-align:middle; margin:0; padding:0.1em 0.3em 0 0.3em; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } textarea { height:6em; } select { background-image:url(https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; } select::-ms-expand { display: none; } select option { color:rgba(22,22,22,1); } select.placeholder { color:rgba(54,54,54,0.55) !important; } /* Mise en forme des boutons radio et des checkboxes */ input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { content:'' !important; position:absolute !important; left:0 !important; top:0 !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */ width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */ transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */ transition:all .2s !important; /* on prévoit une animation */ } input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */ input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */ input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid rgba(221,221,221,1) !important; background-color:transparent !important; } /* Aspect général de la case */ input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:rgba(221,221,221,1) !important; } /* Aspect général de la coche */ input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */ input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */ input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */ input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.5) !important; } /* Aspect si "cochée" */ label { position:relative; display:inline-block; vertical-align:top; font-weight:300; } button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Rubik, sans-serif; font-size:inherit; font-weight:300; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); color:rgba(255,255,255,1); margin:0; padding:0.5em 1em; width:auto; outline:0; } body.desktop button:hover, body.desktop a.button:hover { color:rgba(22,22,22,1); background-color:rgba(255,255,255,1); border-color:rgba(22,22,22,1); text-decoration:none; outline:0; } #en2mots { opacity:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header, header nav > ul > li, header aside, main, #home-activites ul li, #home-infospratiques ul li, #home-actu ul li, .blocinterne button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, footer .infos > div > div, footer .infos > div > nav, footer ul#coordsfooter li { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { margin:0 auto; padding:0; } body { overflow-y:visible; } body.noscrollbar { height:0; overflow-y:hidden; } body.windows.noscrollbar, body.windows.noscrollbar header, body.windows.noscrollbar header nav > div { max-width:calc(100% - 17px); } .fromrte { position:relative; } .fromrte p, .fromrte li { font-size:1em; font-weight:300; line-height:1.4; } .fromrte p { margin:0; padding:0; padding-bottom:1em; } .fromrte ol, .fromrte ul { margin:0; padding:0; padding-bottom:1em; list-style:none; } .fromrte li { position:relative; margin:0; padding:0; padding-left:1.5em; } .fromrte li:before { position:absolute; left:0; } .fromrte ol { counter-reset:li; } .fromrte ol li { counter-increment:li; } .fromrte ol li:before { content:counter(li) "."; top:0; font-weight:700; color:inherit; } .fromrte ul li:before { content:''; top:0.5em; width:0.3em; height:0.3em; background-color:rgba(43,43,43,1); border-radius:50%; } .fromrte hr { background-color:rgba(43,43,43,1); border:0; height:1px; margin:1.5em 0 2.5em 0; } .fromrte strong { font-weight:500; } .fromrte p:last-of-type, .fromrte ul:last-of-type, .fromrte ol:last-of-type { padding-bottom:0; } .fromrte p:last-of-type + ul, .fromrte p:last-of-type + ol { padding-top:1em; } .fromrte ul:last-of-type + p, .fromrte ul:last-of-type + ol { padding-top:1em; } .fromrte ol:last-of-type + p, .fromrte ol:last-of-type + ul { padding-top:1em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ header { z-index:1000; position:fixed; left:0; top:0; width:100%; height:auto; background-color:transparent; color:rgba(43,43,43,1); overflow:hidden; } header aside { position:relative; display:block; background-color:rgba(255,255,255,1); color:rgba(255,255,255,1); padding:0; margin:0; overflow:hidden; max-height:10em; transition:max-height 1000ms ease 1000ms; } .scroll header aside, header aside.noshow { max-height:0; transition:max-height 500ms ease 0ms; } header aside div { font-size:1em; padding:1em 5em; } header aside div p { text-align:center; } header aside svg { opacity:1; transition:opacity 200ms ease 1500ms; cursor:pointer; position:absolute; right:1.5em; top:50%; transform:translateY(-50%); width:0.8em; height:auto; color:rgba(255,255,255,1); stroke-width:5; } .scroll header aside svg, header aside.noshow svg { opacity:0; transition:opacity 200ms ease 0ms; } header aside svg { display:none; } header > div { position:relative; display:block; } header > div:before { content:''; background-color:rgba(255,255,255,1); position:absolute; left:0; right:0; top:0; height:calc(100% - 0.3em); box-shadow:0px 0px 0.3em 0px rgba(0,0,0,0.4); } header h1 { font-size:1em; z-index:1300; position:relative; display:inline-block; vertical-align:top; text-align:left; padding:0; margin:0; text-align:left; } header h1 > a { display:inline-block; vertical-align:bottom; height:10em; width:auto;margin:0; padding:0; text-align:left; } header h1 > a svg { position:relative; left:0; top:0; height:100%; width:auto; } header h1 > span { font-weight:300; color:#76B9E4; position:relative; display:inline-block; vertical-align:bottom; padding-left:calc(1em * (1 / 2.5) ); padding-bottom:calc(1.3em * (1 / 2.5) ); font-size:2.5em; text-transform:uppercase; } header h1 > span b { font-weight:600; } header h1 > span span { font-weight:400; } header nav { z-index:1100; position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; margin:0; padding:0; } header nav ul { z-index:1110; position:absolute; left:0; width:100%; display:block; padding:0 2%; background-color:transparent; text-align:right; } header nav ul#menu { font-size:0; } header nav ul > li { position:initial; display:inline-block; vertical-align:middle; width:auto; list-style:none; } header nav ul > li > button { cursor:pointer; font-weight:300; padding:0; background-color:transparent; color:rgba(43,43,43,1); border:0; text-transform:uppercase; } body.desktop header nav ul > li > button:hover { background-color:transparent; color:#42B38E; } header nav ul > li:first-of-type > button { margin-left:0; } header nav ul > li:last-of-type > button { margin-right:0; } header nav > ul ul > li > button { color:rgba(255,255,255,1); } header nav > ul#menu > li.current > button { color:#42B38E; } body.desktop header nav > ul#menu > li > button:hover, header nav > ul > li > button.hover { color:#42B38E; } header nav > ul#menu ul > li.current > button { color:#42B38E; } body.desktop header nav > ul#menu ul > li > button:hover, header nav > ul ul > li > button.hover { color:#42B38E; } header nav > ul#coordscontact { height:5.28em; top:0; background-color:transparent; color:rgba(43,43,43,1); } header nav > ul#coordscontact li { position:relative; height:100%; width:auto; margin:0; padding:0 3px 0 0; text-transform:uppercase; } header nav > ul#coordscontact li:first-of-type:after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background-color:rgba(43,43,43,1); } header nav > ul#coordscontact > li > div { color:rgba(43,43,43,1); padding:0; margin:1.7em 1.5em; font-size:1.2em; line-height:1; } header nav > ul#coordscontact > li.contact > div { margin-top:1.2em; } header nav > ul#coordscontact > li.boutique > div { margin-top:1.2em; margin-left:0; } header nav > ul#coordscontact > li > div { margin-left:1em; margin-right:1em; } header nav > ul#coordscontact div > button, header nav > ul#coordscontact div > span, header nav > ul#coordscontact div > a { font-weight:300; text-transform:uppercase; line-height:1; position:relative; display:inline-block; vertical-align:top; } header nav > ul#coordscontact div > button { background-color:#42B38E; border-color:#42B38E; border-radius:1em; padding:0.5em 1.5em; } body.desktop header nav > ul#coordscontact div > button:hover { color:#42B38E; background-color:rgba(255,255,255,1); border-color:#42B38E; } header nav > ul#coordscontact div > span { font-weight:300; text-transform:none; } header nav > ul#coordscontact svg { position:relative; display:inline-block; vertical-align:top; height:1.6em; width:auto; left:0; transform:translateY(-0.5em); } header nav > ul#coordscontact li.tel a { font-weight:500; color:#42B38E; } header nav > ul#coordscontact li.localisation svg { margin-right:0.5em; } header nav > ul#coordscontact li.localisation circle { fill:#42B38E; } body.desktop header nav > ul#coordscontact a:hover { text-decoration:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAIN */ main { margin:10.9em 0 0 0; padding:0; display:block; position:relative; width:100%; overflow:hidden; transition:margin-top ease 500ms; } section.defaut { text-align:center; padding-bottom:3rem; } section.defaut img { max-width:100%; } main h1, main h2, main h3, main h4, main h5, main h6 { color:rgba(43,43,43,1); } b, strong { font-weight:400; } p { text-align:inherit; } picture { font-size:0; display:block; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL */ /* Diaporama */ #home-diaporama { z-index:5; position:relative; display:block; width:100%; height:0; padding:0; padding-bottom:calc((1070/2550) * 100%); margin:0; overflow:hidden; } #home-diaporama ul#diaporama-slides { position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; } #home-diaporama .slide { z-index:1; position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; opacity:0; transition: opacity 1200ms linear 0ms; } #home-diaporama .fadein { z-index:5; opacity:1; transition: opacity 1000ms linear 200ms; } #home-diaporama .slide img { z-index:11; position:absolute; height:100%; width:auto; top:50%; left:50%; transform:translate(-50%,-50%); } #home-diaporama .slide:before { z-index:12; content:''; position:absolute; left:0; top:0; height:100%; width:100%; } #home-diaporama .slide svg { z-index:13; position:absolute; height:auto; color:rgba(220,220,220,1); } #home-diaporama .slide div.legende { z-index:14; position:absolute; text-align:left; width:100%; display:inline-block; left:0; margin:0; color:rgba(255,255,255,1); opacity:0; transition: opacity 0ms linear 0ms; } #home-diaporama .fadein div.legende { opacity:1; transition: opacity 0ms linear 0ms; } #home-diaporama div.legende > h2 { color:inherit; font-size:4.5em; line-height:1.1; font-weight:400; display:block; } #home-diaporama div.legende > span { color:rgb(172,210,210); display:block; font-size:2.1em; font-weight:300; padding-bottom:0.8em; line-height:1.1; text-transform:uppercase; } #home-diaporama div.legende > span b { font-weight:700; } #home-diaporama div.legende > span b:last-of-type { font-weight:400; } #home-diaporama div.communes { display:block; margin-top:0.5em; } #home-diaporama div.communes li { list-style-type:none; display:inline-block; vertical-align:middle; text-align:inherit; } #home-diaporama div.communes li:not(:last-of-type) { margin-right:2.5em; } #home-diaporama div.communes svg { position:relative; height:5.5em; width:auto; max-width:14em; } #home-diaporama div.communes svg path { fill:rgb(188,199,205); } #home-diaporama div.logo { padding:4em 8em 4em 6em; } #home-diaporama div.logo svg { position:relative; height:14em; width:auto; } #home-diaporama div.logo svg path { fill:rgb(151,160,167); } #home-diaporama ul#diaporama-bullets { display:none; position:absolute; z-index:10; left:2rem; bottom:1.5rem; font-size:0; margin:0; padding:0; } #home-diaporama ul#diaporama-bullets li { position:relative; display:inline-block; padding:0; margin:0 0.6rem 0 0; width:0.4rem; height:0.4rem; background-color:rgba(255,255,255,1); border-radius:50%; transition:background-color 0.3s ease; } body.desktop #home-diaporama ul#diaporama-bullets li:hover, #home-diaporama ul#diaporama-bullets li.current { cursor:pointer; background-color:rgba(0,0,0,1); } #home-diaporama .intercommunale div.legende > h2 { padding:0 0 0.6em 0; font-weight:500; text-transform:uppercase; } #home-diaporama .intercommunale div.legende > h2 > b { display:block; font-size:1.3em; font-weight:700; } #home-diaporama .sport div.legende > span { font-size:calc(1.1 * 3.3em); position:absolute; left:0.1em; top:2em; padding:0; } #home-diaporama .sport div.legende > h2 { font-size:calc(1.1 * 4.5em);padding:0.1em 0 0.6em 0; } #home-diaporama .sport div.legende > h2 > b { display:block; font-size:1.25em; font-weight:700; text-transform:uppercase; } #home-diaporama .sport div.legende > h2 > i { padding-top:2em; display:block; font-size:0.7em; font-weight:300; text-transform:none; font-style:normal; } #home-diaporama .sport div.legende > h2 > i > span { font-size:0.7em; } #home-diaporama .base div.legende > span { font-size:calc(1.1 * 2.3em); } #home-diaporama .base div.legende > h2 { font-size:calc(1.1 * 4em); padding:0 0 0 0; text-transform:uppercase; font-weight:300; } #home-diaporama .base div.legende > h2 > b { font-weight:700; } #home-diaporama .base div.legende > h2 > b:nth-of-type(2) { display:block; } /* ALERTE */ #home-alerte { position:fixed; z-index:1000; left:0; bottom:0; font-weight:300; background-color:#42B38E; color:rgba(255,255,255,1); padding:1em 1em; text-align:center; } #home-alerte b { font-weight:500; } /* ACTIVITES */ #home-activites ul { font-size:0; position:relative; display:block; margin:1rem; padding:0; } #home-activites ul li { height:0; margin:1rem; padding:0; position:relative; display:inline-block; background-color:rgba(255,255,255,1); overflow:hidden; } #home-activites ul li h2 { font-weight:300; z-index:23; font-size:3.8em; line-height:1.05; color:rgba(255,255,255,1); position:absolute; width:100%; left:50%; top:50%; transform:translate(-50%, -50%); margin:0; padding:0 0.5em; text-align:center; text-transform:uppercase; } #home-activites ul li h2 b { font-weight:700; } #home-activites ul li img { z-index:21; position:absolute; display:block; left:50%; top:50%; transform:translate(-50%,-50%) scale(1.01); border:0; margin:0; padding:0; width:100%; height:100%; } #home-activites ul li:before { z-index:22; content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:transparent; opacity:0; transition:opacity ease 300ms; } body.desktop #home-activites ul li:hover:before, body.desktop #accueil-materiel ul li.hover:before { opacity:1; } body.desktop #home-activites ul li a { text-decoration:none; } /* INFOS PRATIQUES */ #home-infospratiques ul { font-size:0; position:relative; display:block; margin:0; padding:0; } #home-infospratiques ul li { height:0; margin:0; padding:0; position:relative; display:inline-block; vertical-align:top; background-color:#73919b; overflow:hidden; } #home-infospratiques ul li img { z-index:1; position:absolute; display:block; left:50%; top:50%; transform:translate(-50%,-50%) scale(1.01); border:0; margin:0; padding:0; width:100%; height:100%; } #home-infospratiques ul li h2 { z-index:3; overflow:hidden; font-weight:700; z-index:23; color:rgba(255,255,255,1); position:absolute; width:100%; left:0; margin:0; padding:0 15%; top:50%; transform:translateY(-50%); text-align:left; text-transform:uppercase; line-height:1; } #home-infospratiques ul li h2 a { padding:0; position:relative; display:inline-block; width:auto; } #home-infospratiques ul li h2 b { font-size:1.4em; font-weight:700; display:block; } #home-infospratiques ul li h2 span { font-weight:300; display:block; font-size:0.3em; text-transform:none; padding-top:1.2em; } body.desktop #home-infospratiques ul li a { text-decoration:none; } #home-infospratiques ul li.piscine h2:after { z-index:2; content:''; color:rgba(255,255,255,1); position:absolute; right:-0.5em; bottom:0.5em; width:40%; height:1em; background: transparent url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Vague-grande.svg') no-repeat bottom right; background-size:contain; } #home-infospratiques ul li.horaires { background-color:#F4C961; } #home-infospratiques ul li.tarifs { background-color:#42B38E; } #home-infospratiques ul li.horaires h2 a, #home-infospratiques ul li.tarifs h2 a { padding:0.3em 0.5em; } #home-infospratiques ul li.horaires h2 a:before, #home-infospratiques ul li.tarifs h2 a:before { z-index:2; content:''; color:rgba(255,255,255,1); position:absolute; left:0; top:0; width:1em; height:1em; background: transparent url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Coin-texte-haut.svg') no-repeat top left; background-size:contain; } #home-infospratiques ul li.horaires h2 a:after, #home-infospratiques ul li.tarifs h2 a:after { z-index:2; content:''; color:rgba(255,255,255,1); position:absolute; right:0; bottom:0; width:1em; height:1em; background: transparent url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Coin-texte-bas.svg') no-repeat bottom right; background-size:contain; } #home-infospratiques ul li.contact h2 { padding-top:0.1em; top:25%; } #home-infospratiques ul li.contact h2 b:first-of-type { display:inline; } #home-infospratiques ul li.contact:after { content:''; color:rgba(255,255,255,1); position:absolute; left:50%; transform:translateX(-50%); bottom:4em; width:calc(100% - 30%); height:50%; background: transparent url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Vague-pointeur.svg') no-repeat bottom center; background-size:contain; } /* ACTU */ #home-actu h2 { font-size:4.6em; font-weight:700; text-align:center; margin:1em 0; text-transform:uppercase; color:#73919b; } #home-actu ul { font-size:0; position:relative; display:block; margin:0; padding:0 7%; } #home-actu ul li { width:100%; margin:0; padding:0 5.5em 7em 5.5em; position:relative; display:inline-block; vertical-align:top; text-align:left; } #home-actu ul li > span { display:block; padding-bottom:0.35em; font-size:4em; font-weight:300; } #home-actu ul li > h3 { color:#76B9E4; font-size:1.8em; font-weight:400; } #home-actu ul li > div.date { color:#42B38E; font-weight:400; } #home-actu ul li > div.resume { padding-top:1em; } body.desktop #home-actu ul li a:hover { text-decoration:none; color:#42B38E; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES INTERNES */ .blocinterne { width:96%; margin:4em auto; padding:4em 4em; position:relative; display:block; overflow:hidden; background-color:#dff2f6; } .blocinterne:first-of-type { margin-top:6em; } .blocinterne .detail { z-index:4; position:relative; display:inline-block; vertical-align:top; margin:2em 0 8em 0; } .blocinterne .detail h2 { padding:1em; margin:0; border:2px solid rgba(255,255,255,1); text-align:left; font-size:2em; font-weight:300; text-transform:uppercase; } .blocinterne .detail > div { padding:4em 1em; margin:0; } .blocinterne .visuel { z-index:1; position:relative; } .blocinterne img { z-index:1; position:relative; } .blocinterne svg { z-index:3; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,1); opacity:0.8; width:66%; height:auto; } .blocinterne button { display:inline-block; vertical-align:middle; font-weight:400; line-height:1; position:relative; text-transform:uppercase; background-color:#42B38E; border-color:#42B38E; color:rgba(255,255,255,1); border-radius:1em; padding:0.5em 1.5em; margin-top:1em; margin-bottom:4em; margin-left:1.5em; width:auto; transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; } .blocinterne button:first-of-type { margin-left:0; } body.desktop .blocinterne button:hover { background-color:transparent; border-color:#42B38E; color:#42B38E; } .blocinterne.natation { padding-bottom:0; } .blocinterne.natation img { position:relative; width:100vw; height:auto; left:50%; transform:translate(-50%); } .blocinterne .detail.bassins { margin:0; padding:0; } .blocinterne .detail.bassins h2 { font-size:1.4em; font-weight:600; } .blocactivite > div { position:relative; display:block; overflow:hidden; } .blocinterne.clubs { background-color:#a5c3ce; border-radius:3em; padding-bottom:0; } .blocinterne.clubs .visuel:before { z-index:2; content:''; position:absolute; left:0; top:0; right:0; bottom:0; } .blocinterne.clubs svg { color:rgba(255,255,255,1); opacity:0.5; height:auto; } .blocinterne.clubs > ul ul { padding:2em 0 3em 0; list-style-type:none; } .blocinterne.clubs h3 { font-size:1.2em; font-weight:600; padding-bottom:0.3em; } .blocinterne.clubs h3 > span { font-weight:300; } .blocinterne.clubs a { font-weight:600; color:#8b7436 ; } body.desktop .blocinterne.clubs a:hover { color:#8b7436 ; text-decoration:none; } .blocinterne.presentation .detail { margin-bottom:20em; } .blocinterne.presentation img { z-index:1; width:100%; height:auto; } .blocinterne.presentation h2 { font-size:1.4em; font-weight:300; padding-bottom:2em; border:0; text-transform:none; } .blocinterne.presentation h2 > span { font-size:1.5em; display:block; text-transform:uppercase; padding-bottom:0.3em; } .blocinterne.presentation h2 > b { display:block; color:#42B38E; } .blocinterne.presentation:after { z-index:10; content:''; content:''; color:rgba(255,255,255,1); position:absolute; left:50%; transform:translateX(-50%); bottom:1em; width:100%; height:20em; background: transparent no-repeat bottom center; background-size:contain; } .blocinterne.presentation:after { background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Illus-fille.svg'); } .blocinterne.infrastructures { background-color:#596c72; color:rgba(255,255,255,1); border-radius:3em; padding-bottom:0; } .blocinterne.infrastructures h2 { border-color:#42B38E; color:rgba(255,255,255,1); } .blocinterne.infrastructures .detail { margin-bottom:0; } .blocinterne.infrastructures li { color:rgba(255,255,255,1); padding-bottom:1em; } .blocinterne.infrastructures .fromrte ul li:before{ background-color:rgba(255,255,255,1); } .blocinterne.pratique h2 { padding:1em 5% 0 5%; margin:0; text-align:left; font-size:2em; font-weight:300; text-transform:uppercase; } .blocinterne.pratique h3 { padding:1em 5% 1em 5%; margin:0; border:2px solid rgba(255,255,255,1); text-align:left; font-size:2em; font-weight:300; text-transform:none; } .blocinterne.pratique h3 > span { font-size:0.6em; } .blocinterne.pratique div.tableau { margin:4em 0; } .blocinterne.pratique div.tableau ul { list-style-type:none; display:flex; flex-wrap:wrap; padding:2em 1em; width:100%; } .blocinterne.pratique div.tableau li { padding:0 2em; display:inline-block; vertical-align:top; width:auto; min-width:10%; border-right:1px solid rgba(0,0,0,0.3); } .blocinterne.pratique div.tableau li:first-of-type { padding-left:0; min-width:calc(10% - 2em); } .blocinterne.pratique div.tableau li:last-of-type { padding-right:0; border-right:0; min-width:calc(10% - 2em); } .blocinterne.pratique h4 { padding:0 0 0.5em 0; margin:0; text-align:left; font-size:1em; font-weight:600; text-transform:none; } .blocinterne.pratique h4 > span { font-size:0.6em; } .blocinterne.pratique .fromrte p { line-height:1.5; } .blocinterne.pratique .asterisque { padding:1em 5% 0 5%; margin:0; } .blocinterne.pratique .asterisque.fromrte p { padding-bottom:0.5em; line-height:1.4; } .blocinterne.pratique div.tableau .bassin { text-transform:uppercase; font-weight:700; } .blocinterne.pratique div.tableau.scolaire-pb, .blocinterne.pratique div.tableau.vacances-pb { margin-top:-3em; } .blocinterne.pratique.planning h2 { padding:1em 5% 1em 5%; margin:0; border:2px solid rgba(255,255,255,1); text-align:left; font-size:2em; font-weight:300; text-transform:uppercase; } .blocinterne.pratique.planning h2 > span { display:inline-block; font-size:0.7em; padding-left:1.5em; } .blocinterne.pratique.planning .fromrte span.ce { font-size:0.7em; } .blocinterne.pratique.planning .fromrte span:not(.ce) { font-weight:400; } .blocinterne.pratique.planning div.tableau { margin-top:0; margin-bottom:3em; } .blocinterne.pratique.planning div.tableau li { min-width:13%; } .blocinterne.pratique.planning div.tableau li:first-of-type { min-width:calc(13% - 2em); } .blocinterne.pratique div.tableau .legende li { margin-top:1em; font-size:0.9em; border:0; padding-left:1.8em; padding-right:2em; line-height:1; height:1em; text-transform:uppercase; } .blocinterne.pratique div.tableau .legende li:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1em; height:1em; background-color:rgb(9,93,157); border-radius:50%; } .blocinterne.pratique div.tableau .legende li.gym1:before { background-color:rgb(9,93,157); } .blocinterne.pratique div.tableau .legende li.gym2:before { background-color:rgb(203,173,54); } .blocinterne.pratique div.tableau .legende li.bike:before { background-color:rgb(88,195,155); } .blocinterne.pratique div.tableau .legende li.fitness:before { background-color:rgb(71,134,93); } .blocinterne.pratique div.tableau .legende li.boxing:before { background-color:rgb(197,111,8); } .blocinterne.pratique div.tableau .legende li.circuit:before { background-color:rgb(191,113,190); } .blocinterne.pratique div.tableau .legende li.adultes:before { background-color:rgb(9,93,157); } .blocinterne.pratique div.tableau .legende li.enfants1:before { background-color:rgb(88,195,155); } .blocinterne.pratique div.tableau .legende li.enfants2:before { background-color:rgb(71,134,93); } .blocinterne.pratique div.tableau .legende li.bebes:before { background-color:rgb(191,113,190); } .blocinterne.pratique div.liste { margin:4em 0 0 0; } .blocinterne.pratique div.liste ul { list-style-type:none; } .blocinterne.pratique div.liste > ul { display:flex; flex-wrap:wrap; padding:2em 5% 0 5%; } .blocinterne.pratique div.liste > ul > li { width:100%; padding:0 0; display:inline-block; vertical-align:top; } .blocinterne.pratique div.liste > ul h4 { text-transform:uppercase; font-size:1em; font-weight:600; padding-bottom:1em; } .blocinterne.pratique div.liste > ul > li > ul { margin-bottom:2em; } .blocinterne.pratique div.liste > ul > li > ul > li { padding-left:1em; padding-right:7em; } .blocinterne.pratique div.liste > ul > li > ul > li:before { content:"•"; position:absolute; left:0; font-size:1em; color:rgba(43,43,43,1); } .blocinterne.pratique div.liste > ul > li > ul > li span.tarif { position:absolute; right:2em; font-weight:400; text-align:right; } .blocinterne.pratique div.liste .asterisque { font-size:0.8em; padding:0; border:0; } .blocinterne.pratique div.liste.public > ul h4 { display:none; } .blocinterne.visuel { padding:0; } .blocinterne.visuel img { width:100%; height:auto; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* CONTACT */ section.contact div.contenu { font-size:0; } section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { position:relative; display:inline-block; vertical-align:top; padding:2rem; width:100%; color:rgba(43,43,43,1); } section.contact h2 { color:rgba(43,43,43,1); font-weight:300; margin:0 0 1em 0; text-transform:uppercase; } section.contact aside.coordscontact { background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); background-repeat:no-repeat; background-position:center bottom; background-size:100%; } section.contact aside.coordscontact:before { content:''; z-index:2; content:''; color:rgba(255,255,255,1); position:absolute; right:-0.5em; top:-0.5em; width:40%; height:40%; background: transparent url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Feuilles-coin-coul.svg') no-repeat top right; background-size:contain; } section.contact aside.coordscontact h2 { color:rgba(255,255,255,1); margin-bottom:1.5em; } section.contact aside.coordscontact div { font-weight:300; font-size:1em; padding-bottom:0.7em; } section.contact aside.coordscontact div.nom { font-weight:500; font-size:1.3em; text-transform:uppercase; } section.contact aside.coordscontact div.tel { font-weight:300; font-size:1.3em; } section.contact aside.coordscontact div.tel > span { font-weight:500; } section.contact form { font-size:0; } section.contact fieldset { font-size:0; position:relative; display:inline-block; vertical-align:top; margin:0 0 1rem 0; padding:0; border:0; width:100%; } section.contact label, section.contact fieldset > div { font-size:1rem; width:100%; display:inline-block; vertical-align:top; margin:0; padding:0; margin-bottom:0.7em; } section.contact label { padding-right:0; } section.contact label > span, section.contact fieldset > div > span { width:100%; display:inline-block; vertical-align:top; padding:0.5em 0.5em 0.5em 1em; } section.contact fieldset > div > span { padding-right:0; } section.contact label.option { width:auto; text-transform:uppercase; } section.contact label.consentementrgpd { font-size:0.8rem; margin-top:1rem; text-transform:none; } section.contact option.placeholder { color:rgba(54,54,54,0.55); } section.contact input, section.contact select, section.contact textarea { background-color:transparent; border:1px solid rgba(182,182,182,1); border-radius:3px; padding:0.7em 1em; height:auto; line-height:1; } section.contact textarea { height:10em; } section.contact input[type="checkbox"] + span:before, section.contact input[type="checkbox"] + span:after { top:0.05em !important; border-radius:3px !important; } section.contact input[type="checkbox"] + span:before { border-color:rgba(182,182,182,1) !important; } section.contact input[type="checkbox"] + span:after { background-color:#42B38E !important; } section.contact form label input[type="checkbox"] { padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; left: 0 !important; top: 1.2rem !important; transform: scale(1) !important; } section.contact form button { font-size:1rem; font-weight:400; line-height:1; position:relative; text-transform:uppercase; background-color:#42B38E; border-color:#42B38E; color:rgba(255,255,255,1); border-radius:1em; padding:0.5em 1.5em; margin-top:1em; display:block; width:auto; transform:translateX(-100%); left:100%; transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; } body.desktop section.contact form button:hover { background-color:transparent; border-color:#42B38E; color:#42B38E; } section.contact span.asterisque { display:block; width:auto; font-size:0.7rem; margin:1rem 0; } section.contact sup { color:#42B38E; font-weight:500; } section.contact div.succes { padding-top:3rem; padding-bottom:5rem; font-size:1.4rem; text-align:center; } section.contact div.erreur { padding-bottom:3rem; } section.contact aside.mapcontact { overflow:visible; } section.contact aside.mapcontact h2 { position:absolute; top:-2em; left:8rem; } section.contact aside.mapcontact > div { position:absolute; padding:0; margin:0; left:0; bottom:0; width:100%; height:0; } section.contact aside.mapcontact, section.contact aside.mapcontact > div { padding:0 0 35% 0; } section.contact aside.mapcontact ul > li { position:relative; list-style-type:none; padding:0 0.2em; } section.contact aside.mapcontact ul > li:before { content:''; display:none; } .jconfirm .jconfirm-box { width:50%; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ANIMATION SCROLL */ .scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; } .scrollanim { opacity:1; transition:opacity 500ms ease 0ms, transform 300ms ease 0ms; } .scrollanim.frombottom.init { opacity:0; transform:translateY(50%); } .scrollanim.frombottom { opacity:1; transform:translateY(0); } .scrollanim.fromtop.init { opacity:0; transform:translateY(-50%); } .scrollanim.fromtop { opacity:1; transform:translateY(0); } .scrollanim.fromleft.init { opacity:0; transform:translateX(-50%); } .scrollanim.fromleft { opacity:1; transform:translateX(0); } .scrollanim.fromright.init { opacity:0; transform:translateX(50%); } .scrollanim.fromright { opacity:1; transform:translateX(0); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MENTIONS LEGALES */ section.mentionslegales { font-family:Verdana, sans-serif; color:rgba(43,43,43,1); font-size:0.7rem; font-weight:300; display:block; margin:0 auto; width:90%; padding:3rem 0; } section.mentionslegales h1 { font-size:1.4em; text-transform:uppercase; font-weight:600; padding-bottom:1em; } section.mentionslegales h2 { font-size:1.4em; text-transform:uppercase; font-weight:600; padding-bottom:1em; } section.mentionslegales h3 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section.mentionslegales h4 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section.mentionslegales h5 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section.mentionslegales h6 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section.mentionslegales p { text-align:justify; } section.mentionslegales li { text-align:justify; } section.mentionslegales strong { font-weight:600; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ section#page-authentification { width:30%; margin:0 auto; } section#page-authentification h1 { text-transform:uppercase; margin:7em 0 2em 0; } section#page-authentification input { background-color:transparent; border:1px solid rgba(182,182,182,1); border-radius:3px; padding:0.7em 1em; height:auto; line-height:1; margin-bottom:0.5em; } section#page-authentification .btn-primary { margin-top:2em; color:rgba(255,255,255,1); background-color:#42B38E; border-color:#42B38E; border-radius:1em; text-transform:uppercase; line-height:1; padding:0.5em 1.5em; display:block; width:auto;transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; } body.desktop section#page-authentification .btn-primary:hover { color:#42B38E; background-color:rgba(255,255,255,1); border-color:#42B38E; } .interne .section-auth { width:30%; margin:0 auto; } .section-auth h1 { text-transform:uppercase; margin:7em 0 2em 0; } .section-auth form { padding-top:2em; } .section-auth .reponse { padding-top:2em; } .section-auth input { background-color:transparent; border:1px solid rgba(182,182,182,1); border-radius:3px; padding:0.7em 1em; height:auto; line-height:1; margin-bottom:0.5em; } .section-auth .btn-primary { margin-top:2em; color:rgba(255,255,255,1); background-color:#42B38E; border-color:#42B38E; border-radius:1em; text-transform:uppercase; line-height:1; padding:0.5em 1.5em; display:block; width:auto;transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; } body.desktop .section-auth .btn-primary:hover { color:#42B38E; background-color:rgba(255,255,255,1); border-color:#42B38E; } #ul-auth { margin-top:4em; } section.adminliste, section.adminarbo { display:block; margin:0 auto; width:90%; padding:3em 0; } section.adminliste .back , section.adminarbo .back { margin:0 0 2em 0; padding:0; text-align:left; background-color:transparent; border:0; color:inherit; } section.adminliste .back:before , section.adminarbo .back:before { content:'<'; display:inline; padding-right:0.3em; color:inherit; } body.desktop section.adminliste .back:hover , body.desktop section.adminarbo .back:hover { background-color:transparent; border:0; color:#42B38E; } section.adminliste h1, section.adminarbo h1 { font-size:1.8em; text-transform:uppercase; padding-bottom:1em; } section.adminliste li, section.adminarbo li { font-size:1.4em; padding-bottom:1em; } section.adminliste svg { width:0.8em; height:0.8em; margin-right:0.5em; vertical-align:baseline; } .pdf svg { display:inline-block; width:auto; height:1.2em; margin-left:0.5em; margin-right:0; vertical-align:text-bottom; } body.desktop section.adminliste a:hover , body.desktop section.adminarbo a:hover { text-decoration:none; color:#42B38E; } section.adminliste li.niveau2 { padding-left:2em; } section.adminliste li.niveau3 { padding-left:4em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { z-index:900; position:relative; background-color:rgba(53,53,53,1); color:rgba(200,200,200,1); text-align:center; margin:0; padding:0; overflow-x:hidden; } footer > svg { position:absolute; right:0; top:0; transform:translate(5%, -5%); width:25%; height:auto; color:rgba(255,255,255,0.03); } footer .logo { height:10em; width:22em; display:inline-block; vertical-align:top; margin:2em 0 0 0; } footer .infos > div { display:block; position:relative; font-size:0; } footer .infos h2 { font-size:1.1em; text-transform:uppercase; font-weight:400; color:#42B38E; margin-bottom:2em; } footer .infos .coords h2 { font-weight:300; } footer .infos h2 b { font-weight:600; } footer .infos > div > div > div { font-size:1.1em; } footer .infos .tel { margin-bottom:0.5em; } footer .infos .tel a { color:#F4C961; font-weight:600; font-size:1.2em; } footer .infos .email { margin-bottom:0.5em; } footer .infos .adresse { margin-top:1em; } body.desktop footer .infos a:hover { text-decoration:none; } footer .infos svg { position:relative; display:inline-block; vertical-align:top; width:auto; left:0; transform:translateY(-0.3em); } footer .infos .communes svg { height:4.5em; max-width:10em; } footer .infos .sociaux svg { height:2em; } footer div li { list-style:none; margin:0 0 0.8em 0; text-align:inherit; } footer div.communes li:not(:last-of-type) { margin-right:2em; } footer div.sociaux li:not(:last-of-type) { margin-right:0.5em; } footer div:not(.legal) > ul > li { display:inline-block; } footer div button { font-size:1.1em; font-weight:300; line-height:1; position:relative; background-color:transparent; color:rgba(200,200,200,1); border:0; margin:0; padding:0; text-align:left; } body.desktop footer div button:hover { cursor:pointer; background-color:transparent; color:rgba(255,255,255,1); } footer div.sociaux button { color:rgba(140,140,140,1); } footer ul#coordsfooter { display:none; } footer .copyright { background-color:rgba(53,53,53,1); color:rgba(200,200,200,1); margin:0; padding:1em 2% 3em 2%; text-align:right; line-height:1; } footer .copyright span { padding:0 1em; line-height:1; display:inline-block; vertical-align:top; } footer .copyright span a { line-height:1; position:relative; display:inline-block; vertical-align:top; padding-left:0.2em; padding-right:1.7em; } footer .copyright span svg { position:absolute; display:inline-block; margin-left:0.5em; height:1em; width:auto; right:0; top:50%; transform:translateY(-50%);} footer .copyright span:last-of-type svg { height:1.1em; } body.desktop footer .copyright span a:hover { text-decoration:none; color:rgba(200,200,200,1); } footer .copyright span a { padding-right:0.2em; } footer .copyright span svg { display:none; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } #en2mots { background-color:rgba(255,255,255,1); width:100%; max-width:2560px; margin:0 auto; position:relative; } /* AFFICHAGE PANORAMIC */ /* Attention, le style panoramic n'est pas ajouté sur body mais sur html html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; } */ /* AFFICHAGE FONT MAXI */ @media (min-width:2000px) { html { font-size:20px; } .liquide { max-width:calc(0.9 * 2000px); } } /* AFFICHAGE MAXI */ @media (min-width:2560px) { .litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { width:960px; } } /* AFFICHAGE NORMAL */ @media (orientation:portrait) and (min-width:801px), (orientation:landscape) and (min-width:501px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header, header nav > ul > li, header aside, main, #home-activites ul li, #home-infospratiques ul li, #home-actu ul li, .blocinterne button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, footer .infos > div > div, footer .infos > div > nav, footer ul#coordsfooter li { font-size:0.8rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:90%; } #showhidemenu { display:none; } header { overflow:visible; } header > div:before { height:calc(0em + 1.2em + 10em + 0em - 0.3em); transition:height linear 300ms; } header h1 { margin:calc(0em + 1.2em) 0 calc(0em) 2%; transition:margin-bottom linear 300ms; } body.showsousmenu header h1 { margin-bottom:calc(0em + 3.5em);} header nav > ul > li.location > button { color:transparent; font-weight:600; } body.desktop header nav ul#menu > li.location > button:hover, header nav ul#menu > li.location.current > button { color:transparent; } header nav ul:not(#coordscontact) > li:not(:first-of-type) > button:before { content:''; position:absolute; left:calc(-1 * (1em + 1px)); top:50%; transform:translateY(-50%); width:1px; height:0.8em; background-color:rgba(43,43,43,0.6); } header nav > ul:not(#coordscontact) ul > li:not(:first-of-type) > button:before { background-color:rgba(255,255,255,1); } header nav > ul#menu { height:calc(0.8 * 4.68rem); top:calc(0.8 * (0rem + 1.2rem + 10rem + 0rem - 0.3rem - 4.68rem)); } header nav > ul#menu > li > button { font-size:1.2em; margin:1.5em 1em; line-height:0.9; } header nav > ul#menu ul { height:3.5em; } header nav > ul#menu ul > li > button { font-size:1em; margin:1.3em 1em; line-height:0.9; } header nav > ul#menu:before { content:''; position:absolute; left:0; right:0; top:calc(0.8 * 4.68rem); height:calc(0.8 * 3.5rem); background-color:rgba(42,42,42,0.8); max-height:0; transition:max-height 500ms ease 50ms; overflow:hidden; } header nav > ul#menu.hover:before, header nav > ul#menu.currentmenu:before { max-height:100%; transition:max-height 500ms ease 0ms; } header nav > ul ul { z-index:1; top:100%; background-color:transparent; max-height:0; opacity:0; transition:opacity 500ms ease 50ms; overflow:hidden; } header nav > ul > li:hover > ul, header nav > ul > li.hover > ul, header nav > ul > li.current > ul { max-height:100%; opacity:1; transition:opacity 500ms ease 0ms, max-height 500ms ease 0ms; } header nav > ul > li.current.otherhover > ul { max-height:0; opacity:0; } body.desktop header nav > ul > li:hover > ul { z-index:2; } #home-diaporama .slide div.legende { text-align:left; left:10%; top:11em; width:calc(100% - (2 * 10%)); } #home-diaporama .sport div.legende { top:16em; } #home-diaporama .sport div.legende > h2:after { z-index:2; content:''; color:rgba(255,255,255,1); position:absolute; left:0; top:100%; width:55%; height:50em; background: transparent url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Forme-Slide_2.svg') no-repeat top left; background-size:contain; } #home-diaporama .base div.legende { top:17.5em; } #home-activites ul li { width:calc(50% - (2 * 1rem)); padding-bottom:calc((100% * 722 / 1175) / 2); } #home-activites ul li.clubs { width:calc(100% - (2 * 1rem)); padding-bottom:calc((100% * 551/2395)); } #home-infospratiques ul li h2 { font-size:2.2vw; } #home-infospratiques ul li.piscine h2 { font-size:4.2vw; } #home-infospratiques ul li { width:50%; padding-bottom:calc((100% * 753 / 1275) / 2); } #home-infospratiques ul li.horaires, #home-infospratiques ul li.tarifs { width:25%; padding-bottom:calc((100% * 753 / 1275) / 4); } #home-infospratiques ul li.tarifs { position:absolute; left:50%; top:50%; } #home-infospratiques ul li.contact { width:25%; } #home-actu ul li { width:calc(100% / 3); } .blocinterne .detail { width:50%; } .blocinterne .detail h2 { padding:1em 10% 1em 10%; } .blocinterne .detail > div { padding:4em 20% 4em 10%; } .blocinterne button:first-of-type { margin-left:10%; } .blocinterne.natation .detail:before { content:''; content:''; color:rgba(255,255,255,1); position:absolute; right:1em; top:12em; width:15em; height:100%; background: transparent no-repeat top right; background-size:contain; } .blocinterne .detail.natationlibre h2 { border-right:0; border-bottom:0; } .blocinterne .detail.natationlibre:after { content:''; position:absolute; left:0; top:calc( (3 * 2em) + (2 * 2px) ); width:calc(((100% - 5px) * 2)); height:2px; background-color:rgba(255,255,255,1); } .blocinterne .detail.natationlibre:before { top:8em; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Palmier-1.svg'); } .blocinterne .detail.coursadultes h2 { border-right:0; } .blocinterne .detail.coursadultes:before { background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Palmier-2.svg'); } .blocinterne .detail.coursenfants { border-left:2px solid rgba(255,255,255,1); width:calc(50% - 5px); transform:translateX(-5px); } .blocinterne .detail.coursenfants:before { background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Palmier-3.svg'); transform:scaleX(-1); } .blocinterne .detail.coursenfants:after { content:''; position:absolute; left:0; top:100%; width:4em; height:2px; background-color:rgba(255,255,255,1); } .blocinterne .detail.coursenfants h2 { border-left:0; } .blocinterne .detail.bassins { position:absolute; width:calc((100% - (2 * 4em)) / 2); left:50%; top:calc(4em + 2em); padding-top:calc((3 * 2em) + 4px); padding-bottom:4em; border-left: 2px solid rgba(255,255,255,1); } .blocinterne .detail.bassins:before { top:2em; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Elmt-graphique.svg'); } .blocinterne .detail.bassins:after { content:''; position:absolute; left:0; top:100%; width:4em; height:2px; background-color:rgba(255,255,255,1); } .blocinterne .detail.bassins > div { display:inline-block; vertical-align:top; width:calc(50% - 5px); margin:0; padding:0; } .blocinterne .detail.bassins h2 { padding:1.7em 20%; border-left:0; border-top:0; border-right:0; } .blocinterne .detail.bassins > div:last-of-type h2 { border-right:2px solid rgba(255,255,255,1); } .blocinterne .detail.bassins > div:last-of-type h2:before { content:''; position:absolute; left:-1px; top:50%; transform:translateY(-50%); width:2px; height:70%; background-color:rgba(255,255,255,1); } .blocinterne .detail.bassins .fromrte { padding:2em 20%; } .blocactivite .detail:after { content:''; position:absolute; top:100%; width:4em; height:2px; background-color:rgba(255,255,255,1); } .blocactivite .visuel { position:absolute; left:0; top:0; width:100%; height:100%; } .blocactivite img { position:absolute; width:auto; height:100%; } .blocactivite svg { width:26%; } .blocactivite:nth-of-type(2n) .detail { border-right:2px solid rgba(255,255,255,1); } .blocactivite:nth-of-type(2n) .detail:after { left:100%; } .blocactivite:nth-of-type(2n) .detail h2 { border-right:0; } .blocactivite:nth-of-type(2n) img { right:0; } .blocactivite:nth-of-type(2n) svg { left:75%; } .blocactivite:nth-of-type(2n+1) .detail { margin-left:50%; border-left:2px solid rgba(255,255,255,1); } .blocactivite:nth-of-type(2n+1) .detail:after { left:0; transform:translateX(-100%); } .blocactivite:nth-of-type(2n+1) .detail h2 { border-left:0; } .blocactivite:nth-of-type(2n+1) img { left:0; } .blocactivite:nth-of-type(2n+1) svg { left:25%; } .blocinterne.clubs { display:flex; } .blocinterne.clubs .detail { margin-bottom:0; border-right:2px solid rgba(255,255,255,0.5); padding-bottom:40em; } .blocinterne.clubs .detail:after { content:''; position:absolute; left:0; top:calc( (3 * 2em) + (2 * 2px) ); width:calc((50% + 35%) * 2); height:2px; background-color:rgba(255,255,255,0.5); } .blocinterne.clubs .detail h2 { border-color:rgba(255,255,255,0.5); border-right:0; border-bottom:0; } .blocinterne.clubs .visuel { position:absolute; left:0; top:0; width:100%; height:100%; } .blocinterne.clubs .visuel:before { background:transparent linear-gradient(90deg, #a5c3ce 0%, #a5c3ce 50%, transparent 80%, transparent 100%) 0% 0% no-repeat padding-box; } .blocinterne.clubs img { position:absolute; right:0; top:0; width:auto; height:100%; } .blocinterne.clubs svg { top:calc(100% - 25em); left:25%; width:26%; } .blocinterne.clubs > ul { z-index:4; display:inline-block; vertical-align:top; width:35%; padding:calc( 2em + (3 * 2em) + 4em) 0 0 4em; } .blocinterne.presentation img { position:absolute; top:0; right:0; } .blocinterne.presentation:after { left:25%; width:50%; height:26em; } .blocinterne.infrastructures h2 { border-bottom:0; } .blocinterne.infrastructures .fromrte { width:140%; border-top: 2px solid #42B38E; border-right: 2px solid #42B38E; } .blocinterne.infrastructures li { font-size:1.2em; } .blocinterne.pratique h3 { width:50%; border-bottom:0; } .blocinterne.pratique h3:after { width:calc(2 * 100%); content:''; position:absolute; left:0; bottom:0; height:2px; background-color:rgba(255,255,255,1); } .blocinterne.pratique div.tableau .bassin, .blocinterne.pratique div.tableau ul { padding:2em 5% 0 5%; } .blocinterne.pratique div.tableau.scolaire h3:after { width:calc(2 * 100%); } .blocinterne.pratique div.tableau.vacances h3:after { width:calc(2 * 80%); } .blocinterne.pratique div.tableau.ete h3:after { width:calc(2 * 60%); } .blocinterne.pratique.boolete div.tableau.ete h3:after { width:calc(2 * 100%); } .blocinterne.pratique div.tableau:before { content:''; content:''; color:#42B38E; position:absolute; right:1em; top:12em; width:15em; height:100%; background: transparent no-repeat top right; background-size:contain; } .blocinterne.pratique div.tableau.vacances:before { top:-7em; width:25em; height:160%; right:14em; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Palmier-1-pratique.svg'); } .blocinterne.pratique:not(.boolete) div.tableau.scolaire:before { top:2em; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Elmt-graphique-pratique.svg'); } .blocinterne.pratique:not(.boolete) div.tableau.ete:before { top:0; width:30em; right:25em; height:200%; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Palmier-2-pratique.svg'); } .blocinterne.pratique.boolete div.tableau.scolaire:before { top:-10em; width:30em; right:25em; height:200%; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Palmier-2-pratique.svg'); } .blocinterne.pratique.boolete div.tableau.ete:before { top:2em; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Elmt-graphique-pratique.svg'); } .blocinterne.pratique.tarifs:before { content:''; content:''; color:#42B38E; position:absolute; right:-0.5em; top:-0.5em; width:35%; height:35%; background: transparent no-repeat top right; background-size:contain; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Feuilles-coin.svg'); } .blocinterne.pratique.tarifs:after { content:''; content:''; color:#42B38E; position:absolute; right:10em; bottom:2em; width:10%; height:20%; background: transparent no-repeat bottom right; background-size:contain; background-image: url('https://www.loasisdelaramee.fr/_chartes_/loasis/ressources/images/deco/Cactus.svg'); } .blocinterne.pratique.planning > div { padding:2em 0 4em 0; } .blocinterne.pratique.planning h2 { width:62%; } .blocinterne.pratique.planning div.tableau { width:62%; border-right:2px solid rgba(255,255,255,1); } .blocinterne.pratique.planning div.tableau:after { content:''; position:absolute; left:100%; top:100%; width:4em; height:2px; background-color:rgba(255,255,255,1); } .blocinterne.pratique.planning div.tableau ul { font-size:0.9em; border-top:0; padding:2em 2% 4em 2%; } .blocinterne.pratique div.liste > ul { padding:4em 5% 0 5%; } .blocinterne.pratique div.liste > ul > li { width:calc(100% / 3); } .blocinterne.pratique div.liste > ul > li:nth-of-type(3n+1) { padding-left:0; width:calc(100% / 3); } .blocinterne.pratique div.liste > ul > li:nth-of-type(3n), .blocinterne.pratique div.liste > ul > li:last-of-type { padding-right:0; width:calc(100% / 3); } .blocinterne.pratique div.liste > ul ul { display:inline-block; width:80%; } .blocinterne.pratique div.liste > ul > li > ul > li { padding-right:10em; } .blocinterne.pratique div.liste > ul > li > ul > li span.tarif { right:5em; } .blocinterne.pratique div.liste.public h3:after { width:calc(2 * 80%); } .blocinterne.pratique div.liste.public > ul > li { width:35%; } .blocinterne.pratique div.liste.public > ul ul { display:inline-block; width:85%; } .blocinterne.pratique div.liste.public > ul > li:nth-of-type(1) { width:35%; } .blocinterne.pratique div.liste.public > ul > li:last-of-type { width:35%; } .blocinterne.pratique.planning .visuel { position:absolute; left:0; top:0; width:100%; height:100%; } .blocinterne.pratique.planning img { position:absolute; width:auto; height:100%; right:0; } section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { padding:4rem 2rem 2rem 8rem; } section.contact aside.coordscontact { z-index:102; position:absolute; right:0; top:0; width:35%; min-height:45rem; } section#page-contact.contact div.contenu > div { z-index:101; margin-right:35%; width:65%; padding-right:calc(2rem + 6rem); padding-bottom:0; min-height:45rem; } section.contact label.nom, section.contact label.prenom, section.contact label.email, section.contact label.telephone { width:50%; } section.contact label.nom, section.contact label.email { padding-right:2em; } section.contact label.prenom, section.contact label.telephone { padding-left:2em; } footer .logo { position:absolute; left:calc(8% - 3em); top:calc(6em - 3em); margin-top:0; } footer .infos { padding:6em 8%; } footer .infos > div { display:flex; flex-wrap:nowrap; } footer .infos > div > div, footer .infos > div > nav { flex:1; position:relative; display:inline-block; vertical-align:top; min-width:22%; text-align:left; padding:0 3em 0 0; } footer .infos > div > div.communes { padding-left:4em; padding-top:10em; min-width:39%; } footer .infos > div > div.sociaux { min-width:17%; } footer .copyright span:not(:first-of-type):before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:0.8em; background-color:rgba(200,200,200,0.6); } } /* AFFICHAGE TABLETTE et PETIT ECRAN */ @media (orientation:portrait) and (min-width:801px) and (max-width:1600px), (orientation:landscape) and (min-width:501px) and (max-width:1200px) { html { font-size:11px; font-size:1.1vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header, header nav > ul > li, header aside, main, #home-activites ul li, #home-infospratiques ul li, #home-actu ul li, .blocinterne button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, footer .infos > div > div, footer .infos > div > nav, footer ul#coordsfooter li { font-size:1.1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ header > div:before { height:calc(0em + 1.2em + 7.5em + 0em - 0.3em); } header h1 { margin:calc(0em + 1.2em) 0 calc(0em) 2%; } body.showsousmenu header h1 { margin-bottom:calc(0em + 3.5em);} header h1 > a { height:7.5em; } header h1 > span { padding-left:calc(1em * (1 / 1.4) ); padding-bottom:calc(0.3em * (1 / 1.4) + 0.4em ); font-size:1.4em; } header nav ul { padding:0 2%; } header nav > ul#menu { height:calc(1.1 * 4.68rem); top:calc(1.1 * (0rem + 1.2rem + 7.5rem + 0rem - 0.3rem - 4.68rem)); } header nav > ul#menu:before { top:calc(1.1 * 4.68rem); height:calc(1.1 * 3.5rem); } header nav > ul#menu > li > button { font-size:1.2em; margin:2em 1em 1em 1em; line-height:0.9; } header nav > ul#menu ul { height:3.5em; } header nav > ul#menu ul > li > button { font-size:1em; margin:1.3em 1em; line-height:0.9; } header nav > ul#coordscontact { height:5.28em; } header nav > ul#coordscontact > li > button { font-size:1.2em; margin:1.7em 1em; line-height:1; } main { margin-top:8.4em } #home-diaporama .slide div.legende { top:8em; } #home-diaporama div.legende > h2 { font-size:3em; } #home-diaporama div.communes li:not(:last-of-type) { margin-right:1.5em; } #home-diaporama div.communes svg { height:5em; max-width:12em; } #home-diaporama div.logo { padding:2.5em 5em 2.5em 3.5em; } #home-diaporama div.logo svg { height:10em; } #home-activites ul li h2 { font-size:3.3em; } #home-infospratiques ul li h2 { font-size:1.7em; } #home-infospratiques ul li.piscine h2 { font-size:2.6em; } #home-actu ul li { padding:0 2.5em 7em 2.5em; } .blocinterne.pratique div.tableau li { padding:0 1.5em; } .blocinterne.pratique div.tableau li:first-of-type { min-width:calc(10% - 1.5em); } .blocinterne.pratique div.tableau li:last-of-type { min-width:calc(10% - 1.5em); } .blocinterne.pratique div.tableau.vacances h3:after { width:calc(2 * 92%); } .blocinterne.pratique .fromrte p { font-size:0.9em; } .blocinterne.pratique div.tableau.vacances:before { top:-4em; right:-2em; } .blocinterne.pratique:not(.boolete) div.tableau.ete:before { right:10em; } .blocinterne.pratique div.liste > ul { padding-right:0; } .blocinterne.pratique div.liste > ul ul { width:100%; } .blocinterne.pratique div.liste > ul > li > ul > li { padding-right:5em; } .blocinterne.pratique div.liste > ul > li > ul > li span.tarif { right:3em; } .blocinterne.pratique div.liste.public > ul > li { width:40%; } .blocinterne.pratique div.liste.public > ul > li:nth-of-type(1) { width:40%; } .blocinterne.pratique div.liste.public > ul > li:last-of-type { width:40%; } .blocinterne.pratique.planning div.tableau ul:not(.legende) { font-size:0.8em; padding-right:0; } .blocinterne.pratique.planning div.tableau ul:not(.legende) li { min-width:11%; padding:0 1em; } .blocinterne.pratique.planning div.tableau ul:not(.legende) li:first-of-type { min-width:calc(11% - 1em); padding-left:0; } section.contact aside.coordscontact { min-height:50rem; } section#page-contact.contact div.contenu > div { min-height:50rem; } section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { padding-left:4rem; } section#page-contact.contact div.contenu > div { padding-right: calc(2rem + 2rem); } section.contact label > span, section.contact fieldset > div > span { padding-left:0.5em; } section.contact aside.mapcontact h2 { left:4rem; } footer .logo { height:8em; width:15em; } footer .infos .communes svg { height:4em; max-width:8em; } footer .infos > div > div, footer .infos > div > nav { min-width:24%; } footer .infos > div > div.communes { padding: 8em 2em 0 2em; min-width:36%; } footer .infos > div > div.sociaux { min-width:16%; } footer .infos { padding-left:2%; padding-right:2%; } footer .infos h2 { font-size:1.2em; } footer .copyright { padding:1em 2%; } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:800px), (orientation:landscape) and (max-width:500px) { html { font-size:24px; font-size:3vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header, header nav > ul > li, header aside, main, #home-activites ul li, #home-infospratiques ul li, #home-actu ul li, .blocinterne button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, footer .infos > div > div, footer .infos > div > nav, footer ul#coordsfooter li { font-size:1.2rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:94%; } div.nosmartphone br { display: none; content: ' '; clear:none; } header aside div { padding:1em 3.5em 1em 1.5em; } header aside div p { text-align:left; } header h1 { background-color:rgba(255,255,255,1); position:relative; text-align:left; width:100%; padding:0 0%; margin:0 0 calc(0.7em - 0.3em) 0; } header h1 > a { margin-top:0.7em; height:5em; } header h1 > span { display:block; position:relative; width:100%; margin-top:0.3em; margin-bottom:0.3em; text-align:center; padding:0; font-size:1.6em; line-height:1; opacity:1; overflow:hidden; height:1em; transition:margin 200ms linear 0ms, height 200ms linear 0ms; } .scroll header h1 > span { margin-top:calc(0.7em - 0.3em); margin-bottom:0; height:0; } body.showmenu header { height:100%; } body.showmenu header h1 { position:fixed; } body.showmenu header h1 > span { margin-top:calc(0.7em - 0.3em); margin-bottom:0; height:0; transition:margin 0ms linear 0ms, height 0ms linear 0ms; } header > div { overflow:auto; } header > div:before { z-index:1001; bottom:0.3em; } header nav > ul#coordscontact { background-color:rgba(255,255,255,1); position:absolute; top:6em; height:auto; padding:0; text-align:center; overflow:hidden; } header nav > ul#coordscontact > li > div { margin:1em 2em 1em 0; } header nav > ul#coordscontact > li.tel > div > span > span:first-of-type { display:none; } header nav > ul#coordscontact > li.localisation { display:none; } header nav > ul#coordscontact > li.contact > div { margin:0.5em 0 0.5em 2em; } header nav > ul#coordscontact > li.boutique > div { margin:0.5em 0 0.5em 0; } #showhidemenu { z-index:2100; position:fixed; display:inline-block; top:2em; right:2em; width:3em; height:3em; margin:0; padding:0; background-color:transparent; border:0; } #showhidemenu > svg { color:rgba(43,43,43,1); position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; } #showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; } #showhidemenu > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); } #showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); } #showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,0) scaleX(1.25) rotate(0deg); } body.desktop #showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); } body.desktop #showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(0,0) scaleX(1); } body.desktop #showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(0deg); } body.showmenu #showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu #showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,14%) scaleX(1) rotate(45deg); } body.showmenu #showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu #showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); } body.showmenu #showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu #showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,-14%) scaleX(1) rotate(-45deg); } body.showmenu header aside { max-height:0; transition:max-height 1000ms ease 100ms;; } header > div { height:100%; } header nav { display:none; z-index:100; background-color:transparent; } body.showmenu header nav { display:inline-block; z-index:1100; } header nav ul { position:relative; } header nav > ul#menu { padding-bottom:5rem; position:absolute; left:0; width:100%; height:auto; max-height:0; overflow:hidden; transition:max-height ease 500ms; background-color:rgba(255,255,255,1); } header nav > ul#menu { top:calc(1.2 * (5rem + (2 * 0.7rem) + 3.5rem)); } header nav > ul#menu li { text-align:left; display:block; opacity:0; transition:opacity 300ms linear 0ms; } header nav > ul#menu ul > li { padding-left:1.2em; } body.showmenu header nav > ul#menu { max-height:200vh; } body.showmenu header nav > ul#menu li { opacity:1; transition:opacity 300ms linear 500ms; } body.showmenu main, body.showmenu footer { opacity:0; } header nav > ul#menu > li > button { color:rgba(43,43,43,1); } header nav > ul#menu > li.current > button { color:#42B38E; } body.desktop header nav > ul#menu > li > button:hover, header nav > ul > li > button.hover { color:#42B38E; } header nav > ul#menu ul > li.current > button { color:#42B38E; } body.desktop header nav > ul#menu ul > li > button:hover, header nav > ul ul > li > button.hover { color:#42B38E; } header nav > ul#menu > li > button { font-size:1.1em; margin:1.5em 1em; line-height:0.9; } header nav > ul#menu ul > li > button { color:rgba(43,43,43,1); font-size:1em; margin:1.3em 1em; line-height:0.9; } main { margin-top:8.4em; } #home-diaporama { padding-bottom:calc((1741/1080) * 100%); } #home-diaporama .slide div.legende { left:5%; width:calc(100% - (2 * 5%)); bottom:4em; } #home-diaporama div.legende > span { font-size:1.4em; } #home-diaporama div.legende > h2 { font-size:2.6em; } #home-diaporama div.communes li:not(:last-of-type) { margin-right:1.5em; } #home-diaporama div.communes svg { height:3em; max-width:7em; } #home-diaporama div.logo { padding:1.5em 2.5em 1.5em 2em; } #home-diaporama div.logo svg { height:7em; } #home-diaporama .sport div.legende > span { font-size:calc(1.1 * 2em); top:2.8em; } #home-diaporama .sport div.legende > h2 { font-size:calc(1.1 * 3.8em); } #home-diaporama .base div.legende > span { font-size:calc(1.1 * 2em); } #home-diaporama .base div.legende > h2 { font-size:calc(1.1 * 2.5em); } #home-activites ul li { width:calc(100% - (2 * 1rem)); padding-bottom:calc((100% * 722 / 1175)); } #home-activites ul li.clubs { padding-bottom:calc((100% * 551/1175)); } #home-activites ul li h2 { font-size:1.8em; } #home-infospratiques ul li { width:100%; padding-bottom:calc((100% * 753 / 1275)); } #home-infospratiques ul li.horaires, #home-infospratiques ul li.tarifs { width:50%; padding-bottom:calc((100% * 753 / 1275) / 2); } #home-infospratiques ul li.tarifs { position:absolute; left:0; top:75%; } #home-infospratiques ul li.contact { width:50%; } #home-infospratiques ul li.contact:after { bottom:2em; } #home-infospratiques ul li.piscine h2 { font-size:2em; } #home-infospratiques ul li h2 { padding:0 10%; font-size:1.2em; } #home-actu ul li > span { font-size:3em; } #home-actu h2 { font-size:2.5em; } #home-actu ul li { width:100%; padding:0 2em 3em 2em; } .blocinterne { margin:2em auto; padding:2em 5%; } .blocinterne:first-of-type { margin-top:2em; } .blocinterne .detail { width:100%; margin-bottom:2em; } .blocinterne .detail > div { padding:2em 0; } .blocinterne .detail h2 { font-size:1.6em; padding:1em 5%; } .blocinterne .detail .fromrte { padding:2em 5%; } .blocinterne button { font-size:1rem; margin-left:0; margin-bottom:1em; padding:0.5em 1em; } .blocinterne button:first-of-type { margin-left:5%; } .blocinterne .detail.bassins > div:first-of-type { padding-bottom:0; } .blocinterne .detail.bassins h2 { padding:1.7em 5%; } .blocactivite .visuel { width:100%; height:auto; } .blocactivite img { width:100%; height:auto; } .blocinterne.clubs { padding-top:8em; } .blocinterne.clubs .detail h2 { color:rgba(255,255,255,1); } .blocinterne.clubs .visuel { position:absolute; top:0; left:0; width:100%; height:12em; overflow:hidden; } .blocinterne.clubs .visuel:before { background:transparent linear-gradient(180deg, transparent 0%, transparent 80%, #a5c3ce 100%) 0% 0% no-repeat padding-box; } .blocinterne.clubs img { width:100%; height:100%; } .blocinterne.clubs > ul { font-size:0.8em; padding:4em 5%; border-top:2px solid rgba(255,255,255,0.5); } .blocinterne.presentation { padding:0; } .blocinterne.presentation .detail { padding:2em; margin-bottom:20em; } .blocinterne.presentation h2 { font-size:1.2em; } .blocinterne.presentation h2 > b { font-size:0.8em; } .blocinterne.pratique h2 { font-size:1.7em; } .blocinterne.pratique h3 { font-size:1.5em; } .blocinterne.pratique div.tableau .bassin { padding:2em 0 0 5%; } .blocinterne.pratique div.tableau ul { padding:2em 0 2em 5%; } .blocinterne.pratique div.tableau li { min-width:33%; padding:0 1em; margin-top:2em; } .blocinterne.pratique div.tableau li:nth-of-type(1), .blocinterne.pratique div.tableau li:nth-of-type(2), .blocinterne.pratique div.tableau li:nth-of-type(3) { margin-top:0; } .blocinterne.pratique div.tableau li:nth-of-type(3n+1) { padding-left:0; min-width:calc(33% - 1em); } .blocinterne.pratique div.tableau li:nth-of-type(3n) { padding-right:0; border-right:0; min-width:calc(33% - 1em); } .blocinterne.pratique div.tableau li:last-of-type { min-width:calc(33% - 1em); } .blocinterne.pratique .fromrte p { font-size:0.9em; } .blocinterne.pratique .asterisque.fromrte { padding-top:4em; border-top:2px solid rgba(255,255,255,1); font-size:0.9em; } .blocinterne.pratique.planning .visuel { display:none; } .blocinterne.pratique.planning div.tableau { margin-bottom:0; } .blocinterne.pratique.planning div.tableau li { min-width:33%; } .blocinterne.pratique.planning div.tableau li:nth-of-type(3n+1) { min-width:calc(33% - 1em); } .blocinterne.pratique.planning div.tableau li:nth-of-type(3n) { min-width:calc(33% - 1em); } .blocinterne.pratique.planning div.tableau li:last-of-type { min-width:calc(33% - 1em); } .blocinterne.pratique.planning div.tableau .legende li { display:block; width:100%; margin-top:1em; } .blocinterne.pratique.planning div.tableau .legende li:nth-of-type(3n+1) { padding-left:1.8em; } .blocinterne.pratique div.liste > ul > li > ul > li { padding-right:5em; } .blocinterne.pratique div.liste > ul > li > ul > li span.tarif { right:0; } /* CONTACT */ section.contact aside.coordscontact { display:none; } section.contact form { padding-bottom:4rem; } section.contact fieldset { margin-bottom:2rem; } section.contact h2 { font-size:1.7rem; padding-top:0.2em; } section.contact aside > div, section.contact label, section.contact fieldset > div > span, section.contact span.asterisque, section.contact div.erreur { padding-left:0; } section.contact span.asterisque { font-size:0.8rem; margin:0 0 2rem 0; } section.contact aside.mapcontact, section.contact aside.mapcontact > div { padding-bottom:100%; } /* FOOTER */ footer { text-align:center; } footer > svg { width:75%; transform:translate(40%, -5%) rotate(15deg); } footer .logo { height:8em; margin-bottom:3em; } footer .infos { padding-left:0%; padding-right:0%; } footer .copyright { padding:1em 0%; } footer .infos > div > div { margin-bottom:2em; } footer .infos > div > div:nth-of-type(3) { margin-top:4em; margin-bottom:4em; } footer .infos h2 { font-weight:300; font-size: 1.6em; margin-bottom:0.8em; } footer .infos > div > div.communes { margin-bottom:4em; } footer .infos .communes svg { height:4em; max-width:10em; } footer .infos .sociaux svg { height:2.8em; } footer div.sociaux li:not(:last-of-type) { margin-right:2em; } footer .infos .coords { padding-bottom:12em; margin-bottom:1em; } footer .infos .email { display:none; } footer .infos .tel { position:absolute; bottom:5.2em; font-size:1.3em; left:50%; transform:translateX(-50%); } footer ul#coordsfooter { display:block; width:100%; font-size:0; position:absolute; bottom:0; left:50%; transform:translateX(-50%); height:auto; padding:0; text-align:center; overflow:hidden; } footer ul#coordsfooter li { display:inline-block; position:relative; width:auto; margin:0; padding:0; text-transform:uppercase; } footer ul#coordsfooter > li > div { color:rgba(200,200,200,1); padding:0; margin:0 1em; line-height:1; } footer ul#coordsfooter div > button, footer ul#coordsfooter div > span, footer ul#coordsfooter div > a { font-size:1em; font-weight:400; text-transform:uppercase; line-height:1; position:relative; display:inline-block; vertical-align:middle; } footer ul#coordsfooter div > button { background-color:#42B38E; border-color:#42B38E; border-radius:1em; padding:0.5em 1.5em; } footer ul#coordsfooter svg { position:relative; display:inline-block; vertical-align:top; height:1.6em; width:auto; left:0; transform:translateY(-0.5em); } footer ul#coordsfooter li.localisation svg { margin-right:0.5em; } footer ul#coordsfooter li.localisation circle { fill:#42B38E; } footer ul#coordsfooter > li.contact > div { margin:0.5em 0 0.5em 2em; } footer ul#coordsfooter > li.boutique > div { margin:1em 0 0.5em 0; } footer .copyright { text-align:center; background-color:rgba(255,255,255,1); color:rgba(43,43,43,1); padding-top:2em; } footer .copyright span { text-align:center; padding:0 0.8em; margin:1em 0 2em 0; } footer .copyright span:first-of-type { display:block; margin-bottom:1.5em; } footer .copyright span:last-of-type:before { content:''; position:absolute; left:-2px; top:50%; transform:translateY(-50%); width:1px; height:0.8em; background-color:rgba(200,200,200,0.6); } section.mentionslegales { font-size:0.9rem; } section#page-authentification { width:80%; } .section-auth { width:80%; } main > form { margin-top:8.4em; } } /* AFFICHAGE MINI */ @media (max-width:300px) { body { overflow-x:scroll; } html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } main { width:300px; margin-top:0 !important; } footer { width:300px; } }