/**
 * Domaine de la Vape — grille modulaire (Müller-Brockmann / style typographique international).
 *
 * Applique a TOUT le site, tunnel de commande compris (choix du commercant).
 *
 * Source unique : toutes les mesures descendent des variables de :root. Ne jamais
 * ecrire une valeur en dur ailleurs, sinon la grille derive.
 *
 * Releve avant intervention (bundle du theme) : 12 tailles de police differentes,
 * des line-height melangeant unitless et pixels, des gouttieres a 5/10/15/20/25/30 px.
 * Aucun rythme vertical. C'est ce que ce fichier remet en ordre.
 *
 * Baseline 8 px, leading 24 px (3 baselines) : toute hauteur de ligne, toute marge et
 * toute hauteur d'image sont des multiples de 8. C'est ce qui aligne les colonnes
 * entre elles d'un bloc a l'autre.
 */

:root {
    /* --- grille --- */
    --cols: 12;
    --bl: 8px;                    /* baseline */
    --lh: 24px;                   /* leading = 3 x baseline */
    --gutter: 24px;               /* 3 baselines */
    --margin: 24px;
    --maxw: 1200px;               /* largeur deja retenue par le theme */

    /* --- echelle typographique, chaque hauteur de ligne multiple de la baseline --- */
    --t-micro: 12px;   --lh-micro: 16px;   /* 2 bl — mentions, etiquettes */
    --t-small: 14px;   --lh-small: 24px;   /* 3 bl — texte secondaire */
    --t-body:  16px;   --lh-body:  24px;   /* 3 bl — texte courant */
    --t-lead:  20px;   --lh-lead:  32px;   /* 4 bl — chapo */
    --t-h3:    24px;   --lh-h3:    32px;   /* 4 bl */
    --t-h2:    32px;   --lh-h2:    40px;   /* 5 bl */
    --t-h1:    48px;   --lh-h1:    56px;   /* 7 bl — grands sauts d'echelle */

    /* --- encre --- */
    --ink: #111;
    --paper: #fff;
    --accent: #890000;            /* le rouge de la marque ; le document suisse propose
                                     #e4002b, mais l'accent d'une boutique est le sien */
}

/* ---------- Rythme vertical ----------
   Le leading est en pixels, pas unitless : sur les grandes tailles, un line-height
   unitless produit une hauteur de boite qui ne retombe pas sur la ligne. */
body {
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--ink);
}

p, li, dd, dt, td, th, label, input, select, textarea, button {
    line-height: var(--lh-body);
}

p, ul, ol, dl, table, figure, blockquote {
    margin-top: 0;
    margin-bottom: var(--lh);
}

h1, .h1 { font-size: var(--t-h1); line-height: var(--lh-h1); margin: 0 0 var(--lh); }
h2, .h2 { font-size: var(--t-h2); line-height: var(--lh-h2); margin: 0 0 var(--lh); }
h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-h3); margin: 0 0 var(--bl); }
h4, .h4 { font-size: var(--t-lead); line-height: var(--lh-lead); margin: 0 0 var(--bl); }
h5, h6, .h5, .h6 { font-size: var(--t-body); line-height: var(--lh-body); margin: 0 0 var(--bl); }

/* Titres : hierarchie par l'echelle et la graisse, pas par la couleur */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    text-wrap: balance;
}

/* Composition au fer a gauche, jamais justifiee : le drapeau est constitutif du style */
p, li, dd, .product-description, .rte {
    text-align: left;
    hyphens: none;
}

/* ---------- Grille de colonnes ----------
   Les conteneurs du theme deviennent une grille de 12 colonnes. Les enfants qui ne
   declarent rien occupent toute la largeur : aucune mise en page existante ne casse. */
.container,
.page-content,
#content-wrapper > .container,
.elementor-section > .elementor-container {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--margin);
}

/* Bande : rejoue les colonnes pour que chaque element se pose sur une LIGNE de colonne
   et non a l'oeil. subgrid quand il est disponible, repartition egale sinon. */
.ddlv-band {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gutter);
    row-gap: var(--lh);
    align-items: start;
}
.ddlv-band > * { grid-column: 1 / -1; }

/* ---------- Espacements : tous multiples de la baseline ---------- */
.elementor-section,
.page-content,
#main .page-content,
.block-category,
.products,
#products {
    padding-top: calc(var(--lh) * 2);
    padding-bottom: calc(var(--lh) * 2);
}

.card, .card-block, .block, .product-miniature {
    margin-bottom: var(--lh);
}

/* ---------- Filets : dans une bande de hauteur baseline, jamais flottants ---------- */
hr, .separator {
    border: 0;
    border-top: 1px solid rgba(17, 17, 17, .18);
    margin: var(--lh) 0;
    height: 0;
}

/* ---------- Tunnel de commande ----------
   Meme rythme que le reste : c'est le sens du choix « partout ». On ne touche a aucune
   largeur ni a aucun flux, seulement a l'espacement vertical et aux hauteurs de ligne. */
#checkout .card,
#checkout .card-block,
#order-confirmation .card,
.cart-grid .card,
.cart-summary,
#cart .card {
    margin-bottom: var(--lh);
}
#checkout .form-group,
.cart-grid .form-group,
#authentication .form-group {
    margin-bottom: var(--lh);
}
#checkout h1, #checkout h2, #checkout .h1, #checkout .h2,
.cart-grid h1, .cart-grid h2 {
    line-height: var(--lh-h2);
    margin-bottom: var(--lh);
}

/* ---------- Chiffres : grande taille, un trait du style ---------- */
.product-price, .price, .current-price span,
.cart-summary .value, .cart-total .value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ---------- Petits ecrans : la grille tient, les marges se resserrent ---------- */
@media (max-width: 767px) {
    :root {
        --margin: 16px;
        --gutter: 16px;
        --t-h1: 32px;  --lh-h1: 40px;
        --t-h2: 24px;  --lh-h2: 32px;
    }
}

/* ---------- Raccordement des grilles du theme a la grille du site ----------
   Le theme dispose ses listes de produits en CSS Grid (.elementor-grid-N) mais ne
   declare AUCUNE gouttiere : les colonnes se touchent et l'espacement vertical vient
   de marges posees au coup par coup. On les branche sur les memes variables que le
   reste, pour qu'il n'existe qu'une seule mesure d'ecart sur tout le site. */
.elementor-grid {
    column-gap: var(--gutter);
    row-gap: calc(var(--lh) * 2);
}

/* ---------- Hauteur des visuels produit ----------
   Le format d'image du theme est 250 px, qui ne retombe ni sur la baseline (8) ni sur
   le leading (24). Plutot que de regenerer les 1100 vignettes, on borne la hauteur du
   cadre a 240 px — 10 baselines, 10 x 24 — et l'image s'y inscrit sans deformation.
   Le haut ET le bas de chaque visuel tombent ainsi sur une ligne, ce qui aligne les
   cartes voisines meme quand leurs libelles font des hauteurs differentes. */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
    display: block;
}
.product-miniature .thumbnail-container img,
.js-product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
    height: 240px;              /* 10 leadings = 30 baselines */
    width: 100%;
    object-fit: contain;        /* le flacon garde ses proportions, jamais recadre */
    object-position: center;
}

/* Le bloc de texte sous le visuel occupe une hauteur fixe : les prix de deux cartes
   voisines se retrouvent sur la meme ligne, meme si un nom passe sur deux lignes. */
.product-miniature .product-description,
.js-product-miniature .product-description {
    min-height: calc(var(--lh) * 3);   /* 72 px */
    padding-top: var(--bl);
}

@media (max-width: 767px) {
    .product-miniature .thumbnail-container img,
    .js-product-miniature .thumbnail-container img,
    .product-miniature .product-thumbnail img {
        height: 168px;          /* 7 leadings = 21 baselines */
    }
    .elementor-grid { row-gap: var(--lh); }
}

/* ---------- Pastille « NEUF » ----------
   Retiree a la demande du commercant. Elle etait par ailleurs verte, seule couleur
   du site en dehors de la charte. On la masque en CSS plutot que de toucher au
   reglage PS_NB_DAYS_NEW_PRODUCT, qui alimente aussi la page « Nouveaux produits »
   — celle-ci reste utile et referencee dans le pied de page. */
.label-flag.type-new,
.label-flags .type-new,
.product-flag.new,
.product-flags .new {
    display: none !important;
}

/* ---------- Pagination ----------
   Le kit du theme la colore en #347bf0, un bleu qui n'appartient pas a la charte
   (il n'est pas dans la feuille du theme mais injecte en ligne : on le neutralise
   avec la meme specificite). La page courante prend le rouge de la marque. */
.pagination .page-numbers.current,
.pagination .current,
.pagination a.page-numbers:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--paper) !important;
}
.pagination .page-numbers,
.pagination a {
    color: var(--ink);
    line-height: var(--lh);
}
.pagination a:hover { color: var(--paper) !important; }

/* ---------- Alignement optique ----------
   Un titre en Playfair porte des jambages et des approches qui font que sa boite
   deborde legerement a gauche du filet de colonne. On compense pour que l'encre,
   et non la boite, s'aligne sur la colonne. */
h1, h2, .elementor-heading-title {
    margin-left: -0.02em;
}


/* ---------- Colonnes ramenees sur les lignes de la grille ----------
   Le constructeur de pages ecrit des largeurs arbitraires (63,978 %, 20 %, 17 %)
   dans des regles CSS generees, pas dans l'attribut style. Chacune est ramenee
   ici au douzieme le plus proche, pour que deux blocs de sections differentes
   retombent sur la meme ligne de colonne. */
@media (min-width: 992px) {
    .elementor-2 .elementor-element.elementor-element-3nfnng0 { width: 58.3333% !important; }   /* 7/12, etait 60.000% */
    .elementor-4 .elementor-element.elementor-element-dbjspel { width: 58.3333% !important; }   /* 7/12, etait 60.000% */
    .elementor-3 .elementor-element.elementor-element-flxkxs8 { width: 33.3333% !important; }   /* 4/12, etait 33.000% */
    .elementor-3 .elementor-element.elementor-element-eaz0mzs { width: 33.3333% !important; }   /* 4/12, etait 33.000% */
    .elementor-3 .elementor-element.elementor-element-jw9gkio { width: 33.3333% !important; }   /* 4/12, etait 33.000% */
    .elementor-2 .elementor-element.elementor-element-2tg9k90 { width: 16.6667% !important; }   /* 2/12, etait 20.000% */
    .elementor-2 .elementor-element.elementor-element-8cl1h31 { width: 16.6667% !important; }   /* 2/12, etait 20.000% */
    .elementor-4 .elementor-element.elementor-element-pppkvpv { width: 16.6667% !important; }   /* 2/12, etait 20.000% */
    .elementor-4 .elementor-element.elementor-element-xjrtxiz { width: 16.6667% !important; }   /* 2/12, etait 20.000% */
}

/* ---------- Les deux crans bas de l'echelle ----------
   Declares plus haut mais jamais appliques : sans cela, les mentions et le texte
   secondaire retombaient sur la taille du corps et cassaient la hierarchie. */
small, .small, .text-muted, figcaption,
.product-flags, .label-flag, .breadcrumb,
.product-reference, .product-quantities, .availability {
    font-size: var(--t-small);
    line-height: var(--lh-small);
}
.mentions, .legal, .form-text, .help-block,
.cart-summary .value small, sup, sub {
    font-size: var(--t-micro);
    line-height: var(--lh-micro);
}

/* ---------- Pages du compte client : largeur ----------
   Le tableau des commandes debordait de son cadre. La cause est un double
   emboitement de colonnes, releve dans les gabarits du theme :
     layout-left-column  ->  #content-wrapper en col-lg-9   (75 %)
     customer/page.tpl   ->  .my-account-links en col-lg-3  (25 % des 75 %)
   Il ne restait donc que ~56 % de la largeur au contenu, et le tableau,
   qui ne se comprime pas (colonnes en nowrap), sortait du cadre.

   On rend la pleine largeur au contenu sur ces pages : la colonne du layout
   n'y sert a rien, le menu du compte fait deja office de navigation laterale. */
.page-customer-account #content-wrapper,
.page-order-detail #content-wrapper,
.page-addresses #content-wrapper,
.page-order-follow #content-wrapper,
.page-discount #content-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
}
/* la colonne laterale du layout est vide sur ces pages : on la retire */
.page-customer-account #left-column,
.page-customer-account #right-column,
.page-order-detail #left-column,
.page-order-detail #right-column,
.page-addresses #left-column,
.page-addresses #right-column {
    display: none;
}

/* Le cadre du compte suit la largeur du site */
.page-customer-account #content.page-content,
.page-order-detail #content.page-content {
    max-width: 100%;
    overflow: visible;
}

@media (min-width: 992px) {
    /* menu du compte resserre, contenu elargi */
    .my-account-page-content > .my-account-links {
        flex: 0 0 22%;
        max-width: 22%;
    }
    .my-account-page-content > *:not(.my-account-links) {
        flex: 0 0 78%;
        max-width: 78%;
    }
}

/* Le tableau occupe la largeur disponible ; la colonne d'actions se limite
   a la place de ses boutons. */
.table-labeled { table-layout: auto; width: 100%; }
.table-labeled .order-actions { width: 1%; }

/* Si malgre tout le tableau reste plus large que son cadre, il defile
   a l'interieur au lieu de le traverser. */
.page-customer-account .table-responsive,
.page-order-detail .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Tableau des commandes ----------
   Deux tentatives ont echoue : laisser le tableau se dimensionner seul (il depassait),
   puis lui interdire les coupures (il depassait davantage). La cause de fond est que
   `table-layout: auto` laisse le navigateur elargir le tableau au-dela de son cadre
   des que la somme des largeurs minimales le depasse.

   On passe donc en `table-layout: fixed` : la largeur est imposee par le conteneur et
   repartie selon les pourcentages ci-dessous. Le tableau ne peut plus deborder, quel
   que soit le contenu des cellules. */
.page-customer-account .table-labeled,
.page-order-detail .table-labeled,
.table-labeled {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.table-labeled th,
.table-labeled td {
    padding: var(--bl);
    vertical-align: middle;
    line-height: var(--lh);
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Repartition : 100 % au total */
.table-labeled th:nth-child(1), .table-labeled td:nth-child(1) { width: 15%; white-space: nowrap; }  /* Réf. */
.table-labeled th:nth-child(2), .table-labeled td:nth-child(2) { width: 11%; white-space: nowrap; }  /* Date */
.table-labeled th:nth-child(3), .table-labeled td:nth-child(3) { width:  9%; white-space: nowrap; }  /* Prix */
.table-labeled th:nth-child(4), .table-labeled td:nth-child(4) { width: 16%; white-space: normal; }  /* Paiement */
.table-labeled th:nth-child(5), .table-labeled td:nth-child(5) { width: 15%; white-space: normal; }  /* État */
.table-labeled th:nth-child(6), .table-labeled td:nth-child(6) { width:  8%; white-space: nowrap; text-align: center; } /* Facture */
.table-labeled th:nth-child(7), .table-labeled td:nth-child(7) { width: 26%; }                       /* Actions */

/* Actions : les deux boutons cote a cote, sans deborder de leur colonne */
.table-labeled .order-actions,
.table-labeled td:last-child {
    white-space: normal;
    text-align: right;
    overflow: visible;
}
.table-labeled .order-actions a,
.table-labeled .order-actions .btn,
.table-labeled td:last-child a {
    display: inline-block !important;
    width: auto !important;
    margin: 2px 0 2px var(--bl);
    padding: calc(var(--bl) * 0.5) var(--bl);
    font-size: var(--t-small);
    line-height: var(--lh-small);
    white-space: nowrap;
}

/* Pastille d'etat : elle ne doit pas forcer la largeur de sa colonne */
.table-labeled .label,
.table-labeled .label-pill {
    display: inline-block;
    max-width: 100%;
    padding: calc(var(--bl) * 0.5) var(--bl);
    font-size: var(--t-small);
    line-height: var(--lh-small);
    border-radius: 2px;
    white-space: normal;
    box-sizing: border-box;
}

/* Sous 1200 px, la colonne « Paiement » cede sa place la premiere */
@media (max-width: 1199px) {
    .table-labeled th:nth-child(4), .table-labeled td:nth-child(4) { width: 14%; }
    .table-labeled th:nth-child(7), .table-labeled td:nth-child(7) { width: 28%; }
}

/* --------------------------------------------------------------------------
   Titre de la page d'accueil
   Presente pour les moteurs et les lecteurs d'ecran, discrete a l'oeil : la
   page est un bandeau visuel, un titre pleine taille y ferait doublon.
   Elle reste lisible et selectionnable — pas de texte masque.
   -------------------------------------------------------------------------- */
.titre-accueil {
    font-size: var(--t-small);
    line-height: var(--lh-small);
    font-weight: 400;
    color: var(--ink);
    opacity: .62;
    margin: 0;
    padding: var(--bl) var(--margin);
    max-width: var(--maxw);
    margin-inline: auto;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   Rythme vertical de la page d'accueil

   Mesure au DOM avant correction : 158 px de blanc entre la fin d'une rangee
   de produits et le titre de la suivante. Compose de la marge de section
   (70 px), du fond de colonne (15 px en haut comme en bas), de la marge du
   dernier widget (20 px) et de la marge sous le titre — 35 px dans une section,
   50 px dans l'autre, sans raison.

   On ramene tout sur la trame : 48 px entre deux sections (2 interlignes),
   24 px sous un titre (1 interligne). Les valeurs d'AxonCreator sont ecrites
   avec une specificite d'identifiant, d'ou !important — seul moyen de les
   reprendre sans toucher au contenu du constructeur.

   Portee limitee a #index : les autres pages gardent leur reglage.
   -------------------------------------------------------------------------- */
#index #content-wrapper .elementor-section {
    margin-bottom: calc(var(--lh) * 2) !important;   /* 48px */
}
#index #content-wrapper .elementor-column-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#index #content-wrapper .elementor-widget-wrap > .elementor-element:last-child {
    margin-bottom: 0 !important;
}
#index #content-wrapper .elementor-widget-heading .elementor-widget-container {
    margin-bottom: var(--lh) !important;             /* 24px, identique partout */
}

/* --------------------------------------------------------------------------
   Vignettes produit : le vide sous le prix

   Mesure au DOM : une vignette fait 408 px, son contenu s'arrete a 345.
   Les 63 px restants sont occupes par le bloc d'avis — qui est VIDE, la
   boutique n'a aucun avis client — et par un bouton en opacity 0.
   Sur deux rangees, ce vide se cumule et creuse la page.

   On retire le bloc d'avis. Pour le retablir le jour ou les avis existent :
   supprimer cette regle.
   -------------------------------------------------------------------------- */
.product-list-reviews,
.product-list-reviews .grade-stars,
.product-list-reviews .comments-nb {
    display: none !important;
}

/* Le fond du carrousel reservait 48 px a une pagination qui ne s'affiche pas */
#index #content-wrapper .products.axps-swiper-slider {
    padding-bottom: var(--lh) !important;   /* 24px */
}

/* --------------------------------------------------------------------------
   Bandeau cookies — panneau discret en bas a gauche

   Repris de 2M Numerique, ou le bandeau n'occupe plus toute la largeur du bas
   de page mais un panneau compact de 430 px cale en bas a gauche. Le module
   nrtcookielaw n'est pas touche : seul son habillage change, sa mecanique de
   consentement et son cookie restent les siens.

   Sur mobile le panneau prend la largeur disponible, marges comprises.
   -------------------------------------------------------------------------- */
#cookielaw {
    position: fixed !important;
    inset: auto 14px 84px !important;      /* haut / droite / bas */
    width: auto !important;
    z-index: 9999 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
@media (min-width: 640px) {
    #cookielaw {
        left: 18px !important;
        right: auto !important;
        max-width: 430px !important;
    }
}
#cookielaw .cookielaw-content {
    display: block !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 1px solid #e6e1e1 !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 40px rgba(17, 17, 17, .18) !important;
    padding: 16px !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
}
#cookielaw .cookielaw-content p {
    margin: 0 0 12px !important;
    font-size: var(--t-small);
    line-height: 20px;
}
#cookielaw a {
    color: var(--accent) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 0 !important;
}
#cookielaw-accept {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: var(--t-small) !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    cursor: pointer;
    transition: opacity .15s ease;
}
#cookielaw-accept:hover { opacity: .88 !important; }