/* Habillage Vape & Conseil des pages Odoo relayees (30/09/2026). Complete la feuille du front
   injectee par odoo-skin.js ; ne s'applique qu'aux pages servies par Odoo. */
html:not(.vc-habillage-echec) #wrapwrap > header:not(.tete),
html:not(.vc-habillage-echec) header#top,
html:not(.vc-habillage-echec) footer#bottom,
html:not(.vc-habillage-echec) #wrapwrap > footer:not(.pied) { display: none !important; }
html.vc-habille body, html.vc-habille #wrapwrap { background: var(--creme, #f6f1e7); }
html.vc-habille #wrap { min-height: 50vh; padding-bottom: 48px; }
html.vc-habille #wrap img { display: inline-block; }
html.vc-habille #wrap .btn-primary,
html.vc-habille #wrap .btn-primary:hover {
  background: var(--foret, #004838); border-color: var(--foret, #004838); color: #fff;
}
html.vc-habille #wrap a:not(.btn) { color: var(--foret, #004838); }
html.vc-habille #wrap h1, html.vc-habille #wrap h2, html.vc-habille #wrap h3 { font-family: var(--titre, serif); }
html.vc-habille #wrap, html.vc-habille #wrap .form-control, html.vc-habille #wrap .btn { font-family: var(--texte, sans-serif); }
html.vc-habille .tete, html.vc-habille .pied { font-family: var(--texte, sans-serif); }

/* Pages compte (connexion, creation, mot de passe) : un encart centre, aux couleurs du site. */
html.vc-habille .vc-compte { padding: 56px 16px 72px; }
html.vc-habille .vc-compte__carte { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid rgba(0,72,56,.15); border-radius: 12px; padding: 32px 28px; }
html.vc-habille .vc-compte__carte h1 { font-size: 2rem; margin: 0 0 8px; }
html.vc-habille .vc-compte__chapeau { margin: 0 0 20px; }
html.vc-habille .vc-compte__carte .form-control { margin-bottom: 12px; }
html.vc-habille .vc-compte__carte .btn-primary { width: 100%; padding: 12px; border-radius: 999px; }
html.vc-habille .vc-compte__liens { margin: 20px 0 0; text-align: center; }
/* Avant l'habillage, on evite l'eclair du gabarit B2B partage sur ces pages. */
html:not(.vc-habille):not(.vc-habillage-echec) :is(#wrap, .oe_website_login_container):has(form.oe_login_form, form.oe_signup_form, form.oe_reset_password_form) { visibility: hidden; }

/* Connexion par Odoo.com (fournisseur OAuth du groupe) et doublon « Vous avez déjà un compte ? » :
   sans objet pour un client de la boutique. */
html.vc-habille .vc-compte .o_login_auth,
html.vc-habille .vc-compte .oe_login_buttons > a.btn-link[href^="/web/login"] { display: none !important; }

/* Reinitialisation du mot de passe (30/09) : liens de retour d'Odoo remplaces par les notres. */
html.vc-habille .vc-compte form a[href^="/web/login"] { display: none !important; }
html.vc-habille .vc-compte .vc-compte__action { display: block; width: 100%; padding: 12px; border-radius: 999px; text-align: center; color: #fff !important; text-decoration: none; }
html.vc-habille .vc-compte .vc-lien.btn-primary { background: var(--foret, #004838); border-color: var(--foret, #004838); }
@media (max-width: 480px) {
  html.vc-habille .vc-compte { padding: 32px 16px 48px; }
  html.vc-habille .vc-compte__carte { padding: 24px 18px; }
  html.vc-habille .vc-compte__carte h1 { font-size: 1.6rem; }
}
/* Gabarit de connexion d'Odoo : colonne de 300 px ; dans l'encart, le formulaire prend toute la largeur. */
html.vc-habille .vc-compte__carte form,
html.vc-habille .oe_website_login_container:has(.vc-compte) { max-width: 100% !important; width: 100%; margin: 0; padding: 0; }

/* Vider le panier (30/09/2026) : bouton au trait sous les articles, confirmation en <dialog>. */
.vc-vider__form { margin: 0; }
.vc-vider { display: flex; justify-content: flex-end; margin: -8px 0 32px; padding-top: 16px; border-top: 1px solid var(--trait, #ddd0ba); }
.vc-vider__bouton, .vc-vider__annuler, .vc-vider__confirmer { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 1.5px solid var(--foret, #004838); border-radius: 0; font: 600 var(--t15, .9375rem)/1.2 var(--texte, sans-serif); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background var(--duree, .18s) ease, color var(--duree, .18s) ease; }
.vc-vider__bouton, .vc-vider__annuler { background: transparent; color: var(--foret, #004838); }
.vc-vider__bouton:hover, .vc-vider__annuler:hover { background: var(--foret, #004838); color: var(--creme, #f6efe2); }
.vc-vider__confirmer { background: var(--foret, #004838); color: var(--creme, #f6efe2); }
.vc-vider__confirmer:hover { background: var(--profond, #012a22); border-color: var(--profond, #012a22); }
.vc-vider__bouton:focus-visible, .vc-vider__annuler:focus-visible, .vc-vider__confirmer:focus-visible { outline: 3px solid var(--foret, #004838); outline-offset: 3px; }
.vc-vider__annuler:disabled, .vc-vider__confirmer:disabled { opacity: .6; cursor: progress; }
.vc-vider__boite { width: min(460px, calc(100% - 32px)); max-width: 100%; padding: 32px 28px 28px; color: var(--encre, #14201c); background: var(--creme, #f6efe2); border: 1px solid var(--trait-fort, #bfae92); border-radius: 0; font-family: var(--texte, sans-serif); }
.vc-vider__boite::backdrop { background: rgb(1 42 34 / .6); }
.vc-vider__titre { margin: 0 0 8px; font: 500 var(--t27, 1.6875rem)/1.15 var(--titre, serif); color: var(--foret, #004838); }
.vc-vider__texte { margin: 0; }
.vc-vider__etat { margin: 8px 0 0; min-height: 1.5em; color: var(--encre-douce, #4a5850); }
.vc-vider__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 16px; }
body:has(.vc-vider__boite[open]) { overflow: hidden; }
@media (max-width: 480px) {
  .vc-vider { justify-content: stretch; }
  .vc-vider__form, .vc-vider__bouton { width: 100%; }
  .vc-vider__boite { padding: 24px 18px; }
  .vc-vider__actions { flex-direction: column-reverse; }
  .vc-vider__actions button { width: 100%; }
}

/* Audit du 30/09 : « Commander à nouveau rapidement » n'a pas de sens pour un visiteur anonyme. */
html.vc-habille #quick_reorder_button { display: none !important; }

/* ---------------------------------------------------------------------------------------------
   Tunnel d'achat : repères UX (audit du 30/09/2026, voir le bloc « Tunnel d'achat » de odoo-skin.js)
   --------------------------------------------------------------------------------------------- */
html main .ux-livraison-a-venir { color: var(--ux-attenue, #5b6470); font-size: 0.875rem; }
html main .ux-deja-client,
html main .ux-cgv,
html main .ux-attente-verif { margin: 12px 0 0; color: var(--ux-attenue, #5b6470); font-size: 0.9375rem; line-height: 1.5; }
html main .ux-deja-client { text-align: center; }
html main .ux-deja-client a,
html main .ux-cgv a { color: var(--ux-texte, #111); text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding: 6px 0; }
html main .ux-cgv--bouton { text-align: center; font-size: 0.8125rem; }
html main .ux-attente-verif:empty { display: none; }
/* Barre collante du panier : mobile et tablette seulement, masquée quand le vrai bouton est à l'écran. */
html .ux-barre-commande { display: none; }
@media (max-width: 991.98px) {
  html .ux-barre-commande {
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ux-fond, #fff); border-top: 1px solid var(--ux-ligne, #d0d5db);
    transition: transform .2s ease;
  }
  html .ux-barre-commande--cachee { transform: translateY(110%); }
  html .ux-barre-commande__total { display: flex; flex-direction: column; margin: 0; color: var(--ux-texte, #111); font-family: inherit; line-height: 1.2; }
  html .ux-barre-commande__total span { font: 500 0.75rem/1.4 inherit; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ux-attenue, #5b6470); }
  html .ux-barre-commande__total strong { font-size: 1.25rem; font-weight: 700; }
  html .ux-barre-commande__bouton { flex: 1 1 auto; max-width: 260px; min-height: 48px; justify-content: center; }
  html.ux-avec-barre body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { html .ux-barre-commande { transition: none; } }
html main .o_payment_form .ux-reseaux { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--ux-attenue, #5b6470) !important; }
html main .ux-encart-connexion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--ux-ligne, #d0d5db); background: var(--ux-fond-encart, transparent); }
html main .ux-encart-connexion p { margin: 0; color: var(--ux-texte, #111); }
html main .ux-encart-connexion a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
html main .ux-lien-fort { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
/* Vape & Conseil : couleurs de la charte, cibles tactiles de 48 px dans le tunnel. */
html { --ux-fond: var(--creme, #f6efe2); --ux-texte: #1d1d1b; --ux-attenue: #4f5b55; --ux-ligne: var(--trait, #ddd0ba); }
html main a[name="website_sale_main_button"], html main button[name="o_payment_submit_button"] { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
html main .css_quantity .btn, html main .css_quantity input { min-height: 44px; min-width: 44px; }
html main .o_address_signin.ux-encart-connexion { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 18px !important; border: 1px solid var(--ux-ligne); background: #fff !important; text-align: left !important; }
html main .o_address_signin.ux-encart-connexion span { color: var(--ux-texte) !important; flex: 1 1 14rem; }
html main .o_address_signin.ux-encart-connexion .btn { min-height: 44px; margin: 0 !important; }
html main .ux-livraison-a-venir { font-size: .875rem; }
/* Boutons − et + de la quantité : les icônes d'Odoo (oi-minus, oi-plus) ne s'affichaient pas. */
html main .css_quantity :is(.oi-minus, .fa-minus)::before { content: "−"; font-family: inherit; font-size: 1.25rem; font-weight: 600; font-style: normal; }
html main .css_quantity :is(.oi-plus, .fa-plus)::before { content: "+"; font-family: inherit; font-size: 1.25rem; font-weight: 600; font-style: normal; }
html main .css_quantity :is(.oi-minus, .oi-plus, .fa-minus, .fa-plus) { display: inline-block; color: var(--foret, #004838); }