/* css généraux pour toutes les pages (en intro), sauf : chargement, identification, protege classe no-touch exclusivement pour les appareils sans touch panel, introduite dans session.php testé sur legal.php ! attention : selon le navigateur l'éventuelle barre de scrolling (20px) est incluse (Firefox, Opera and IE) ou non (Chrome and Safari) dans le calcul de la width du viewport => éviter les cas limites à +/-20px près (à faire : vérifier sur Ipad mode portrait 768px et pages longues) Structure pages : HTML Body Page PanelHeader PanelCenter PanelBanner PanelBlocs PanelFooter + MenuHaut */ /* Généralités - à compléter */ * {box-sizing: border-box;} /** {line-height:120%;}*/ .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; } /* For mobile phones: introduire une limite à 480px ? */ [class*="col-"] { width: 100%; } @media only screen and (max-width: 599px) { .mobspe { float: left; width: 50%; } .mobspe-0 { float: left; width: 0; } } .display-mob {display:block;} /* tout à supprimer, non utilisé */ .display-tab {display:none;} .display-pc {display:none;} .display-mob-tab {display:block;} .display-tab-pc {display:none;} /* For mobiles: */ @media only screen and (min-width: 320px) { .col-320-0 {width: 0;} .col-320-3 {width: 25%;} .col-320-4 {width: 33.33%;} .col-320-6 {width: 50%;} .col-320-12 {width: 100%;} } /* For tablets: */ @media only screen and (min-width: 481px) { /*à déployer*/ .col-481-0 {width: 0;} .col-481-1 {width: 8.33%;} .col-481-2 {width: 16.66%;} .col-481-3 {width: 25%;} .col-481-4 {width: 33.33%;} .col-481-5 {width: 41.66%;} .col-481-6 {width: 50%;} .col-481-7 {width: 58.33%;} .col-481-8 {width: 66.66%;} .col-481-9 {width: 75%;} .col-481-10 {width: 83.33%;} .col-481-11 {width: 91.66%;} .col-481-12 {width: 100%;} } @media only screen and (min-width: 600px) { .col-600-0 {width: 0;} .col-600-1 {width: 8.33%;} .col-600-2 {width: 16.66%;} .col-600-3 {width: 25%;} .col-600-4 {width: 33.33%;} .col-600-5 {width: 41.66%;} .col-600-6 {width: 50%;} .col-600-7 {width: 58.33%;} .col-600-8 {width: 66.66%;} .col-600-9 {width: 75%;} .col-600-10 {width: 83.33%;} .col-600-11 {width: 91.66%;} .col-600-12 {width: 100%;} .display-mob {display:none;} .display-tab {display:block;} .display-pc {display:none;} .display-mob-tab {display:block;} .display-tab-pc {display:block;} } @media only screen and (min-width: 768px) { .col-768-1 {width: 8.33%;} .col-768-2 {width: 16.66%;} .col-768-3 {width: 25%;} .col-768-4 {width: 33.33%;} .col-768-5 {width: 41.66%;} .col-768-6 {width: 50%;} .col-768-7 {width: 58.33%;} .col-768-8 {width: 66.66%;} .col-768-9 {width: 75%;} .col-768-10 {width: 83.33%;} .col-768-11 {width: 91.66%;} .col-768-12 {width: 100%;} .display-mob {display:none;} .display-tab {display:none;} .display-pc {display:block;} .display-mob-tab {display:none;} .display-tab-pc {display:block;} } @media only screen and (min-width: 960px) { /*surtout pour l'ipad 1024 - page besoin pure */ .col-960-0-5 {width: 6%;} .col-960-1 {width: 8.33%;} .col-960-2 {width: 16.66%;} .col-960-3 {width: 25%;} .col-960-4 {width: 33.33%;} .col-960-5 {width: 41.66%;} .col-960-5-2 {width: 46%;} .col-960-5-5 {width: 48%;} .col-960-6 {width: 50%;} .col-960-7 {width: 58.33%;} .col-960-8 {width: 66.66%;} .col-960-9 {width: 75%;} .col-960-10 {width: 83.33%;} .col-960-11 {width: 91.66%;} .col-960-12 {width: 100%;} }/* For desktop: */ @media only screen and (min-width: 1025px) { .col-1025-1 {width: 8.33%;} .col-1025-2 {width: 16.66%;} .col-1025-3 {width: 25%;} .col-1025-4 {width: 33.33%;} .col-1025-5 {width: 41.66%;} .col-1025-6 {width: 50%;} .col-1025-7 {width: 58.33%;} .col-1025-8 {width: 66.66%;} .col-1025-9 {width: 75%;} .col-1025-10 {width: 83.33%;} .col-1025-11 {width: 91.66%;} .col-1025-12 {width: 100%;} } @media only screen and (min-width: 1281px) { .col-1281-1 {width: 8.33%;} .col-1281-2 {width: 16.66%;} .col-1281-3 {width: 25%;} .col-1281-4 {width: 33.33%;} .col-1281-5 {width: 41.66%;} .col-1281-6 {width: 50%;} .col-1281-7 {width: 58.33%;} .col-1281-8 {width: 66.66%;} .col-1281-9 {width: 75%;} .col-1281-10 {width: 83.33%;} .col-1281-11 {width: 91.66%;} .col-1281-12 {width: 100%;} } @media only screen and (min-width: 1440px) { .col-1440-1 {width: 8.33%;} .col-1440-2 {width: 16.66%;} .col-1440-3 {width: 25%;} .col-1440-4 {width: 33.33%;} .col-1440-5 {width: 41.66%;} .col-1440-6 {width: 50%;} .col-1440-7 {width: 58.33%;} .col-1440-8 {width: 66.66%;} .col-1440-9 {width: 75%;} .col-1440-10 {width: 83.33%;} .col-1440-11 {width: 91.66%;} .col-1440-12 {width: 100%;} } html {background-color: #2D2D2D;} body { margin-left:0px;margin-top:0px;margin-bottom:0px;margin-right:0px; font-size:100%; font-family:"Courier New", Courier, monospace; background:#FFFFFF url(/images/bandeaubas120x120.png) repeat-x bottom; } /*body {-webkit-text-size-adjust:100%;} /* ??? */ /**/ h1 {font-size:22pt;font-weight:700;color:#2d2d2d;margin:0px;padding:0px;} h2 {font-size:16pt;font-weight:400;color:#2d2d2d;margin:0px;padding:0px;} h3 {font-size:26pt;font-weight:400;color:#ffffff;margin:0px;padding:0px;} h4 {margin: 0px;padding: 0px;} h5 {margin: 0px;padding: 0px;} h6 {margin: 0px;padding: 0px;} /**/ a:link {color:#000000; background-color:transparent; text-decoration:underline;text-decoration-style:dotted;} a:visited {color:#000000; background-color:transparent; text-decoration:underline;text-decoration-style:dotted;} a:hover {color:#2d2d2d; background-color:transparent; text-decoration:underline;font-weight:bold;text-decoration-style:solid;} a:active {color:#2d2d2d; background-color:transparent; text-decoration:underline;font-weight:bold;text-decoration-style:solid;} a {-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/} /**/ input, select, textarea {font-family:"Courier New", Courier, monospace;} input {outline:none;box-sizing:border-box;} textarea {outline:none;box-sizing:border-box;resize: none;} input[type=text], input[type=submit], input[type=password], textarea, select {border: thin solid #A9A9A9;font-size:100%;background:#FFFFFF;outline:none;border-radius:0;} /* box-sizing:content-box fait sur cssGeneral */ textarea {resize: none;} input[type=text], input[type=submit], input[type=password] {background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0))); background-image:-webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));} input[type=text]:focus, input[type=password]:focus, select:focus {border: thin solid #88B21A;} option:focus {background-color:#88B21A;} /* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: thin solid #88B21A; -webkit-text-fill-color: #2D2D2D; -webkit-box-shadow: 0 0 0px 1000px rgba(136, 178, 26, 0.3) inset; transition: background-color 5000s ease-in-out 0s; } p {margin:0px; padding:0px; line-height:100%} /*il y en a dans les pages*/ .enRouge {color:red;} /* blocs généraux */ #Page {overflow:hidden;position:relative;margin-left:auto;margin-right:auto;} #PanelCenter { display:block;overflow:hidden;position:relative; width:100%; background: #ffffff; } #PanelBanner { display:block; overflow:hidden; position:relative; border-top:thin solid #2d2d2d; border-bottom:thin solid #2d2d2d; text-transform:uppercase; } #PanelBlocs {display:block;overflow:hidden;position:relative;width:auto;margin-left:0;margin-right:0;} @media only screen and (min-width: 600px) and (max-width: 1024px) { #PanelBlocs {margin-left:0;margin-right:0;} } @media only screen and (min-width: 1025px) and (max-width: 1479px) { #PanelBlocs {margin-left:20px;margin-right:20px;} } @media only screen and (min-width: 1480px) { #PanelBlocs {max-width:1440px;margin-left:auto;margin-right:auto;} /* systématiquement ? */ } /* images bannières hautes BD et autre */ /*caseAction seulement dans compte client !*/ @media only screen and (max-width: 480px) { /*smartphones*/ #PanelBanner, .caseAction {background: url(/images/BanniereAccueil480.jpg) no-repeat center bottom;} /* center center avant partout */ /*#PanelBanner, .caseAction {background: url(/images/BanniereAccueil480.jpg) no-repeat center bottom;}*/ } @media only screen and (min-width: 481px) and (max-width: 640px) { /*tablettes à partir de 600*/ #PanelBanner, .caseAction {background: url(/images/BanniereAccueil640.jpg) no-repeat center bottom;} /*#PanelBanner, .caseAction {background: url(/images/BanniereAccueil640.jpg) no-repeat center bottom;}*/ } @media only screen and (min-width: 641px) and (max-width: 767px) { #PanelBanner, .caseAction {background: url(/images/BanniereAccueil768.jpg) no-repeat center bottom;} } @media only screen and (min-width: 768px) and (max-width: 1024px) { #PanelBanner, .caseAction {background: url(/images/BanniereAccueil1024.jpg) no-repeat center bottom;} } @media only screen and (min-width: 1025px) and (max-width: 1280px) { #PanelBanner {background: url(/images/BanniereAccueil1280.jpg) no-repeat center bottom;} } @media only screen and (min-width: 1281px) { #PanelBanner {background: url(/images/BanniereAccueil.jpg) no-repeat center bottom, url(/images/BanniereAccueilRepeat.jpg) repeat-x center;} } /* images bannières hautes HD */ /* nombreux smartphone 360x640 - samsung, sony */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 480px), only screen and ( min--moz-device-pixel-ratio: 1.5) and (max-width: 480px), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and (max-width: 480px), only screen and ( min-device-pixel-ratio: 1.5) and (max-width: 480px), only screen and ( min-resolution: 144dpi) and (max-width: 480px), only screen and ( min-resolution: 1.5dppx) and (max-width: 480px) { *#PanelBanner, .caseAction {background: url(/images/BanniereAccueil480HteRes.jpg) no-repeat center bottom/auto 240px;} /*#PanelBanner, .caseAction {background: url(/images/BanniereAccueil480HteRes.jpg) no-repeat center bottom/auto 240px;}*/ } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 481px) and (max-width: 640px), only screen and ( min--moz-device-pixel-ratio: 1.5) and (min-width: 481px) and (max-width: 640px), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and (min-width: 481px) and (max-width: 640px), only screen and ( min-device-pixel-ratio: 1.5) and (min-width: 481px) and (max-width: 640px), only screen and ( min-resolution: 144dpi) and (min-width: 481px) and (max-width: 640px), only screen and ( min-resolution: 1.5dppx) and (min-width: 481px) and (max-width: 640px) { *#PanelBanner, .caseAction {background: url(/images/BanniereAccueil640HteRes.jpg) no-repeat center bottom/auto 240px;} /*#PanelBanner, .caseAction {background: url(/images/BanniereAccueil640HteRes.jpg) no-repeat center bottom/auto 240px;}*/ } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 641px) and (max-width: 767px), only screen and ( min--moz-device-pixel-ratio: 1.5) and (min-width: 641px) and (max-width: 767px), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and (min-width: 641px) and (max-width: 767px), only screen and ( min-device-pixel-ratio: 1.5) and (min-width: 641px) and (max-width: 767px), only screen and ( min-resolution: 144dpi) and (min-width: 641px) and (max-width: 767px), only screen and ( min-resolution: 1.5dppx) and (min-width: 641px) and (max-width: 767px) { #PanelBanner, .caseAction {background: url(/images/BanniereAccueil768HteRes.jpg) no-repeat center bottom/auto 240px;} } /* tablettes 768x1024 - ipad... */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 768px) and (max-width: 1024px), only screen and ( min--moz-device-pixel-ratio: 1.5) and (min-width: 768px) and (max-width: 1024px), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and (min-width: 768px) and (max-width: 1024px), only screen and ( min-device-pixel-ratio: 1.5) and (min-width: 768px) and (max-width: 1024px), only screen and ( min-resolution: 144dpi) and (min-width: 768px) and (max-width: 1024px), only screen and ( min-resolution: 1.5dppx) and (min-width: 768px) and (max-width: 1024px) { #PanelBanner, .caseAction {background: url(/images/BanniereAccueil1024HteRes.jpg) no-repeat center bottom/auto 240px} } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1025px) and (max-width: 1280px), only screen and ( min--moz-device-pixel-ratio: 1.5) and (min-width: 1025px) and (max-width: 1280px), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and (min-width: 1025px) and (max-width: 1280px), only screen and ( min-device-pixel-ratio: 1.5) and (min-width: 1025px) and (max-width: 1280px), only screen and ( min-resolution: 144dpi) and (min-width: 1025px) and (max-width: 1280px), only screen and ( min-resolution: 1.5dppx) and (min-width: 1025px) and (max-width: 1280px) { #PanelBanner {background: url(/images/BanniereAccueil1280HteRes.jpg) no-repeat center bottom/auto 240px} } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1281px), only screen and ( min--moz-device-pixel-ratio: 1.5) and (min-width: 1281px), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and (min-width: 1281px), only screen and ( min-device-pixel-ratio: 1.5) and (min-width: 1281px), only screen and ( min-resolution: 144dpi) and (min-width: 1281px), only screen and ( min-resolution: 1.5dppx) and (min-width: 1281px) { #PanelBanner {background: url(/images/BanniereAccueilHteRes.jpg) no-repeat center bottom/auto 240px, url(/images/BanniereAccueilRepeatHteRes.jpg) repeat-x center/auto 240px;} } /* @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 768px), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { } */ /* Cartouche Haut */ /* conteneur */ #PanelHeader {display:block;overflow:hidden;position:relative;width:100%;} @media only screen and (min-width: 768px) { #PanelHeader {display:block;overflow:hidden;position:relative;width:100%;height:120px;} } /* éventuel bandeau couleur haut */ #BandeauCouleurHaut {display:block;position:absolute;top:0;left:0;height:100%;width:10px;} @media only screen and (min-width: 768px) { #BandeauCouleurHaut {width:16px;} } /* logo */ #LogoGeneral {display:block;position:relative;margin:20px auto;width:40%;min-width:100px;max-width:240px;cursor:pointer;} #LogoGeneral {-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/} #imLogoGeneral {width:100%;height:auto;border:0;} @media only screen and (min-width: 300px) { #LogoGeneral {display:block;position:relative;margin:13px auto;width:40%;min-width:140px;max-width:240px;cursor:pointer;} } @media only screen and (min-width: 768px) { #LogoGeneral {display:block;position:relative;margin-top:13px;margin-left:24px;width:240px;height:78px;cursor:pointer;} } @media only screen and (min-width: 1025px) { /* ? */ #LogoGeneral {display:block;position:relative;margin-top:21px;margin-left:24px;width:240px;height:78px;cursor:pointer;} } /* panier */ #ImPanier {display:none;position:absolute;top:10px;right:10px;width:50px;height:30px;cursor:pointer;} #ImPanier {-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/} #PanierHautNb {position:absolute;top:10px;right:5px;color:#000000;font-size:100%} #PanierHautPanier {position:absolute;top:10px;right:65px;font-size:100%;color:#000000;} #PanierHautImage {position:absolute;top:3px;right:13px;height:25px;width:25px;background: transparent url(/images/panier.png) no-repeat 0px 0px/100% 100%;} @media only screen and (min-width: 600px) { #ImPanier {width:150px;} #PanierHautImage {position:absolute;top:3px;right:28px;height:25px;width:25px;background: transparent url(/images/panier.png) no-repeat 0px 0px/100% 100%;} } .no-touch #ImPanier:hover #PanierHautPanier, .no-touch #ImPanier:hover #PanierHautNb{color:#88B21A;} .no-touch #ImPanier:active #PanierHautPanier, .no-touch #ImPanier:hover #PanierHautNb{color:#88B21A;} .no-touch #ImPanier:hover #PanierHautImage {background-image:url(/images/panierinv.png);} .no-touch #ImPanier:active #PanierHautImage {background-image:url(/images/panierinv.png);} /* infoImportante */ #PanelInfoImportante { display:block;overflow:hidden;position:relative; width:100%;border-top:thin solid #2d2d2d; } #PanelInfoImportante table {width:100%;min-height:30px;} #PanelInfoImportante td {padding:3px 0px;vertical-align:middle;font-size:100%;font-style:italic;font-weight:bold;color:#88B21A;text-align:center;font-size:80%;line-height:105%;} @media only screen and (min-width: 768px) { #PanelInfoImportante td {font-size:90%;} } @media only screen and (min-width: 1025px) { #PanelInfoImportante td {font-size:100%;} } /* Cartouche Bas */ #PanelFooter {display:block;overflow:hidden;position:relative;width:100%;min-height:240px;padding-top:15px;padding-bottom:15px;background:#2d2d2d;} /* à faire - positions à homogénéiser : dans PanelBlocs ou au même niveau que Panelcenter ?*/ #TextFooterStd {display:block;position:absolute;left:5px;top:3px;height:40px;color:#ffffff;font-size:80%;font-style:italic} /* pour menus standard */ /* Menu Bas */ /**/ #ConteneurMenuBasLogo {display:block;position:relative;width:220px;height:50px;margin: 0 auto 10px auto;} .MenuBasLogo {display:block;position:absolute;top:0;cursor:pointer;width:25%;height:50px;background: no-repeat center center/40px 40px;} .MenuBasLogo {-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/} #MenuBasFB {left:0;background-image:url(/images/icon-facebook-dark.png);} #MenuBasInsta {left:25%;background-image:url(/images/icon-instagram-dark.png);} #MenuBasPin {left:50%;background-image:url(/images/icon-pinterest-dark.png);} #MenuBasLogoContact {left:75%;background-image:url(/images/icon-email-dark.png);} .no-touch #MenuBasFB:hover, .no-touch #MenuBasFB:active {background-image:url(/images/icon-facebook-light.png);} .no-touch #MenuBasInsta:hover, .no-touch #MenuBasInsta:active {background-image:url(/images/icon-instagram-light.png);} .no-touch #MenuBasPin:hover, .no-touch #MenuBasPin:active {background-image:url(/images/icon-pinterest-light.png);} .no-touch #MenuBasLogoContact:hover, .no-touch #MenuBasLogoContact:active {background-image:url(/images/icon-email-light.png);} /**/ #ConteneurMenuBasValeurs { display:block;position:relative;width:220px;height:152px;margin: 0 auto 10px auto; padding-top:5px; padding-bottom:15px; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; font-size:80%;color:#FFFFFF; } #titreMenuBasValeurs {display:block;position:absolute;width:100%;height:25px;text-align:center;top:6px;left:0;font-style:italic;} .MenuBasValeurs, .trMenuBasValeurs {display:block;position:absolute;cursor:pointer;width:25%;height:50px;background: no-repeat center center/40px 40px;} .MenuBasValeurs, .trMenuBasValeurs {-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/} .trMenuBasValeurs {display:none;} .lienInvisible {display:none;} #textMenusBasTitre {display:inline;} #MenuBasUL, #MenuBasNA, #MenuBasMI, #MenuBasFR, #trMenuBasUL, #trMenuBasNA, #trMenuBasMI, #trMenuBasFR {top:26px;} #MenuBasRE, #MenuBasTP, #MenuBasTC, #MenuBasEC, #trMenuBasRE, #trMenuBasTP, #trMenuBasTC, #trMenuBasEC {top:86px;} #MenuBasUL {background-image:url(/images/logosValeursUltraNB-dark.png);} #trMenuBasUL {background-image:url(/images/logosValeursUltraVertB.png);} #MenuBasUL, #trMenuBasUL {left:0;} #MenuBasNA {background-image:url(/images/logosValeursNatureNB-dark.png);} #trMenuBasNA {background-image:url(/images/logosValeursNatureVertB.png);} #MenuBasNA, #trMenuBasNA {left:25%;} #MenuBasMI {background-image:url(/images/logosValeursMinimalNB-dark.png);} #trMenuBasMI {background-image:url(/images/logosValeursMinimalVertB.png);} #MenuBasMI, #trMenuBasMI {left:50%;} #MenuBasFR {background-image:url(/images/logosValeursFraisNB-dark.png);} #trMenuBasFR {background-image:url(/images/logosValeursFraisVertB.png);} #MenuBasFR, #trMenuBasFR {left:75%;} #MenuBasRE {background-image:url(/images/logosValeursResponsableNB-dark.png);} #trMenuBasRE {background-image:url(/images/logosValeursResponsableVertB.png);} #MenuBasRE, #trMenuBasRE {left:0;} #MenuBasTP {background-image:url(/images/logosValeursTransparenceNB-dark.png);} #trMenuBasTP {background-image:url(/images/logosValeursTransparenceVertB.png);} #MenuBasTP, #trMenuBasTP {left:25%;} #MenuBasTC {background-image:url(/images/logosValeursTraceNB-dark.png);} #trMenuBasTC {background-image:url(/images/logosValeursTraceVertB.png);} #MenuBasTC, #trMenuBasTC {left:50%;} #MenuBasEC {background-image:url(/images/logosValeursEcouteNB-dark.png);} #trMenuBasEC {background-image:url(/images/logosValeursEcouteVertB.png);} #MenuBasEC, #trMenuBasEC {left:75%;} .no-touch #MenuBasUL:hover, .no-touch #MenuBasUL:active {background-image:url(/images/logosValeursUltraNB-light.png);} .no-touch #MenuBasNA:hover, .no-touch #MenuBasNA:active {background-image:url(/images/logosValeursNatureNB-light.png);} .no-touch #MenuBasMI:hover, .no-touch #MenuBasMI:active {background-image:url(/images/logosValeursMinimalNB-light.png);} .no-touch #MenuBasFR:hover, .no-touch #MenuBasFR:active {background-image:url(/images/logosValeursFraisNB-light.png);} .no-touch #MenuBasRE:hover, .no-touch #MenuBasRE:active {background-image:url(/images/logosValeursResponsableNB-light.png);} .no-touch #MenuBasTP:hover, .no-touch #MenuBasTP:active {background-image:url(/images/logosValeursTransparenceNB-light.png);} .no-touch #MenuBasTC:hover, .no-touch #MenuBasTC:active {background-image:url(/images/logosValeursTraceNB-light.png);} .no-touch #MenuBasEC:hover, .no-touch #MenuBasEC:active {background-image:url(/images/logosValeursEcouteNB-light.png);} /**/ .MenuBas {position:relative;padding-top:10px;padding-bottom:10px;font-size:80%;color:#FFFFFF;cursor:pointer;text-align:center;font-weight:bold;width:100%;} .MenuBas {-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/} .no-touch div.MenuBas:hover {color:#88B21A} .no-touch div.MenuBas:active {color:#88B21A} #MenuBasContact {display:none;} /**/ @media only screen and (min-width: 641px) { #ConteneurMenuBasLogo {display:block;position:absolute;width:220px;top:10px;left:5px;} #ConteneurMenuBasValeurs {display:block;position:absolute;top:70px;left:5px;border-bottom:none;} #titreMenuBasValeurs {text-align:left;padding-left:10px;top:123px;} #MenuBasUL, #MenuBasNA, #MenuBasMI, #MenuBasFR, #trMenuBasUL, #trMenuBasNA, #trMenuBasMI, #trMenuBasFR {top:11px;} #MenuBasRE, #MenuBasTP, #MenuBasTC, #MenuBasEC, #trMenuBasRE, #trMenuBasTP, #trMenuBasTC, #trMenuBasEC {top:66px;} #MenuBasLogoContact {display:none;} .MenuBas {position:absolute;width:140px} #MenuBasContact {display:block;right:280px;} #MenuBasCGV {right:140px;} #MenuBasML {right:0px;} } @media only screen and (min-width: 1025px) { /*#PanelFooter {min-height:180px;}*/ #ConteneurMenuBasLogo {display:block;position:absolute;width:220px;top:10px;left:10px;} #ConteneurMenuBasValeurs {display:block;position:absolute;width:440px;height:82px;top:70px;left:10px;border-bottom:none;} #titreMenuBasValeurs {text-align:left;padding-left:10px;top:68px;} .MenuBasValeurs, .trMenuBasValeurs {width:12.5%;} #MenuBasUL, #MenuBasNA, #MenuBasMI, #MenuBasFR, #MenuBasRE, #MenuBasTP, #MenuBasTC, #MenuBasEC, #trMenuBasUL, #trMenuBasNA, #trMenuBasMI, #trMenuBasFR, #trMenuBasRE, #trMenuBasTP, #trMenuBasTC, #trMenuBasEC {top:11px;} #MenuBasUL, #trMenuBasUL{left:0;} #MenuBasNA, #trMenuBasNA{left:12.5%;} #MenuBasMI, #trMenuBasMI{left:25%;} #MenuBasFR, #trMenuBasFR{left:37.5%;} #MenuBasRE, #trMenuBasRE {left:50%;} #MenuBasTP, #trMenuBasTP {left:62.5%;} #MenuBasTC, #trMenuBasTC {left:75%;} #MenuBasEC, #trMenuBasEC {left:87.5%;} #MenuBasLogoContact {display:none;} .MenuBas {width:160px} #MenuBasContact {display:block;right:320px;} #MenuBasCGV {right:160px;} #MenuBasML {right:0px;} } @media only screen and (min-width: 1280px) { #ConteneurMenuBasLogo {display:block;position:absolute;width:220px;top:10px;left:10px;} #ConteneurMenuBasValeurs {display:block;position:absolute;width:440px;height:82px;top:10px;left:270px;border:none;padding:0} #titreMenuBasValeurs {top:57px;} #MenuBasUL, #MenuBasNA, #MenuBasMI, #MenuBasFR, #MenuBasRE, #MenuBasTP, #MenuBasTC, #MenuBasEC, #trMenuBasUL, #trMenuBasNA, #trMenuBasMI, #trMenuBasFR, #trMenuBasRE, #trMenuBasTP, #trMenuBasTC, #trMenuBasEC {top:0;} } .MenuBas>a:link {color:#ffffff; background-color:transparent; text-decoration:none;font-weight:bold;} .MenuBas>a:visited {color:#ffffff; background-color:transparent; text-decoration:none;font-weight:bold;} .MenuBas>a:hover {color:#88B21A; background-color:transparent; text-decoration:none;font-weight:bold;} .MenuBas>a:active {color:#88B21A; background-color:transparent; text-decoration:none;font-weight:bold;} /* Menu Haut */ #ConteneurMenuHaut{overflow:visible;position:absolute;top:90px;left:0px;width:100%;height:30px;} /* petit menu Haut */ #LogoMenu {display:block;position:relative;margin:13px 0 0 15px;width:40px;height:40px;background: transparent url(/images/logoMenu-noir.png) no-repeat 0px 0px/100% 100%;} #MenuRamasse {position:absolute;overflow:visible;top:0;left:0;width:100%;height:0;} /*.no-touch #LogoMenu:hover {background-image:url(/images/logoMenu-vert.png)} */ .no-touch #LogoMenu:active {background-image:url(/images/logoMenu-vert.png)} /* grand menu */ .MenuHaut {display:block;position:absolute;top:0px;height:30px;line-height:30px;font-size:100%;color:#2D2D2D;cursor:pointer;text-align:center;font-weight:bold;} .DropDown {display:block;position:absolute;top:0px;overflow:visible;} .no-touch div.MenuHaut:hover {color:#88B21A} .no-touch div.MenuHaut:active {color:#88B21A} .inDropDown {position:relative;height:30px;line-height:30px;font-size:100%;width:100%;color:#2D2D2D;cursor:auto;text-align:center;font-weight:bold;} .no-touch div.inDropDown:hover {color:#88B21A} .no-touch div.inDropDown:active {color:#88B21A} #DropDownCosmetiquesRamasse, #DropDownLeConceptRamasse {position:relative;overflow:visible;} .ConteneurDropDown {display:none;position:relative;background-color:#FFFFFF;border:thin solid #2D2D2D;width:225px;z-index:1000;} #ConteneurMenuRamasse {position:absolute;top:0;left:0;width:100%;border-left:none;border-right:none;padding-top:65px;padding-bottom:20px;background:#ebebeb;border-radius:10px;border-top-left-radius:0px;border-top-right-radius:0px;} /* petit menu */ #imageMenuRamasse {position:absolute;display:none;right:5%;top:calc(50% - 15px);height:80px;width:80px;background:#ebebeb url(/images/logoFlaconPipette.png) no-repeat center center/contain;} #TitreMenuRamasse {display:none;position:absolute;top:15px;right:5%;width:80px;padding:2px 0;text-align:center;font-size:140%;color:#ffffff;background:#808080;border-radius:5px;} @media only screen and (min-width: 300px) { #imageMenuRamasse {top:calc(50% - 35px);height:120px;width:120px;} #TitreMenuRamasse {width:120px;} } @media only screen and (min-width: 481px) { #imageMenuRamasse {top:calc(50% - 65px);height:180px;width:180px;background-image:url(/images/logoFlaconPipette-481.png);} #TitreMenuRamasse {width:120px;right:calc(5% + 30px);} } @media only screen and (min-width: 1025px) { #ConteneurMenuRamasse {position:absolute;top:0;left:0;width:100%;}/* petit menu inutile ! */ } #ConteneurDropDownRamasse, #ConteneurDropDownRamasse2 {position:absolute;top:-101px;left:115px;width:0px; z-index:1000;border-radius:5px;} /* width animated à 240px */ /*#ConteneurDropDownRamasse2 {top:-56px;}*/ .no-touch .DropDown:hover > .ConteneurDropDown {display:block;} .no-touch .DropDownRamasse:hover > .ConteneurDropDown {}/* petit menu géré par ontouch dorénavant - mais rare */ .no-touch .DropDownRamasse:hover > #LogoMenu {background-image:url(/images/logoMenu-vert.png)}/* petit menu */ .MenuHautSecondaire {display:block;position:relative;height:35px;line-height:35px;font-size:100%;color:#000000;cursor:pointer;text-align:left;font-weight:normal;padding:0 15px;} .inDropDownRamasse {display:block;position:relative;height:35px;line-height:35px;font-size:100%;color:#000000;cursor:pointer;text-align:left;font-weight:normal;padding:0 15px;} .no-touch div.inDropDownRamasse:hover {color:#88B21A !important;} /*!important sinon hover écrasé par js*/ .no-touch div.inDropDownRamasse:active {color:#88B21A !important;} .interval {margin-top:10px;margin-bottom:10px;} #ConteneurMenuRamasse > .MenuHautSecondaire, #ConteneurMenuRamasse2 > .MenuHautSecondaire, #MenuHautCosmetiquesRamasse, #MenuHautLeConceptRamasse, #ConteneurDropDownRamasse > .MenuHautSecondaire, #ConteneurDropDownRamasse2 > .MenuHautSecondaire {padding:0 5px;} @media only screen and (min-width: 400px) { #ConteneurMenuRamasse > .MenuHautSecondaire, #ConteneurMenuRamasse2 > .MenuHautSecondaire, #MenuHautCosmetiquesRamasse, #MenuHautLeConceptRamasse, #ConteneurDropDownRamasse > .MenuHautSecondaire, #ConteneurDropDownRamasse2 > .MenuHautSecondaire {padding:0 15px;} #ConteneurDropDownRamasse, #ConteneurDropDownRamasse2 {position:absolute;left:135px;width:0; z-index:1000;} /* width animated à 240px */ } @media only screen and (min-width: 600px) { #ConteneurMenuRamasse > .MenuHautSecondaire, #ConteneurMenuRamasse2 > .MenuHautSecondaire, #MenuHautCosmetiquesRamasse, #MenuHautLeConceptRamasse, #ConteneurDropDownRamasse > .MenuHautSecondaire, #ConteneurDropDownRamasse2 > .MenuHautSecondaire {padding:0 15px;} #ConteneurDropDownRamasse, #ConteneurDropDownRamasse2 {position:absolute;left:180px;width:0; z-index:1000;} /* width animated à 240px */ } #MenuHautAccueilRamasse>a, #MenuHautVosBesoinsRamasse>a, #MenuHautCosmetiquesRamasse>span, #MenuHautLeConceptRamasse>span, #MenuHautVotreCompteRamasse>a, #MenuHautSecondaireCORamasse>a, #MenuHautSecondaireINRamasse>a, #MenuHautSecondaireFARamasse>a, #MenuHautSecondaireVARamasse>a, #MenuHautSecondaireCJRamasse>a, #MenuHautSecondaireCNRamasse>a, #MenuHautSecondaireCYRamasse>a, #MenuHautSecondaireLCRamasse>a, #MenuHautSecondaireCCRamasse>a {display:none;} @media only screen and (min-width: 768px) { .colmenu {width:140px;} .colmenu1 {right:0px;} .colmenu2 {right:140px;} .colmenu3 {right:280px;} .colmenu4 {right:420px;} .colmenu5 {right:560px;} } @media only screen and (min-width: 1300px) { .colmenu {width:160px;} .colmenu1 {right:0px;} .colmenu2 {right:160px;} .colmenu3 {right:320px;} .colmenu4 {right:480px;} .colmenu5 {right:640px;} .ConteneurDropDown {width:245px;} .MenuHautSecondaire, .inDropDownRamasse {padding-left:25px;padding-right:25px;} } .no-touch div.MenuHautSecondaire:hover {color:#88B21A} .no-touch div.MenuHautSecondaire:active {color:#88B21A} .no-touch .logoFermerTouch {display:none;} .logoFermerTouch {position:absolute;width:35px;height:35px;top:12px;left:12px;background: transparent url(/images/fermernoirinv.png) no-repeat 0px 0px/35px 35px;cursor:pointer;} #fermeMenuRamasse {display:none;} .MenuHautSecondaire>a:link {color:#000000; background-color:transparent; text-decoration:none;font-weight:normal;} .MenuHautSecondaire>a:visited {color:#000000; background-color:transparent; text-decoration:none;font-weight:normal;} .MenuHautSecondaire>a:hover {color:#88B21A; background-color:transparent; text-decoration:none;font-weight:normal;} .MenuHautSecondaire>a:active {color:#88B21A; background-color:transparent; text-decoration:none;font-weight:normal;} .MenuHaut>a:link {color:#2d2d2d; background-color:transparent; text-decoration:none;font-weight:bold;} .MenuHaut>a:visited {color:#2d2d2d; background-color:transparent; text-decoration:none;font-weight:bold;} .MenuHaut>a:hover {color:#88B21A; background-color:transparent; text-decoration:none;font-weight:bold;} .MenuHaut>a:active {color:#88B21A; background-color:transparent; text-decoration:none;font-weight:bold;} /* Boites d'information */ div.InfosBox {display:none;overflow:hidden;position:absolute;top:-1px;left:0px;width:100%;background:#FFFFFF;border:thin solid #2D2D2D;height:auto;font-size:90%;z-index:500;} /*display:none; ne fonctionne pas ici!*/ div.titreBoiteInfos {padding:18px 10px 0px 12px;font-size:100%;font-weight:bold;} @media only screen and (min-width: 600px) { div.InfosBox {font-size:100%;} div.titreBoiteInfos {font-size:110%;} } @media only screen and (min-width: 960px) { div.InfosBox {width:700px;font-size:100%;} div.titreBoiteInfos {font-size:120%;} } div.important {padding:15px 10px 0px 15px;font-weight:bold;} ul.BoiteInfos {padding:5px 10px 55px 28px;list-style-position:outside;} li.BoiteInfos {padding:0px 0px 15px 5px;} /* boutons de fermeture haut sur fond coloré et bas sur fond clair */ .logoFermer { position:absolute;width:35px;height:35px;bottom:12px;right:12px; background: transparent url(/images/fermernoirinv.png) no-repeat 0px 0px/35px 35px; cursor:pointer; -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/ } .no-touch .logoFermer:hover {background-image:url(/images/fermerrouge.png)} .no-touch .logoFermer:active {background-image:url(/images/fermerrouge.png)} .logoFermerHaut { position:absolute;width:35px;height:35px;top:12px;right:12px; background: transparent url(/images/fermerblanc.png) no-repeat 0px 0px/35px 35px; cursor:pointer; -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/ } .no-touch div.logoFermerHaut:hover {background-image:url(/images/fermerrouge.png)} .no-touch div.logoFermerHaut:active {background-image:url(/images/fermerblancinv.png)} .logoFermerHautNoir { position:absolute;width:35px;height:35px;top:12px;right:12px; background: transparent url(/images/fermernoirinv.png) no-repeat 0px 0px/35px 35px; cursor:pointer; -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/ } .no-touch .logoFermerHautNoir:hover {background-image:url(/images/fermerrouge.png)} .no-touch .logoFermerHautNoir:active {background-image:url(/images/fermerrouge.png)} /* autres classes génériques - apparition/disparition de texte en fonction taille (en partant du gaut!) */ span.TexteApparaitPourPetit {display:inline;} div.TexteApparaitPourPetit {display:block;} /*sliders*/ span.TexteApparaitPour960 {display:inline;} div.TexteApparaitPour960 {display:block;} /*sliders*/ span.TexteApparaitPour480 {display:inline;} span.TexteApparaitPour320 {display:inline;} span.TexteApparaitPour360 {display:inline;} span.TexteApparaitPour600 {display:inline;} span.TexteApparaitPour768 {display:inline;} span.TexteApparaitPour1025 {display:inline;} span.TexteApparaitPour1150 {display:inline;} /*batard pour commande!*/ span.TexteApparaitPour1281 {display:inline;} span.TexteInutilePour260, span.TexteInutilePour320, span.TexteInutilePour360, span.TexteInutile, span.TexteInutilePour600, span.TexteInutilePour768, span.TexteInutilePour481, span.TexteInutilePour960, span.TexteInutilePourLarge, span.TexteInutilePour1440, span.TexteInutilePourPetit {display:none;} div.TexteInutilePourPetit, div.TexteInutilePour960 {display:none;} /*sliders*/ @media only screen and (min-width: 260px) { /*ultra petits écrans - ex extérieur samsung pliable!*/ span.TexteInutilePour260 {display:inline;} } @media only screen and (min-width: 320px) { /*très petits écrans*/ span.TexteInutilePour320 {display:inline;} span.TexteApparaitPour320 {display:none;} } @media only screen and (min-width: 360px) { /*très petits écrans*/ span.TexteInutilePour360 {display:inline;} span.TexteApparaitPour360 {display:none;} } @media only screen and (min-width: 400px) { span.TexteInutilePourPetit {display:inline;} span.TexteApparaitPourPetit {display:none;} div.TexteInutilePourPetit {display:block;} div.TexteApparaitPourPetit {display:none;} } @media only screen and (min-width: 481px) { span.TexteInutilePour481 {display:inline;} span.TexteApparaitPour481 {display:none;} } @media only screen and (min-width: 600px) { span.TexteInutile, span.TexteInutilePourLarge {display:none;} /*inutile!*/ span.TexteInutilePour600 {display:inline;} span.TexteApparaitPour600 {display:none;} } @media only screen and (min-width: 768px) { span.TexteInutilePour768 {display:inline;} span.TexteApparaitPour768 {display:none;} } @media only screen and (min-width: 960px) { span.TexteApparaitPour960 {display:none;} div.TexteApparaitPour960 {display:none;} span.TexteInutilePour960 {display:inline;} div.TexteInutilePour960 {display:block;} } @media only screen and (min-width: 1025px) { span.TexteInutile {display:inline;} span.TexteApparaitPour1025 {display:none;} } @media only screen and (min-width: 1150px) { /*batard pour commande!*/ span.TexteApparaitPour1150 {display:none;} } @media only screen and (min-width: 1281px) { span.TexteInutilePourLarge {display:inline;} span.TexteApparaitPour1281 {display:none;} } @media only screen and (min-width: 1440px) { span.TexteInutilePour1440 {display:inline;} } /*terminaison SM ou classe agSMx : pour browser Samsung Android Chrome*/ span.agSM1{display:inline;position:relative;top:-2px;} /*utilisé en général pour boutons verts et qq titres*/ /* Pour les écrans très résolus, certaines instructions bordures thin trop fines => 0.5px (utilité vu la suite?) */ /*à partir de 3*/ @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and ( min--moz-device-pixel-ratio: 3), only screen and ( -o-min-device-pixel-ratio: 3/1), only screen and ( min-device-pixel-ratio: 3), only screen and ( min-resolution: 288dpi), only screen and ( min-resolution: 3dppx) { input[type=text], input[type=submit], input[type=password], textarea, select {border-width: 0.5px;} input[type=text]:focus, input[type=password]:focus, select:focus {border-width: 0.5px;} } /* border-thickness en fonction de la résolution - thin à supprimer ?*/ /*cas précis 1.5 - pb sur chrome avec laptop à 1280px 150%*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5) and ( max--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 1.5/1) and ( -o-max-device-pixel-ratio: 1.5/1), only screen and ( min-device-pixel-ratio: 1.5) and ( max-device-pixel-ratio: 1.5), only screen and ( min-resolution: 144dpi) and ( max-resolution: 144dpi), only screen and ( min-resolution: 1.5dppx) and ( max-resolution: 1.5dppx) { input[type=text], input[type=submit], input[type=password], textarea, select {border-width: calc(2px / 3);} input[type=text]:focus, input[type=password]:focus, select:focus {border-width: calc(2px / 3);} select:-webkit-autofill:focus {border-width: calc(2px / 3);} #PanelBanner {border-top-width: calc(2px / 3);border-bottom-width: calc(2px / 3);} #PanelInfoImportante {border-top-width: calc(2px / 3);} .ConteneurDropDown {border-width: calc(2px / 3);} div.InfosBox {top: calc(-2px / 3);border-width: calc(2px / 3);} } /*à partir de 2*/ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { input[type=text], input[type=submit], input[type=password], textarea, select {border-width: 0.5px;} input[type=text]:focus, input[type=password]:focus, select:focus {border-width: 0.5px;} select:-webkit-autofill:focus {border-width: 0.5px;} #PanelBanner {border-top-width:0.5px;border-bottom-width:0.5px;} #PanelInfoImportante {border-top-width:0.5px;} .ConteneurDropDown {border-width:0.5px;} div.InfosBox {top:-0.5px;border-width:0.5px;} } /*à partir de 3*/ @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and ( min--moz-device-pixel-ratio: 3), only screen and ( -o-min-device-pixel-ratio: 3/1), only screen and ( min-device-pixel-ratio: 3), only screen and ( min-resolution: 288dpi), only screen and ( min-resolution: 3dppx) { }