/*
* Variables : les couleurs de l'application (src/styles/colors.jsx),
* puis Bootstrap branché dessus.
*/
:root {
  --tv-primary: #008c9b;
  --tv-primary-dark: #00737f;   /* texte teal sur crème : le primaire seul passe sous AA */
  --tv-cream: #f7f3eb;
  --tv-dark: #17120e;
  --tv-body: #3f3a33;
  --tv-muted: #7c736b;
  --tv-border: #e6e1dc;
  --tv-tint: #deefee;
  --tv-wash: #eef7f6;           /* le teinté à moitié : ce qui est neuf ou choisi */
  --tv-accent: #c25a35;         /* terracotta : prix baissé, favori */
  --tv-accent-tint: #f6e3d9;
  --tv-blush: #ffd9c7;
  --tv-sand: #e9e1d3;           /* derrière une photo absente */
  --tv-radius: 12px;

  /* Une lettre arabe prend la police arabe qui suit : aucune règle propre à la langue. */
  --tv-font-display: 'Fredoka', 'Baloo Bhaijaan 2', system-ui, sans-serif;
  --bs-body-font-family: 'Figtree', 'Noto Kufi Arabic', system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--tv-dark);
  --bs-body-bg: var(--tv-cream);
  --bs-secondary-color: var(--tv-muted);
  --bs-border-color: var(--tv-border);
  --bs-link-color-rgb: 0, 115, 127;
  --bs-link-hover-color-rgb: 0, 140, 155;
}

body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--tv-font-display);
  font-weight: 600;
}

.form-control,
.form-select { border-radius: var(--tv-radius); padding: .625rem .875rem; }
.form-control:focus,
.form-select:focus {
  border-color: var(--tv-primary);
  box-shadow: 0 0 0 3px var(--tv-tint);
}
.form-label { font-size: .875rem; font-weight: 600; margin-bottom: .375rem; }

.accordion {
  --bs-accordion-active-bg: #fff;
  --bs-accordion-active-color: var(--tv-primary-dark);
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  --bs-accordion-btn-focus-box-shadow: none;
}

.clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-brand { color: var(--tv-primary-dark) !important; }

/*
* Boutons : des pilules, comme dans l'application
*/
.btn { --bs-btn-font-weight: 600; border-radius: 999px; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; }

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tv-primary);
  --bs-btn-border-color: var(--tv-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tv-primary-dark);
  --bs-btn-hover-border-color: var(--tv-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tv-primary-dark);
  --bs-btn-active-border-color: var(--tv-primary-dark);
  --bs-btn-disabled-bg: #679da3;
  --bs-btn-disabled-border-color: #679da3;
}

.btn-outline-brand {
  --bs-btn-color: var(--tv-primary-dark);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--tv-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tv-primary);
  --bs-btn-hover-border-color: var(--tv-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tv-primary-dark);
  --bs-btn-active-border-color: var(--tv-primary-dark);
}

/*
* En-tête
*/
.site-header {
  background-color: var(--tv-cream);
  border-bottom: 1px solid var(--tv-border);
}

.wordmark {
  font-family: var(--tv-font-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--tv-primary);
}
.wordmark:hover { color: var(--tv-primary-dark); }

/* Sous le logo sur téléphone, entre le logo et les actions au-delà */
.search-pill {
  order: 1;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 44px;
  padding-inline: 1rem .3125rem;
  border: 1px solid var(--tv-border);
  border-radius: 999px;
  background-color: #fff;
  color: var(--tv-muted);
}
.search-pill:focus-within { border-color: var(--tv-primary); }
.search-pill input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--tv-dark);
}
.search-pill button {
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background-color: var(--tv-tint);
  color: var(--tv-primary-dark);
}
@media (min-width: 768px) {
  .search-pill { order: 0; flex: 1 1 auto; max-width: 560px; }
}

.category-nav .nav-link {
  padding: .625rem .875rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--tv-body);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.category-nav .nav-link:hover { color: var(--tv-primary-dark); }
.category-nav .nav-link.active {
  color: var(--tv-primary-dark);
  border-bottom-color: var(--tv-primary);
}

/*
* Puces : une rangée qui défile jusqu'aux bords de l'écran
*/
.chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--bs-gutter-x) * -.5);
  padding-inline: calc(var(--bs-gutter-x) * .5);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 1rem;
  border: 1px solid var(--tv-border);
  border-radius: 999px;
  background-color: #fff;
  font-weight: 600;
  font-size: .875rem;
  color: var(--tv-dark);
}
.chip:hover { border-color: var(--tv-primary); color: var(--tv-primary-dark); }
.chip.active { border-color: var(--tv-primary); background-color: var(--tv-primary); color: #fff; }

/* Au-dessus des résultats : la faute corrigée, ou la recherche élargie */
.search-note {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--tv-radius);
  background-color: var(--tv-wash);
  font-size: .9375rem;
  color: var(--tv-primary-dark);
}

/*
* Sections
*/
.section-title { font-size: 1.25rem; margin: 0; }
.section-link { font-weight: 600; font-size: .9375rem; color: var(--tv-primary-dark); }

.tile {
  border: 1px solid var(--tv-border);
  border-radius: 16px;
  background-color: #fff;
}

.hero-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
}
.hero-logo {
  width: min(100%, 420px);
  border-radius: 22%;
  box-shadow: 0 12px 32px rgba(23, 18, 14, .14);
}

/* Les promesses : livraison, paiement, avis */
.perk {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9375rem;
  color: var(--tv-body);
}
.perk i {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background-color: var(--tv-tint);
  color: var(--tv-primary-dark);
  font-size: 1.125rem;
}

/*
* Carte article : la photo, puis prix, titre, taille · état
*/
.product-card { position: relative; color: var(--tv-dark); }
.product-card:hover .product-media img { transform: scale(1.04); }
.product-card .product-title { color: var(--tv-dark); }

.product-media,
.photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--tv-radius);
  background-color: var(--tv-sand);
}
.product-media img,
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.hanger { width: 34%; max-width: 64px; fill: none; stroke: var(--tv-muted); stroke-width: 1.2; stroke-linejoin: round; opacity: .55; }

/* Le cœur : au coin de la photo sur une carte, à côté du bouton d'achat sur la fiche */
.product-card .like { position: absolute; top: .5rem; inset-inline-end: .5rem; z-index: 2; }
.like-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 30px;
  height: 30px;
  padding-inline: .5rem;
  border: 0;
  border-radius: 999px;
  background-color: #fff;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tv-dark);
}
.like-btn:hover i,
.like-btn.is-active i { color: var(--tv-accent); }
.like-btn span:empty { display: none; }
.product-buy .like-btn { height: 48px; min-width: 56px; border: 1px solid var(--tv-border); font-size: 1rem; }

.card-badge {
  position: absolute;
  bottom: .5rem;
  inset-inline-start: .5rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background-color: var(--tv-accent);
  font-family: var(--tv-font-display);
  font-weight: 600;
  font-size: .75rem;
  color: #fff;
}
.card-badge.is-sold { background-color: var(--tv-dark); }

.price { font-family: var(--tv-font-display); font-weight: 600; font-size: 1rem; }
.old-price { font-size: .8125rem; color: var(--tv-muted); }
.product-title { font-size: .875rem; }
.product-meta { font-size: .8125rem; color: var(--tv-muted); }

/*
* Bannière : étoiles de zellige, effacées vers le texte
*/
.promo {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--tv-primary-dark);
  color: #fff;
}
.promo > * { position: relative; }
.promo .zellige {
  position: absolute;
  inset: 0 0 0 auto;
  width: 70%;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, .22);
  mask-image: linear-gradient(to left, #000 20%, transparent);
  pointer-events: none;
}
.promo-kicker {
  font-family: var(--tv-font-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tv-blush);
}
.promo-step {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .16);
  font-family: var(--tv-font-display);
  font-weight: 600;
}
.promo .btn-light { --bs-btn-color: var(--tv-primary-dark); --bs-btn-bg: #fff; }

/*
* Fiche article
*/
.product-layout { display: grid; gap: 1.5rem; grid-template-areas: "gallery" "buy" "info"; }
.product-gallery { grid-area: gallery; }
.product-buy { grid-area: buy; }
.product-info { grid-area: info; }
@media (min-width: 992px) {
  .product-layout {
    grid-template-columns: 7fr 5fr;
    grid-template-areas: "gallery buy" "info buy";
    column-gap: 3rem;
    align-items: start;
  }
  .product-buy { position: sticky; top: 8rem; }
}

/* Une photo à la fois qui défile au doigt ; deux colonnes sur grand écran */
.gallery {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .photo { flex: 0 0 100%; scroll-snap-align: start; border-radius: 16px; }
@media (min-width: 992px) {
  .gallery { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .gallery .photo:first-child { grid-column: span 2; }
  .gallery .photo:only-child { aspect-ratio: 4 / 5; }
}

/* Chaque photo est un bouton qui ouvre la visionneuse */
.gallery button.photo { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.gallery button.photo:focus-visible { outline: 3px solid var(--tv-primary); outline-offset: -3px; }

/* La visionneuse : plein écran sur fond sombre, la photo entière, jamais rognée */
.photo-viewer .modal-content { background-color: var(--tv-dark); color: #fff; }
.photo-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  font-family: var(--tv-font-display);
  font-weight: 600;
}
.photo-viewer .carousel { flex: 1; min-height: 0; }
.photo-viewer .carousel-inner,
.photo-viewer .carousel-item { height: 100%; }
.photo-viewer .carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 1rem 1rem;
  object-fit: contain;
}
.photo-viewer .carousel-control-prev,
.photo-viewer .carousel-control-next { width: 4.5rem; opacity: 1; }
.photo-viewer .carousel-control-prev-icon,
.photo-viewer .carousel-control-next-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .14);
  background-size: 1.125rem;
  transition: background-color .15s;
}
.photo-viewer .carousel-control-prev:hover .carousel-control-prev-icon,
.photo-viewer .carousel-control-next:hover .carousel-control-next-icon { background-color: rgba(255, 255, 255, .26); }

.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding-inline: 1rem;
}
.detail-list li + li { border-top: 1px solid var(--tv-border); }
.detail-list span { color: var(--tv-muted); }
.detail-list strong { font-weight: 600; text-align: end; }
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-end: .375rem;
  vertical-align: -1px;
  border: 1px solid rgba(23, 18, 14, .12);
  border-radius: 999px;
}

.avatar {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background-color: var(--tv-tint);
  font-family: var(--tv-font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--tv-primary-dark);
}
.stars { color: var(--tv-accent); }

.thumb { width: 72px; flex: none; }

/*
* En-tête : actions du compte et méga-menu
*/
.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 1.3rem;
  color: var(--tv-dark);
}
.icon-btn:hover { background-color: var(--tv-tint); }
.dot {
  position: absolute;
  top: 8px;
  inset-inline-end: 9px;
  width: 9px;
  height: 9px;
  flex: none;
  border: 1.5px solid #fff;
  border-radius: 999px;
  background-color: var(--tv-accent);
}
.avatar-sm { width: 34px; height: 34px; font-size: .9375rem; }
.avatar-lg { width: 88px; height: 88px; font-size: 2.25rem; }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--tv-tint); color: var(--tv-primary-dark); }

/* Le panneau occupe toute la largeur sous la barre ; le survol ou le clavier l'ouvre */
.category-nav { position: relative; }
.mega-panel {
  display: none;
  position: absolute;
  inset: 100% 0 auto;
  z-index: 1020;
  border-block: 1px solid var(--tv-border);
  background-color: #fff;
  box-shadow: 0 16px 32px rgba(23, 18, 14, .08);
}
.mega-panel a:not(.btn) { color: var(--tv-body); }
.mega-panel a:not(.btn):hover { color: var(--tv-primary-dark); }
.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel { display: block; }

/* Menu mobile */
.menu-link {
  display: block;
  width: 100%;
  padding: .625rem .25rem;
  border: 0;
  background: none;
  text-align: start;
  font-weight: 600;
  color: var(--tv-dark);
}
.menu-link.active { color: var(--tv-primary-dark); }
.menu-group summary { list-style: none; cursor: pointer; }
.menu-group summary::after { content: "\F282"; font-family: 'bootstrap-icons'; float: inline-end; font-size: .75rem; color: var(--tv-muted); }
.menu-group[open] summary::after { content: "\F286"; }

/*
* Accueil : catégories et rangées qui défilent
*/
.category-tile { display: block; text-align: center; font-weight: 600; font-size: .875rem; color: var(--tv-dark); }
.category-tile .tile-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: .5rem;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--tv-tint);
  font-family: var(--tv-font-display);
  font-size: 2rem;
  color: var(--tv-primary-dark);
  transition: transform .2s;
  padding: 1rem;
}
.category-tile:hover .tile-media { transform: translateY(-2px); }
.category-tile img { width: 100%; height: 100%; object-fit: cover; }

.scroll-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; }
@media (min-width: 768px) { .scroll-row { grid-auto-columns: 23%; } }
@media (min-width: 1200px) { .scroll-row { grid-auto-columns: calc((100% - 5rem) / 6); } }

/* Les tuiles de catégories, plus petites : trois et demie sur téléphone */
.scroll-row.is-small { grid-auto-columns: 28%; }
@media (min-width: 768px) { .scroll-row.is-small { grid-auto-columns: calc((100% - 5rem) / 6); } }
@media (min-width: 1200px) { .scroll-row.is-small { grid-auto-columns: calc((100% - 7rem) / 8); } }

/*
* Catalogue : filtres
*/
.filter-group { margin-bottom: 1.5rem; }
.filter-group legend { font-family: var(--tv-font-display); font-weight: 600; font-size: 1rem; margin-bottom: .5rem; }
.filter-list { max-height: 220px; overflow-y: auto; }
.filter-list .form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; padding-inline-start: 0; }
.filter-list .form-check-input { margin: 0; flex: none; }
.form-check-input { border-color: #bdb4aa; }
.form-check-input:checked { background-color: var(--tv-primary); border-color: var(--tv-primary); }
.form-check-input:focus { border-color: var(--tv-primary); box-shadow: 0 0 0 3px var(--tv-tint); }

/*
* Compte : connexion, annonces, notifications
*/
.auth-card { max-width: 460px; margin-inline: auto; }

.password-field { position: relative; }
.password-field .form-control { padding-inline-end: 3rem; background-image: none; }
.password-field button {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 3rem;
  height: 46px;
  border: 0;
  background: none;
  color: var(--tv-muted);
}

.photo-drop {
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--tv-border);
  border-radius: 16px;
  text-align: center;
  color: var(--tv-muted);
  cursor: pointer;
}
.photo-drop:hover,
.photo-drop:focus-within { border-color: var(--tv-primary); color: var(--tv-primary-dark); }
.photo-drop.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.previews:empty { display: none; }
.previews img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }

.bg-unread { background-color: var(--tv-wash, #eef7f6); }

/*
* Pied de page
*/
.site-footer { background-color: #fff; border-top: 1px solid var(--tv-border); }
.site-footer h6 { font-size: .9375rem; margin-bottom: .75rem; }
.site-footer a:not(.wordmark) { display: block; padding-block: .25rem; font-size: .875rem; color: var(--tv-muted); }
.site-footer a:not(.wordmark):hover { color: var(--tv-primary-dark); }

/*
* Pages d'erreur : le code sur une étiquette de vêtement, puis le message
*/
.error-page { padding-bottom: 0; }   /* pas d'onglets mobiles sous la page */

.error-tag {
  width: min(100%, 260px);
  height: auto;
  overflow: visible;
  direction: ltr;                    /* les chiffres et l'œillet restent à leur place en arabe */
  filter: drop-shadow(0 10px 16px rgba(23, 18, 14, .12));
  transform-origin: 18% 0;           /* le haut de la ficelle */
  animation: error-tag-sway 4s ease-in-out infinite alternate;
}
.error-tag .tag-body { fill: var(--tv-primary); }
.error-tag .tag-stitch { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-dasharray: 5 4; }
.error-tag .tag-hole { fill: var(--tv-cream); }
.error-tag .tag-string { fill: none; stroke: var(--tv-muted); stroke-width: 2; stroke-linecap: round; }
.error-tag text {
  font-family: var(--tv-font-display);
  font-weight: 600;
  font-size: 58px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}
@keyframes error-tag-sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .error-tag { animation: none; }
}

.error-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.error-text { max-width: 440px; }

/*
* Barre du bas sur téléphone : les onglets de l'application
*/
.mobile-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 1030;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--tv-border);
  background-color: #fff;
}
.mobile-nav a {
  flex: 1;
  padding-block: .5rem;
  text-align: center;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--tv-muted);
}
.mobile-nav a i { display: block; font-size: 1.25rem; }
.mobile-nav a.active { color: var(--tv-primary-dark); }
@media (min-width: 768px) {
  .mobile-nav { display: none; }
}
@media (max-width: 767.98px) {
  body { padding-bottom: 64px; }
}

/*
* Arabe (dir="rtl")
*
* Bootstrap RTL inverse déjà ses utilitaires, et les règles ci-dessus
* s'écrivent en propriétés logiques (inset-inline-*, padding-inline…) qui
* suivent le sens de la page. Il reste ce que ni l'un ni l'autre ne voit.
*/

/* Les flèches et chevrons montrent un sens de lecture : ils s'inversent. */
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-chevron-left,
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left {
  display: inline-block;
  transform: scaleX(-1);
}

/* Un numéro de téléphone ou une adresse e-mail se lit de gauche à droite. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: right;
}

/* L'espacement des lettres casse les liaisons de l'écriture arabe. */
[dir="rtl"] .promo-kicker { letter-spacing: 0; text-transform: none; }

/* Le zellige passe du côté opposé au texte. */
[dir="rtl"] .promo .zellige {
  inset: 0 auto 0 0;
  mask-image: linear-gradient(to right, #000 20%, transparent);
}
/* Ce que les membres écrivent (titres, descriptions, noms) garde son propre sens de lecture
   (dir="auto"), mais reste aligné comme la page. */
[dir="rtl"] [dir="auto"] { text-align: right; }
[dir="ltr"] [dir="auto"] { text-align: left; }