@charset "UTF-8";

/* 1) Import des polices (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap');

/* 2) Variables (optionnel mais propre) */
:root {
  --font-heading-primary: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading-secondary: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --focus-outline: 2px solid #012d52;
  --focus-outline-offset: 2px;
}







html, body, div, span, applet, object, iframe, h1, h3, .side-right #countdown span,
.side-right #countdown li.seperator, h2, h3, h4, h5, h6, p, .address-detail a, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
   }

strong {
  font-weight: 500;font-family: 'montserratbold', sans-serif; }

body {
  color: #666666;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  padding-top: 80px; /* espace pour navbar fixed-top (Bootstrap 5) */
}
/* 4) Titres */
h1, h2 {
  font-family: var(--font-heading-primary);
  font-weight: 400; /* Montserrat Regular */
}

h3, h4, h5 {
  font-family: var(--font-heading-secondary);
  font-weight: 400; /* Open Sans Regular (tu peux changer si besoin) */
}

/* Optionnel : si tu veux garder h6 en cohérence */
h6 {
  font-family: var(--font-body);
}
a:hover, a:active {
  outline: 0; }

button:focus {
  border: none;
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

ul {
  list-style: none; }

a {
  color: #012d52;
  text-decoration: none;
  -webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in; }

.blue {color:#012d52;}

a:hover {
  color: #29769c;
  text-decoration: none; background:none!important;}

a:focus {
  text-decoration: none;
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

h1 {
  color: #fff;
   font-family: 'montserratultralight';
  font-size: 30px;
text-shadow:1px 0 1px rgba(0,0,0,0.2); }

h2 {
  font-size: 24px;
  font-family: 'montserratregular';
  color: #012d52;

   }
h3 {
  font-size: 18px;
  font-family: 'montserratultralight';
  color: #333;
margin:30px 0;
text-transform:uppercase;
   }
h4 {
  font-size: 18px;
  font-family: 'montserratregular';
  color: #666666;
margin:0 0 10px 0;
text-transform:uppercase;
   }

p {


  line-height: 25px; }

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.modal-dialog {
    z-index: 2000;
}
#tot_ht {
  float: left;
}
.form-control{height:44px;line-height:44px;border-color:#d6d6d6;border-radius:5px!important;}
.form-control:focus{border-color:#012d52;box-shadow:none;outline:var(--focus-outline);outline-offset:var(--focus-outline-offset);}

/*.btn, .btn:focus, .btn:visited {padding:15px 30px;color:#fff;background:#012d52;text-shadow:1px 0 1px rgba(0,0,0,0.2);box-shadow:none;border-radius:5px;border:0;font-size:14px;}*/
.btn.btn-full{width:100%;}
.btn.btn-default {padding:10px;}
.btn:hover {
    background-color: #0b223d; /* bleu foncé (bannière) */
  border-color: #0b223d;
  color: #ffffff;
}
.btn.btn-back i{margin-right:20px;}
.btn.btn-next i{margin-left:20px;}
.btn.btn-spc{margin:30px 0;}

.btn-number{width:30px;height:30px;text-align:center;line-height:30px;color:#fff;background:#012d52;text-shadow:1px 0 1px rgba(0,0,0,0.2);border-radius:50%;border:0;position:relative;margin:0 5px;font-size:12px;}
.btn-number:hover{color:#fff;background:#012d52;}


.btn-number.btn-red{background:#f4b0a9;}
.btn-number.btn-red:hover{background:#e74c3c;}

.btn-border{color:#012d52;background:transparent;border:2px solid #012d52;margin:15px 0;}

.btn-red, .btn-red:focus, .btn-red:visited {color:#fff;background:#e74c3c!important;border:none;}
.btn-red:hover{background:#c2392b!important;}
.btn-sm{padding:5px 10px;font-size:12px;margin:0;}
.btn-sm:hover{padding:5px 10px;font-size:12px;margin:0;}

hr.spacer{border:0;height:40px;margin:0;}

.navbar{
  background:#fff;
  padding:10px 0;
  box-shadow:1px 0 2px rgba(0,0,0,0.2);
}
nav ul li, nav ul li a{display:inline-block!important;}
.nav, .social {float:right;margin:0 10px;position:relative;}
.navigation{padding:10px 0;}

.nav>li>a{color:#012d52;padding:0 10px;margin:0 10px;height:35px;line-height:35px;}
.nav .login a{color:#012d52;}

.nav > li { position: relative; }
.nav li:last-child:after{content:"";display:block;position:absolute;height:20px;top:7px;width:1px;background:#bdc3c7;right:-2px;}
.logged ul.social{padding-right:20px;}
.logged ul.social:after{content:"";display:block;position:absolute;height:20px;top:7px;width:1px;background:#bdc3c7;right:-2px;}

.social a:hover{color:#012d52;}
.nav a:hover{color:#012d52;}

a.cart, a.avatar{float:right;padding:0 20px;margin:0 10px;height:35px;line-height:35px;position:relative;}
.logged a.avatar:after{content:"";display:block;position:absolute;height:20px;top:7px;width:1px;background:#bdc3c7;right:-2px;}

a.avatar img{width:35px;height:35px;border-radius:50%;margin-right:10px;}
a.avatar span{display:inline-block;height:35px;line-height:35px;float:right;padding-left: 10px;}

a.cart i{width:35px;height:35px;position:relative;text-align:center;line-height:35px;border:2px solid #012d52;display:inline-block;border-radius:50%;}
a.cart .number{width:18px;height:18px;position:absolute;text-align:center;line-height:18px;display:inline-block;border-radius:50%;background:#012d52;font-size:10px;color:#fff;top:-5px;right:-5px;padding-right:0;margin-right:0;}
a.cart {padding-right:0;margin-right:0;}

/* Bootstrap 5 : navbar-toggler (remplace .navbar-toggle) */
.navbar-toggler{font-size:25px;color:#012d52;margin:0;border:1px solid rgba(1,45,82,0.3);padding:0.35rem 0.65rem;}
.navbar-toggler:focus{outline:var(--focus-outline);outline-offset:var(--focus-outline-offset);box-shadow:0 0 0 0.2rem rgba(1,45,82,0.25);}
.navbar-toggler .icon{display:block;}

/* Accessibilité : contour bleu sur les zones cliquables au focus */
input:focus, select:focus, textarea:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
[role="button"]:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}


.invalid {
    height: 44px;
    line-height: 44px;
    border-color: #BD2727;
    border-radius: 5px!important;
}

.banner{background:url('../img/header-bg.svg') no-repeat top center;background-size:cover; }
.banner-content{padding:120px 0;}
.banner h1{font-size:60px;color:#fff;font-family: 'montserratultralight';text-shadow:1px 0 1px rgba(0,0,0,0.2);}
.banner h4{font-size:30px;color:#fff;font-family: 'montserratultralight';text-shadow:1px 0 1px rgba(0,0,0,0.2);}
.banner p{font-size:18px;color:#fff;margin:20px 0 40px 0;text-shadow:1px 0 1px rgba(0,0,0,0.2);}

.search input {height:60px;line-height:60px;float:left;width:80%;border-radius:5px 0 0 5px !important;}
.search .btn {height:60px;line-height:60px;float:left;width:20%;padding:0;border-radius:0 5px 5px 0;font-size:16px;}
.search .error-container{padding:10px;position:relative;background:#e74c3c;color:#fff;text-align:left;border-radius:5px;font-size:12px;}
.search .error-container-conf{padding:10px;position:relative;background:#e74c3c;color:#fff;text-align:left;border-radius:5px;font-size:12px;}
.search .error-container-conf:before{width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #e74d3c transparent;top:-10px;left:20px;content:"";display:block;position:absolute;}
.search .error-container:before{width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #e74d3c transparent;top:-10px;left:20px;content:"";display:block;position:absolute;}
.search .error-container6 {
    padding: 10px;
    position: relative;
    background: #3c763d !important;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    font-size: 12px;
}
.search .error-container6:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #3c763d transparent;
    top: -10px;
    left: 20px;
    content: "";
    display: block;
    position: absolute;
}
.avantages{background:rgba(255,255,255,0.75);padding:20px 0;}
.avantages .av-item{padding:0 30px;}
.avantages .av-item:after{content:"";display:block;position:absolute;height:60%;top:20%;width:1px;background:#bdc3c7;right:-2px;}
.avantages .av-item.last:after{display:none;}
.avantages .ico-av{float:left;font-size:30px;color:#9e9e9e;margin-right:20px;}
.avantages .txt-av{float:left;color:#34495e;font-family: 'montserratbold';}
.avantages .txt-av span{display:block;font-family: 'montserratultralight';}

.product-list{padding:30px 0;}
.product-list h2{position:relative;color:#333;font-family: 'montserratultralight';font-size:30px;text-align:center;text-shadow:1px 0 1px rgba(0,0,0,0.2);padding-bottom:20px;margin-bottom:50px;}
.product-list h2:after{content:"";display:block;position:absolute;height:2px;width:140px;background:#012d52;left:50%;margin-left:-70px;bottom:0;}
.product-list .product-item{margin:30px 0;}
.product-list .img-product{text-align:center;}
.product-list .product-item h3.title-product{position:relative;color:#012d52;font-family: 'montserratultralight';font-size:24px;margin:30px 0;padding-bottom:30px;min-height: 102px;}
.product-list .product-item h3.title-product:after{content:"";display:block;position:absolute;height:2px;width:100px;background:#bdc3c7;left:0;bottom:0;}
.product-list .desc-product{text-align:justify;}

.product-list .plus-item{
    margin: 30px 0;
    background-size: cover;
    border-radius: 5px;
    color: #fff;
    padding: 30px 20px;
    background-color: #03294e;
    text-align: center;
}
.product-list .plus-item a .img-product{text-align:center;-webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;}
.product-list .plus-item h3.title-product{position:relative;color:#fff;font-family: 'montserratultralight';font-size:24px;margin:20px 0;}

.product-list .plus-item a .desc-product{text-align:justify;color:#fff;}
.product-list .plus-item a:hover .img-product{-webkit-transform: rotate(360deg);
  transform: rotate(360deg);}

.d-none {
    display: none;
}

.title{
  padding:50px 0;
  background-size:cover;
  background-color: #0f2c4f;
  margin-top: 34px;
}
.title .subtitle{font-size:16px;color:#fff;font-family: 'montserratregular';}
.content-container{padding:70px 0;}


.table-like{border-bottom:1px solid #bdc3c7;padding:20px 0 30px 0;}
.table-like .title-cell{font-size:20px;font-family: 'montserratultralight';margin-bottom:20px;}
.table-like .title-ico{font-size:18px;font-family: 'montserratregular';line-height:40px;}
.table-like .title-ico i{color:#bdc3c7;}
.table-like .btn-remove{margin-top:55px;}
.total-cell{background:#f2f3f4; padding:20px;font-size:20px;font-family: 'montserratregular';}
.total-cell span{float:right;}
span.amount{float:right;font-family: 'montserratregular';}


.title2 {
  font-size: 18px;
  font-family: 'montserratregular';
  color: #012d52;text-transform:uppercase;margin-bottom:30px; }

.gray-bg{background:#f2f3f4;border-radius:5px;}

.g-block{padding:20px;}

.border-rows{border:1px solid #f2f3f4;border-radius:5px;}
.b-row{border-bottom:1px solid #f2f3f4;padding:20px;}
.b-row .details{margin-top:10px;color:#ababab;}
.borderBottom{border-bottom:1px solid #f2f3f4;padding-bottom:20px;margin-bottom:30px;}

.tabs-payment {margin:30px 0;}
.payment-nav li{float:none;display:inline-block;padding-bottom: 10px;}
.payment-nav li a{
position: relative;
    margin: 0 15px;
    display: inline-block;
    width: 200px;
    padding: 20px;
    border: 2px solid #012d52;
    color: #012d52;
    font-size: 18px;
    font-family: 'montserratregular';
    background: #fff;
}
.payment-nav li a i{font-size:50px;}
.payment-nav li a span{display:block;text-transform:uppercase;}

.payment-nav li a:hover, .payment-nav li a.active{border:2px solid #012d52;color:#012d52;font-size:18px;font-family: 'montserratregular';background:#012d52!important;color:#fff;}

.payment-nav li.active a:after{width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;border-radius: 5px;
border-color: #012d52 transparent transparent transparent;bottom:-10px;left:50%;margin-left:-10px;content:"";display:block;position:absolute;}

.payment-content{margin:30px 0;}

.radio-images{margin:20px 0;}
.radio-images .rad input{ visibility: hidden;}

.rad > input + img{ 
  padding:5px 10px;border:2px solid #bdc3c7;cursor:pointer;border-radius:5px;
}
.rad > input:checked + img{ 
  border:2px solid #012d52;
}
.modal {padding:30px;}
.modal .modal-header, .modal .modal-footer{border:0;text-align:center;}
.modal .close{
    display: flex;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #0f2c4f;
    color: #FFFFFF;
    border-radius: 50%;
    align-items:center;
    justify-content: center;
    margin-right: 10px;
    font-size:19px;
    font-weight: bold;
}
.modal .modal-title{color:#333;text-transform:none;font-family: 'montserratregular';text-align:center;}
.modal p{margin:10px 0 20px 0;}
.success-icon{margin:20px auto 10px auto; width:80px;height:80px;line-height:80px;text-align:center;background:#fff;border:2px solid #2ecc71;color:#2ecc71;font-size:30px;border-radius:50%;}



footer{
    background: #0f2c4f;
    padding: 40px 0 20px;
    color: #fff;
    font-size: 12px;
}
footer h3{color:#fff;font-family: 'montserratultralight';font-size:30px;margin-bottom:20px;}
footer span{display:block;}
footer p{margin-bottom:20px;}
footer .footer-logo{width:262px;height:137px;object-fit:contain;}
.footer-bottom{padding:20px 0;border-top:1px solid #666666;}
.footer-bottom li{display:inline-block;position:relative;}
.footer-bottom li a{margin:0 10px;color: #FFFFFF;}
.footer-bottom li:first-child:after{content:"";display:block;position:absolute;height:60%;top:20%;width:1px;background:#666666;right:-2px;}



@media screen and (max-width: 767px) {
[class*="col-"] {
   
    margin:20px 0;
}
nav [class*="col-"] {
   
    margin: 0;
}
/* mobile-actions et navbar-toggler centrés verticalement avec le logo, alignés à droite */
.navbar .mobile-actions { margin-top: 0; align-self: center; }
.navbar .navbar-toggler.d-md-none { align-self: center; flex-shrink: 0; }
.navbar .col-md-3.d-flex .logo { flex-shrink: 0; }
.navbar .col-md-3.d-flex { align-items: center; }
/* premier bloc après le logo (mobile-actions ou toggler) poussé à droite */
.navbar .col-md-3 > .logo + * { margin-inline-start: auto; }
.m-none{
  display: none !important;
}
.nav, .social {
    float: right;
    margin: 0 10px;
    position: relative;
    width: 100%;
    text-align: center;
}
/* "Visit our website" et liens .nav centrés sur mobile */
.navbar .nav {
    float: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}
/* Bootstrap 5 : .show remplace .in pour le menu déroulant */
.navbar-collapse.show, .navbar-collapse.collapsing {
    overflow-y: visible;
}

.nav li:last-child:after{display:none;}
a.avatar span {
    display: none;
}
.logged ul.social{padding-right:0;}
.logged ul.social:after{display:none;}
a.cart {
    padding-right: 0;
    margin-right: 33%;
    margin-bottom:20px;
}
.row-eq-height {
  display: block;

}
.banner h1 {
    font-size: 24px !important;

}
.banner h4 {
    font-size: 14px !important;

}
.banner p {
    font-size: 13px !important;
}
}

.block-account .row{
  margin-bottom: 15px;
}

.block-account .btn-edit{
  color: #fff;
  background: #012d52;
}

.block-account .btn-edit:hover{
  color:  #012d52
}
.mention-legales h3{
      margin: 30px 0 15px 0;
}


.recap_goog{
  float: left;
  margin-top: 30px;
  width: 100%;
}
.recap_goog .g-recaptcha{
  display: inline-block;
  margin: auto;
  margin-left: 70px;
}
.mgt30{
  margin-top: 30px;
}
.mgt30 p{
  color: #012d52
}
#rc-imageselect {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
a.btn_addprod{
    margin-top: 10px;
    display: inline-block;
    line-height: 40px;
}
.mw180 {
    min-width: 180px;
}
p.cl-blue{
    color: #012d52;
    font-size: 14px;
    font-weight: 600;
}
.btn,
.btn-default {
  background-color: #0f2c4f ;
  border-color: #0f2c4f;
  color: #ffffff;
  font-weight: 500;
}

/* Hover / Focus / Active */
.btn:hover,
.btn-default:hover,
.btn:focus,
.btn-default:focus,
.btn:active,
.btn-default:active {
  border-color: #0b223d;
}

/* Bootstrap 5 : .btn-secondary remplace .btn-default, styles custom conservés */
.btn-default:focus-visible,
.btn-secondary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(15, 44, 79, 0.35);
}

/* Compatibilité : .form-group (supprimé en BS5), conservé pour l’espacement */
.form-group { margin-bottom: 1rem; }
.text-white{
  color: #ffffff;
}
.img-product i{
  color: #FFFFFF;
  font-size: 100px;
  padding-bottom: 25px;
}
/* Overlay bannière */
.banner {
  position: relative;
  background-size: cover;
  background-position: center;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 44, 79, 0.80),
    rgba(15, 44, 79, 0.45)
  );
}
.banner > * {
  position: relative;
  z-index: 1;
}

/* Boutons globaux */
.btn,
.btn-primary {
  background-color: #0f2c4f;
  border-color: #0f2c4f;
  color: #fff;
}
.btn:hover,
.btn-primary:hover {
  background-color: #0b223d !important;
  border-color: #0b223d;
  color: #fff;
}
.btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(15, 44, 79, .35);
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
        display: flex !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        justify-content: flex-end;
    }
.header-right{
      min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
}
.social i{
    font-size: 30px;
    color: #173150;
}
.navbar-toggle {
    top: 21px;
}
/* Mobile icons in header (Bootstrap 5) */
.mobile-actions{
    float: right;
    margin-top: 35px;
    margin-right: 10px;
    color: #012d52;
}
.badge {
    background-color: #012d52;
}
.mobile-actions .micon{
  display: inline-block;
  margin-left: 12px;
  font-size: 20px;
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* Badge cart (mobile) */
.mobile-actions .badge{
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 12px;
}

/* Optionnel: cacher les textes Account/Logout en mobile dans le menu */
@media (max-width: 767px){
  .navigation.logged .avatar span{
    display: none;
  }
}

/* Bootstrap 5 : utilitaires responsive supplémentaires */
@media (max-width: 575.98px) {
  .banner-content { padding: 60px 15px; }
  .container { padding-left: 12px; padding-right: 12px; }
}
.search .btn:disabled i {
  opacity: 1;
  cursor: not-allowed;
  color: #ffffff !important;
}

.search .btn:disabled  {
    background-color: #0f2c4f !important;
    border-color: #0f2c4f !important;
    color: #fff !important;
     opacity: 1 !important;
}
.accept-condition label{ 
  display: flex !important;
}
#accept_condition{
  margin-right: 8px;
}
.add-minus-list{
      display: flex;
    align-items: center;
    justify-content: center;
}