/* ==========================================================================
   BosArts — chrome du site
   ========================================================================== */

body,
.ct-container,
.site-main {
  font-family: var(--bos-font-texte);
  color: var(--bos-fusain);
}

body {
  background-color: var(--bos-papier);
  font-size: var(--bos-taille-base);
  line-height: var(--bos-interligne);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--bos-font-titre);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--bos-interligne-serre);
  color: var(--bos-fusain);
}

h1 { font-size: var(--bos-taille-2xl); }
h2 { font-size: var(--bos-taille-xl); }
h3 { font-size: var(--bos-taille-lg); }

a { color: var(--bos-outremer); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bos-azur); }

/* Les chiffres ne dansent jamais : prix, quantités, totaux, références. */
.price, .amount, .quantity input, .bos-total, .woocommerce-Price-amount, td.product-total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.bos-ref {
  font-family: var(--bos-font-mono);
  font-size: var(--bos-taille-xs);
  color: var(--bos-gris-clair);
  letter-spacing: 0.01em;
}

/* --- Boutons ------------------------------------------------------------- */

.bos-btn,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bos-esp-2);
  font-family: var(--bos-font-texte);
  font-size: var(--bos-taille-md);
  font-weight: 500;
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--bos-rayon-pilule);
  background-color: var(--bos-action);
  color: var(--bos-blanc);
  cursor: pointer;
  transition: background-color var(--bos-duree) var(--bos-courbe),
              transform var(--bos-duree) var(--bos-courbe);
}

.bos-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--bos-action-hover);
  color: var(--bos-blanc);
}

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

.bos-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
  outline: 2px solid var(--bos-outremer);
  outline-offset: 2px;
}

.bos-btn--secondaire,
.woocommerce a.button.alt--outline {
  background-color: transparent;
  color: var(--bos-outremer);
  box-shadow: inset 0 0 0 1px var(--bos-outremer);
}

.bos-btn--secondaire:hover {
  background-color: var(--bos-azur-clair);
  color: var(--bos-nuit);
}

.bos-btn--discret {
  background-color: transparent;
  color: var(--bos-gris);
  box-shadow: inset 0 0 0 0.5px var(--bos-trait-fort);
}

.bos-btn--discret:hover {
  background-color: var(--bos-blanc);
  color: var(--bos-fusain);
}

/* --- Champs de formulaire ------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  font-family: var(--bos-font-texte);
  font-size: var(--bos-taille-md);
  color: var(--bos-fusain);
  background-color: var(--bos-blanc);
  border: var(--bos-bordure);
  border-radius: var(--bos-rayon-sm);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--bos-duree) var(--bos-courbe),
              box-shadow var(--bos-duree) var(--bos-courbe);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bos-azur);
  box-shadow: 0 0 0 3px var(--bos-azur-clair);
}

::placeholder { color: var(--bos-gris-clair); }

/* --- En-tête --------------------------------------------------------------- */

.bos-entete {
  background-color: var(--bos-papier);
  border-bottom: var(--bos-bordure);
}

.bos-entete__recherche {
  display: flex;
  align-items: center;
  gap: var(--bos-esp-2);
  background-color: var(--bos-blanc);
  border: var(--bos-bordure);
  border-radius: var(--bos-rayon-pilule);
  padding: 0.5rem 1rem;
  min-width: 260px;
}

.bos-entete__recherche input {
  border: 0;
  padding: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
}

.bos-entete__recherche input:focus { box-shadow: none; }

/* Pastille de compte professionnel dans l'en-tête. */
.bos-compte-pro {
  display: inline-flex;
  align-items: center;
  gap: var(--bos-esp-1);
  background-color: var(--bos-pro-bg);
  color: var(--bos-nuit);
  font-size: var(--bos-taille-xs);
  padding: 0.3rem 0.7rem;
  border-radius: var(--bos-rayon-pilule);
  white-space: nowrap;
}

/* --- Accroche d'accueil ------------------------------------------------------ */

.bos-accroche {
  position: relative;
  padding: var(--bos-esp-7) 0 var(--bos-esp-6);
  overflow: hidden;
}

.bos-accroche__trace {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-start: -1rem;
  inline-size: min(560px, 80%);
  block-size: auto;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.bos-accroche__contenu { position: relative; z-index: 1; }

.bos-accroche__titre {
  font-size: clamp(1.75rem, 4.5vw, var(--bos-taille-3xl));
  color: var(--bos-nuit);
  max-width: 22ch;
  margin: 0 0 var(--bos-esp-3);
}

.bos-accroche__intro {
  font-size: var(--bos-taille-base);
  color: var(--bos-gris);
  max-width: 46ch;
  margin: 0 0 var(--bos-esp-5);
}

/* --- Vignettes de rayon : les aplats de couleur ------------------------------- */

.bos-rayons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bos-esp-3);
}

.bos-rayon-tuile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: var(--bos-esp-4);
  border-radius: var(--bos-rayon);
  background-color: var(--bos-teinte, var(--bos-azur));
  color: var(--bos-blanc);
  text-decoration: none;
  transition: transform var(--bos-duree) var(--bos-courbe);
}

.bos-rayon-tuile:hover { transform: translateY(-2px); color: var(--bos-blanc); }
.bos-rayon-tuile__icone { font-size: 1.75rem; opacity: 0.85; }
.bos-rayon-tuile__titre { font-family: var(--bos-font-titre); font-size: var(--bos-taille-lg); margin: 0; }
.bos-rayon-tuile__compte { font-size: var(--bos-taille-sm); opacity: 0.85; margin: 0.15rem 0 0; }

/* --- Accessibilité ------------------------------------------------------------- */

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

.bos-skip-link:focus {
  position: fixed;
  inset-block-start: var(--bos-esp-2);
  inset-inline-start: var(--bos-esp-2);
  z-index: 999;
  background: var(--bos-blanc);
  padding: var(--bos-esp-2) var(--bos-esp-4);
  border-radius: var(--bos-rayon-sm);
}

/* --- Page de maintenance --------------------------------------------------------- */

.bos-maintenance {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bos-esp-6);
  background-color: var(--bos-papier);
}

.bos-maintenance__logo { max-width: 320px; height: auto; margin-bottom: var(--bos-esp-5); }
.bos-maintenance__titre { font-size: var(--bos-taille-2xl); color: var(--bos-nuit); margin: 0 0 var(--bos-esp-3); }
.bos-maintenance__texte { font-size: var(--bos-taille-base); color: var(--bos-gris); max-width: 46ch; margin: 0 auto var(--bos-esp-5); }
.bos-maintenance__contact { font-size: var(--bos-taille-md); color: var(--bos-gris); }