@font-face { font-family: 'Gotham'; src: url(../fonts/Gotham-Book.woff2) format('woff2'), url(../fonts/Gotham-Book.woff) format('woff'); font-weight: normal; font-display: swap }
@font-face { font-family: 'Gotham'; src: url(../fonts/Gotham-Medium.woff2) format('woff2'), url(../fonts/Gotham-Medium.woff) format('woff'); font-weight: bold; font-display: swap }
@font-face { font-family: 'Gotham'; src: url(../fonts/GothamBold.woff2) format('woff2'), url(../fonts/GothamBold.woff) format('woff'); font-weight: 900; font-display: swap }
body { margin: 0; font-family: 'Gotham', Arial; font-size: 0 }
* { box-sizing: border-box; scrollbar-color: #dfe2e9 #FFFFFF }
ul { margin: 0; padding: 0; list-style: none }
a { outline: 0; cursor: pointer; text-decoration: none }
a:focus { outline: none }
input,
select,
textarea { font-family: 'Gotham', Arial; font-weight: normal; background-color: #FFF }
:-moz-focusring {
 outline: 0
}
textarea { resize: none }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
center { margin: 0 auto; max-width: 1200px; width: 100%; text-align: left; position: relative; padding: 0 30px }
.mobile { display: none }
/***************************************************************************************************************************
* GLOBAL
***************************************************************************************************************************/

/* Header */
header { width: 100% }
header .barre { background-color: #95c11f; }
header .barre span { display: inline-block; width: 50%; vertical-align: top; font-size: 14px; font-weight: bold; color: #FFF; line-height: 40px }
header .barre .texte2 { text-align: right }
header .bandeau { height: 120px; background-color: #FFF; }
header .bandeau a,
header .bandeau span,
header .bandeau .aide,
header .bandeau .btns { display: inline-block; vertical-align: top; }
header .bandeau .logo { margin: 22.5px 60px 0 0 }
header .bandeau .logo img { height: 75px }
header .bandeau .aide { padding: 9px 12px 0 12px; height: 60px; border: 1px solid #B3CFD6; border-radius: 6px; margin: 30px 0 0 0; font-size: 16px; color: #005165 }
header .bandeau .aide img { display: inline-block; vertical-align: top; height: 34px; margin: 4px 10px 0 0 }
header .bandeau .aide strong { display: block; font-size: 18px }
header .bandeau .btns { margin-top: 40px; position: absolute; right: 20px }
header .bandeau .btns .btn { font-size: 16px; margin-left: 20px; color: #224C59; font-weight: bold; line-height: 40px; padding: 0 15px; border-radius: 6px }
header .bandeau .btns .btn img { display: inline-block; height: 20px; vertical-align: middle; margin-right: 4px }
header .bandeau .btns .connecte { line-height: 14px; padding: 12px 15px; }
header .bandeau .btns .connecte span { display: block; color: #95c11f; font-size: 13px; font-weight: normal; margin-left: 26px; line-height: 13px }
header .bandeau .btns .panier span { display: inline-block; background-color: #95c11f; text-align: center; height: 22px; width: 22px; line-height: 22px; border-radius: 22px; color: #FFF; font-weight: bold; vertical-align: middle; margin: 0 0 0 4px; font-size: 13px }
header .bandeau .btns .btn:hover { background-color: #dfedf2 }
header .bandeau .btns .btnmobile { display: none }
header .menu { background-repeat: repeat-x; text-align: center; font-weight: bold; border-bottom: 1px solid #63abdd; background-color: #90caf9; padding: 10.5px 0 10.5px 0; }
header .menu a { color: #234C5A; height: 42px; font-size: 15px; display: inline-block; vertical-align: top; line-height: 42px; padding: 0 15px; border-radius: 10px; }
header .menu a:hover { background-color: #EFF6F9 }
header .menu .active { color: #008A8B; background-color: #FFF !important }
/* Boite alertes */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(40, 55, 126, 0.4); z-index: 21 }
.modal div { box-shadow: 2px 2px 20px 0px rgba(0,0,0,0.2); position: absolute; background-color: #FFF; border-radius: 14px; max-width: 400px; padding: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center }
.modal div span { display: block; font-size: 17px; font-weight: bold }
.modal div a { margin-top: 20px; display: inline-block; line-height: 34px; border-radius: 34px; padding: 0 20px; background-color: #babace; font-size: 15px; color: #FFF; font-weight: bold; }
.modal div a:hover,
.modal div a:active { background-color: #95c11f }
/***************************************************************************************************************************
* ACCUEIL
***************************************************************************************************************************/
/* Slider */
.ligneslider { height: 500px }
.unslider { overflow: auto; margin: 0; padding: 0; width: 100%; height: 100%; position: relative }
.unslider-wrap { position: relative; height: 100% }
.unslider-wrap.unslider-carousel>li { float: left; height: 100%; background-size: cover; background-position: center; position: relative }
.unslider-wrap.unslider-carousel>li a { display: block; width: 100%; height: 100% }
.unslider li,
.unslider ol,
.unslider ul { list-style: none; margin: 0; padding: 0; border: none }
.unslider-arrow { display: none }
.unslider .prev { display: none }
.unslider .next { display: none }
.unslider-nav { position: absolute; bottom: 30px; width: 100%; height: 19px; top: auto; background-color: transparent; z-index: 2 }
.unslider-nav ol { list-style: none; text-align: center; }
.unslider-nav ol li { display: inline-block; width: 11px; height: 11px; margin: 0 4px; background: transparent; border-radius: 5px; overflow: hidden; text-indent: -999em; border: 2px solid #fff; cursor: pointer; }
.unslider-nav ol li.unslider-active { background: #008a8b; cursor: default; border-color: #008a8b }
/* Recherche */
.accueil { background: linear-gradient(180deg, rgba(144,202,249,1) 0%, rgba(255,255,255,1) 100%); padding: 80px 0 80px 0 }
.accueil h1 { text-align: center; font-size: 38px; color: #005165; margin: 0 0 45px 0 }
.accueil .recherche { text-align: center }
.accueil .recherche div { text-align: center; background-color: #FFF; display: inline-block; height: 60px; border: 1px solid #eaf3f6; border-radius: 30px; margin: 0 auto; padding: 4px; transition: border-color 0.15s ease-in; width: 700px; font-size: 0; position: relative }
.accueil .recherche .active { border-color: #008a8b }
.accueil .recherche div input { border: 0; font-size: 18px; height: 50px; border-radius: 50px; padding: 0 20px; vertical-align: top; width: calc(100% - 50px) }
.accueil .recherche div .bouton { display: inline-block; background-color: #95c11f; height: 50px; width: 50px; border-radius: 50px; vertical-align: top; transition: background-color 0.15s ease-in; position: relative }
.accueil .recherche div .bouton:hover { background-color: #005165 }
.accueil .recherche div .bouton img { height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.accueil .recherche .suggestions,
.recherchepage .suggestions { display: none; position: absolute; z-index: 10; top: 58px; left: 0; right: 50px; background-color: #FFF; padding: 20px 20px 5px 20px; text-align: left; border: 1px solid #008a8b; border-radius: 20px }
.accueil .recherche .suggestions li,
.recherchepage .suggestions li { margin-bottom: 15px }
.accueil .recherche .suggestions span,
.recherchepage .suggestions span { display: inline-block; vertical-align: top }
.accueil .recherche .suggestions strong,
.recherchepage .suggestions strong { display: block }
.accueil .recherche .suggestions .image,
.recherchepage .suggestions .image { width: 60px; height: 60px; border: 1px solid #E8E8E8; border-radius: 6px; background-size: cover; background-position: center; background-origin: content-box; padding: 14px; background-repeat: no-repeat; margin-right: 10px }
.accueil .recherche .suggestions .titre,
.recherchepage .suggestions .titre { font-size: 14px; width: calc(100% - 70px - 120px); margin-top: 10px }
.accueil .recherche .suggestions .titre a,
.recherchepage .suggestions .titre a { color: #000 }
.accueil .recherche .suggestions .titre a:hover,
.recherchepage .suggestions .titre a:hover { color: #008a8b }
.accueil .recherche .suggestions .titre strong,
.recherchepage .suggestions .titre strong { font-size: 16px; margin-bottom: 4px }
.accueil .recherche .suggestions .prix,
.recherchepage .suggestions .prix { font-size: 12px; width: 120px; color: #00B285; margin-top: 12.5px }
.accueil .recherche .suggestions .prix strong,
.recherchepage .suggestions .prix strong { display: block; font-size: 18px }
.accueil .recherche .suggestions .plus,
.recherchepage .suggestions .plus { font-size: 16px; text-align: center }
.accueil .recherche .suggestions .plus a,
.recherchepage .suggestions .plus a { color: #999 }
/* Cat�gories */
.accueil .categories { text-align: center; margin-top: 60px }
.accueil .categories ul { display: inline-block; vertical-align: top; width: 230px; margin: 0 28px }
.accueil .categories ul .image { display: inline-block; width: 170px; height: 170px; border-radius: 5px; border: 1px solid #B3CFD6; background-size: cover; background-position: center; transition: border-color 0.15s ease-in }
.accueil .categories ul .image:hover { border-color: #008a8b }
.accueil .categories ul h2 { font-size: 17px; margin-top: 12px }
.accueil .categories ul h2 a { color: #005165 }
/* nos-produits ventes */
.nos-produits { margin-bottom: 80px }
.nos-produits .titre { display: block; font-size: 28px; font-weight: bold; margin-bottom: 40px }
.nos-produits ul,
.produits .articles ul { display: inline-grid; width: calc(25% - 22.5px); margin: 0 30px 50px 0 }
.nos-produits ul:nth-child(5),
.nos-produits ul:nth-child(9) { margin-right: 0 }
.nos-produits ul .vign,
.special .prod .vign,
.produits .articles ul .vign { width: 100%; border: 1px solid #E8E8E8; border-radius: 6px; background-size: contain; background-position: center; background-origin: content-box; background-repeat: no-repeat; padding: 50px; height: 275px; position: relative; margin-bottom: 20px; transition: border-color 0.15s ease-in }
.nos-produits ul .vign:hover,
.produits .articles .vign:hover { border-color: #95c11f }
.nos-produits ul .vign a,
.special .prod .vign a,
.produits .articles .vign a { display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0 }
.nos-produits ul .vign .promo,
.special .prod .vign .promo,
.produits .articles .vign .promo { position: absolute; top: 15px; left: 15px; background-color: #EA0029; display: inline-block; line-height: 22px; padding: 0 6px; color: #FFF; font-weight: bold; font-size: 12px; border-radius: 4px }
.nos-produits ul .vign .stock,
.produits .articles .vign .stock { position: absolute; bottom: 10px; right: 15px; color: #00B285; font-size: 14px }
.nos-produits ul .vign .stock strong,
.produits .articles .vign .stock strong { font-size: 30px; display: inline-block; vertical-align: middle; font-weight: normal }
.nos-produits ul .nom h3,
.special .prod .nom h3,
.produits .articles .nom h3 { margin: 0 0 5px 0 }
.nos-produits ul .nom a,
.special .prod .nom a,
.produits .articles .nom a { font-size: 17px; color: #000 }
.nos-produits ul .nom a:hover,
.special .prod .nom a:hover,
.produits .articles .nom a:hover { text-decoration: underline }
.nos-produits ul .cond,
.special .prod .cond,
.produits .articles .cond { font-size: 15px; margin-bottom: 10px }
.nos-produits ul .prix,
.special .prod .prix,
.produits .articles .prix { font-size: 13px; margin-bottom: 6px }
.nos-produits ul .prix strong,
.special .prod .prix strong,
.produits .articles .prix strong { font-size: 19px; font-weight: 900; margin-right: 10px }
.nos-produits ul .avis img,
.produits .articles .avis img { height: 15px }
/* Activités */
.special { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(223,237,242,1) 100%); padding: 0 0 80px 0 }
.special .titre { display: block; font-size: 28px; font-weight: bold; margin-bottom: 40px }
.special .rayon,
.special .slider { display: inline-block; vertical-align: top; height: 410px; background-color: #FFF; border: 1px solid #E8E8E8; position: relative }
.special .rayon { width: calc(25% - 22.5px); border-top-left-radius: 9px; border-bottom-left-radius: 9px }
.special .rayon h2 { font-size: 21px; height: 100px; border-bottom: 1px solid #E8E8E8; padding: 25px 20px 0 25px; margin: 0 }
.special .rayon h2 a { color: #005165 }
.special .rayon h2 a:hover { text-decoration: underline }
.special .rayon .illus { position: relative; background-size: cover; background-position: center; height: 308px; border-bottom-left-radius: 9px }
.special .rayon .illus a { position: absolute; display: inline-block; border-radius: 20px; border: 1px solid #008A8B; background-color: #FFF; font-size: 15px; font-weight: bold; color: #008A8B; line-height: 36px; bottom: 25px; left: 50%; transform: translateX(-50%); padding: 0 10px }
.special .rayon .illus a:hover { color: #FFF; background-color: #008A8B }
/* Sliders */
.special .slider { width: calc(25% + 7.5px); border-left: 0; border-top-right-radius: 9px; border-bottom-right-radius: 9px }
.special .slider nav { position: absolute; bottom: 25px; text-align: center; left: 0; right: 0 }
.special .slider nav a { display: inline-block; width: 8px; height: 8px; border-radius: 8px; background-color: #CCC; margin: 0 4px }
.special .slider nav a:hover,
.special .slider nav .active { background-color: #999 }
.special .prod { display: none; padding: 20px 30px 0 30px; height: 410px }
.special .prod1 { display: block }
.special .prod .vign { border: 0; padding: 45px; height: 210px; position: relative; margin-bottom: 15px }
.special .prod .vign .promo { top: 0; left: 0 }
.special .prod .prix { margin-bottom: 0 }
.special .prod .stock { color: #00B285; font-size: 14px }
.special .prod .stock strong { font-size: 30px; display: inline-block; vertical-align: middle; font-weight: normal }
.services { background: #e5eff5; padding: 80px 0 80px 0; background-repeat: repeat-x }
.services .titre { display: block; font-size: 28px; font-weight: bold; margin-bottom: 30px }
.services div { display: inline-block; vertical-align: top; background-color: #FFF; border: 1px solid #B2CED6; border-radius: 8px; font-size: 18px; color: #005165; font-weight: bold; margin-right: 30px; width: calc(33.333333333333% - 20px); padding: 27px 27px }
.services div img { display: inline-block; vertical-align: top; height: 50px; margin: 0 10px 0 0 }
.services div span { display: inline-block; vertical-align: top; width: 70%; }
/* Ref */
.reftexte { background: #e5eff5; padding: 80px 0 80px 0; border-top: 1px solid #B8D0D9; font-size: 14px; line-height: 20px }
.reftexte center { overflow: auto; scrollbar-color: #B2CED6 #dfedf2 }
.reftexte .titre { display: block; font-size: 28px; font-weight: bold; margin-bottom: 30px }
.reftexte h2 { font-size: 13px; margin: 0 }
.reftexte a { color: #008a8b }
/* Pied de page */
.pied { background-color: #95b713; color: #FFF; height: 50px; font-size: 14px; line-height: 50px; font-weight: bold }
.pied img { height: 50px }
.pied1 {display: flex; justify-content:space-between;}
.pied2 { background-color: #95c11f; color: #FFF; padding: 50px 0 }
.pied2 ul { background-color: #95c11f; color: #FFF; font-size: 14px; display: inline-block; vertical-align: top; width: 25%; line-height: 24px }
.pied2 ul img { height: 60px; margin-bottom: 10px }
.pied2 ul a { color: #FFF }
.pied2 ul a:hover { text-decoration: underline }
/***************************************************************************************************************************
* PAGES
***************************************************************************************************************************/

.recherchepage { background-color: #90caf9; height: 110px; padding: 28px 0 0 0 }
.recherchepage center { text-align: center }
.recherchepage div { text-align: center; background-color: #FFF; display: inline-block; height: 54px; border: 1px solid #dfedf2; border-radius: 30px; margin: 0 auto; padding: 4px; transition: border-color 0.15s ease-in; width: 700px; font-size: 0; position: relative }
.recherchepage .active { border-color: #008a8b }
.recherchepage div input { border: 0; font-size: 16px; height: 44px; border-radius: 50px; padding: 0 20px; vertical-align: top; width: calc(100% - 44px) }
.recherchepage div .bouton { display: inline-block; background-color: #95c11f; height: 44px; width: 44px; border-radius: 50px; vertical-align: top; transition: background-color 0.15s ease-in; position: relative }
.recherchepage div .bouton:hover { background-color: #005165 }
.recherchepage div .bouton img { height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.recherchepage .suggestions { top: 52px }
/* Checkbox */
.checkbox { display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 17px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 25px; margin-bottom: 10px }
.checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #FFF; border: 1px solid #000; border-radius: 4px }
.checkbox input:checked ~ .checkmark { background-color: #95c11f; border: 0 }
.checkmark:after { content: ""; position: absolute; display: none; }
.checkbox input:checked ~ .checkmark:after { display: block; }
.checkbox .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
/* Catégorie */
.produits { padding: 70px 0 }
.produits .filtres,
.produits .liste { display: inline-block; vertical-align: top }
.produits .filtres { width: 300px; margin-right: 30px; font-size: 15px; margin-left: -50px; }
.produits h1 { font-size: 22px; color: #005165}
.produits h1:hover { color: #95c11f }
.btn-back { display: inline-block; padding: 10px 20px; color: #224C59; text-decoration: none; transition: background-color 0.3s; }
.btn-back:hover { cursor: pointer; border-radius: 4px; background-color: #dfedf2; }
.btn-back span { font-weight: 600; }
.universe {margin: 0 0 40px 0; }
.produits .filtres .categories a { display: block; line-height: 30px; color: #000 }
.produits .filtres .categories a:hover,
.produits .filtres .categories .active { color: #95c11f }
.produits .filtres .categories .active { text-decoration: underline }
.produits .filtres .categories a img { display: inline-block; vertical-align: middle; height: 17px; margin-right: 8px }
.produits .filtres .categories .enfant { display: none; margin-left: 50px }
.produits .filtres strong { display: block; margin: 50px 0 15px 0 }
.produits .liste { width: calc(100% - 280px) }
.produits .liste .classement { text-align: right; margin-bottom: 30px }
.produits .liste .classement select { height: 45px; border: 1px solid #E8E8E8; padding: 0 15px; background-color: #FFF; border-radius: 6px }
.produits .articles ul { width: calc(33.333333333333% - 20px); margin: 0 30px 50px 0 }
.produits .articles ul:nth-child(3n) { margin-right: 0 }
.produits .plus { text-align: center; margin-top: 40px }
.produits .plus a { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #FFF; font-size: 15px; font-weight: bold; color: #95c11f; line-height: 36px; padding: 0 14px }
.produits .plus a:hover { color: #FFF; background-color: #95c11f }
.produits .ariane { color: #000; font-size: 15px; margin: 0 0 40px 0 }
.produits .ariane a { color: #8E8E8E; }
.produits .ariane a:hover { text-decoration: underline }
.produits .ariane span { color: #E7E7E7; }
/* Fiche */
.fiche { margin: 40px 0 80px 0 }
.fiche .ariane { color: #000; font-size: 15px; margin: 0 0 40px 0 }
.fiche .ariane a { color: #8E8E8E; }
.fiche .ariane a:hover { text-decoration: underline }
.fiche .ariane span { color: #E7E7E7; }
.fiche ul { display: inline-block; vertical-align: top }
.fiche .images { width: 400px; margin-right: 40px }
.fiche .images .principale { }
.fiche .images .principale a { display: inline-block; width: 100%; border: 1px solid #E8E8E8; border-radius: 6px; background-size: contain; background-position: center; background-origin: content-box; background-repeat: no-repeat; padding: 50px; height: 400px; position: relative }
.fiche .images .principale a .marque { display: inline-block; position: absolute; top: 20px; left: 20px; max-height: 60px; max-width: 100px }
.fiche .images .miniatures { }
.fiche .images .miniatures a { display: inline-block; width: 100px; border: 1px solid #E8E8E8; border-radius: 6px; background-size: contain; background-position: center; background-origin: content-box; background-repeat: no-repeat; height: 100px; position: relative; margin: 10px 10px 0 0 }
.fiche .description { width: calc(100% - 440px - 300px - 40px); margin-right: 40px; font-size: 16px }
.fiche .description h1 { margin: 0 0 20px 0; font-size: 26px }
.fiche .description .avis { margin-bottom: 25px }
.fiche .description .avis img { height: 15px }
.fiche .description .infos { line-height: 22px; margin-bottom: 50px }
.fiche .description .remises { line-height: 22px; margin-bottom: 50px }
.fiche .description .remises table { border: 1px solid #E8E8E8; border-radius: 8px; font-size: 14px; width: 100%; margin-top: 10px }
.fiche .description .remises table thead td { font-weight: bold }
.fiche .description .remises table td { border-bottom: 1px solid #E8E8E8; padding: 6px; text-align: center; border-right: 1px solid #E8E8E8 }
.fiche .description .remises table tbody tr:last-child td { border-bottom: 0 }
.fiche .description .remises table td:last-child { border-right: 0 }
.fiche .description .telechargement { font-size: 15px }
.fiche .description .telechargement a { display: block; margin-bottom: 8px; line-height: 22px; color: #000 }
.fiche .description .telechargement a img { height: 22px; vertical-align: middle; display: inline-block; margin-right: 5px }
.fiche .description .telechargement a:hover { text-decoration: underline; color: #95c11f }
.fiche .commander { width: 300px; border: 1px solid #95c11f; border-radius: 12px; padding: 30px }
.fiche .commander .promo { font-weight: bold; font-size: 30px }
.fiche .commander .promo span { background-color: #EA0029; display: inline-block; line-height: 22px; padding: 0 6px; color: #FFF; font-weight: bold; font-size: 12px; border-radius: 4px; margin-bottom: 10px }
.fiche .commander .promo b { font-weight: bold }
.fiche .commander .prix { font-weight: bold; font-size: 30px }
.fiche .commander .prix span { font-size: 16px }
.fiche .commander .prixht { font-weight: bold; font-size: 14px; color: #999999; margin-bottom: 6px }
.fiche .commander .cond { font-size: 16px; margin-bottom: 15px }
.fiche .commander .enstock { font-size: 16px; color: #00B285; font-weight: bold; line-height: 36px; margin-bottom: 10px }
.fiche .commander .enstock strong { font-weight: normal; font-size: 36px; display: inline-block; vertical-align: middle }
.fiche .commander .quantite { margin-bottom: 25px }
.fiche .commander .quantite a,
.fiche .commander .quantite input { display: inline-block; vertical-align: top; height: 34px; border: 1px solid #C2C2C2 }
.fiche .commander .quantite a { width: 34px; text-align: center; }
.fiche .commander .quantite a img { width: 15px; height: 15px; margin-top: 8px; opacity: 0.2 }
.fiche .commander .quantite a:hover img { opacity: 1 }
.fiche .commander .quantite input { text-align: center; width: 80px; border-right: 0; border-left: 0; font-size: 18px; color: #008a8b }
.fiche .commander .ajouter { margin-bottom: 15px }
.fiche .commander .ajouter a { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 16px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px }
.fiche .commander .favoris { margin-bottom: 60px }
.fiche .commander .favoris a { display: inline-block; border-radius: 20px; border: 1px solid #e8e8e8; background-color: #e8e8e8; font-size: 13px; font-weight: bold; color: #666; line-height: 36px; padding: 0 14px }
.fiche .commander .ajouter a:hover,
.fiche .commander .favoris a:hover { color: #95c11f; background-color: #FFF }
.fiche .commander .garantie { }
.fiche .commander .garantie strong { font-size: 20px; color: #95c11f }
.fiche .commander .garantie div { margin-top: 25px }
.fiche .commander .garantie div img { height: 26px; display: inline-block; vertical-align: top; margin-right: 10px }
.fiche .commander .garantie div span { display: inline-block; vertical-align: top; width: calc(100% - 50px); font-size: 14px; line-height: 20px }
.declinaisons { width: 100%; font-size: 14px; margin-top: 60px; border: 1px solid #95c11f; border-radius: 10px }
.declinaisons thead .ligne1 td { background-color: #95c11f; color: #FFF; font-weight: bold; height: 42px; padding: 0 8px }
.declinaisons thead .ligne1 td:first-child { border-top-left-radius: 8px }
.declinaisons thead .ligne1 td:last-child { border-top-right-radius: 8px }
.declinaisons tbody td { border-bottom: 1px solid #e8e8e8; height: 42px; padding: 0 8px }
.declinaisons tbody td a {color: #000000}
.declinaisons tbody td .ht { font-size: 12px; color: #666 }
.declinaisons tbody td input { border: 1px solid #DDD; height: 32px; width: 80px; text-align: center; font-size: 16px }
.declinaisons tbody select { border: none; padding: 5px; font-size: 16px; cursor: pointer;}
.lignecommander { padding-top: 20px; text-align: right }
.lignecommander .btncommander { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 16px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px; }
/* Connexion */
.connexion { font-size: 0; margin: 80px 0 }
.connexion center { max-width: 1000px }
.connexion .btn { margin-top: 10px }
.connexion .gauche { padding-right: 70px }
.connexion .droite { border-left: 1px solid #e8e8e8; padding-left: 70px }
.connexion .forms { font-size: 14px; display: inline-block; vertical-align: top; width: 50%; }
.connexion .forms h2 { font-size: 24px; margin-top: 0 }
.connexion .forms input { width: 100%; margin-bottom: 15px; height: 46px; border: 1px solid #e8e8e8; padding: 0 22px; border-radius: 5px; font-size: 15px; background-color: #FFF !important }
.connexion .forms input:focus { border-color: #008a8b; background-color: #FFF !important }
.connexion .forms .perdu { display: inline-block; width: 100%; font-size: 13px; margin-top: 40px; color: #000 }
.connexion .forms .perdu:hover { color: #95c11f }
.connexion .forms .erreurconn { background-color: #fce7ec; color: #008A8B; padding: 30px; border-radius: 8px; margin-bottom: 30px; display: none }
.connexion .forms .erreurconn a { text-decoration: underline; color: #008A8B }
.connexion .forms #rgpd { width: auto }
#errors { font-size: 13px; color: #F54436; padding-bottom: 40px; display: none; line-height: 18px }
#warning { font-size: 15px; color: #234C5A; padding-bottom: 20px; line-height: 18px; text-align:justify; font-weight:bold; }
.compte { font-size: 0 }
.connexion .forms .btn { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 17px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px }
.connexion .forms .btn:hover { color: #95c11f; background-color: #FFF }
.connexion .forms .checkbox { font-size: 13px; line-height: 18px; margin: 15px 0 15px 0 }
.connexion .forms .checkbox input { width: auto }
.connexion .advantages-list { list-style-type: none; padding: 0 20px; border: 1px solid #95c11f; border-radius: 10px; }
.connexion .advantages-list li { margin: 25px 0; position: relative; }
.connexion .plus-icon { display: inline-block; background-color: #95c11f; height: 20px; width: 20px; border-radius: 50px; vertical-align: middle; transition: background-color 0.15s ease-in; position: relative; }
.connexion .plus-icon img { height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Inscription */
.inscription { font-size: 0; margin: 80px 0; }
.inscription .forms { font-size: 14px; display: inline-block; vertical-align: top; width: 75%; }
.inscription .forms h2 { font-size: 24px; margin-top: 0; }
.inscription .forms input, .inscription .forms select { width: 100%; margin-bottom: 15px; height: 46px; border: 1px solid #e8e8e8; padding: 0 22px; border-radius: 5px; font-size: 15px; background-color: #FFF !important }
.inscription .forms input:focus { border-color: #008a8b; background-color: #FFF !important }
.inscription .forms .perdu { display: inline-block; width: 100%; font-size: 13px; margin-top: 40px; color: #000; }
.inscription .forms .perdu:hover { color: #008A8B; }
.inscription .forms .erreurconn { background-color: #fce7ec; color: #008A8B; padding: 30px; border-radius: 8px; margin-bottom: 30px; display: none; }
.inscription .forms .erreurconn a { text-decoration: underline; color: #008A8B; }
.inscription .forms #rgpd { width: auto }
.inscription .forms .flex-container { display: flex; gap: 10px; }
.inscription .forms div#ville-container { display: contents; }
.inscription .forms .btn { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 17px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px; }
.inscription .forms .btn:hover { color: #95c11f; background-color: #FFF; }
.inscription .forms .checkbox { font-size: 13px; line-height: 18px; margin: 15px 0 15px 0; }
.inscription .forms .checkbox input { width: auto; }
.inscription .forms .siret-info { display: flex; justify-content: center; flex-basis: initial; margin-block-start: auto; font-style: italic; color: #234C5A; }
.inscription .forms input#email:invalid { color: #F54436; }
.inscription .forms .error { border: 2px solid red; background-color: #ffe6e6; }
.inscription .forms .btn[disabled] { background-color: grey; cursor: not-allowed; }
.siret-dialog { background-color: #fff; border: 2px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin: 20px auto; text-align: center; position: relative; }
.siret-dialog p { font-size: 16px; color: #333; }
.siret-dialog-buttons { margin-top: 20px; }

/* Ref */
.reftexte2 { margin-bottom: 80px }
.reftexte2 center { border-radius: 15px; padding: 50px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; font-size: 14px; line-height: 20px; color: #005165 }
.reftexte2 .scroll { height: 130px; overflow: auto; scrollbar-color: #B2CED6 #FFF; padding: 0 40px 0 0 }
.reftexte2 h2 { font-size: 16px; margin: 0 }
.reftexte2 a { text-decoration: underline; color: #005165 }
/* Panier */
section.panier { width: 100%; margin: 40px 0 30px 0 }
.panier h1 { font-size: 30px }
.panier .liste { width: 100%; border-collapse: separate; font-size: 15px; margin-bottom: 30px; border: 1px solid #e8e8e8; border-radius: 6px }
.panier .liste thead td { text-transform: uppercase; background-color: #F4F5F6; height: 36px; font-size: 12px !important; text-align: center; font-weight: bold; }
.panier .liste td { border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; padding: 5px }
.panier .liste td:last-child { border-right: 0 }
.panier .liste tbody tr:last-child td { border-bottom: 0 }
.panier .liste .image { text-align: center; padding: 10px 5px; width: 90px }
.panier .liste .image img { height: 50px }
.panier .liste .nom { padding: 0 0 0 10px }
.panier .liste .nom a { color: #000; font-weight: bold }
.panier .liste .nom a:hover { text-decoration: underline }
.panier .liste .nom .promo { background-color: #EA0029; display: inline-block; line-height: 22px; padding: 0 6px; color: #FFF; font-weight: bold; font-size: 12px; border-radius: 4px }
.panier .liste .nom .stock { color: #00B285; font-size: 13px }
.panier .liste .nom .stock strong { font-size: 30px; display: inline-block; vertical-align: middle; font-weight: normal }
.panier .liste .qte { text-align: center; width: 90px }
.panier .liste .qte input { border: 1px solid #DDD; font-size: 15px; text-align: center; border-radius: 6px; padding: 6px 5px; width: 70px; }
.panier .liste .qte input:focus { border-color: #008a8b }
.panier .liste .cond { text-align: center }
.panier .liste .prixht { width: 100px; text-align: center }
.panier .liste .tva { width: 100px; text-align: center }
.panier .liste .total { width: 100px; text-align: right; padding: 0 10px 0 0 }
.panier .liste .supprime { width: 60px; text-align: center }
.panier .liste .supprime img { height: 20px }
.panier .grandtotal { width: 100%; margin-bottom: 20px }
.panier .grandtotal td { vertical-align: top }
.panier .grandtotal .franco { display: inline-block; color: #FFF; background-color: #95c11f; padding: 10px; border-radius: 8px; font-size: 15px; font-weight: bold }
.panier .grandtotal .franco span { display: inline-block; background-color: #FFF; color:#004759; padding:3px 4px; border-radius:6px; display:inline-block  }
.panier .grandtotal table { font-size: 15px; top: 0; width: 300px; border-collapse: separate; margin-bottom: 30px; border: 1px solid #e8e8e8; border-radius: 6px }
.panier .grandtotal table td { background-color: #f4f5f6; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; padding: 10px 10px }
.panier .grandtotal table td:last-child { border-right: 0 }
.panier .grandtotal table tr:last-child td { border-bottom: 0 }
.panier .grandtotal table tr td:nth-child(2) { text-align: right; padding-right: 10px; background-color: #FFF }
.panier .grandtotal .code { width: auto }
.panier .grandtotal .code td { border: 0; vertical-align: middle }
.panier .grandtotal .code input { display: inline-block; padding: 0 6px; vertical-align: top; border: 1px solid #CCC; height: 30px; border-radius: 5px; width: 120px }
.panier .grandtotal .code a { display: inline-block; vertical-align: top; height: 30px; width: 30px; line-height: 30px; background-color: #008a8b; color: #FFF; font-weight: bold; text-align: center; border-radius: 5px }
.panier .btn { display: inline-block; border-radius: 20px; border: 1px solid #008A8B; background-color: #008A8B; font-size: 16px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px; }
.panier .btn:hover { color: #008A8B; background-color: #FFF }
.geographic-warning { margin: 15px 0; padding: 12px; border-radius: 4px; font-size: 14px; }
.geographic-warning.alert-info { background-color: #90caf9; border: 1px solid #bee5eb; color: #234C5A; }
.vide { display: inline-block; font-size: 16px; width: 100%; border: 1px solid #e8e8e8; border-radius: 6px; padding: 10px }
.identification { }
.identification center { font-size: 14px }
.identification .compte { width: 100%; margin-bottom: 30px }  
.identification .compte h2 { margin: 0 0 25px 0; font-size: 26px; width: 100% }
.identification .compte .cart-connexion,
.identification .compte .cart-inscription,
.identification .compte .cart-adresse { border-radius: 8px; border: 1px solid #e8e8e8; margin-bottom: 30px; font-size: 14px; display: inline-block; vertical-align: top; width: calc(50% - 15px); padding: 40px 50px; position: relative; padding-top: 85px }
.identification .compte .cart-connexion { margin-right: 30px }
.identification .compte .cart-connexion span,
.identification .compte .cart-inscription .entete,
.identification .compte .cart-adresse .entete { display: block; border-bottom: 1px solid #e8e8e8; font-weight: bold; padding: 15px 20px; text-transform: uppercase; margin-bottom: 20px; font-size: 14px; position: absolute; top: 0; left: 0; right: 0; background-color: #f4f5f6 }
.onglets .imprim {text-align: right; margin-bottom:25px; }
.onglets .imprim .cart-btn,
.identification .compte .cart-connexion .cart-btn,
.identification .compte .commandetype .cart-btn,
.identification .compte .cart-inscription .cart-btn,
.identification .compte .cart-adresse .cart-btn { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 16px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px; }
.identification .compte .cart-connexion .cart-btn:hover,
.identification .compte .commandetype .cart-btn:hover,
.identification .compte .cart-inscription .cart-btn:hover,
.identification .compte .cart-adresse .cart-btn:hover { color: #95c11f; background-color: #FFF }
.identification .compte .lien { color: #000 }
.identification .compte .lien:hover { color: #008a8b }
.identification .compte .cart-connexion #connexion,
.identification .compte .cart-connexion #motdepasse { width: 100% }
.identification .compte .cart-connexion #connexion strong,
.identification .compte .cart-connexion #motdepasse strong { display: block; margin-bottom: 6px }
.identification .compte .cart-connexion #connexion input,
.identification .compte .cart-connexion #motdepasse input { height: 42px; border: 1px solid #e8e8e8; padding: 0 15px; border-radius: 4px; font-size: 15px; background-color: #FFF; margin-bottom: 20px; width: 100% }
.identification .compte .cart-connexion #connexion input:focus,
.identification .compte .cart-connexion #motdepasse input:focus { border-color: #008a8b; background-color: #FFF !important }
.identification .compte .cart-connexion .cart-mdp { text-decoration: none; margin: 10px 0 10px; display: inline-block; font-size: 13px; color: #666 }
.identification .compte .cart-connexion .cart-mdp:hover { text-decoration: underline }
.identification .compte .cart-inscription #inscription { width: 100% }
.identification .compte .cart-inscription #inscription strong { display: block; margin-bottom: 6px }
.identification .compte .cart-inscription #inscription input,
.identification .compte .cart-inscription #inscription select,
.identification .compte .cart-adresse input,
.identification .compte .cart-adresse select { height: 42px; border: 1px solid #e8e8e8; padding: 0 15px; border-radius: 4px; font-size: 15px; background-color: #FFF; margin-bottom: 20px; width: 100% }
.identification .compte .cart-inscription #inscription input:focus,
.identification .compte .cart-inscription #inscription select:focus,
.identification .compte .cart-adresse input:focus,
.identification .compte .cart-adresse select:focus { border-color: #008a8b; background-color: #FFF !important }
.identification .compte .cart-inscription .typeadresse { display: block; color: #008a8b; font-weight: bold; font-size: 16px; margin: 20px 0 }
.identification .compte .cart-inscription .checkbox { font-size: 13px; line-height: 18px; margin: 15px 0 15px 0 }
.identification .compte .cart-inscription .checkbox input { width: auto !important }
.identification .compte .cart-adresse { width: calc(50% - 15px); display: inline-block; vertical-align: top; font-size: 15px; line-height: 21px }
.identification .compte .cart-adresse strong { display: block; margin-bottom: 6px }
.identification .compte .cart-adresse strong span { color: #008a8b }
.identification .compte .livraison { width: 100%; border: 1px solid #e8e8e8; padding: 20px; margin-bottom: 30px; font-size: 14px }
.identification .compte .livraison table { border-collapse: collapse; border: 1px solid #e8e8e8; width: 100% }
.identification .compte .livraison table .td1 { width: 5%; text-align: center; border-right: 1px solid #e8e8e8 }
.identification .compte .livraison table .td2 { width: 9%; border-right: 1px solid #e8e8e8; vertical-align: middle; padding-left: 14px }
.identification .compte .livraison table .td2 img { height: 24px; vertical-align: middle }
.identification .compte .livraison table .td3 { width: 71%; border-right: 1px solid #e8e8e8; vertical-align: middle; padding: 14px 0 14px 14px }
.identification .compte .livraison table .td4 { width: 15%; padding-left: 10px }
.identification .compte .paiement { width: 100%; margin-bottom: 80px }
.identification .compte .paiement a { display: inline-block; transition: border-color 0.15s ease-in; vertical-align: top; border-radius: 10px; margin-right: 20px; height: 200px; width: 200px; background-size: cover; background-position: center; border: 2px solid #e8e8e8 }
.identification .compte .paiement .active { border-color: #95c11f }
.identification .cgv { border: 1px solid #e8e8e8; padding: 30px; border-radius: 10px; margin-bottom: 80px }
.identification .cgv .checkbox { font-size: 15px; margin-bottom: 0 }
.identification .cgv .checkbox a { color: #95c11f; text-decoration: underline }
.identification .commandetype { margin-bottom: 80px }
.identification .commandetype .checkbox { font-size: 15px; margin-bottom: 0 }
.identification .commandetype .nommodele { display: none; margin: 5px 0 0 35px }
.identification .commandetype .nommodele input { display: inline-block; padding: 0 6px; vertical-align: top; border: 1px solid #CCC; height: 40px; font-size: 16px; border-radius: 5px; width: 200px; margin-bottom: 20px; }
.identification .commander { text-align: center; margin: 30px 0 80px 0 }
.identification .commander a { display: inline-block; border-radius: 44px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 17px; font-weight: bold; color: #FFF; line-height: 44px; padding: 0 14px; }
.rechercheretrait .active { border-color: #008a8b;}
.rechercheretrait { background-color: #FFF; display: inline-block;margin-bottom: 32px; font-size: 0; position: relative; width: 100%; }
.rechercheretrait input { border: 0 !important; font-size: 16px !important; height: 44px !important; border-radius: 50px !important; padding: 0 20px !important; vertical-align: top !important; width: calc(100% - 44px) !important; }
.rechercheretrait .bouton { display: inline-block; background-color: #95c11f; height: 44px; width: 44px; border-radius: 50px; vertical-align: top; transition: background-color 0.15s ease-in; position: relative; }
.rechercheretrait .bouton img { height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.btn-relay-select { width: 100%; background: #fff; border: 2px dashed #dc0032; padding: 15px; border-radius: 8px; cursor: pointer; font-size: 15px; color: #dc0032; font-weight: 600; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.btn-relay-select:hover { background: #fff5f7; border-style: solid; }
.relay-selected-display { background: #f0f8e8; padding: 15px; border-radius: 8px; margin-top: 15px; border-left: 4px solid #84bd00; }
.relay-selected-display strong { color: #84bd00; display: block; margin-bottom: 5px; }
#relay-points-list .relay-item { padding: 15px; border: 2px solid #e0e0e0; border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s; }
#relay-points-list .relay-item:hover { border-color: #84bd00; background: #f9f9f9; }
#relay-points-list .relay-item.selected { border-color: #84bd00; background: #f0f8e8; }
.page { margin: 60px 0; font-size: 15px; line-height: 22px; }
.page h1 { margin: 0 0 30px 0; font-size: 30px }
.page h2 { margin: 0 0 20px 0; font-size: 18px; color: #000; line-height: 22px }
.page img { max-width: 100%; margin: 30px 0 }
.page p { margin: 30px }
.page ul { list-style-type: disc !important; list-style-position: outside !important; padding: 0 40px; margin: 30px }
.page a { color: #0054bb; text-decoration: underline }
.page table { border-spacing : 0; border-collapse : collapse; margin: 30px; }
.page table td { padding: 0 }
.page center { max-width: 1000px }
.page .btn { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 17px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px; text-decoration: auto; }
/***************************************************************************************************************************
* MON COMPTE
***************************************************************************************************************************/
.moncompte { padding: 70px 0 }
.moncompte .navigation,
.moncompte .table { display: inline-block; vertical-align: top }
.moncompte .navigation { width: 250px; margin-right: 50px; font-size: 16px }
.moncompte .navigation h1 { font-size: 22px; margin: 0 0 30px 0 }
.moncompte .navigation a { display: block; line-height: 45px; color: #000; transition: all 0.2s ease-in; margin-bottom: 6px }
.moncompte .navigation a:hover,
.moncompte .navigation .active { color: #95c11f; font-weight: bold; background-color: #e5eff5; border-radius: 6px; padding: 0 0 0 15px }
.moncompte .table { width: calc(100% - 320px) }
.moncompte h1,
.moncompte h2 { font-size: 22px; margin: 8px 0 30px 0 }
.moncompte .liste { width: 100%; border-collapse: separate; font-size: 15px; margin-bottom: 30px; border: 1px solid #e8e8e8; border-radius: 6px }
.moncompte .liste thead td { text-transform: uppercase; background-color: #F4F5F6; height: 36px; font-size: 12px !important; text-align: center; font-weight: bold; }
.moncompte .liste td { border-bottom: 1px solid #e8e8e8; height: 50px; border-right: 1px solid #e8e8e8; padding: 10px }
.moncompte .liste td:last-child { border-right: 0 }
.moncompte .liste tbody tr:last-child td { border-bottom: 0 }
.moncompte .liste td .statut { display: inline-block; font-size: 13px; padding: 5px 10px; border-radius: 20px; font-weight: bold }
.moncompte .liste td .attente { background-color: #f4f5f6; color: #666 }
.moncompte .liste td .expediee { color: #008a8b; border: 1px solid #008a8b }
.moncompte .liste td input { text-align: center; border: 1px solid #c2c2c2; border-radius: 6px; height: 32px; width: 60px; font-size: 15px }
.moncompte .liste td input:focus { border-color: #008a8b }
.moncompte .liste .lignemodele td { background-color: #f4f5f6; border-right: 0 }
.moncompte .liste .lignemodele span img { display: inline-block; vertical-align: middle; height: 17px; margin-right: 8px; }
.moncompte .liste .miniature { text-align: center }
.moncompte .liste .miniature img { max-width: 65px; max-height: 65px }
.moncompte .liste .lien { color: #000 }
.moncompte .liste .lien:hover { color: #95c11f }
.moncompte .bloc { border: 1px solid #e8e8e8; border-radius: 6px; padding: 50px; margin-bottom: 60px; font-size: 15px; line-height: 22px }
.moncompte .form strong { display: block; margin-bottom: 10px; font-size: 15px }
.moncompte .form strong span { color: #008a8b }
.moncompte .form .bloc input,
.moncompte .form .bloc select { height: 42px; border: 1px solid #e8e8e8; padding: 0 15px; border-radius: 4px; font-size: 15px; background-color: #FFF; margin-bottom: 20px; width: 100% }
.moncompte .form .bloc textarea { border: 1px solid #e8e8e8; height: 200px; padding: 20px; border-radius: 4px; font-size: 15px; background-color: #FFF; margin-bottom: 20px; width: 100% }
.moncompte .form .bloc input:focus,
.moncompte .form .bloc select:focus { border-color: #008a8b; background-color: #FFF !important }
.moncompte .btn { display: inline-block; border-radius: 20px; border: 1px solid #95c11f; background-color: #95c11f; font-size: 16px; font-weight: bold; color: #FFF; line-height: 36px; padding: 0 14px; }
.moncompte .btn:hover { color: #008A8B; background-color: #FFF; }
.moncompte .form .bloc .checkbox { font-size: 15px; line-height: 18px; margin-bottom: 30px; width: auto !important }
.moncompte .form .bloc .checkbox input { width: auto !important }
.autocomplete-suggestions { border: 1px solid #ddd; background: #fff; overflow: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.15); border-radius: 4px; margin-top: 2px; z-index: 9999 !important; }
.autocomplete-suggestion { padding: 12px 15px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; white-space: normal; word-wrap: break-word; }
.autocomplete-suggestion:last-child { border-bottom: none; }
.autocomplete-suggestion:hover { background-color: #f8f9fa; }
.autocomplete-selected { background-color: #95c11f !important; }
.autocomplete-no-suggestion { padding: 12px 15px; color: #999; font-style: italic; }
#query { width: 100%; padding: 12px 15px; font-size: 14px; border-radius: 4px; transition: border-color 0.3s; }
#query:focus { outline: none; border-color: #95c11f; }
#query:disabled { background-color: #f0f0f0 !important; cursor: not-allowed; }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ANIMATION (rotation horaire pour loader)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.modal div span.loading {
  display: inline-block;
  width: 35px;
  height: 35px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top-color: #95c11f;
  border-radius: 50%;
}
.animate-spin {
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 0.5s infinite linear;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #005165 0%, #003d4d 100%);
    color: white;
    padding: 20px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    border-top: 3px solid #009fe3;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-text h3 {
    margin: 0 0 10px 0;
    font-size: 19px; /* était 1.2em */
    font-weight: 600;
    color: #009fe3;
}

.cookie-text p {
    margin: 0;
    font-size: 15px; /* était 0.95em */
    line-height: 1.4;
    opacity: 0.95;
    color: #ffffff;
}

.cookie-link {
    color: #009fe3;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .cookie-link:hover {
        color: #007bb8;
        text-decoration: none;
    }

.cookie-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px; /* était 0.9em */
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cookie-btn-accept {
    background-color: #95c11f;
    color: white;
    border-color: #95c11f;
}

    .cookie-btn-accept:hover {
        background-color: #7ea018;
        border-color: #7ea018;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(149, 193, 31, 0.3);
    }

.cookie-btn-refuse {
    background-color: transparent;
    color: #f39200;
    border-color: #f39200;
}

.cookie-btn-refuse:hover {
    background-color: #f39200;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
}

/* Page d'erreur - Container principal */
.error-page-wrapper {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.error-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Carte d'erreur */
.error-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 50px 40px;
    text-align: center;
    overflow: hidden;
}

.error-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #95b713, #95c11f);
}

/* Header avec icône */
.error-header {
    margin-bottom: 40px;
}

.error-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #95b713, #95c11f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

.error-icon span {
    font-size: 40px;
    color: #ffffff;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.error-title {
    font-size: 32px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.error-message {
    font-size: 18px;
    color: #718096;
    margin: 0;
    line-height: 1.6;
}

/* Boutons d'action */
.error-actions {
    margin: 40px 0;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(135deg, #95b713, #95c11f);
    color: #ffffff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    color: #ffffff;
}

.btn-secondary {
    background: #f7fafc;
    color: #4a5568;
    border: 2px solid #e2e8f0;
}

.btn-secondary:hover {
    background: #edf2f7;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Section support */
.support-section {
    background: linear-gradient(135deg, #f7fafc, #edf2f7);
    border-radius: 15px;
    padding: 30px;
    margin-top: 30px;
    text-align: left;
}

.support-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .support-header i {
        font-size: 24px;
        color: #667eea;
    }

    .support-header h3 {
        margin: 0;
        font-size: 20px;
        color: #2d3748;
    }

.support-content p {
    color: #718096;
    margin-bottom: 20px;
    font-size: 16px;
}

.support-contacts {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

.contact-item i {
    width: 20px;
    color: #667eea;
}

.support-hours {
    color: #a0aec0;
    font-style: italic;
}

/* Référence d'erreur */
.error-reference {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .error-reference small {
        color: #a0aec0;
        font-size: 14px;
    }

    .error-reference code {
        background: #f7fafc;
        padding: 4px 8px;
        border-radius: 4px;
        color: #667eea;
        font-weight: 600;
    }

/* RESPONSIVE */
.filter-toggle,
.filter-overlay,
.filter-close { display: none; }

/* Tablets */
@media (max-width: 768px) {
    .error-page-wrapper {
        padding: 15px;
    }

    .error-card {
        padding: 40px 30px;
    }

    .error-icon {
        width: 80px;
        height: 80px;
    }

    .error-icon i {
        font-size: 32px;
    }

    .error-title {
        font-size: 28px;
    }

    .error-message {
        font-size: 16px;
    }

    .error-actions {
        flex-direction: column;
        align-items: center;
    }

    .error-btn {
        width: 100%;
        max-width: 280px;
    }

    .support-contacts {
        gap: 12px;
    }
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 15px;
    }

    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cookie-text h3 {
        font-size: 17px; /* était 1.1em */
    }

    .cookie-text p {
        font-size: 14px; /* était 0.9em */
    }

    .cookie-buttons {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .cookie-btn {
        flex: 1;
        max-width: 140px;
        padding: 14px 18px;
        font-size: 13px; /* était 0.85em */
    }
}

@media (max-width: 480px) {
    .cookie-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-btn {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cookie-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-btn {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cookie-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-btn {
        max-width: none;
        width: 100%;
    }
}

@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-ms-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}