/* =========================================================
   OPEN PECHE PRO — custom.css (SINGLE SOURCE OF TRUTH)
   Version: 2026-02-09
   Objectifs:
   - Cadre homogène sur TOUTES les pages (largeur/paddings/cards/inputs)
   - Styles OP ciblés par page (auth/registration/cart/checkout/my-account/cms7)
   - Header: panier fond vert
   - Anti "trait rouge" ciblé (auth/registration + footer)
   IMPORTANT:
   - PAS de règles globales "a { }" / ".btn-primary { }"
   - Tout est scoppé pour éviter de casser d’autres pages
   ========================================================= */


/* =========================================================
   0) TOKENS / VARIABLES
   ========================================================= */
:root{
  --op-green:#B6ED20;
  --op-green-dark:#9fd600;
  --op-black:#111;
  --op-text:#111;
  --op-muted:#6b7280;
  --op-border:#e7e7e7;

  --op-radius:18px;
  --op-radius-sm:12px;
  --op-shadow:0 10px 30px rgba(0,0,0,.06);

  --op-max:1200px;
  --op-pad:16px;
}


/* =========================================================
   1) GLOBAL FRAME — cadre homogène (SAFE)
   ========================================================= */

/* Largeur cohérente sur header/contenu/footer */
#header .container,
#wrapper > .container,
#footer .container{
  max-width: var(--op-max) !important;
}

/* Padding horizontal cohérent sur la zone contenu */
#wrapper > .container{
  padding-left: var(--op-pad) !important;
  padding-right: var(--op-pad) !important;
}

/* Cards: arrondis cohérents (sans changer la structure) */
.card,
.cart-summary,
.checkout-step,
#content .page-content,
#content .page-content.card,
#content .page-content.card-block{
  border-radius: var(--op-radius) !important;
}

/* Inputs cohérents */
input.form-control,
select.form-control,
textarea.form-control{
  border-radius: var(--op-radius-sm) !important;
}

/* Focus OP (safe) */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus{
  border-color: var(--op-green) !important;
  box-shadow: 0 0 0 3px rgba(182,237,32,.22) !important;
  outline: none !important;
}

/* Utilitaires boutons (à utiliser dans tes blocs CMS si tu veux) */
.op-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:var(--op-radius-sm);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
  text-decoration:none;
  white-space:nowrap;
}
.op-btn--green{
  background:var(--op-green);
  border:1px solid var(--op-green-dark);
  color:var(--op-black);
}
.op-btn--dark{
  background:#111;
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}


/* =========================================================
   2) HEADER — panier fond vert (corrige le bleu)
   ========================================================= */
#header .header-nav #_desktop_cart .blockcart .cart-preview,
#header .header-nav #_desktop_cart .blockcart .cart-preview.active{
  background: var(--op-green) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#header .header-nav #_desktop_cart .blockcart .cart-preview:hover{
  background: var(--op-green-dark) !important;
}

#header .header-nav #_desktop_cart .blockcart .cart-preview a{
  background: transparent !important;
}

#header .header-nav #_desktop_cart .blockcart .cart-preview *{
  color: var(--op-black) !important;
}


/* =========================================================
   3) ANTI “TRAIT ROUGE” (SAFE / ciblé)
   ========================================================= */

/* Auth + inscription: séparateurs agressifs */
body#authentication hr,
body#registration hr,
body#authentication .separator,
body#registration .separator,
body#authentication .hr,
body#registration .hr{
  display:none !important;
  border:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Footer: si un border-top rouge apparaît */
.page-footer,
#footer,
.footer-container{
  border-top: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   4) CMS #7 — Accueil Pro (.oppro-landing)
   ========================================================= */
body.page-cms.cms-id-7 .breadcrumb{ display:none !important; }

body.page-cms.cms-id-7 .oppro-landing{
  max-width: 860px !important;
  margin: 48px auto 32px !important;
  padding: 28px 26px !important;
  background: #fff !important;
  border: 1px solid var(--op-border) !important;
  border-radius: var(--op-radius) !important;
  box-shadow: var(--op-shadow) !important;
}

/* Boutons du bloc CMS #7 uniquement */
body.page-cms.cms-id-7 .oppro-landing a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:var(--op-radius-sm) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  margin:10px 10px 0 0 !important;
}

body.page-cms.cms-id-7 .oppro-landing a[href*="/connexion"],
body.page-cms.cms-id-7 .oppro-landing a[href*="controller=authentication"]{
  background:var(--op-green) !important;
  border:1px solid var(--op-green-dark) !important;
  color:var(--op-black) !important;
}

body.page-cms.cms-id-7 .oppro-landing a[href*="/inscription"],
body.page-cms.cms-id-7 .oppro-landing a[href*="controller=registration"]{
  background:#111 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}


/* =========================================================
   5) MY-ACCOUNT — carte propre + boutons (ciblage strict)
   ========================================================= */
body.page-customer-account:not(#authentication) #content .page-content,
body#my-account #content .page-content{
  max-width: 860px !important;
  margin: 48px auto 32px !important;
  padding: 26px !important;
  background: #fff !important;
  border: 1px solid var(--op-border) !important;
  border-radius: var(--op-radius) !important;
  box-shadow: var(--op-shadow) !important;
}

/* Boutons dans la zone page-content my-account uniquement */
body.page-customer-account:not(#authentication) #content .page-content a,
body#my-account #content .page-content a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:var(--op-radius-sm) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  margin:10px 10px 0 0 !important;
}

/* On ne stylise pas tous les liens; seulement ceux qui vont vers connexion/inscription */
body.page-customer-account:not(#authentication) #content .page-content a[href*="/connexion"],
body.page-customer-account:not(#authentication) #content .page-content a[href*="controller=authentication"],
body#my-account #content .page-content a[href*="/connexion"],
body#my-account #content .page-content a[href*="controller=authentication"]{
  background:var(--op-green) !important;
  border:1px solid var(--op-green-dark) !important;
  color:var(--op-black) !important;
}

body.page-customer-account:not(#authentication) #content .page-content a[href*="/inscription"],
body.page-customer-account:not(#authentication) #content .page-content a[href*="controller=registration"],
body#my-account #content .page-content a[href*="/inscription"],
body#my-account #content .page-content a[href*="controller=registration"]{
  background:#111 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}


/* =========================================================
   6) AUTH /connexion — 2 cartes + inputs full width
   (ne touche qu’à .oppro-auth / .oppro-auth-row / #login-form)
   ========================================================= */
body#authentication .oppro-auth{
  max-width: 980px !important;
  margin: 0 auto !important;
}

body#authentication .oppro-auth-row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#authentication .oppro-auth-row > [class*="col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 992px){
  body#authentication .oppro-auth-row{
    display:flex !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  body#authentication .oppro-auth-row > .col-12.col-lg-6{
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    display:flex !important;
    min-width: 0 !important;
  }
  body#authentication .oppro-auth-row .oppro-card{
    width: 100% !important;
    margin: 0 !important;
    background:#fff !important;
    border:1px solid var(--op-border) !important;
    border-radius: var(--op-radius) !important;
    box-shadow: var(--op-shadow) !important;
    padding: 32px !important;
  }
}

@media (max-width: 991.98px){
  body#authentication .oppro-auth-row > .col-12{
    margin-bottom: 18px !important;
  }
  body#authentication .oppro-card{
    background:#fff !important;
    border:1px solid var(--op-border) !important;
    border-radius: var(--op-radius) !important;
    box-shadow: var(--op-shadow) !important;
    padding: 28px !important;
  }
}

/* inputs full width (login form only) */
body#authentication #login-form .form-control{
  width:100% !important;
  max-width:100% !important;
}

/* show-password */
body#authentication #login-form button[data-action="show-password"]{
  background:var(--op-green) !important;
  border:1px solid var(--op-green-dark) !important;
  color:var(--op-black) !important;
  font-weight:900 !important;
}

/* bouton connexion (login form only) */
body#authentication #login-form #submit-login,
body#authentication #login-form .btn-primary{
  background:var(--op-green) !important;
  border:1px solid var(--op-green-dark) !important;
  color:var(--op-black) !important;
  font-weight:900 !important;
  border-radius:var(--op-radius-sm) !important;
}

/* bouton créer un compte (si ton HTML = .oppro-auth-btn) */
body#authentication .oppro-auth-btn,
body#authentication .oppro-card.no-account a[data-link-action="display-register-form"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:var(--op-radius-sm) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  background:var(--op-green) !important;
  border:1px solid var(--op-green-dark) !important;
  color:var(--op-black) !important;
}


/* =========================================================
   7) INSCRIPTION — enlever "Optionnel" société + optin partenaires
   ========================================================= */
#customer-form label[for="field-company"] ~ .form-control-comment,
#customer-form label[for="field-company"] ~ .optional{
  display:none !important;
}

#customer-form label[for="field-optin"],
#customer-form #field-optin,
#customer-form input[name="optin"]{
  display:none !important;
}


/* =========================================================
   8) PANIER — bouton Commander vert + liens/prix verts (scope #main)
   + retirer réassurance
   ========================================================= */
body#cart #block-reassurance,
body#cart .blockreassurance_product,
body#cart .reassurance,
body#cart [id*="reassurance"],
body#cart [class*="reassurance"]{
  display:none !important;
}

/* bouton commander */
body#cart #main .cart-summary .btn-primary,
body#cart #main .cart-summary a.btn-primary,
body#cart #main button.btn-primary{
  background:var(--op-green) !important;
  border-color:transparent !important;
  color:var(--op-black) !important;
  font-weight:900 !important;
  border-radius:var(--op-radius-sm) !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
}
body#cart #main .cart-summary .btn-primary:hover,
body#cart #main .cart-summary a.btn-primary:hover,
body#cart #main button.btn-primary:hover{
  background: var(--op-green-dark) !important;
}

/* liens + prix DANS le panier uniquement */
body#cart #main .product-line-info a,
body#cart #main .cart-overview a{
  color: var(--op-green-dark) !important;
  text-decoration: none !important;
}
body#cart #main .product-line-info a:hover,
body#cart #main .cart-overview a:hover{
  color: var(--op-green) !important;
  text-decoration: underline !important;
}
body#cart #main .product-price,
body#cart #main .price,
body#cart #main .current-price{
  color: var(--op-green-dark) !important;
  font-weight: 700 !important;
}


/* =========================================================
   9) CHECKOUT — steps + boutons (uniquement checkout)
   ========================================================= */
body#checkout .btn-primary,
body#checkout button.btn-primary,
body#checkout input.btn-primary{
  background:var(--op-green) !important;
  border-color:transparent !important;
  color:var(--op-black) !important;
  font-weight:900 !important;
  border-radius:var(--op-radius-sm) !important;
}

body#checkout .btn-primary:hover,
body#checkout button.btn-primary:hover,
body#checkout input.btn-primary:hover{
  background:var(--op-green-dark) !important;
}

body#checkout .checkout-step.-current .step-number,
body#checkout .checkout-step.-complete .step-number{
  background: var(--op-green) !important;
  color: var(--op-black) !important;
  border-color: transparent !important;
}
body { outline: none !important; }
html, body { outline: none !important; }
/* =========================================================
   INSCRIPTION – ajustements propres
   ========================================================= */

/* 1) Supprimer "Recevoir les offres de nos partenaires" */
body#registration #customer-form input[name="optin"],
body#registration #customer-form label[for="field-optin"],
body#registration #customer-form .custom-checkbox:has(input[name="optin"]){
  display: none !important;
}

/* 2) Centrer le bouton ENREGISTRER */
body#registration #customer-form .form-footer,
body#registration #customer-form .form-footer .submit,
body#registration #customer-form .form-footer button{
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Sécurité si le bouton est directement dans un <div> */
body#registration #customer-form button[type="submit"]{
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* =========================================================
   ACCUEIL PRO – ONGLET MOBILE
   ========================================================= */

@media (max-width: 768px){

  /* Wrapper général */
  .oppro-home{
    padding: 0 !important;
  }

  /* Barre d’onglets */
  .oppro-tabs{
    display:flex;
    gap:8px;
    margin-bottom:16px;
  }

  .oppro-tab{
    flex:1;
    text-align:center;
    padding:12px 10px;
    font-weight:800;
    border-radius:12px;
    cursor:pointer;
    background:#f3f4f6;
    color:#111;
  }

  .oppro-tab.active{
    background: var(--op-green);
  }

  /* Zones contenu */
  .oppro-panel{
    display:none;
  }

  .oppro-panel.active{
    display:block;
  }

  /* Boutons pleine largeur */
  .oppro-panel a,
  .oppro-panel button{
    width:100%;
    justify-content:center;
  }
}
/* =========================================================
   OPEN PECHE PRO — PATCH FINAL (top-bar + footer + forms + accueil pro)
   A coller tout en bas de custom.css
   ========================================================= */

/* 0) Sécurité : enlève le "trait rouge" (outline) */
html, body { outline: none !important; }

/* =========================================================
   1) TOP BAR (Contact / Déconnexion / Nom / Panier) -> À DROITE
   ========================================================= */

/* Sur Classic : .header-nav contient souvent .left-nav et .right-nav */
@media (min-width: 768px){
  #header .header-nav .container .row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important; /* on pousse tout à droite */
    flex-wrap:nowrap !important;
  }

  /* Colonnes bootstrap => auto width */
  #header .header-nav .container .row > [class*="col-"]{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Left et right nav => même ligne, alignées à droite */
  #header .header-nav .left-nav,
  #header .header-nav .right-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:18px !important;
  }

  /* Si un des blocs prend de la place inutile */
  #header .header-nav .left-nav{ margin-right:18px !important; }
  #header .header-nav .right-nav{ margin-left:0 !important; }
}

/* Texte top-bar NOIR (sauf bloc panier) */
#header .header-nav a,
#header .header-nav a:link,
#header .header-nav a:visited{
  color:#111 !important;
  text-decoration:none !important;
}
#header .header-nav a:hover{ text-decoration:underline !important; }

/* Icônes top-bar noires */
#header .header-nav i,
#header .header-nav .material-icons{
  color:#111 !important;
}

/* Panier (bloc) vert, texte noir */
#header .header-nav #_desktop_cart .cart-preview,
#header .header-nav #_desktop_cart .cart-preview.active{
  background: var(--op-green) !important;
  border-color: transparent !important;
}
#header .header-nav #_desktop_cart .cart-preview *{
  color:#111 !important;
}

/* =========================================================
   2) FOOTER -> tout NOIR (plus de vert)
   ========================================================= */

#footer, .footer-container{ color:#111 !important; }
#footer h3, .footer-container h3{ color:#111 !important; }

#footer a,
#footer a:link,
#footer a:visited,
.footer-container a,
.footer-container a:link,
.footer-container a:visited{
  color:#111 !important;
  text-decoration:none !important;
}
#footer a:hover, .footer-container a:hover{
  color:#111 !important;
  text-decoration:underline !important;
}

/* Cas spécial : liens qui passent en vert via le thème */
#footer .text-uppercase,
#footer .h3,
#footer .block-contact a{
  color:#111 !important;
}

/* =========================================================
   3) PANIER : éviter que "tout" passe en vert (si ça arrive)
   (on garde le vert sur prix / CTA, pas sur navigation / footer)
   ========================================================= */

/* Produit titre dans panier : noir (si tu ne veux pas vert) */
body#cart .cart-item .product-line-info a{
  color:#111 !important;
}
body#cart .cart-item .product-line-info a:hover{
  color:#111 !important;
  text-decoration:underline !important;
}

/* Prix panier -> vert OK */
body#cart .product-price,
body#cart .current-price,
body#cart .price{
  color: var(--op-green-dark) !important;
  font-weight:700 !important;
}

/* =========================================================
   4) INSCRIPTION : virer "Recevoir les offres de nos partenaires"
   + centrer le bouton ENREGISTRER
   ========================================================= */

/* On tente tous les sélecteurs possibles (PS varie selon version) */
body#registration #customer-form input[name="optin"],
body#registration #customer-form #field-optin,
body#registration #customer-form label[for="field-optin"],
body#registration #customer-form .custom-checkbox input[name="optin"],
body#registration #customer-form .custom-checkbox input#field-optin{
  display:none !important;
}

/* Souvent le checkbox est dans .custom-checkbox : on masque le bloc entier */
body#registration #customer-form .custom-checkbox:has(input[name="optin"]),
body#registration #customer-form .custom-checkbox:has(#field-optin){
  display:none !important;
}

/* Centrer le footer du form + le bouton */
body#registration #customer-form footer.form-footer{
  display:flex !important;
  justify-content:center !important;
  gap:12px !important;
}
body#registration #customer-form footer.form-footer button[type="submit"],
body#registration #customer-form footer.form-footer .btn{
  min-width:240px !important;
}

/* =========================================================
   5) ACCUEIL PRO : sur mobile, les 2 boutons en colonne
   (page content/7-accueil-pro avec tes classes .oppro-landing / .oppro-actions)
   ========================================================= */

@media (max-width: 768px){
  .oppro-landing .oppro-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .oppro-landing .oppro-actions .oppro-btn{
    width:100% !important;
    text-align:center !important;
  }
}
/* =========================================================
   FIX TOP BAR : Déconnexion / Nom / Panier AU-DESSUS de Rechercher (à droite)
   (desktop only, ultra stable)
   ========================================================= */
@media (min-width: 768px){

  /* ancre de positionnement */
  #header .header-nav,
  #header .header-nav .container{
    position: relative !important;
  }

  /* garde "Contactez-nous" à gauche */
  #header .header-nav .left-nav{
    position: relative !important;
    z-index: 1 !important;
  }

  /* le bloc de droite (déconnexion/nom/panier) -> collé à droite */
  #header .header-nav .right-nav{
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 10 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;

    /* évite qu’un width:100% le fasse se comporter bizarrement */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* au cas où le thème met des colonnes qui forcent la largeur */
  #header .header-nav .right-nav > *{
    flex: 0 0 auto !important;
  }
}
/* =========================================================
   TOP BAR : bouton "Contactez-nous" propre et compact
   ========================================================= */
@media (min-width: 768px){

  /* bouton Contactez-nous */
  #header .header-nav a[href*="contact"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important; /* UNE LIGNE */
    padding: 6px 12px !important;
    border-radius: 999px !important;

    background: #f3f4f6 !important; /* gris clair */
    color: var(--op-black) !important;

    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;

    text-decoration: none !important;
  }

  /* hover discret */
  #header .header-nav a[href*="contact"]:hover{
    background: #e5e7eb !important;
  }

  /* évite qu’il se casse sur 2 lignes */
  #header .header-nav a[href*="contact"] br{
    display:none !important;
  }
}
/* =========================================
   CHECKOUT : supprimer réassurance
   ========================================= */
body#checkout #block-reassurance,
body#checkout .block-reassurance,
body#checkout .reassurance,
body#checkout [class*="reassurance"]{
  display:none !important;
}
/* =========================================
   CHECKOUT : virer le bleu Prestashop
   ========================================= */

/* Liens */
body#checkout a{
  color: var(--op-black) !important;
}
body#checkout a:hover{
  color: var(--op-green-dark) !important;
}

/* Cadres sélectionnés (adresses) */
body#checkout .custom-radio input[type="radio"]:checked + span,
body#checkout .address-item.selected,
body#checkout .delivery-option input:checked + span{
  border-color: var(--op-green) !important;
  box-shadow: 0 0 0 2px rgba(182,237,32,.25) !important;
}
/* =========================================
   CHECKOUT : boutons
   ========================================= */
body#checkout .btn-primary{
  background: var(--op-green) !important;
  color: var(--op-black) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

body#checkout .btn-primary:hover{
  background: var(--op-green-dark) !important;
}

/* =========================================
   CHECKOUT : footer inutile
   ========================================= */
body#checkout footer,
body#checkout #footer{
  display:none !important;
}
/* =========================================
   CHECKOUT : header plus clean
   ========================================= */
body#checkout #header .logo{
  max-height: 48px !important;
}

/* Contactez-nous à droite */
body#checkout #header .header-nav{
  display:flex !important;
  justify-content:flex-end !important;
}