/*
Theme Name: Faronville
Template: hello-elementor
Version: 1.3.16
Description: Thème enfant de Hello Elementor. Regroupe tout le CSS personnalisé du site Faronville en un seul endroit, à l'abri des mises à jour du thème parent, et modifiable dans Apparence → Éditeur de thème.
Author: Caracterre
Text Domain: faronville
*/

/*Page gin*/

input.qty {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* Prix au litre (fiche produit) */
.ddf-prix-litre {
    font-size: 13px !important;
    font-style: italic !important;
}

/*Scroll bar fix*/

/* =========================================
   FARONVILLE — BLOQUE TOUT OVERFLOW HORIZONTAL
   ========================================= */

html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    position: relative;
}

#page,
.site,
.site-main,
#content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}


/* MOBILE */
@media (max-width: 767px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .elementor,
    .elementor-section,
    .e-con,
    .e-con-inner {
        max-width: 100% !important;
    }
}
/* Chrome / Safari / Edge */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Firefox */
html,
body {
    scrollbar-width: none !important;
}

/* Transition (footer + popup) */
.bg-switch,
.bg-switch .dialog-message { transition: background-color .4s ease; }


/* ===== Slider vertical ===== */
.cc-stack{
  position:relative;
  height:300vh;            /* 3 images = 3 hauteurs d'écran */
}
.cc-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
.cc-slide{
  position:absolute;
  inset:0;
  overflow:hidden;
  will-change:transform;
}
.cc-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1);
  will-change:transform;
}
.cc-slide-1{ z-index:1; }
.cc-slide-2{ z-index:2; transform:translateY(100%); }
.cc-slide-3{ z-index:3; transform:translateY(100%); }

.cc-dots{
  position:absolute;
  top:50%;
  right:24px;
  transform:translateY(-50%);
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cc-dots .cc-dot{
  -webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  width:16px !important;
  height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:16px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:50% !important;
  background:#fff !important;
  cursor:pointer;
  line-height:0 !important;
  font-size:0 !important;
  flex:0 0 auto !important;
  transition:box-shadow .3s ease, background .3s ease;
  box-shadow:0 0 4px rgba(0,0,0,.35) !important;
}
.cc-dots .cc-dot.is-active{
  background:transparent !important;
  box-shadow:inset 0 0 0 3px #fff, 0 0 4px rgba(0,0,0,.35) !important;
}


/* ===== Couleur par contexte : page + catégorie produit ===== */

/* WHISKY — marron */
body.page-id-1153 .bg-switch,
body.page-id-1153 .bg-switch .dialog-message,
body.product_cat-whisky .bg-switch,
body.product_cat-whisky .bg-switch .dialog-message { background-color: #77512D !important; }

/* VODKA — gris */
body.page-id-XXXX .bg-switch,
body.page-id-XXXX .bg-switch .dialog-message,
body.product_cat-vodka .bg-switch,
body.product_cat-vodka .bg-switch .dialog-message { background-color: #616161 !important; }

/* GIN — bleu */
body.page-id-YYYY .bg-switch,
body.page-id-YYYY .bg-switch .dialog-message,
body.product_cat-gin .bg-switch,
body.product_cat-gin .bg-switch .dialog-message { background-color: #385C79 !important; }

/* ===== Survol des gammes — passe DEVANT la couleur de contexte ===== */
body .bg-switch.is-1, body .bg-switch.is-1 .dialog-message { background-color: #77512D !important; }
body .bg-switch.is-2, body .bg-switch.is-2 .dialog-message { background-color: #616161 !important; }
body .bg-switch.is-3, body .bg-switch.is-3 .dialog-message { background-color: #385C79 !important; }


/*ScrollBar*/

/* ===========================
   MASQUER LA SCROLLBAR NATIVE
=========================== */

html {
  scrollbar-width: none;
}

body {
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}


/* ===========================
   SCROLLBAR FARONVILLE
=========================== */

.faronville-scrollbar {
  position: fixed;

  top: 16%;
  right: 22px;

  width: 4px;
  height: 68vh;

  background: #D9D9D9;

  border-radius: 999px;
  overflow: hidden;

  z-index: 99999;

  pointer-events: none;
}


/* Remplissage noir */

.faronville-scrollbar__progress {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 0%;

  background: #000000;

  border-radius: 999px;

  transform-origin: top;
  transition: height 0.12s linear;
}

/* BOUTON LONG FARONVILLE */

.long-button {
  width: fit-content;
  overflow: visible;
}

.long-button .elementor-button {
  width: fit-content;
  overflow: visible;

  transition:
    padding 0.35s cubic-bezier(.22, 1, .36, 1),
    width 0.35s cubic-bezier(.22, 1, .36, 1);
}

.long-button .elementor-button-content-wrapper {
  display: flex;
  align-items: center;

  gap: 0;

  transition: gap 0.35s cubic-bezier(.22, 1, .36, 1);
}

/* Icône cachée au repos */

.long-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 0;
  min-width: 0;

  overflow: hidden;

  transform: rotate(0deg) scale(0);
  transform-origin: center;

  opacity: 0;

  transition:
    width 0.35s cubic-bezier(.22, 1, .36, 1),
    min-width 0.35s cubic-bezier(.22, 1, .36, 1),
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    opacity 0.2s ease;
}

/* Hover : l'icône apparaît, tourne et pousse le contenu */

.long-button:hover .elementor-button-content-wrapper {
  gap: 10px;
}

.long-button:hover .elementor-button-icon {
  width: 18px;
  min-width: 18px;

  opacity: 1;

  transform: rotate(90deg) scale(1);
}

/* État normal */

.long-button .elementor-button-content-wrapper{
    gap:0px !important;
    transition:gap .35s cubic-bezier(.22,1,.36,1);
}

/* Hover */

.long-button:hover .elementor-button-content-wrapper{
    gap:16px !important;
}



/*Couleur texte et desc single*/

/* =========================
   VODKA
   ========================= */

.product_cat-vodka .product-custom-title h2 {
    color: #616161 !important;
}

.product_cat-vodka .product-range-tag {
    background-color: rgba(97, 97, 97, 0.20) !important;
}


/* =========================
   GIN
   ========================= */

.product_cat-gin .product-custom-title h2 {
    color: #385C79 !important;
}

.product_cat-gin .product-range-tag {
    background-color: rgba(56, 92, 121, 0.20) !important;
}


/* =========================
   WHISKY
   ========================= */

.product_cat-whisky .product-custom-title h2 {
    color: #77512D !important;
}

.product_cat-whisky .product-range-tag {
    background-color: rgba(119, 81, 45, 0.20) !important;
}

/*Fix typo catégorie*/

.product-type-title .elementor-heading-title {
    font-family: "futura100-book", sans-serif !important;
    font-weight: 300 !important;
}

.product-type-title .elementor-heading-title a {
    font: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}


/*Texture grain effect*/

.faronville-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none;
    z-index: 9999999;

    opacity: 0.05;

    background-image: url("https://distilleriedefaronville.com/wp-content/uploads/2026/08/64ea2d60f889e9794f2d0df1_grain.gif");
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
}


/*Fixed border radius*/

.parallax-mask {

    border-radius: 40px !important;

    overflow: hidden !important;

    isolation: isolate;

    transform: translateZ(0);

}

/*Effet hover single boucle*/

.archive-product-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;

    background-size: 100% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transition: background-size 0.5s ease;
}

/* Overlay sombre */
.archive-product-image::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0);

    transition: background 0.4s ease;

    z-index: 2;
    pointer-events: none;
}

/* Flèche */
.archive-product-image::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 44px;
    height: 44px;

    background-image: url("https://distilleriedefaronville.com/wp-content/uploads/2026/08/hover-arrow-boucle-archive.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0;

    transform: translate(-50%, -50%) scale(0.8);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

    z-index: 3;

    pointer-events: none;
}

/* Hover */
.archive-product-image:hover {
    background-size: 106% auto !important;
}

.archive-product-image:hover::before {
    background: rgba(0, 0, 0, 0.22);
}

.archive-product-image:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.archive-product-image::before {
    transition: opacity 0.5s ease !important;
}

/*Gradient caracteres*/
.image-whisky-gradient {
    position: relative;
}

.image-whisky-gradient::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        rgba(249, 235, 219, 1) 0%,
        rgba(249, 235, 219, 0.75) 18%,
        rgba(249, 235, 219, 0.25) 38%,
        rgba(249, 235, 219, 0) 58%
    );

    pointer-events: none;
    z-index: 2;
}

/*Footer link*/

footer .elementor-widget-text-editor p a{
	    font-size : 32px;
    transition: 0.2s ease-out ;
}

footer .elementor-widget-text-editor p a:hover{
    color: #FFFFFF80 !important;
}

.elementor-element-fcad19d a{
	 font-size : 32px;
    transition: 0.2s ease-out
}


.elementor-element-fcad19d a:hover{
    color: #FFFFFF80 !important;
}

 .value{
	border-radius : 0px 20px  20px  0px !important;
}


 .label{
	border-radius : 20px 0px  0px  20px !important;
}


/* =========================
   WOOCOMMERCE
   ========================= */

/* ===== Boutons WooCommerce (BLOCS) = animation "long-button" — V0.9 ===== */

/* ---- Miroir des valeurs du Kit Elementor ----
   Le Kit ne déclare --e-global-color-primary/secondary/text et
   --e-global-typography-text-font-family QUE sur .elementor-kit-4 (posée
   sur le <body>) : ces variables sont donc utilisables partout et sont
   référencées directement plus bas (pas de doublon). En revanche, il ne
   déclare AUCUNE variable pour les typos "Primaire", "Secondaire" ou
   "Accent" (H1/H2 = Alata, H3 = Instrument Serif italique ne sont écrites
   qu'en dur, jamais en var()) : elles sont donc mirroirées ici, dans un
   unique point à mettre à jour si tu changes ces polices dans Elementor
   (Réglages du site → Typographie globale). */
:root{
  --cc-font-title: "Instrument Serif", serif;   /* Police des titres (= H3 du Kit) */
  --cc-font-nav:   "Alata", sans-serif;          /* Police des labels/boutons (= H1/H2 du Kit) */

  --cc-card-radius: 22px;
  --cc-field-radius: 10px;
  --cc-hair: #e7e6e1;
  --cc-label: #616161;
  --cc-card-shadow: 0 10px 30px rgba(0,0,0,.05);
  --cc-focus: #385C79;
  --cc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17L17 7M17 15V7H9' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Base : fond = Principal, texte = Secondaire (couleurs globales Elementor) */
.wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:fit-content;
  overflow:visible !important;
  font-family:var(--cc-font-nav) !important;
  font-weight:500 !important;
  background-color:var(--e-global-color-primary) !important;
  color:var(--e-global-color-secondary) !important;
  border:none !important;
  border-radius:6px;
  padding:14px 26px;
  transition:
    background-color .25s ease,
    padding .35s cubic-bezier(.22,1,.36,1),
    width .35s cubic-bezier(.22,1,.36,1);
}

/* Verrouille couleur + poids + police, repos ET hover (le bloc les change sinon) */
.wc-block-components-button.wp-element-button,
.wc-block-components-button.wp-element-button:hover,
.wc-block-components-button.wp-element-button:focus,
.wc-block-components-button.wp-element-button .wc-block-components-button__text{
  color:var(--e-global-color-secondary) !important;
  font-family:var(--cc-font-nav) !important;
  font-weight:500 !important;
}

/* Wrapper texte = équivalent content-wrapper Elementor */
.wc-block-components-button.wp-element-button .wc-block-components-button__text{
  display:inline-flex !important;
  align-items:center;
  gap:0;
  overflow:visible !important;
  transition:gap .35s cubic-bezier(.22,1,.36,1);
}

/* Icône via ::before → placée AVANT le texte (comme long-button) */
.wc-block-components-button.wp-element-button .wc-block-components-button__text::before{
  content:"";
  display:inline-block;
  width:0;
  min-width:0;
  height:18px;
  opacity:0;
  transform:rotate(0deg) scale(0);
  transform-origin:center;
  background-color:var(--e-global-color-secondary);
  -webkit-mask:var(--cc-ico) center / contain no-repeat;
          mask:var(--cc-ico) center / contain no-repeat;
  transition:
    width .35s cubic-bezier(.22,1,.36,1),
    min-width .35s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1),
    opacity .2s ease;
}

/* Hover : fond conservé + icône qui sort et pivote (comme long-button) */
.wc-block-components-button.wp-element-button:hover{
  background-color:var(--e-global-color-primary) !important;
  opacity:.92;
}
.wc-block-components-button.wp-element-button:hover .wc-block-components-button__text{
  gap:16px;
}
.wc-block-components-button.wp-element-button:hover .wc-block-components-button__text::before{
  width:18px;
  min-width:18px;
  opacity:1;
  transform:rotate(90deg) scale(1);
}

/* Libellé dynamique du bouton "Commander" (montant, ou "Confirmer la
   réservation" pour une visite à 0€) posé par
   wooevent-caracterre-visites.php via attribut plutôt que mutation directe
   du texte (cf. commentaire JS) : le texte réel est masqué, le libellé
   visible vient du ::after, à la taille/graisse d'origine du bouton. */
.wc-block-components-button__text[data-ddf-label]{
  font-size:0 !important;
}
.wc-block-components-button__text[data-ddf-label]::after{
  content:attr(data-ddf-label);
  font-size:20px;
  font-weight:500;
}

/* ---- Boutons "Ajouter au panier" classiques (archive boutique + fiche
   produit) — même effet que ci-dessus, mais ce ne sont PAS des blocs Woo :
   pas de classe wp-element-button, pas de <span> interne autour du texte
   (juste du texte brut dans le <button>/<a>). L'icône est donc en ::before
   directement sur le bouton (icône à GAUCHE du texte, comme le bouton bloc
   Woo et les .long-button ci-dessus). ---- */
.add_to_cart_button,
.single_add_to_cart_button,
.ajax_add_to_cart{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:fit-content !important;
  overflow:visible !important;
  font-family:var(--cc-font-nav) !important;
  font-weight:500 !important;
  background-color:var(--e-global-color-primary) !important;
  color:var(--e-global-color-secondary) !important;
  border:none !important;
  border-radius:6px;
  padding:14px 26px !important;
  transition:
    background-color .25s ease,
    padding .35s cubic-bezier(.22,1,.36,1);
}
.add_to_cart_button::before,
.single_add_to_cart_button::before,
.ajax_add_to_cart::before{
  content:"";
  display:inline-block;
  width:0;
  min-width:0;
  height:18px;
  margin-right:0;
  overflow:hidden;
  opacity:0;
  transform:rotate(0deg) scale(0);
  transform-origin:center;
  background-color:var(--e-global-color-secondary);
  -webkit-mask:var(--cc-ico) center / contain no-repeat;
          mask:var(--cc-ico) center / contain no-repeat;
  transition:
    width .35s cubic-bezier(.22,1,.36,1),
    min-width .35s cubic-bezier(.22,1,.36,1),
    margin-right .35s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1),
    opacity .2s ease;
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.ajax_add_to_cart:hover{
  background-color:var(--e-global-color-primary) !important;
  color:var(--e-global-color-secondary) !important;
  opacity:.92;
}
.add_to_cart_button:hover::before,
.single_add_to_cart_button:hover::before,
.ajax_add_to_cart:hover::before{
  width:18px;
  min-width:18px;
  margin-right:16px;
  opacity:1;
  transform:rotate(90deg) scale(1);
}

/* Masque le lien "Voir le panier" (added_to_cart) que WooCommerce affiche
   à côté du bouton après un ajout au panier réussi (archive boutique). */
.added_to_cart{
  display:none !important;
}


/* =====================================================================
   Panier + Checkout (blocs WooCommerce) — design Faronville — V2.0
   ===================================================================== */

/* ---- -1. Centrage explicite du bloc dans la page. Le mécanisme Elementor
   (.e-con-inner{margin:0 auto}) est symétrique en théorie ; si le bloc
   panier apparaît décalé malgré ça, on force ici plutôt que de courir après
   un réglage de conteneur Elementor inaccessible en édition directe. ---- */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide{
  margin-inline: auto !important;
}

/* ---- 0. Base : hérite la police texte du Kit (fonctionne réellement via
   .elementor-kit-4 sur le <body>) mais à une taille adaptée à une UI de
   formulaire, pas au corps de texte marketing (20px). ---- */
.wc-block-cart,
.wc-block-checkout{
  font-family: var(--e-global-typography-text-font-family), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.wc-block-cart *:not(.wc-block-components-button__text),
.wc-block-checkout *:not(.wc-block-components-button__text){
  font-family: inherit !important;
}
/* Nom du produit ("Terre de Cérès") : c'est l'info principale de la ligne,
   il doit ressortir plus que le prix ou la description en dessous. */
.wc-block-components-product-name{
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--e-global-color-primary) !important;
}

/* Description produit ("Céréalier & équilibré", ou dans le résumé de
   commande du checkout "Gin frais et flora...") : sous-texte, lisible mais
   discret — même traitement panier et checkout. */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata *,
.wc-block-components-order-summary-item__description{
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--cc-label) !important;
}

/* Options de livraison/paiement (checkout) : labels des choix ("OFFERT",
   "Moyens de paiement", "Paiements par chèque"), cases à cocher ("Ajouter
   une note"...) — harmonisés à la taille de base plutôt que la petite
   taille WooCommerce par défaut.
   Note : les champs de carte bancaire ("Numéro de carte", "Date
   d'expiration"...) sont injectés par Stripe dans un iframe — leur taille
   n'est pas modifiable par ce CSS, seulement depuis la config JS Stripe. */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label,
.wc-block-components-checkbox__label,
.wc-block-components-payment-method-label{
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Petites mentions (livraison "OFFERT", note de TVA) : vraie petite légende,
   plus fine que la description produit ci-dessus. */
.wc-block-components-totals-item__description,
.wc-block-components-totals-footer-item-tax{
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--cc-label) !important;
}

/* Bulle de quantité (résumé de commande) : utilise background:currentColor,
   donc hérite la couleur du texte environnant (gris) — on la fixe en noir. */
.wc-block-components-order-summary-item__quantity{
  color: var(--e-global-color-primary) !important;
}

/* Résumé d'une étape complétée (ex : l'e-mail affiché sous "Coordonnées"
   une fois l'étape validée) : encore la petite taille WooCommerce par
   défaut, harmonisée comme le reste. */
.wc-block-components-checkout-step__description{
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Prix d'une ligne produit (panier/résumé) : 13px par défaut, trop discret
   par rapport au nom du produit juste au-dessus. */
.wc-block-components-product-price__value{
  font-size: 15px !important;
}

/* Lignes de totaux (Sous-total, Expédition...) : 13px par défaut. Le total
   général (plus grand, class distincte ci-dessous) reste plus imposant. */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value{
  font-size: 15px !important;
}

/* Méthode de livraison affichée sous "Expédition" (ex : "Colissimo relais") :
   10,5px par défaut — le pire décalage de taille de toute la page. */
.wc-block-components-totals-shipping__via{
  font-size: 14px !important;
}

/* Prix total d'une ligne dans le résumé de commande du checkout (classe
   distincte de celle du panier, oubliée au premier passage) : 13px par
   défaut. */
.wc-block-components-order-summary-item__total-price{
  font-size: 15px !important;
}

/* ---- 1. Titre principal : style "Votre panier" (Instrument Serif italique,
   pas de majuscules — réservé au grand titre de page). Les autres titres
   (Total panier, Résumé de commande, étapes du checkout) sont des titres
   secondaires : style "H2" (Alata gras majuscules), plus gros que les
   en-têtes de colonnes ci-dessous mais pas italique. ---- */
.wc-block-components-title{
  font-family: var(--cc-font-title) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2.4em !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--e-global-color-primary) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title{
  font-family: var(--cc-font-nav) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--e-global-color-primary) !important;
}

/* En-têtes de colonnes du tableau : style "H2" (Alata gras) mais plus petit
   que les titres ci-dessus — taille en px fixe pour garantir que les deux
   colonnes affichent exactement la même taille.
   Vraies classes (vérifiées dans le HTML réel — trompeuses de prime abord) :
     .wc-block-cart-items__header-image   → contient le texte "Produit"
     .wc-block-cart-items__header-product → contient "Détails" (masqué par
                                             WooCommerce par défaut, on n'y touche pas)
     .wc-block-cart-items__header-total   → contient "Total" */
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-total{
  font-family: var(--cc-font-nav) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--e-global-color-primary) !important;
}
.wc-block-cart-items__header-image *,
.wc-block-cart-items__header-total *{
  font: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* ---- 2. Bordure arrondie tout autour du tableau (comme la carte
   "Précisions" des fiches produit), avec un filet fin entre chaque ligne.
   border-collapse:separate + overflow:hidden sont nécessaires pour que le
   border-radius se voie correctement sur un <table> (collapse l'ignore
   dans plusieurs navigateurs). WooCommerce dessine sa propre bordure sur
   la LIGNE entière (grille CSS sur le <tr>), pas sur chaque cellule — on
   s'aligne dessus plutôt que d'ajouter une bordure par cellule (ce qui
   créait des segments décalés, les cellules n'ayant pas toutes la même
   hauteur). ---- */
/* La bordure arrondie est portée par le <div> qui enveloppe le tableau
   (wc-block-cart__main), pas par le <table> lui-même : border-radius +
   overflow:hidden sur un élément <table> ne s'affiche pas de façon fiable
   selon les navigateurs. */
.wc-block-cart__main{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-card-radius) !important;
  overflow: hidden !important;
  padding-right: 0 !important;   /* WooCommerce s'en servait comme espace avant la sidebar ;
                                     avec une bordure visible, cet espace doit être EXTERNE
                                     (voir le gap ci-dessous), pas un padding interne à la carte */
}
.wc-block-components-sidebar-layout{
  gap: 32px !important;
}
/* Les largeurs 65%/35% de WooCommerce laissaient 0 place pour le nouveau
   gap externe : sans compensation, les deux cartes ne tiennent plus sur
   une même ligne et la sidebar passe dessous. */
.wc-block-components-sidebar-layout .wc-block-components-main{
  width: calc(65% - 16px) !important;
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
  width: calc(35% - 16px) !important;
}
/* Sous 700px WooCommerce empile les deux colonnes (flex-direction: column,
   width: 100%) : nos largeurs !important ci-dessus, sans règle mobile, les
   écrasaient et laissaient panier/checkout à ~60% et ~30% de large. */
@media (max-width: 699px){
  .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-components-sidebar-layout .wc-block-components-sidebar{
    width: 100% !important;
  }
}
.wc-block-cart-items{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
  width: 100% !important;
}
.wc-block-cart-items__header,
.wc-block-cart-items__header th,
.wc-block-cart-item__total,
.wc-block-components-totals-item,
.wc-block-components-totals-wrapper{
  border: 0 !important;
  box-shadow: none !important;
}
.wc-block-cart-items__header::before,
.wc-block-cart-items__header::after,
.wc-block-cart-items__row::before,
.wc-block-cart-items__row::after{
  content: none !important;
  display: none !important;
}
.wc-block-cart-items__header th{
  border-bottom: 0 !important;
  padding: 20px 0 14px !important;
}
.wc-block-cart-items__header th:first-child{
  padding-left: 24px !important;
}
.wc-block-cart-items__header th:last-child{
  padding-right: 24px !important;
}
/* Une seule bordure, sur la ligne entière (pas sur les cellules) — sauf la
   dernière ligne, dont la bordure ferait doublon avec celle du tableau. */
.wc-block-cart-items__row{
  border-bottom: 1px solid var(--cc-hair) !important;
  padding-inline: 24px !important;
  column-gap: 24px !important;
}
.wc-block-cart-items__row:last-child{
  border-bottom: 0 !important;
}
/* Mobile : la grille WooCommerce garde une colonne produit de 132px fixe, qui
   avec nos 24px de marges + 24px d'écart faisait déborder la ligne (399px
   dans une carte de 335px) et rognait le total à droite. On passe sur une
   grille souple (image / produit / total) avec des marges réduites. */
@media (max-width: 699px){
  .wc-block-cart-items .wc-block-cart-items__row{
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    padding-inline: 16px !important;
    column-gap: 12px !important;
  }
  .wc-block-cart-items .wc-block-cart-item__product{
    grid-column: 2 !important;
  }
  .wc-block-cart-items .wc-block-cart-item__total{
    grid-column: 3 !important;
  }
}
.wc-block-cart-items__row td{
  border: 0 !important;
}
.wc-block-components-totals-footer-item{
  border-top: 1px solid var(--cc-hair) !important;
}

/* ---- 3. Carte récap (panier/checkout) ---- */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar{
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--cc-card-radius) !important;
  box-shadow: var(--cc-card-shadow) !important;
  padding: 28px 30px !important;
}
.wc-block-cart__sidebar > *,
.wc-block-checkout__sidebar > *,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Bouton "Modifier" (carte adresse) : au survol il prenait une couleur
   d'accent rose par défaut, pas la couleur principale du site. */
.wc-block-components-address-card__edit,
.wc-block-components-address-card__edit:hover,
.wc-block-components-address-card__edit:focus{
  background-color: transparent !important;
  color: var(--e-global-color-primary) !important;
}

/* ---- 4. Ligne "Total estimé" ---- */
.wc-block-components-totals-footer-item{
  padding-top: 18px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  /* Taille fixe plutôt qu'en em : la base héritée ici est celle, minuscule
     (13px), du CSS par défaut de WooCommerce sur .totals-item, pas celle du
     bloc (16px) — un em donnait un total moins gros que les lignes
     "Sous-total"/"Expédition" au-dessus, l'inverse de l'effet voulu. */
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Libellé "Total" dynamique (visite sur place) posé par
   wooevent-caracterre-visites.php via attribut plutôt que mutation directe
   du texte (cf. commentaire JS) : le texte réel est masqué, le libellé
   visible vient du ::after, à la même taille que la ligne ci-dessus. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label[data-ddf-label]{
  font-size: 0 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label[data-ddf-label]::after{
  content: attr(data-ddf-label);
  font-size: 18px;
  font-weight: 500;
}

/* ---- 5. Champs ---- */
.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-address-form input,
.wc-block-components-text-input textarea{
  border-radius: var(--cc-field-radius) !important;
  border: 1px solid var(--cc-hair) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus{
  border-color: var(--cc-focus) !important;
  box-shadow: 0 0 0 3px rgba(56,92,121,.15) !important;
  outline: none !important;
}

/* ---- 6. Blocs sélectionnables ---- */

.wc-block-components-radio-control{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* --- PAIEMENT : l'enveloppe (accordion-option) est la carte, le label dedans est nu --- */
.wc-block-components-radio-control-accordion-option{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius) !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: #fff !important;
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option{
  border: 0 !important;
  box-shadow: none !important;
}
.wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color: var(--cc-focus) !important;
}

/* --- LIVRAISON : le package est un conteneur NU (sinon double bordure) --- */
.wc-block-components-shipping-rates-control__package{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Chaque OPTION de livraison = la carte */
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius) !important;
  box-shadow: none !important;
  margin: 0 0 12px 0 !important;
  background: #fff !important;
}
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option:last-child{
  margin-bottom: 0 !important;
}
/* Option de livraison cochée : bordure accent */
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option-checked{
  border-color: var(--cc-focus) !important;
}

/* --- ADRESSE : carte encadrée --- */
.wc-block-components-address-card{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius) !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: #fff !important;
}

/* --- Neutralise les liserés ::before/::after natifs de WooCommerce
   (paiement + livraison), quelle que soit la variante de classe --- */
.wc-block-components-radio-control__option::before,
.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control-accordion-option::before,
.wc-block-components-radio-control-accordion-option::after,
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked--first-selected::after{
  border: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

/* ---- 7. Quantité : le cadre est arrondi + overflow:hidden ; les boutons
   internes gardent leur propre border-radius WooCommerce (4px) qui ne
   coïncide pas avec le cadre (10px) — au survol, l'anneau de focus (box-
   shadow inset) de WooCommerce dessine alors un coin visiblement différent
   pendant un instant. On neutralise le radius des boutons pour que seul le
   cadre extérieur soit arrondi (rendu stable, plus de flash). ---- */
.wc-block-components-quantity-selector{
  border-radius: var(--cc-field-radius) !important;
  border: 1px solid var(--cc-hair) !important;
  overflow: hidden !important;
}
.wc-block-components-quantity-selector__button{
  border-radius: 0 !important;
}


/**** CGV & politique de confidentialite. ***/
/* H2 réduits sur les 2 pages légales (CGV id 3 + confidentialité id 10) */
.page-id-3 h2,
.page-id-10 h2{
  font-size:1.5rem !important;
	padding-top : 25px
}

.page-id-3 h3,
.page-id-10 h3{
  font-size:1.5rem !important;
	padding-top : 10px
}

.page-id-3 hr,
.page-id-10 hr{
	margin-top : 35px
}


/* =====================================================================
   Formulaire de réservation de visites (plugin WooEvent) — Faronville
   Classes générées par wooevent-caracterre-visites.php (shortcode
   [cev_calendrier]) — CSS de mise en page uniquement côté plugin,
   l'habillage visuel (typo, couleurs, cartes) est ici comme pour le
   reste du site.
   ===================================================================== */
.cev-booking{
  font-family: var(--cc-font-nav), sans-serif !important;
  max-width: 420px;
  background: #fff;
  border-radius: var(--cc-card-radius);
  box-shadow: var(--cc-card-shadow);
  padding: 28px 30px;
}
.cev-booking *{
  font-family: inherit !important;
}

/* En-tête mois (‹ Novembre 2026 ›) */
.cev-cal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.cev-cal-title{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 15px;
  color: var(--e-global-color-primary);
}
.cev-nav{
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--cc-hair) !important;
  background: #fff !important;
  color: var(--e-global-color-primary) !important;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.cev-nav:hover:not(:disabled){
  background: var(--e-global-color-primary) !important;
  color: var(--e-global-color-secondary) !important;
}
.cev-nav:disabled{ opacity: .3; }

/* Grille du calendrier */
.cev-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cev-dow{
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cc-label);
  padding: 4px 0 8px;
}
.cev-cell{
  width: 38px;
  height: 38px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: .3;
  font-size: 14px;
}
.cev-cell.cev-has{ opacity: 1; font-weight: 600; }
.cev-cell.cev-open{ cursor: pointer; box-shadow: inset 0 0 0 1px var(--cc-hair); }
.cev-cell.cev-open:hover{ background: rgba(0,0,0,.05); }
.cev-cell.cev-closed{ opacity: .35; text-decoration: line-through; }
.cev-cell.cev-selected-day{
  background: var(--e-global-color-primary);
  color: var(--e-global-color-secondary);
  box-shadow: none;
}
.cev-empty{ visibility: hidden; }

/* Créneaux du jour sélectionné */
.cev-day-slots{ margin-top: 20px; }
.cev-day-title{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  color: var(--cc-label);
  margin-bottom: 10px;
}
.cev-slot{
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  padding: 12px 16px !important;
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius) !important;
  background: #fff !important;
  color: inherit !important;
  font-size: 15px;
  transition: border-color .2s ease;
}
.cev-slot:hover:not(:disabled){ border-color: var(--cc-focus) !important; }
.cev-slot.cev-slot-sel{
  border-color: var(--cc-focus) !important;
  box-shadow: none !important;
}
.cev-slot-off{
  opacity: .5;
  text-decoration: line-through;
  cursor: default;
}

/* Quantité */
.cev-qty-row{ margin: 20px 0; font-size: 15px; }
.cev-qty-row label{ display: flex; align-items: center; gap: 10px; }
.cev-qty{
  width: 70px;
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius) !important;
  padding: 8px 10px;
}
.cev-qty-row .description{
  font-size: 12px;
  color: var(--cc-label);
  margin: 6px 0 0;
}

/* Bouton de réservation — même traitement que les autres boutons du site */
.cev-submit{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 500 !important;
  background-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-secondary) !important;
  border: none !important;
  border-radius: 6px;
  padding: 14px 26px !important;
  transition: background-color .25s ease, opacity .25s ease;
}
.cev-submit:hover:not([disabled]){ opacity: .92; }
.cev-submit[disabled]{
  background-color: var(--cc-hair) !important;
  color: var(--cc-label) !important;
  cursor: default;
}

/* Visite « sur mesure » (classe posée par le plugin de visites) : ni prix « / personne » ni durée.
   Cible les blocs du modèle Elementor de la fiche produit par leur identifiant : si le modèle est
   reconstruit, mettre à jour ces identifiants (fiche : b1502e6, 147eac67 ; carte de la boucle : 84ac87c, cf59ef7, a7e5a17). */
body.cev-custom-visit .elementor-element-b1502e6,
body.cev-custom-visit .elementor-element-147eac67{
  display: none !important;
}
/* Bouton « Nous contacter » d'une visite sur mesure : reprend le style des boutons Elementor du site
   (valeurs de leurs réglages : fond primaire, bordure 2px, rayon 8px, 12px 16px, 16px). L'animation au
   survol (icône) vient de « .long-button » plus haut ; le fond reste plein au survol, comme ces boutons (le Kit
   voudrait l'éclaircir : sélecteurs renforcés). */
.elementor-kit-4 .cev-custom-contact .elementor-button,
.elementor-kit-4 .cev-custom-contact .elementor-button:hover,
.elementor-kit-4 .cev-custom-contact .elementor-button:focus{
  background-color: var(--e-global-color-primary);
  border: 2px solid var(--e-global-color-primary);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
}

/* Cartes de la liste des visites (boucle Elementor) : ni « Prochaine date », ni prix, ni « / personne ». */
.e-loop-item.cev-custom-visit .elementor-element-84ac87c,
.e-loop-item.cev-custom-visit .elementor-element-cf59ef7,
.e-loop-item.cev-custom-visit .elementor-element-a7e5a17{
  display: none !important;
}

.cev-nodates{
  font-style: italic;
  color: var(--cc-label);
}

/* Ombre pour distinguer la carte "En savoir +" (fiche produit) d'un fond
   de page lui-même très clair — sans ombre ni bordure, un fond blanc sur
   fond blanc devient invisible à l'œil malgré une valeur CSS correcte. */
.elementor-element-e0167b1{
  box-shadow: var(--cc-card-shadow) !important;
}


/* =========================================================
   GALERIE PRODUIT WOOCOMMERCE
   ========================================================= */


/* --- 1. Galerie principale : image + miniatures à droite --- */

.woocommerce-product-gallery {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px;
    width: 100% !important;
}


/* --- 2. Zone de l'image principale --- */

.woocommerce-product-gallery .flex-viewport {
    order: 1;
    flex: 1 1 auto;
    width: auto !important;

    /* Force un carré */
    aspect-ratio: 1 / 1;

    /* Empêche le contenu de dépasser */
    overflow: hidden !important;
}


/* --- 3. Wrapper WooCommerce/FlexSlider --- */

.woocommerce-product-gallery__wrapper {
    height: 100% !important;
}


/* --- 4. Chaque slide doit remplir entièrement le carré --- */

.woocommerce-product-gallery__image {
    height: 100% !important;
}


/* --- 5. L'image remplit le carré en cover --- */

.woocommerce-product-gallery__image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.woocommerce-product-gallery__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center;

    max-width: none !important;
    max-height: none !important;
}


/* =========================================================
   MINIATURES
   ========================================================= */


/* --- 6. Miniatures à droite en colonne --- */

.flex-control-nav.flex-control-thumbs {
    order: 2;

    display: flex !important;
    flex-direction: column !important;

    gap: 12px;

    width: 110px !important;
    flex: 0 0 110px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* --- 7. Annule le float et les 25% imposés par WooCommerce --- */

.flex-control-thumbs li {
    float: none !important;

    width: 100% !important;
    margin: 0 !important;

    list-style: none !important;
}


/* --- 8. Miniatures carrées et remplies --- */

.flex-control-thumbs li img {
    display: block !important;

    width: 100% !important;
    aspect-ratio: 1 / 1;

    object-fit: cover !important;
    object-position: center;

    cursor: pointer;
}

/* =========================================================

   BORDER RADIUS

   ========================================================= */

/* Grande image */

.woocommerce-product-gallery .flex-viewport {

    border-radius: 16px !important;

    overflow: hidden !important;

}

.woocommerce-product-gallery__image,

.woocommerce-product-gallery__image > a,

.woocommerce-product-gallery__image img {

    border-radius: 16px !important;

}

/* Petites images */

.flex-control-thumbs li,

.flex-control-thumbs li img {

    border-radius: 16px !important;

    overflow: hidden;

}


/* =====================================================================
   Panier mixte — bloc "À régler sur place" (visites) — Faronville
   Classes injectées par wooevent-caracterre-visites.php (Store API +
   filtres blocs panier/checkout) : .cev-onsite-item sur la ligne de la
   visite, .cev-onsite-block pour le récapitulatif dédié.
   ===================================================================== */

/* Bouton "Commander" : bloc natif "checkout-actions-block", en fin de colonne
   des champs (sous les conditions générales). Il avait été placé dans le
   résumé de commande, ce qui plantait le checkout en mobile (erreur React
   #185) : ne pas l'y remettre. */
.wp-block-woocommerce-checkout-actions-block{
  margin-top: 20px;
}

/* Bloc récapitulatif, sous les totaux habituels du résumé de commande. */
.cev-onsite-block{
  margin-top: 20px;
  border-radius: var(--cc-field-radius);
  background: #F9EFE7;
  border: 1px solid #E9D9C8;
  overflow: hidden;
  font-family: var(--cc-font-nav), sans-serif;
}
.cev-onsite-block__header{
  padding: 14px 16px 8px;
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #77512D;
}
.cev-onsite-block__total{
  display: flex;
  justify-content: space-between;
  padding: 0 16px 12px;
  font-weight: 700;
  font-size: 15px;
  color: #77512D;
}
.cev-onsite-block__caption{
  margin: 0;
  padding: 0 16px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a6a4a;
}


/* =====================================================================
   Mon compte (My Account) — Faronville
   Habillage du compte WooCommerce classique (tableau de bord, commandes,
   adresses, détails du compte, moyens de paiement) avec les mêmes
   fondamentaux que le reste du site : typographies (--cc-font-title en
   titre italique, --cc-font-nav en labels/nav), carte à coins arrondis,
   bordures fines, bouton avec flèche au survol (identique aux boutons
   "Ajouter au panier" du site), couleur de focus.
   NOTE : le thème/Elementor a des styles globaux `a`/`a:hover` et des
   bordures de tableau très agressifs (haute spécificité et parfois déjà
   !important) qui gagnent sur des règles "propres" sans !important —
   d'où le nombre important de !important ci-dessous, nécessaire pour
   verrouiller typo/couleur/bordures au repos ET au survol.
   ===================================================================== */

/* Base : le thème sème des tailles/graisses différentes selon les éléments
   WooCommerce classiques (paragraphe de résumé à 20px, cellules de tableau
   à 18px, labels sans style...). On uniformise TOUT le contenu du compte à
   une seule taille/graisse/couleur de départ, puis on ré-affine ensuite
   (titres, labels petites majuscules, tableaux) avec des sélecteurs plus
   précis qui gagnent naturellement sur ce reset. */
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content *,
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-order-received .woocommerce-order *{
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #000 !important;
}

/* Phrase de remerciement (page « Commande reçue »), juste sous le titre :
   traitée comme un sous-titre (italique, police des titres) plutôt que
   comme un simple paragraphe de notice — gagne sur le reset ci-dessus. */
body.woocommerce-order-received .woocommerce-thankyou-order-received{
  font-family: var(--cc-font-title), serif !important;
  font-style: italic !important;
  font-size: clamp(20px, 2vw, 30px) !important;
  line-height: 1.4 !important;
  color: var(--cc-label) !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto 40px !important;
}

/* Disposition générale : navigation (carte) + contenu, en flex plutôt
   que le float historique de WooCommerce. */
.woocommerce-account .woocommerce{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float: none;
  width: auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
  flex: 0 0 250px;
  background: #fff;
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-card-radius);
  padding: 8px;
  box-shadow: var(--cc-card-shadow);
}
.woocommerce-account .woocommerce-MyAccount-content{
  flex: 1 1 480px;
  min-width: 0;
}

/* Navigation : liste sans puces, séparateurs fins, libellés façon nav
   du site (Alata, majuscules), page courante en gras. Tout est verrouillé
   en !important, repos ET hover, sinon le thème réinjecte sa police/taille/
   couleur de lien par défaut au survol (glitch observé : texte qui rétrécit
   et passe en bleu générique au hover). */
.woocommerce-MyAccount-navigation ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-navigation li{
  border-bottom: 1px solid var(--cc-hair);
  list-style: none !important;
}
.woocommerce-MyAccount-navigation li:last-child{
  border-bottom: none;
}
.woocommerce-MyAccount-navigation li a,
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus,
.woocommerce-MyAccount-navigation li a:active,
.woocommerce-MyAccount-navigation li a:visited{
  display: block !important;
  padding: 14px 16px !important;
  font-family: var(--cc-font-nav), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #000 !important;
  text-decoration: none !important;
  background: none !important;
  opacity: 1;
  transition: opacity .15s ease !important;
}
.woocommerce-MyAccount-navigation li.is-active a{
  font-weight: 700 !important;
}
.woocommerce-MyAccount-navigation li a:hover{
  opacity: .6 !important;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
  color: var(--cc-label) !important;
}

/* Titres de section (« Adresse de facturation », etc.) : le h2/h3 du
   thème est démesuré (pensé pour d'autres blocs) — on le ramène à un
   style de sous-titre, cohérent avec le reste du site. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-column__title,
body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-order h3,
body.woocommerce-order-received .woocommerce-column__title{
  font-family: var(--cc-font-nav), sans-serif !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
  line-height: 1.3 !important;
}
.woocommerce-MyAccount-content mark{
  background: none !important;
  font-weight: 700 !important;
}

/* Notices (panier vide, succès, erreurs). L'icône WooCommerce (::before,
   positionnée en absolute) chevauchait le texte une fois le padding par
   défaut réduit — on la retire plutôt que de recalculer sa position. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error{
  background: #fff;
  border: 1px solid var(--cc-hair);
  border-left: 3px solid var(--cc-focus);
  border-radius: var(--cc-field-radius);
  padding: 16px 20px !important;
  color: #000;
  font-size: 14px;
  list-style: none;
  margin: 0 0 20px;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before{
  content: none !important;
  display: none !important;
}
.woocommerce-account .woocommerce-error{
  border-left-color: #b3261e;
}

/* Champs de formulaire (adresses, détails du compte). */
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius) !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus{
  border-color: var(--cc-focus) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--cc-focus) !important;
}
.woocommerce-account .woocommerce-MyAccount-content label{
  font-family: var(--cc-font-nav), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 11px !important;
  color: var(--cc-label) !important;
}
.woocommerce-account fieldset{
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-field-radius);
  padding: 20px;
  margin-top: 20px;
}
.woocommerce-account fieldset legend{
  font-family: var(--cc-font-nav), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}

/* Boutons : même effet "flèche qui sort au survol" que les boutons
   Ajouter au panier du site (.add_to_cart_button etc., voir plus haut),
   réappliqué ici puisque les boutons "Mon compte" sont des <button>/<a>
   bruts, sans cette classe. Tout en !important : sans ça, le hover global
   du thème réinjectait une police/taille différente sur certains boutons. */
.woocommerce-account .button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  overflow: visible !important;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--cc-font-nav), sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 13px !important;
  padding: 14px 26px !important;
  transition:
    background-color .25s ease,
    padding .35s cubic-bezier(.22,1,.36,1) !important;
}
.woocommerce-account .button::before{
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 18px !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: rotate(0deg) scale(0) !important;
  transform-origin: center !important;
  background-color: #fff !important;
  -webkit-mask: var(--cc-ico) center / contain no-repeat !important;
          mask: var(--cc-ico) center / contain no-repeat !important;
  transition:
    width .35s cubic-bezier(.22,1,.36,1),
    min-width .35s cubic-bezier(.22,1,.36,1),
    margin-right .35s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1),
    opacity .2s ease !important;
}
.woocommerce-account .button:hover{
  background: #222 !important;
  color: #fff !important;
  opacity: 1 !important;
}
.woocommerce-account .button:hover::before{
  width: 18px !important;
  min-width: 18px !important;
  margin-right: 16px !important;
  opacity: 1 !important;
  transform: rotate(90deg) scale(1) !important;
}

/* Tableau des commandes (liste). Bordures forcées sur toutes les cellules :
   le thème pose ses propres bordures par côté (haute spécificité), d'où
   les !important pour obtenir un simple filet horizontal entre les lignes. */
.woocommerce-account .woocommerce-orders-table{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius);
  overflow: hidden;
  border-collapse: collapse !important;
  width: 100%;
}
.woocommerce-account .woocommerce-orders-table thead th{
  font-family: var(--cc-font-nav), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  color: var(--cc-label) !important;
  border: none !important;
  border-bottom: 1px solid var(--cc-hair) !important;
  padding: 12px 16px !important;
  text-align: left !important;
}
.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th{
  border: none !important;
  border-bottom: 1px solid var(--cc-hair) !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  background: transparent !important;
  text-align: left !important;
}
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child th{
  border-bottom: none !important;
}
.woocommerce-account .woocommerce-orders-table .button{
  padding: 8px 16px !important;
  font-size: 11px !important;
}

/* Détail d'une commande (page « Commande n°X »). Le thème applique un
   gros font-size (18px, hérité d'un style pensé pour d'autres blocs) à
   toutes les cellules — on le ramène à une taille de tableau normale. */
.woocommerce-account .woocommerce-table,
body.woocommerce-order-received .woocommerce-table{
  border: 1px solid var(--cc-hair) !important;
  border-radius: var(--cc-field-radius);
  overflow: hidden;
  border-collapse: collapse !important;
  width: 100%;
  margin: 0 0 24px !important;
}
.woocommerce-account .woocommerce-table th,
.woocommerce-account .woocommerce-table td,
body.woocommerce-order-received .woocommerce-table th,
body.woocommerce-order-received .woocommerce-table td{
  border: none !important;
  border-bottom: 1px solid var(--cc-hair) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: left !important;
}
.woocommerce-account .woocommerce-table th,
body.woocommerce-order-received .woocommerce-table th{
  font-family: var(--cc-font-nav), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--cc-label) !important;
}
.woocommerce-account .woocommerce-table tfoot th,
.woocommerce-account .woocommerce-table tfoot td,
body.woocommerce-order-received .woocommerce-table tfoot th,
body.woocommerce-order-received .woocommerce-table tfoot td{
  font-weight: 700 !important;
}
.woocommerce-account .woocommerce-table tr:last-child th,
.woocommerce-account .woocommerce-table tr:last-child td,
body.woocommerce-order-received .woocommerce-table tr:last-child th,
body.woocommerce-order-received .woocommerce-table tr:last-child td{
  border-bottom: none !important;
}

/* Adresses : cartes côte à côte plutôt que le col2-set flottant — sur la
   page « Adresses » (.woocommerce-Address) ET sur le détail de commande
   (.woocommerce-column, mêmes classes u-column1/2 mais nommage différent). */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-columns--addresses,
body.woocommerce-order-received .woocommerce-Addresses,
body.woocommerce-order-received .woocommerce-columns--addresses{
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-columns--addresses .woocommerce-column,
body.woocommerce-order-received .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column{
  float: none !important;
  width: auto !important;
  flex: 1 1 260px;
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-card-radius);
  padding: 20px;
}
.woocommerce-account .woocommerce-Address-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  margin: 0 !important;
}
.woocommerce-account .woocommerce-Address-title .edit{
  font-family: var(--cc-font-nav), sans-serif !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.woocommerce-account .woocommerce-Address-title .edit:hover{
  text-decoration: underline !important;
}
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-column address,
body.woocommerce-order-received .woocommerce-Address address,
body.woocommerce-order-received .woocommerce-column address{
  font-style: normal;
}

@media (max-width: 782px){
  .woocommerce-account .woocommerce{
    flex-direction: column;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    flex-basis: auto;
    width: 100%;
  }
}


/* =====================================================================
   Fiche produit — masquage des lignes "champ perso" vides
   Classes posées par ddf_hide_empty_field_rows_body_class() (plugin
   Distillerie de Faronville – Fonctions). IDs figés du template Elementor
   "Single product" (id 582) : le conteneur de la ligne + le séparateur
   juste au-dessus, pour ne laisser ni ligne ni double-trait.
   ===================================================================== */
body.ddf-hide-quantite .elementor-element-3780e1b,
body.ddf-hide-quantite .elementor-element-a4f13be{
  display: none !important;
}
body.ddf-hide-degre .elementor-element-b3c6775,
body.ddf-hide-degre .elementor-element-c37bebc{
  display: none !important;
}
body.ddf-hide-vieillissement .elementor-element-8239d42,
body.ddf-hide-vieillissement .elementor-element-97ef408{
  display: none !important;
}
body.ddf-hide-type-fut .elementor-element-2fd84ba,
body.ddf-hide-type-fut .elementor-element-b275fd8{
  display: none !important;
}
body.ddf-hide-composition .elementor-element-9939e40,
body.ddf-hide-composition .elementor-element-369ec8d{
  display: none !important;
}
/* Nez / Bouche / Finale : pas de séparateur dédié, un seul bloc à masquer. */
body.ddf-hide-nez .elementor-element-9705973,
body.ddf-hide-bouche .elementor-element-7fa5a35,
body.ddf-hide-finale .elementor-element-8f50785{
  display: none !important;
}


/* =====================================================================
   Mon compte — Cartes de raccourci (tableau de bord)
   HTML généré par ddf_account_dashboard_cards() (plugin Distillerie de
   Faronville – Fonctions). Le second paragraphe par défaut de WooCommerce
   (explicatif, redondant avec ces cartes et la nav) est masqué ; le
   premier (« Bonjour {prénom} ») reste affiché.
   ===================================================================== */
body.woocommerce-dashboard .woocommerce-MyAccount-content > p:nth-of-type(2){
  display: none !important;
}

.ddf-account-dashboard{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.ddf-account-dashboard__card,
.ddf-account-dashboard__card:hover,
.ddf-account-dashboard__card:focus,
.ddf-account-dashboard__card:visited{
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--cc-bg, #F5F4F0);
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-card-radius);
  padding: 24px;
  text-decoration: none !important;
  color: #000 !important;
  transition: opacity .15s ease !important;
}
.ddf-account-dashboard__card{
  opacity: 1;
}
.ddf-account-dashboard__card:hover{
  opacity: .65 !important;
}
.ddf-account-dashboard__icon{
  color: #77512D;
  line-height: 0;
}
.ddf-account-dashboard__title{
  font-family: futura-100-book, sans-serif !important;
  font-style: normal !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}
.ddf-account-dashboard__desc{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  color: var(--cc-label) !important;
  line-height: 1.5 !important;
  flex: 1 1 auto;
}
.ddf-account-dashboard__arrow{
  align-self: flex-end;
  line-height: 0;
}


/* =====================================================================
   Livraison offerte — barre de progression + fil d'Ariane
   HTML posé par ddf_shipping_bar_html() / ddf_mini_cart_shipping_bar()
   (mini-panier) et par le JS ddf_cart_progress_js() (panier/checkout,
   blocs WooCommerce) — plugin Distillerie de Faronville – Fonctions.
   ===================================================================== */

.ddf-cart-progress{
  margin: 0 0 32px;
}

.ddf-shipping-bar__text{
  text-align: center;
  font-size: 14px;
  color: #000;
  margin: 0 0 10px;
}
.ddf-shipping-bar__text strong{
  font-weight: 700;
}
.ddf-shipping-bar__track{
  height: 8px;
  border-radius: 999px;
  background: var(--cc-hair);
  overflow: hidden;
}
.ddf-shipping-bar__fill{
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .3s ease;
}
.ddf-shipping-bar__caption{
  text-align: center;
  font-size: 12px;
  color: var(--cc-label);
  margin: 8px 0 0;
}

/* Version compacte dans le mini-panier (widget classique). */
.widget_shopping_cart_content .ddf-shipping-bar{
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--cc-hair);
  margin-bottom: 4px;
}
.widget_shopping_cart_content .ddf-shipping-bar__text{
  font-size: 13px;
}

/* Fil d'Ariane (Panier → Livraison → Paiement) — Panier/Commander uniquement. */
.ddf-steps{
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 24px 0 32px;
  padding-top: 5px;
}
.ddf-steps::before{
  content: "";
  position: absolute;
  /* Centrée sur le point (padding-top 5px + moitié des 11px du point),
     pas sur son bord haut — d'où le décalage observé au-dessus des points. */
  top: 10px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--cc-hair);
  z-index: 0;
}
.ddf-step{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ddf-step__dot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cc-hair);
  box-sizing: border-box;
}
.ddf-step--done .ddf-step__dot,
.ddf-step--active .ddf-step__dot{
  background: #000;
  border-color: #000;
}
.ddf-step__label{
  font-family: var(--cc-font-nav), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  color: var(--cc-label);
}
.ddf-step--done .ddf-step__label{
  color: #000;
}
.ddf-step--active .ddf-step__label{
  color: #000;
  font-weight: 700;
  text-decoration: underline;
}
/* Étape "Panier" cliquable (retour au panier depuis le checkout) : on
   neutralise les styles de lien agressifs du thème (couleur, transform,
   soulignement au hover) et on retombe sur l'opacité au survol, convention
   du site plutôt qu'un soulignement. */
a.ddf-step{
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity .15s ease;
}
a.ddf-step:hover,
a.ddf-step:focus{
  opacity: .6;
  color: inherit !important;
  transform: none !important;
  text-decoration: none !important;
}
a.ddf-step:hover .ddf-step__label,
a.ddf-step:focus .ddf-step__label{
  text-decoration: none !important;
}

@media (max-width: 480px){
  .ddf-step__label{ font-size: 9.5px; }
}

/* Popup Menu (post 166) : le scroll ne doit pas "fuir" vers la page derrière.
   Le popup reste dans le DOM une fois fermé (style="display: none;"), d'où
   le :not([style*="display: none"]) pour ne verrouiller la page que quand il
   est réellement ouvert. */
#elementor-popup-modal-166 .dialog-message{
  overscroll-behavior: contain;
  /* Elementor centre verticalement le contenu (align-items:center) : quand il
     est plus haut que l'écran (mobile), la moitié de l'excédent passe au-dessus
     du point de départ du scroll et devient inaccessible. On désactive ce
     centrage et on le refait avec des marges auto ci-dessous : elles centrent
     quand ça tient, et retombent à 0 (contenu en haut, scrollable) quand ça
     déborde. */
  align-items: flex-start !important;
}
#elementor-popup-modal-166 .dialog-message > .elementor{
  margin-block: auto;
}
html:has(#elementor-popup-modal-166:not([style*="display: none"])),
body:has(#elementor-popup-modal-166:not([style*="display: none"])){
  overflow: hidden !important;
}