/* Toctocstock, page d'accueil refondue. Depose par FTP dans
   wp-content/uploads/css/accueil.css et charge par le mu-plugin, qui
   ajoute filemtime() comme numero de version : la feuille se rafraichit
   d'elle-meme a chaque depot, sans quoi Cloudflare sert l'ancienne
   pendant un an.

   Tout est prefixe .tts- et ne touche a aucun selecteur du theme :
   rien ne peut deborder sur le reste du site.

   Deux violets, volontairement :
     --tts-violet       #9966FF  traits, icones, survols
     --tts-violet-fonce #6B3FD4  fonds de bouton, la ou se pose du blanc
   Du blanc sur #9966FF donne 3,7:1, sous le seuil de 4,5:1 exige pour du
   texte courant. Sur #6B3FD4 on monte a 5,9:1. */

.tts-accueil {
  --tts-violet: #9966FF;
  --tts-violet-fonce: #6B3FD4;
  --tts-violet-sombre: #56309F;
  --tts-violet-pale: #F3EEFF;
  --tts-encre: #3a3a38;
  --tts-gris: #5F5E5A;
  --tts-ligne: #E9E7E4;
  --tts-fond-doux: #FAF9F7;
}

/* ── Premier ecran ──────────────────────────────────────────────── */

.tts-sur-titre {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tts-violet-fonce);
  margin: 0 0 18px;
}
.tts-sur-titre::before { content: ""; width: 22px; height: 2px; background: var(--tts-violet); }

.tts-h1 {
  font-size: clamp(32px, 5.4vw, 58px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tts-encre);
  max-width: 15ch;
  margin: 0 0 20px;
  text-wrap: balance;
}

.tts-chapeau {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.6;
  color: var(--tts-gris);
  max-width: 46ch;
  margin: 0 0 30px;
  text-wrap: pretty;
}

/* Flatsome rend [button class="x"] en <a class="button primary x">.
   POURQUOI !important SUR LE FOND : le CSS du personnalisateur est
   ecrit AVANT la feuille generee par le kit Flatsome, qui pose
   .button.primary { background-color: #22a664 }. A specificite proche,
   la derniere declaree gagne : le rayon et la couleur du texte
   passaient, le fond restait vert. Constate en production. */
.tts-accueil .button.tts-btn-primaire,
.tts-accueil .button.tts-btn-secondaire {
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  min-height: 52px;
  line-height: 52px;
  padding: 0 30px;
  margin: 0 12px 12px 0;
  border-width: 1px;
  text-transform: none;
  letter-spacing: 0;
}
.tts-accueil .button.tts-btn-primaire {
  background-color: var(--tts-violet-fonce) !important;
  border-color: var(--tts-violet-fonce);
  color: #fff;
}
.tts-accueil .button.tts-btn-primaire:hover {
  background-color: var(--tts-violet-sombre) !important;
  border-color: var(--tts-violet-sombre);
}
.tts-accueil .button.tts-btn-secondaire {
  background-color: transparent !important;
  border-color: #d8d5d0;
  color: var(--tts-encre);
}
.tts-accueil .button.tts-btn-secondaire:hover {
  border-color: var(--tts-violet-fonce);
  color: var(--tts-violet-fonce);
}

/* ── Bande des trois engagements ────────────────────────────────── */

.tts-engagements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--tts-ligne);
  border-bottom: 1px solid var(--tts-ligne);
}
.tts-engagement { padding: 26px 32px 26px 0; }
.tts-engagement + .tts-engagement { border-left: 1px solid var(--tts-ligne); padding-left: 32px; }
.tts-engagement-titre { font-size: 16px; font-weight: 600; color: var(--tts-encre); margin: 0 0 3px; }
.tts-engagement-detail { font-size: 14px; line-height: 1.5; color: var(--tts-gris); margin: 0; }

@media (max-width: 849px) {
  .tts-engagements { grid-template-columns: 1fr; }
  .tts-engagement { padding: 18px 0; }
  .tts-engagement + .tts-engagement { border-left: 0; border-top: 1px solid var(--tts-ligne); padding-left: 0; }
}

/* ── Titres de section ──────────────────────────────────────────── */

.tts-section-entete {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin: 0 0 28px;
}
.tts-h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.15; font-weight: 700; letter-spacing: -.015em;
  color: var(--tts-encre); margin: 0;
  text-wrap: balance;
}
.tts-intro { font-size: 17px; line-height: 1.6; color: var(--tts-gris); margin: 8px 0 0; }
.tts-lien-boite { flex-shrink: 0; }
.tts-lien { font-size: 15px; font-weight: 600; color: var(--tts-violet-fonce); white-space: nowrap; }
.tts-lien:hover { color: var(--tts-violet-sombre); }

@media (max-width: 649px) {
  .tts-section-entete { flex-direction: column; align-items: flex-start; }
}

/* ── Grilles de cartes ──────────────────────────────────────────── */

.tts-grille { display: grid; gap: 16px; }
.tts-grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tts-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 849px) {
  .tts-grille-4, .tts-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 549px) {
  .tts-grille-4, .tts-grille-3 { grid-template-columns: 1fr; }
}

.tts-carte {
  display: block;
  border: 1px solid var(--tts-ligne);
  border-radius: 8px;
  padding: 22px;
  background: #fff;
  color: var(--tts-encre);
  transition: border-color .15s ease, transform .15s ease;
}
.tts-carte:hover {
  border-color: var(--tts-violet);
  transform: translateY(-2px);
  color: var(--tts-encre);
}
.tts-carte-nom { display: block; font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.tts-carte-compte { display: block; font-size: 14px; color: var(--tts-gris); margin: 0; font-variant-numeric: tabular-nums; }
.tts-carte-tout { background: var(--tts-fond-doux); }
.tts-carte-tout .tts-carte-nom { color: var(--tts-violet-fonce); }

.tts-objet svg { display: block; margin: 0 0 14px; }
.tts-objet .tts-carte-nom { font-size: 17px; }

/* Fond doux d'une section entiere, en pleine largeur */
.tts-section-douce { background: var(--tts-fond-doux); }

/* ── Cartes de nouveaute ────────────────────────────────────────── */

.tts-nouveaute { display: flex; flex-direction: column; gap: 12px; min-height: 128px; }
.tts-drapeau {
  align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tts-violet-fonce); background: var(--tts-violet-pale);
  padding: 4px 9px; border-radius: 4px;
}
.tts-nouveaute .tts-carte-nom { font-size: 17px; line-height: 1.35; margin: 0; }

/* ── Pied de page ───────────────────────────────────────────────────
   Le thème pose son fond bleu dans une feuille GENEREE, imprimee dans
   la page apres les feuilles mises en file. A specificite egale elle
   gagne, d'ou le !important sur les seuls fonds. Les liens et les
   titres, eux, se reprennent par un simple gain de specificite.

   Les liens ne sont pas touches : ce sont vos menus, ils restent tels
   qu'ils sont dans les widgets. Seule l'apparence change.

   PORTEE : tout le site, depuis le 9 septembre 2026. Le pied de page
   s'affiche partout ; le limiter a l'accueil aurait donne un pied clair
   sur l'accueil et bleu sur les fiches produit. */

html,
#footer.footer-wrapper .footer-1,
#footer.footer-wrapper .absolute-footer {
  background-color: var(--tts-fond-doux) !important;
}

#footer.footer-wrapper { border-top: 1px solid var(--tts-ligne); }

#footer.footer-wrapper .footer-1 { padding: 56px 0 12px; }

/* .dark est la classe par laquelle Flatsome passe tout le texte en blanc */
#footer.footer-wrapper .dark,
#footer.footer-wrapper .dark p,
#footer.footer-wrapper .dark .widget-title { color: var(--tts-encre); }

#footer.footer-wrapper .widget-title {
  font-size: 13px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tts-encre);
}

/* Le petit trait sous chaque titre de widget, et les filets entre les
   liens : trop de lignes pour un pied de page qui doit rester calme. */
#footer.footer-wrapper .is-divider { display: none; }
#footer.footer-wrapper .widget ul li,
#footer.footer-wrapper .widget ul li + li { border: 0; padding: 0; }
#footer.footer-wrapper .widget ul { margin: 0; }
#footer.footer-wrapper .widget ul li { margin: 0 0 9px; }

#footer.footer-wrapper .dark a,
#footer.footer-wrapper .widget ul li a {
  color: var(--tts-gris);
  font-size: 15px;
  line-height: 1.5;
  border: 0;
}
#footer.footer-wrapper .dark a:hover,
#footer.footer-wrapper .widget ul li a:hover { color: var(--tts-violet-fonce); }

#footer.footer-wrapper .textwidget { font-size: 15px; line-height: 1.7; color: var(--tts-gris); }
#footer.footer-wrapper .textwidget img { max-width: 190px; height: auto; opacity: .85; }

#footer.footer-wrapper .absolute-footer {
  border-top: 1px solid var(--tts-ligne);
  padding: 18px 0;
  font-size: 13px;
  color: var(--tts-gris);
}
#footer.footer-wrapper .absolute-footer a { color: var(--tts-gris); }
#footer.footer-wrapper .absolute-footer a:hover { color: var(--tts-violet-fonce); }
#footer.footer-wrapper .payment-icons { opacity: .75; }

/* Le selecteur de langue, seul element de formulaire du pied */
#footer.footer-wrapper select {
  border: 1px solid var(--tts-ligne);
  border-radius: 6px;
  background-color: #fff;
  color: var(--tts-encre);
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════════════════
   CHARTE BOUTIQUE
   Bornee par .tts-charte, classe posee par le mu-plugin uniquement sur
   les pages d'apercu. Rien ici ne s'applique ailleurs tant que la
   condition de tts_charte_active() n'a pas ete ouverte.
   ═══════════════════════════════════════════════════════════════════ */

.tts-charte {
  --tts-violet: #9966FF;
  --tts-violet-fonce: #6B3FD4;
  --tts-violet-sombre: #56309F;
  --tts-violet-pale: #F3EEFF;
  --tts-encre: #3a3a38;
  --tts-gris: #5F5E5A;
  --tts-ligne: #E9E7E4;
  --tts-fond-doux: #FAF9F7;
}

/* ── Fiche produit ──────────────────────────────────────────────── */

.tts-charte h1.product-title {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tts-encre);
  margin: 0 0 14px;
  text-transform: none;
}

/* Le petit trait sous le titre : une ligne de plus qui ne dit rien */
.tts-charte .product-info .is-divider { display: none; }

.tts-charte .price-wrapper .price {
  font-size: 30px;
  font-weight: 700;
  color: var(--tts-encre);
  font-variant-numeric: tabular-nums;
  margin: 0 0 4px;
}
.tts-charte .price-wrapper .woocommerce-price-suffix,
.tts-charte .price-wrapper small { font-size: 14px; font-weight: 400; color: var(--tts-gris); }
.tts-charte .price-wrapper del { color: var(--tts-gris); font-weight: 400; }
.tts-charte .price-wrapper ins { text-decoration: none; }

.tts-charte .product-short-description {
  font-size: 16px; line-height: 1.7; color: var(--tts-gris);
  margin: 18px 0 20px; padding-top: 18px; border-top: 1px solid var(--tts-ligne);
}

/* L'etat du stock, en pastille plutot qu'en ligne de texte perdue */
.tts-charte p.stock {
  display: inline-block; font-size: 14px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; margin: 0 0 18px;
}
.tts-charte p.stock.in-stock { color: #1F6F52; background: #ECF7F2; }
.tts-charte p.stock.out-of-stock { color: #8C1153; background: #FDEDF5; }

/* Quantite et bouton d'achat sur la meme ligne, meme hauteur */
.tts-charte form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.tts-charte form.cart .ux-quantity { flex: 0 0 auto; }
.tts-charte form.cart .ux-quantity .qty,
.tts-charte form.cart .ux-quantity .ux-quantity__button {
  height: 54px; border-color: var(--tts-ligne);
}

/* Le vert du theme est pose en !important dans une feuille generee.
   Seul un !important de meme force peut le reprendre. */
.tts-charte .single_add_to_cart_button.button,
.tts-charte .button#place_order,
.tts-charte .button.checkout,
.tts-charte .checkout-button {
  background-color: var(--tts-violet-fonce) !important;
  border-color: var(--tts-violet-fonce);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  min-height: 54px;
  line-height: 54px;
  padding: 0 34px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.tts-charte .single_add_to_cart_button.button:hover,
.tts-charte .button#place_order:hover,
.tts-charte .button.checkout:hover,
.tts-charte .checkout-button:hover {
  background-color: var(--tts-violet-sombre) !important;
  border-color: var(--tts-violet-sombre);
}

/* Rappel des conditions, sous le bouton */
.tts-charte .tts-reassurance {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--tts-ligne);
  display: flex; flex-direction: column; gap: 9px;
  width: 100%;
}
.tts-charte .tts-reassurance li {
  font-size: 15px; color: var(--tts-gris); margin: 0;
  padding-left: 26px; position: relative;
}
.tts-charte .tts-reassurance li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--tts-violet);
  border-bottom: 2px solid var(--tts-violet);
  transform: rotate(-45deg);
}

/* ── Onglets ────────────────────────────────────────────────────── */

.tts-charte .woocommerce-tabs .nav-tabs { border-bottom: 1px solid var(--tts-ligne); }
.tts-charte .woocommerce-tabs .nav-tabs > li > a {
  font-size: 15px; font-weight: 600; color: var(--tts-gris);
  text-transform: none; letter-spacing: 0; padding: 14px 0; margin-right: 32px;
  border-bottom: 2px solid transparent;
}
.tts-charte .woocommerce-tabs .nav-tabs > li.active > a {
  color: var(--tts-encre); border-bottom-color: var(--tts-violet-fonce);
}
.tts-charte .woocommerce-tabs .tab-panels { font-size: 16px; line-height: 1.7; color: var(--tts-gris); }
.tts-charte .woocommerce-tabs .tab-panels h2 { font-size: 20px; color: var(--tts-encre); }

/* ── Listes de produits, categories et boutique ─────────────────── */

.tts-charte .product-small .name a,
.tts-charte .product-title a {
  font-size: 15px; font-weight: 600; color: var(--tts-encre); line-height: 1.4;
}
.tts-charte .product-small .name a:hover,
.tts-charte .product-title a:hover { color: var(--tts-violet-fonce); }
.tts-charte .price, .tts-charte .woocommerce-Price-amount {
  color: var(--tts-encre); font-variant-numeric: tabular-nums;
}
.tts-charte .badge-inner.on-sale { background-color: var(--tts-violet-fonce) !important; border-radius: 999px; }
.tts-charte .box-image img { border-radius: 6px; }

/* Fil d'Ariane et titre de categorie */
.tts-charte .breadcrumbs { font-size: 13px; color: var(--tts-gris); text-transform: none; letter-spacing: 0; }
.tts-charte .breadcrumbs a { color: var(--tts-gris); }
.tts-charte .breadcrumbs a:hover { color: var(--tts-violet-fonce); }
.tts-charte .shop-page-title .page-title-inner h1,
.tts-charte .page-title-inner h1 {
  font-size: clamp(26px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -.015em; color: var(--tts-encre); text-transform: none;
}

/* ── « Dans la même catégorie » ─────────────────────────────────── */

.tts-charte .tts-similaires {
  max-width: 1200px; margin: 0 auto; padding: 56px 24px 0;
  border-top: 1px solid var(--tts-ligne);
}
.tts-charte .tts-similaires .tts-h2 { margin: 0 0 24px; font-size: clamp(22px, 2.6vw, 26px); }
.tts-charte .tts-similaire { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.tts-charte .tts-similaire-image { display: block; }
.tts-charte .tts-similaire-image img {
  width: 100%; height: auto; display: block; border-radius: 6px; background: var(--tts-fond-doux);
}
.tts-charte .tts-similaire .tts-carte-nom { font-size: 15px; line-height: 1.4; margin: 0; }
.tts-charte .tts-similaire .tts-carte-compte { font-size: 15px; font-weight: 600; color: var(--tts-encre); }

/* ── Barre noire du haut : retiree ──────────────────────────────── */
/* Elle portait deux messages promotionnels qui se retrouvent deja sur
   la page d'accueil, dans la bande des engagements. */
#top-bar { display: none !important; }

/* ── Recherche et filtres en tete de categorie ──────────────────── */

.tts-charte .tts-filtres {
  margin: 0 0 28px; padding: 0 0 24px;
  border-bottom: 1px solid var(--tts-ligne);
}
.tts-charte .tts-recherche { display: flex; gap: 10px; max-width: 620px; }
.tts-charte .tts-recherche input[type="search"] {
  flex: 1 1 auto; height: 50px; margin: 0;
  border: 1px solid var(--tts-ligne); border-radius: 6px;
  padding: 0 16px; font-size: 15px; color: var(--tts-encre); background: #fff;
  box-shadow: none;
}
.tts-charte .tts-recherche input[type="search"]:focus {
  border-color: var(--tts-violet-fonce); outline: none;
}
.tts-charte .tts-recherche .button {
  height: 50px; line-height: 50px; padding: 0 24px; margin: 0;
  border-radius: 6px; font-size: 15px; font-weight: 600; text-transform: none;
  letter-spacing: 0; background-color: var(--tts-violet-fonce); color: #fff;
  border-color: var(--tts-violet-fonce);
}
.tts-charte .tts-recherche .button:hover { background-color: var(--tts-violet-sombre); }

.tts-charte .tts-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tts-charte .tts-puce {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--tts-ligne); border-radius: 999px;
  padding: 7px 15px; font-size: 14px; font-weight: 500;
  color: var(--tts-encre); background: #fff;
  transition: border-color .15s ease, color .15s ease;
}
.tts-charte .tts-puce span { color: var(--tts-gris); font-variant-numeric: tabular-nums; }
.tts-charte .tts-puce:hover { border-color: var(--tts-violet); color: var(--tts-violet-fonce); }

@media (max-width: 549px) {
  .tts-charte .tts-recherche { flex-direction: column; }
  .tts-charte .tts-recherche .button { width: 100%; }
}