/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* RESET */ * { box-sizing:border-box; } html { position:relative; display:block; } body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Handlee, sans-serif; font-size:0; font-weight:300; line-height:1.4; background-color:rgba(255,255,255,1); color:rgba(0,0,0,1); text-align:left; overflow-x:hidden; overflow-y:scroll; } body.noscrollbar { overflow-y:hidden; } header, main, 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:Handlee, 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; } ul { position:relative; margin:0; padding:0; } li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; } .fromrte ul { margin-left:1em; } .wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; } .cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; } .cover.top { top:0; transform:translate(-50%,0); } .cover.bottom { top:100%; transform:translate(-50%,-100%); } .cover.left { left:0; transform:translate(0,-50%); } .cover.topleft { left:0; top:0; transform:translate(0,0); } .cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); } .cover.right { left:100%; transform:translate(-100%,-50%); } .cover.topright { left:100%; top:0; transform:translate(-100%,0); } .cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); } .cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; } .clear { clear:both; } .blochref { cursor:pointer; } pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; } .ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); } .ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:#92573a; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* 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.lespapasconfituriers.fr/_chartes_/lespapas/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; } select::-ms-expand { display: none; } select option { color:rgba(22,22,22,1); } select.placeholder { color:rgba(54,54,54,0.55) !important; } /* Mise en forme des boutons radio et des checkboxes */ input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { content:'' !important; position:absolute !important; left:0 !important; top:0 !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */ width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */ transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */ transition:all .2s !important; /* on prévoit une animation */ } input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */ input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */ input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid rgba(221,221,221,1) !important; background-color:transparent !important; } /* Aspect général de la case */ input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:rgba(221,221,221,1) !important; } /* Aspect général de la coche */ input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */ input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */ input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */ input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.5) !important; } /* Aspect si "cochée" */ label { position:relative; display:inline-block; vertical-align:top; font-weight:300; } button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Handlee, sans-serif; font-size:1.2rem; font-weight:300; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); color:#ffffff; 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:#ffffff; border-color:rgba(22,22,22,1); text-decoration:none; outline:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ /* La durée de la transition doit être cohérente avec la valeur utilisée dans _charte_.js */ header { z-index:400; background-color:#ffffff; position:fixed; height:5rem; left:50%; transform:translateX(-50%); top:0; width:100%; margin:0 auto; padding:0; transition: all 300ms linear; overflow:visible; } #nav-home, #nav-button, #nav-toggle { display:none; } /* LOGO */ header #logo { z-index:430; display:inline-block; position:absolute; margin:0; padding:2rem 3rem 4rem 3rem; text-align:center; top:0; left:6rem; width:18rem; height:19rem; background: transparent url('https://www.lespapasconfituriers.fr/_chartes_/lespapas/ressources/images/logo-fond.png') center top no-repeat; background-size:contain; opacity:1; transition: all 1s linear; } header #logo img { display:block; margin:0; padding:0; position:relative; width:100%; } header #logo svg { display:block; margin:0; padding:0; position:relative; width:100%; height:100%; } .scroll header #logo, .interne header #logo { opacity:0; top:-19rem; transition:all 1s ease 0s; } /* NAVIGATION PRINCIPALE */ header nav { z-index:410; position:absolute; top:0; left:0; right:0; bottom:0; display:block; text-align:left; } header nav ul { z-index:415; display:inline-block; position:absolute; list-style-type:none; font-size:0; top:2.3rem; margin:0; padding:0; width:auto; max-width:70rem; transition: all 300ms linear; } header nav ul#menu { left:25rem; } header nav ul#menu-perso { right:2rem; padding-right:4rem; } header nav ul > li { font-size:1rem; position:relative; display:inline-block; margin:0.1rem 0; padding:0; } header nav ul > li:after { content:"|"; font-weight:normal; font-size:1.2rem; opacity:0.4; } header nav ul > li.contact:after { content:""; } header nav ul > li:last-child:after { content:""; } header nav ul > li > a { display:inline-block; color:#606060; text-decoration:none; margin:0; text-align:left; padding:0 1.5rem; font-size:1rem; transition: all 300ms linear; } body.desktop header nav ul > li > a:hover, header nav ul > li a.current { color:#92573a; text-decoration:none; } header nav ul > li.mobile { display:none; } header nav ul#menu > li:first-child { z-index:420; display:inline-block; position:absolute; margin:0; padding:0; top:-1.8rem; left:-19rem; width:11rem; height:4rem; opacity:0; transition:all 0.5s ease 0s; } header nav ul#menu > li:first-child:after { content:""; } header nav ul#menu > li:first-child > a { position:relative; padding:0; } header nav ul#menu > li:first-child > a img { display:block; margin:0; padding:0; position:relative; width:100%; } header nav ul#menu > li:first-child > a svg { display:block; margin:0; padding:0; position:relative; width:100%; height:100%; } .scroll header nav ul#menu > li:first-child, .interne header nav ul#menu > li:first-child { opacity:1; transition:all 0.8s ease 0.5s; } header nav ul#menu-perso > li:last-child { z-index:420; display:inline-block; position:absolute; margin:0; padding:0; top:-1.3rem; right:0; width:3rem; height:3rem; transition:all 0.5s ease 0s; } header nav ul#menu-perso > li:last-child > a { position:relative; padding:0; } header nav ul#menu-perso > li:last-child > a img { display:block; margin:0; padding:0; position:relative; width:100%; } header nav ul#menu-perso > li:last-child > a svg { display:block; margin:0; padding:0; position:relative; width:100%; height:100%; } header nav ul#menu-perso > li:last-child > a > span { position:absolute; padding:0.1em 0 0 0; margin:0; width:1rem; height:1rem; line-height:1rem; text-align:center; font-size:0.5rem; color:#fff; background-color:rgb(194,103,2); border-radius:50%; top:-0.2rem; right:-0.4rem; } header nav ul#menu-perso > li > ul { overflow:hidden; display:block; position:absolute; right:0; top:1em; width:auto; min-width:100%; height:auto; margin:2.6rem 0 0 0; padding:0; max-height:0; transition: max-height 500ms linear; text-align:right; font-size:0; } body.desktop header nav ul#menu-perso > li:hover > ul, ul#menu-perso > li > a.hover ~ ul { max-height:20rem; transition: max-height 500ms linear; } header nav ul#menu-perso > li > ul > li { position:relative; display:block; width:100%; margin:0; padding:0; list-style-type:none; text-transform:uppercase; text-align:right; font-size:0; background-color:rgba(255,255,255,0.9); } header nav ul#menu-perso > li > ul > li:after { content:""; } header nav ul#menu-perso > li > ul > li a { font-size:0.8rem; display:block; margin:0; padding:0.5em 2em; text-align:right; white-space: nowrap; } header nav ul#menu-perso > li > ul > li:first-child a { padding-top:1.5em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { font-size:0; color:#c0c0c0; background-color:#2e2e2e; position:relative; height:auto; width:100%; max-width:2560; margin:0 auto; padding:2rem 5% 5rem 5%; z-index:100; transition: all 0.3s linear; vertical-align:top; } #sociaux { position:relative; padding:0; display:inline-block; width:10%; vertical-align:top; font-size:0; } #sociaux > li { position:relative; display:inline-block; margin:0 0.5rem 0 0; padding:0; list-style-type:none; } #sociaux > li a { position:relative; display:inline-block; width:2rem; height:2rem; text-align:center; margin:0; padding:0; } #sociaux > li a img { position:relative; width:100%; } #sociaux > li a svg { position:relative; width:100%; height:100%; } #coordonnees { position:relative; font-size:1rem; padding:0 4rem 0 1rem; display:inline-block; width:30%; vertical-align:top; color:#d4d4d4; } #coordonnees h2 { font-size:2rem; margin-bottom:2rem; } #coordonnees div { position:relative; margin:1rem 0; padding:1rem 0 0 3rem; border-top:1px solid #505050; } #coordonnees img { display:block; position:absolute; left:0; top:1.1rem; margin:0; padding:0; width:1.2rem; } #coordonnees svg { display:block; position:absolute; left:0; top:1.1rem; margin:0; padding:0; width:1.2rem; height:1.2rem } #coordonnees svg path { fill:#505050; } #googlemap, #placeholdermap { position:relative; padding:0; display:inline-block; width:30%; height:25rem; vertical-align:top; } #contact { position:relative; font-size:1rem; padding:0 0 0 4rem; display:inline-block; width:30%; vertical-align:top; } #contact h2 { font-size:2rem; padding-left:0.5rem; margin-bottom:1rem; } #form-contact { font-size:0; width:100%; margin:0 auto; text-align:right; } #form-contact label { font-size:0.8rem; width:50%; padding:0 0 0 0.5em; text-align:left; margin-bottom:0.5em; } #form-contact label.adresse, #form-contact label.message { width:100%; } #form-contact input, #form-contact textarea { font-size:0.8rem; background-color:#3f3f3f; color:#ffffff; line-height:2em; height:2em; text-align:left; } #form-contact textarea { height:6em; } #form-contact label.consentementrgpd { width:100%; font-size:0.6rem; padding-left:0.5rem; margin-top:1rem; margin-bottom:1rem; text-transform:none; } #form-contact label.consentementrgpd input[type="checkbox"] { font-size:1em !important; position:absolute !important; padding-top:0 !important; padding-bottom:0 !important; left:0 !important; top:2em !important; transform:scale(1) !important; } .asterisque { font-size:0.6rem !important; color:#666666 !important; } #form-contact button { margin-top:0.5rem; font-size:0.8rem; background-color:#92573a; color:#ffffff; border:0; border-radius:5px; } body.desktop #form-contact button:hover { background-color:#ffffff; color:#92573a; } #form-contact .asterisque { display:block; text-align:right; margin-bottom:1em; } #form-contact .reponse { font-size:1rem; text-align:left; } #copyright { position:absolute; font-size:0.8rem; padding:0.5rem 0 1.5rem 3rem; bottom:0; left:0; right:0; height:3rem; background-color:#ffffff; color:#323232; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* CONTENU */ main { margin:0; padding:0; background-color:#ffffff; text-align:center; } main:after { content:""; display:table; clear:both; } h1, h2, h3 { margin:0; padding:0; text-align:left; text-transform:none; } h1 { font-size:1.6rem; text-align:center; padding-top:4rem; } h2 { font-size:1.4rem; } h3 { font-size:1.2rem; } section, aside { position:relative; margin:0; padding:0; } img { max-width:100%; } .hovergray {-webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%); filter: url('https://www.lespapasconfituriers.fr/_chartes_/lespapas/ressources/images/gray.svg#grayscale'); filter: gray; } a.ancre { display:block !important; position:absolute !important; margin:0 !important; padding:0 !important; width:0 !important; height:0 !important; overflow:hidden !important; top:-5rem !important; z-index:100000 !important; } div > p:last-of-type { padding-bottom:0; } #accueil-bandeau { margin:0; padding:0; min-height:38rem; } #accueil-bandeau img { width:100%; } #accueil-bandeau .label-ag { position:absolute; display:inline-block; right:3rem; top:1rem; width:17rem; height:17rem; } #accueil-bandeau .label-ag svg { position:absolute; display:block; width:100%; height:100%; filter: drop-shadow( 0.7rem 0.7rem 0.5rem rgba(0, 0, 0, .7)); } #accueil-bandeau .label-ccf { position:absolute; display:inline-block; right:0; bottom:3rem; width:15rem; height:12rem; } #accueil-bandeau .label-ccf svg { position:absolute; display:block; width:100%; height:100%; filter: drop-shadow( 0.7rem 0.7rem 0.5rem rgba(0, 0, 0, .7)); } #accueil-miseenavant { color:#000; margin-top:1rem; background-position:center center; background-repeat:no-repeat; background-size:cover; padding:0; overflow:hidden; } #accueil-miseenavant img.visuel { z-index:10; position:absolute; left:0; width:auto; height:100%; top: 0; } #accueil-miseenavant img.masque { z-index:11; position:relative; width:100%; } #accueil-miseenavant div.detail { z-index:12; position:absolute; left:64%; top:4rem; right:2%; bottom:4rem; text-align:right; } #accueil-miseenavant img.etiquette { position:relative; width:70%; margin-right:30%; margin-top:0; } #accueil-miseenavant h2 { position:relative; padding:1rem 0 1rem 4rem; font-size:2.5rem; } #accueil-miseenavant p { text-align:justify; position:relative; padding:0 1.5rem 1rem 4rem; font-size:0.9rem; } #accueil-miseenavant a, #accueil-miseenavant div.indisponible { font-size:1rem; position:relative; display:inline-block; margin-top:0; height:3em; color:rgba(110,3,2,1); text-align:center; } #accueil-miseenavant a { width:12em; } #accueil-miseenavant div.indisponible { width:18em; } #accueil-miseenavant a span, #accueil-miseenavant div.indisponible span { position:absolute; display:inline-block; left:48%; width:96%; top:40%; height:auto; transform:translate(-50%,-50%); font-size:0.9em; } #accueil-miseenavant a svg, #accueil-miseenavant div.indisponible svg { position:absolute; display:block; width:100%; height:100%; } #accueil-miseenavant a svg path, #accueil-miseenavant div.indisponible svg path { fill:rgba(110,3,2,0.65); } body.desktop #accueil-miseenavant a:hover { text-decoration:none; } body.desktop #accueil-miseenavant a:hover svg path { fill:rgba(110,3,2,0.85); } #accueil-mosaique { margin-top:3rem; text-align:center; } #accueil-mosaique h2 { position:relative; margin-top:0.5rem; font-size:2.3rem; padding:0 25%; } #accueil-mosaique div.intro { position:relative; margin-top:1rem; font-size:1.3rem; padding: 0 25%; color:#92573a; } #accueil-mosaique div.texte { position:relative; margin-top:1rem; font-size:0.9rem; padding: 0 25%; } #accueil-mosaique ul { display:inline-block; list-style-type:none; font-size:0; margin:3.5rem 0 0 0; padding:0; width:100%; vertical-align:top; } #accueil-mosaique ul > li { position:relative; display:inline-block; margin:0 0 0.2rem 0; padding:0; width:33.33%; height:33.33rem; height:33.33vw; vertical-align:top; overflow:hidden; } #accueil-mosaique ul > li:nth-child(3n) { width:33.34%; } #accueil-mosaique ul > li > img { position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; margin:0; padding:0; } #accueil-mosaique ul > li > div { position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; margin:0; padding:1rem 5rem; opacity:0; transition: opacity 0.3s linear; } #accueil-mosaique ul > li h3 { position:relative; font-size:2rem; color:#ffffff; text-align:center; } #accueil-mosaique ul > li p { position:relative; font-size:1rem; color:#ffffff; text-align:justify; } #accueil-mosaique ul > li p:first-of-type { margin-top:3rem; } #accueil-mosaique ul > li a, #accueil-mosaique ul > li div.indisponible { font-size:1rem; position:absolute; display:inline-block; bottom:2rem; right:2rem; height:3em; color:rgba(255,255,255,1); text-align:center; } #accueil-mosaique ul > li a { width:12em; } #accueil-mosaique ul > li div.indisponible { width:18em; } #accueil-mosaique ul > li a span, #accueil-mosaique ul > li div.indisponible span { position:absolute; display:inline-block; left:48%; width:96%; top:40%; height:auto; transform:translate(-50%,-50%); font-size:0.9em; } #accueil-mosaique ul > li a svg, #accueil-mosaique ul > li div.indisponible svg { position:absolute; display:block; width:100%; height:100%; } #accueil-mosaique ul > li a svg path, #accueil-mosaique ul > li div.indisponible svg path { fill:rgba(255,255,255,0.65); } body.desktop #accueil-mosaique ul > li a:hover { text-decoration:none; } body.desktop #accueil-mosaique ul > li a:hover svg path { fill:rgba(255,255,255,0.85); } body.desktop #accueil-mosaique ul > li:hover > div.couleur, #accueil-mosaique ul > li.hover > div.couleur { opacity:0.9 !important; transition: opacity 0.3s linear; } body.desktop #accueil-mosaique ul > li:hover > div.detail, #accueil-mosaique ul > li.hover > div.detail { opacity:1 !important; transition: opacity 0.3s linear; } #accueil-mosaique ul > li > div.detail { display:flex; vertical-align:middle; } #accueil-mosaique ul > li > div.detail > div { position:initial; margin:auto; } #accueil-collection { margin-top:1rem; text-align:center; overflow:hidden; } #accueil-collection img.visuel { z-index:10; position:relative; left:0; width:100%; height:auto; top: 0; } #accueil-collection div.detail { z-index:12; position:absolute; left:5rem; top:2rem; width:auto; height:auto; text-align:right; } #accueil-collection h2 { position:relative; display:block; margin-top:0; font-size:2.6rem; padding:0; color:#fff; font-weight:400; text-align:left; } #accueil-collection div.intro { position:relative; display:block; margin-top:1rem; font-size:1.2rem; padding:0; padding-right:1rem; color:rgb(242,156,8); text-transform:uppercase; text-align:left; } #accueil-collection a { font-size:1rem; margin-top:0.6rem; position:relative; display:inline-block; width:18em; height:3em; color:rgba(255,255,255,1); text-align:center; } #accueil-collection a span { position:absolute; display:inline-block; left:48%; width:96%; top:40%; height:auto; transform:translate(-50%,-50%); font-size:0.9em; } #accueil-collection a svg { position:absolute; display:block; width:100%; height:100%; } #accueil-collection a svg path { fill:rgba(255,255,255,0.65); } body.desktop #accueil-collection a:hover { text-decoration:none; } body.desktop #accueil-collection a:hover svg path { fill:rgba(255,255,255,0.85); } #accueil-papas { margin-top:1rem; text-align:center; } #accueil-papas > div { position:relative; padding:0; margin:0; } #accueil-papas div.detail { z-index:12; position:absolute; left:10%; top:50%; right:54%; transform:translateY(-50%); } #accueil-papas img.visuel { z-index:10; position:absolute; right:0; width:auto; height:100%; top:0; } #accueil-papas img.masque { z-index:11; position:relative; width:100%; } #accueil-papas h2 { font-size:2.3rem; color:#000; } #accueil-papas div.intro { margin-top:2rem; font-size:1.3rem; color:#92573a; } #accueil-papas div.texte { margin-top:2rem; font-size:0.9rem; color:#000; } #accueil-papas img.macaron { position:absolute; left:20%; bottom:7%; width:11%; margin:0; padding:0; } img.mosaique { width:80%; margin:0 auto; padding:4rem 0; } #accueil-chezvous { margin-top:1rem; padding:2rem 0 1rem 0; background-color:#2e2e2e; color:#ffffff; text-align:left; } #accueil-chezvous > div:first-of-type { font-size:0; border-bottom:1px solid #888; width:90%; margin:0 auto 0 auto; padding-bottom:2rem; } #accueil-chezvous h2 { position:relative; font-size:2.3rem; padding:0 5%; text-align:center; } #accueil-chezvous div.intro { position:relative; margin-top:1rem; font-size:1.3rem; padding: 0 5% 1rem 5%; color:#92573a; text-transform:uppercase; text-align:center; } #accueil-chezvous div.intro p { text-align:center; } #accueil-chezvous > div > a { position:relative; display:block; text-align:center; margin:0 auto; width:2rem; height:2rem; } #accueil-chezvous > div > a img { display:block; margin:0; padding:0; position:relative; width:100%; height:100%; } #accueil-chezvous > div > a svg { display:block; margin:0; padding:0; position:relative; width:100%; height:100%; } #accueil-chezvous > div > a svg path { fill:#92573a; } #accueil-chezvous > div > a svg .plus { transform:rotate(0deg); transform-origin:50% 50%; transition: transform 0.5s linear; } #accueil-chezvous > div#listes { max-height:0; transition: max-height 1s linear; overflow:hidden; height:auto; margin:2rem auto 0 auto; padding:0; } #accueil-chezvous.show > div > a svg .plus { transform:rotate(45deg); transform-origin:50% 50%; transition: transform 0.5s linear; } #accueil-chezvous.show > div#listes { position:relative; max-height:300rem; transition: max-height 1s linear; } #accueil-chezvous h3 { position:relative; font-size:1.5rem; padding:2rem 5% 0 5%; text-align:left; color:#92573a; text-transform:uppercase; border-top:1rem solid #fff; } #accueil-chezvous h3:first-of-type { border-top:0; padding-top:0; } ul#liste-distributeurs { font-size:0; position:relative; padding:2rem 5% 0 5%; margin:0 auto; } ul#liste-distributeurs > li { position:relative; display:inline-block; margin:0 0 2rem 0; padding:1rem 0.5rem; width:25%; height:14.5rem; vertical-align:top; overflow:hidden; text-align:center; } ul#liste-distributeurs > li h4 { position:absolute; margin:0; font-size:1rem; color:#da9c7d; text-transform:uppercase; font-weight:900; top:0; left:0; line-height:1.5em; } ul#liste-distributeurs > li h5 { position:relative; margin:0; font-size:1.1rem; text-transform:uppercase; padding-left:1rem; padding-right:1rem; padding-top:4.3rem; padding-bottom:0.5rem; } ul#liste-distributeurs > li span { position:relative; display:inline-block; width:100%; font-size:0.6em; } ul#liste-distributeurs > li div { position:relative; margin:0; font-size:0.9rem; padding-left:1rem; padding-right:1rem; padding-top:0; padding-bottom:0; } ul#liste-distributeurs > li div.adresse { line-height:1.2em; color:#a7a7a7; } ul#liste-distributeurs > li div.tel { padding-top:0.5rem; } ul#liste-distributeurs > li div.web { padding-top:0.5rem; } ul#liste-distributeurs > li div.cadre { position:absolute; top:2rem; left:1rem; right:1rem; bottom:0; background: transparent url('https://www.lespapasconfituriers.fr/_chartes_/lespapas/ressources/images/cadre-distributeurs.png') center center no-repeat; background-size:contain; } ul#liste-partenaires { font-size:0; position:relative; padding:2rem 5% 0 5%; margin:0 auto; } ul#liste-partenaires > li { position:relative; display:inline-block; margin:0 0 2rem 0; padding:1rem 0.5rem; width:25%; height:10.3rem; vertical-align:top; overflow:hidden; text-align:center; } ul#liste-partenaires > li h4 { position:absolute; margin:0; font-size:1rem; color:#da9c7d; text-transform:uppercase; font-weight:900; top:0; left:0; line-height:1.5em; } ul#liste-partenaires > li h5 { position:relative; margin:0; font-size:1.1rem; text-transform:uppercase; padding-left:1rem; padding-right:1rem; padding-top:2.5rem; padding-bottom:0; } ul#liste-partenaires > li span { position:relative; display:inline-block; width:100%; font-size:0.6em; } ul#liste-partenaires > li div { position:relative; margin:0; font-size:0.9rem; padding-left:1rem; padding-right:1rem; padding-top:0; padding-bottom:0; } ul#liste-partenaires > li div.ville { line-height:1.2em; color:#a7a7a7; } ul#liste-partenaires > li div.type { line-height:1.2em; color:#a7a7a7; } ul#liste-partenaires > li div.tel { padding-top:0.5rem; } ul#liste-partenaires > li div.web { padding-top:0.5rem; } ul#liste-partenaires > li div.cadre { position:absolute; top:2rem; left:1rem; right:1rem; bottom:0; background: transparent url('https://www.lespapasconfituriers.fr/_chartes_/lespapas/ressources/images/cadre-partenaires.png') center center no-repeat; background-size:contain; } #accueil-actualite { position:relative; margin-top:1rem; padding:2rem 0; text-align:center; vertical-align:top; font-size:0; } #accueil-actualite h2 { position:relative; font-size:2.3rem; padding:0 0 1rem 0; text-align:center; } #accueil-actualite .post { position:relative; width:27.33%; display:inline-block; margin:2rem 3%; padding:0; overflow:hidden; vertical-align:top; border:1px solid #ccc; } #accueil-actualite .post video { width:100%; margin:0; padding:0; } #accueil-actualite .post div.visuel { position:relative; width:100%; height:30rem; margin:0; padding:0; background:transparent center no-repeat; background-size:cover; } #accueil-actualite .post p { position:relative; width:auto; font-family: Helvetica,Arial,sans-serif; font-size:0.9rem; margin:0; padding:1rem; } #accueil-actualite .post p .copyrightfetchrss { position:absolute; display:block; bottom:0; right:1rem; font-size:0.6em; color: #ccc; } #accueil-actualite .post p.pubdate { margin:0 1rem; padding:1rem 0; border-top:1px solid #ccc; } #accueil-actualite .post a.postlink { position:absolute; margin:0; padding:0; right:1rem; bottom:0; display:block; width:auto; } #accueil-actualite .post a.postlink span { position:relative; display:inline-block; width:2rem; height:2rem; text-align:center; margin:0 0 0.7rem 0; padding:0; } #accueil-actualite .post a.postlink span img { position:relative; width:100%; } #accueil-actualite .post a.postlink span svg { position:relative; width:100%; height:100%; } #accueil-actualite .post:nth-child(3n+2) { display:inline-block; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGES BOUTIQUE */ .etiquette { position:relative; display:block; margin:4rem 2.5% 0 2.5%; font-size:2rem; padding:0; text-align:center; outline:0; } .etiquette > span { position:relative; display:inline-block; width:auto; margin:0 auto; padding:0; text-align:center; background-color:#ffffff; } .etiquette > span span { position:relative; display:inline-block; width:auto; margin:0; padding:0.5em 1.5em 0.3em 1.5em; text-align:center; color:#ffffff; } .etiquette svg.forme path { fill:#ffb20c; } h2.etiquette > span { width:auto; min-width:40%; } h2.etiquette > span span { padding:0.7em 1.5em 0.5em 1.5em; } a.etiquette > span { width:96%; } button.etiquette > span { width:96%; } button.etiquette svg.forme path { fill:#688c28; } svg.forme { position:absolute; left:0; right:0; top:0; bottom:0; } svg.filet-h { position:absolute; left:0; width:100%; height:auto; top:50%; transform:translateY(-50%); } svg.filet-g { position:absolute; left:0; top:0; height:100%; width:auto; transform:translateX(-35%); } svg.filet-d { position:absolute; right:0; top:0; height:100%; width:auto; transform:translateX(35%); } svg.filet-h path,svg.filet-g path,svg.filet-d path { fill:#ccc; } .titre-boutique { margin:0; text-align:center; overflow:hidden; } .titre-boutique img.visuel { z-index:10; position:relative; left:0; width:100%; height:auto; top:0; } .titre-boutique div.detail { z-index:12; position:absolute; left:6rem; top:1.3rem; width:auto; height:auto; text-align:right; } .titre-boutique h1 { position:relative; display:block; margin-top:0; font-size:2.6rem; padding:0; color:#fff; font-weight:400; text-align:left; text-transform:none; } .titre-boutique div.intro { position:relative; display:block; margin-top:1rem; font-size:1.2rem; padding:0; padding-right:1rem; color:rgb(242,156,8); text-transform:uppercase; text-align:left; } #page-identif .titre-boutique, #page-authentification .titre-boutique, #page-inscription .titre-boutique, #page-compte .titre-boutique, #page-orders .titre-boutique, #page-oublipassword .titre-boutique, #page-changepassword .titre-boutique, #page-dashboard .titre-boutique, #page-panier .titre-boutique { height:7rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE COLLECTION */ #page-collection { margin-bottom:4rem; text-align:center; } #page-collection .titre-boutique div.detail { top:3rem; } #page-collection div.descriptif { z-index:12; position:relative; display:block; width:60%; height:auto; text-align:center; margin:0 auto; padding:2rem; } #page-collection div.descriptif p { font-size:1rem; } #page-collection h2.etiquette { font-size:2.8rem; } #page-collection h2.etiquette > span { width:auto; } #page-collection h2.etiquette:first-of-type { margin-top:1rem; } #page-collection h2.etiquette:nth-of-type(2) svg.forme path { fill:#bc530d; } #page-collection h2.etiquette:nth-of-type(3) svg.forme path { fill:#982303; } #page-collection ul { font-size:0; display:inline-block; list-style-type:none; margin:1.5rem 0 0 0; padding:0; width:100%; vertical-align:top; text-align:left; } #page-collection ul > li { position:relative; display:inline-block; margin:0; padding:0; width:25%; height:25rem; height:25vw; vertical-align:top; overflow:hidden; } #page-collection ul > li > img { position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; margin:0; padding:0; } #page-collection ul > li > div { position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; margin:0; padding:1rem 3rem 4rem 3rem; opacity:0; transition: opacity 0.3s linear; } #page-collection ul > li h3 { position:relative; font-size:1.8rem; color:#ffffff; text-align:center; } #page-collection ul > li p { position:relative; font-size:0.9rem; color:#ffffff; text-align:justify; } #page-collection ul > li p:first-of-type { margin-top:1.5rem; } #page-collection ul > li div.prix { position:relative; font-size:1.1rem; padding-top:1.5rem; color:#ffffff; text-align:left; } #page-collection ul > li div.prix span span { font-size:0.6em; } #page-collection ul > li span.contenance { position:relative; font-size:0.8em; } #page-collection ul > li a { font-size:0.8rem; position:absolute; display:inline-block; bottom:2rem; left:3rem; width:8em; height:3em; color:rgba(255,255,255,1); text-align:center; } #page-collection ul > li a span { position:absolute; display:inline-block; left:48%; width:96%; top:40%; height:auto; transform:translate(-50%,-50%); font-size:0.9em; } #page-collection ul > li a svg { position:absolute; display:block; width:100%; height:100%; } #page-collection ul > li a svg path { fill:rgba(255,255,255,0.65); } body.desktop #page-collection ul > li a:hover { text-decoration:none; } body.desktop #page-collection ul > li a:hover svg path { fill:rgba(255,255,255,0.85); } body.desktop #page-collection ul > li:hover > div.couleur, #page-collection ul > li.hover > div.couleur { opacity:0.9; transition: opacity 0.3s linear; } body.desktop #page-collection ul > li:hover > div.detail, #page-collection ul > li.hover > div.detail { opacity:1; transition: opacity 0.3s linear; } #page-collection ul > li > div.detail { display:flex; vertical-align:middle; } #page-collection ul > li > div.detail > div { position:initial; margin:auto; } #page-collection ul > li .actions { font-size:0.8rem; position:absolute; right:1.5rem; bottom:2rem; display:inline-block; width:7.5em; height:3em; margin:0; padding:0; } #page-collection ul > li .actions > a.panier { font-size:1em; text-transform:uppercase; position:absolute; display:inline-block; width:3.5em; height:3.5em; left:unset; right:2em; bottom:0; border:0; background-color:transparent; color:rgba(255,255,255,0.85); text-align:center; margin:0.2em 0 0 0; padding:0; } #page-collection ul > li .actions > a.panier span { position:absolute; display:inline-block; left:44%; width:96%; top:45%; height:auto; transform:translate(-50%,-50%); font-size:0.9em; } #page-collection ul > li .actions > a.panier svg { position:absolute; display:block; width:100%; height:100%; left:-4%; top:0; } #page-collection ul > li .actions > a.panier svg path { fill:rgba(255,255,255,0.85); } body.desktop #page-collection ul > li .actions > a.panier:hover { text-decoration:none; background-color:transparent; color:rgba(255,255,255,0.85); outline:0; } body.desktop #page-collection ul > li .actions > a.panier:hover svg path { fill:rgba(255,255,255,0.85); } #page-collection ul > li .actions > div { font-size:1em; position:absolute; display:inline-block; width:auto; height:3em; left:0; top:0; border:0; background-color:transparent; color:rgba(255,255,255,0.85); text-align:center; margin:0; padding:0; } #page-collection ul > li .actions > div span.quantite { font-size:1em; text-transform:uppercase; position:relative; display:inline-block; width:5em; height:3em; left:0; top:0; border:0; background-color:transparent; color:rgba(255,255,255,0.85); text-align:center; margin:0.2em 0 0 0; padding:0; } #page-collection ul > li .actions > div span.quantite span { position:absolute; display:inline-block; left:0; width:75%; top:40%; height:auto; transform:translateY(-50%); font-size:0.9em; } #page-collection ul > li .actions > div span.quantite svg { position:absolute; display:block; width:100%; height:100%; left:-4%; top:0; } #page-collection ul > li .actions > div span.quantite svg path { fill:rgba(255,255,255,0.85); } #page-collection ul > li .actions > div a.add,#page-collection ul > li .actions > div a.del { font-size:1em; text-transform:uppercase; position:relative; display:inline-block; vertical-align:top; width:1em; height:3em; left:0; top:0; border:0; text-align:center; margin:0; padding:0; } #page-collection ul > li .actions > div a.add span, #page-collection ul > li .actions > div a.del span { font-size:1.5em; position:relative; display:inline-block; left:50%; width:100%; top:50%; height:auto; transform:translate(-50%,-50%); color:rgba(255,255,255,0.85); } #page-collection ul > li .actions > a, #page-collection ul > li .actions > div { opacity:1; z-index:2; transition:opacity 300ms ease 200ms; } #page-collection ul > li .actions > a.masquer, #page-collection ul > li .actions > div.masquer { opacity:0; z-index:1; transition:opacity 300ms ease 0ms; } #page-collection ul > li > div.detail > div div.critique { font-size:0.6rem; position:absolute; width:auto; height:2em; bottom:-2em; top:unset; left:-4em; right:-3em; opacity:0; transition:opacity 500ms ease; color:#ffffff; text-align:center; margin:0; padding:0; } #page-collection ul > li > div.detail > div div.critique.afficher { opacity:1; } #page-collection ul > li > div.detail > div div.indispo { font-size:0.8rem; position:absolute; width:auto; height:auto; top:0; left:-2em; right:0; text-align:center; margin:0; padding:0; } #page-detail { margin-bottom:4rem; text-align:left; } #page-detail .titre-boutique div.detail { top:3rem; } #page-detail .nav { position:relative; display:block; width:100%; height:6rem; } #page-detail .nav a { font-size:1rem; line-height:1em; height:1em; overflow:hidden; position:absolute; top:0; display:inline-block; vertical-align:middle; width:auto; margin:2rem 0 3rem 0; padding:0.15em 1.5em 0 1.5em; text-transform:uppercase; } body.desktop #page-detail .nav a:hover { text-decoration:none; } #page-detail .nav a:before { font-size:1.4em; line-height:1em; height:1em; font-family: quicksand; position:absolute; display:inline-block; vertical-align:top; top:50%; transform:translateY(-50%); padding:0; margin:0; transition:inherit; font-weight:400; } #page-detail .nav a.retour { left:5.5%; } #page-detail .nav a.prev { left:62%; } #page-detail .nav a.next { right:5.5%; } #page-detail .nav a.retour:before { content: '<'; left:0; } #page-detail .nav a.prev:before { content: '<'; left:0; } #page-detail .nav a.next:before { content: '>'; right:0; } #page-detail .content { position:relative; display:block; width:100%; height:0; margin:0 auto 0 auto; padding:0; padding-bottom:40%; } #page-detail .content h1 { font-size:2.5rem; position:relative; left:62%; width:40%; height:auto; margin:0; padding:0 2rem 1rem 0; text-align:left; color:rgb(177,91,93); } #page-detail .content h2 { font-size:1rem; position:absolute; overflow:hidden; top:0; width:2.5%; height:100%; color:#ccc; padding-right:1em; border-right:1px solid #ccc; } #page-detail .content h2 span { position:absolute; display:block; left:50%; top:50%; transform-origin:left top; transform:rotate(-90deg) translate(-50%,-50%); } #page-detail .content h2:first-of-type { left:5%;} #page-detail .content h2:last-of-type { left:55%; } #page-detail .content img { position:absolute; left:10%; top:0; width:40%; height:auto; } #page-detail .content .detail { font-size:1rem; position:relative; left:62%; width:40%; text-align:left; padding:0 6rem 0 0; } #page-detail .content .detail .classification { font-size:1.5em; padding-bottom:0.2em; color:rgb(255,154,0); } #page-detail .content .detail .descriptif { font-size:1em; } #page-detail .content .detail .contenance { font-size:1.3em; padding-top:1em; color:rgb(177,91,93); } #page-detail .content .detail .prix { font-size:1.3em; padding-top:0.5em; color:rgb(177,91,93); } #page-detail .content .detail .prix span { color:rgb(255,154,0); } #page-detail .content .detail .prix span span { font-size:0.6em; } #page-detail .content .detail h3 { font-size:1.3em; padding-top:1.5em; padding-bottom:1rem; color:rgb(177,91,93); } #page-detail .content .detail .ingredients { font-size:1em; padding-bottom:1em; } #page-detail .content .detail ul.mentions { font-size:1em; margin:1em 0; padding:0; } #page-detail .content .detail ul.mentions li { font-size:1em; position:relative; display:block; margin:0; padding:0; padding-left:1em; list-style-type:none; } #page-detail .content .detail ul.mentions li:before { content:'•'; font-size:1.6em; font-weight:400; position:absolute; left:0; top:50%; transform:translateY(-50%); color:rgb(177,91,93); } #page-detail .content .detail form { display:block; margin:1.5rem 0 0 0; padding:0; } #page-detail .content .detail label { font-size:1.4rem; line-height:1em; height:1em; position:relative; display:block; width:auto; padding:0; margin:0; } #page-detail .content .detail label span { font-size:1em; width:auto; position:relative; display:inline-block; padding:0 2em 0 0; margin-right:0.1em; color:rgb(177,91,93); } #page-detail .content .detail label span:after { font-size:1.4em; line-height:1em; height:1em; content: '>'; font-family: quicksand; position:absolute; display:inline-block; vertical-align:top; right:0; top:50%; transform:translateY(-50%); padding:0; margin:0; transition:inherit; font-weight:400; } #page-detail .content .detail select { font-size:1em; position:absolute; top:0; left:0; width:14em; line-height:1em; height:1em; display:inline-block; background:none !important; padding:0 0 0 6em !important; background-color:transparent !important; color:rgb(177,91,93) !important; outline:none; } body.desktop #page-detail .content .detail select:hover, #page-detail .content .detail select:focus { outline: none; } #page-detail .content .detail option { font-size:0.8em; background-color:rgb(255,255,255) !important; color:rgb(177,91,93) !important; padding:0 !important; } body.desktop #page-detail .content .detail option:hover, #page-detail .content .detail option:active { color:rgb(255,255,255) !important; background-color:rgb(177,91,93) !important; } #page-detail .content .indisponible { font-size:1rem; color:rgba(255,154,0,1); position:relative; display:inline-block; width:100%; height:3em; margin:2rem 0; padding:0; } #page-detail .content .actions { font-size:1.4rem; position:relative; display:inline-block; width:100%; height:3em; margin:2rem 0; padding:0; } #page-detail .content .actions > a.panier { font-size:1em; text-transform:uppercase; position:absolute; display:inline-block; width:16em; height:3em; left:0; top:0; border:0; background-color:transparent; color:rgba(255,154,0,1); text-align:center; margin:0.2em 0 0 0; padding:0; } #page-detail .content .actions > a.panier span { position:absolute; display:inline-block; left:44%; width:96%; top:45%; height:auto; transform:translate(-50%,-50%); font-size:0.9em; } #page-detail .content .actions > a.panier svg { position:absolute; display:block; width:100%; height:100%; left:-4%; top:0; } #page-detail .content .actions > a.panier svg path { fill:rgba(255,154,0,0.8); } body.desktop #page-detail .content .actions > a.panier:hover { text-decoration:none; background-color:transparent; color:rgba(255,154,0,1); outline:0; } body.desktop #page-detail .content .actions > a.panier:hover svg path { fill:rgba(255,154,0,1); } #page-detail .content .actions > div { font-size:1em; position:absolute; display:inline-block; width:auto; height:3em; left:0; top:0; border:0; background-color:transparent; color:rgba(255,154,0,1); text-align:center; margin:0; padding:0; } #page-detail .content .actions > div span.quantite { font-size:1em; text-transform:uppercase; position:relative; display:inline-block; width:5em; height:3em; left:0; top:0; border:0; background-color:transparent; color:rgba(255,154,0,1); text-align:center; margin:0.2em 0 0 0; padding:0; } #page-detail .content .actions > div span.quantite span { position:absolute; display:inline-block; left:0; width:75%; top:40%; height:auto; transform:translateY(-50%); font-size:0.9em; } #page-detail .content .actions > div span.quantite svg { position:absolute; display:block; width:100%; height:100%; left:-4%; top:0; } #page-detail .content .actions > div span.quantite svg path { fill:rgba(255,154,0,1); } #page-detail .content .actions > div a.add, #page-detail .content .actions > div a.del { font-size:1em; text-transform:uppercase; position:relative; display:inline-block; vertical-align:top; width:1em; height:3em; left:0; top:0; border:0; text-align:center; margin:0; padding:0; } #page-detail .content .actions > div a.add span, #page-detail .content .actions > div a.del span { font-size:1.5em; position:relative; display:inline-block; left:50%; width:100%; top:50%; height:auto; transform:translate(-50%,-50%); color:rgba(255,154,0,1); } #page-detail .content .actions > a, #page-detail .content .actions > div { opacity:1; z-index:2; transition:opacity 300ms ease 200ms; } #page-detail .content .actions > a.masquer, #page-detail .content .actions > div.masquer { opacity:0; z-index:1; transition:opacity 300ms ease 0ms; } #page-detail .content .actions div.critique { font-size:0.8rem; position:absolute; width:16em; height:2em; bottom:-2em; top:unset; left:0; right:unset; opacity:0; transition:opacity 500ms ease; color:#ffa023; text-align:left; margin:0; padding:0; } #page-detail .content .actions div.critique.afficher { opacity:1; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE MENTIONS LEGALES */ #page-mentionslegales { font-family:Helvetica,Arial,sans-serif; padding:2rem 3rem 3rem 3.5rem; font-size:1rem; text-align:left; } #page-mentionslegales h1 { padding-top:2rem; padding-bottom:2rem; } #page-cgv { font-family:Helvetica,Arial,sans-serif; padding:2rem 3rem 3rem 3.5rem; font-size:1rem; text-align:left; } #page-cgv h1 { padding-top:2rem; padding-bottom:2rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PANIER */ #panier-alerte { font-size:1.2rem; margin:0 auto 1rem auto; padding:1rem; width:100%; text-align:center; color:rgb(255,255,255); background-color:rgb(178,6,66); } #panier-nav { font-size:0; position:relative; display:block; width:87%; margin:0 auto; padding:2rem 0 0 0; background-color:#ffffff; height:auto; text-align:center; } #panier-nav li { position:relative; display:inline-block; margin:0; padding:0; text-align:center; background-color:transparent; color:#393939; vertical-align:top; } #panier-nav li.current { color:#ffa023; } #panier-nav li .etape { font-size:1.5rem; position:absolute; display:inline-block; left:0; top:0; width:100%; text-align:left; margin:0; padding:0.5em 0 0.3em 10%; font-weight:200; } #panier-nav li:first-child .etape { padding-left:5%; } #panier-nav li.current .etape { color:#ffffff; } #panier-nav li .etape > svg path { fill:transparent; } #panier-nav li.current .etape > svg path { fill:#ffa023; } #panier-nav li .etape > span { position:relative;vertical-align:top; z-index:2; font-size:1em; top:50%; transform:translateY(-50%); } #panier-nav li .intitule { font-size:1.5rem; position:relative; display:inline-block; vertical-align:top; width:100%; text-align:center; margin:0; padding:0.5em 1em 0.3em 2.5em; text-transform:none; font-weight:200; } #panier-nav li:first-child .intitule { padding-left:1.8em; } #panier-nav li:last-child .intitule { padding-right:0; } body.desktop #panier-nav li a:hover { text-decoration:none; } #panier-nav li svg { position:absolute; left:-5%; top:50%; transform:translateY(-50%); width:110%; height:auto; } #panier-content { position:relative; display:block; width:65%; margin:0 auto; padding:2rem 0; font-size:0; vertical-align:top; } #panier-content div.vide { font-size:2rem; position:relative; text-align:center; display:block; width:100%; border:0; color:#333 !important; margin:0 auto; padding:5rem 8rem; text-align:center; } .jconfirm-title { font-size:1rem; text-transform:uppercase; font-weight:400; } .jconfirm-content { font-size:0.8rem; font-weight:200; } #panier-mosaique { font-size:0; position:relative; display:inline-block; width:100%; margin:0; padding:1rem 0 0 0; vertical-align:top; } #panier-mosaique li { font-size:1rem; width:100%; height:auto; overflow:hidden; position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; vertical-align:top; border-bottom:1px solid #dedede; } #panier-mosaique div.reference { position:relative; left:0; top:0; width:100%; height:auto; overflow:hidden; padding:1em 0; } #panier-mosaique div.reference > div { font-size:0; position:relative; } #panier-mosaique div.reference > div img { position:relative; display:inline-block; width:15%; height:auto; vertical-align:middle; } #panier-mosaique div.reference > div div.infos { font-size:1rem; position:relative; display:inline-block; width:50%; padding-left:5rem; height:auto; vertical-align:middle; text-align:left; } #panier-mosaique div.reference > div div.infos h2 { position:relative; display:block; color:rgb(177,91,93); } #panier-mosaique div.reference > div div.infos > span { position:relative; display:block; color:rgb(255,154,0); } #panier-mosaique div.reference > div div.infos > span.prix { color:rgb(177,91,93); } #panier-mosaique div.reference > div div.infos > span.prix span { color:rgb(255,154,0); } #panier-mosaique div.reference > div div.infos > span.prix span span { font-size:0.7em; } #panier-mosaique div.reference > div div.actions { font-size:1.2rem; position:relative; display:inline-block; vertical-align:middle; width:35%; height:auto; left:0; top:0; border:0; background-color:transparent; color:#ffa023; text-align:right; margin:0; padding:0 0.5rem 0 0; } #panier-mosaique div.reference > div div.actions span.labelquantite { font-size:1em; vertical-align:top; text-transform:none; position:absolute; display:inline-block; width:auto; height:auto; right:9em; top:1em; border:0; background-color:transparent; color:#333; text-align:center; margin:0; padding:0; } #panier-mosaique div.reference > div div.actions span.quantite { font-size:1em; text-transform:uppercase; position:relative; display:inline-block; width:5em; height:3em; left:0; top:0; border:0; background-color:transparent; color:#ffa023; text-align:center; margin:0.2em 0 0 0; padding:0; } #panier-mosaique div.reference > div div.actions span.quantite span { position:absolute; display:inline-block; left:0; width:75%; top:40%; height:auto; transform:translateY(-50%); font-size:0.9em; } #panier-mosaique div.reference > div div.actions span.quantite svg { position:absolute; display:block; width:100%; height:100%; left:-4%; top:0; } #panier-mosaique div.reference > div div.actions span.quantite svg path { fill:#ffa023; } #panier-mosaique div.reference > div div a.add,#panier-mosaique div.reference > div div a.del { font-size:1em; text-transform:uppercase; position:relative; display:inline-block; vertical-align:top; width:1em; height:3em; left:0; top:0; border:0; text-align:center; margin:0; padding:0; } #panier-mosaique div.reference > div div a.add span, #panier-mosaique div.reference > div div a.del span { font-size:1.5em; position:relative; display:inline-block; left:50%; width:100%; top:50%; height:auto; transform:translate(-50%,-50%); color:#ffa023; } #panier-mosaique div.reference > div div.critique { font-size:0.6em; position:absolute; width:auto; height:2em; bottom:-2em; top:unset; right:1em; opacity:0; transition:opacity 500ms ease; color:#ffa023; text-align:center; margin:0; padding:0; } #panier-mosaique div.reference > div div.critique.afficher { opacity:1; } #panier-codepromo { font-size:0; margin:0.5rem 0 2rem 0; width:100%; text-align:left; } #panier-codepromo h2 { font-size:1.6rem; font-weight:400; margin:0.5rem 0 0.5rem 0; padding:0; text-align:left; width:100%; display:block; } #panier-codepromo label { font-size:0.8rem; width:auto; display:inline-block; vertical-align:middle; margin:0; padding-right:1em; text-align:left; } #panier-codepromo input { font-size:0.8rem; line-height:unset; width:10%; display:inline-block; vertical-align:middle; background-color:#fff !important; color:rgba(51,51,51,1) !important; border: 1px solid rgba(51,51,51,1); margin:0; } #panier-codepromo button { font-size:0.8rem; line-height:unset; width:auto; min-width:10em; display:inline-block; vertical-align:middle; background-color:#fff !important; color:rgba(51,51,51,1) !important; border: 1px solid rgba(51,51,51,1); margin:0; border:0; } #panier-destination { font-size:0; margin:2rem 0 0.5rem 0; } #panier-destination h2 { font-size:2rem; font-weight:400; margin:0.5rem 0 0.5rem 0; padding:0; text-align:right; width:100%; display:block; } #panier-destination label { font-size:1rem; width:80%; display:inline-block; vertical-align:middle; margin:0; padding-right:2rem; text-align:right; } #panier-destination select { font-size:1rem; line-height:unset; width:20%; display:inline-block; vertical-align:middle; background-color:#fff !important; color:rgba(51,51,51,1) !important; border: 1px solid rgba(51,51,51,1); margin:0; } #panier-destination select option { color:rgba(51,51,51,1) !important; } #panier-totaux { font-size:0; margin:2rem 0 0 0; width:100%; } #panier-totaux h2 { font-size:1.4rem; text-transform:uppercase; text-align:center; margin:0; padding:0.5em 0; background-color:#ffa023; color:#fff; font-weight:400; } #panier-totaux > div { display:block; padding-top:0.5rem; height:3rem; border-bottom:1px solid #dedede; } #panier-totaux > div:last-of-type { border-bottom:0; } #panier-totaux h3 { font-size:1rem; font-weight:300; text-transform:uppercase; text-align:right; margin:0; padding:0; display:inline-block; vertical-align:top; width:87%; line-height:1.2; } #panier-totaux .tva h3 { text-transform:none; } #panier-totaux h3 > span.pays { text-transform:none; } #panier-totaux h3 > span.infos { font-size:0.7em; text-transform:none; display:inline-block; width:100%; text-align:right; } #panier-totaux > div > span { font-size:1rem; text-transform:uppercase; text-align:right; margin:0; padding:0; display:inline-block; vertical-align:top; width:13%; line-height:1.2; } #panier-totaux > div > span span { display:inline-block; vertical-align:top; margin:0; padding:0; line-height:1.2; } #panier-totaux > div:last-of-type h3, #panier-totaux > div:last-of-type span { font-weight:600; } #panier-checkout label.consentementcgv { font-size:1rem !important; position:relative; text-align:left; width:100%; margin: 2em auto 1em auto !important; } #panier-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; } #panier-checkout label.consentementcgv input[type="checkbox"] + span { font-size:1em !important; padding-left:2em !important; padding-top:0.3em !important; text-align:left !important; display:inline-block; } #panier-checkout label.consentementcgv input[type="checkbox"] + span:before { top:0.4em !important; left:0.25em !important; width:1em !important; height:1em !important; border:1px solid #999999 !important; border-radius:15% !important; } #panier-checkout label.consentementcgv input[type="checkbox"] + span:after { top:0.5em !important; left:0.35em !important; width:0.8em !important; height:0.8em !important; border:1px solid #999999 !important; border-radius:15% !important; background-color:#999999 !important; } #panier-checkout label.consentementcgv a, body.desktop #panier-checkout label.consentementcgv a:hover { text-decoration:underline; } #panier-checkout button { font-size:1.5rem; text-transform:none; background-color:transparent; border:0; width:auto; min-width:30%; margin:2rem auto 0 auto; padding:0.5em 0; } #panier-content.panier_identification { width:35%; } #panier-content form.formauth { font-size:1rem; width:100%; } #panier-content form.formauth a { position:relative; display:block; width:auto; border:0; border-radius:0; background-color:transparent !important; color:#000 !important; text-align:right; right:0; text-transform:uppercase; font-size:1em; margin:1em 0 0.5em 0; padding:0.5em 7.5%; text-transform:uppercase; } body.desktop #panier-content form.formauth a:hover { text-decoration:none; color:#000 !important; } #panier-content form.formauth a.confirmlivraison { position:relative; display:block; width:100%; border:0; border-radius:0; background-color:transparent !important; color:#fff !important; text-align:center; font-size:1.5rem; margin:1em 0 0.5em 0; padding:0.5em 0; text-transform:none; } body.desktop #panier-content form.formauth a.confirmlivraison:hover { text-decoration:none; background-color:transparent !important; } #panier-content #ul-auth { width:100%; } #panier-content .infos p { font-size:1.2rem; text-align:center; } #panier-content.panier_livraison { position:relative; width:90%; margin-top:2rem; } #panier-content.panier_livraison iframe, #dashboard-content iframe { position:relative; width:100%; border:0; margin:2rem auto 0 auto; padding:0; overflow:hidden; font-size:1rem; } #panier-content.panier_livraison iframe.colissimo, #dashboard-content iframe.colissimo { height:520px; } #panier-content.panier_livraison iframe.mondialrelay, #dashboard-content iframe.mondialrelay { max-width:100%; width:1200px; height:800px; } #form-destinataire { font-size:0; position:relative; width:40%; border:0; margin:2rem auto 1rem auto; padding:0; } #form-destinataire label { font-size:1rem; display:inline-block; position:relative; width:100%; border:0; margin:0.2em 0 0 0; padding:0 0.5em 0 0; } #form-destinataire input { display:inline-block; position:relative; width:100%; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; font-size:1em; margin:0 0 0.5em 0; padding:0.2em 0.5em; } #form-destinataire select { position:relative; width:100%; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; font-size:1em; margin:0 0 0.5em 0; padding:0.2em 0.5em; } #form-destinataire option { color:#333 !important; } #form-destinataire button { font-size:1.5rem; text-transform:none; background-color:transparent; border:0; width:90%; margin:2rem auto 0 auto; padding:0.5em 0; text-align:center; } #form-destinataire label.option { width:50%; text-align:center; margin-bottom:0.5em; } #form-destinataire label.option input[type="radio"] + span:after { background-color:#688c28 !important; } #form-destinataire label.nom { width:50%; } #form-destinataire label.prenom { width:50%; } #form-destinataire label.email { width:70%; } #form-destinataire label.telephone { width:30%; } #form-destinataire label.cp { width:20%; } #form-destinataire label.ville { width:80%; } #form-livraison button { font-size:1.5rem; text-transform:none; background-color:transparent; border:0; width:20%; margin:0 auto; padding:0.5em 0; } #panier-content.panier_paiement { position:relative; width:90%; margin-top:0; } #panier-paiement { font-size:1rem; } #panier-paiement form { width:90%; position:relative; margin:0 auto; } #panier-paiement > img { display:block; margin:0 auto; max-width:100%; } #panier-paiement button { font-size:1.5rem; text-transform:none; background-color:transparent; border:0; width:auto; min-width:30%; margin:2rem auto 0 auto; padding:0.5em 0; } #panier-confirmation { font-size:1rem; } #panier-confirmation > div { font-size:1.5rem; text-align:center; margin:4rem 0; } #panier-confirmation > div p { text-align:center; } #panier-erreur { font-size:1.1rem; margin:4rem auto; } #panier-erreur p { text-align:center; } #panier-erreur a { font-size:1.1rem; position:relative; display:inline-block; width:auto; height:auto; text-align:center; margin:2rem 0; padding:0.3em 1.5em; text-transform:uppercase; font-weight:200; background-color:transparent; color:#fff; } body.desktop #panier-erreur a:hover { text-decoration:none; } a.back { width:40%; margin:2rem auto 0 auto; } a.back.etiquette svg.forme path { fill:#688c28; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MES COMMANDES */ #liste-commandes { position:relative; display:block; width:90%; margin:2rem auto 0 auto; padding:0; } #liste-commandes li { font-size:1rem; width:100%; height:auto; overflow:hidden; position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; vertical-align:top; } #liste-commandes li > div { font-size:0; height:3rem; position:relative; display:block; color:#000; background-color:#fdfdfd; margin:0 0 0.5rem 0; padding:0; } #liste-commandes li > div > span, #liste-commandes li > div > a { font-size:1rem; display:inline-block; position:relative; text-align:center; vertical-align:top; top:50%; transform:translateY(-50%); padding:0 0.5rem; margin:0; } #liste-commandes li > div > a { width:10%; text-transform:uppercase; } #liste-commandes li > div .etiquette svg.forme path { fill:#688c28; } #liste-commandes li > div span.numorder { width:10%; } #liste-commandes li > div span.fulldate { width:30%; } #liste-commandes li > div span.montant { width:10%; } #liste-commandes li > div span.count { width:10%; } #liste-commandes li > div span.status { width:30%; } #content-commande { position:relative; display:block; width:90%; margin:0 auto; padding:2rem 0; font-size:0; vertical-align:top; } #content-commande > div.flecheretour { position:relative; text-align:left; width:100%; height:auto; } #content-commande > div.flecheretour a { font-size:1rem;font-weight:200; color:#ffa023; line-height:1em; height:1em; overflow:hidden; position:relative; top:0; display:inline-block; vertical-align:middle; width:auto; margin:0 0 1.5rem 0; padding:0.15em 0 0 1.5em; text-transform:uppercase; } body.desktop #content-commande > div.flecheretour a:hover { text-decoration:none; } #content-commande > div.flecheretour a:before { content: '<'; left:0; font-size:1.4em; line-height:1em; height:1em; font-family: quicksand; position:absolute; display:inline-block; vertical-align:top; top:50%; transform:translateY(-50%); padding:0; margin:0; transition:inherit; font-weight:400; } #selection-commande { position:relative; display:inline-block; vertical-align:top; width:40%; margin:0; padding:0 4% 0 0; text-align:left; } #commande-vignettes { font-size:0; position:relative; display:inline-block; width:100%; margin:0; padding:1rem 0 0 0; vertical-align:top; } #commande-vignettes li { font-size:1rem; width:100%; height:auto; overflow:hidden; position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; vertical-align:top; border-bottom:1px solid #dedede; } #commande-vignettes div.reference { position:relative; left:0; top:0; width:100%; height:auto; overflow:hidden; padding:1em 0; } #commande-vignettes div.reference > div { font-size:0; position:relative; } #commande-vignettes div.reference > div img { position:relative; display:inline-block; width:15%; height:auto; vertical-align:middle; } #commande-vignettes div.reference > div div.infos { font-size:1rem; position:relative; display:inline-block; width:50%; padding-left:0.5rem; height:auto; vertical-align:middle; text-align:left; } #commande-vignettes div.reference > div div.infos h2 { position:relative; display:block; color:rgb(177,91,93); } #commande-vignettes div.reference > div div.infos > span { position:relative; display:block; color:rgb(255,154,0); } #commande-vignettes div.reference > div div.infos > span.prix { color:rgb(177,91,93); } #commande-vignettes div.reference > div div.infos > span.prix span { color:rgb(255,154,0); } #commande-vignettes div.reference > div div.infos > span.prix span span { font-size:0.7em; } #commande-vignettes div.reference > div div.actions { font-size:1rem; position:relative; display:inline-block; vertical-align:middle; width:35%; height:auto; left:0; top:0; border:0; background-color:transparent; color:#ffa023; text-align:right; margin:0; padding:0 0.5rem 0 0; } #commande-vignettes div.reference > div div.actions span { font-size:1em; text-transform:none; position:relative; display:inline; color:#333; text-align:left; margin:0; padding:0; } #commande-vignettes div.reference > div div.actions span.quantite span { color:#ffa023; font-size:1.5em; padding:0 2rem 0 1rem; } #detail-commande { font-size:0; position:relative; display:inline-block; vertical-align:top; width:60%; margin:2rem 0 0 0; padding:0; text-align:left; } #detail-commande h2 { font-size:1.5rem; padding:0 0 1rem 0; font-weight:600; } #detail-commande h2 > span { font-weight:200; display:inline; width:auto; } #detail-commande div.total { padding:0 0 1rem 0; font-weight:200; width:100%; } #detail-commande div.total > span { font-weight:600; display:inline; width:auto; } #detail-commande div.reductions { padding:0 0 1rem 0; font-weight:200; width:100%; } #detail-commande div.reductions > div > span { font-weight:600; display:inline; width:auto; } #detail-commande div { font-size:1rem; width:50%; display:inline-block; vertical-align:top; padding-right:1rem; } #detail-commande h3 { padding:2rem 0 0.5rem 0; font-weight:600; } #detail-commande label { position:relative; width:100%; border:0; margin:0; padding:0; } #detail-commande span { display:block; position:relative; width:100%; font-size:1em; } #detail-commande span span { display:inline; position:relative; width:auto; font-size:1em; font-weight:600; } #detail-commande a { display:block; position:relative; width:auto; font-size:1em; font-weight:600; color:#ffa023; } #detail-commande .colis span span { display:inline-block; width:auto; font-weight:200; } #detail-commande .colis a { display:inline-block; width:auto; margin-left:1em; } #detail-commande a.facture { position:relative; width:2rem; height:auto; } #detail-commande a.facture svg { position:absolute; width:100%; height:auto; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* DASHBOARD */ #dashboard-nav { position:relative; display:block; width:90%; margin:0 auto; padding:2rem 0 0 0; background-color:#ffffff; height:auto; font-size:0; text-align:center; } #dashboard-nav li { position:relative; display:inline-block; margin:0; padding:0; text-align:center; background-color:#fff; color:#393939; vertical-align:top; } #dashboard-nav li.current { background-color:#ffa023; color:#fff; } #dashboard-nav li a { font-size:1.3rem; position:relative; display:inline-block; width:100%; height:100%; text-align:center; margin:0; padding:0.5em 0; text-transform:uppercase; font-weight:200; border-left:1px solid #ffa023; } #dashboard-nav li:first-child a { border-left:0; } body.desktop #dashboard-nav li a:hover { text-decoration:none; } #dashboard-content { position:relative; display:block; width:90%; margin:0 auto; padding:2rem 0; font-size:0; vertical-align:top; } #dashboard-content div.vide { font-size:1.4rem; position:relative; text-align:center; display:block; width:100%; border:0; color:#000 !important; margin:0 auto; padding:5rem 8rem 8rem 8rem; text-align:center; } /* DASHBOARD COMMANDES */ #form-ordersfilter .filtre-month { font-size:1rem; padding: 2em 0 0 0; } #form-ordersfilter .filtre-month select { border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; padding:0.2em 0.5em; } #form-ordersfilter .filtre-status label { font-size:1rem; padding: 2em 0 4em 2em; } #form-ordersfilter .filtre-status label:first-of-type { padding-left:0; } #liste-orders { position:relative; display:block; margin:0; padding:0; } #liste-orders li > div { font-size:0; height:3rem; position:relative; display:block; color:#000; background-color:#fdfdfd; margin:0 0 0.5rem 0; padding:0; } #liste-orders li > div > span, #liste-orders li > div > a { font-size:1rem; display:inline-block; position:relative; text-align:center; vertical-align:top; top:50%; transform:translateY(-50%); padding:0 0.5rem; margin:0; } #liste-orders li > div > a { width:10%; text-transform:uppercase; } #liste-orders li > div .etiquette svg.forme path { fill:#688c28; } #liste-orders li > div span.numorder { width:10%; font-size:0.8rem; text-align:left; } #liste-orders li > div span.fullname { width:25%; } #liste-orders li > div span.montant { width:10%; } #liste-orders li > div span.count { width:10%; } #liste-orders li > div span.status { width:25%; } #liste-orders li > div span.sav { width:10%; } #selection-order { position:relative; display:inline-block; vertical-align:top; width:40%; margin:0; padding:0 4% 0 0; text-align:left; } #dashboard-content > div.flecheretour { position:relative; text-align:left; width:100%; height:auto; } #dashboard-content > div.flecheretour a { font-size:1rem;font-weight:200; color:#ffa023; line-height:1em; height:1em; overflow:hidden; position:relative; top:0; display:inline-block; vertical-align:middle; width:auto; margin:0 0 1.5rem 0; padding:0.15em 0 0 1.5em; text-transform:uppercase; } body.desktop #dashboard-content > div.flecheretour a:hover { text-decoration:none; } #dashboard-content > div.flecheretour a:before { content: '<'; left:0; font-size:1.4em; line-height:1em; height:1em; font-family: quicksand; position:absolute; display:inline-block; vertical-align:top; top:50%; transform:translateY(-50%); padding:0; margin:0; transition:inherit; font-weight:400; } #order-vignettes { font-size:0; position:relative; display:inline-block; width:100%; margin:0; padding:1rem 0 0 0; vertical-align:top; } #order-vignettes li { font-size:1rem; width:100%; height:auto; overflow:hidden; position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; vertical-align:top; border-bottom:1px solid #dedede; } #order-vignettes div.reference { position:relative; left:0; top:0; width:100%; height:auto; overflow:hidden; padding:1em 0; } #order-vignettes div.reference > div { font-size:0; position:relative; } #order-vignettes div.reference > div img { position:relative; display:inline-block; width:15%; height:auto; vertical-align:middle; } #order-vignettes div.reference > div div.infos { font-size:1rem; position:relative; display:inline-block; width:50%; padding-left:0.5rem; height:auto; vertical-align:middle; text-align:left; } #order-vignettes div.reference > div div.infos h2 { position:relative; display:block; color:rgb(177,91,93); } #order-vignettes div.reference > div div.infos > span { position:relative; display:block; color:rgb(255,154,0); } #order-vignettes div.reference > div div.infos > span.prix { color:rgb(177,91,93); } #order-vignettes div.reference > div div.infos > span.prix span { color:rgb(255,154,0); } #order-vignettes div.reference > div div.infos > span.prix span span { font-size:0.7em; } #order-vignettes div.reference > div div.actions { font-size:1rem; position:relative; display:inline-block; vertical-align:middle; width:35%; height:auto; left:0; top:0; border:0; background-color:transparent; color:#ffa023; text-align:right; margin:0; padding:0 0.5rem 0 0; } #order-vignettes div.reference > div div.actions span { font-size:1em; text-transform:none; position:relative; display:inline; color:#333; text-align:left; margin:0; padding:0; } #order-vignettes div.reference > div div.actions span.quantite span { color:#ffa023; font-size:1.5em; padding:0 2rem 0 1rem; } #form-orderdetail { font-size:0; position:relative; display:inline-block; vertical-align:top; width:60%; margin:2rem 0 0 0; padding:0; text-align:left; } #form-orderdetail h2 { font-size:1.5rem; padding:0 0 1rem 0; font-weight:600; } #form-orderdetail h2 > span { font-weight:200; display:inline; width:auto; } #form-orderdetail div.total { padding:0 0 1rem 0; font-weight:600; width:100%; } #form-orderdetail div.total > span { font-weight:200; display:inline; width:auto; } #form-orderdetail div.refund { padding:0 0 1rem 0; font-weight:200; width:100%; } #form-orderdetail div.refund > div > span { font-weight:600; display:inline; width:auto; } #form-orderdetail div.reductions { padding:0 0 1rem 0; font-weight:200; width:100%; } #form-orderdetail div.reductions > div > span { font-weight:600; display:inline; width:auto; } #form-orderdetail div { font-size:1rem; width:50%; display:inline-block; vertical-align:top; padding-right:1rem; } #form-orderdetail h3 { padding:2rem 0 0.5rem 0; font-weight:600; } #form-orderdetail label { position:relative; width:100%; border:0; margin:0; padding:0; } #form-orderdetail span { display:block; position:relative; width:100%; font-size:1em; } #form-orderdetail span span { display:inline; position:relative; width:auto; font-size:1em; font-weight:600; } #form-orderdetail input { position:relative; width:100%; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; font-size:1em; margin:0 0 0.5em 0; padding:0.2em 0.5em; } #form-orderdetail select { position:relative; width:100%; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; font-size:1em; margin:0 0 0.5em 0; padding:0.2em 0.5em; } #form-orderdetail option { color:#333 !important; } #form-orderdetail a { display:block; position:relative; width:auto; font-size:1em; font-weight:600; color:#ffa023; } #form-orderdetail .colis span span { display:inline-block; width:auto; font-weight:200; } #form-orderdetail .colis a { display:inline-block; width:auto; margin-left:1em; } #form-orderdetail a.facture { position:relative; width:2rem; height:auto; margin-bottom:4rem; } #form-orderdetail a.facture svg { position:absolute; width:100%; height:auto; } #form-orderdetail button { font-size:1.4rem; text-transform:none; background-color:transparent; border:0; width:auto; margin:2em 0; padding:0; } #form-orderdetail button span span { display:block; font-weight:200; } #form-ordersav { font-size:0; padding:2rem 0 4rem 0; text-align:left; } #form-ordersav .montants { font-size:1rem; position:relative; display:inline-block; vertical-align:top; width:40%; padding-right:4rem; } #form-ordersav .suivi { font-size:1rem; position:relative; display:inline-block; vertical-align:top; width:60%; } #form-ordersav h3 { padding:2rem 0 0.5rem 0; font-weight:600; } #form-ordersav h3 span { font-weight:300; font-size:0.7em; } #form-ordersav label { position:relative; display:block; } #form-ordersav input { display:block; position:relative; width:50%; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; font-size:1em; margin:0 0 0.5em 0; padding:0.2em 0.5em; } #form-ordersav textarea { display:block; position:relative; width:100%; height:10rem; line-height:1.1em; border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; font-size:1em; margin:0 0 0.5em 0; padding:0.2em 0.5em; } #form-ordersav .montants > div { font-size:0.8em; position:relative; display:block; margin-top:2em; } #form-ordersav button { font-size:1.4rem; text-transform:none; background-color:transparent; border:0; width:auto; margin:1em 0 2em 0; padding:0; } #form-ordersav button span span { display:block; font-weight:200; } /* DASHBOARD CLIENTS */ #form-customersfilter { font-size:0; display:block; padding:2rem 10% 4rem 10%; margin:0; } #form-customersfilter label { font-size:1rem; padding: 0 2em 0 0; width:25%; display:inline-block; margin:0; vertical-align:middle; } #form-customersfilter input { border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; padding:0.2em 0.5em; } #form-customersfilter button { font-size:1.4rem; text-transform:none; background-color:transparent; border:0; width:auto; display:inline-block; vertical-align:middle; margin:0; } #form-customersfilter button span span { display:block; font-weight:200; } #form-customersfilter .etiquette svg.forme path { fill:#ffa023; } #liste-customers { position:relative; display:block; margin:0; padding:0; } #liste-customers li > div { font-size:0; height:3rem; position:relative; display:block; color:#000; background-color:#fdfdfd; margin:0 0 0.5rem 0; padding:0; } #liste-customers li > div > span, #liste-customers li > div > a { font-size:1rem; display:inline-block; position:relative; text-align:center; vertical-align:top; top:50%; transform:translateY(-50%); padding:0 0.5rem; margin:0; } #liste-customers li > div > a { width:15%; text-transform:uppercase; } #liste-customers li > div .etiquette svg.forme path { fill:#688c28; } #liste-customers li > div span.num { width:4%; font-size:0.6rem; } #liste-customers li > div span.nom { width:18%; text-transform:uppercase; } #liste-customers li > div span.prenom { width:18%; text-transform:uppercase; } #liste-customers li > div span.email { width:26%; } #liste-customers li > div span.count { width:15%; } #liste-customers li > div span.cart { width:4%; font-size:0.6rem; } #liste-customers li > div span.cart > span { position:absolute; padding: 0.1em 0 0 0; margin:0; width:1rem; height:1rem; line-height:1rem; text-align: center; font-size: 0.5rem; color: #fff; background-color: rgb(194,103,2); border-radius:50%; top:50%; transform:translateY(-50%); } .customerdetail { display:block; padding:0 0 1rem 0; text-align:left; font-size:0; } .customerdetail > div { display:inline-block; vertical-align:top; width:50%; padding:0 1rem; text-align:left; font-size:1rem; } .customerdetail > div.infos { padding-right:4rem; padding-top:3rem; padding-bottom:3rem; } .customerdetail > div.account { padding-left:4rem; padding-top:3rem; padding-bottom:3rem; } .customerdetail > div.account > div { padding-top:0.5em; } .customerdetail > div.account a span { padding-right:0.5em; } .customerdetail > div.total { font-weight:600; } .customerdetail h3 { padding:2em 0 0.5em 0; font-weight:600; } .customerdetail h3:first-of-type { padding-top:0; } .customerdetail span { font-weight:600; } /* DASHBOARD EXTRACTION */ .form-extraction label { font-size:1rem; padding: 2em 0 2em 0; } .form-extraction select { border:0; border-radius:0; background-color:#f6f6f6 !important; color:#333 !important; padding:0.2em 0.5em; } .form-extraction button { font-size:1.4rem; text-transform:none; background-color:transparent; border:0; width:auto; margin:0 auto 2em auto; padding:0; } .form-extraction button span span { display:block; font-weight:200; } a.notif { display:inline-block; font-size:1.4rem; width:auto; margin:4em auto 2em auto; } #resumeca { font-family:Verdana; font-size:0.8rem; width:80%; margin:6rem auto 4rem auto; } #resumeca tr:nth-of-type(1) { background-color: #3f3f3f !important; } #resumeca tr:nth-of-type(2n+1) { background-color: #f6f6f6; } #resumeca th { text-align:right; padding:0.2em 0.5em; color:#ffffff; font-weight:600; } #resumeca td { text-align:right; padding:0.2em 0.5em; } /* DASHBOARD STOCKS */ #liste-stocks { position:relative; display:block; margin:0; padding:0; } #liste-stocks li > form { font-size:0; height:3rem; position:relative; display:block; color:#000; background-color:#fdfdfd; margin:0 0 0.5rem 0; padding:0; } #liste-stocks li > form > span, #liste-stocks li > form > label { font-size:1rem; display:inline-block; position:relative; text-align:center; vertical-align:top; top:50%; transform:translateY(-50%); padding:0 0.5rem; margin:0; } #liste-stocks li > form > span.fullname { width:30%; text-transform:uppercase; } #liste-stocks li > form > span.stockbloque { width:5%; } #liste-stocks li > form > span.stockbloque > span { position:absolute; padding: 0.1em 0 0 0; margin:0; width:1rem; height:1rem; line-height:1rem; text-align: center; font-size: 0.5rem; color: #fff; background-color: rgb(194,103,2); border-radius:50%; top:50%; transform:translateY(-50%); } #liste-stocks li > form label input { background-color:rgba(255,160,35,0.8); color:#fff; } #liste-stocks li > form label input[type="checkbox"] { font-size:1em !important; position:absolute !important; padding-top:0 !important; padding-bottom:0 !important; position:relative !important; left:0 !important; top:2em !important; transform:scale(1) !important; } #liste-stocks li > form label input[type="checkbox"] + span { font-size:1em !important; padding-left:3em !important; text-align:left !important; display:inline-block; vertical-align:top; } #liste-stocks li > form label input[type="checkbox"] + span:before { top:-0.2em !important; left:0.25em !important; width:1.8em !important; height:1.8em !important; border:1px solid #3f3f3f !important; border-radius:15% !important; } #liste-stocks li > form label input[type="checkbox"] + span:after { top:-0.1em !important; left:0.35em !important; width:1.6em !important; height:1.6em !important; border:1px solid #688c28 !important; border-radius:15% !important; background-color:#688c28 !important; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ div.retour { font-size:1rem; position:relative; text-align:center; display:block; width:40%; border:0; color:#333 !important; margin:1em auto 1em auto; padding:0; } div.saisie { font-size:1rem; position:relative; text-align:center; display:block; width:40%; border:0; color:#333 !important; margin:1em auto 1em auto; padding:0; } div.erreur { font-size:1.2rem; position:relative; text-align:center; text-transform:uppercase; display:block; width:40%; border:0; color:#333 !important; margin:1em auto 1em auto; padding:0; } div.retour a { text-decoration:none; } body.desktop div.retour a:hover { text-decoration:none; color:#bb2a00; } div.retour strong { font-weight:400; } div.saisie a { text-decoration:none; } body.desktop div.saisie a:hover { text-decoration:none; color:#bb2a00; } div.saisie strong { font-weight:400; } div.erreur a { text-decoration:none; } body.desktop div.erreur a:hover { text-decoration:none; color:#bb2a00; } div.erreur strong { font-weight:400; } #page-authentification, #page-inscription, #page-compte, #page-orders, #page-oublipassword, #page-changepassword { padding:0 0 4rem 0; } .formauth { font-size:0; width:40%; position:relative; margin:2rem auto 0 auto; text-align:center; display:block; padding:0; } .formauth > div { font-size:1.1rem; position:relative; width:100%; border:0; color:#333 !important; margin:0.5em 0 0.5em 0; padding:0; } .formauth > div.connected { padding:4rem 0; } .formauth input { font-size:0.9rem; position:relative; width:85%; height:auto; line-height:2em; display:inline-block; border:0; border-radius:0; background-color:#e8e8e8 !important; color:#333 !important; margin:0 auto 0.5em auto; padding:0.2em 0.5em; } .formauth select { font-size:0.9rem; position:relative; width:85%; height:auto; line-height:2em; display:inline-block; border:0; border-radius:0; background-color:#e8e8e8 !important; color:#333 !important; margin:0 auto 0.5em auto; padding:0.2em 0.5em; } .formauth select option { color:rgba(51,51,51,1) !important; } .formauth select.placeholder, .formauth select option.placeholder { color:rgba(51,51,51,0.5) !important; } .formauth button { font-size:1.5rem; position:relative; width:100%; border:0; border-radius:0; background-color:transparent !important; color:#fff !important; margin:1em 0 0.5em 0; padding:0.6em 0.5em 0.4em 0.5em; line-height:1.5em; text-transform:none; } body.desktop .formauth button:hover { background-color:transparent !important; } .formauth > div.required { font-size:0.6rem; margin:0.2em 0 0.2em 0; text-align:right; padding-right:7.5%; font-style:italic; } .formauth > div.regles { font-size:0.8rem; text-align:left; margin:0.5em 0 2em 0; padding:0 7.5%; } .formauth label.consentementrgpd { font-size:0.6rem !important; position:relative; text-align:left; width:85%; margin: 0 auto 2em auto !important; } .formauth label.consentementrgpd input[type="checkbox"] { font-size:1em !important; position:absolute !important; padding-top:0 !important; padding-bottom:0 !important; position:relative !important; left:0 !important; top:2em !important; transform:scale(1) !important; } .formauth label.consentementrgpd input[type="checkbox"] + span { font-size:1em !important; padding-left:3em !important; text-align:left !important; display:inline-block; } .formauth label.consentementrgpd input[type="checkbox"] + span:before { top:0.4em !important; left:0.25em !important; width:1.8em !important; height:1.8em !important; border:1px solid #999999 !important; border-radius:15% !important; } .formauth label.consentementrgpd input[type="checkbox"] + span:after { top:0.5em !important; left:0.35em !important; width:1.6em !important; height:1.6em !important; border:1px solid #999999 !important; border-radius:15% !important; background-color:#999999 !important; } .formauth a { text-decoration:none; } body.desktop .formauth a:hover { text-decoration:none; color:#bb2a00; } .formauth strong { font-weight:400; } #ul-auth { font-size:0.9rem; clear:both; display:block; width:40%; margin:0 auto 4rem auto; padding:0; } #ul-auth li { clear:both; display:block; width:auto; list-style-type:none; margin:0; padding:0; text-align:right; } #ul-auth li a { position:relative; padding-top:0.5em; padding-right:7.5%; font-size:0.8em; opacity:0.9; text-transform:uppercase; } #ul-auth li a.inscription { display:block; width:100%; opacity:1; text-align:center; color:#fff; font-size:1.5rem; text-transform:none; margin:4em 0 0.5em 0; padding:0.6em 0.5em 0.4em 0.5em; line-height:1.5em; } body.desktop #ul-auth li a:hover { text-decoration:none; opacity:1; } #ul-compte { font-size:0.9rem; clear:both; display:block; width:100%; margin:0 auto 4rem auto; padding:0; } #ul-compte li { clear:both; display:block; width:auto; list-style-type:none; margin:0; padding:0; text-align:center; } #ul-compte li a { position:relative; padding-top:1em; font-size:0.8em; opacity:0.9; text-transform:uppercase; } #ul-compte li a.deconnexion { display:block; width:100%; opacity:1; text-align:center; color:#fff; font-size:1.5rem; text-transform:none; margin:4em 0 0.5em 0; padding:0.6em 0.5em 0.4em 0.5em; line-height:1.5em; } #ul-compte li a.deconnexion.etiquette svg.forme path { fill:#688c28; } body.desktop #ul-compte li a:hover { text-decoration:none; opacity:1; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .media-cover-wrapper { position: relative; overflow: hidden; width:100%; height:100%; } .media-cover-wrapper .media-cover { position: absolute; z-index: -1; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ #page-mentionslegales h2 { margin-top:2em; margin-bottom:1em; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } .liquide { width:100%; transition: all 0.5s linear; } #en2mots { background-color:#ffffff; width:100%; max-width:100%; margin:0 auto; position:relative; overflow-x:hidden; } /* 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; } */ } /* AFFICHAGE MAXI */ @media (min-width:2560px) { html { font-size:20px; } #en2mots { width:100%; } header { width:100%; } .litebox-overlay .litebox-container { max-width:2560px; margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { width:960px; } } /* AFFICHAGE ECRAN LARGE */ @media (min-width:2000px) { header nav ul > li:after { font-size:1.1rem; } header nav ul > li a { font-size:0.9rem; padding: 0 1.5rem; } #accueil-papas h2 { font-size:2.1rem; } #accueil-papas div.intro { font-size:1.2rem; } #accueil-papas div.texte { font-size:0.8rem; } #accueil-miseenavant div.detail { right:4%; } #accueil-miseenavant h2 { font-size:2.1rem; } #accueil-miseenavant p { font-size:0.8rem; } #accueil-mosaique h2 { font-size:2.1rem; } #accueil-mosaique div.intro { font-size:1.2rem; } #accueil-mosaique div.texte { font-size:0.8rem; } #accueil-mosaique ul > li p { font-size:0.9rem; } #accueil-chezvous h2 { font-size:2.1rem; } #accueil-chezvous div.intro { font-size:1.2rem; } #accueil-actualite h2 { font-size:2.1rem; } #accueil-actualite .post p { font-size:0.75rem; } #coordonnees { font-size:0.8rem; } #coordonnees h2 { font-size:1.8rem; } #coordonnees div { margin:0.8rem 0; padding:0.8rem 0 0 3rem; } #coordonnees img { width:1rem; top:0.9rem; } #coordonnees svg { width:1rem; height:1rem; top:0.9rem; } #contact h2 { font-size:1.8rem; } #copyright { font-size:0.7rem; } } /* AFFICHAGE NORMAL */ @media (orientation:portrait) and (min-width:801px), (orientation:landscape) and (min-width:501px) { } /* AFFICHAGE TABLETTE et PETIT ECRAN */ @media (orientation:portrait) and (min-width:801px) and (max-width:1600px), (orientation:landscape) and (min-width:501px) and (max-width:1200px) { header #logo { left:2rem } header nav ul { top:2rem; } header nav ul > li:after { font-size:1.25rem; } header nav ul > li a { font-size:1.25rem; padding: 0 1rem; } header nav ul#menu > li:first-child { top:-1.3rem; } header nav ul#menu { left:20rem; } header nav ul#menu > li:first-child { left:-14rem; } #accueil-papas h2 { font-size:2.8rem; } #accueil-papas div.intro { font-size:1.6rem; } #accueil-papas div.texte { font-size:1.2rem; } #accueil-miseenavant div.detail { top:2rem; } #accueil-miseenavant h2 { font-size:2.8rem; padding-top:0; } #accueil-miseenavant p { font-size:1.2rem; } #accueil-mosaique h2 { font-size:2.8rem; } #accueil-mosaique div.intro { font-size:1.6rem; } #accueil-mosaique div.texte { font-size:1.2rem; } #accueil-mosaique ul > li { width:50%; height:50rem; height:50vw; } #accueil-mosaique ul > li:nth-child(3n) { width:50%; } #accueil-mosaique ul > li h3 { font-size:4rem; } #accueil-mosaique ul > li p { font-size:1.8rem; } #accueil-chezvous h2 { font-size:2.8rem; } #accueil-chezvous div.intro { font-size:1.6rem; } #accueil-chezvous > div > a { width:2.4rem; height:2.4rem; } #accueil-actualite h2 { font-size:2.8rem; } #accueil-actualite .post p { font-size:1.2rem; } #accueil-actualite .post { width:44%; } #accueil-actualite .post:nth-child(3n+2) { display:none; } #page-collection ul > li { width:33.33%; height:33.33rem; height:33.33vw; } #coordonnees { font-size:1.1rem; } #coordonnees h2 { font-size:2.2rem; } #coordonnees div { margin:1rem 0; padding:1rem 0 0 3rem; } #coordonnees img { width:1.2rem; top:1.1rem; } #coordonnees svg { width:1.2rem; height:1.2rem; top:1.1rem; } #contact h2 { font-size:2.2rem; } #copyright { font-size:0.9rem; } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:800px), (orientation:landscape) and (max-width:500px) { html { font-size:24px; font-size:3vw; } .liquide { width:100%; } a.ancre { top:-8rem !important; } div.nosmartphone br { display: none; content: ' '; clear:none; } /* LOGO */ header #logo { left:4.8rem; width:24rem; height:23rem; } .scroll header #logo, .interne header #logo { top:-23rem; } #nav-button { z-index:500; font-size:3rem; max-height:3rem; cursor:pointer; display:block; color:#2e2e2e; position:fixed; right:2rem; top:2.5rem; transition: all 0.5s linear; } body.desktop #nav-button:hover { color:#2e2e2e; } #nav-toggle:checked ~ #menu { max-height:60rem; transition: all 0.5s linear; } header { height:8rem; background-color:#fff; font-size:0; } header nav { background-color:#fff; font-size:0; } header nav ul { z-index:400 !important; max-height:0; overflow:hidden !important; position:fixed !important; top:0 !important; width:100% !important; left:0 !important; margin:0 !important; transition: all 0.5s linear !important; padding-top:8rem !important; background-color:#ffffff; font-size:0; } header nav ul > li { background-color:#2e2e2e; display:block !important; width:100% !important; padding:0 1em !important; margin:0 !important; text-align:center !important; border:0 !important; } header nav ul > li a { padding:0; border-left:0; color:#fff !important; display:block !important; padding:0.5em !important; font-size:2rem !important; text-align:center !important; } body.desktop header nav ul > li a:hover, header nav ul > li a.current { color:#fff !important; text-decoration:none !important; } header nav ul > li:before { content:'' !important; margin:0 auto 0 auto !important; display:block !important; width:60% !important; height:1px !important; background-image:radial-gradient(#fff,#2e2e2e) !important; } header nav ul > li:first-child:before { height:0 !important; background-image:none !important; } header nav ul > li:after { content:"" !important; } header nav ul > li:first-child { z-index:420; background-color:transparent; display:inline-block; position:absolute; margin:0; padding:0; padding-left:1em !important; top:1.2rem !important; left:1rem !important; width:18rem !important; height:6rem !important; transition:all 0.8s ease 0.5s; } header nav ul > li:first-child a header nav ul > li.mobile { display:inline-block; } header nav ul > li.mobile a { color:#ffa023 !important; } header nav ul#menu-perso { z-index:500 !important; background-color:transparent !important; position:fixed !important; left: unset !important; bottom:unset !important; right:6rem !important; top:1.5rem !important; width:5rem !important; height:5rem !important; display:inline-block !important; padding:0 0 5rem 0 !important; margin:0 !important; } header nav ul#menu-perso > li { display:none !important; } header nav ul#menu-perso > li:last-child { z-index:500 !important; position:absolute; left:0; top:0; width:100% !important; height:100% !important; background-color:transparent; display:inline-block !important;} header nav ul#menu-perso > li:before, header nav ul#menu-perso > li:after { display:none !important; background-image:none !important; } header nav ul#menu-perso > li:last-child > a > span { top:0.2rem; right:0.4rem; width:1.5rem; height:1.5rem; line-height:1.5rem; font-size:1rem; } header nav ul#menu-perso > li.panier, header nav ul#menu-perso > li.panier a { padding:0 !important; } .accueil header nav ul#menu-perso { display:none !important; } #accueil-bandeau .label-ag { right:0; top:14rem; width:12rem; height:12rem; } #accueil-bandeau .label-ccf { left:0; top:16rem; width:10rem; height:8rem; } footer > div { text-align:center; } #sociaux { width:100%; margin:2rem 0 0 0; padding:0; } #sociaux > li { margin:0 1rem 0 1rem; } #sociaux > li a { width:4rem; height:4rem; } #googlemap, #placeholdermap { width:100%; margin:2rem 0; padding:0; } #coordonnees { font-size:1.8rem; width:100%; margin:0; padding:0; padding-top:2rem; } #coordonnees h2 { font-size:2.8rem; text-align:center; margin:2rem 0 4rem 0; } #coordonnees div { margin:1rem 0; padding:1rem 0 0 3rem; text-align:left; } #coordonnees img { width:1.8rem; top:1.3rem; } #coordonnees svg { width:1.8rem; height:1.8rem; top:1.3rem; } #contact { width:100%; margin:0; padding:0; padding-top:2rem; } #contact h2 { font-size:2.8rem; text-align:center; margin-bottom:4rem; } #form-contact label { font-size:1.5rem; } #form-contact input, #form-contact textarea { font-size:1.2rem; } .asterisque { font-size:1rem !important; } #form-contact button { font-size:1.2rem; } #copyright { font-size:1.2rem; padding-left:0; text-align:center; } #accueil-bandeau { min-height:10rem; } #accueil-bandeau img { max-width:200%; width:200%; margin:0 auto; } #accueil-papas img.visuel { position:relative; top:0; height:auto; width:100%; } #accueil-papas img.masque { display:none; } #accueil-papas div.detail { position:relative; top:0; left:0; min-height:3rem; padding:2rem 5% 2rem 5%; transform:none; } #accueil-papas h2 { font-size:3.2rem; text-align:center; } #accueil-papas div.intro p { font-size:2.2rem; text-align:center; } #accueil-papas div.texte p { font-size:1.8rem; text-align:center; } #accueil-miseenavant { min-height:2rem; padding:1rem 0 1rem 0; background-image:none !important; overflow:hidden; } #accueil-miseenavant img.etiquette { margin-right:0; } #accueil-miseenavant img.visuel { position:relative; top:0; padding-top:1rem; height:auto; width:130%; max-width:130%; } #accueil-miseenavant img.masque { display:none; } #accueil-miseenavant div.detail { position:relative; width:100%; left:0; right:0; top:0; bottom:0; padding:0 2rem; text-align:center; } #accueil-miseenavant h2 { font-size:3.2rem; padding-top:0; padding-left:0; text-align:center; } #accueil-miseenavant p { font-size:1.8rem; padding-left:0; text-align:center; } #accueil-miseenavant a { margin-top:1rem; } #accueil-mosaique h2 { font-size:3.2rem; padding:0 5%; text-align:center; } #accueil-mosaique div.intro { font-size:2.2rem; padding: 0 5%; } #accueil-mosaique div.texte { font-size:1.8rem; padding: 0 5%; } #accueil-mosaique div.intro p { text-align:center; } #accueil-mosaique div.texte p { text-align:center; } #accueil-mosaique ul > li { width:100%; height:100rem; height:100vw; } #accueil-mosaique ul > li:nth-child(3n) { width:100%; } #accueil-mosaique ul > li > div { padding:1rem 4rem 1rem 4rem; } #accueil-mosaique ul > li h3 { font-size:3rem; } #accueil-mosaique ul > li p { font-size:1.6rem; } #accueil-mosaique ul > li p:first-of-type { margin-top:2rem; } img.mosaique { width:90%; margin:0 auto; padding:4rem 0; } #accueil-chezvous h2 { font-size:3.2rem; } #accueil-chezvous div.intro { font-size:1.8rem; } #accueil-chezvous > div > a { width:3.5rem; height:3.5rem; } #accueil-chezvous h3 { font-size:2.6rem; text-align:center; } #accueil-chezvous.show > div#listes { max-height:1000rem; transition: max-height 1s linear; } ul#liste-distributeurs { padding-top:0; } ul#liste-distributeurs > li { width:100%; height:auto; margin-bottom:0; padding-bottom:2rem; padding-top:2rem; } ul#liste-distributeurs > li h4 { position:relative; font-size:2rem; text-align:center; padding-top:2rem; padding-bottom:1rem; } ul#liste-distributeurs > li h5 { font-size:2.2rem; padding-top:1rem; } ul#liste-distributeurs > li div { font-size:1.8rem; } ul#liste-distributeurs > li div.cadre { background-image:none; left:30%; right:30%; border-bottom:1px solid #888; } ul#liste-partenaires { padding-top:0; } ul#liste-partenaires > li { width:100%; height:auto; margin-bottom:0; padding-bottom:2rem; padding-top:2rem; } ul#liste-partenaires > li h4 { position:relative; font-size:2rem; text-align:center; padding-top:2rem; padding-bottom:1rem; } ul#liste-partenaires > li h5 { font-size:2.2rem; padding-top:1rem; } ul#liste-partenaires > li div { font-size:1.8rem; } ul#liste-partenaires > li div.cadre { background-image:none; left:30%; right:30%; border-bottom:1px solid #888; } #accueil-actualite h2 { font-size:3.2rem; } #accueil-actualite .post { width:100%; margin-left:0; margin-right:0; } #accueil-actualite .post p { font-size:1.8rem; } #accueil-actualite .post a.postlink span {width:2.5rem; height:2.5rem; margin:0 0 1.2rem 0; } #accueil-collection { height:10rem; } #accueil-collection:before { content:''; z-index:11; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.4); } #accueil-collection img.visuel { width:auto; max-width:unset; height:100%;left:-80%; } #accueil-collection div.detail { top:1.5rem; left:5%; width:90%; padding:0; margin:0; } #accueil-collection h2 { font-size:2rem; } #accueil-collection div.intro { margin-top:0.5rem; font-size:1rem; color:#ffba00; } .titre-boutique { height:10rem !important; position:relative; } .titre-boutique:before { content:''; z-index:11; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.4); } .titre-boutique img.visuel { width:auto; max-width:unset; height:100%; left:-80%; } .titre-boutique div.detail { top:1.5rem; left:5%; width:90%; padding:0; margin:0; } .titre-boutique h2 { font-size:2rem; } .titre-boutique div.intro { margin-top:0.5rem; font-size:1rem; } #page-collection div.descriptif { width:90%; } #page-collection div.descriptif p { font-size:1.6rem; } #page-collection ul > li .eye { display:block; position:absolute; left:90%; top:10%; transform:translate(-50%,-50%); width:15%; height:15%; opacity:1; background-color:transparent; padding:0; margin:0; background-color:rgba(0,0,0,0.1); border-radius:50%; } #page-collection ul > li.hover .eye { display:none; } #page-collection ul > li { width:100%; height:100rem; height:100vw; position:relative; } #page-collection ul > li h3 { font-size:2.5rem; } #page-collection ul > li p { font-size:1.5rem; } #page-collection ul > li div.prix { font-size:1.6rem; } #page-collection ul > li a { font-size:1.4rem; } #page-collection ul > li .actions { font-size:1.4rem; } #page-detail .nav a.prev, #page-detail .nav a.next { display:none; } #page-detail .content { height:auto; padding-bottom:0; } #page-detail .content h1 { left:5%; width:90%; } #page-detail .content h2 { display:none; } #page-detail .content img { position:relative; left:10%; width:80%; } #page-detail .content .detail { left:5%; width:90%; padding-right:0; } #panier-alerte { font-size:1.6rem; } #panier-nav li { width:100% !important; display:none; } #panier-nav li.current { display:inline-block; } #panier-nav li .etape { font-size:2.6rem; } #panier-nav li .intitule { font-size:2.6rem; } #panier-content { width:90%; } .jconfirm-title { font-size:1.6rem; text-transform:uppercase; font-weight:400; } .jconfirm-content { font-size:1.4rem; font-weight:200; } #panier-mosaique div.reference > div div.infos { padding-left:0.5rem; } #panier-mosaique div.reference > div div.actions span.labelquantite { display:none; } #panier-destination h2 { text-align:left; font-size:3rem; } #panier-destination label { text-align:left; width:100%; padding-right:0; font-size:1.4rem; margin-bottom:0.5em; } #panier-destination select { width:100%; font-size:1.6rem; } #panier-totaux h2 { font-size:2rem; padding:0.5em 0 0.3em 0; } #panier-totaux h3 { width:73%; font-size:1.3rem; } #panier-totaux > div { height:4rem; } #panier-totaux > div.produits { margin-top:2rem; } #panier-totaux > div.port { height:7.5rem; } #panier-totaux > div > span { width:27%; font-size:1.3rem; } #panier-checkout button { width:100%; font-size:2rem; } #panier-content.panier_identification { width:90%; } #panier-content form.formauth a.confirmlivraison { font-size:1.8rem; } #panier-content .infos p { font-size:1.6rem; } #form-destinataire label.option { width:100%; font-size:1.6rem; } #form-destinataire button { width:100% } #panier-content.panier_livraison iframe { width:90%; margin:0 auto; } #panier-content.panier_livraison iframe.mondialrelay, #dashboard-content iframe.mondialrelay { width:100%; } a.back { width:100%; } #dashboard-nav li a { font-size:1rem; } #form-ordersfilter .filtre-status { padding:2rem 0; } #form-ordersfilter .filtre-status > label { width: 50%; padding: 0 2em 1em 0; text-align:left;} #liste-commandes li > div > span { display:none; } #liste-commandes li > div span.numorder { display:inline-block; width:30%; } #liste-commandes li > div span.status { display:inline-block; width:40%; } #liste-commandes li > div > a { width:30%; } #selection-commande { width:100%; } #detail-commande { width:100%; margin-top:4rem; } #liste-orders li > div > span { display:none; } #liste-orders li > div span.numorder { display:inline-block; width:30%; } #liste-orders li > div span.status { display:inline-block; width:40%; } #liste-orders li > div > a { width:30%; } #selection-order { width:100%; } #form-orderdetail { width:100%; margin-top:4rem; } #form-customersfilter label { width:100%; margin-bottom:1em; padding-right:0; } #liste-customers li > div > span { display:none; } #liste-customers li > div span.nom { display:inline-block; width:30%; } #liste-customers li > div span.prenom { display:inline-block; width:30%; } #liste-customers li > div > a { width:40%; } #resumeca { width:100%; } #resumeca th:nth-of-type(4), #resumeca th:nth-of-type(5), #resumeca th:nth-of-type(6), #resumeca th:nth-of-type(7) { display:none; } #resumeca td:nth-of-type(4), #resumeca td:nth-of-type(5), #resumeca td:nth-of-type(6), #resumeca td:nth-of-type(7) { display:none; } #liste-stocks li > form > span.fullname { width:55%; } #liste-stocks li > form > span.stockbloque { width:5%; } #liste-stocks li > form label.stock { width:20%; } #liste-stocks li > form label.eboutique { width:20%; } #liste-stocks li > form label.eboutique > span > span { display:none; } #form-destinataire { width:100%; } .formauth { width:90%; } .formauth > div.required { font-size:1rem; padding-left:10%; } .formauth button { font-size:1.8rem; } .formauth label.consentementrgpd { font-size:1rem !important; } .formauth > div.regles { font-size:1rem; } #ul-auth { width:90%; font-size:1.2rem; } #ul-auth li a.inscription { font-size:1.8rem; } #ul-compte li a { display:block; padding-top:2em; font-size:1.4rem; } #ul-compte li a.deconnexion { font-size:1.8rem; } #div-auth .connected { font-size:1.6rem; } div.retour { font-size:1.5rem; width:80%; margin:2rem auto; } /* Pour éviter un zoom sur l'iphone qd on clique sur un champ de saisie */ @media screen and (-webkit-min-device-pixel-ratio:0) { textarea,input,select { font-size: 16px !important; padding:0 5px !important; line-height:20px !important; } input,select { height:28px !important; } } } /* AFFICHAGE MINI */ @media (max-width:300px) { html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } main { margin-top:0 !important; } } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } .liquide { width:100%; transition: all 0.5s linear; } #en2mots { background-color:#ffffff; width:100%; max-width:100%; margin:0 auto; position:relative; overflow-x:hidden; } /* 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; } */ } /* AFFICHAGE MAXI */ @media (min-width:2560px) { html { font-size:20px; } #en2mots { width:100%; } header { width:100%; } .litebox-overlay .litebox-container { max-width:2560px; margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { width:960px; } } /* AFFICHAGE ECRAN LARGE */ @media (min-width:2000px) { header nav ul > li:after { font-size:1.1rem; } header nav ul > li a { font-size:0.9rem; padding: 0 1.5rem; } #accueil-papas h2 { font-size:2.1rem; } #accueil-papas div.intro { font-size:1.2rem; } #accueil-papas div.texte { font-size:0.8rem; } #accueil-miseenavant div.detail { right:4%; } #accueil-miseenavant h2 { font-size:2.1rem; } #accueil-miseenavant p { font-size:0.8rem; } #accueil-mosaique h2 { font-size:2.1rem; } #accueil-mosaique div.intro { font-size:1.2rem; } #accueil-mosaique div.texte { font-size:0.8rem; } #accueil-mosaique ul > li p { font-size:0.9rem; } #accueil-chezvous h2 { font-size:2.1rem; } #accueil-chezvous div.intro { font-size:1.2rem; } #accueil-actualite h2 { font-size:2.1rem; } #accueil-actualite .post p { font-size:0.75rem; } #coordonnees { font-size:0.8rem; } #coordonnees h2 { font-size:1.8rem; } #coordonnees div { margin:0.8rem 0; padding:0.8rem 0 0 3rem; } #coordonnees img { width:1rem; top:0.9rem; } #coordonnees svg { width:1rem; height:1rem; top:0.9rem; } #contact h2 { font-size:1.8rem; } #copyright { font-size:0.7rem; } } /* AFFICHAGE NORMAL */ @media (orientation:portrait) and (min-width:801px), (orientation:landscape) and (min-width:501px) { } /* AFFICHAGE TABLETTE et PETIT ECRAN */ @media (orientation:portrait) and (min-width:801px) and (max-width:1600px), (orientation:landscape) and (min-width:501px) and (max-width:1200px) { header #logo { left:2rem } header nav ul { top:2rem; } header nav ul > li:after { font-size:1.25rem; } header nav ul > li a { font-size:1.25rem; padding: 0 1rem; } header nav ul#menu > li:first-child { top:-1.3rem; } header nav ul#menu { left:20rem; } header nav ul#menu > li:first-child { left:-14rem; } #accueil-papas h2 { font-size:2.8rem; } #accueil-papas div.intro { font-size:1.6rem; } #accueil-papas div.texte { font-size:1.2rem; } #accueil-miseenavant div.detail { top:2rem; } #accueil-miseenavant h2 { font-size:2.8rem; padding-top:0; } #accueil-miseenavant p { font-size:1.2rem; } #accueil-mosaique h2 { font-size:2.8rem; } #accueil-mosaique div.intro { font-size:1.6rem; } #accueil-mosaique div.texte { font-size:1.2rem; } #accueil-mosaique ul > li { width:50%; height:50rem; height:50vw; } #accueil-mosaique ul > li:nth-child(3n) { width:50%; } #accueil-mosaique ul > li h3 { font-size:4rem; } #accueil-mosaique ul > li p { font-size:1.8rem; } #accueil-chezvous h2 { font-size:2.8rem; } #accueil-chezvous div.intro { font-size:1.6rem; } #accueil-chezvous > div > a { width:2.4rem; height:2.4rem; } #accueil-actualite h2 { font-size:2.8rem; } #accueil-actualite .post p { font-size:1.2rem; } #accueil-actualite .post { width:44%; } #accueil-actualite .post:nth-child(3n+2) { display:none; } #page-collection ul > li { width:33.33%; height:33.33rem; height:33.33vw; } #coordonnees { font-size:1.1rem; } #coordonnees h2 { font-size:2.2rem; } #coordonnees div { margin:1rem 0; padding:1rem 0 0 3rem; } #coordonnees img { width:1.2rem; top:1.1rem; } #coordonnees svg { width:1.2rem; height:1.2rem; top:1.1rem; } #contact h2 { font-size:2.2rem; } #copyright { font-size:0.9rem; } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:800px), (orientation:landscape) and (max-width:500px) { html { font-size:24px; font-size:3vw; } .liquide { width:100%; } a.ancre { top:-8rem !important; } div.nosmartphone br { display: none; content: ' '; clear:none; } /* LOGO */ header #logo { left:4.8rem; width:24rem; height:23rem; } .scroll header #logo, .interne header #logo { top:-23rem; } #nav-button { z-index:500; font-size:3rem; max-height:3rem; cursor:pointer; display:block; color:#2e2e2e; position:fixed; right:2rem; top:2.5rem; transition: all 0.5s linear; } body.desktop #nav-button:hover { color:#2e2e2e; } #nav-toggle:checked ~ #menu { max-height:60rem; transition: all 0.5s linear; } header { height:8rem; background-color:#fff; font-size:0; } header nav { background-color:#fff; font-size:0; } header nav ul { z-index:400 !important; max-height:0; overflow:hidden !important; position:fixed !important; top:0 !important; width:100% !important; left:0 !important; margin:0 !important; transition: all 0.5s linear !important; padding-top:8rem !important; background-color:#ffffff; font-size:0; } header nav ul > li { background-color:#2e2e2e; display:block !important; width:100% !important; padding:0 1em !important; margin:0 !important; text-align:center !important; border:0 !important; } header nav ul > li a { padding:0; border-left:0; color:#fff !important; display:block !important; padding:0.5em !important; font-size:2rem !important; text-align:center !important; } body.desktop header nav ul > li a:hover, header nav ul > li a.current { color:#fff !important; text-decoration:none !important; } header nav ul > li:before { content:'' !important; margin:0 auto 0 auto !important; display:block !important; width:60% !important; height:1px !important; background-image:radial-gradient(#fff,#2e2e2e) !important; } header nav ul > li:first-child:before { height:0 !important; background-image:none !important; } header nav ul > li:after { content:"" !important; } header nav ul > li:first-child { z-index:420; background-color:transparent; display:inline-block; position:absolute; margin:0; padding:0; padding-left:1em !important; top:1.2rem !important; left:1rem !important; width:18rem !important; height:6rem !important; transition:all 0.8s ease 0.5s; } header nav ul > li:first-child a header nav ul > li.mobile { display:inline-block; } header nav ul > li.mobile a { color:#ffa023 !important; } header nav ul#menu-perso { z-index:500 !important; background-color:transparent !important; position:fixed !important; left: unset !important; bottom:unset !important; right:6rem !important; top:1.5rem !important; width:5rem !important; height:5rem !important; display:inline-block !important; padding:0 0 5rem 0 !important; margin:0 !important; } header nav ul#menu-perso > li { display:none !important; } header nav ul#menu-perso > li:last-child { z-index:500 !important; position:absolute; left:0; top:0; width:100% !important; height:100% !important; background-color:transparent; display:inline-block !important;} header nav ul#menu-perso > li:before, header nav ul#menu-perso > li:after { display:none !important; background-image:none !important; } header nav ul#menu-perso > li:last-child > a > span { top:0.2rem; right:0.4rem; width:1.5rem; height:1.5rem; line-height:1.5rem; font-size:1rem; } header nav ul#menu-perso > li.panier, header nav ul#menu-perso > li.panier a { padding:0 !important; } .accueil header nav ul#menu-perso { display:none !important; } #accueil-bandeau .label-ag { right:0; top:14rem; width:12rem; height:12rem; } #accueil-bandeau .label-ccf { left:0; top:16rem; width:10rem; height:8rem; } footer > div { text-align:center; } #sociaux { width:100%; margin:2rem 0 0 0; padding:0; } #sociaux > li { margin:0 1rem 0 1rem; } #sociaux > li a { width:4rem; height:4rem; } #googlemap, #placeholdermap { width:100%; margin:2rem 0; padding:0; } #coordonnees { font-size:1.8rem; width:100%; margin:0; padding:0; padding-top:2rem; } #coordonnees h2 { font-size:2.8rem; text-align:center; margin:2rem 0 4rem 0; } #coordonnees div { margin:1rem 0; padding:1rem 0 0 3rem; text-align:left; } #coordonnees img { width:1.8rem; top:1.3rem; } #coordonnees svg { width:1.8rem; height:1.8rem; top:1.3rem; } #contact { width:100%; margin:0; padding:0; padding-top:2rem; } #contact h2 { font-size:2.8rem; text-align:center; margin-bottom:4rem; } #form-contact label { font-size:1.5rem; } #form-contact input, #form-contact textarea { font-size:1.2rem; } .asterisque { font-size:1rem !important; } #form-contact button { font-size:1.2rem; } #copyright { font-size:1.2rem; padding-left:0; text-align:center; } #accueil-bandeau { min-height:10rem; } #accueil-bandeau img { max-width:200%; width:200%; margin:0 auto; } #accueil-papas img.visuel { position:relative; top:0; height:auto; width:100%; } #accueil-papas img.masque { display:none; } #accueil-papas div.detail { position:relative; top:0; left:0; min-height:3rem; padding:2rem 5% 2rem 5%; transform:none; } #accueil-papas h2 { font-size:3.2rem; text-align:center; } #accueil-papas div.intro p { font-size:2.2rem; text-align:center; } #accueil-papas div.texte p { font-size:1.8rem; text-align:center; } #accueil-miseenavant { min-height:2rem; padding:1rem 0 1rem 0; background-image:none !important; overflow:hidden; } #accueil-miseenavant img.etiquette { margin-right:0; } #accueil-miseenavant img.visuel { position:relative; top:0; padding-top:1rem; height:auto; width:130%; max-width:130%; } #accueil-miseenavant img.masque { display:none; } #accueil-miseenavant div.detail { position:relative; width:100%; left:0; right:0; top:0; bottom:0; padding:0 2rem; text-align:center; } #accueil-miseenavant h2 { font-size:3.2rem; padding-top:0; padding-left:0; text-align:center; } #accueil-miseenavant p { font-size:1.8rem; padding-left:0; text-align:center; } #accueil-miseenavant a { margin-top:1rem; } #accueil-mosaique h2 { font-size:3.2rem; padding:0 5%; text-align:center; } #accueil-mosaique div.intro { font-size:2.2rem; padding: 0 5%; } #accueil-mosaique div.texte { font-size:1.8rem; padding: 0 5%; } #accueil-mosaique div.intro p { text-align:center; } #accueil-mosaique div.texte p { text-align:center; } #accueil-mosaique ul > li { width:100%; height:100rem; height:100vw; } #accueil-mosaique ul > li:nth-child(3n) { width:100%; } #accueil-mosaique ul > li > div { padding:1rem 4rem 1rem 4rem; } #accueil-mosaique ul > li h3 { font-size:3rem; } #accueil-mosaique ul > li p { font-size:1.6rem; } #accueil-mosaique ul > li p:first-of-type { margin-top:2rem; } img.mosaique { width:90%; margin:0 auto; padding:4rem 0; } #accueil-chezvous h2 { font-size:3.2rem; } #accueil-chezvous div.intro { font-size:1.8rem; } #accueil-chezvous > div > a { width:3.5rem; height:3.5rem; } #accueil-chezvous h3 { font-size:2.6rem; text-align:center; } #accueil-chezvous.show > div#listes { max-height:1000rem; transition: max-height 1s linear; } ul#liste-distributeurs { padding-top:0; } ul#liste-distributeurs > li { width:100%; height:auto; margin-bottom:0; padding-bottom:2rem; padding-top:2rem; } ul#liste-distributeurs > li h4 { position:relative; font-size:2rem; text-align:center; padding-top:2rem; padding-bottom:1rem; } ul#liste-distributeurs > li h5 { font-size:2.2rem; padding-top:1rem; } ul#liste-distributeurs > li div { font-size:1.8rem; } ul#liste-distributeurs > li div.cadre { background-image:none; left:30%; right:30%; border-bottom:1px solid #888; } ul#liste-partenaires { padding-top:0; } ul#liste-partenaires > li { width:100%; height:auto; margin-bottom:0; padding-bottom:2rem; padding-top:2rem; } ul#liste-partenaires > li h4 { position:relative; font-size:2rem; text-align:center; padding-top:2rem; padding-bottom:1rem; } ul#liste-partenaires > li h5 { font-size:2.2rem; padding-top:1rem; } ul#liste-partenaires > li div { font-size:1.8rem; } ul#liste-partenaires > li div.cadre { background-image:none; left:30%; right:30%; border-bottom:1px solid #888; } #accueil-actualite h2 { font-size:3.2rem; } #accueil-actualite .post { width:100%; margin-left:0; margin-right:0; } #accueil-actualite .post p { font-size:1.8rem; } #accueil-actualite .post a.postlink span {width:2.5rem; height:2.5rem; margin:0 0 1.2rem 0; } #accueil-collection { height:10rem; } #accueil-collection:before { content:''; z-index:11; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.4); } #accueil-collection img.visuel { width:auto; max-width:unset; height:100%;left:-80%; } #accueil-collection div.detail { top:1.5rem; left:5%; width:90%; padding:0; margin:0; } #accueil-collection h2 { font-size:2rem; } #accueil-collection div.intro { margin-top:0.5rem; font-size:1rem; color:#ffba00; } .titre-boutique { height:10rem !important; position:relative; } .titre-boutique:before { content:''; z-index:11; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.4); } .titre-boutique img.visuel { width:auto; max-width:unset; height:100%; left:-80%; } .titre-boutique div.detail { top:1.5rem; left:5%; width:90%; padding:0; margin:0; } .titre-boutique h2 { font-size:2rem; } .titre-boutique div.intro { margin-top:0.5rem; font-size:1rem; } #page-collection div.descriptif { width:90%; } #page-collection div.descriptif p { font-size:1.6rem; } #page-collection ul > li .eye { display:block; position:absolute; left:90%; top:10%; transform:translate(-50%,-50%); width:15%; height:15%; opacity:1; background-color:transparent; padding:0; margin:0; background-color:rgba(0,0,0,0.1); border-radius:50%; } #page-collection ul > li.hover .eye { display:none; } #page-collection ul > li { width:100%; height:100rem; height:100vw; position:relative; } #page-collection ul > li h3 { font-size:2.5rem; } #page-collection ul > li p { font-size:1.5rem; } #page-collection ul > li div.prix { font-size:1.6rem; } #page-collection ul > li a { font-size:1.4rem; } #page-collection ul > li .actions { font-size:1.4rem; } #page-detail .nav a.prev, #page-detail .nav a.next { display:none; } #page-detail .content { height:auto; padding-bottom:0; } #page-detail .content h1 { left:5%; width:90%; } #page-detail .content h2 { display:none; } #page-detail .content img { position:relative; left:10%; width:80%; } #page-detail .content .detail { left:5%; width:90%; padding-right:0; } #panier-alerte { font-size:1.6rem; } #panier-nav li { width:100% !important; display:none; } #panier-nav li.current { display:inline-block; } #panier-nav li .etape { font-size:2.6rem; } #panier-nav li .intitule { font-size:2.6rem; } #panier-content { width:90%; } .jconfirm-title { font-size:1.6rem; text-transform:uppercase; font-weight:400; } .jconfirm-content { font-size:1.4rem; font-weight:200; } #panier-mosaique div.reference > div div.infos { padding-left:0.5rem; } #panier-mosaique div.reference > div div.actions span.labelquantite { display:none; } #panier-destination h2 { text-align:left; font-size:3rem; } #panier-destination label { text-align:left; width:100%; padding-right:0; font-size:1.4rem; margin-bottom:0.5em; } #panier-destination select { width:100%; font-size:1.6rem; } #panier-totaux h2 { font-size:2rem; padding:0.5em 0 0.3em 0; } #panier-totaux h3 { width:73%; font-size:1.3rem; } #panier-totaux > div { height:4rem; } #panier-totaux > div.produits { margin-top:2rem; } #panier-totaux > div.port { height:7.5rem; } #panier-totaux > div > span { width:27%; font-size:1.3rem; } #panier-checkout button { width:100%; font-size:2rem; } #panier-content.panier_identification { width:90%; } #panier-content form.formauth a.confirmlivraison { font-size:1.8rem; } #panier-content .infos p { font-size:1.6rem; } #form-destinataire label.option { width:100%; font-size:1.6rem; } #form-destinataire button { width:100% } #panier-content.panier_livraison iframe { width:90%; margin:0 auto; } #panier-content.panier_livraison iframe.mondialrelay, #dashboard-content iframe.mondialrelay { width:100%; } a.back { width:100%; } #dashboard-nav li a { font-size:1rem; } #form-ordersfilter .filtre-status { padding:2rem 0; } #form-ordersfilter .filtre-status > label { width: 50%; padding: 0 2em 1em 0; text-align:left;} #liste-commandes li > div > span { display:none; } #liste-commandes li > div span.numorder { display:inline-block; width:30%; } #liste-commandes li > div span.status { display:inline-block; width:40%; } #liste-commandes li > div > a { width:30%; } #selection-commande { width:100%; } #detail-commande { width:100%; margin-top:4rem; } #liste-orders li > div > span { display:none; } #liste-orders li > div span.numorder { display:inline-block; width:30%; } #liste-orders li > div span.status { display:inline-block; width:40%; } #liste-orders li > div > a { width:30%; } #selection-order { width:100%; } #form-orderdetail { width:100%; margin-top:4rem; } #form-customersfilter label { width:100%; margin-bottom:1em; padding-right:0; } #liste-customers li > div > span { display:none; } #liste-customers li > div span.nom { display:inline-block; width:30%; } #liste-customers li > div span.prenom { display:inline-block; width:30%; } #liste-customers li > div > a { width:40%; } #resumeca { width:100%; } #resumeca th:nth-of-type(4), #resumeca th:nth-of-type(5), #resumeca th:nth-of-type(6), #resumeca th:nth-of-type(7) { display:none; } #resumeca td:nth-of-type(4), #resumeca td:nth-of-type(5), #resumeca td:nth-of-type(6), #resumeca td:nth-of-type(7) { display:none; } #liste-stocks li > form > span.fullname { width:55%; } #liste-stocks li > form > span.stockbloque { width:5%; } #liste-stocks li > form label.stock { width:20%; } #liste-stocks li > form label.eboutique { width:20%; } #liste-stocks li > form label.eboutique > span > span { display:none; } #form-destinataire { width:100%; } .formauth { width:90%; } .formauth > div.required { font-size:1rem; padding-left:10%; } .formauth button { font-size:1.8rem; } .formauth label.consentementrgpd { font-size:1rem !important; } .formauth > div.regles { font-size:1rem; } #ul-auth { width:90%; font-size:1.2rem; } #ul-auth li a.inscription { font-size:1.8rem; } #ul-compte li a { display:block; padding-top:2em; font-size:1.4rem; } #ul-compte li a.deconnexion { font-size:1.8rem; } #div-auth .connected { font-size:1.6rem; } div.retour { font-size:1.5rem; width:80%; margin:2rem auto; } /* Pour éviter un zoom sur l'iphone qd on clique sur un champ de saisie */ @media screen and (-webkit-min-device-pixel-ratio:0) { textarea,input,select { font-size: 16px !important; padding:0 5px !important; line-height:20px !important; } input,select { height:28px !important; } } } /* AFFICHAGE MINI */ @media (max-width:300px) { html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } main { margin-top:0 !important; } }