/*
Theme Name: Vitas Planteas
Description: Thème WordPress / WooCommerce Vitas Planteas (compléments alimentaires marins et botaniques).
Author: Vitas Planteas
Version: 0.1.0
Text Domain: vitasplanteas
*/

:root {
  /* Palette « Marine & Bio-Botanical Wellness »
     (screenshots/newdesign_vitasplanteas/DESIGN.md). */
  --color-primary: #0e5a96;
  --color-primary-hover: #0a4d8c;
  --color-primary-dark: #004273;
  --color-primary-darker: #00355c;
  --color-secondary: #00a3c4;
  /* Cyan assombri : le cyan pur n'offre que 2,98:1 sur blanc, donc réservé
     aux fonds, bordures et anneaux de focus ; ce ton sert de texte (4,99:1). */
  --color-secondary-text: #007a93;
  --color-tertiary: #2ea043;
  /* Vert botanique assombri, réservé aux fonds de bouton à texte blanc
     (7,13:1 ; #2ea043 n'atteint que 3,37:1). */
  --color-tertiary-button: #166534;
  --color-tertiary-button-hover: #14532d;
  --color-text: #1e293b;
  --color-text-muted: #475569;
  --color-surface: #f8fafc;
  --color-surface-low: #f0f3ff;
  --color-footer: #0a3a63;
  --color-border: #e2e8f0;
  --color-alert: #dc2626;
  --color-white: #ffffff;
  --color-black: #000000;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-primary: 'Inter', sans-serif;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--color-text-muted);
}

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

a {
  text-decoration: none;
  color: inherit;
}

/* Header de la projection (screenshots/projection_vitasplanteas/index.html) :
   barre du haut, ligne logo + menu + recherche + compte + panier, bandeau de
   garanties. Écrit avec les tokens du thème. */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icônes Material Symbols : la taille est réservée (1em) pour que le texte
   brut du nom de l'icône ne déforme pas la mise en page avant le chargement
   de la police. */
.vitas-mi {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
}

.vitas-header {
  position: relative;
  z-index: 50;
  background: var(--color-white);
}

@media (min-width: 1025px) {
  .vitas-header {
    position: sticky;
    top: 0;
  }

  .admin-bar .vitas-header {
    top: 32px;
  }
}

/* Barre du haut */
.vitas-topbar {
  padding: 0.5rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Les trois bandes du header partagent le conteneur de 1184 px des sections
   de la page : le logo, la barre du haut et le bord droit de la recherche
   s'alignent sur le titre du hero, le contenu et le footer. */
.vitas-topbar__inner,
.vitas-header__inner,
.vitas-guarantees__list {
  max-width: 1184px;
  margin-right: auto;
  margin-left: auto;
}

.vitas-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.vitas-topbar__items,
.vitas-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-topbar__contact {
  gap: 0.125rem 1.25rem;
}

.vitas-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Icônes en bleu très clair : lisibles sur le fond marine, distinctes du texte blanc. */
.vitas-topbar__icon {
  font-size: 1rem;
  color: #b3ebff;
}

.vitas-topbar a:hover,
.vitas-topbar a:focus-visible {
  text-decoration: underline;
}

/* Ligne principale */
.vitas-header__main {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}

.vitas-header__inner {
  /* Hauteur du logo, partagée avec le calage vertical des éléments voisins. */
  --logo-h: 2.75rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 521px) {
  .vitas-header__inner {
    --logo-h: 3rem;
  }
}

.vitas-brand,
.vitas-footer__brand-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.vitas-brand__mark,
.vitas-footer__brand-mark {
  display: inline-block;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0e5a96, #00a3c4);
}

/* Logo image (champ « Header : logo ») : hauteur fixe, largeur proportionnelle. */
.vitas-brand__logo {
  display: block;
  width: auto;
  height: var(--logo-h, 3rem);
  max-width: none;
}

.vitas-brand__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-primary);
}

.vitas-nav-row {
  flex: 1;
  min-width: 0;
}

.vitas-nav-row nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-nav-row nav .sub-menu {
  display: none;
}

.vitas-nav-row nav a {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.vitas-nav-row nav a:hover {
  color: var(--color-primary);
}

.vitas-nav-row nav .current-menu-item > a,
.vitas-nav-row nav .current_page_item > a {
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--color-secondary);
  color: var(--color-primary);
}

.vitas-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.vitas-nav-toggle__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.vitas-nav-toggle[aria-expanded="true"] .vitas-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.vitas-nav-toggle[aria-expanded="true"] .vitas-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.vitas-nav-toggle[aria-expanded="true"] .vitas-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Recherche : pilule à contour fin */
.vitas-search {
  display: flex;
  align-items: center;
  width: 15rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 0 0.25rem 0 1.125rem;
  background: var(--color-white);
}

.vitas-search:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 163, 196, 0.2);
}

.vitas-search__field {
  flex: 1;
  min-width: 0;
}

.vitas-search__field input {
  width: 100%;
  padding: 0.625rem 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
}

.vitas-search__field input::placeholder {
  color: #64748b;
}

.vitas-search__field input:focus-visible {
  outline: none;
}

.vitas-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}

.vitas-search__submit:hover,
.vitas-search__submit:focus-visible {
  background: var(--color-surface-low);
}

/* Compte et panier */
.vitas-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.vitas-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1.5px solid var(--color-primary);
  border-radius: 9999px;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vitas-account-link:hover,
.vitas-account-link:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

.vitas-cart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.vitas-cart-link:hover,
.vitas-cart-link:focus-visible {
  color: var(--color-primary-hover);
}

.vitas-cart-link__icon {
  position: relative;
  display: inline-flex;
}

.vitas-cart-link__icon .vitas-mi {
  font-size: 1.5rem;
}

.vitas-cart-link__label {
  display: none;
}

.vitas-cart-link__count {
  position: absolute;
  top: -0.375rem;
  right: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: var(--color-alert);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.vitas-account-link:focus-visible,
.vitas-account__toggle:focus-visible,
.vitas-account__item:focus-visible,
.vitas-cart-link:focus-visible,
.vitas-brand:focus-visible,
.vitas-search__submit:focus-visible,
.vitas-nav-row nav a:focus-visible,
.vitas-nav-toggle:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Bandeau de garanties */
.vitas-guarantees {
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.vitas-guarantees__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 2rem;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.625rem 0;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
}

.vitas-guarantees__item::before {
  content: '✓ ';
  color: #2ea043;
}

/* Client connecté : pastille avec l'initiale du prénom, qui ouvre le menu. */
.vitas-account {
  position: relative;
}

.vitas-account__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
}

.vitas-account__toggle[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--color-secondary);
}

.vitas-account__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  min-width: 230px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 66, 115, 0.18);
}

.vitas-account__menu[hidden] {
  display: none;
}

.vitas-account__hello {
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.75rem 0.625rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-primary-dark);
  font-weight: 800;
}

.vitas-account__item {
  display: block;
  padding: 0.75rem;
  border-radius: 4px;
  color: var(--color-primary-dark);
  font-weight: 500;
}

.vitas-account__item:hover {
  background: rgba(14, 90, 150, 0.12);
}

.vitas-account__item:focus-visible {
  background: rgba(14, 90, 150, 0.12);
}

.vitas-account__item--customer-logout {
  margin-top: 0.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 4px 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .vitas-account__menu:not([hidden]) {
    animation: vitas-account-menu-in 0.15s ease-out;
  }
}

@keyframes vitas-account-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Bureau : logo agrandi (le lettrage devient lisible) et tous les éléments de la
   ligne -- menu, recherche, compte, panier -- calés sur le centre du lettrage du
   logo, qui se situe à 82 % de la hauteur de l'image (feuilles en haut). Le
   décalage vaut donc (0,82 - 0,5) x hauteur du logo, et suit la variable. */
@media (min-width: 1025px) {
  .vitas-header__inner {
    --logo-h: 3.75rem;
    gap: 1.5rem;
  }

  /* Marge basse plus grande : les éléments descendent sur la ligne du lettrage
     et ne doivent pas coller au filet du bas. */
  .vitas-header__main {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
  }

  .vitas-nav-row,
  .vitas-search,
  .vitas-header-actions {
    transform: translateY(calc(var(--logo-h) * 0.32));
  }

  /* L'entrée active a 8 px de soulignement sous son texte : sa boîte est donc
     4 px plus bas que le texte. Le menu descend de 4 px de plus pour que le
     TEXTE (et non la boîte) soit sur la ligne du lettrage ; le soulignement
     pend sous la ligne. */
  .vitas-nav-row {
    transform: translateY(calc(var(--logo-h) * 0.32 + 4px));
  }

  /* Entre 1025 et 1199 px la place est comptée : menu resserré et recherche
     réduite pour que tout tienne sur la ligne du lettrage. */
  .vitas-nav-row nav ul {
    gap: 0.5rem 1.25rem;
  }

  .vitas-search {
    width: 11rem;
  }
}

@media (min-width: 1200px) {
  .vitas-header__inner {
    --logo-h: 4.5rem;
    gap: 2rem;
  }

  .vitas-search {
    width: 15rem;
  }
}

@media (min-width: 901px) {
  .vitas-topbar,
  .vitas-header__main,
  .vitas-guarantees {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}

@media (max-width: 1024px) {
  .vitas-header__inner {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .vitas-brand {
    margin-right: auto;
  }

  /* Le conteneur du menu disparaît : bouton burger et liste deviennent des
     éléments de la ligne principale, la liste ouverte occupant une ligne. */
  .vitas-nav-row {
    display: contents;
  }

  .vitas-nav-toggle {
    display: flex;
    order: 2;
  }

  .vitas-header-actions {
    order: 3;
  }

  .vitas-nav-row nav {
    display: none;
    order: 4;
  }

  /* Dans le flux (pas en absolu) : le menu ouvert pousse le contenu de la
     page vers le bas au lieu de le recouvrir. */
  .vitas-nav-row nav.is-open {
    display: block;
    flex-basis: 100%;
    padding: 0 0 0.5rem;
  }

  .vitas-nav-row nav ul {
    flex-direction: column;
    gap: 0;
  }

  .vitas-nav-row nav a {
    padding: 0.75rem 0;
  }

  .vitas-search,
  .vitas-guarantees {
    display: none;
  }
}

/* Petits écrans : « Se connecter » se réduit à une icône (le texte reste lu
   par les lecteurs d'écran) pour que logo, compte, panier et burger tiennent
   sur une ligne. */
@media (max-width: 520px) {
  .vitas-header__inner {
    gap: 0.5rem;
  }

  .vitas-brand__name {
    font-size: 1.0625rem;
  }

  .vitas-header-actions {
    gap: 0.25rem;
  }

  .vitas-account-link {
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .vitas-account-link::before {
    content: 'person';
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
  }
}

/* Footer (projection) : fond marine foncé, marque et une colonne de
   navigation alimentée par le menu du header, ligne légale. */

.vitas-footer {
  position: relative;
  background: var(--color-footer) url('assets/images/decor/footer-botanic.svg') repeat left top;
  color: #cbd5e1;
  font-size: 0.875rem;
}

.vitas-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 2rem;
}

.vitas-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.vitas-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.vitas-footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-white);
}

.vitas-footer__description {
  max-width: 24rem;
  margin: 0;
  line-height: 1.6;
}

.vitas-footer__col-title {
  margin: 0 0 0.875rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-white);
}

.vitas-footer__links {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-footer__links a,
.vitas-footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #cbd5e1;
  transition: color 0.2s ease;
}

.vitas-footer__links a:hover,
.vitas-footer__links a:focus-visible,
.vitas-footer__legal-links a:hover,
.vitas-footer__legal-links a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}

.vitas-footer__links a:focus-visible,
.vitas-footer__legal-links a:focus-visible,
.vitas-footer__brand-link:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Ligne légale : copyright et liens séparés par des points médians. */
.vitas-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.75rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(0, 40, 75, 0.15), rgba(0, 40, 75, 0.6));
  font-size: 0.75rem;
  text-align: center;
}

.vitas-footer__copyright {
  margin: 0;
}

.vitas-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.75rem;
}

.vitas-footer__legal-links a::before {
  content: '·';
  margin-right: 0.75rem;
  color: #94a3b8;
}

@media (min-width: 640px) {
  .vitas-footer__columns {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (min-width: 1025px) {
  .vitas-footer__inner {
    padding: 3.5rem 3rem 2rem;
  }

  .vitas-footer__links a,
  .vitas-footer__legal-links a {
    min-height: 0;
    padding: 0.25rem 0;
  }
}

/* Bouton retour en haut */

.vitas-back-to-top {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.vitas-back-to-top.is-visible {
  display: flex;
}

/* Boutons CTA */

.btn {
  display: inline-block;
  border: none;
  border-radius: 50px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-heading);
  /* Taille et interligne propres au bouton (et non hérités) : le même bouton
     doit avoir la même taille sur l'accueil (16px, interligne normal) et dans
     la boutique (.vitas-content-typography : 17px, interligne 1,7). */
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  /* Texte blanc (DESIGN.md) : AAA (7:1) sur --color-primary (7,19:1) et
     --color-tertiary-button (7,13:1), vérifié par calcul WCAG. Au survol le
     fond s'assombrit, ce qui ne fait qu'augmenter le contraste. */
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.btn--primary {
  background: var(--color-primary);
}

.btn--secondary {
  background: var(--color-tertiary-button);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-hover);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-tertiary-button-hover);
}

/* Page d'accueil */

.vitas-section {
  width: 100%;
  padding: 3rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.vitas-section__kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.vitas-intro__content .vitas-section__kicker {
  color: var(--color-primary);
}

.vitas-section__title {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 1rem;
}

/* Bandeau d'en-tête des pages non-accueil (fil d'Ariane, titre) -- cf. change
   page-hero-banner. Fond « sondage en profondeur » : dégradé du bleu marque
   vers le bleu foncé (on descend en lisant la page), courbes de niveau de
   l'accueil (section Engagement) à droite, ligne de marée en pied de bandeau.
   Le bandeau est un enfant direct de <body> : il occupe déjà toute la largeur.
   Surtout pas de "width: 100vw" ici -- 100vw inclut la barre de défilement
   verticale et faisait déborder la page de quelques pixels (barre de
   défilement horizontale). */

.vitas-page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.vitas-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/decor/depth-contours.svg') no-repeat right -140px center / auto 230%;
  opacity: 0.9;
  pointer-events: none;
}

.vitas-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: url('assets/images/decor/tide-line.svg') repeat-x left bottom;
  opacity: 0.85;
}

.vitas-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 4rem;
  text-align: left;
}

.vitas-page-hero__breadcrumb {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

.vitas-page-hero__breadcrumb a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vitas-page-hero__breadcrumb-sep {
  margin: 0 0.5rem;
  opacity: 0.7;
}

.vitas-page-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3.125rem;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0;
}

@media (max-width: 768px) {
  .vitas-page-hero::before {
    background-position: right -220px center;
    background-size: auto 260%;
  }

  .vitas-page-hero__inner {
    padding: 2.75rem 1.5rem 2.5rem;
  }

  .vitas-page-hero__title {
    font-size: 2rem;
  }
}

/* Accueil de la projection (screenshots/projection_vitasplanteas/index.html) :
   hero, histoire, cures, catalogue. Briques communes : pastille, bouton,
   titre, en-tête de section centré. */

.vitas-pill {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(0, 163, 196, 0.12);
  color: var(--color-secondary-text);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vitas-pill--green {
  background: rgba(46, 160, 67, 0.12);
  color: #237833;
}

.vitas-pill--light {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}

.vitas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.875rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.vitas-btn:active {
  transform: scale(0.98);
}

.vitas-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.vitas-btn--primary:hover,
.vitas-btn--primary:focus-visible {
  background: var(--color-primary-hover);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.2);
}

.vitas-btn--secondary {
  background: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.vitas-btn--secondary:hover,
.vitas-btn--secondary:focus-visible {
  background: var(--color-surface-low);
}

.vitas-btn:focus-visible,
.vitas-cure:focus-visible,
.vitas-pcard a:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.vitas-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text);
}

.vitas-block-head {
  margin-bottom: 2.5rem;
  text-align: center;
}

.vitas-hero-bg {
  background: linear-gradient(180deg, #f0f3ff, var(--color-white));
}

.vitas-hero,
.vitas-story,
.vitas-cures,
.vitas-catalogue,
.vitas-engagement,
.vitas-avis,
.vitas-news,
.vitas-blog {
  padding: 3rem 1.25rem;
}

.vitas-hero__inner,
.vitas-story__inner,
.vitas-cures__inner,
.vitas-catalogue__inner,
.vitas-engagement__inner,
.vitas-avis__inner,
.vitas-news__inner,
.vitas-fp__inner {
  max-width: 1184px;
  margin: 0 auto;
}

/* Hero */
.vitas-hero {
  position: relative;
  overflow: hidden;
}

.vitas-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}

.vitas-hero__title {
  margin: 0 0 1.25rem;
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--color-primary);
}

.vitas-hero__title em {
  font-style: normal;
  color: var(--color-secondary-text);
}

.vitas-hero__text {
  max-width: 32.5rem;
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.vitas-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.vitas-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 2.25rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.vitas-hero__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-primary);
}

.vitas-hero__stat span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.vitas-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(160deg, #0e5a96 0%, #00a3c4 70%, #63dbfe 100%);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.1);
}

.vitas-hero__visual::after {
  content: '';
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 60%;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.25), transparent 70%);
}

.vitas-hero__pack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46%;
  aspect-ratio: 3 / 5;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--color-white);
  box-shadow: 0 20px 40px rgba(0, 30, 60, 0.35);
  font-family: var(--font-heading);
  text-align: center;
}

.vitas-hero__pack strong {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-primary);
}

.vitas-hero__pack small {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-secondary-text);
}

/* Photo optionnelle (champ « Hero : photo du visuel ») : remplace la carte
   blanche, même cadre arrondi et même ombre. */
.vitas-hero__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 78%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 30, 60, 0.35);
}

.vitas-hero__chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 88%;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background: var(--color-white);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.2);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
}

.vitas-hero__chip .vitas-mi {
  font-size: 1rem;
}

.vitas-hero__chip--top {
  top: 8%;
  left: 6%;
}

.vitas-hero__chip--top .vitas-mi {
  color: var(--color-secondary-text);
}

.vitas-hero__chip--bottom {
  right: 6%;
  bottom: 10%;
  color: #237833;
}

/* Histoire */
.vitas-story {
  background: var(--color-surface);
}

.vitas-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.vitas-story__photo {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
  background: linear-gradient(160deg, #d1e4ff, #b3ebff);
  overflow: hidden;
}

/* Photo optionnelle (champ « Histoire : photo ») : remplit le cadre 3:4. */
.vitas-story__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vitas-story__years {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
}

.vitas-story__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.vitas-tag {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vitas-tag--cyan {
  background: rgba(0, 163, 196, 0.12);
  color: var(--color-secondary-text);
}

.vitas-tag--green {
  background: rgba(46, 160, 67, 0.12);
  color: #237833;
}

.vitas-story__text {
  margin: 0;
  color: var(--color-text-muted);
}

.vitas-story__list {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.vitas-story__list li::before {
  content: '● ';
  color: #2ea043;
  font-size: 0.625rem;
}

/* Cures */
.vitas-cures__grid,
.vitas-catalogue__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-catalogue__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.vitas-cure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 2px 8px -2px rgba(14, 90, 150, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vitas-cure:hover,
.vitas-cure:focus-visible {
  border-color: var(--color-secondary);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.1);
}

.vitas-cure__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(0, 163, 196, 0.12);
  color: var(--color-secondary-text);
}

.vitas-cure__icon--green {
  background: rgba(46, 160, 67, 0.12);
  color: #237833;
}

.vitas-cure__icon .vitas-mi {
  font-size: 1.5rem;
}

.vitas-cure__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.vitas-cure__text {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.vitas-cure__cta {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Catalogue */
.vitas-catalogue__empty {
  margin: 0;
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
}

.vitas-catalogue__more {
  margin: 2rem 0 0;
  text-align: center;
}

.vitas-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 2px 8px -2px rgba(14, 90, 150, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vitas-pcard:hover,
.vitas-pcard:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.1);
}

.vitas-pcard__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vitas-pcard__badge--alert {
  background: var(--color-alert);
}

.vitas-pcard__badge--green {
  background: var(--color-tertiary-button);
}

.vitas-pcard__badge--cyan {
  background: var(--color-secondary-text);
}

.vitas-pcard__badge--marine {
  background: var(--color-primary);
}

.vitas-pcard__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--color-surface);
}

.vitas-pcard__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vitas-pcard__icon {
  font-size: 3.5rem;
  color: var(--color-secondary-text);
}

.vitas-pcard__rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.vitas-stars {
  display: inline-flex;
  align-items: center;
  color: #f5a623;
}

.vitas-stars .vitas-mi {
  font-size: 0.9375rem;
}

.vitas-mi--fill {
  font-variation-settings: 'FILL' 1;
}

.vitas-stars .vitas-mi--empty {
  color: #cbd5e1;
}

.vitas-pcard__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.vitas-pcard__title a {
  color: var(--color-text);
}

.vitas-pcard__text {
  flex: 1;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.vitas-pcard__prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.vitas-pcard__price {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
}

.vitas-pcard__unit {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.vitas-pcard__detail,
.vitas-pcard__cta .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 0.25rem;
  padding: 0.6875rem 1rem;
  border: 1.5px solid var(--color-primary);
  border-radius: 9999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vitas-pcard__detail {
  background: var(--color-white);
  color: var(--color-primary);
}

.vitas-pcard__detail:hover,
.vitas-pcard__detail:focus-visible {
  background: var(--color-surface-low);
}

.vitas-pcard__cta .button:hover,
.vitas-pcard__cta .button:focus-visible {
  background: var(--color-primary-hover);
}

.vitas-pcard__cta .added_to_cart {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
}

@media (min-width: 640px) {
  .vitas-cures__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vitas-catalogue__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vitas-title {
    font-size: 2rem;
  }
}

@media (min-width: 641px) {
  .vitas-catalogue__grid {
    gap: 1.5rem;
  }
}

@media (min-width: 901px) {
  .vitas-hero,
  .vitas-story,
  .vitas-cures,
  .vitas-catalogue,
  .vitas-engagement,
  .vitas-avis,
  .vitas-news,
  .vitas-blog {
    padding: 4.5rem 3rem;
  }

  .vitas-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
  }

  .vitas-hero__title {
    font-size: 3rem;
  }

  .vitas-story__inner {
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 3.5rem;
  }

  .vitas-title {
    font-size: 2.25rem;
  }

  .vitas-cures__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vitas-catalogue__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Produit phare, engagement, avis
   (cf. change vitas-home-featured-engagement-reviews). */

.vitas-fp {
  padding: 3rem 1.25rem;
}

.vitas-fp {
  background: var(--color-surface-low);
  scroll-margin-top: 1rem;
}

.vitas-avis {
  background: #f9f9ff;
}

.vitas-fp__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.vitas-fp__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, var(--color-surface-low), #dee8ff);
}

.vitas-fp__visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-secondary-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.vitas-fp__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
}

.vitas-fp__image {
  width: auto;
  max-width: 80%;
  max-height: 22rem;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 66, 115, 0.25));
}

.vitas-fp__media-icon {
  font-size: 7rem;
  color: var(--color-primary);
}

.vitas-fp__visual-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vitas-fp__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.vitas-fp__rating strong {
  font-weight: 800;
  color: var(--color-text);
}

.vitas-stars {
  display: inline-flex;
  align-items: center;
  color: #d97706;
}

.vitas-stars .vitas-mi {
  font-size: 1rem;
}

.vitas-fp__glass {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
}

.vitas-fp__glass .vitas-mi {
  font-size: 1rem;
  color: var(--color-secondary-text);
}

.vitas-fp__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-fp__stat {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.vitas-fp__stat strong {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-primary-dark);
}

.vitas-fp__stat span {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.vitas-fp__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.vitas-fp__kicker {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-secondary-text);
}

.vitas-fp__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-primary-dark);
}

.vitas-fp__lead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #414750;
}

.vitas-fp__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0;
}

.vitas-fp__price {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primary-dark);
}

.vitas-fp__unit {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.vitas-fp__stock {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
}

.vitas-fp__stock.is-in {
  background: rgba(139, 251, 145, 0.4);
  color: #005319;
}

.vitas-fp__stock.is-out {
  background: #ffdad6;
  color: #93000a;
}

.vitas-fp__quote {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--color-secondary);
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.6;
  color: #414750;
}

.vitas-fp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-fp__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--color-surface-low);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
}

.vitas-fp__chips .vitas-mi {
  font-size: 1rem;
  color: var(--color-secondary-text);
}

.vitas-fp__dosage {
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.vitas-fp__dosage-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-fp__dosage-title .vitas-mi,
.vitas-fp__tip .vitas-mi {
  font-size: 1.125rem;
  color: var(--color-secondary-text);
}

.vitas-fp__dosage-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #414750;
}

.vitas-fp__dosage-list strong {
  color: var(--color-text);
}

.vitas-fp__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.vitas-fp__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0;
}

.vitas-fp__qty {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: var(--color-surface-low);
}

.vitas-fp__qty button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary-dark);
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
}

.vitas-fp__qty button:hover {
  background: #dee8ff;
}

.vitas-fp__qty input {
  width: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}

.vitas-fp__qty input::-webkit-outer-spin-button,
.vitas-fp__qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.vitas-fp__add,
.vitas-fp__detail {
  display: inline-flex;
  flex: 1 1 14rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 66, 115, 0.2);
  transition: background-color 0.2s ease;
}

.vitas-fp__detail {
  align-self: flex-start;
  flex: 0 0 auto;
}

.vitas-fp__add:hover,
.vitas-fp__add:focus-visible,
.vitas-fp__detail:hover,
.vitas-fp__detail:focus-visible {
  background: var(--color-primary);
}

.vitas-fp__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(139, 251, 145, 0.25);
  font-size: 0.8125rem;
  color: #005319;
}

.vitas-fp__sub p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.vitas-fp__sub a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 9999px;
  background: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 800;
  color: #005319;
}

.vitas-fp__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.vitas-fp__origin {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
}

.vitas-fp__origin .vitas-mi {
  font-size: 0.875rem;
}

.vitas-fp a:focus-visible,
.vitas-fp button:focus-visible,
.vitas-fp input:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Engagement */
.vitas-engagement {
  background: var(--color-primary);
  color: #dbeafe;
}

.vitas-engagement__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
}

.vitas-engagement__title {
  margin: 0 0 1rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-white);
}

.vitas-engagement__text {
  margin: 0;
}

.vitas-engagement__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-engagement__card {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
}

.vitas-engagement__card-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-white);
}

.vitas-engagement__card-title .vitas-mi {
  font-size: 1.125rem;
  color: #8bfb91;
}

/* Avis */
.vitas-avis {
  background: var(--color-surface);
}

.vitas-avis__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem 0 0;
}

.vitas-avis__rating strong {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primary);
}

.vitas-avis__rating .vitas-stars .vitas-mi {
  font-size: 1.125rem;
}

.vitas-avis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-avis__card {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 2px 8px -2px rgba(14, 90, 150, 0.05);
  font-size: 0.875rem;
}

.vitas-avis__text {
  margin: 0.75rem 0 1rem;
  color: var(--color-text-muted);
}

.vitas-avis__who {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Newsletter (masquée par défaut) */
.vitas-news {
  background: linear-gradient(135deg, #d1e4ff, #b3ebff);
}

.vitas-news__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.vitas-news__inner > * {
  min-width: 0;
}

.vitas-news__title {
  margin: 0 0 0.75rem;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.vitas-news__text {
  margin: 0;
  color: var(--color-text-muted);
}

/* Formulaire Fluent Forms du bandeau (cf. inc/newsletter-form.php) : la rangée
   e-mail + bouton devient la pilule blanche de la projection, le consentement
   passe dessous, le champ piège reste hors écran (.vitas-hp-field). */
.vitas-news__form .fluentform {
  width: 100%;
}

.vitas-news__form .ff-t-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.375rem;
  border-radius: 9999px;
  background: var(--color-white);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.1);
}

.vitas-news__form .ff-t-column-1 {
  position: relative;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
  padding: 0;
}

.vitas-news__form .ff-t-column-1 .ff-el-group {
  width: 100%;
}

.vitas-news__form .ff-t-column-2 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0;
}

.vitas-news__form .ff_submit_btn_wrapper {
  width: auto !important;
  margin: 0 !important;
}

.vitas-news__form .ff-t-container .ff-el-group {
  margin: 0 !important;
}

.vitas-news__form .ff-t-container .ff-btn-submit {
  margin: 0 !important;
}

/* Libellé conservé pour les lecteurs d'écran, masqué visuellement. */
.vitas-news__form .ff-el-form-hide_label .ff-el-input--label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.vitas-news__form .fluentform .ff-el-form-control {
  width: 100%;
  min-height: 44px;
  padding: 0 1.125rem;
  border: 0 !important;
  border-radius: 9999px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 0.9375rem;
}

.vitas-news__form .ff-el-form-control:focus {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
  box-shadow: none;
}

.vitas-news__form .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 1.5rem !important;
  border: 1.5px solid var(--color-primary) !important;
  border-radius: 9999px !important;
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vitas-news__form .ff-btn-submit:hover,
.vitas-news__form .ff-btn-submit:focus-visible {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.vitas-news__form .ff-btn-submit:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.vitas-news__form .vitas-news-consent {
  margin: 0.75rem 0 0 !important;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text);
}

.vitas-news__form .ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.vitas-news__form .ff_tc_checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--color-primary);
}

.vitas-news__form .ff_t_c,
.vitas-news__form .ff-el-is-error .ff_t_c,
.vitas-news__form .ff-el-is-error .ff-el-form-check-label {
  color: var(--color-text) !important;
}

.vitas-news__form .ff_t_c a {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* Erreurs sous la pilule, sans en agrandir la hauteur. */
.vitas-news__form .ff-t-column-1 .error.text-danger {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 1.125rem;
  z-index: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: #b42318;
}

.vitas-news__form .vitas-news-consent .error.text-danger {
  display: block;
  margin-top: 0.25rem;
  font-weight: 600;
  color: #b42318;
}

.vitas-news__form .ff-message-success {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 8px 24px -4px rgba(14, 90, 150, 0.1);
  color: #14532d;
  font-weight: 700;
}

.vitas-news__form .ff-message-success p {
  margin: 0;
}

/* Blog (aussi utilisé par la page Blog) */
.vitas-blog {
  max-width: 1280px;
  margin: 0 auto;
}

.vitas-blog__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.vitas-blog__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.vitas-blog__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 2px 8px -2px rgba(14, 90, 150, 0.05);
}

.vitas-blog__image {
  display: block;
}

.vitas-blog__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vitas-blog__image--placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #9fcaff, #6fdd78);
}

.vitas-blog__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
}

.vitas-blog__category {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(0, 163, 196, 0.12);
  color: var(--color-secondary-text);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vitas-blog__category .vitas-icon {
  display: none;
}

.vitas-blog__date {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.vitas-blog__title {
  margin: 0.5rem 0;
}

.vitas-blog__title a {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.vitas-blog__readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  min-height: 44px;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.vitas-blog__all {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
}

@media (min-width: 640px) {
  .vitas-engagement__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vitas-fp__inner {
    padding: 1.5rem;
  }

  .vitas-fp__title {
    font-size: 2rem;
  }

  .vitas-engagement__title,
  .vitas-news__title {
    font-size: 2rem;
  }
}

@media (min-width: 901px) {
  .vitas-engagement__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 3.5rem;
  }

  .vitas-avis__grid,
  .vitas-blog__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vitas-news__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
  }

  /* La colonne du formulaire a la hauteur de la pilule seule : le consentement
     et les messages d'erreur se posent en dessous sans l'allonger, si bien que
     le texte de gauche se centre exactement sur la pilule. */
  /* Place pour le consentement (et son message d'erreur) sous la pilule. */
  .vitas-news {
    padding-bottom: 6.5rem;
  }

  .vitas-news__form {
    position: relative;
  }

  .vitas-news__form .vitas-news-consent {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
  }
}

@media (min-width: 901px) {
  .vitas-fp {
    padding: 4.5rem 3rem;
  }
}

@media (min-width: 1025px) {
  .vitas-fp__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    padding: 2rem;
  }
}

/* Décor (cf. change vitas-home-decor) : trois motifs tirés de l'univers de la
   marque -- la ligne de marée de l'étui, la profondeur du puisage, les galets
   du littoral breton. SVG statiques, sans image ni animation. */

/* Ligne de marée : séparateur en haut de « Notre histoire » et soulignement
   court sous les titres centrés. */
.vitas-story {
  position: relative;
}

.vitas-story::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 14px;
  background: url('assets/images/decor/tide-line.svg') repeat-x left top;
  pointer-events: none;
}

.vitas-block-head .vitas-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 12px;
  margin: 0.75rem auto 0;
  background: url('assets/images/decor/tide-underline.svg') no-repeat center;
}

/* Courbes de niveau : profondeur du puisage, derrière le bandeau d'engagement.
   Les cartes translucides floutent le motif derrière elles : texte net. */
.vitas-engagement {
  position: relative;
  overflow: hidden;
}

.vitas-engagement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/decor/depth-contours.svg') no-repeat right -200px center / 640px auto;
  opacity: 0.8;
  pointer-events: none;
}

.vitas-engagement__inner {
  position: relative;
  z-index: 1;
}

.vitas-engagement__card {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Galets : icônes des cures aux formes organiques, trois variantes en alternance. */
.vitas-cure__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

.vitas-cures__grid li:nth-child(even) .vitas-cure__icon {
  border-radius: 42% 58% 38% 62% / 58% 42% 60% 40%;
}

.vitas-cures__grid li:nth-child(3n) .vitas-cure__icon {
  border-radius: 55% 45% 66% 34% / 40% 60% 40% 60%;
}

@media (min-width: 901px) {
  .vitas-engagement::before {
    background-size: 900px auto;
    background-position: right -120px center;
  }
}

/* Présentation du magasin */

/* Pleine largeur du navigateur (comme .vitas-reviews) : le décor
   branche/baies en fond doit atteindre le bord réel de l'écran, pas
   s'arrêter à la largeur max. du contenu -- d'où un conteneur externe
   plein écran (fond) et un conteneur interne .vitas-intro__inner qui
   recentre le contenu à la largeur habituelle des sections. */
.vitas-intro {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-image: url('../../uploads/2026/07/intro-bg-branch-berries.png');
  background-repeat: no-repeat;
  background-position: bottom right;
}

/* Filigrane décoratif repris de prod4 : un mot géant, presque invisible sur
   le fond (blanc cassé à 40% d'opacité), collé au bord gauche réel de
   l'écran -- une texture, pas un message à lire. Le mot reste sur une
   seule ligne, pivoté à 90° vers la droite (lecture de haut en bas). */
.vitas-intro__watermark {
  position: absolute;
  top: 3rem;
  left: 10vw;
  margin: 0;
  white-space: nowrap;
  transform-origin: top left;
  transform: rotate(90deg) translate(0, -100%);
  font-family: var(--font-primary);
  font-size: 11rem;
  line-height: 0.85;
  /* 500, pas 700 : functions.php ne charge Plus Jakarta Sans qu'en
     500–800 et Inter en 400–600 -- un poids non chargé force le navigateur
     à synthétiser/substituer une autre police, d'où l'écart visuel. 500
     correspond au poids mesuré sur l'élément équivalent de prod4. */
  font-weight: 500;
  color: rgba(243, 243, 237, 0.4);
  pointer-events: none;
  z-index: 0;
}

.vitas-intro__leaf {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.vitas-intro__leaf--cluster {
  top: 8%;
  left: -1.5rem;
  width: 56px;
}

.vitas-intro__leaf--single {
  bottom: 14%;
  left: -1rem;
  width: 30px;
}

/* En dessous de 1300px, la marge à gauche de la colonne de contenu (max.
   1100px, centrée) devient trop étroite pour loger le filigrane sans
   chevaucher le texte -- masqué plutôt que tronqué ou superposé. */
@media (max-width: 1299px) {
  .vitas-intro__watermark {
    display: none;
  }
}

.vitas-intro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 2.5rem;
}

.vitas-intro h3.vitas-section__title {
  color: var(--color-primary);
}

.vitas-intro__content {
  flex: 1 1 380px;
  min-width: 0;
}

.vitas-intro__title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-primary-dark);
  margin: 0 0 1rem;
}

.vitas-intro__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
}

.vitas-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.875rem;
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-primary-dark);
  font-weight: 800;
  font-size: 1.125rem;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
}

.vitas-badge__icon {
  flex-shrink: 0;
  color: var(--color-secondary-text);
}

.vitas-intro__hours {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.vitas-intro__hours li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.875rem;
}

.vitas-intro__hours .vitas-icon {
  color: var(--color-primary);
}

.vitas-intro__highlight {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.vitas-intro__highlight-icon {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.vitas-intro__cta {
  margin-top: 1.5rem;
}

.vitas-intro__visual {
  position: relative;
  flex: 0 0 280px;
  width: 280px;
}

.vitas-intro__photo-frame {
  width: 100%;
  aspect-ratio: 528 / 670;
  background-image: url('../../uploads/2026/07/intro-photo-backdrop-green.png');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.vitas-intro__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.vitas-intro__counter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.vitas-intro__counter-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.vitas-intro__counter strong {
  font-size: 1.75rem;
  margin-right: 0.25rem;
}

/* Catégories */

.vitas-categories .vitas-section__kicker,
.vitas-categories .vitas-section__title {
  text-align: center;
}

.vitas-categories .vitas-section__kicker {
  color: var(--color-primary);
}

.vitas-categories__list {
  display: grid;
  /* 4 catégories actuellement : une colonne par catégorie en desktop/tablette,
     empilées en mobile (cf. media query ci-dessous) -- à ajuster si le nombre
     de catégories change. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vitas-categories__item {
  position: relative;
}

/* La carte entière est cliquable (mène à l'archive de la catégorie
   WooCommerce sélectionnée) -- .vitas-categories__item reste le seul
   contexte de positionnement (pour .wave, positionnée en absolu), le reste
   de la mise en page vit sur ce lien. */
.vitas-categories__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: none;
}

/* Alterne marine/cyan (accent + vague) par position plutôt que par une classe
   codée en dur sur chaque <li> -- reste correct si l'ordre des catégories change. */
.vitas-categories__item:nth-child(odd) {
  --vitas-categories-accent: var(--color-primary);
  --vitas-categories-on-accent: var(--color-white);
  --vitas-categories-hover-filter: brightness(0.88);
  --vitas-categories-wave: url('../../uploads/2026/07/category-wave-green.png');
}

.vitas-categories__item:nth-child(even) {
  --vitas-categories-accent: var(--color-secondary);
  --vitas-categories-on-accent: var(--color-black);
  --vitas-categories-hover-filter: brightness(1.12);
  --vitas-categories-wave: url('../../uploads/2026/07/category-wave-orange.png');
}

/* Le médaillon photo (110px) chevauche le haut de la carte crème sur ~68px
   (62 % de son diamètre), fidèle à la référence prod4 -- cf. .vitas-categories__box
   ci-dessous dont la marge négative le fait remonter d'autant. */
.vitas-categories__photo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.vitas-categories__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  /* Bordure volontairement asymétrique (0 en haut, fine sur les côtés,
     épaisse en bas), fidèle à prod4 (inspection de son CSS live :
     border-width: 0px 2px 10px, ~184×190px) -- ce n'est pas un anneau
     uniforme. Seule sa couleur change au survol (blanc -> accent),
     jamais son épaisseur : aucun décalage de mise en page possible. */
  border-style: solid;
  border-width: 0 2px 6px;
  border-color: var(--color-white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  transition: border-color 0.2s ease;
}

.vitas-categories__link:hover .vitas-categories__photo,
.vitas-categories__link:focus-visible .vitas-categories__photo {
  border-color: var(--vitas-categories-accent);
}

/* Vague décorative (placeholder prod4, cf. commentaire PHP) : sa base coïncide
   avec le haut de la carte, exactement là où le médaillon la chevauche. */
.vitas-categories__wave {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  z-index: 1;
  aspect-ratio: 9 / 1;
  transform: translateY(-100%);
  background-image: var(--vitas-categories-wave);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.vitas-categories__box {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: -68px;
  padding: 82px 1.5rem 1.5rem;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 66, 115, 0.1);
}

.vitas-categories__name {
  display: block;
}

.vitas-categories__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  /* Poussé en bas de la carte (au-delà du `gap` minimum du parent) plutôt que
     centré avec le nom -- reste à hauteur fixe même quand le nom de la
     catégorie fait plusieurs lignes (cf. "Compléments Alimentaires & Huiles
     essentielles"), pour un alignement identique sur les 4 cartes. */
  margin-top: auto;
  border-radius: 50%;
  background: var(--vitas-categories-accent);
  /* Texte blanc sur marine, noir sur cyan (7,04:1) : choisi par carte via
     --vitas-categories-on-accent. */
  color: var(--vitas-categories-on-accent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* La carte entière est cliquable (.vitas-categories__link) : cibler son
   survol/focus plutôt que celui du bouton lui-même (un <span
   aria-hidden> non focusable) garantit que le bouton réagit dès que
   n'importe quelle partie de la carte est survolée/focus. Le filtre va dans
   le sens qui augmente le contraste : assombrir sous une icône blanche
   (marine), éclaircir sous une icône noire (cyan). */
.vitas-categories__link:hover .vitas-categories__cta,
.vitas-categories__link:focus-visible .vitas-categories__cta {
  filter: var(--vitas-categories-hover-filter);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.vitas-categories__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Produits phares */

.vitas-products .vitas-section__kicker,
.vitas-products .vitas-section__title {
  text-align: center;
}

.vitas-products .vitas-section__kicker {
  color: var(--color-primary);
}

.vitas-products__list {
  /* Disposition commune à toutes les listes de produits du site (accueil,
     boutique, blocs WooCommerce) : grille de cartes de 220px au plus. Les pistes
     vides sont écartées (auto-fit) et le bloc de pistes est centré : une ligne
     unique est donc centrée, alors que sur plusieurs lignes la dernière ligne
     incomplète commence à gauche, dans l'ordre de lecture. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vitas-products__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 1rem 1rem 1.5rem;
}

.vitas-products__item a:not(.btn) {
  display: block;
  color: inherit;
  text-decoration: none;
}

.vitas-products__item img {
  border-radius: 6px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.vitas-products__name {
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-products__cta {
  margin-top: auto;
}

.vitas-products__all {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
}

.vitas-products__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Boutique WooCommerce (boucle produits : page boutique, archives de
   catégorie) -- même présentation carte que les produits phares de
   l'accueil, cf. change restyle-shop-archive-product-cards. Balisage natif
   WooCommerce (pas de template surchargé), donc classes du plugin ciblées
   directement plutôt que réutilisation de .vitas-products__*. */

/* Menu de tri de la boutique : select natif habillé aux couleurs du thème
   (bordure et texte vert foncé, flèche SVG, focus vert accent). */
.woocommerce .woocommerce-result-count {
  margin: 0 0 1.5rem;
  line-height: 2.75rem;
  color: var(--color-text-muted);
}

.woocommerce .woocommerce-ordering {
  margin: 0 0 1.5rem;
}

.woocommerce .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.75rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid var(--color-primary-dark);
  border-radius: 999px;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a491d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce .woocommerce-ordering select.orderby:hover {
  background-color: rgba(14, 90, 150, 0.08);
}

.woocommerce .woocommerce-ordering select.orderby:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Mobile : compteur puis menu de tri empilés, menu pleine largeur. */
@media (max-width: 640px) {
  .woocommerce .woocommerce-result-count {
    float: none;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  .woocommerce .woocommerce-ordering {
    float: none;
    width: 100%;
  }

  .woocommerce .woocommerce-ordering select.orderby {
    width: 100%;
  }
}

.woocommerce ul.products {
  /* Même grille que le catalogue de l'accueil (.vitas-catalogue__grid) : 2
     colonnes, puis 4 dès 901px, avec les mêmes cartes (.vitas-pcard) -- cf.
     change unify-product-card. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 641px) {
  .woocommerce ul.products {
    gap: 1.5rem;
  }
}

@media (min-width: 901px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Le clearfix natif de WooCommerce (content:" "; display:table) sur ::before
   et ::after de .products génère une boîte réelle qui devient elle-même un
   item de grille (première cellule fantôme, décalant tous les produits)
   depuis que .products est passé en display:grid -- plus nécessaire de
   toute façon, le clearfix ne sert qu'à la mise en page flottante d'origine. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

/* Boutons natifs WooCommerce ("Ajouter au panier", "Choix des options",
   "Lire la suite" natif d'un produit sans prix, validation de commande...) :
   même apparence que .btn.btn--secondary (pilule verte, texte blanc AAA) pour
   que le bouton ne change pas d'aspect selon le mode (catalogue / boutique
   ouverte) ni entre la liste et la fiche produit -- par défaut WooCommerce
   les affiche en gris/texte vert (liste) ou violet (.alt, fiche), sans rapport
   avec le reste du site. Mêmes sélecteurs (et mêmes variantes :hover/.alt/
   .disabled) que ceux du plugin, préfixés de "body" pour gagner aussi sur
   `.vitas-content-typography a:not(.btn)` (même spécificité, déclaré plus
   loin) sans recourir à !important. */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
body .woocommerce button.button.alt.disabled,
body .woocommerce button.button.alt:disabled {
  display: inline-block;
  border: none;
  border-radius: 50px;
  padding: 0.75rem 1.75rem;
  background: var(--color-tertiary-button);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce input.button.alt:hover,
body .woocommerce a.button:focus-visible,
body .woocommerce button.button:focus-visible {
  background: var(--color-tertiary-button-hover);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* Fiche produit : deux colonnes (image | résumé) puis, sur toute la largeur, les
   produits similaires -- cf. change product-related-section-layout.
   WooCommerce place l'image (float: left) et le résumé (float: right) sans
   rien pour en sortir : la section « Produits similaires » remontait alors à
   côté de l'image et son titre venait s'asseoir contre la description. La
   grille remplace les flottants ; "body" pour passer devant les sélecteurs
   de woocommerce-layout.css (.woocommerce div.product div.images, etc.). */
body .woocommerce div.product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3.5rem;
  align-items: start;
}

body .woocommerce div.product div.images,
body .woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}

/* Le bouton loupe de la galerie a "z-index: 99" côté WooCommerce, contre 50 pour
   l'en-tête sticky : sans contexte d'empilement propre à la galerie, les deux
   valeurs se comparent à l'échelle de la page et la loupe passait devant
   l'en-tête au défilement (cf. change product-gallery-zoom-stacking).
   "isolation: isolate" garde ce z-index à l'intérieur de la galerie. */
body .woocommerce div.product div.images {
  isolation: isolate;
}

/* Résumé court (description + catégorie, la vente en ligne étant fermée) :
   centré face à l'image plutôt que collé en haut d'une colonne vide. */
body .woocommerce div.product div.summary {
  align-self: center;
}

body .woocommerce div.product div.summary .woocommerce-product-details__short-description {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text);
}

body .woocommerce div.product .related.products {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Titre de la section : même traitement que les titres de section de
   l'accueil (centré, marée en soulignement) plutôt que le h2 brut du plugin. */
body .woocommerce div.product .related.products > h2 {
  margin: 0 0 2.5rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-primary-dark);
}

body .woocommerce div.product .related.products > h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 12px;
  margin: 0.75rem auto 0;
  background: url('assets/images/decor/tide-underline.svg') no-repeat center;
}

@media (max-width: 768px) {
  body .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  body .woocommerce div.product div.summary {
    align-self: start;
  }

  body .woocommerce div.product .related.products {
    margin-top: 1rem;
    padding-top: 2.5rem;
  }

  body .woocommerce div.product .related.products > h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}

/* Fiche produit : "Prix :" en texte courant devant le prix en gras vert,
   comme le prix des cartes de la liste. */
.woocommerce div.product p.price {
  margin: 0 0 1rem;
  color: var(--color-primary-dark);
  font-weight: 800;
}

.vitas-price__label {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Fiche produit : quantité et bouton sur une même ligne, de même hauteur
   (align-items: stretch) et de même forme (pilule), au lieu d'un champ natif
   non stylé de 21px à côté d'un bouton de 36px. Couvre aussi le bloc des
   produits à variations (.woocommerce-variation-add-to-cart). */
.woocommerce div.product form.cart,
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}

.woocommerce div.product form.cart .quantity {
  float: none;
  margin: 0;
}

/* Stepper "− 1 +" : une seule pilule à contour neutre contenant les boutons et
   le champ. Contour gris plutôt que vert pour ne pas concurrencer le bouton
   "Ajouter au panier" (action principale) ; un champ de saisie à la forme
   d'un bouton se lisait comme un second bouton. */
.woocommerce .quantity {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 50px;
  background: var(--color-white);
}

.woocommerce .quantity .qty {
  box-sizing: border-box;
  width: 3rem;
  height: auto;
  border: none;
  border-radius: 0;
  /* -2px : compense la bordure du stepper (2px x 2) pour que sa hauteur
     totale égale celle d'un bouton (46,4px). */
  padding: calc(0.75rem - 2px) 0;
  background: transparent;
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.vitas-qty__btn {
  flex: none;
  width: 2.75rem;
  border: none;
  background: transparent;
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vitas-qty__btn:hover:not(:disabled),
.vitas-qty__btn:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}

.vitas-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.woocommerce .quantity:has(:focus-visible) {
  outline: 2px solid var(--color-tertiary-button);
  outline-offset: 2px;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  float: none;
  margin: 0;
}

/* Équipe */

.vitas-team .vitas-section__kicker,
.vitas-team .vitas-section__title {
  text-align: center;
}

.vitas-team .vitas-section__kicker {
  color: var(--color-primary);
}

.vitas-team__list {
  display: grid;
  /* Nombre de membres variable (CPT administrable) -- auto-fit avec largeur
     plafonnée plutôt qu'un nombre de colonnes fixe, même logique que les
     grilles de cartes produit (cf. change cap-product-card-max-width) :
     s'adapte nativement à 1, 3 ou davantage de membres sans media query
     dédiée. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  row-gap: 3rem;
  column-gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vitas-team__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Conteneur dimensionné sur la hauteur totale de la photo (mesure pixel
   par pixel sur capture_prod4_membres_equipes.png : la tête dépasse
   d'environ 30% de la hauteur de l'arche au-dessus de celle-ci -- ce
   n'est pas la photo qui est rognée à la hauteur de l'arche, c'est
   l'arche qui n'occupe que la portion basse, alignée sur le bas de la
   photo). Réserver cette hauteur dans le conteneur (plutôt qu'un
   débordement hors flux) évite que la photo n'empiète sur le texte de la
   carte suivante en mobile (une seule colonne, gap réduit). */
.vitas-team__photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 369 / 456;
}

.vitas-team__photo-wrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 74.78%;
  background: var(--color-primary-dark);
  /* Rayon en % (pas en px) : sur prod4 (370px de large), 150px ne
     représente que ~40% de la largeur, ce qui donne un dôme aplati. En px
     fixe, la même valeur dépasse la moitié de la largeur d'une carte plus
     étroite (~220px) et le navigateur la ramène à un demi-cercle parfait,
     ce qui rend l'arche disproportionnée (trop haute/pointue). Le % évite
     ce plafonnement et conserve les proportions à toute largeur. */
  border-radius: 40.5% 40.5% 0 0 / 44% 44% 0 0;
  transition: background-color 0.3s ease-in-out;
}

.vitas-team__photo {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 76%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Aucun visuel de remplacement (silhouette générique) disponible pour ce
   projet -- un aplat uni de mêmes dimensions que la photo, plutôt qu'une
   balise <img> vide, pour ne pas casser l'alignement de la grille quand un
   membre n'a pas encore de photo. */
.vitas-team__photo--placeholder {
  background: var(--color-surface);
  border-radius: 6px;
}

/* Feuillage et agrume : décors superposés à la photo, positionnés en
   pourcentages du conteneur (pas de pixels fixes) pour rester cohérents
   sur toute la largeur de la grille (auto-fit, minmax(180px, 220px)). */
.vitas-team__leaf {
  position: absolute;
  top: 20.7%;
  left: -4%;
  width: 34%;
  height: auto;
  pointer-events: none;
}

/* Léger débord négatif : sur prod4, l'assiette/l'agrume dépasse un peu
   sous le bord bas de l'arche plutôt que de s'arrêter pile dessus. */
.vitas-team__orange {
  position: absolute;
  left: 50%;
  bottom: -3%;
  transform: translateX(-50%);
  width: 46%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.vitas-team__item:hover .vitas-team__photo-wrap::before {
  background-color: var(--color-primary);
}

.vitas-team__item:hover .vitas-team__orange {
  transform: translateX(-50%) scale(0.9);
}

.vitas-team__name {
  display: block;
  margin-top: 1rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-team__role {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-text-muted);
}

.vitas-team__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Avis clients */

/* Section pleine largeur du navigateur (technique standard 100vw +
   marge négative), contrairement aux autres sections de l'accueil qui
   restent plafonnées à 1100px -- cf. design.md. L'image de fond suit la
   même convention que les autres visuels décoratifs du thème (chemin CSS
   relatif vers uploads/, cf. --vitas-categories-wave). */
.vitas-reviews {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-image: url('../../uploads/2026/09/bg-3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .vitas-section (largeur/padding/centrage) s'applique déjà via la classe
   partagée sur cet élément dans front-page.php -- rien à redéfinir ici. */
.vitas-reviews__inner .vitas-section__kicker,
.vitas-reviews__inner .vitas-section__title {
  text-align: left;
}

.vitas-reviews__inner .vitas-section__kicker {
  color: var(--color-primary);
}

.vitas-reviews__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 2rem;
}

.vitas-reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 0 0 200px;
}

.vitas-reviews__summary-label {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-reviews__summary-count {
  color: var(--color-text-muted);
}

.vitas-reviews__google-wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0.25rem;
}

.vitas-reviews__list {
  display: grid;
  /* 3 avis d'exemple actuellement : une colonne par avis en
     desktop/tablette, empilés en mobile (cf. media query ci-dessous) -- à
     ajuster si le nombre d'avis change. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 600px;
}

.vitas-reviews__item {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 66, 115, 0.1);
}

.vitas-reviews__item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vitas-reviews__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Avatar de repli (initiale colorée) quand aucune photo n'est renseignée --
   même logique que .vitas-team__photo--placeholder : un aplat plutôt
   qu'une image cassée. */
.vitas-reviews__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
}

.vitas-reviews__item-meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.vitas-reviews__name {
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-reviews__status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.vitas-reviews__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.vitas-reviews__google-icon {
  flex-shrink: 0;
}

.vitas-reviews__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.vitas-reviews__text {
  margin: 0.75rem 0 0;
  color: var(--color-text-muted);
}

/* Étoiles : calque gris (fond) + calque doré superposé, découpé en largeur
   selon le pourcentage de la note -- gère nativement les notes
   fractionnaires (ex. 4,5) sans jeu d'icônes demi-pleines, cf.
   vitas_render_star_rating(). */
.vitas-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 1rem;
  letter-spacing: 2px;
  white-space: nowrap;
}

.vitas-stars--large {
  font-size: 1.5rem;
}

.vitas-stars__track {
  color: #d9d9d9;
}

.vitas-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--color-secondary-text);
  white-space: nowrap;
}

.vitas-reviews__reply {
  /* Ancré en bas de la carte, quelle que soit la longueur du texte
     au-dessus -- la carte est un conteneur flex vertical (cf.
     .vitas-reviews__item), donc ce bloc reste toujours à hauteur égale
     d'une carte à l'autre sur une même ligne, sans dépendre du contenu. */
  margin-top: auto;
  padding-top: 0.75rem;
}

.vitas-reviews__reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.vitas-reviews__reply-toggle::-webkit-details-marker {
  display: none;
}

.vitas-reviews__reply-toggle:hover {
  color: var(--color-primary-dark);
}

.vitas-reviews__reply-chevron {
  flex-shrink: 0;
  color: currentColor;
  transition: transform 0.2s ease;
}

.vitas-reviews__reply[open] .vitas-reviews__reply-chevron {
  transform: rotate(90deg);
}

.vitas-reviews__reply p {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  animation: vitas-reply-reveal 0.2s ease;
}

@keyframes vitas-reply-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.vitas-reviews__badge {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 4px;
}

.vitas-reviews__empty {
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1.5rem;
}

/* FAQ (page dédiée page-faq.php) -- bloc titre + cartes reprenant le style
   déjà en place sur prod4.cyriaquedev.com/faq/ (mesuré par inspection). */

.vitas-faq__intro {
  text-align: center;
}

.vitas-faq__intro .vitas-section__kicker {
  color: var(--color-primary);
}

.vitas-faq__intro .vitas-section__title {
  font-size: 2.8125rem;
}

.vitas-faq__list {
  margin-top: 2.5rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.vitas-faq__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 1.25rem;
}

.vitas-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 3rem 1.1875rem 1.6875rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.vitas-faq__question::-webkit-details-marker {
  display: none;
}

.vitas-faq__item[open] .vitas-faq__question {
  color: var(--color-primary);
}

.vitas-faq__chevron {
  flex-shrink: 0;
  color: var(--color-primary-dark);
  transition: transform 0.2s ease, color 0.2s ease;
}

.vitas-faq__item[open] .vitas-faq__chevron {
  color: var(--color-secondary-text);
  transform: rotate(90deg);
}

.vitas-faq__answer {
  margin: 0;
  padding: 0 1.6875rem 1.25rem;
  color: var(--color-text-muted);
  animation: vitas-reply-reveal 0.2s ease;
}

.vitas-faq__empty {
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1.5rem;
  text-align: center;
}

/* Blog (section "Nos dernières actualités" de la page d'accueil) --
   cartes reprenant le style de prod4.cyriaquedev.com (mesuré par
   inspection), cf. change homepage-blog-section. */

.vitas-blog__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
}

.vitas-blog__pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: none;
}

.vitas-blog__pagination a.page-numbers:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.vitas-blog__pagination .page-numbers.current {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.vitas-blog__pagination .page-numbers.dots {
  color: var(--color-text-muted);
}

/* Contenu d'un article de blog (single.php) -- cf. change
   article-content-typography. Sélecteurs sur les balises HTML natives
   (h2, p, ul, blockquote, table...) plutôt que sur les classes wp-block-*
   de Gutenberg, pour s'appliquer quelle que soit la méthode de rédaction. */

.vitas-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 2rem 0 0;
}

.vitas-article__meta .vitas-blog__date {
  margin: 0;
}

.vitas-article__reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.vitas-article__thumbnail {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 6px;
  margin: 1.5rem 0 0;
}

.vitas-content-typography {
  max-width: 45rem;
  margin: 2rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.vitas-content-typography > *:first-child {
  margin-top: 0;
}

.vitas-content-typography h2,
.vitas-content-typography h3,
.vitas-content-typography h4 {
  color: var(--color-primary-dark);
  font-weight: 800;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
}

.vitas-content-typography h2 {
  font-size: 1.75rem;
}

.vitas-content-typography h3 {
  font-size: 1.375rem;
}

.vitas-content-typography h4 {
  font-size: 1.125rem;
}

.vitas-content-typography p {
  margin: 0 0 1.25rem;
}

.vitas-content-typography strong {
  color: var(--color-primary-dark);
  font-weight: 800;
}

/* :not(.btn) : évite d'écraser le texte noir voulu (contraste AAA, cf.
   .btn plus haut) des boutons CTA qui se retrouvent dans ce wrapper --
   ex. "Lire la suite" WooCommerce sur la page Boutique, une page WP
   classique rendue via page.php comme les autres pages statiques. Même
   principe que .vitas-products__item a:not(.btn). */
.vitas-content-typography a:not(.btn) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vitas-content-typography a:not(.btn):hover {
  color: var(--color-primary-dark);
}

.vitas-content-typography ul,
.vitas-content-typography ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.vitas-content-typography li {
  margin-bottom: 0.5rem;
}

.vitas-content-typography li:last-child {
  margin-bottom: 0;
}

.vitas-content-typography li > ul,
.vitas-content-typography li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.vitas-content-typography blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--color-primary);
  font-style: italic;
  color: var(--color-primary-dark);
}

.vitas-content-typography blockquote p:last-of-type {
  margin-bottom: 0.5rem;
}

.vitas-content-typography blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.vitas-content-typography .wp-block-table {
  overflow-x: auto;
  margin: 1.75rem 0;
}

.vitas-content-typography table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.vitas-content-typography th,
.vitas-content-typography td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.vitas-content-typography th {
  color: var(--color-primary-dark);
  font-weight: 800;
  border-bottom: 2px solid var(--color-primary);
}

.vitas-content-typography hr {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

.vitas-content-typography figure {
  margin: 1.75rem 0;
}

.vitas-content-typography img {
  display: block;
  border-radius: 6px;
}

/* La carte produit (.vitas-pcard) dans une page de contenu -- la Boutique est une
   page WordPress classique rendue dans ce wrapper : sans ces règles, la
   typographie éditoriale ci-dessus s'applique aux h3, p, liens et li de la
   carte (titre de 1,375rem souligné, marges de 1,25rem, items de liste
   espacés) et la carte ne ressemble plus à celle de l'accueil. Cf. change
   unify-product-card. */
.vitas-content-typography ul.products {
  margin: 0;
  padding: 0;
}

.vitas-content-typography ul.products > li.vitas-pcard {
  margin: 0;
}

.vitas-content-typography .vitas-pcard {
  font-size: 1rem;
  line-height: normal;
}

.vitas-content-typography .vitas-pcard h3 {
  margin: 0;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.vitas-content-typography .vitas-pcard img {
  border-radius: 0;
}

.vitas-content-typography .vitas-pcard p {
  margin: 0;
}

.vitas-content-typography .vitas-pcard a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

.vitas-content-typography .vitas-pcard h3 a:not(.btn) {
  color: var(--color-text);
}

.vitas-content-typography .vitas-pcard a.vitas-pcard__detail:not(.btn) {
  color: var(--color-primary);
}

.vitas-content-typography figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Contenu principal - tablette et desktop (sticky footer)
   Le header et le footer n'ont aucune hauteur stable sur cette plage (le
   footer se réempile en fluide selon la largeur, de 412px à plus de 1300px
   mesuré) : un min-height calculé en pixels (calc(100vh - Npx)) serait donc
   juste à une largeur et faux à une autre. Le pattern flexbox ci-dessous
   s'affranchit de connaître ces hauteurs : le contenu (flex: 1 0 auto)
   absorbe automatiquement tout l'espace restant entre header et footer,
   quelle que soit leur taille réelle, évitant qu'un contenu court (ex. FAQ)
   laisse le footer "remonté" avec un grand vide en dessous. */

@media (min-width: 769px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  article.vitas-section,
  article.vitas-404 {
    flex: 1 0 auto;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .vitas-intro__inner {
    flex-direction: column;
  }

  .vitas-intro__photo-frame {
    display: none;
  }

  .vitas-intro__visual {
    flex: 1 1 auto;
    width: auto;
  }

  .vitas-intro__watermark,
  .vitas-intro__leaf {
    display: none;
  }

  .vitas-categories__list,
  .vitas-reviews__list {
    grid-template-columns: 1fr;
  }

  /* Empilées sur 1 colonne, les cartes catégorie profitent d'un espacement
     plus généreux qu'en grille desktop, et un médaillon agrandi (le ratio
     d'origine de 110px sur une carte pleine largeur paraissait chétif). Le
     chevauchement médaillon/carte (cf. style.css plus haut, section
     "Catégories") est recalculé pour ce nouveau diamètre en conservant le
     même ratio de chevauchement (~62 %). */
  .vitas-categories__list {
    gap: 2.5rem;
  }

  .vitas-categories__photo {
    width: 160px;
    height: 160px;
    border-width: 0 2px 9px; /* même bordure asymétrique, mise à l'échelle du médaillon agrandi */
  }

  .vitas-categories__wave {
    top: 61px; /* = 160 (diamètre) − 99 (chevauchement) */
  }

  .vitas-categories__box {
    margin-top: -99px; /* chevauchement ≈ 62 % de 160px */
    padding-top: 113px; /* 99px de chevauchement + 14px de respiration avant le nom */
  }
}

/* Page Contact (page-contact.php) -- coordonnées et formulaire, cf. changes
   contact-page-v2 puis contact-page-cleanup (carte, horaires et adresse
   retirés). */

.vitas-contact-v2__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.vitas-contact-v2__info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 220px;
}

.vitas-contact-v2__info-item .vitas-icon {
  flex-shrink: 0;
  color: var(--color-secondary-text);
}

.vitas-contact-v2__info-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.vitas-contact-v2__info-value {
  display: block;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-contact-v2__info-social {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.vitas-contact-v2__info-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 90, 150, 0.1);
  color: var(--color-primary);
}

.vitas-contact-v2__form {
  padding-top: 1rem;
}

.vitas-contact-v2__form-intro {
  text-align: center;
  margin-bottom: 2rem;
}

/* Le bouton de soumission Fluent Forms n'a pas la classe .btn -- reprend
   ici l'apparence de .btn.btn--primary (pilule marine) pour rester
   cohérent avec le reste du site sans dépendre du CSS interne du plugin. */
.vitas-contact-v2__form .ff-btn-submit {
  display: inline-block !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.75rem 1.75rem !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  cursor: pointer;
}

.vitas-contact-v2__form .ff-btn-submit:hover,
.vitas-contact-v2__form .ff-btn-submit:focus-visible {
  background: var(--color-primary-hover) !important;
}

@media (max-width: 768px) {
  .vitas-contact-v2__info {
    flex-direction: column;
    align-items: flex-start;
  }

  .vitas-contact-v2__info-item {
    flex: none;
  }

  .vitas-contact-v2__info-social {
    align-self: flex-start;
  }
}

/* ============================================================================
   Espace Mon compte (cf. change wp-account-area) -- templates surchargés dans
   woocommerce/myaccount/. Tokens de la marque réutilisés ; l'élément distinctif
   est le ticket de caisse des commandes, le reste reste sobre.
   ========================================================================== */

body.woocommerce-account {
  --color-ticket: var(--color-surface);
  --color-ticket-line: rgba(0, 66, 115, 0.14);
}

/* Pages de produits (boutique, catégories, panier) : quatre cartes de 220px
   (952px avec les écarts) ne tiennent pas dans la colonne de texte de 45rem ;
   même largeur que l'espace Mon compte. */
body.woocommerce-shop .vitas-content-typography,
body.post-type-archive-product .vitas-content-typography,
body.tax-product_cat .vitas-content-typography,
body.woocommerce-cart .vitas-content-typography {
  max-width: 64rem;
}

/* Largeur : navigation + contenu ont besoin de plus que les 45rem du texte courant. */
body.woocommerce-account .vitas-content-typography {
  max-width: 64rem;
}

/* --- Visiteur : connexion et inscription côte à côte ---------------------- */

.woocommerce-account .woocommerce .vitas-account-access {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Le clearfix natif (::before / ::after de .col2-set) deviendrait des cellules de
   la grille et décalerait les deux colonnes. */
.woocommerce-account .woocommerce .vitas-account-access::before,
.woocommerce-account .woocommerce .vitas-account-access::after {
  display: none;
}

.woocommerce-account .woocommerce .vitas-account-access .u-column1,
.woocommerce-account .woocommerce .vitas-account-access .u-column2 {
  float: none;
  width: auto;
  min-width: 0;
}

.woocommerce-account .woocommerce h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.lost_reset_password {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  background: var(--color-white);
}

/* --- Champs de formulaire du compte ---------------------------------------- */

.woocommerce-account .woocommerce form .form-row {
  margin: 0 0 1.125rem;
  padding: 0;
}

.woocommerce-account .woocommerce form .form-row label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--color-primary-dark);
  font-weight: 500;
  line-height: 1.4;
}

.woocommerce-account .woocommerce form .form-row .required {
  color: #9b1c1c;
  text-decoration: none;
}

.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.4;
}

.woocommerce-account .woocommerce form .input-text:focus-visible,
.woocommerce-account .woocommerce form select:focus-visible,
.woocommerce-account .woocommerce form textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary-dark);
}

.woocommerce-account .woocommerce form .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.woocommerce-account .woocommerce form .woocommerce-form__input-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary-dark);
}

.woocommerce-account .woocommerce form .woocommerce-LostPassword {
  margin: 1rem 0 0;
}

.woocommerce-account .woocommerce form .woocommerce-LostPassword a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Indicateur de force du mot de passe : lisible, sans fond criard. */
.woocommerce-account .woocommerce .woocommerce-password-strength {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-primary-dark);
}

.woocommerce-account .woocommerce .woocommerce-password-hint {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

/* Messages (erreurs, confirmations) : bande latérale colorée + texte contrasté. */
.woocommerce-account .woocommerce .woocommerce-error,
.woocommerce-account .woocommerce .woocommerce-message,
.woocommerce-account .woocommerce .woocommerce-info {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left-width: 5px;
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-black);
  list-style: none;
}

.woocommerce-account .woocommerce .woocommerce-error {
  border-left-color: #b42318;
}

.woocommerce-account .woocommerce .woocommerce-message,
.woocommerce-account .woocommerce .woocommerce-info {
  border-left-color: var(--color-primary);
}

.woocommerce-account .woocommerce .woocommerce-info,
.woocommerce-account .woocommerce .woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.woocommerce-account .woocommerce .woocommerce-info a.button,
.woocommerce-account .woocommerce .woocommerce-message a.button {
  float: none;
  order: 2;
  margin: 0;
  text-decoration: none;
}

.woocommerce-account .woocommerce .woocommerce-error::before,
.woocommerce-account .woocommerce .woocommerce-message::before,
.woocommerce-account .woocommerce .woocommerce-info::before {
  display: none;
}

/* --- Client connecté : navigation + contenu ------------------------------- */

.woocommerce-account .woocommerce .vitas-account-layout {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.woocommerce-account .woocommerce .vitas-account-layout::before,
.woocommerce-account .woocommerce .vitas-account-layout::after,
.woocommerce-account .woocommerce .woocommerce-Addresses::before,
.woocommerce-account .woocommerce .woocommerce-Addresses::after {
  display: none;
}

.woocommerce-account .woocommerce .vitas-account-layout .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .vitas-account-layout .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.625rem 1rem;
  line-height: 1.4;
  border-radius: 6px;
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(14, 90, 150, 0.12);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-weight: 800;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-text-muted);
}

/* --- Bandeau « Bonjour {prénom} » ------------------------------------------ */

.vitas-account-hello {
  margin: 0 0 2rem;
  padding: 1.75rem 2rem;
  border-radius: 6px;
  background: rgba(14, 90, 150, 0.1);
}

.woocommerce-account .woocommerce .vitas-account-hello__title {
  margin: 0 0 0.375rem;
  font-size: 1.75rem;
}

.vitas-account-hello__text {
  margin: 0 0 1.25rem;
}

/* --- Commandes : tickets de caisse ----------------------------------------- */

.woocommerce-account .vitas-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitas-ticket {
  position: relative;
  margin: 0 0 1.25rem;
}

/* Corps du ticket : papier teinté, bord déchiré en bas (même image que le
   footer, utilisée comme masque d'une bande de la couleur du papier). */
.vitas-ticket__body {
  padding: 1.25rem 1.375rem 0.5rem;
  border: 1px solid var(--color-ticket-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--color-ticket);
}

.vitas-ticket::after {
  content: '';
  display: block;
  height: 14px;
  background: var(--color-ticket);
  -webkit-mask: url('assets/images/footer/ripped-paper.png') center top / auto 100% repeat-x;
  mask: url('assets/images/footer/ripped-paper.png') center top / auto 100% repeat-x;
}

.vitas-ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.woocommerce-account .woocommerce .vitas-ticket__number {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-ticket__date,
.vitas-ticket__items {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
}

.vitas-ticket__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 2px dashed var(--color-ticket-line);
  color: var(--color-primary-dark);
}

.vitas-ticket__total-label {
  font-weight: 500;
}

.vitas-ticket__total-amount {
  font-size: 1.25rem;
  font-weight: 800;
}

.vitas-ticket__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1rem 0 0.75rem;
}

.woocommerce-account .woocommerce a.vitas-ticket__link {
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pastille de statut : couleurs choisies pour un contraste de texte >= 4,5:1. */
.vitas-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  background: var(--color-border);
  color: var(--color-primary-dark);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.vitas-status--processing {
  background: var(--color-secondary);
  color: var(--color-black);
}

.vitas-status--completed {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.vitas-status--pending,
.vitas-status--on-hold {
  background: var(--color-border);
  color: var(--color-primary-dark);
}

.vitas-status--cancelled,
.vitas-status--failed {
  background: #7a1f1f;
  color: var(--color-white);
}

.vitas-status--refunded {
  background: #4b5563;
  color: var(--color-white);
}

/* État vide */
.vitas-account-empty {
  padding: 2rem;
  border: 1px dashed var(--color-ticket-line);
  border-radius: 6px;
  background: var(--color-ticket);
}

.vitas-account-empty__text {
  margin: 0 0 1.25rem;
  color: var(--color-primary-dark);
  font-size: 1.125rem;
  font-weight: 500;
}

/* --- Détail d'une commande : ticket large ------------------------------------ */

.vitas-ticket--detail {
  margin-bottom: 2rem;
}

.vitas-ticket--detail .vitas-ticket__body {
  padding: 1.5rem 1.75rem 1rem;
}

.woocommerce-account .woocommerce .vitas-ticket__subtitle,
.woocommerce-account .woocommerce .vitas-ticket--detail h2 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.vitas-ticket--detail table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}

.vitas-ticket--detail table.shop_table th,
.vitas-ticket--detail table.shop_table td {
  padding: 0.625rem 0;
  border: 0;
  border-bottom: 1px dashed var(--color-ticket-line);
  background: transparent;
  color: var(--color-primary-dark);
  text-align: left;
  vertical-align: top;
}

.vitas-ticket--detail table.shop_table thead th {
  font-weight: 800;
}

.vitas-ticket--detail table.shop_table td:last-child,
.vitas-ticket--detail table.shop_table th:last-child {
  text-align: right;
}

.vitas-ticket--detail table.shop_table tfoot tr:last-child th,
.vitas-ticket--detail table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  border-top: 2px dashed var(--color-ticket-line);
  font-size: 1.125rem;
  font-weight: 800;
}

.vitas-ticket--detail table.shop_table a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vitas-ticket--detail .woocommerce-customer-details address {
  padding: 0;
  border: 0;
  font-style: normal;
}

.vitas-ticket--detail .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem;
}

.vitas-ticket--detail .woocommerce-columns--addresses .woocommerce-column {
  float: none;
  width: auto;
}

/* --- Adresses et détails du compte ------------------------------------------ */

.woocommerce-account .woocommerce .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.woocommerce-account .woocommerce .woocommerce-Address-title {
  display: block;
}

.woocommerce-account .woocommerce .woocommerce-Address-title a.edit {
  float: none;
  display: inline-block;
  margin: 0 0 0.75rem;
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-account .woocommerce .woocommerce-Address-title h2,
.woocommerce-account .woocommerce .woocommerce-Address-title h3 {
  float: none;
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  text-align: left;
}

.woocommerce-account .woocommerce .woocommerce-Address address {
  font-style: normal;
}

.woocommerce-account .woocommerce .woocommerce-EditAccountForm fieldset {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.woocommerce-account .woocommerce .woocommerce-EditAccountForm legend {
  padding: 0 0.5rem;
  color: var(--color-primary-dark);
  font-weight: 800;
}

.woocommerce-account .woocommerce .woocommerce-EditAccountForm .form-row-first,
.woocommerce-account .woocommerce .woocommerce-EditAccountForm .form-row-last {
  width: calc(50% - 0.75rem);
}

/* --- Écrans étroits ----------------------------------------------------------- */

@media (max-width: 768px) {
  .woocommerce-account .woocommerce .vitas-account-access {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Navigation en onglets défilants au-dessus du contenu. */
  .woocommerce-account .woocommerce .vitas-account-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .woocommerce-MyAccount-navigation {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: none;
    scroll-snap-align: start;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    padding: 0.625rem 1rem;
    border: 1.5px solid var(--color-primary-dark);
    border-radius: 50px;
    white-space: nowrap;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    border-color: rgba(0, 0, 0, 0.25);
  }

  .woocommerce-account .woocommerce .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-account .woocommerce .woocommerce-EditAccountForm .form-row-last {
    width: 100%;
  }

  .vitas-account-hello {
    padding: 1.5rem;
  }

  .vitas-ticket--detail .vitas-ticket__body {
    padding: 1.25rem 1.125rem 0.75rem;
  }
}

/* ============================================================================
   Blocs de produits WooCommerce (.wc-block-grid) : « Nouveautés en boutique » du
   panier vide, produits associés, etc. Même carte que la boutique (bordure
   légère, image carrée, nom en gras centré, prix, bouton en pilule verte) : le
   bloc natif ne reprend rien du thème. Même grille que la boutique et l'accueil :
   une ligne unique est centrée, la dernière ligne incomplète d'une liste sur
   plusieurs lignes commence à gauche. !important : neutralise les largeurs et
   colonnes en flex du bloc, plus spécifiques que ce sélecteur.
   ========================================================================== */

.vitas-content-typography .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wc-block-grid .wc-block-grid__products .wc-block-grid__product {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem 1rem 1.5rem !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  text-align: center;
}

.wc-block-grid__product .wc-block-grid__product-image {
  width: 100%;
  margin: 0;
}

.wc-block-grid__product .wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.vitas-content-typography .wc-block-grid__product a.wc-block-grid__product-link {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.wc-block-grid__product .wc-block-grid__product-title {
  display: block;
  margin: 1rem 0 0.5rem;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.wc-block-grid__product .wc-block-grid__product-price {
  margin: 0 0 1rem;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart {
  width: 100%;
  margin: auto 0 0;
}

/* Bouton : même apparence que .btn.btn--secondary (cf. boutons natifs plus haut). */
.vitas-content-typography .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 50px;
  background: var(--color-tertiary-button);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.vitas-content-typography .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.vitas-content-typography .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
  background: var(--color-tertiary-button-hover);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* Confirmation « Voir le panier » affichée après un ajout depuis ce bloc. */
.wc-block-grid__product .added_to_cart {
  display: block;
  margin-top: 0.75rem;
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablette : le bloc « Nouveautés » contient 4 produits ; sur 3 colonnes il en
   laisserait un seul sur la 2e ligne. Deux colonnes donnent un 2 x 2 équilibré
   (une seule colonne sous 521px, comme les autres listes de produits). */
@media (min-width: 521px) and (max-width: 1023px) {
  .vitas-content-typography .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}

/* Indication « Voir le détail » sur l'image des cartes du bloc WooCommerce
   (panier vide) : voile au survol comme sur les anciennes cartes de la boutique
   -- voile au survol et au focus clavier, mention visible en permanence sur les
   écrans tactiles. Le bloc natif n'a pas de point d'accroche PHP : la mention est
   un pseudo-élément de l'image (décoratif, le lien porte déjà le nom du produit). */
.wc-block-grid__product .wc-block-grid__product-image {
  position: relative;
}

.wc-block-grid__product .wc-block-grid__product-image::after {
  content: 'Voir le détail';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.7;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.vitas-content-typography .wc-block-grid__product a.wc-block-grid__product-link:hover .wc-block-grid__product-image::after,
.vitas-content-typography .wc-block-grid__product a.wc-block-grid__product-link:focus-visible .wc-block-grid__product-image::after {
  opacity: 1;
}

.vitas-content-typography .wc-block-grid__product a.wc-block-grid__product-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (hover: none) {
  .wc-block-grid__product .wc-block-grid__product-image::after {
    align-items: flex-end;
    padding-bottom: 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%);
    opacity: 1;
  }
}