/* ============================================================
   CSS de substitution — thème WordPress « solox »

   🚨 CE N'EST PAS UNE RESTITUTION. Les feuilles du thème n'ont JAMAIS été
      archivées : mesuré sur farma-natura.es, l'API CDX d'archive.org ne rend
      AUCUNE capture sous /wp-content/ — ni CSS, ni image, ni JS. Le design
      d'origine (couleurs choisies, espacements, typographies) est perdu et ne
      se reconstitue pas. On rend le balisage lisible et sobre, et le rapport
      le dit.

   🚨 LES SEULES VALEURS DE MARQUE RÉELLES SONT CELLES SURVÉCUES EN LIGNE :
      le thème pose `--solox-base` et `--solox-black` dans un <style> inline de
      chaque page. On s'en sert comme source plutôt que d'inventer une palette,
      avec un repli pour les pages où l'inline manque.

   ⚠ AUCUN JAVASCRIPT N'EST RESTAURÉ sur ces sites (--assets css-images). Tout
     ce qui ne fonctionne qu'avec du JS est donc neutralisé plutôt que laissé
     à moitié : carrousel figé sur sa première vue, bannière de cookies,
     popup, widget de discussion, tiroir de menu mobile.
   ============================================================ */

:root {
  --solox-base: #d5ad6d;
  --solox-black: #32373c;
  --sx-accent: #fb8e28;
  --sx-texte: #3a4046;
  --sx-doux: #6b7480;
  --sx-bord: #e7e3dc;
  --sx-fond: #ffffff;
  --sx-fond-doux: #faf7f2;
  --sx-large: 1200px;
  --sx-titre: "Cormorant", Georgia, "Times New Roman", serif;
  --sx-texte-police: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ─── Base ───────────────────────────────────────────────── */

/* 🚨 `box-sizing` N'EST POSÉ NULLE PART UNE FOIS LE THÈME PERDU. Mesuré sur
   farma-natura.es : `.container-fluid` faisait 1304 px dans une fenêtre de
   1280 — largeur 100 % PLUS 2 × 20 px de marge intérieure — et la page
   défilait latéralement, bouton d'appel à l'action coupé. C'est la feuille du
   thème qui posait la règle ; elle part avec lui. */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--sx-texte-police);
  color: var(--sx-texte);
  background: var(--sx-fond);
  line-height: 1.65;
  /* ⚠ Le débordement horizontal vient des blocs du thème qui comptaient sur
     des largeurs posées par la feuille absente. On le contient ici plutôt que
     de poser des largeurs fausses sur des blocs qu'on n'a pas lus. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* 🚨 UNE ICÔNE SVG SANS DIMENSIONS REMPLIT SON CONTENEUR. Les dimensions
   étaient posées par la feuille du thème : sans elle, un `<svg viewBox>` sans
   attributs `width`/`height` s'étire à la largeur disponible. Mesuré sur
   farma-natura.es : trois icônes — un téléphone et deux flèches de carrousel —
   faisaient 1 160 et 1 264 px de HAUT et creusaient 4,9 m de page blanche.
   Le symptôme ne ressemble pas du tout à sa cause : on voit du vide, pas une
   icône géante, parce que le tracé reste minuscule au centre. */
svg:not([width]):not([height]),
.e-font-icon-svg {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

.container,
.container-fluid {
  width: 100%;
  max-width: var(--sx-large);
  margin-inline: auto;
  padding-inline: 20px;
}

.container-fluid { max-width: 1400px; }

.list-unstyled { list-style: none; margin: 0; padding: 0; }

/* ─── En-tête et menu principal ──────────────────────────── */

.main-header {
  background: var(--sx-fond);
  border-bottom: 1px solid var(--sx-bord);
  position: relative;
  z-index: 50;
}

/* `sticky-header` est une classe du thème : on la tient, mais sans le
   comportement JS de rétraction au défilement, qui n'existe plus. */
.main-header.sticky-header { position: sticky; top: 0; }

/* ⚠ Trois blocs sur une ligne — logo, menu, appel à l'action — et c'est le
   MENU qui cède : lui seul peut se replier sans se tronquer. Mesuré à 1280 px
   de large : logo 280 + menu 960 + bouton 115 + gouttières dépassaient de
   160 px, et le bouton partait sur une deuxième ligne. */
.main-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  flex-wrap: nowrap;
}

.main-header__logo { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.main-header__logo img { max-height: 44px; max-width: 190px; width: auto; }

.main-header__nav { flex: 1 1 auto; min-width: 0; }
.main-header__right { flex: 0 0 auto; }

.main-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ⚠ Les `li` du menu portent `padding: 27px 0` dans le CSS en ligne survécu :
   54 px de hauteur par ligne. Absorbé par la barre sur grand écran, c'est
   375 px de menu sur mobile. L'espacement se joue sur le lien, pas sur l'item. */
/* 🚨 LE THÈME N'A PAS TOTALEMENT DISPARU : SON CSS « EN LIGNE » A SURVÉCU, ET
   IL EST PLUS SPÉCIFIQUE QUE NOUS. `.main-header--two .main-menu
   .main-menu__list > li { padding: 27px }` — trois classes — l'emportait sur
   `.main-menu__list > li`, et la correction n'avait AUCUN effet à l'écran
   alors que la feuille était bien chargée. Être posé en dernier dans le
   <head> ne suffit pas : à spécificité inférieure, l'ordre ne décide rien.
   On s'aligne donc sur la spécificité de l'origine. */
.main-menu__list > li { position: relative; }
.main-header .main-menu .main-menu__list > li { padding: 0; margin: 0; }

.main-menu__list a {
  display: block;
  padding: 9px 10px;
  color: var(--solox-black, #32373c);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: color .15s, background-color .15s;
}

.main-menu__list a:hover,
.main-menu__list a:focus-visible { color: var(--sx-accent); background: var(--sx-fond-doux); }

.main-menu__list .current-item > a,
.main-menu__list .current-menu-item > a { color: var(--sx-accent); }

/* Un parent de sous-menu s'annonce : sans flèche, rien ne dit qu'il s'ouvre. */
.main-menu__list > .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* 🚨 OUVERTURE AU SURVOL **ET** AU CLAVIER. `:hover` seul rendrait les
   sous-menus inatteignables en navigation clavier — et c'est la moitié des
   pages du site qui n'est accessible que par là. */
.main-menu__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--sx-fond);
  border: 1px solid var(--sx-bord);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 60;
}

.main-menu__list > li:hover > .sub-menu,
.main-menu__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.main-menu__list .sub-menu a {
  padding: 9px 18px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 0;
  white-space: normal;
}

/* ─── Boutons ────────────────────────────────────────────── */

.solox-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--sx-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: filter .15s;
}

.solox-btn:hover { filter: brightness(.92); color: #fff; }

.solox-btn--base { background: var(--solox-base, #d5ad6d); }

/* Habillage décoratif du bouton : sans la feuille du thème, ce bloc vide
   s'empile au milieu du libellé. */
.solox-btn__shape { display: none; }

/* ─── Bandeau de titre de page ───────────────────────────── */

.page-header {
  position: relative;
  padding: 72px 0 60px;
  overflow: hidden;
  background: var(--sx-fond-doux);
  text-align: center;
}

.page-header__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* ⚠ Le fond d'en-tête remis est volontairement très clair : le titre est
     sombre, et le thème ne pose plus aucune couleur de texte ici. */
  opacity: .9;
}

.page-header__bg::before { background-image: none !important; }

.page-header .container { position: relative; z-index: 1; }

.page-header__title {
  margin: 10px 0 0;
  font-family: var(--sx-titre);
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--solox-black, #32373c);
}

.solox-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--sx-doux);
}

.solox-breadcrumb a { color: var(--sx-doux); text-decoration: none; }
.solox-breadcrumb a:hover { color: var(--sx-accent); }
.solox-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--sx-bord); }

/* ─── Carrousel d'accueil ────────────────────────────────── */

/* 🚨 UN CARROUSEL SANS SON JS N'EST PAS UN CARROUSEL, C'EST UNE PILE. Les
   trois vues s'empilaient en trois héros plein écran. On montre la première
   — celle que le visiteur aurait vue — et on cache les suivantes plutôt que
   d'inventer une rotation.
   ⚠ CHAQUE VUE EST EMBALLÉE DANS SON PROPRE `.item` : viser
   `.main-slider-one__item + .main-slider-one__item` ne sélectionnait RIEN,
   puisque les vues ne sont pas sœurs. Mesuré : le héros faisait encore
   1 468 px au lieu de 490, et la page s'ouvrait sur 1 000 px de blanc. C'est
   le conteneur `.item` qu'il faut viser. */
.owl-carousel > .item:not(:first-child),
.main-slider-one__carousel > .item:not(:first-child) { display: none; }

.main-slider-one__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(68vh, 560px);
  padding: 64px 0;
}

.main-slider-one__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Un voile : le texte du héros est clair sur des photos claires. */
.main-slider-one__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 52%, rgba(255, 255, 255, .25) 100%);
}

.main-slider-one__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}

.main-slider-one__content h1,
.main-slider-one__content h2,
.main-slider-one__title {
  font-family: var(--sx-titre);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  color: var(--solox-black, #32373c);
}

/* ─── Section de contact à fond photographique ───────────── */

.contact__bg {
  background-size: cover;
  background-position: center;
}

/* ─── Pied de page ───────────────────────────────────────── */

.footer-wrapper {
  margin-top: 56px;
  background: var(--solox-black, #32373c);
  color: #d8dce0;
}

.footer-wrapper a { color: #f0e6d6; text-decoration: none; }
.footer-wrapper a:hover { color: var(--sx-accent); }
.footer-wrapper h1, .footer-wrapper h2, .footer-wrapper h3,
.footer-wrapper h4, .footer-wrapper h5, .footer-wrapper h6 { color: #fff; }
.footer-wrapper ul { list-style: none; margin: 0; padding: 0; }
.footer-wrapper li { padding: 4px 0; }

/* ─── Ce qui ne marche plus sans JS : neutralisé, pas laissé ─ */

/* Un tiroir de menu mobile sans son bouton ouvre un panneau qui ne se ferme
   jamais : le menu principal passe en liste repliable à la place. */
/* Flèches du carrousel d'avis : elles ne pilotent plus rien sans leur JS. */
.grw-controls,
.mobile-nav__wrapper,
.mobile-nav__toggler,
.search-popup,
#cmplz-cookiebanner-container,
.cmplz-cookiebanner,
.elementor-location-popup,
.joinchat { display: none !important; }

/* ─── Petits écrans ──────────────────────────────────────── */

@media (max-width: 991px) {
  .main-header__inner { min-height: 0; padding-block: 14px; flex-wrap: wrap; }
  .main-menu__list { justify-content: flex-start; }
  .main-menu__list a { padding: 8px 10px; font-size: 14px; }
  /* 🚨 UN MENU DÉPLIÉ SUR MOBILE REPOUSSE LE CONTENU SOUS LA LIGNE DE
     FLOTTAISON. Premier essai : les sous-menus dépliés dans le flux, pour
     éviter le débordement horizontal — mesuré à 375 px, ça faisait 28 liens
     et plus de 1 400 px à faire défiler AVANT le titre de la page, sur
     chacune des 32 pages. Les sous-menus se replient donc, et le premier
     niveau tient sur deux lignes ; aucune page n'est perdue pour autant,
     chaque rubrique liste ses enfants, et les liens restent dans le document
     pour les robots. */
  .main-menu__list .sub-menu { display: none; }
  .main-menu__list > .menu-item-has-children > a::after { display: none; }
  .main-menu__list { gap: 0 2px; }
  .page-header { padding: 48px 0 40px; }
}

/* ─── Cartes « eyebrow + titre » de la page d'accueil ─────── */

/* 🚨 DEUX WIDGETS DE TITRE EMPILÉS NE SONT PAS DEUX TITRES. Chaque carte
   d'accueil porte un `<h2 class="elementor-heading-title">` suivi d'un
   `<div class="elementor-heading-title">`, tous deux liés à la même page :
   dans le thème, le premier était une étiquette et le second le titre.
   Rendus à la même taille, ils se lisaient comme douze titres séparés —
   « Online » / « Tienda », « Expertos en » / « Estética » — avec 80 px de
   vide entre les deux. On rétablit la hiérarchie : étiquette puis titre. */

.elementor-widget-heading { margin: 0; }

.elementor-widget-heading .elementor-heading-title {
  margin: 0;
  line-height: 1.2;
}

/* 🚨 ENCORE UNE AFFAIRE DE SPÉCIFICITÉ, ET CETTE FOIS CONTRE NOTRE PROPRE
   FEUILLE. `elementor.css` pose `body.home .elementor-widget-heading
   .elementor-heading-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem) }` —
   trois classes — et le soulignement via `.elementor a:not(.elementor-button)
   :not(.elementor-item)`, trois classes aussi puisque `:not()` compte son
   argument. Nos règles à deux classes étaient chargées APRÈS et perdaient
   quand même : l'étiquette restait à 32 px et les titres soulignés. On monte
   au-dessus ici plutôt que de modifier la feuille partagée par tout le réseau. */

/* L'étiquette : le <h2>, qui vient en premier. */
body.home .elementor-widget-wrap h2.elementor-heading-title,
.elementor-widget-wrap h2.elementor-heading-title {
  font-family: var(--sx-texte-police);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--solox-base, #d5ad6d);
}

/* Le titre : le <div> qui suit l'étiquette. */
body.home .elementor-widget-wrap div.elementor-heading-title,
.elementor-widget-wrap div.elementor-heading-title {
  font-family: var(--sx-titre);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  color: var(--solox-black, #32373c);
  margin: 2px 0 10px;
}

/* 🚨 UN TITRE CLIQUABLE N'EST PAS UN LIEN DE PROSE. Souligné et coloré comme
   un lien de paragraphe, il donnait à la page d'accueil l'air d'un sommaire
   brut. Le soulignement n'apparaît qu'au survol. */
.elementor-widget-heading .elementor-heading-title a:not(.elementor-button) {
  color: inherit;
  text-decoration: none;
}

.elementor-widget-heading .elementor-heading-title a:not(.elementor-button):hover,
.elementor-widget-heading .elementor-heading-title a:not(.elementor-button):focus-visible {
  color: var(--sx-accent);
  text-decoration: underline;
}

/* La colonne qui porte étiquette + titre + texte devient une vraie carte. */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-heading + .elementor-widget-heading) > .elementor-widget-wrap {
  padding: 28px 26px;
  border: 1px solid var(--sx-bord);
  border-radius: 14px;
  background: var(--sx-fond);
  height: 100%;
}

.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-heading + .elementor-widget-heading) p {
  margin: 0;
  color: var(--sx-doux);
  font-size: 15px;
  text-align: left !important;
}

/* ─── Bloc « Pide cita » de la section à propos ───────────── */

/* Le numéro a été retiré (il sonnait chez la clinique) : il reste l'icône et
   le libellé. Sans mise en forme, ça rendait un glyphe perdu sur une ligne. */
.about-one__image__info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--sx-fond-doux);
  border: 1px solid var(--sx-bord);
  font-weight: 700;
  color: var(--solox-black, #32373c);
}

.about-one__image__info__icon { display: inline-flex; color: var(--sx-accent); }
.about-one__image__info__text:empty { display: none; }
.about-one__flower { display: none; }

/* ─── Avis Google : une grille de cartes, pas une pile ────── */

/* 🚨 LE WIDGET EST UN CARROUSEL (`data-layout="slider"`) ET SON JS N'EXISTE
   PLUS. Les dix avis s'empilaient donc sur 1 600 px, chacun sur une ligne
   nue avec sa vignette cassée. On les présente comme les cartes du haut de
   page : même bordure, même rayon, même respiration. */

.grw-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.grw-review { min-width: 0; }

.grw-review-inner.grw-backgnd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--sx-bord);
  border-radius: 14px;
  background: var(--sx-fond);
}

/* ⚠ `.wp-google-left` PORTE LE NOM ET LA DATE, pas seulement la vignette :
   le masquer d'un bloc avait effacé l'auteur de chaque avis. On ne retire
   que les images, qui ne sont pas archivées. */
.grw-review-inner img,
.grw-header img,
.wp-google-powered,
.wp-google-wr { display: none; }

/* Le logo Google en fin de carte est un <svg> NU, enfant direct, sans classe. */
.grw-review-inner > svg { display: none; }

.grw-review-inner .wp-google-left { order: 0; }
.wp-google-stars { order: 1; }

/* Une note sans commentaire donne une carte avec cinq étoiles et rien
   dessous : elle n'apporte rien et casse la grille. */
.grw-review:not(:has(.wp-google-text)) { display: none; }

.grw-review-inner .wp-google-name a {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--solox-black, #32373c);
  text-decoration: none;
}

.grw-review-inner .wp-google-name a:hover { color: var(--sx-accent); }

.grw-review-inner .wp-google-time {
  font-size: 13px;
  color: var(--sx-doux);
}

.wp-google-stars .wp-stars { display: inline-flex; gap: 2px; }
.wp-google-stars .wp-star svg,
.wp-google-stars .wp-star { color: var(--solox-base, #d5ad6d); }

.grw-review-inner .wp-google-text,
.grw-review-inner .wp-google-feedback {
  order: 2;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sx-texte);
}

/* L'en-tête du widget : la fiche, la note, le nombre d'avis. */
.grw-header-inner .wp-google-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.grw-header-inner .wp-google-name a {
  font-weight: 700;
  color: var(--solox-black, #32373c);
  text-decoration: none;
}

.grw-header-inner .wp-google-rating { font-size: 15px; color: var(--sx-doux); }

/* ─── Corps de page RÉDIGÉ (`lhf-corps`) ──────────────────── */

/* 🚨 CE BLOC N'EST PAS RESTAURÉ, IL EST ÉCRIT. Il ne se pose que là où
   l'archive ne laissait qu'un titre : sur farma-natura.es, les pages de
   prestation étaient faites d'images, archive.org n'en a capturé aucune, et
   la restauration les a retirées plutôt que d'y coller des images d'ailleurs.
   Mesuré : /vitaminas/ portait 2 568 caractères dans l'archive ET 2 568 une
   fois remonté — rien n'avait été perdu, il n'y avait rien. */

.lhf-corps {
  padding: 48px 0 8px;
}

.lhf-corps .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 980px;
}

.lhf-corps__visuel {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}

.lhf-corps__visuel img {
  width: 100%;
  height: auto;
  display: block;
}

.lhf-corps__corps { max-width: 760px; margin-inline: auto; }

.lhf-corps__intro {
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.65;
  color: var(--solox-black, #32373c);
  margin: 0 0 26px;
}

.lhf-corps__corps h3 {
  font-family: var(--sx-titre);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--solox-black, #32373c);
  margin: 30px 0 10px;
}

.lhf-corps__corps p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--sx-texte);
}

/* Les renvois vers les rubriques voisines : le maillage interne compte autant
   que le texte, et il doit se voir sans ressembler à de la prose. */
.lhf-corps__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
}

.lhf-corps__liens a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--sx-bord);
  border-radius: 999px;
  background: var(--sx-fond-doux);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--solox-black, #32373c);
  text-decoration: none;
}

.lhf-corps__liens a:hover {
  border-color: var(--sx-accent);
  color: var(--sx-accent);
}

/* 🚨 LA MENTION DE PRUDENCE SE VOIT. Sur des pages de santé, elle n'a de sens
   que si elle est lue : encadrée et contrastée, pas en gris clair en bas. */
.lhf-corps__prudence {
  display: block;
  margin: 30px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--solox-base, #d5ad6d);
  background: var(--sx-fond-doux);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sx-doux);
}

.lhf-corps__cta { margin: 30px 0 0; }

@media (max-width: 767px) {
  .lhf-corps { padding: 32px 0 4px; }
  .lhf-corps .container { gap: 22px; }
  .lhf-corps__visuel { border-radius: 12px; }
}