/* Varela : socle du thème enfant, chargé partout où il est actif.
   Polices, jetons, en-tête codé, pied de page codé, retour en haut. */

/* ---------- 0. Polices (IBM Plex Sans, latin étendu, flèches comprises) ---------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}

:root {
  --vd-brun: #3F2021;
  --vd-acier: #1D252D;
  --vd-noir: #1A1A1A;
  --vd-ciment: #E6E6E7;
  --vd-blanc: #FFFFFF;
  --vd-gris: #5E5E62;
  --vd-filet: #D6D6D8;
  --vd-font-title: 'IBM Plex Sans', sans-serif; /* Neue Haas le jour où la licence web arrive */
  --vd-font-text: 'IBM Plex Sans', sans-serif;
  --vd-barre-admin: 0px;
}
body.admin-bar { --vd-barre-admin: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --vd-barre-admin: 46px; }
}

/* Police du texte partout, accueil compris (OceanWP déclare Open Sans, qui n'est plus chargée). */
body.vd-refonte { font-family: var(--vd-font-text); }

/* Retour en haut d'OceanWP. */
body.vd-refonte #scroll-top { background: var(--vd-brun) !important; border-radius: 0 !important; }

/* Bandeau de consentement Complianz : couleurs de la charte, angles droits.
   « Refuser » a le même poids visuel qu'« Accepter » (recommandation de la CNIL).
   Complianz pose ses variables sur :root (uploads/complianz/css/banner-1-optin.css). */
.cmplz-cookiebanner {
  --cmplz_banner_border_radius: 0;
  --cmplz_button_border_radius: 0;
  --cmplz_button_accept_background_color: var(--vd-brun);
  --cmplz_button_accept_border_color: var(--vd-brun);
  --cmplz_button_accept_text_color: var(--vd-blanc);
  --cmplz_button_deny_background_color: var(--vd-brun);
  --cmplz_button_deny_border_color: var(--vd-brun);
  --cmplz_button_deny_text_color: var(--vd-blanc);
  --cmplz_button_settings_background_color: var(--vd-blanc);
  --cmplz_button_settings_border_color: var(--vd-noir);
  --cmplz_button_settings_text_color: var(--vd-noir);
  --cmplz_hyperlink_color: var(--vd-brun);
  --cmplz_text_color: var(--vd-noir);
  font-family: var(--vd-font-text);
}
.cmplz-cookiebanner :is(.cmplz-btn, .cmplz-title, .cmplz-message, .cmplz-link) { font-family: var(--vd-font-text); }

.vd-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Typographie de l'en-tête et du pied, sans dépendre de la police du body d'OceanWP. */
.vd-entete,
.vd-entete *,
.vd-pied,
.vd-pied * {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* ---------- 7. En-tête codé ---------- */

.vd-entete {
  position: sticky;
  top: var(--vd-barre-admin);
  z-index: 100;
  width: 100%;
  background: var(--vd-blanc);
  color: var(--vd-noir);
  border-bottom: 1px solid var(--vd-filet);
  transition: background-color .25s, color .25s, border-color .25s;
}
/* La barre (et ses sous-menus) passe toujours au-dessus du panneau de recherche ;
   entete.js referme d'ailleurs la recherche dès qu'un sous-menu s'ouvre. */
.vd-entete__barre {
  position: relative;
  z-index: 2;
  height: 96px;
  padding: 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ancres et focus clavier : la cible s'arrête sous l'en-tête fixe (Lenis lit aussi cette valeur). */
html { scroll-padding-top: 96px; }
html:has(> body.admin-bar) { scroll-padding-top: 128px; }
@media (max-width: 1023px) {
  html { scroll-padding-top: 72px; }
  html:has(> body.admin-bar) { scroll-padding-top: 104px; }
}

@keyframes vd-deroule {
  from { opacity: 0; transform: translateY(-6px); }
}
.vd-entete .vd-logo { display: block; width: 148px; height: 25px; fill: currentColor; }
.vd-entete__logo { display: block; line-height: 0; }

/* Remises à zéro : boutons, liens, listes. Les boutons du Customizer d'OceanWP visent
   « body button », « body button[type=submit] » et leurs :hover (fond bleu, survol rouge),
   imprimés après cette feuille : d'où la précision et les !important, pour tous les états. */
body .vd-entete button,
body .vd-entete button:hover,
body .vd-entete button:focus,
body .vd-entete button:active,
body .vd-entete button[type="submit"],
body .vd-entete button[type="submit"]:hover,
body .vd-entete button[type="submit"]:focus {
  margin: 0;
  padding: 0;
  min-height: 0;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
}
body .vd-entete button { transition: opacity .2s; }
body .vd-entete button:hover { opacity: .65; }
body .vd-entete a { color: inherit; text-decoration: none; }
.vd-entete ul { margin: 0; padding: 0; list-style: none; }

/* Navigation. */
.vd-entete__nav { display: flex; }
.vd-entete .vd-menu--entete { display: flex; gap: 48px; align-items: center; }
.vd-entete .vd-menu > li { position: relative; margin: 0; }
body .vd-entete .vd-menu--entete > li > a {
  display: block;
  padding: 36px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vd-entete .vd-menu--entete > li.current-menu-item > a,
.vd-entete .vd-menu--entete > li.current-menu-ancestor > a,
.vd-entete .vd-menu--entete > li.current_page_item > a {
  box-shadow: inset 0 -1px 0 currentColor;
  padding-bottom: 35px;
}

/* Sous-menus : panneau blanc au survol et au focus. */
.vd-entete .vd-menu--entete .sub-menu {
  position: absolute;
  top: 100%;
  left: -24px;
  min-width: 240px;
  padding: 20px 24px;
  background: var(--vd-blanc);
  color: var(--vd-noir);
  border: 1px solid var(--vd-filet);
  display: none;
}
.vd-entete .vd-menu--entete li:hover > .sub-menu,
.vd-entete .vd-menu--entete li:focus-within > .sub-menu { display: block; animation: vd-deroule .22s ease-out; }
.vd-entete .vd-menu--entete .sub-menu li { margin: 0; }
body .vd-entete .vd-menu--entete .sub-menu a {
  display: block;
  padding: 8px 0;
  color: var(--vd-noir);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
body .vd-entete .vd-menu--entete .sub-menu a:hover { color: var(--vd-brun); }

/* Actions : loupe, Contact, burger. */
.vd-entete__actions { display: flex; align-items: center; gap: 24px; }
.vd-entete__recherche,
.vd-entete__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.vd-entete__burger { display: none; }
.vd-entete__burger-traits {
  display: block;
  width: 26px;
  height: 12px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
body .vd-entete a.vd-entete__contact {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background: var(--vd-brun);
  border: 1px solid var(--vd-brun);
  color: var(--vd-blanc);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}

/* Focus toujours visible. */
.vd-entete :is(a, button, input):focus-visible,
.vd-pied :is(a, button, input):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Panneau de recherche. */
.vd-recherche {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 24px 56px;
  background: var(--vd-blanc);
  color: var(--vd-noir);
  border-bottom: 1px solid var(--vd-filet);
  animation: vd-deroule .25s ease-out;
}
.vd-recherche[hidden] { display: none; }
/* Champ et « Rechercher » alignés par le bas : leurs deux filets tombent sur la même ligne. */
.vd-recherche__form { display: flex; align-items: flex-end; gap: 32px; margin: 0; }
.vd-entete .vd-recherche__champ {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 8px 0 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vd-noir);
  border-radius: 0;
  box-shadow: none;
  color: var(--vd-noir);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
}
.vd-entete .vd-recherche__champ::placeholder { color: var(--vd-gris); opacity: 1; }
.vd-entete .vd-recherche__champ:focus { outline: none; box-shadow: none; border-bottom-color: var(--vd-brun); }
/* « Rechercher » : lien Brun Oxyde souligné, comme les liens de la charte. */
body .vd-entete button.vd-recherche__envoi,
body .vd-entete button.vd-recherche__envoi:hover,
body .vd-entete button.vd-recherche__envoi:focus {
  padding: 0 0 6px;
  border-bottom: 1px solid currentColor !important;
  color: var(--vd-brun) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.vd-entete .vd-recherche__fermer { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
/* Croix centrée sur le texte du champ, son trait calé sur le bord droit de la barre (bouton Contact) :
   (44 - 18) / 2 = 13 px de marge interne compensés. Même précision que la remise à zéro des boutons. */
body .vd-entete button.vd-recherche__fermer { align-self: center; margin-right: -13px; }

/* Menu mobile plein écran. */
.vd-mobile {
  position: fixed;
  top: var(--vd-barre-admin);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  padding: 0 24px 32px;
  background: var(--vd-brun);
  color: var(--vd-blanc);
  overflow-y: auto;
}
.vd-mobile[hidden] { display: none; }
.vd-mobile__barre { flex: none; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.vd-mobile .vd-logo { display: block; width: 110px; height: 19px; fill: currentColor; }
.vd-mobile__logo { display: block; line-height: 0; }
.vd-mobile__fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; }
.vd-mobile__nav { margin-top: 48px; }
.vd-mobile .vd-menu { display: flex; flex-direction: column; gap: 28px; }
.vd-mobile .vd-menu > li { margin: 0; }
body .vd-mobile .vd-menu > li > a {
  color: var(--vd-blanc);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vd-mobile .sub-menu { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 6px 2px; }
body .vd-mobile .sub-menu a {
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body .vd-mobile .current-menu-item > a { color: var(--vd-blanc); font-weight: 500; }
.vd-mobile__bas { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.vd-mobile__bas a { color: rgba(255, 255, 255, .75); font-size: 15px; }
body .vd-mobile a.vd-mobile__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: var(--vd-blanc);
  color: var(--vd-brun);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body.vd-menu-ouvert { overflow: hidden; }

/* Sur le hero : fixe, transparent, texte blanc. */
body.vd-entete-sur-hero .vd-entete {
  position: fixed;
  top: var(--vd-barre-admin);
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--vd-blanc);
}
body.vd-entete-sur-hero .vd-entete a.vd-entete__contact {
  background: transparent;
  border-color: var(--vd-blanc);
  color: var(--vd-blanc);
}
/* Apparence pleine : défilement, recherche ou menu ouvert. */
body.vd-entete-sur-hero .vd-entete.est-plein {
  background: var(--vd-blanc);
  border-bottom-color: var(--vd-filet);
  color: var(--vd-noir);
}
body.vd-entete-sur-hero .vd-entete.est-plein a.vd-entete__contact {
  background: var(--vd-brun);
  border-color: var(--vd-brun);
  color: var(--vd-blanc);
}

/* Sous 1024 px : loupe et burger seulement. */
@media (max-width: 1023px) {
  .vd-entete__barre { height: 72px; padding: 0 24px; }
  .vd-entete .vd-logo { width: 110px; height: 19px; }
  .vd-entete__nav,
  .vd-entete a.vd-entete__contact { display: none !important; }
  .vd-entete__burger { display: inline-flex; }
  .vd-entete__actions { gap: 4px; margin-right: -10px; }
  .vd-recherche { padding: 16px 24px; }
  .vd-recherche__form { gap: 12px; }
  .vd-entete .vd-recherche__champ { font-size: 22px; }
}
@media (min-width: 1024px) {
  .vd-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-entete,
  .vd-entete * { transition: none !important; animation: none !important; }
}

/* ---------- 8. Pied de page codé : bandeau ailettes Opus, puis Brun Oxyde ---------- */

.vd-pied-bandeau {
  height: 400px;
  background:
    linear-gradient(180deg, rgba(63, 32, 33, 0) 45%, var(--vd-brun) 100%),
    var(--vd-pied-image, none) center / cover no-repeat,
    var(--vd-brun);
}
.vd-pied {
  background: var(--vd-brun);
  color: var(--vd-blanc);
  padding: 72px 56px 40px;
}
body .vd-pied a { color: inherit; text-decoration: none; }
.vd-pied p { margin: 0; }
.vd-pied__surtitre {
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.vd-pied .vd-pied__surtitre--news { color: var(--vd-blanc); }
.vd-pied__haut { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 72px; }
.vd-pied .vd-logo { display: block; width: 190px; height: 32px; fill: currentColor; }
/* Logo, puis label Origine France Garantie (version blanche, média 3465). */
.vd-pied__marque { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.vd-pied img.vd-pied__label { display: block; width: 72px; height: auto; }
.vd-pied__logo { display: block; line-height: 0; }
.vd-pied__news { width: 460px; max-width: 100%; }
.vd-pied__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 72px; }
.vd-pied__cols .vd-pied__surtitre { margin: 0 0 22px; }
.vd-pied__cols a,
.vd-pied__ligne { display: block; margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.vd-pied__bas {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vd-pied__mentions { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.vd-pied .vd-pied__consentement {
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.vd-pied .vd-pied__consentement:hover { text-decoration: underline; }

/* Newsletter (WPForms 2377) : champ e-mail transparent, filet bas, bouton en lien souligné. */
body .vd-pied .wpforms-container { margin: 20px 0 0; padding: 0; max-width: none; }
body .vd-pied .wpforms-container .wpforms-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
/* Le filet est porté par les deux conteneurs de la ligne (champ et bouton), étirés à la même hauteur : un seul trait continu. */
body .vd-pied .wpforms-container .wpforms-field-container {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end;
  margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .5);
}
body .vd-pied .wpforms-container .wpforms-field-container:focus-within { border-bottom-color: var(--vd-blanc); }
body .vd-pied .wpforms-container .wpforms-field { margin: 0; padding: 0; }
body .vd-pied .wpforms-container .wpforms-field-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
body .vd-pied .wpforms-container .wpforms-form input[type=email],
body .vd-pied .wpforms-container .wpforms-form input[type=text] {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 18px 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--vd-blanc) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
body .vd-pied .wpforms-container .wpforms-form input[type=email]::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
body .vd-pied .wpforms-container .wpforms-form input[type=email]:focus { outline: none; }
body .vd-pied .wpforms-container .wpforms-submit-container {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 18px 0 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
body .vd-pied .wpforms-container .wpforms-form .wpforms-submit[type=submit],
body .vd-pied .wpforms-container .wpforms-form .wpforms-submit[type=submit]:hover,
body .vd-pied .wpforms-container .wpforms-form .wpforms-submit[type=submit]:focus {
  display: inline-block !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 0 0 6px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !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;
  white-space: nowrap;
  cursor: pointer;
}
body .vd-pied .wpforms-container .wpforms-form .wpforms-submit[type=submit]:hover { opacity: .75; }
body .vd-pied .wpforms-container .wpforms-recaptcha-container { grid-column: 1 / -1; grid-row: 2; margin: 16px 0 0; padding: 0; }
body .vd-pied .wpforms-container .wpforms-error,
body .vd-pied .wpforms-container label.wpforms-error {
  margin-top: 8px;
  color: #FFC9C9 !important;
  font-size: 13px !important;
  letter-spacing: 0;
  text-transform: none;
}
body .vd-pied .wpforms-container .wpforms-confirmation-container-full,
body .vd-pied .wpforms-container .wpforms-confirmation-container {
  margin: 0;
  padding: 18px 0 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  color: var(--vd-blanc);
  font-size: 15px;
}
body .vd-pied .wpforms-container .wpforms-confirmation-container-full p { color: inherit; margin: 0; }
/* Cases à cocher ou noms, si le formulaire en reçoit un jour. */
body .vd-pied .wpforms-container :is(label, .wpforms-field-sublabel, .wpforms-field-description) { color: rgba(255, 255, 255, .85) !important; font-size: 13px !important; }
body .vd-pied .wpforms-container a { color: var(--vd-blanc) !important; text-decoration: underline !important; }

@media (max-width: 1023px) {
  .vd-pied-bandeau { height: 200px; }
  .vd-pied { padding: 64px 24px 32px; }
  .vd-pied__haut { flex-direction: column; gap: 48px; padding-bottom: 56px; }
  .vd-pied .vd-logo { width: 150px; height: 25px; }
  .vd-pied__marque { gap: 32px; }
  .vd-pied img.vd-pied__label { width: 64px; }
  .vd-pied__news { width: 100%; }
  .vd-pied__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-bottom: 48px; }
  .vd-pied__cols > div:nth-child(3) { grid-column: 1 / -1; order: 4; }
  .vd-pied__bas { flex-direction: column; gap: 14px; font-size: 11px; }
  .vd-pied__mentions { flex-direction: column; gap: 14px; }
}