/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* 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(18,18,18,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:999990; 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.azimut-sport.com/_chartes_/azimut/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; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,1) inset !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; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header, header aside, main, #accueil-materiel ul li, #accueil-avantages ul li, #accueil-location > ul > li, #accueil-shopavantages > ul > li, #accueil-actualites > ul > li, #accueil-marques > ul > li, #page-location > ul > li, #page-location > ul > li .infostarif > div, #page-partenaires > ul > li, #page-materiel > ul > li, #page-atelier > div, #page-sorties > ul > li, .listepanier > ul > li > .sizecart li, #page-panier form.checkout fieldset.facturation > label, ul.liste-commandes > li > div > span, ul.liste-commandes > li > div > button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, .section-auth form > label, .section-auth form > div, .section-auth form > button, .nav-cartauth ul > li, footer .infos > div > div, footer .infos > div > nav { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { margin:0 auto; padding:0; } 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(18,18,18,1); border-radius:50%; } .fromrte hr { background-color:rgba(18,18,18,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; } .popin #en2mots main { transform:none; } .ajaxloader svg { width:6%; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ header { z-index:1000; position:fixed; left:0; top:0; width:100%; height:auto; background-color:transparent; color:rgba(18,18,18,1); overflow:hidden; } header aside { position:relative; display:block; background-color:rgba(49,50,106,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:7em; 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 { position:relative; display:inline-block; vertical-align:bottom; padding-left:calc(1em * (1 / 1.4) ); padding-bottom:calc(0.3em * (1 / 1.4) ); font-size:1.4em; text-transform:uppercase; font-weight:300; } header h1 > span b { display:block; font-weight:600; } header h1 > span i { display:block; font-weight:300; font-style:normal; } 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 5%; background-color:transparent; text-align:right; } 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:400; padding:0; background-color:transparent; color:rgba(18,18,18,1); border:0; text-transform:uppercase; } body.desktop header nav ul > li > button:hover { background-color:transparent; color:rgba(18,18,18,1); } 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:rgba(18,18,18,1); } body.desktop header nav > ul#menu > li > button:hover, header nav > ul > li > button.hover { color:rgba(18,18,18,1); } header nav > ul#menu ul > li.current > button { color:rgba(0,155,221,1); } body.desktop header nav > ul#menu ul > li > button:hover, header nav > ul ul > li > button.hover { color:rgba(0,155,221,1); } header nav > ul#coordscompte { height:2.97em; top:0; background-color:rgba(18,18,18,1); color:rgba(255,255,255,1); } header nav > ul#coordscompte li { position:relative; height:100%; width:auto; margin:0; padding:0 3px 0 0; border-right: 1px solid rgba(255,255,255,0.6); } header nav > ul#coordscompte li:nth-of-type(2) { border-left: 1px solid rgba(255,255,255,0.6); } header nav > ul#coordscompte > li > button, header nav > ul#coordscompte > li > div { color:rgba(255,255,255,1); padding:0; margin:1.2em 1.5em; font-size:0.9em; line-height:0.9; } header nav > ul#coordscompte > li > div { margin-left:3em; margin-right:3em; } header nav > ul#coordscompte button > span, header nav > ul#coordscompte div > span { font-weight:300; text-transform:none; line-height:1; position:relative; display:inline-block; vertical-align:top; } header nav > ul#coordscompte svg { position:relative; display:inline-block; vertical-align:top; height:1.6em; width:auto; left:0; transform:translateY(-0.3em); } header nav > ul#coordscompte li.localisation svg { margin-right:0.5em; } header nav > ul#coordscompte li.compte button > span { text-transform:uppercase; } header nav > ul#coordscompte li.compte svg { margin-left:1em; } header nav > ul#coordscompte a { font-weight:400; } body.desktop header nav > ul#coordscompte a:hover { text-decoration:none; } main { transform:translateY(-0.3em); } footer { transform:translateY(-0.3em); overflow:visible; } footer .copyright { transform:translateY(0.3em); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAIN */ main { margin:10em 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(18,18,18,1); } b, strong { font-weight:400; } p { text-align:inherit; } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL */ /* Diaporama */ #accueil-diaporama { z-index:5; position:relative; display:block; width:100%; height:0; padding:0; padding-bottom:calc((668/2550) * 100%); margin:0; overflow:hidden; } #accueil-diaporama ul#diaporama-slides { position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; } #accueil-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; } #accueil-diaporama .fadein { z-index:5; opacity:1; transition: opacity 1000ms linear 200ms; } #accueil-diaporama .slide img { z-index:11; position:absolute; width:100%; height:auto; top:0; left:50%; transform:translateX(-50%); } #accueil-diaporama .slide:before { z-index:12; content:''; position:absolute; left:0; top:0; height:100%; width:100%; } #accueil-diaporama .slide svg { z-index:13; position:absolute; height:auto; color:rgba(38,28,66,0.75); } #accueil-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; } #accueil-diaporama .fadein div.legende { opacity:1; transition: opacity 0ms linear 0ms; } #accueil-diaporama div.legende > h1 { color:inherit; font-size:1em; line-height:1.1; font-weight:700; display:block; text-transform:uppercase; } #accueil-diaporama div.legende > h1 > span { display:block; font-size:3.2em; line-height:1.1; font-weight:700; line-height:1.1; } #accueil-diaporama div.legende > span { color:inherit; display:block; font-size:1.8em; font-weight:300; padding-top:1em; line-height:1.1; } #accueil-diaporama .slide:before { background:linear-gradient(to right, rgba(255,255,255,0.9), 30%, rgba(255,255,255,0.9), 60%, transparent); } #accueil-diaporama .slide.cauterets:before { background:linear-gradient(to right, rgba(180,203,217,0.9), 10%, rgba(180,203,217,0.9), 50%, transparent); } #accueil-diaporama .slide.casque:before { background:linear-gradient(to right, rgba(49,50,106,0.9), 30%, rgba(49,50,106,0.9), 60%, transparent); } #accueil-diaporama .slide.packs:before { background:linear-gradient(to right, rgba(110,179,194,0.9), 30%, rgba(110,179,194,0.9), 60%, transparent); } #accueil-diaporama .slide.jours:before { background:linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 65%, transparent); } #accueil-diaporama .slide.cauterets h1 > span:nth-of-type(1) { font-weight:300; } #accueil-diaporama .slide.cauterets h1 > span:nth-of-type(2) { } #accueil-diaporama .slide.cauterets h1 > span:nth-of-type(3) { font-size:5em; padding-top:0.2em; } #accueil-diaporama .slide.casque h1 > span:nth-of-type(1) { font-weight:300; } #accueil-diaporama .slide.casque h1 > span:nth-of-type(2) { font-size:5em; } #accueil-diaporama .slide.casque h1 > span:nth-of-type(3) { font-size:5em; } #accueil-diaporama .slide.packs h1 > span:nth-of-type(1) { font-weight:300; } #accueil-diaporama .slide.packs h1 > span:nth-of-type(2) { font-size:5.5em; } #accueil-diaporama .slide.packs h1 > span:nth-of-type(2) i { position:absolute; top:0.8em; left:0.25em; font-size:0.25em; font-weight:300; font-style:normal; } #accueil-diaporama .slide.packs h1 > span:nth-of-type(2) i:nth-of-type(2) { left:11.8em; } #accueil-diaporama .slide.packs h1 > span:nth-of-type(3) { font-size:2em; font-weight:300; text-transform:none; } #accueil-diaporama .slide.packs h1 > span:nth-of-type(4) { } #accueil-diaporama .slide.packs h1 > span:nth-of-type(5) { font-size:2.6em; font-weight:400; text-transform:none; } #accueil-diaporama .slide.jours div.legende { padding:0; } #accueil-diaporama .slide.jours div.legende > h1 { background-repeat:no-repeat; background-position: center center; background-size:cover; color: transparent; background-clip: text; -webkit-text-fill-color : transparent; -webkit-background-clip: text; padding:0 45% 0 15%; font-size:5em; } #accueil-diaporama .slide.jours div.legende span { display:none; } #accueil-diaporama ul#diaporama-bullets { display:none; position:absolute; z-index:10; left:2rem; bottom:1.5rem; font-size:0; margin:0; padding:0; } #accueil-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 #accueil-diaporama ul#diaporama-bullets li:hover, #accueil-diaporama ul#diaporama-bullets li.current { cursor:pointer; background-color:rgba(0,155,221,1); } /* OFFRE FLASH */ #accueil-flash { z-index:6; padding:1.5em 15%; background-color:rgba(49,50,106,1); box-shadow:0 0 0.3em rgba(0,0,0,0.6); text-align:center; } #accueil-flash > div { display:inline-block; margin:0 auto; width:auto; } #accueil-flash > div > svg { position:relative; width:17em; height:auto; color:rgba(255,255,255,1); } #accueil-flash > div > div { position:relative; display:block; padding: 0; color:rgba(255,255,255,1); } #accueil-flash .periode { font-size:1em; font-weight:300; text-transform:uppercase; padding-bottom:0.5em; } #accueil-flash .offre { font-size:1.05em; font-weight:400; text-transform:uppercase; } #accueil-flash .asterisque { font-size:0.6em; font-weight:300; padding-top:1.2em; } #accueil-flash sup { font-size:0.9em; font-weight:300; top:-0.1em; } /* MATERIEL */ #accueil-materiel h1 { text-align:center; font-size:2.4em; font-weight:300; text-transform:uppercase; margin:2em auto 0 auto; display:block; } #accueil-materiel h1 > b { display:block; font-weight:600; } #accueil-materiel ul { font-size:0; position:relative; display:block; margin:1rem; padding:0; } #accueil-materiel ul li { height:0; margin:1rem; padding:0; position:relative; display:inline-block; background-color:rgba(255,255,255,1); overflow:hidden; } #accueil-materiel ul li h2 { z-index:23; font-size:2.2rem; 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; } #accueil-materiel 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%; } #accueil-materiel ul li:before { z-index:22; content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(49,50,106,0.6); opacity:0; transition:opacity ease 300ms; } body.desktop #accueil-materiel ul li:hover:before, body.desktop #accueil-materiel ul li.hover:before { opacity:1; } body.desktop #accueil-materiel ul li a { text-decoration:none; } /* AVANTAGES */ #accueil-avantages { z-index:2; margin:0; padding:4em 5em; background-color:rgba(244,244,244,1); text-align:center; overflow:visible; } #accueil-avantages h1 { font-size:4em; font-weight:300; text-transform:uppercase; max-width:15em; margin:0 auto; display:inline-block; } #accueil-avantages h1 { display:none; } #accueil-avantages ul { position:relative; display:flex; flex-wrap:wrap; gap:2em; margin:0; padding:0; } #accueil-avantages ul li { margin:0; padding:2em 2em; position:relative; display:inline-block; vertical-align:top; text-align:center; background-color:rgba(255,255,255,1); border-radius:1em; overflow:hidden; } #accueil-avantages ul li img { display:block; margin:0 auto; padding:0; height:4em; width:auto; margin-bottom:1em; } #accueil-avantages ul li h2 { font-size:2em; font-weight:600; text-transform:uppercase; padding:0 0 2em 0; margin:0; display:block; } #accueil-avantages ul li div { text-align:left; } /* INFOS TARIFS */ #page-infostarifs { z-index:2; margin:0; padding:4em 5em; background-color:rgba(244,244,244,1); text-align:center; overflow:visible; } #page-infostarifs h1 { font-size:2.4em; font-weight:300; text-transform:uppercase; margin:0 auto 1.5em auto; display:block; } #page-infostarifs > div { display:flex; gap:5em; flex-wrap:nowrap; max-width:70%; margin:0 auto; } #page-infostarifs > div > div { margin:2em 0; display:inline-block; vertical-align:top; text-align:left; width:100%; } /* LOCATION MATERIEL */ #accueil-location { margin:0; padding:4em 5em; background-color:rgba(255,255,255,1); text-align:center; } #accueil-location > ul { position:relative; display:block; margin:0; padding:0; font-size:0; } #accueil-location > ul > li { position:relative; display:inline-block; vertical-align:top; width:100%; margin:0 0 2em 0; padding:0; list-style-type:none; overflow:hidden; } #accueil-location li > img { display:inline-block; width:100%; height:auto; border-radius:1em; overflow:hidden; } #accueil-location li > div { position:relative; display:inline-block; width:100%; height:auto; padding:1em 0; } #accueil-location h1 { font-size:1.8em; font-weight:600; text-transform:uppercase; margin:0 auto; display:block; padding:0 0 0.8em 0; } #accueil-location a { font-size:1.2em; cursor:pointer; border-radius:0.5em; border:0; outline:0; margin:2em 0 0 0; padding:0.7em 2em; border:0; position:relative; display:inline-block; vertical-align:middle; line-height:1; font-weight:400; } #accueil-location a { background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); } body.desktop #accueil-location a:hover { background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); text-decoration:none; } /* ACTUALITES */ #accueil-actualites { position:relative; margin:0; padding:4em 5%; text-align:center; vertical-align:top; } #accueil-actualites h1 { position:relative; font-size:3.4em; font-weight:300; text-transform:uppercase; padding:0 0 1em 0; text-align:center; } #accueil-actualites > ul { position:relative; display:block; margin:0; padding:0; font-size:0; } #accueil-actualites > ul > li { position:relative; display:inline-block; vertical-align:top; width:calc(25% - (2 * 1%)); margin:0 1%; padding:0; border:1px solid rgba(100,100,100,1); list-style-type:none; overflow:hidden; } #accueil-actualites > ul > li > div.visuel { position:absolute; margin:0; padding:0; border:0; outline:0; top:0; left:-3px; width:calc(100% + 6px); height:0; padding-bottom:100%; background-position:center; background-size:cover; } #accueil-actualites > ul > li > div.post { position:relative; display:block; font-size:1em; color:rgba(18,18,18,1); padding:100% 2em 5em 2em; } #accueil-actualites > ul > li > div.post:after { content:''; position:absolute; bottom:4em; left:2em; right:2em; height:0.5px; background-color:rgba(100,100,100,1); } #accueil-actualites > ul > li h2 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1.2em; color:rgba(18,18,18,1); text-transform:uppercase; font-weight:400; } #accueil-actualites > ul > li h3 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1em; color:rgba(18,18,18,1); text-transform:uppercase; font-weight:400; } #accueil-actualites > ul > li h4 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1em; color:rgba(18,18,18,1); text-transform:uppercase; font-weight:300; } #accueil-actualites > ul > li h5 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1em; color:rgba(18,18,18,1); text-transform:uppercase; font-weight:300; } #accueil-actualites > ul > li > div.pubdate { position:absolute; left:2em; bottom:1em; color:rgba(18,18,18,1); } #accueil-actualites > ul > li .reseau { position:absolute; right:2em; bottom:1em; width:2em; height:2em; } #accueil-actualites > ul > li .reseau svg { position:absolute; left:0; top:0; width:100%; height:100%; } #accueil-actualites .fromrte li:before { background-color:rgba(134,134,134,1); } #accueil-actualites > div { text-align:left; } #accueil-actualites .eapps-facebook-feed-item-author-name a { font-size:1.1em !important; } #accueil-actualites .eui-item-text { font-size:1.1em !important; } /* MARQUES */ #accueil-marques { position:relative; margin-top:2rem; margin-bottom:2rem; text-align:center; } #accueil-marques h1 { position:relative; text-align:left; line-height:1; font-size:2.2em; font-weight:300; text-transform:uppercase; padding:0 7.5% 1.5em 7.5%; } #accueil-marques > h1 strong, #accueil-marques > h1 b { font-weight:600; } #accueil-marques .fromrte { padding:0 7.5% 1.5em 7.5%; } #accueil-marques .fromrte table { width:100%; } #accueil-marques .fromrte table tr:nth-of-type(1) { background-color:rgba(80,80,80,1); color:rgba(255,255,255,1); } #accueil-marques .fromrte table tr:nth-of-type(2n+1) { background-color:rgba(80,80,80,1); color:rgba(255,255,255,1); } #accueil-marques .fromrte table th { padding:0.3em 0; text-align:center; } #accueil-marques .fromrte table td { padding:0.3em 0; } #accueil-marques ul { font-size:0; position:relative; display:block; margin:0 auto; padding:1px 0; height:auto; width:85%; text-align:center; overflow:hidden; border-top:1px solid rgba(100,100,100,1); border-bottom:1px solid rgba(100,100,100,1); } #accueil-marques li { position:relative; display:none; margin-left:2%; margin-bottom:0; width:15%; height:0; padding-bottom:10%; text-align:center; } #accueil-marques li:first-of-type { margin-left:0; } #accueil-marques li div { position:absolute; overflow:hidden; width:100%; height:calc(100% - 1em); transition:height 200ms linear 0ms; top:50%; transform:translateY(-50%); } #accueil-marques li img { position:absolute; left:50%; top:50%; max-width:100%; max-height:66%; transform:translate(-50%,-50%); opacity:1; transition:opacity 100ms linear 100ms; } #accueil-marques li:nth-child(-n+6) { display:inline-block; } #accueil-marques li.clignote div { height:0; } #accueil-marques li.clignote img { opacity:0; transition:opacity 100ms linear 0ms; } /* METEO */ aside#meteo { padding:6em 2% 4em 2%; text-align:center; } aside#meteo button { font-size:1.8em; font-weight:400; position:relative; padding:0.8em 2em 0.8em 6em; text-align:left; border-radius:50%; } aside#meteo button svg { position:absolute; left:2em; top:50%; transform:translateY(-50%); width:3em; height:auto; } aside#meteo button { background-color:rgba(71,71,71,1); border-color:rgba(71,71,71,1); color:rgba(255,255,255,1); } body.desktop aside#meteo button:hover { background-color:rgba(71,71,71,1); border-color:rgba(71,71,71,1); color:rgba(255,255,255,1); } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* FORM LOCATION */ #focusable { position:absolute; z-index:-1; opacity:0; left:0; top:0; height:0; clear:both; } #modal-location { z-index:-1; opacity:0; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); } #modal-location.display { z-index:999999; opacity:1; } #modal-location > div { max-width:80vw; max-height:60vh; opacity:0; transition: opacity 500ms ease; background-color:rgba(255,255,255,1); border-radius:0.5em; padding:2rem 4rem; position:absolute; left:50%; top:50%; width:auto; height:auto; transform:translate(-50%,-50%); } #modal-location.display > div { opacity:1; } #modal-location > div > svg { cursor:pointer; position:absolute; right:2rem; top:calc(2rem + 0.2em); width:1em; height:auto; stroke-width:5; } #modal-location > div h2 { text-align:center; text-transform:uppercase; font-weight:300; font-size:1.4em; padding:0 2em 1.5em 2em; } #modal-location > div p { text-align:left; font-size:1.2em; } #modal-location > div p.asterisque { font-size:0.9em; text-align:left; } #modal-location > div p sup { font-size:0.9em; color:rgba(0,155,221,1); font-weight:400; top:-0.1em; } #form-location { z-index:5; display:block; position:relative; padding:0; margin:0; text-align:center; } #form-location form { position:relative; display:block; margin:0 auto; padding:0; border:0; width:auto; text-align:center; } #form-location fieldset { position:relative; display:block; font-size:0; margin:0; padding:0; border:0; outline:0; } #form-location svg { display:inline-block; vertical-align:middle; margin-left:1em; height:0.8em; width:auto; stroke-width:10; } #form-location .accueil svg { display:none; } #form-location .fermeture fieldset:first-of-type svg { display:none; } #form-location h1, #form-location span, #form-location input, #form-location select { position:relative; display:inline-block; vertical-align:middle; line-height:1; margin:0; padding:1.5em 2em; height:auto; font-weight:400; border-radius:0; border:0; outline:0; text-align:left; } #form-location form:not(.fermeture) h1 { font-weight:400; } #form-location label { font-size:0; position:relative; display:inline-block; vertical-align:middle; line-height:1; margin:0; padding:0; } #form-location label > input, #form-location label > select { font-family:Rubik, sans-serif; cursor:pointer; text-transform:uppercase; z-index:1; } #form-location select { padding-right:2em !important; background-position:calc(100% - 1em) center !important; } #form-location fieldset:first-of-type label > span { z-index:3; } #form-location fieldset:first-of-type label > input, #form-location fieldset:first-of-type label > select { z-index:2; } #form-location fieldset:first-of-type label.myselect > span { z-index:1; } #form-location fieldset:first-of-type label.mydate > span { cursor:pointer; } #form-location fieldset:first-of-type label.mydate.focus > span { z-index:1; } #form-location fieldset:first-of-type label.myinput > span { cursor:pointer; } #form-location fieldset:first-of-type label.myinput > div.asterisque { z-index:3; font-size:0.6rem; position:absolute; left:1em; bottom:0.5em; text-transform:none; font-style:normal; color:rgba(54,54,54,0.55); } #form-location fieldset:first-of-type label.myinput.focus > span { z-index:1; } #form-location button { cursor:pointer; border-radius:0; border:0; outline:0; margin:0; padding:1.5em 2em; border:0; position:relative; display:inline-block; vertical-align:middle; text-transform:uppercase; line-height:1; font-weight:400; } #form-location button[type=submit] { background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); } body.desktop #form-location button[type=submit]:hover { background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); } body.desktop #form-location label.mydate > span:hover, body.desktop #form-location label.mydate > input:hover, body.desktop #form-location label.myselect > select:hover { color:rgba(0,133,181,1); } #form-location label.myselect > select.placeholder { color:rgba(18,18,18,1) !important; } body.desktop #form-location label.myselect > select.placeholder:hover { color:rgba(0,133,181,1) !important; } body.desktop #form-location label.myinput > span:hover, body.desktop #form-location label.myinput > input:hover { color:rgba(0,133,181,1); } #form-location label.mydate > input, #form-location label.mydate > input:-webkit-autofill, #form-location label.mydate > input:-webkit-autofill:hover, #form-location label.mydate > input:-webkit-autofill:focus, #form-location label.mydate > input:-webkit-autofill:active { outline:0; background-color:rgba(179,179,179,1); -webkit-box-shadow: 0 0 0 4em rgba(179,179,179,1) inset !important; } #form-location label.myinput > input, #form-location label.myinput > input:-webkit-autofill, #form-location label.myinput > input:-webkit-autofill:hover, #form-location label.myinput > input:-webkit-autofill:focus, #form-location label.myinput > input:-webkit-autofill:active { outline:0; background-color:rgba(200,200,200,1); -webkit-box-shadow: 0 0 0 4em rgba(200,200,200,1) inset !important; } #form-location label.myinput > input { width:calc(100% - 2.4em); } #form-location label.myinput > svg { display:inline-block; vertical-align:middle; z-index:2; position:absolute; right:1.5em; top:50%; transform:translateY(-50%); padding:0; margin:0; height:0.9em; width:auto; color:rgba(110,110,110,1); } #form-location fieldset:first-of-type label.myinput > svg { display:inline-block; } #form-location fieldset:first-of-type label.myinput.value > svg { display:inline-block; } /* RESULTS LOCATION */ #page-location { background: url('https://www.azimut-sport.com/_chartes_/azimut/ressources/images/placeholders/fond.jpg') center bottom no-repeat; background-size:cover; } #page-location > ul { margin:0; padding:0 3%; font-size:0; } #page-location > ul > li { background-color:transparent; display:inline-block; list-style-type:none; vertical-align:top; margin:2rem 0; padding:0; border-radius:1rem; overflow:hidden; } #page-location > ul > li h3 { font-weight:400; font-size:1.6em; z-index:30; line-height:1; padding:1rem 2rem 0.7rem 2rem; background-color:rgba(71,71,71,1); color:rgba(255,255,255,1); width:100%; } #page-location > ul > li h3 > b, #page-location > ul > li h3 > strong { font-weight:300; text-transform:uppercase; } #page-location > ul > li > div { background-color:rgba(255,255,255,1); position:relative; height:calc(100% - 1.6em - 1.7rem); width:100%; padding:1.5rem 2rem 2rem 2rem; } #page-location > ul > li .descriptif { display:none; z-index:2; margin:0 0 1rem 0; width:100%; font-size:0.9em; } #page-location > ul > li .descriptif.visible { display:block; } #page-location > ul > li .niveau { z-index:2; margin:0 0 1rem 0; width:100%; } #page-location > ul > li .niveau h4 { font-weight:300; font-size:1.3em; line-height:1; position:relative; display:inline-block; vertical-align:middle; margin-right:0.5rem; } #page-location > ul > li .niveau h4 > b, #page-location > ul > li .niveau h4 > strong { font-weight:300; text-transform:uppercase; } #page-location > ul > li .niveau span { font-size:0; line-height:1; position:relative; display:inline-block; vertical-align:middle; } #page-location > ul > li .niveau em { font-size:0; position:relative; display:inline-block; vertical-align:middle; width:1.4rem; height:1.4rem; margin-left:0.5rem; border-radius:50%; background-color:transparent; } #page-location > ul > li .niveau em:nth-of-type(1) { background-color:rgba(96,179,75,1); } #page-location > ul > li .niveau em:nth-of-type(2) { background-color:rgba(89,144,209,1); } #page-location > ul > li .niveau em:nth-of-type(3) { background-color:rgba(222,86,70,1); } #page-location > ul > li .niveau em:nth-of-type(4) { background-color:rgba(45,45,45,1); } #page-location > ul > li .niveau em:after { content:''; position:absolute; width:30%; height:30%; left:50%; top:50%; transform:translate(-50%,-50%); background-color:rgba(255,255,255,1); border-radius:50%; } #page-location > ul > li .visuels { z-index:2; margin:0 0 1rem 0; width:100%; height:0; padding-bottom:90%; } #page-location > ul > li .visuels > img { position:absolute; display:inline-block; vertical-align:bottom; width:auto; bottom:0; } #page-location > ul > li .visuels > img:not(.baton) { height:100%; display:none; left:0; } #page-location > ul > li .visuels > img:not(.baton).visible { display:inline-block; } #page-location > ul > li .visuels > img.baton { z-index:5; height:50%; left:25%; } #page-location > ul > li .visuels > label { z-index:4; position:absolute; right:1rem; height:40%; width:auto; margin:0; padding:0; } #page-location > ul > li .visuels > label:first-of-type { top:2rem; } #page-location > ul > li .visuels > label:last-of-type { bottom:0; } #page-location > ul > li .visuels > label span > img { height:10em; width:auto; display:inline-block; vertical-align:middle; } #page-location > ul > li .visuels input[type="radio"] + span { padding-top:0.15em !important; padding-bottom:0.15em !important; padding-left:2em !important; line-height:1; display:inline-block; vertical-align:middle; } #page-location > ul > li .visuels input[type="radio"] + span:before, #page-location > ul > li .visuels input[type="checkbox"] + span:before, #page-location > ul > li .visuels input[type="radio"] + span:after, #page-location > ul > li .visuels input[type="checkbox"] + span:after { font-size:1.3em; width:1em !important; height:1em !important; border-radius:0 !important; display:inline-block; vertical-align:middle; border-width:2px !important; } #page-location > ul > li .visuels input[type="radio"] + span:before, #page-location > ul > li .visuels input[type="checkbox"] + span:before { border-color:rgba(175,175,175,1) !important; } #page-location > ul > li .visuels input[type="radio"]:checked + span:before, #page-location > ul > li .visuels input[type="checkbox"]:checked + span:before { border-color:rgba(0,170,233,1) !important; } #page-location > ul > li .visuels input[type="radio"] + span:after, #page-location > ul > li .visuels input[type="checkbox"] + span:after { background-color:rgba(0,170,233,1) !important; } #page-location > ul > li .visuels input[type="radio"]:checked + span:after, #page-location > ul > li .visuels input[type="checkbox"]:checked + span:after { background: transparent url('https://www.azimut-sport.com/_chartes_/azimut/ressources/images/navigation/coche.svg') center center no-repeat !important; background-size:contain; transform:scale(1) !important; } #page-location > ul > li .visuels > label > input[type="checkbox"] + span { padding-top:0 !important; padding-left:0 !important; padding-right:1em !important; line-height:1; } #page-location > ul > li .visuels > label > input[type="checkbox"] + span:before, #page-location > ul > li .visuels > label > input[type="checkbox"] + span:after { left:calc(100% - 0.5em - 2px) !important; } #page-location > ul > li .visuels .type { position:absolute; top:0; right:0.5rem; padding-bottom:1em; font-size:1em; line-height:1; } #page-location > ul > li .visuels .type label { margin-left:2rem; } #page-location > ul > li .visuels .type label:first-of-type { margin-left:0; } #page-location > ul > li .infostarif { z-index:11; font-size:0; } #page-location > ul > li .infos { display:inline-block; vertical-align:top; width:43%; } #page-location > ul > li .tarif { display:inline-block; vertical-align:top; width:57%; } #page-location > ul > li .infos button.more { cursor:pointer; color:rgba(18,18,18,1); background-color:transparent; border:0; text-align:left; font-weight:400; font-size:0.95em; line-height:1; padding:0 0 0 2.5em; margin:0.2em 0 1em 0; max-width:12em; } #page-location > ul > li .infos button.more svg { position:absolute; left:0; top:50%; transform:translateY(-50%); width:2em; height:2em; border-radius:50%; border:1px solid rgba(18,18,18,1); } #page-location > ul > li .infos button.more svg line { stroke-width:8; transform:rotate(45deg) scale(0.4); transform-origin:center center; } body.desktop #page-location > ul > li .infos button.more:hover { color:rgba(18,18,18,1); } body.desktop #page-location > ul > li .infos button.more:hover svg { background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); } #page-location > ul > li .infos div { font-size:0.8em; color:rgba(100,100,100,1); } #page-location > ul > li .tarif { text-align:right; } #page-location > ul > li .tarif .barre { font-size:1em; } #page-location > ul > li .tarif .barre del { text-decoration:line-through; } #page-location > ul > li .tarif .promo { font-size:1em; position:absolute; right:8em; top:50%; transform:translateY(-50%); background-color:rgba(98,166,89,1); border-radius:50%; width:4em; height:4em; } #page-location > ul > li .tarif .promo > span { position:absolute; display:block; left:50%; top:50%; width:auto; height:1em; line-height:1; transform:translate(-50%,-50%); font-size:1.2em; color:rgba(255,255,255,1); font-weight:500; margin:0; padding:0; border:0; } #page-location > ul > li .tarif .promo > svg { position:absolute; left:0; top:0; width:100%; height:100%; color:rgba(40,75,39,1); } #page-location > ul > li .tarif .applique { font-size:2em; color:rgba(0,155,221,1); font-weight:500; } #page-location > ul > li .tarif .applique > svg { position:relative; display:inline-block; vertical-align:baseline; height:0.6em; width:auto; padding-right:0.2em; } #page-location > ul > li .tarif .applique > span { font-weight:300; } #page-location > ul > li .tarif .indefini { display:inline-block; width:auto; font-size:1em; line-height:1.1; color:rgba(0,155,221,1); font-weight:400; padding:0.7em 1em; border:1px solid rgba(0,155,221,1); border-radius:0.5rem; text-align:center; text-transform:uppercase; } #page-location > ul > li .showcart { margin-top:0.8rem; } #page-location > ul > li .showcart > button, #page-location > ul > li .showcart > span { display:block; width:100%; border-radius:0.5rem; text-transform:uppercase; padding:1em; line-height:1; text-align:center; } #page-location > ul > li .showcart > button { cursor:pointer; border-color:rgba(0,170,233,1); background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); } body.desktop #page-location > ul > li .showcart > button:hover { border-color:rgba(0,170,233,1); background-color:rgba(255,255,255,1); color:rgba(0,170,233,1); } #page-location > ul > li .showcart > span { border-color:rgba(100,100,100,1); background-color:rgba(100,100,100,1); color:rgba(255,255,255,1); } #page-location > ul > li .detail { position:absolute; opacity:0; z-index:1; top:0; left:0; right:0; bottom:0; background-color:rgba(0,170,233,0.95); color:rgba(255,255,255,1); padding:4rem 2rem 2rem 2rem; transition:opacity 300ms linear 0ms, z-index 0ms linear 300ms; } #page-location > ul > li .detail.visible { opacity:1; z-index:20; transition:opacity 300ms linear 0ms, z-index 0ms linear 0ms; } #page-location > ul > li .detail button.close { cursor:pointer; opacity:1; position:absolute; top:1.5rem; right:2rem; width:1.2em; height:1.2em; color:rgba(255,255,255,0.9); background-color:transparent; border:0; stroke-width:10; padding:0; margin:0; } body.desktop #page-location > ul > li .detail button.close:hover { color:rgba(255,255,255,1); } #page-location > ul > li .detail .asterisque { position:absolute; left:2rem; right:2rem; bottom:2rem; font-size:0.8em; } #page-location .vide { padding:8em 10%; font-size:3em; font-weight:400; color:rgba(255,255,255,1); } #addskier {display:none; } #modal-location > div.addskier { background-color:rgba(210,210,210,1); } .addskier form label.skiername span { display:none; } .addskier form label.skiername input { position:relative; outline:0; width:35em; max-width:100%; font-size:1em; background-color:rgba(255,255,255,1); height:auto; padding: 0.3em 1em 0.3em 4.5em; margin:0; border:1px solid rgba(182,182,182,1); } .addskier form label.skiername:after { content:''; display:block; position:absolute; height:60%; left:1em; top:50%; transform:translateY(-50%); width:2.5em; background-image:url(https://www.azimut-sport.com/_chartes_/azimut/ressources/images/pictos/compte.svg); background-size:1.5em; background-position: left center; background-repeat: no-repeat; border-right:1px solid rgba(182,182,182,1); } .addskier form button { cursor:pointer; position:relative; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0; font-weight:300; line-height:2; padding:0.3em 1.5em; font-size:1em; margin-left:0.5rem; width:auto; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop .addskier form button:hover { background-color:rgba(255,255,255,1); border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } /* PANIER */ a#panier { position:absolute; left:0; top:-10rem; height:1px; width:1px; } #page-panier button { cursor:pointer; } #page-panier { width:80%; margin:0 auto; text-align:left; overflow:visible; } #page-panier h2 { text-transform:uppercase; font-weight:400; font-size:2em; color:rgba(255,255,255,1); padding:0.5em 0; margin-bottom:1em; } #page-panier h2:before { content:''; position:absolute; z-index:-1; background-color:rgba(18,18,18,1); width:100vw; top:0; bottom:0; left:50%; transform:translateX(-50%); } .listepanier { clear:both; margin-bottom:4rem; float:left; display:inline-block; vertical-align:top; width:50%; } .listepanier > button { display:block; width:auto; border-radius:0.5rem; text-transform:uppercase; padding:1em 4em; margin-top:2rem; line-height:1; text-align:center; } .listepanier > button { cursor:pointer; border-color:rgba(0,170,233,1); background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); } body.desktop .listepanier > button:hover { border-color:rgba(0,170,233,1); background-color:rgba(255,255,255,1); color:rgba(0,170,233,1); } .listepanier > ul { position:relative; list-style-type:none; } .listepanier > ul > li { padding:0 3em 0 0; margin:0 2em 2em 0; border-radius:0.8rem; overflow:hidden; } .listepanier > ul > li > div { border:1px solid rgba(71,71,71,1); border-bottom:0; border-radius:0.8rem 0 0 0; } .listepanier > ul > li h3 { font-weight:300; font-size:1.5em; padding:0.5em 1rem; line-height:1; background-color:rgba(71,71,71,1); color:rgba(255,255,255,1); } .listepanier > ul > li h3:before { content:''; background-color:rgba(71,71,71,1); position:absolute; left:-1px; top:-1px; width:calc(100% + 2px); height:calc(100% + 2px); } .listepanier > ul > li h3 span:first-of-type { font-weight:500; border-right:1px solid rgba(255,255,255,1); padding-left:0.5em; padding-right:1.5em; margin-right:1.5em; } .listepanier > ul > li > div > div { padding:0 1rem 0.5rem 1rem; } .listepanier > ul > li > div > div:first-of-type { padding-top:1rem; padding-right:5rem; } .listepanier > ul > li > div > div.categorie { font-size:1.2em; padding-right:5rem; } .listepanier > ul > li > div > div.gamme { font-size:1.2em; padding-right:5rem; } .listepanier > ul > li > div > div.gamme span { font-weight:400; } .listepanier > ul > li > div > div.options { padding-right:6em; } .listepanier > ul > li > div > div.options span { padding-left:1.5em; padding-right:2em; } .listepanier > ul > li > div > div.options span:after { content:''; position:absolute; width:1em; height:1em; left:0; top:50%; transform:translateY(-50%) scale(1) !important; background: transparent url('https://www.azimut-sport.com/_chartes_/azimut/ressources/images/navigation/coche.svg') center center no-repeat !important; background-size:contain; } .listepanier > ul > li > div > div.promo { font-size:1em; position:absolute; right:0.5rem; top:calc(3em + 0.5rem); background-color:rgba(98,166,89,1); border-radius:50%; width:4em; height:4em; } .listepanier > ul > li > div > div.promo > span { position:absolute; display:block; left:50%; top:50%; width:auto; height:1em; line-height:1; transform:translate(-50%,-50%); font-size:1.2em; color:rgba(255,255,255,1); font-weight:500; margin:0; padding:0; border:0; } .listepanier > ul > li > div > div.promo > svg { position:absolute; left:0; top:0; width:100%; height:100%; color:rgba(40,75,39,1); } .listepanier > ul > li > div > div.prix { padding:0; font-size:1.5em; position:absolute; bottom:0.5rem; right:1rem; color:rgba(0,155,221,1); font-weight:500; } .listepanier > ul > li > div > div.prix > span { font-weight:300; } .listepanier > ul > li > div > div b, .listepanier > ul li > div > div strong { text-transform:uppercase; font-weight:300; } .listepanier > ul > li > .sizecart { border:1px solid rgba(71,71,71,1); border-top:0; border-radius:0 0 0.8rem 0.8rem; padding:0.5rem 1rem 0.5rem 1rem; } .listepanier > ul > li > .sizecart ul { font-size:0; list-style-type:none; border-top:1px solid rgba(0,0,0,0.1); padding-top:1rem; } .listepanier > ul > li > .sizecart li { display:inline-block; vertical-align:top; width:32%; margin-left:2%; margin-bottom:0.5rem; } .listepanier > ul > li > .sizecart li:nth-of-type(3n + 1) { margin-left:0; } .listepanier > ul > li > .sizecart span { display:block; padding:0.1em 0.5em; } .listepanier > ul > li > .sizecart select { display:block; background-color:rgba(0,0,0,0.03); padding-left:0.8em; padding-bottom:0.1em; } .listepanier > ul > li > .sizecart select.error { background-color:rgba(255,0,0,0.05); } .listepanier > ul > li > .sizecart select.placeholder, .listepanier > ul li > .sizecart select option.placeholder { color:rgba(0,0,0,0.4); } #page-panier .listepanier > ul > li > form.delcart { background-color:rgba(255,255,255,1); position:absolute; top:0; right:0; width:3em; height:calc(3em + 2px); margin:0; padding:0; padding-left:1px; border-radius:0 0.8rem 0.8rem 0; overflow:hidden; } #page-panier .listepanier > ul > li > form.delcart button { background-color:rgba(71,71,71,1); color:rgba(255,255,255,1); border:0; margin:0; padding:0; height:100%; width:100%; border-radius:0; } #page-panier .listepanier > ul > li > form.delcart button svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30%; height:30%; stroke-width:5; } body.desktop #page-panier .listepanier > ul > li > form.delcart button:hover { background-color:rgba(71,71,71,1); color:rgba(255,0,0,1); } .listeassurance { margin-bottom:4rem; float:right; display:inline-block; vertical-align:top; width:calc(50% - 4rem - 6px); background-color:rgba(0,170,233,1); border-radius:0.8rem; border:2px solid rgba(0,170,233,1); overflow:hidden; } .listeassurance > div { padding:1.2rem 2.4rem; background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); } .listeassurance > div:before { content:''; background-color:rgba(0,170,233,1); position:absolute; left:-1px; top:-1px; width:calc(100% + 2px); height:calc(100% + 2px); } .listeassurance > div h3 { font-size:1.5em; padding-bottom:0.5em; text-transform:uppercase; font-weight:300; color:rgba(255,255,255,1); } .listeassurance > div h4 { font-size:1.2em; padding-bottom:0.5em; font-weight:300; color:rgba(255,255,255,1); } .listeassurance > ul { background-color:rgba(255,255,255,1); padding:1rem 2.4rem; position:relative; list-style-type:none; } .listeassurance > ul > li { padding:1em 0; font-size:1.2em; border-bottom:1px solid rgba(0,0,0,0.2); } .listeassurance > ul > li > form { padding:0; margin:0; line-height:1; } .listeassurance > ul > li > div { display:inline-block; vertical-align:middle; } .listeassurance > ul > li label { margin-bottom:0; width:100%; } .listeassurance > ul > li label > span { display:block; padding:0.5em 4rem; width:100%; } .listeassurance > ul > li label > span > span { color:#ccc; } .listeassurance > ul > li label > span > span:first-of-type { font-weight:500; border-right:1px solid rgba(0,0,0,0.2); padding-left:0.5em; padding-right:1.5em; margin-right:1.5em; } .listeassurance > ul > li label > span > span.prixassurance { font-size:1.3em; position:absolute; right:0; top:50%; transform:translateY(-50%); line-height:1; font-weight:500; } .listeassurance > ul > li label > span > span.prixassurance > span { font-weight:300; } .listeassurance > ul > li input[type="checkbox"]:checked + span > span { color:rgba(18,18,18,1); } .listeassurance > ul > li input[type="checkbox"]:checked + span > span.prixassurance { color:rgba(0,155,221,1); } .listeassurance > ul > li:last-of-type { border-bottom:0; font-size:1.2em; padding-top:1.5em; } .listeassurance > ul > li:last-of-type > span:first-of-type { text-transform:uppercase; font-weight:500; padding-right:5em; } .listeassurance > ul > li:last-of-type > span.prixassurance { color:rgba(0,155,221,1); font-size:1.3em; position:absolute; right:0; top:50%; transform:translateY(-50%); line-height:1; font-weight:500; } .listeassurance > ul > li:last-of-type > span.prixassurance > span { font-weight:300; } .listeassurance button.cgv { display:inline-block; vertical-align:baseline; background-color:transparent; color:rgba(18,18,18,1); border:0; padding:0; margin:0; } body.desktop .listeassurance button.cgv:hover { background-color:transparent; color:rgba(18,18,18,1); } #page-panier.checkout .listeassurance > ul > li label > span, .section-commandes .listeassurance > ul > li label > span, .section-dash .listeassurance > ul > li label > span { padding:0.5em 4rem 0.5em 0; width:100%; } #page-panier.checkout .listeassurance > ul > li label > span > span, .section-commandes .listeassurance > ul > li label > span > span, .section-dash .listeassurance > ul > li label > span > span { color:rgba(18,18,18,1); } #page-panier.checkout .listeassurance > ul > li label > span > span.prixassurance, .section-commandes .listeassurance > ul > li label > span > span.prixassurance, .section-dash .listeassurance > ul > li label > span > span.prixassurance { color:rgba(0,155,221,1); } .listeassurance > ul > li input[type="checkbox"] + span { padding-top:0.15em !important; padding-bottom:0.15em !important; padding-left:2em !important; line-height:1; display:inline-block; vertical-align:middle; } .listeassurance > ul > li input[type="checkbox"] + span:before, .listeassurance > ul li input[type="checkbox"] + span:after { font-size:1.3em; width:1em !important; height:1em !important; border-radius:0 !important; display:inline-block; vertical-align:middle; border-width:2px !important; } .listeassurance > ul > li input[type="checkbox"] + span:before { border-color:rgba(175,175,175,1) !important; } .listeassurance > ul > li input[type="checkbox"]:checked + span:before { border-color:rgba(0,170,233,1) !important; } .listeassurance > ul > li input[type="checkbox"] + span:after { background-color:rgba(0,170,233,1) !important; } .listeassurance > ul > li input[type="checkbox"]:checked + span:after { background: transparent url('https://www.azimut-sport.com/_chartes_/azimut/ressources/images/navigation/coche.svg') center center no-repeat !important; background-size:contain; transform:scale(1) !important; } .listetotaux { margin-bottom:4rem; float:right; display:inline-block; vertical-align:top; width:calc(50% - 4rem - 6px); } .listetotaux > ul { padding:0; position:relative; list-style-type:none; } .listetotaux > ul > li { padding:0.25em 0; font-size:1.2em; } .listetotaux > ul > li > span:first-of-type { width:100%; padding-right:10em; } .listetotaux > ul > li > span.montant { font-weight:400; position:absolute; right:0; } .listetotaux > ul > li > span.montant > span { font-weight:300; } .listetotaux > ul > li.total { padding-top:2.5em; font-size:1.4em; text-transform:uppercase; font-weight:500; } .listetotaux > ul > li.total:before { content:''; position:absolute; left:6em; right:0; top:1.25em; height:1px; background-color:rgba(0,0,0,0.2); } .listetotaux > ul > li.total > span.montant { font-weight:500; color:rgba(0,155,221,1); font-size:1.3em; } .listetotaux > ul > li.tva { font-size:0.9em; } .listetotaux > ul > li.tva > span.montant { } .listetotaux > ul > li.advance { font-size:0.9em; } .listetotaux > ul > li.advance > span.montant { } #page-panier form.checkout { margin:4em 0 0 0; } #page-panier form.checkout fieldset h3 { font-size:calc(1.2 * 0.8rem); font-weight:400; text-transform:uppercase; padding:0 0 0.8em 0; margin:0; } #page-panier form.checkout fieldset h3 > span { text-transform:none; font-weight:300; } #page-panier form.checkout fieldset.facturation label.notes { padding-top:1.5em; } #page-panier form.checkout fieldset.facturation label:not(.notes) > span { display:none; } #page-panier form.checkout fieldset.facturation input, #page-panier form.checkout fieldset.facturation textarea { background-color:transparent; border:1px solid rgba(182,182,182,1); border-radius:3px; padding:0.7em 1em; height:auto; line-height:1; } #page-panier form.checkout fieldset.facturation { font-size:0; display:block; padding-bottom:2rem; } #page-panier form.checkout fieldset.facturation > label { position:relative; font-size:1em; margin:0 0 0.5em 0; padding:0; display:inline-block; width:100%; } #page-panier form.checkout fieldset.facturation textarea { height:5em; } #page-panier form.checkout fieldset.mode { display:block; padding-bottom:3em; } #page-panier form.checkout fieldset.mode ul { padding-left:1em; list-style-type:none; } #page-panier form.checkout fieldset.mode ul label > span { display:block; font-weight:400; } #page-panier form.checkout fieldset.mode ul label > span > span { font-weight:300; display:block; overflow:hidden; padding-top:0.5em; padding-bottom:1em; padding-left:0; } #page-panier form.checkout fieldset.mode ul input[type="radio"]:not(:checked) + span > span { font-size:0; } #page-panier form.checkout fieldset.mode ul input[type="radio"]:checked + span > span { font-size:1em; } #page-panier form.checkout fieldset.mode ul input[type="radio"]:checked + span:before { border-color:rgba(0,170,233,1) !important; } #page-panier form.checkout fieldset.mode ul input[type="radio"]:checked + span:after { background-color:rgba(0,170,233,1) !important; } #page-panier form.checkout label.consentementcgv { font-size:1em; position:relative; text-align:left; width:100%; margin:0 auto 2em auto; } #page-panier form.checkout label.consentementcgv input[type="checkbox"] { font-size:1em !important; position:absolute !important; padding-top:0 !important; padding-bottom:0 !important; position:relative !important; left:1em !important; top:0 !important; transform:scale(1) !important; } #page-panier form.checkout label.consentementcgv input[type="checkbox"] + span { padding-top:0.15em !important; padding-bottom:0.15em !important; padding-left:2em !important; line-height:1; display:inline-block; vertical-align:middle; } #page-panier form.checkout label.consentementcgv input[type="checkbox"] + span:before, #page-panier form.checkout label.consentementcgv input[type="checkbox"] + span:after { font-size:1.3em; width:1em !important; height:1em !important; border-radius:0 !important; display:inline-block; vertical-align:middle; border-width:2px !important; } #page-panier form.checkout label.consentementcgv input[type="checkbox"] + span:before { border-color:rgba(175,175,175,1) !important; } #page-panier form.checkout label.consentementcgv input[type="checkbox"]:checked + span:before { border-color:rgba(0,170,233,1) !important; } #page-panier form.checkout label.consentementcgv input[type="checkbox"] + span:after { background-color:rgba(0,170,233,1) !important; } #page-panier form.checkout label.consentementcgv input[type="checkbox"]:checked + span:after { background: transparent url('https://www.azimut-sport.com/_chartes_/azimut/ressources/images/navigation/coche.svg') center center no-repeat !important; background-size:contain; transform:scale(1) !important; } #page-panier form.checkout label.consentementcgv a, body.desktop #page-panier form.checkout label.consentementcgv a:hover { text-decoration:underline; } #page-panier form button { margin-top:1em; width:100%; background-color:rgba(98,166,89,1); color:rgba(255,255,255,1); border:1px solid rgba(98,166,89,1); text-align:center; padding:1em 2em; border-radius:1em; } body.desktop #page-panier form button:hover { background-color:rgba(255,255,255,1); color:rgba(98,166,89,1); border-color:rgba(98,166,89,1); } #page-panier form button span { display:block; } #page-panier form button span:first-of-type { font-weight:500; font-size:1.5em; text-transform:uppercase; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MES COMMANDES */ .section-commandes button { cursor:pointer; } .section-commandes { width:80%; margin:0 auto; text-align:left; overflow:visible; } .section-commandes h2 { text-transform:uppercase; font-weight:400; font-size:2em; color:rgba(255,255,255,1); padding:0.5em 0; margin-bottom:1em; } .section-commandes h2:before { content:''; position:absolute; z-index:-1; background-color:rgba(18,18,18,1); width:100vw; top:0; bottom:0; left:50%; transform:translateX(-50%); } .section-commandes > h3 { font-size:1.8em; font-weight:300; text-transform:uppercase; margin:0.5em 0 1em 0; } .section-commandes button.goback { cursor:pointer; position:relative; text-transform:uppercase; background-color:rgba(255,255,255,1); border:0; color:rgba(18,18,18,1); border-radius:0; font-weight:300; padding:0 0 0 1.2em; font-size:1em; line-height:1; margin:2em 0; display:block; width:auto; left:0; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } .section-commandes button.goback span { position:relative; top:50%; font-size:1em; line-height:1; width:auto; transform:translateY(-50%); } .section-commandes button.goback svg { stroke-width:10; position:absolute; left:0; top:50%; height:0.7em; width:auto; transform:translateY(-50%) rotate(180deg); } body.desktop section.section-commandes button.goback:hover { background-color:rgba(255,255,255,1); border:0; color:rgba(0,170,233,1); } ul.liste-commandes { position:relative; display:block; width:90%; margin:2rem auto 0 auto; padding:0; } ul.liste-commandes > li { font-size:1em; height:2.6em; width:100%; height:auto; overflow:hidden; position:relative; display:inline-block; margin:0 0 0.5em 0; padding:0; list-style-type:none; display:block; } ul.liste-commandes > li > div { font-size:0;height:100%; position:relative; display:block; color:rgba(0,0,0,1); background-color:rgba(250,250,250,1); margin:0; padding:0; } ul.liste-commandes > li > div > span, ul.liste-commandes > li > div > button { display:inline-block; position:relative; text-align:center; vertical-align:middle; padding:0 0.5em; margin:0; } ul.liste-commandes > li > div span.reforder { width:10%; } ul.liste-commandes > li > div span.fulldate { width:10%; } ul.liste-commandes > li > div span.firstday { width:10%; } ul.liste-commandes > li > div span.montant { width:10%; } ul.liste-commandes > li > div span.mode { width:25%; } ul.liste-commandes > li > div span.status { width:25%; } ul.liste-commandes > li > div > button { width:10%; } ul.liste-commandes > li > div > button { cursor:pointer; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0; font-weight:300; padding:0.8em 1.5em; font-size:0.8em; line-height:1; margin:0; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop ul.liste-commandes > li > div > button:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } body.desktop ul.liste-commandes > li > div > button.printed { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } div.total-commandes { position:relative; display:block; width:90%; margin:2rem auto 0 auto; padding:0; } .section-dash button.goback { cursor:pointer; position:relative; text-transform:uppercase; background-color:rgba(255,255,255,1); border:0; color:rgba(18,18,18,1); border-radius:0; font-weight:300; padding:0 0 0 1.2em; font-size:1em; line-height:1; margin:2em 0; display:block; width:auto; left:0; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } .section-dash button.goback span { position:relative; top:50%; font-size:1em; line-height:1; width:auto; transform:translateY(-50%); } .section-dash button.goback svg { stroke-width:10; position:absolute; left:0; top:50%; height:0.7em; width:auto; transform:translateY(-50%) rotate(180deg); } body.desktop .section-dash button.goback:hover { background-color:rgba(255,255,255,1); border:0; color:rgba(0,170,233,1); } .section-dash .infosclient, .section-dash .notes { padding-bottom:2em; } .divstatus { margin-bottom:4rem; float:right; display:inline-block; vertical-align:top; width:calc(50% - 4rem - 6px); } .divstatus h3 { font-size:1.8em; font-weight:300; text-transform:uppercase; margin:0.5em 0 1em 0; } .divstatus button { width:auto; height:auto; cursor:pointer; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0; font-weight:300; padding:0.8em 1.5em; font-size:0.8em; line-height:1; margin:1em 0 0 0; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop .divstatus button:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } #page-commande { width:80%; margin:0 auto; text-align:left; overflow:visible; } #page-commande h2 { text-align:left; text-transform:uppercase; font-weight:400; font-size:2em; color:rgba(255,255,255,1); padding:0.5em 0; margin-bottom:1em; } #page-commande h2:before { content:''; position:absolute; z-index:-1; background-color:rgba(18,18,18,1); width:100vw; top:0; bottom:0; left:50%; transform:translateX(-50%); } #page-commande button, #page-commande input[type=submit] { width:auto; height:auto; cursor:pointer; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0; font-weight:300; padding:0.8em 1.5em; font-size:0.8em; line-height:1; margin:1em 0 0 0; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop #page-commande button:hover, body.desktop #page-commande input[type=submit]:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } /*---------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES INTERNES */ /* PAGE PRESENTATION-PARTENAIRES */ #page-presentation { z-index:1; display:block; padding:0; margin:2em 0 0 0; overflow:visible; } #page-presentation > img { z-index:1; position:absolute; left:0; bottom:0; width:100%; height:auto; } #page-presentation > h1 { z-index:2; line-height:1; font-size:2.1em; font-weight:300; text-transform:uppercase; text-align:left; padding:0 5%; } #page-presentation > h1 strong, #page-presentation > h1 b { font-weight:600; } #page-presentation > h2 { color:rgba(144,128,105,1); z-index:2; line-height:1; font-size:2.1em; font-weight:600; text-transform:uppercase; display:block; position:relative; text-align:left; padding:0 5%; } #page-presentation > div { z-index:2; position:relative; display:block; text-align:left; padding:2em 5% 3em 5%; } #page-partenaires { display:block; padding:0; margin:2em 0; } #page-partenaires > h2 { z-index:2; line-height:1; font-size:3em; font-weight:300; text-transform:uppercase; text-align:center; padding:1.5em 5%; } #page-partenaires > h2 strong, #page-partenaires > h2 b { font-weight:600; } #page-partenaires > ul { margin:0; padding:0 calc(10% - 2em); font-size:0; } #page-partenaires > ul > li { display:inline-block; list-style-type:none; vertical-align:top; margin:2em; padding:2em 4em; border:1px solid rgba(18,18,18,1); border-radius:1rem; } #page-partenaires h3 { font-weight:400; padding-bottom:1em; text-transform:uppercase; } #page-partenaires .fromrte strong, #page-partenaires .fromrte b { font-weight:500; } #page-partenaires > ul ul { margin-top:1em; } #page-partenaires > ul ul > li { display:block; list-style-type:none; font-weight:500; } #page-partenaires h4 { font-size:1em; font-weight:300; display:inline; padding-right:0.5em; } #page-partenaires a { font-weight:300; color:rgba(0,155,221,1); } body.desktop #page-partenaires a:hover { text-decoration:none; } /* PAGE SHOP-ATELIER */ #page-shop { padding:10em 45% 8em 25%; } #page-shop > img { z-index:1; position:absolute; top:0; height:100%; width:auto; } #page-shop > img:first-of-type { left:0; } #page-shop > img:last-of-type { right:0; } #page-shop h1 { z-index:2; text-align:left; line-height:1; font-size:1.8em; font-weight:300; text-transform:uppercase; padding:0 0 1.5em 0; } #page-shop > h1 strong, #page-shop > h1 b { font-weight:600; } #page-shop > div { z-index:2; font-size:1.2em; position:relative; display:block; text-align:left; padding:0; } /* shopavantages MATERIEL */ #accueil-shopavantages { z-index:2; margin:0; padding:4em 5em; background-color:rgba(255,255,255,1); text-align:center; overflow:visible; } #accueil-shopavantages ul { position:relative; display:flex; flex-wrap:wrap; gap:2em; margin:0; padding:0; } #accueil-shopavantages ul li { margin:0; padding:2em 2em; position:relative; display:inline-block; vertical-align:top; text-align:center; background-color:rgba(255,255,255,1); border-radius:1em; overflow:hidden; } #accueil-shopavantages ul li img { display:block; margin:0 auto; padding:0; height:auto; width:100%; margin-bottom:1em; border-radius:0.5em; } #accueil-shopavantages ul li h1 { font-size:2em; font-weight:600; text-transform:uppercase; padding:0 0 2em 0; margin:0; display:block; } #accueil-shopavantages ul li h1 span { display:block; font-size:0.6em; } #accueil-shopavantages ul li div { text-align:left; } #page-materiel { display:block; padding:0; margin:2em 0; } #page-materiel > h2 { z-index:2; line-height:1; font-size:3em; font-weight:300; text-transform:uppercase; text-align:center; padding:1.5em 5%; } #page-materiel > h2 strong, #page-avantages > h2 b { font-weight:600; } #page-materiel > ul.avantages { margin:0; padding:0 calc(10% - 2em); font-size:0; } #page-materiel > ul.avantages > li { list-style-type:none; vertical-align:top; margin:2em; padding:2em 4em; border:1px solid rgba(18,18,18,1); border-radius:1rem; } #page-materiel > ul.avantages h3 { font-weight:300; padding-bottom:1em; text-transform:none; } #page-materiel > ul.avantages h3 strong, #page-avantages h3 b { font-weight:600; } #page-materiel > ul.avantages h3 span { font-size:0.6em; } #page-materiel > ul.materiels { background-color:rgba(80,80,80,1); color:rgba(255,255,255,1); margin:2rem 0; padding:2rem calc(8% - 2rem); font-size:0; } #page-materiel > ul.materiels > li { list-style-type:none; vertical-align:top; margin:0 2rem; padding:2em 0; } #page-materiel > ul.materiels h3 { color:rgba(255,255,255,1); text-shadow:1px 1px 2px rgba(100,100,100,1); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:3em; font-weight:600; text-transform:uppercase; } #page-materiel > ul.materiels img { width:100%; height:auto; } #page-materiel > ul.materiels .fromrte { padding:2em 1.5em 0 1.5em; } #page-materiel > ul.materiels .fromrte ul li:before { background-color:rgba(255,255,255,1); } #page-materiel > ul.materiels .fromrte p, #page-materiel > ul.materiels .fromrte ol, #page-materiel > ul.materiels .fromrte ul { padding-top:0; padding-bottom:0; } #page-atelier { display:block; padding:0; margin:2em 0; font-size:0; } #page-atelier > div { display:inline-block; vertical-align:top; width:50%; padding:5em 10%; } #page-atelier > div:first-of-type { padding-right:5%; } #page-atelier > div:last-of-type { padding-left:5%; } #page-atelier h1 { z-index:2; line-height:1; font-size:2.6em; font-weight:300; text-transform:uppercase; text-align:left; padding:0 0 1.5em 0; } #page-atelier h1 strong, #page-atelier h1 b { font-weight:600; } #page-atelier .fromrte { padding:0; text-align:left; } #page-atelier ul { font-size:1.1em; display:block; margin:0; padding:0; } #page-atelier ul > li { display:block; list-style-type:none; margin:0; padding:0.5em 2em; } #page-atelier ul > li:nth-of-type(2n+1) { background-color:rgba(80,80,80,1); color:rgba(255,255,255,1); } #page-atelier ul > li > h2 { color:inherit; display:inline-block; vertical-align:top; width:calc(65% - 3px); font-size:1em; font-weight:300; text-align:left; } #page-atelier ul > li > div { color:rgba(0,155,221,1); display:inline-block; vertical-align:top; width:calc(35% - 3px); font-size:1em; font-weight:300; text-align:right; } #page-atelier ul > li > div strong, #page-atelier ul > li > div b { font-weight:600; } /* PAGE RAQUETTES */ #page-sorties-raquettes > img { z-index:1; position:absolute; top:0; left:0; } #page-sorties-raquettes h2 { z-index:2; text-align:left; line-height:1; font-size:3em; font-weight:300; text-transform:uppercase; padding:0 0 1.5em 0; } #page-sorties-raquettes > h2 strong, #page-sorties-raquettes > h2 b { font-weight:600; } #page-sorties-raquettes > div { z-index:2; font-size:1.2em; position:relative; display:block; text-align:left; padding:0; } #page-sorties-raquettes .tarifs { background-color:rgba(71,71,71,1); color:rgba(255,255,255,1); display:inline-block; padding:3em 4em; border-radius:1rem; } #page-sorties-raquettes .tarifs h2 { color:rgba(255,255,255,1); z-index:2; text-align:left; line-height:1; font-size:2em; font-weight:300; text-transform:uppercase; padding:0 0 1em 0; } #page-sorties-raquettes .tarifs > h2 strong, #page-sorties-raquettes .tarifs > h2 b { font-size:1.2em; font-weight:600; } #page-sorties-raquettes .tarifs ul { font-size:1.1em; display:block; margin:0; padding:0; } #page-sorties-raquettes .tarifs ul > li { display:block; list-style-type:none; margin:0; padding:0.5em 0; } #page-sorties-raquettes .tarifs ul > li > h3 { color:inherit; display:inline-block; vertical-align:top; width:calc(65% - 3px); font-size:1em; font-weight:300; text-align:left; } #page-sorties-raquettes .tarifs ul > li > div { color:rgba(0,155,221,1); display:inline-block; vertical-align:top; width:calc(35% - 3px); font-size:1em; font-weight:300; text-align:right; } #page-sorties-raquettes .tarifs ul > li > div strong, #page-sorties-raquettes .tarifs ul > li > div b { font-weight:600; } #page-sorties { display:block; padding:0; margin:2em 0; } #page-sorties > h2 { z-index:2; line-height:1; font-size:3em; font-weight:300; text-transform:uppercase; text-align:center; padding:1em 5%; } #page-sorties > h2 strong, #page-sorties > h2 b { font-weight:600; } #page-sorties > div { text-align:left; margin:0 20% 2em 20%; } #page-sorties > ul { margin:0; padding:0 calc(10% - 2em); font-size:0; } #page-sorties > ul > li { list-style-type:none; vertical-align:top; margin:2em; padding:0; overflow:hidden; border-radius:1rem; } #page-sorties > ul > li:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid rgba(18,18,18,1); border-radius:1rem; } #page-sorties h3 { border:1px solid rgba(0,170,233,1); border-radius:1rem 1rem 0 0; overflow:hidden; font-size:2em; background-color:rgba(0,170,233,1); color:rgba(255,255,255,1); font-weight:400; padding:0.5em 4rem; text-transform:none; } #page-sorties h3 strong, #page-sorties h3 b { font-weight:600; } #page-sorties h3 span { font-size:0.6em; } #page-sorties > ul > li > div { padding:1em 4rem 0 4rem; } #page-sorties > ul > li > div:last-of-type { padding-bottom:2em; } #page-sorties .planning { padding:2em 0; } #page-sorties .tarif { font-weight:300; font-size:2em; color:rgba(0,155,221,1); text-align:left; line-height:1; } #page-sorties .tarif b { font-weight:600; } #page-sorties .tarif > span { font-size:0.7em; color:rgba(18,18,18,1); font-weight:300; } #page-sorties .fromrte p, #page-sorties .fromrte ul, #page-sorties .fromrte ol { padding-bottom:0; padding-top:0; } #page-horspiste { background-color:rgba(71,71,71,1); color:rgba(255,255,255,1); display:block; padding:4em 10%; margin:2em 0; } #page-horspiste h2 { color:rgba(255,255,255,1); z-index:2; line-height:1; font-size:2.6em; font-weight:300; text-transform:uppercase; text-align:left; padding:0 0 1em 0; } #page-horspiste h2 strong, #page-horspiste h2 b { font-weight:600; } #page-horspiste .fromrte { padding:0; text-align:left; } #page-horspiste button { font-size:1.5em; padding:0.8em 2.5em; text-transform:uppercase; border-radius:0.5rem; transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; } #page-horspiste button { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); } body.desktop #page-horspiste button:hover { background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); } /* PAGE METEO */ #page-meteo iframe { position:relative; width:100%; height:5000px; border:0; margin:0; padding:4em 0 0 0; } /* 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(18,18,18,1); } section.contact h2 { color:rgba(18,18,18,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 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:500; font-size:1.3em; } 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:rgba(0,155,221,1) !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 { position:relative; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0.5em; font-weight:300; padding:0.5em 2.5em; font-size:1rem; margin-top:1rem; 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:rgba(0,155,221,1); color:rgba(0,155,221,1); } section.contact span.asterisque { display:block; width:auto; font-size:0.7rem; margin:1rem 0; } section.contact sup { color:rgba(0,155,221,1); 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#page-mentionslegales, section#page-cgv { font-family:Verdana, sans-serif; color:rgba(18,18,18,1); font-size:0.7rem; font-weight:300; display:block; margin:0 auto; width:90%; padding:3rem 0; } section#page-mentionslegales h1, section#page-cgv h1 { font-size:1.4em; text-transform:uppercase; font-weight:600; padding-bottom:1em; } section#page-mentionslegales h2, section#page-cgv h2 { font-size:1.4em; text-transform:uppercase; font-weight:600; padding-bottom:1em; } section#page-mentionslegales h3, section#page-cgv h3 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section#page-mentionslegales h4, section#page-cgv h4 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section#page-mentionslegales h5, section#page-cgv h5 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section#page-mentionslegales h6, section#page-cgv h6 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; } section#page-mentionslegales p, section#page-cgv p { text-align:justify; } section#page-mentionslegales li, section#page-cgv li { text-align:justify; } section#page-mentionslegales strong, section#page-cgv strong { font-weight:600; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* DASHBOARD */ #nav-dash { position:relative; display:block; margin:0 auto 0 auto; width:80%; padding:0; } #nav-dash select { position:relative; display:inline-block; vertical-align:middle; line-height:1; margin:0; padding:1.5em 2em; height:auto; font-weight:400; border-radius:0; border:0; outline:0; text-align:left; } #nav-dash label { font-size:0; position:relative; display:inline-block; vertical-align:middle; line-height:1; margin:0; padding:0; } #nav-dash label > select { font-family:Rubik, sans-serif; cursor:pointer; text-transform:uppercase; z-index:1; } #nav-dash select { padding-right:2em !important; background-position:calc(100% - 1em) center !important; } #nav-dash button { cursor:pointer; border-radius:0; border:0; outline:0; margin:0; padding:1.5em 2em; border:0; position:relative; display:inline-block; vertical-align:middle; text-transform:uppercase; line-height:1; font-weight:400; } .section-dash { position:relative; display:block; margin:0 auto; width:80%; padding:1rem 0 2rem 0; min-height:80vh; } .section-dash h2 { font-size:1.8em; font-weight:300; text-transform:uppercase; margin:2em 0 1em 0; } .section-dash form.filtretarifs { text-align:center; margin-bottom:5rem; } .section-dash form.filtretarifs button[type=submit] { position:relative; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0.5em; font-weight:300; padding:0.5em 2.5em; font-size:1rem; display:inline-block; width:auto; margin-left:2rem; transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; vertical-align:middle; } body.desktop .section-dash form.filtretarifs button[type=submit]:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } .section-dash form.filtretarifs select { opacity:0; height:0; } .section-dash .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:28%; max-width:30em; } .section-dash table.listetarifs { position:relative; border:0; border-color:transparent; margin:2rem auto; table-layout:auto; width:100%; max-width:100em; } .section-dash table.listetarifs tr { background-color:rgba(255,255,255,1); margin:0; padding:0; border:0; border-bottom:4px solid rgba(255,255,255,1); } .section-dash table.listetarifs tr:nth-of-type(2n) { background-color:rgba(0,155,221,0.1); } .section-dash table.listetarifs th { text-align:center; padding:0.3em 2px; } .section-dash table.listetarifs th:first-of-type { padding:0; background-color:rgba(255,255,255,1); } .section-dash table.listetarifs td { padding:0 2px; text-align:center; } .section-dash table.listetarifs td:first-of-type { padding:0 1rem; text-align:right; } .section-dash table.listetarifs td:not(:first-of-type) { width:7em; } .section-dash table.listetarifs input { width:100%; text-align:center; background-color:rgba(0,0,0,0.05); } .section-dash .vide { text-align:center; font-size:1.3em; font-weight:400; } .adminliste { display:block; margin:0 auto; width:80%; padding:1rem 0 2rem 0; } .adminliste h1, .adminliste h2 { font-size:1.8em; font-weight:300; text-transform:uppercase; margin:2em 0 1em 0; } .adminliste h1 b, .adminliste h1 strong, .adminliste h2 b, .adminliste h2 strong { font-weight:300; display:inline; } .adminliste h1 br, .adminliste h2 br { display: inline; content: ' '; clear:none; padding-left:0.25em; } .adminliste li { margin-bottom:0.2em; padding:0.5em; } .adminliste a, section.adminliste span, section.adminliste svg { display:inline-block; vertical-align:baseline; } .adminliste a { margin:0 1.5em 0 0.5em; } .adminliste a, section.adminliste span { font-size:1.2em; line-height:1; } .adminliste h2 a { font-size:0.7em; } .adminliste > a, .adminliste > div > a { margin-top:0.2em; padding:0.5em; } body.desktop .adminliste li:hover { background-color:rgba(245,245,245,1); } body.desktop .adminliste a:hover { color:rgba(0,155,221,1); } #dash-tarifs h2 { text-align:center;; padding-bottom:0.5em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ /* AUTH PANIER */ .section-auth.tab:not(.current) { display:none; } .section-auth.tab.current { display:block; } .nav-cartauth { position:relative; display:block; margin:0 auto; width:50%; max-width:30em; padding:3rem 0 0 0; overflow:visible; } .nav-cartauth ul { font-size:0; list-style-type:none; width:100%; margin:0; padding:0; } .nav-cartauth ul > li { position:relative; display:inline-block; width:50%; text-align:center; } .nav-cartauth ul > li button { width:100%; position:relative; text-transform:uppercase; border:0; border-bottom:2px solid; background-color:rgba(255,255,255,1); color:rgba(18,18,18,1); border-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); font-weight:300; padding:1em 1.5em; font-size:1em; display:inline-block; transition: background-color 500ms linear, border-color 500ms linear, color 500ms linear; vertical-align:middle; } .nav-cartauth ul > li button.current { background-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-color:rgba(0,155,221,1); } body.desktop .nav-cartauth ul > li button:not(.current):hover { background-color:rgba(255,255,255,1); color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); } .section-auth.tab h2 { margin-top:0; } /* AUTH GENERIQUE */ .section-auth { position:relative; display:block; margin:0 auto; width:50%; max-width:30em; padding:3rem 0; overflow:visible; } .section-auth h2 { margin:3em 0 2em 0; text-transform:uppercase; font-weight:300; font-size:1.2em; } .section-auth h2 b, .section-auth h2 strong { font-weight:300; } .section-auth .intro { margin-bottom:1em; } .section-auth .regles { margin-bottom:2em; } .section-auth .regles ul { margin:0; padding:0 0 0 0.9em; } .section-auth .regles ul li { font-size:0.9em; margin:0; padding:0; list-style-type:disc; list-style-position outside; } .section-auth .spam { display:block; margin-top:2em; font-size:0.8em; } .section-auth .erreur { margin-bottom:1.5em; } .section-auth .retour { margin-bottom:1.5em; } .section-auth .required { font-size:calc(0.8 * 0.8rem); margin-top:1em; margin-left:0.3em; } .section-auth form { font-size:0; position:relative; display:block; padding-bottom:0; } .section-auth form > label { position:relative; font-size:1em; margin:0 0 0.5em 0; padding:0; display:inline-block; width:100%; } .section-auth form > label.consentementrgpd { margin:2em 0; } .section-auth form > label.consentementrgpd > span { font-size:0.9em; display:block; } .section-auth form > label.consentementrgpd input { transform:scale(1) !important; } .section-auth form > label.consentementrgpd > span:after { background-color:rgba(0,155,221,1) !important; } .section-auth form > label:not(.consentementrgpd) > span { display:none; } .section-auth input { position:relative; display:block; width:100%; font-size:1em; border:1px solid rgba(182,182,182,1); background-color:rgba(255,255,255,1) !important; color:rgba(18,18,18,1); height:auto; padding:0.3em 1em; margin:0; } .section-auth label.username input { padding-left:4.5em; } .section-auth label.username input[readonly], .section-auth label.username input[readonly]:-webkit-autofill, .section-auth label.username input[readonly]:-webkit-autofill:hover, .section-auth label.username input[readonly]:-webkit-autofill:focus, .section-auth label.username input[readonly]:-webkit-autofill:active { cursor:not-allowed; outline:0; background-color:rgba(241,241,241,1); -webkit-box-shadow: 0 0 0 30px rgba(241,241,241,1) inset !important; } .section-auth label.username { } .section-auth label.username:after { content:''; display:block; position:absolute; height:60%; left:1em; top:50%; transform:translateY(-50%); width:2.5em; background-image:url(https://www.azimut-sport.com/_chartes_/azimut/ressources/images/pictos/compte.svg); background-size:1.5em; background-position: left center; background-repeat: no-repeat; border-right:1px solid rgba(182,182,182,1); } .section-auth label.password > i { position:absolute; right:1em; top:0; height:100%; width:2em; color:rgba(128,128,128,1);} .section-auth label.password > i:after { content:''; display:block; position:absolute; height:60%; left:0; top:50%; transform:translateY(-50%); width:2em; background-image:url(https://www.azimut-sport.com/_chartes_/azimut/ressources/images/contribution/pwd-show.svg); background-size:1.5em; background-position: right center; background-repeat: no-repeat; } .section-auth label.password.visible > i:after { background-image:url(https://www.azimut-sport.com/_chartes_/azimut/ressources/images/contribution/pwd-hide.svg); } .section-auth form button { cursor:pointer; position:relative; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0; font-weight:300; padding:0.8em 1.5em; font-size:1em; margin-top:1rem; display:block; width:auto; transform:translateX(-100%); left:100%; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop section.section-auth form button:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } .section-auth button.back { cursor:pointer; position:relative; text-transform:uppercase; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:0; font-weight:300; padding:0.8em 1.5em; font-size:1em; margin-top:1rem; display:block; width:auto; left:0; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop section.section-auth button.back:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } .section-auth #ul-auth { width:calc(100% - 10em); list-style-type:none; margin:0; transform:translateY(-2em); } .section-auth #ul-auth button { cursor:pointer; font-size:1em; background-color:transparent; color:rgba(18,18,18,1); padding:0; margin:0; border:0; transition:color 300ms linear; } body.desktop .section-auth #ul-auth button:hover { background-color:transparent; color:rgba(0,155,221,1); } .section-auth .inscription { margin-top:2em; font-size:1.1em; text-transform:uppercase; line-height:1.5; } .section-auth .inscription button { cursor:pointer; line-height:1; position:relative; display:inline-block; vertical-align:middle; height:2em; width:2em; padding:0; margin:0 0 0 1em; background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); border-radius:50%; border:1px solid; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } body.desktop .section-auth .inscription button:hover { background-color:transparent; border-color:rgba(0,155,221,1); color:rgba(0,155,221,1); } .section-auth .inscription button > svg { stroke-width:5; position:absolute; width:60%; height:auto; left:50%; top:50%; transform:translate(-47%,-50%); } .section-auth label.nom, .section-auth label.prenom, .section-auth label.email, .section-auth label.telephone { width:50%; } .section-auth label.nom, .section-auth label.email { padding-right:0.5em; } .section-auth label.prenom, .section-auth label.telephone { padding-left:0.5em; } .section-auth label.cp { width:30%; padding-right:0.5em; } .section-auth label.ville { width:70%; padding-left:0.5em; } #page-espaceperso.section-auth { width:90%; max-width:90%; padding:3rem 10%; } #page-espaceperso.section-auth:before { content:''; position:absolute; left:0; right:0; top:8em; height:0.75px; background-color:rgba(182,182,182,1); } #page-espaceperso.section-auth .connected { font-size:calc(1.2 * 0.8rem); font-weight:400; } #page-espaceperso.section-auth form { padding-bottom:3rem; } #page-espaceperso.section-auth form button { font-size:calc(1.2 * 0.8rem); text-transform:none; transform:translate(-100%, -100%); background-color:transparent; color:rgba(0,155,221,1); padding:0.5em 1em; margin:0.5em 0 0 0; } body.desktop #page-espaceperso.section-auth form button:hover { background-color:rgba(0,155,221,1); border-color:rgba(0,155,221,1); color:rgba(255,255,255,1); } #page-espaceperso.section-auth #ul-auth { transform:none; width:100%; } #page-espaceperso.section-auth #ul-auth > li button { text-align:left; font-size:1.4em; line-height:1.3; cursor:pointer; position:relative; display:block; width:100%; padding:2em 2em; margin:0; border-radius:0.5em; border:1px solid; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; border-color:transparent; border:0; color:rgba(255,255,255,1); } #page-espaceperso.section-auth #ul-auth > li button:hover { border-color:transparent; color:rgba(255,255,255,1); } #page-espaceperso.section-auth #ul-auth > li button > b, #page-espaceperso.section-auth #ul-auth > li button > strong { font-weight:300; display:block; text-transform:uppercase; font-size:1.5em; } #page-espaceperso.section-auth #ul-auth > li button { background-color:rgba(18,18,18,1); } body.desktop #page-espaceperso.section-auth #ul-auth > li button:hover { background-color:rgba(0,155,221,1); } #page-espaceperso.section-auth #ul-auth { display:flex; flex-wrap:wrap; justify-content: left; } #page-espaceperso.section-auth #ul-auth > li { flex:1; margin:1em 1em; min-width:calc(33% - 2em); max-width:calc(33% - 2em); } .section-auth button.goback { position:absolute; left:calc(100% - 12em); bottom:0; background-color:rgba(128,128,128,1); border-color:rgba(128,128,128,1); display:inline-block; width:2.9em; height:2.9em; transform:none; } .section-auth button.goback svg { stroke-width:10; position:absolute; left:50%; top:50%; height:1em; width:auto; transform:translate(-50%, -50%) rotate(180deg); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { z-index:900; position:relative; background-color:rgba(47,47,47,1); color:rgba(200,200,200,1); text-align:center; } footer .logo { height:6em; width:auto; display:inline-block; vertical-align:top; margin:2em 0 0 0; } footer .logo .azimut, footer .logo .sport { fill:rgba(255,255,255,1); } footer .infos { padding:4em 10%; } footer .infos svg { position:relative; display:inline-block; vertical-align:top; height:1.6em; width:auto; left:0; transform:translateY(-0.3em); margin-right:0.5em; } footer .infos > div { display:block; position:relative; font-size:0; } footer .infos h2 { font-size:1.4em; text-transform:uppercase; font-weight:400; color:rgba(255,255,255,1); margin-bottom:1em; } footer .infos > div > div > div { font-size:1.1em; } footer .infos .localisation { margin-top:1em; } footer .infos .tel { font-size:1.6em; margin-top:0.7em; font-weight:400; } body.desktop footer .infos a:hover { text-decoration:none; } footer .infos .exception { margin-top:1em; color:rgba(0,155,221,1); } footer nav li { list-style:none; margin:0 0 1.6em 0; text-align:inherit; } footer nav button { font-size:1.2em; font-weight:400; line-height:1; position:relative; background-color:transparent; color:rgba(255,255,255,1); border:0; margin:0; padding:0; text-align:left; text-transform:uppercase; } body.desktop footer nav button:hover { cursor:pointer; background-color:transparent; color:rgba(0,155,221,1); } footer .copyright { background-color:rgba(18,18,18,1); color:rgba(200,200,200,1); margin:0; padding:1em 10%; text-align:center; line-height:1; } footer .copyright span { padding:0 1em; line-height:1; display:inline-block; vertical-align:top; text-transform:uppercase; color:rgba(200,200,200,1); } footer .copyright span a { text-transform:none; 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 */ .page-erreur { background:linear-gradient(to bottom, rgba(8,10,15,1), rgba(38,45,67,1)); color:rgba(255,255,255,1); text-align:center; min-height:90vh; } .page-erreur .contenu { display:block; width:25rem; margin:0 auto; } .page-erreur .contenu > svg { position:relative; width:25rem; height:auto; padding:8rem 0 4rem 0; margin:0; } .page-erreur .contenu p { font-size:1.4em; color:rgba(255,255,255,1); text-align:center; } .page-erreur > .star { position:absolute; } .page-erreur > .star:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-size:contain; background-position: center center; background-repeat: no-repeat; background-image:url(https://www.azimut-sport.com/_chartes_/azimut/ressources/images/erreurs/halo.png); } .page-erreur > .star svg { position:absolute; left:50%; top:50%; width:35%; height:auto; transform:translate(-50%,-50%); } .page-erreur > .star:not(:first-of-type):after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:10%; height:10%; background-color:rgba(255,255,255,1); border-radius:50%; } .page-erreur > .star:nth-of-type(1) { left:65%; top:35%; width:4em; height:4em; } .page-erreur > .star:nth-of-type(2) { left:2%; top:8%; width:3em; height:3em; } .page-erreur > .star:nth-of-type(3) { left:90%; top:12%; width:2em; height:2em; } .page-erreur > .star:nth-of-type(4) { left:15%; top:50%; width:1em; height:1em; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } #en2mots { background-color:rgba(255,255,255,1); width:100%; max-width:100%; 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:951px), (orientation:landscape) and (min-width:501px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header, header aside, main, #accueil-materiel ul li, #accueil-avantages ul li, #accueil-location > ul > li, #accueil-shopavantages > ul > li, #accueil-actualites > ul > li, #accueil-marques > ul > li, #page-location > ul > li, #page-location > ul > li .infostarif > div, #page-partenaires > ul > li, #page-materiel > ul > li, #page-atelier > div, #page-sorties > ul > li, .listepanier > ul > li > .sizecart li, #page-panier form.checkout fieldset.facturation > label, ul.liste-commandes > li > div > span, ul.liste-commandes > li > div > button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, .section-auth form > label, .section-auth form > div, .section-auth form > button, .nav-cartauth ul > li, footer .infos > div > div, footer .infos > div > nav { font-size:0.8rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:90%; } #showhidemenu { display:none; } header > div:before { height:calc(0.7em + 2.97em + 7em + 0.7em - 0.3em); transition:height linear 300ms; } header h1 { margin:calc(0.7em + 2.97em) 0 calc(0.7em) 5%; transition:margin-bottom linear 300ms; } body.showsousmenu header h1 { margin-bottom:calc(0.7em + 2.9em);} header nav > ul > li.location > button { color:rgba(0,155,221,1); font-weight:600; } body.desktop header nav ul#menu > li.location > button:hover, header nav ul#menu > li.location.current > button { color:rgba(0,155,221,1); } header nav ul#menu li.compte, header nav ul#menu li.cart { display:none; } header nav ul:not(#coordscompte) > li:not(:first-of-type) > button:before { content:''; position:absolute; left:calc(-1 * (1em + 1px)); top:50%; transform:translateY(-50%); width:0.5px; height:0.8em; background-color:rgba(18,18,18,1); } header nav > ul:not(#coordscompte) ul > li:not(:first-of-type) > button:before { background-color:rgba(255,255,255,1); } header nav > ul#menu > li > button:after { content:''; position:absolute; left:0; bottom:0; transform:translateY(0.5em); width:0; height:0.1em; transition:width 300ms ease; background-color:rgba(0,155,221,1); } body.desktop header nav > ul#menu > li > button:hover:after, header nav > ul#menu > li > button.hover:after, header nav > ul#menu > li.current > button:after { width:100%; } header nav > ul#menu { height:3.77em; top:calc(0.7em + 2.97em + 7em + 0.7em - 0.3em - 3.77em); } header nav > ul#menu > li > button { font-size:1.3em; margin:1em 1em; line-height:0.9; } header nav > ul#menu ul { height:2.9em; } header nav > ul#menu ul > li > button { font-size:1em; margin:1em 1em; line-height:0.9; } header nav > ul ul { top:100%; background-color:rgba(18,18,18,0.8); max-height:0; transition:max-height ease 500ms; overflow:hidden; } body.desktop header nav > ul > li:hover > ul, header nav > ul > li.hover > ul, header nav > ul > li.current > ul { max-height:100%; } header nav > ul#coordscompte li:first-of-type { position:absolute; left:5%; border:0; } header nav > ul#coordscompte li:first-of-type > div { margin-left:0; } #accueil-diaporama .slide svg { width:12em; right:5%; bottom:3em; } #accueil-diaporama .slide div.legende { padding:0 55% 0 15%; top:50%; transform:translateY(-50%); } #accueil-flash > div { max-width:54em; text-align:left; } #accueil-flash > div > svg { position:absolute; left:0; top:50%; transform:translateY(-50%); } #accueil-flash > div > div { padding-left: calc(17em + 5em); height:auto; min-height:5em; } #accueil-materiel ul li { width:calc(25% - (2 * 1rem)); padding-bottom:calc((100% * 2 / 3) / 4); } #accueil-avantages ul { display:flex; flex-wrap:nowrap; gap:2em; margin-top:-25em; } #accueil-avantages ul li { width:25%; } #accueil-location li > div { position:absolute; display:inline-block; width:45%; height:auto; top:50%; transform:translateY(-50%); padding-left:0; } #accueil-location > ul > li:nth-of-type(2n+1) { padding-right:55%; } #accueil-location > ul > li:nth-of-type(2n+1) > div { left:55%; } #accueil-location > ul > li:nth-of-type(2n+2) { padding-left:55%; } #accueil-location > ul > li:nth-of-type(2n+2) > div { left:0; } #accueil-shopavantages ul { display:flex; flex-wrap:nowrap; gap:2em; } #accueil-shopavantages ul li { width:calc(100% / 3); } #form-location { background-color:rgba(200,200,200,1); } #form-location .accueil h1, #form-location .accueil span, #form-location .accueil input, #form-location .accueil select, #form-location .accueil button, #form-location .accueil label.myinput > svg { font-size:1rem; } #form-location h1, #form-location span, #form-location input, #form-location select, #form-location button, #form-location label.myinput > svg { font-size:0.8rem; } #form-location div.asterisque { font-size:calc(0.6 * 0.8rem); } #form-location h1 { color:rgba(255,255,255,1); } #form-location .fermeture h1 { color:rgba(18,18,18,1); } #form-location .accueil:not(.fermeture) h1 { color:rgba(0,133,181,1); text-transform:uppercase; font-weight:600; vertical-align:middle; } #form-location .accueil:not(.fermeture) h1 svg { display:inline-block; stroke-width:15; vertical-align:middle; transform:translateY(-0.1em); } #form-location fieldset:first-of-type:before { background-color:rgba(179,179,179,1); content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translateX(-50%); } #form-location fieldset:not(:first-of-type) { display:inline-block; vertical-align:middle; width:auto; } #form-location fieldset:first-of-type label { border-left:1px solid rgba(255,255,255,1); } #form-location form.fermeture h1 { border-left:0; text-align:center; } #form-location form:not(.accueil) fieldset:first-of-type label.myselect { border-right:1px solid rgba(255,255,255,1); } #form-location fieldset:first-of-type label.myinput { margin-left:0; border-left:0; } #form-location fieldset:first-of-type label.myinput > span, #form-location fieldset:first-of-type label.myinput > input { background-color:rgba(200,200,200,1); } #form-location fieldset:first-of-type label svg { display:none; } #form-location fieldset:first-of-type label > span { background-color:rgba(179,179,179,1); color:rgba(18,18,18,1); text-transform:uppercase; } #form-location fieldset:first-of-type label > input, #form-location fieldset:first-of-type label > select { background-color:rgba(179,179,179,1); color:rgba(0,133,181,1); position:absolute; top:0; left:0; width:100%; height:100%; } #form-location fieldset:first-of-type label > select { width:100%; } #form-location fieldset:first-of-type label.myselect > span { padding-right:4em; } #form-location fieldset:not(:first-of-type) span { color:rgba(255,255,255,1); } #form-location label.myselectbtn > select { display:none; } #form-location label.myselectbtn button { border-left:1px solid rgba(255,255,255,1); background-color:rgba(224,224,224,1); color:rgba(18,18,18,1); } #form-location .myselectbtn button.current { border-color:rgba(255,255,255,1); background-color:rgba(224,224,224,1); color:rgba(0,155,221,1); } body.desktop #form-location label.myselectbtn button:hover { border-color:rgba(255,255,255,1); background-color:rgba(224,224,224,1); color:rgba(0,155,221,1); } #form-location label.myselectbtn button:first-of-type { border:0; } #page-location > ul { display:flex; flex-wrap:wrap; justify-content: center; } #page-location > ul > li { flex:1; margin:2em 0.7em; min-width:calc(25% - 1.4em); max-width:calc(25% - 1.4em); } #page-location > ul > li > div { padding-bottom:calc(2em + 100% + 3.5em); } #page-location > ul > li form { position:absolute; left:2rem; right:2rem; bottom:2rem; height:auto; } #page-location > ul > li.chaussures { min-width:calc(75% - 1.4em); max-width:calc(75% - 1.4em); min-height:calc(4rem + 2*2rem + 6.5rem); } #page-location > ul > li.chaussures > div { padding-left:18rem; padding-right:35%; padding-bottom:2rem; } #page-location > ul > li.chaussures form { height:calc(100% - 2*2rem); } #page-location > ul > li.chaussures .visuels { position:absolute; left:2rem; top:50%; transform:translateY(-50%); width:10rem; padding-bottom:10rem; margin:0; } #page-location > ul > li.chaussures .infostarif { position:absolute; right:calc(0rem + 1em); top:50%; transform:translateY(-50%); width:calc(33% - 1em - 3rem); } #page-location > ul > li.chaussures .detail { padding:1.5rem calc(2rem + 2rem) 2rem 2rem; } #page-panier:not(.checkout) .listepanier, .section-commandes .listepanier, .section-dash .listepanier { min-height:45em; } #page-panier.checkout .listetotaux { clear:both; } #page-panier fieldset.facturation { position:absolute; left:0; top:0; transform:translateX(calc(-100% - 2 * (4rem + 6px) )); } #page-panier form.checkout fieldset.facturation label:not(.notes) { width:50%; } #page-panier form.checkout fieldset.facturation label.adresse, #page-panier form.checkout fieldset.facturation label.complement { width:100%; } #page-panier form.checkout fieldset.facturation label.cp { width:15%; } #page-panier form.checkout fieldset.facturation label.pays { width:35%; } #page-panier form.checkout fieldset.facturation label.nom, #page-panier form.checkout fieldset.facturation label.email, #page-panier form.checkout fieldset.facturation label.cp { padding-right:1em; } #page-panier form.checkout fieldset.facturation label.prenom, #page-panier form.checkout fieldset.facturation label.telephone, #page-panier form.checkout fieldset.facturation label.pays { padding-left:1em; } #page-panier form.checkout fieldset.facturation label.ville { padding-left:1em; padding-right:1em; } #page-presentation { margin-top:8em; padding-bottom:calc( (100vw * (1225 / 2500)) - 30em ); } #page-presentation > h1 { position:absolute; left:0; top:calc( (2.2em / 3) - 1em); width:50%; padding:0 5% 0 calc(10% + 5%); } #page-presentation > h2 { width:50%; margin-left:50%; padding:0 calc(10% + 5%) 0 5%; } #page-presentation > div { width:50%; } #page-presentation > div:first-of-type { position:absolute; left:0; top:4.2em; padding-left:calc(10% + 5%); padding-right:5%; } #page-presentation > div:not(:first-of-type) { margin-left:50%; padding-left:5%; padding-right:calc(10% + 5%); } #page-partenaires > ul { display:flex; flex-wrap:wrap; } #page-partenaires > ul > li { flex:1; margin:2em; min-width:calc(50% - 4em); max-width:calc(50% - 4em); } #page-materiel > ul.avantages { display:flex; flex-wrap:wrap; } #page-materiel > ul.avantages > li { flex:1; margin:2em; min-width:calc(50% - 4em); max-width:calc(50% - 4em); } #page-materiel > ul.materiels { display:flex; flex-wrap:wrap; } #page-materiel > ul.materiels > li { flex:1; margin:0 2em; min-width:calc(33% - 4em); max-width:calc(33% - 4em); } #page-sorties-raquettes { padding:10em 40% 8em 20%; } #page-sorties-raquettes > img { height:100%; width:auto; } #page-sorties-raquettes .tarifs { position:absolute; top:50%; transform:translateY(-50%); right:5%; width:auto; } #page-sorties > ul { display:flex; flex-wrap:wrap; } #page-sorties > ul > li { flex:1; margin:2em; min-width:calc(50% - 4em); max-width:calc(50% - 4em); } #page-sorties .tarif { position:absolute; top:50%; transform:translateY(-50%); right:4rem; } #page-sorties .tarif > span { display:block; } #page-horspiste { padding:4em calc(10% + 35em) 4em 10%; } #page-horspiste button { position:absolute; right:10%; bottom:calc(4em / 1.5); } 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:50rem; } 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:50rem; } 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; } #nav-dash:before { background-color:rgba(179,179,179,1); content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translateX(-50%); } #nav-dash label.myselectbtn > select { display:none; } #nav-dash label.myselectbtn button { font-size:0.8rem; border-left:1px solid rgba(255,255,255,1); background-color:rgba(224,224,224,1); color:rgba(18,18,18,1); } #nav-dash .myselectbtn button.current { border-color:rgba(255,255,255,1); background-color:rgba(224,224,224,1); color:rgba(0,155,221,1); } body.desktop #nav-dash label.myselectbtn button:hover { border-color:rgba(255,255,255,1); background-color:rgba(224,224,224,1); color:rgba(0,155,221,1); } #nav-dash label.myselectbtn button:first-of-type { border:0; } #nav-dash label.myselectbtn button.goback { background-color:transparent; color:rgba(255,255,255,1); width:4em; height:4em; } #nav-dash label.myselectbtn button.goback svg { stroke-width:10; position:absolute; left:50%; top:50%; height:1em; width:auto; transform:translate(-50%, -50%) rotate(180deg); } body.desktop #nav-dash label.myselectbtn button.goback:hover { background-color:transparent; color:rgba(0,155,221,1); } #dash-gammes.adminliste { display:flex; flex-wrap:wrap; justify-content: center; } #dash-gammes.adminliste > div { flex:1; margin:1em 1em; min-width:calc(33% - 2em); max-width:calc(33% - 2em); } #dash-partenaires.adminliste { display:flex; flex-wrap:wrap; justify-content: center; } #dash-partenaires.adminliste > div { flex:1; margin:1em 1em; min-width:calc(50% - 2em); max-width:calc(50% - 2em); } #dash-dashlistes.adminliste { display:flex; flex-wrap:wrap; justify-content: center; } #dash-dashlistes.adminliste > div { flex:1; margin:1em 1em; min-width:calc(33% - 2em); max-width:calc(33% - 2em); } 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:25%; text-align:left; padding:0 2em; } footer .infos > div > div:before, footer .infos > div > nav:before { content:''; position:absolute; left:0; top:0; width:0.5px; height:100%; background-color:rgba(200,200,200,0.6); } footer .infos > div > div.vide:before { width:0; } footer .copyright span:first-of-type { padding-right:3em; } 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:951px) 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 aside, main, #accueil-materiel ul li, #accueil-avantages ul li, #accueil-location > ul > li, #accueil-shopavantages > ul > li, #accueil-actualites > ul > li, #accueil-marques > ul > li, #page-location > ul > li, #page-location > ul > li .infostarif > div, #page-partenaires > ul > li, #page-materiel > ul > li, #page-atelier > div, #page-sorties > ul > li, .listepanier > ul > li > .sizecart li, #page-panier form.checkout fieldset.facturation > label, ul.liste-commandes > li > div > span, ul.liste-commandes > li > div > button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, .section-auth form > label, .section-auth form > div, .section-auth form > button, .nav-cartauth ul > li, footer .infos > div > div, footer .infos > div > nav { font-size:1.1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ header > div:before { height:calc(0.7em + 2.97em + 5em + 0.7em - 0.3em); } header h1 { margin:calc(0.7em + 2.97em) 0 calc(0.7em) 2%; } body.showsousmenu header h1 { margin-bottom:calc(0.7em + 2.9em);} header h1 > a { height:5em; } header h1 > span { padding-left:calc(1em * (1 / 1.1) ); padding-bottom:calc(0.3em * (1 / 1.1) ); font-size:1.1em; } header nav ul { padding:0 2%; } header nav > ul#menu { height:3.48em; top:calc(0.7em + 2.97em + 5em + 0.7em - 0.3em - 3.48em); } header nav > ul#menu > li > button { font-size:1.2em; margin:1em 1em; line-height:0.9; } header nav > ul#menu ul { height:2.9em; } header nav > ul#menu ul > li > button { font-size:1em; margin:1em 1em; line-height:0.9; } header nav > ul#coordscompte { height:2.97em; } header nav > ul#coordscompte > li > button { font-size:0.9em; margin:1.2em 1em; line-height:0.9; } header nav > ul#coordscompte li:first-of-type { left:2%; } #accueil-diaporama .slide svg { width:8em; right:3%; bottom:3em; } #accueil-diaporama .slide div.legende { padding-left:7%; } #accueil-diaporama div.legende > h2 { font-size:0.7em; } #accueil-diaporama .slide.jours div.legende > h2 { padding:0 45% 0 7%; font-size:4em; } #accueil-avantages { padding: 3em 2em; } #accueil-avantages ul li { padding:2em 2em; } #accueil-avantages ul li h2 { font-size:1.8em; } #accueil-tarifs { padding: 3em 2em; } #accueil-actualites > ul > li { width:calc(33% - (2 * 1%)); } #accueil-actualites > ul > li:nth-of-type(4) { display:none; } #form-location .accueil h1, #form-location .accueil span, #form-location .accueil input, #form-location .accueil select, #form-location .accueil button, #form-location .accueil label.myinput > svg { font-size:1.2rem; } #form-location h1, #form-location span, #form-location input, #form-location select, #form-location button, #form-location label.myinput > svg { font-size:1.1rem; } #form-location div.asterisque { font-size:calc(0.6 * 1.1rem); } #page-location > ul > li { margin-left:1.8em; margin-right:1.8em; min-width:calc(50% - 3.6em); max-width:calc(50% - 3.6em); } #page-location > ul > li.chaussures { min-width:calc(100% - 3.6em); max-width:calc(100% - 3.6em); } #page-location > ul > li.chaussures > div { padding-left:16rem; padding-right:calc(50% - 2rem); } #page-location > ul > li.chaussures .visuels { left:0; } #page-location > ul > li.chaussures .infostarif { right:0; width:calc(50% - 4rem - 3.6em); } #page-location > ul > li .visuels input[type="radio"] + span, #page-location > ul > li .visuels input[type="checkbox"] + span { font-size:1.4em !important; } #page-location > ul > li .visuels > label:first-of-type { top:4.5rem; } #page-location > ul > li .visuels > label span > img { height:8em; } #page-presentation { margin-top:7em; padding-bottom:calc( (100vw * (1225 / 2500)) - 16em ); } #page-presentation > h1 { padding:0 5% 0 calc(1% + 5%); } #page-presentation > h2 { padding:0 calc(1% + 5%) 0 5%; } #page-presentation > div:first-of-type { padding-left:calc(1% + 5%); padding-right:5%; } #page-presentation > div:not(:first-of-type) { padding-left:5%; padding-right:calc(1% + 5%); } #page-partenaires > ul { padding:0 calc(5% - 2em); } #page-shop { padding: 6em 40% 4em 20%; } #page-shop h1 { padding-bottom:1em; } #page-shop > div { font-size:1em; } #page-materiel > ul.avantages { padding:0 calc(5% - 2em); } #page-materiel > ul.materiels { padding:0 calc(3% - 2em); } #page-materiel > ul.materiels > li { min-width:calc(50% - 4em); max-width:calc(50% - 4em); } #page-atelier > div { padding:2em 4%; } #page-atelier > div:first-of-type { padding-right:2%; } #page-atelier > div:last-of-type { padding-left:2%; } #page-atelier ul > li { padding:1em 1em; } #page-sorties > ul { padding:0 calc(5% - 2em); } #page-horspiste { padding:4em 10% calc(4em + 8em) 10%; } #page-horspiste h2 { font-size:2em; } #page-sorties-raquettes { padding:4em 10% 35em 10%; } #page-sorties-raquettes > img { height:75%; top:25%; } #page-sorties-raquettes .tarifs { right:15%; top:70%; } 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; } .section-auth { width:50%; max-width:50%; } #page-espaceperso.section-auth { padding:3rem 0; } #page-espaceperso.section-auth #ul-auth > li button { font-size:1.2em; } #page-espaceperso.section-auth #ul-auth > li button > b, #page-espaceperso.section-auth #ul-auth > li button > strong { font-size:1.4em; } #nav-dash { width:96%; } .section-dash table.listetarifs tr { position:relative; } .section-dash table.listetarifs th:first-of-type, .section-dash table.listetarifs td:first-of-type { position:absolute; left:0.5em; top:0.5em; width:100%; height:auto; text-align:left; } .section-dash table.listetarifs th:not(first-of-type), .section-dash table.listetarifs td:not(first-of-type) { padding-top:2em; } #dash-dashlistes.adminliste > div { flex:1; margin:1em 1em; min-width:calc(50% - 2em); max-width:calc(50% - 2em); } #dash-dashlistes.adminliste > div:last-of-type { min-width:calc(100% - 2em); max-width:calc(100% - 2em); } footer .logo { height:5em; } 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:950px), (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 aside, main, #accueil-materiel ul li, #accueil-avantages ul li, #accueil-location > ul > li, #accueil-shopavantages > ul > li, #accueil-actualites > ul > li, #accueil-marques > ul > li, #page-location > ul > li, #page-location > ul > li .infostarif > div, #page-partenaires > ul > li, #page-materiel > ul > li, #page-atelier > div, #page-sorties > ul > li, .listepanier > ul > li > .sizecart li, #page-panier form.checkout fieldset.facturation > label, ul.liste-commandes > li > div > span, ul.liste-commandes > li > div > button, section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul, section.contact div.introform, section.contact label, .section-auth form > label, .section-auth form > div, .section-auth form > button, .nav-cartauth ul > li, footer .infos > div > div, footer .infos > div > nav { font-size:1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .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 { position:relative; text-align:left; width:100%; padding:0 2%; margin:calc(0.7em + 2.97em) 0 calc(0.7em - 0.3em) 0; } header h1 > a { height:5em; } header h1 > span { display:block; position:relative; width:100%; margin-top:0.7em; margin-bottom:0.3em; text-align:center; padding:0; font-size:1.4em; line-height:1; opacity:1; overflow:hidden; height:2em; transition:margin 300ms linear 100ms, height 300ms linear 100ms; } .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 > span { margin-top:calc(0.7em - 0.3em); margin-bottom:0; height:0; } header > div:before { z-index:1001; bottom:0.3em; } header nav > ul#coordscompte { padding:0; text-align:center; overflow:hidden; } header nav > ul#coordscompte li:first-of-type { display:none; } header nav > ul#coordscompte > li > div { margin-left:1em; margin-right:1em; } header nav > ul#coordscompte > li.tel > div > span > span:first-of-type { display:none; } header nav > ul#coordscompte > li.tel { border-left:0; } header nav > ul#coordscompte > li.localisation { border-right:0; } header nav > ul#coordscompte li.compte, header nav > ul#coordscompte li.cart { display:none; } #showhidemenu { z-index:2100; position:absolute; display:inline-block; top:calc(2.97em + 2em); right:2em; width:3em; height:3em; margin:0; padding:0; background-color:transparent; border:0; } #showhidemenu > svg { color:rgba(18,18,18,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 { background-color:transparent; } header nav ul { position:relative; } header nav > ul#menu { position:absolute; left:0; top:0; width:100vw; height:100vh; overflow:hidden; max-height:0; transition:max-height ease 500ms; background-color:rgba(255,255,255,1); padding-top:calc(2.97em + 5em + (2 * 0.7em) ); } 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:100vh; } 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(18,18,18,1); } header nav > ul#menu > li.current > button { color:rgba(0,155,221,1); } body.desktop header nav > ul#menu > li > button:hover, header nav > ul > li > button.hover { color:rgba(0,155,221,1); } header nav > ul#menu ul > li > button { color:rgba(18,18,18,1); } header nav > ul#menu ul > li.current > button { color:rgba(0,155,221,1); } body.desktop header nav > ul#menu ul > li > button:hover, header nav > ul ul > li > button.hover { color:rgba(0,155,221,1); } header nav > ul#menu > li > button { font-size:1.1em; margin:1em 1em; line-height:0.9; } header nav > ul#menu ul > li > button { font-size:1em; margin:1em 1em; line-height:0.9; } .accueil #form-location { padding-bottom:2em; } #accueil-diaporama { padding-bottom:100%; } #accueil-diaporama .slide svg { width:6em; right:3%; top:2em; } #accueil-diaporama .slide img { width:auto; height:100%; } #accueil-diaporama .slide.casque img { height:75%; } #accueil-diaporama .slide.packs img { height:85%; left:0; transform:none; } #accueil-diaporama .slide:not(.jours) div.legende { padding:0 5% 0 5%; bottom:1.5em; } #accueil-diaporama div.legende > h2 { font-size:0.5em; } #accueil-diaporama div.legende > span { font-size:1.4em; } #accueil-diaporama .slide:before { background:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,1) 25%, transparent 60%); } #accueil-diaporama .slide.cauterets:before { background:linear-gradient(to top, rgba(180,203,217,0.9), rgba(180,203,217,0.9) 15%, transparent 55%); } #accueil-diaporama .slide.casque:before { background:linear-gradient(to top, rgba(49,50,106,1), rgba(49,50,106,1) 25%, rgba(49,50,106,0.95) 35%, transparent 60%); } #accueil-diaporama .slide.packs:before { background:linear-gradient(to top, rgba(110,179,194,1), rgba(110,179,194,1) 15%, rgba(110,179,194,0.95) 25%, transparent 60%); } #accueil-diaporama .slide.jours:before { background:linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 45%, transparent); } #accueil-diaporama .slide.jours div.legende { padding:0; top:0; height:100%; } #accueil-diaporama .slide.jours div.legende > h2 { height:100%; padding:calc(100% - (1.5em / 2.6) - (1.1 * 2 * 1em)) 5% 0 5%; font-size:2.6em; } #accueil-flash { padding:1.5em 10%; } #accueil-flash > div > svg { width:12em; margin-bottom:1.5em; } #accueil-materiel ul li { width:calc(100% - (2 * 1rem)); padding-bottom:calc((100% * 2 / 3) / 1); } #accueil-avantages { padding: 2em 2%; } #accueil-avantages h1 { font-size:1.8em; } #accueil-avantages ul li { width:100%; padding:2em 2em; background-color:transparent; } #accueil-avantages ul li h2 { padding-bottom:1em; } #page-infostarifs { padding: 2em 2em; } #page-infostarifs h1 { font-size:1.8em; } #page-infostarifs > div { max-width:100%; } #accueil-location { padding:4em 2%; } #accueil-location > ul > li { margin-bottom:2em; } #accueil-shopavantages { padding:4em 2%; } #accueil-shopavantages > ul > li { margin-bottom:2em; } #accueil-actualites > ul > li { width:100%; margin:1em 0; } #accueil-marques li { width:48%; padding-bottom:33%; margin-left:4%; } #accueil-marques li:nth-child(-n+6) { display:none; } #accueil-marques li:nth-child(-n+2) { display:inline-block; } aside#meteo { padding-top:2em; } aside#meteo button { font-size:1.1em; } #modal-location > div { min-width:90vw; max-width:95vw; max-height:50vh; padding:2rem 1.5rem; } #modal-location > div h1 { font-size:1.3em; padding-left:0; text-align:left; } #form-location h1, #form-location span, #form-location input, #form-location select, #form-location button, #form-location label.myinput > svg { font-size:1rem; } #form-location div.asterisque { font-size:calc(0.6 * 1rem); } #form-location label.myselectbtn > button { display:none; } #form-location form.accueil fieldset { display:block; margin:0 2rem; } #form-location h1 { text-align:center; color:rgba(255,255,255,1); width:100%; text-transform:uppercase; } #form-location h1 svg { display:none; } #form-location .fermeture h1 { text-transform:none; } #form-location h1:before { content:''; background-color:rgba(64,64,64,1); position:absolute; z-index:-1; top:0; bottom:0; width:100vw; left:50%; transform:translateX(-50%); } #form-location form.accueil h1 { margin-top:2em; margin-bottom:1em; } #form-location label { width:100%; padding:0; margin:0; border-bottom:1px solid rgba(255,255,255,1); } #form-location label.mydate > input { padding-right:1.5em; } #form-location form.accueil label.mydate > span, #form-location form.accueil label.myselect > span { width:100%; background-color:rgba(179,179,179,1); color:rgba(18,18,18,1); text-transform:uppercase; } #form-location form.accueil fieldset:first-of-type label > input, #form-location form.accueil fieldset:first-of-type label > select { background-color:rgba(179,179,179,1); color:rgba(18,18,18,1); position:absolute; top:0; left:0; bottom:0; right:0; width:100%; } #form-location form:not(.accueil) label { background-color:rgba(200,200,200,1); } #form-location form:not(.accueil) label > span { text-align:right; padding:1.5em 0.5em 1.5em 0; width:50%; background-color:rgba(200,200,200,1); color:rgba(18,18,18,1); } #form-location form:not(.accueil) label > input, #form-location form:not(.accueil) label > select { background-color:rgba(224,224,224,1); padding:1.5em 1.5em; width:50%; height:4em; } #form-location label > input, #form-location label > select { color:rgba(18,18,18,1); } #form-location label.myselect > select.placeholder { color:rgba(18,18,18,1) !important; } #form-location form:not(.accueil) { padding-bottom:calc(1 * ( (4 * 1rem) + 1px)); } #form-location form:not(.accueil) fieldset:first-of-type label.myinput { position:absolute; left:0; right:0; top:calc(100% + 2 * ( (4 * 1rem) + 1px)); } #form-location button { width:100%; } #form-location label.mydate > input, #form-location label.mydate > input:-webkit-autofill, #form-location label.mydate > input:-webkit-autofill:hover, #form-location label.mydate > input:-webkit-autofill:focus, #form-location label.mydate > input:-webkit-autofill:active { outline:0; background-color:rgba(224,224,224,1); -webkit-box-shadow: 0 0 0 4em rgba(224,224,224,1) inset !important; } #form-location label.myinput > input, #form-location label.myinput > input:-webkit-autofill, #form-location label.myinput > input:-webkit-autofill:hover, #form-location label.myinput > input:-webkit-autofill:focus, #form-location label.myinput > input:-webkit-autofill:active { outline:0; background-color:rgba(224,224,224,1); -webkit-box-shadow: 0 0 0 4em rgba(224,224,224,1) inset !important; } #page-location > ul { padding-left:5%; padding-right:5%; } #page-location > ul > li { width:100%; } #page-location > ul > li.chaussures .visuels { padding-bottom:50%; } #page-location > ul > li.chaussures .visuels > img:not(.baton) { left:50%; transform:translateX(-50%); } #page-location > ul > li .visuels input[type="radio"] + span, #page-location > ul > li .visuels input[type="checkbox"] + span { font-size:1.4em !important; } #page-location > ul > li .visuels > label:first-of-type { top:3.5rem; } #page-location > ul > li .visuels > label span > img { height:6em; } .addskier form label.skiername input { width:100%; } #page-panier { width:90%; } #page-panier h2 { text-align:center; font-size:1.7em; } .listepanier { width:100%; } .listepanier > ul li { margin-right:0; padding-right:0; } .listepanier > ul li > div > div.options { font-size:1.2em; } .listepanier > ul li > div > div.options > span { display:block; } .listepanier > button { margin-left:auto; margin-right:auto; } .listeassurance { width:100%; } .listetotaux { width:100%; } .divstatus { width:100%; } .section-commandes { width:90%; } ul.liste-commandes { width:100%; } ul.liste-commandes > li { margin-bottom:1em; } ul.liste-commandes > li > div span.reforder { width:100%; } ul.liste-commandes > li > div span.fulldate { width:30%; } ul.liste-commandes > li > div span.firstday { width:30%; } ul.liste-commandes > li > div span.montant { width:40%; } ul.liste-commandes > li > div span.mode { width:100%; } ul.liste-commandes > li > div span.status { width:100%; } ul.liste-commandes > li > div > button { width:100%; } #page-meteo iframe { height:6000px; } #page-presentation { padding-bottom:calc( (100vw * (1225 / 2500)) - 6em ); } #page-infostarifs > div { flex-wrap:wrap; } #page-partenaires > ul { display:block; padding:0 5%; } #page-partenaires > ul > li { width:100%; margin:1em 0; padding:2em 2em; } #page-shop { padding:80% 5% 2em 5%; } #page-shop > img { top:-10em; height:auto; width:100%; max-width:none; } #page-shop > img:last-of-type { display:none; } #page-shop h1 { font-size:2.4em; text-align:center; padding-top:1em; } #page-shop h1 > b { display:block; } #page-materiel > ul.avantages { display:block; padding:0 5%; } #page-materiel > ul.avantages > li { width:100%; margin:1em 0; padding:2em 2em; } #page-materiel > ul.materiels { display:block; padding:0 5%; padding-bottom:2rem; } #page-materiel > ul.materiels > li { width:100%; margin:1em 0; padding:2em 0 0 0; } #page-atelier > div { width:100%; padding:1em 5% 3em 5%; } #page-atelier > div:first-of-type { padding-right:5%; } #page-atelier > div:last-of-type { padding-left:5%; padding-bottom:1em; } #page-atelier h1 { font-size:2.2em; padding-bottom:0.7em; text-align:center; } #page-atelier > div:last-of-type h1 { font-size:1.6em; padding-bottom:0.7em; text-align:left; } #page-atelier ul { font-size:0.9em; } #page-atelier ul > li { padding:1em 0.2em 1em 0.5em; } #page-atelier ul > li > h3 { width:calc(55% - 3px); } #page-atelier ul > li > div { width:calc(45% - 3px); } #page-sorties-raquettes { padding:100% 5% 2em 5%; } #page-sorties-raquettes > img { top:-10em; height:auto; width:100%; } #page-sorties-raquettes h2 { font-size:2.2em; text-align:center; padding-top:1em; } #page-sorties-raquettes .tarifs { width:96%; margin:2em auto 0 auto; padding:2em 2em; } #page-sorties { margin-top:0; } #page-sorties > div { margin:0 5% 2em 5%; } #page-sorties > ul { display:block; padding:0 5%; } #page-sorties > ul > li { width:100%; margin:1em 0; padding:0; } #page-sorties h3 { padding:0.5em 2rem; } #page-sorties > ul > li > div { padding:1em 2rem 0 2rem; } #page-sorties .planning { padding:1em 0; } #page-sorties .tarif { padding-bottom:0.5em; } #page-horspiste { padding:4em 10% 4em 10%; } #page-horspiste h2 { font-size:2em; text-align:center; } #page-horspiste button { font-size:1.3em; width:100%; text-align:center; padding:0.8em 0.5em; margin:2em 0 0 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%; } #nav-dash { width:90%; } #nav-dash label.myselectbtn { margin-top:2rem; width:100%; } #nav-dash label.myselectbtn > select { font-size:1rem; } #nav-dash label.myselectbtn > button { display:none; } .section-dash { width:90%; } .section-dash .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width:100%; max-width:100%; margin-bottom:1em; } .section-dash table.listetarifs tr { position:relative; } .section-dash table.listetarifs th:first-of-type, .section-dash table.listetarifs td:first-of-type { position:absolute; left:0.5em; top:0.5em; width:100%; height:auto; text-align:left; } .section-dash table.listetarifs th:not(first-of-type), .section-dash table.listetarifs td:not(first-of-type) { padding-top:2em; } /* FOOTER */ footer { text-align:center; } footer .logo { height:5em; } footer .infos { padding-left:2%; padding-right:2%; } footer .copyright { padding:1em 2%; } footer .infos > div > div { margin-bottom:2em; } footer .infos > div > div:nth-of-type(3) { margin-top:4em; margin-bottom:4em; } footer .copyright span { display:block; text-align:center; padding:0; margin:1em 0 2em 0; } footer .copyright span:first-of-type { margin-bottom:3em; } section#page-mentionslegales, section#page-cgv { font-size:0.9rem; } .section-auth { width:80%; } #page-espaceperso.section-auth { width:100%; padding:3rem 5%; } #page-espaceperso.section-auth #ul-auth > li { min-width:calc(100% - 2em); max-width:calc(100% - 2em); } } /* 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; } }