/* Varela : feuille des pages intérieures du thème enfant (pas chargée sur l'accueil).
   Jetons, polices, en-tête et pied de page : voir base.css, dont cette feuille dépend.
   Typo de la charte (IBM Plex Sans), boutons sobres, WPForms, WooCommerce.
   Les réglages Elementor sont posés widget par widget, d'où les !important sur la typo et les boutons. */

/* ---------- 0. Couleurs et typos globales d'Elementor ramenées à la charte ----------
   Le kit 8 garde les valeurs par défaut d'Elementor (bleu, gris, vert, Roboto et Roboto Slab) :
   elles sont remplacées ici, sans toucher au kit. Le kit les pose sur le body (.elementor-kit-8). */

body.vd-refonte[class*="elementor-kit-"] {
  --e-global-color-primary: var(--vd-brun);
  --e-global-color-secondary: var(--vd-acier);
  --e-global-color-text: var(--vd-noir);
  --e-global-color-accent: var(--vd-brun);
  --e-global-typography-primary-font-family: 'IBM Plex Sans';
  --e-global-typography-secondary-font-family: 'IBM Plex Sans';
  --e-global-typography-text-font-family: 'IBM Plex Sans';
  --e-global-typography-accent-font-family: 'IBM Plex Sans';
}

/* ---------- 1. Police et texte courant ---------- */

body.vd-refonte {
  color: var(--vd-noir);
  -webkit-font-smoothing: antialiased;
}
/* Partout, sauf les polices d'icônes. */
body.vd-refonte,
body.vd-refonte *:not(i):not([class^="icon-"]):not([class*=" icon-"]):not([class*="fa-"]):not(.fa):not([class*="eicon"]):not(.dashicons):not(.star-rating) {
  font-family: var(--vd-font-text) !important;
}

body.vd-refonte :is(.elementor-widget-text-editor, .woocommerce-Tabs-panel, .blog-entry-summary, .term-description, .entry-content) {
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: var(--vd-noir) !important;
}
body.vd-refonte :is(.elementor-widget-text-editor, .woocommerce-Tabs-panel, .blog-entry-summary, .term-description) :is(p, li, span) {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
body.vd-refonte :is(.elementor-widget-text-editor, .woocommerce-Tabs-panel, .blog-entry-summary, .entry-content) a:not(.elementor-button) {
  color: var(--vd-brun) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.vd-refonte :is(strong, b) { font-weight: 500 !important; }

/* ---------- 2. Titres, par rôle ---------- */

/* Titre de page : 44 px, Regular, +8 %, capitales (cadre « En-tête, pages intérieures » de la maquette). */
body.vd-refonte :is(
  .elementor-widget-heading h1.elementor-heading-title,
  .term-description h1,
  .woocommerce-products-header__title,
  .single-post .entry-title,
  .vd-titre-page
) {
  font-family: var(--vd-font-title) !important;
  font-size: 44px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--vd-noir) !important;
}

/* Titre de fiche produit : même style, plus petit (noms longs). */
body.vd-refonte .shopengine-product-title .product-title {
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--vd-noir) !important;
}

/* Titre 2 : 30 px, Regular, +12 %. */
body.vd-refonte :is(.elementor-widget-heading h2.elementor-heading-title, .vd-titre-2) {
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--vd-noir) !important;
}

/* Titre de colonne : 22 px, Regular, +12 %. */
body.vd-refonte :is(.elementor-widget-heading h3.elementor-heading-title, .wpforms-container .wpforms-title) {
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--vd-noir) !important;
}

/* Titre 3 (noms de modèles, petits titres) : 16 px, Medium, +16 %. */
body.vd-refonte :is(
  .elementor-widget-heading :is(h4, h5, h6).elementor-heading-title,
  .elementor-image-box-title,
  .vd-titre-3
) {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--vd-noir) !important;
}

/* Surtitre : 12 px, Medium, +20 %. */
body.vd-refonte :is(.vd-surtitre, .widget-title, .sidebar-box .wp-block-heading, .blog-entry-category, .blog-entry-category a) {
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

/* ---------- 3. Boutons : angles droits, sans ombre ---------- */

body.vd-refonte :is(
  .elementor-button,
  .wpforms-container button[type=submit],
  .woocommerce a.button,
  .woocommerce button.button,
  input[type=submit]
) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 30px !important;
  background: var(--vd-brun) !important;
  border: 1px solid var(--vd-brun) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--vd-blanc) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  transition: background-color .2s, color .2s;
}
body.vd-refonte :is(.elementor-button, .wpforms-container button[type=submit], .woocommerce a.button, .woocommerce button.button, input[type=submit]):hover {
  background: transparent !important;
  color: var(--vd-brun) !important;
}
body.vd-refonte .elementor-button :is(.elementor-button-text, .elementor-button-icon) { color: inherit !important; }
body.vd-refonte .elementor-button svg { fill: currentColor; width: 14px; height: 14px; }

/* Lien souligné. */
body.vd-refonte .vd-lien {
  display: inline-flex;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- 4. Formulaires WPForms ---------- */

body.vd-refonte .wpforms-container .wpforms-field-label {
  margin-bottom: 10px !important;
  color: var(--vd-noir) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
body.vd-refonte .wpforms-container :is(.wpforms-field-sublabel, .wpforms-field-description) {
  color: var(--vd-gris) !important;
  font-size: 12px !important;
}
body.vd-refonte .wpforms-container :is(input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea) {
  min-height: 48px;
  border: 1px solid var(--vd-filet) !important;
  border-radius: 0 !important;
  background: var(--vd-blanc) !important;
  box-shadow: none !important;
  color: var(--vd-noir) !important;
  font-size: 15px !important;
}
body.vd-refonte .wpforms-container :is(input, select, textarea):focus { border-color: var(--vd-brun) !important; }
body.vd-refonte .wpforms-container .wpforms-field-label-inline { font-size: 14px !important; color: var(--vd-noir) !important; }
body.vd-refonte .wpforms-container a { color: var(--vd-brun) !important; }

/* ---------- 5. WooCommerce, ShopEngine, blog ---------- */

/* Vignettes produits (catégories) : famille en surtitre gris, nom en Titre 3 réduit. */
body.vd-refonte .woo-entry-inner a { text-decoration: none !important; }
body.vd-refonte .woo-entry-inner li.category,
body.vd-refonte .woo-entry-inner li.category a {
  color: var(--vd-gris) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
body.vd-refonte .woo-entry-inner li.title :is(h2, a) {
  color: var(--vd-noir) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Fiche produit. */
body.vd-refonte .shopengine-product-tabs .wc-tabs li a {
  color: var(--vd-noir) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
body.vd-refonte .shopengine-product-tabs .wc-tabs li.active a { border-color: var(--vd-brun) !important; }
body.vd-refonte .shopengine-product-meta, body.vd-refonte .shopengine-product-meta a {
  color: var(--vd-gris) !important;
  font-size: 13px !important;
}
/* Boutons 3D et fiche technique : colonnes étroites, interlettrage resserré pour tenir sur deux lignes. */
body.vd-refonte.single-product .elementor-widget-button .elementor-button {
  padding: 8px 20px !important;
  letter-spacing: .12em !important;
  line-height: 1.4 !important;
}
/* Barre d'achat flottante d'OceanWP : retirée avec le panier (aucune commande en 12 mois). */
body.vd-refonte .owp-floating-bar { display: none !important; }

/* Médias (blog). */
body.vd-refonte .blog-entry-title,
body.vd-refonte .blog-entry-title a {
  color: var(--vd-noir) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
body.vd-refonte .blog-entry-category a { color: var(--vd-brun) !important; }
body.vd-refonte .blog-entry-bottom,
body.vd-refonte .blog-entry-bottom :is(a, span, div) {
  color: var(--vd-gris) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
}
body.vd-refonte .sidebar-box a { color: var(--vd-noir) !important; font-size: 14px !important; }

/* ---------- 6. Corrections par page (à reporter dans Elementor en corrigeant les balises) ---------- */

/* Collection (page 321) : le titre de page est un h4 ; les références des modèles sont des h2 imbriqués,
   que le navigateur ressort en h2 voisins sans classe. */
body.vd-refonte.page-id-321 .elementor-element-e0be4e6 .elementor-heading-title {
  font-size: 44px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
}
body.vd-refonte.page-id-321 .elementor-element-732be0da .elementor-heading-title {
  color: var(--vd-gris) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.vd-refonte.page-id-321 .elementor-widget-heading h2 {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
}

/* ---------- 7. Tablette et mobile : titres réduits (un mot en capitales espacées ne doit jamais se couper) ---------- */

@media (max-width: 1024px) {
  body.vd-refonte :is(
    .elementor-widget-heading h1.elementor-heading-title,
    .term-description h1,
    .woocommerce-products-header__title,
    .single-post .entry-title,
    .vd-titre-page
  ),
  body.vd-refonte.page-id-321 .elementor-element-e0be4e6 .elementor-heading-title {
    font-size: 36px !important;
  }
  body.vd-refonte .shopengine-product-title .product-title { font-size: 28px !important; }
  body.vd-refonte :is(.elementor-widget-heading h2.elementor-heading-title, .vd-titre-2) { font-size: 26px !important; }
}

@media (max-width: 767px) {
  body.vd-refonte :is(
    .elementor-widget-heading h1.elementor-heading-title,
    .term-description h1,
    .woocommerce-products-header__title,
    .single-post .entry-title,
    .vd-titre-page
  ),
  body.vd-refonte.page-id-321 .elementor-element-e0be4e6 .elementor-heading-title {
    font-size: 28px !important;
    letter-spacing: .06em !important;
  }
  body.vd-refonte .shopengine-product-title .product-title { font-size: 22px !important; letter-spacing: .06em !important; }
  body.vd-refonte :is(.elementor-widget-heading h2.elementor-heading-title, .vd-titre-2) { font-size: 22px !important; letter-spacing: .1em !important; }
  body.vd-refonte :is(.elementor-widget-heading h3.elementor-heading-title, .wpforms-container .wpforms-title) { font-size: 18px !important; }
}