/*
Theme Name: Thaï Break Street Food Reimagined
Theme URI: https://rabnduss.fr/thaibreak
Description: Thème sur mesure pour le food‑truck Thaï Break. Design sombre et élégant inspiré du logo. Affiche le menu avec photos illustratives et permet de constituer un panier de commande sans paiement.
Version: 1.0
Author: Assistant
Text Domain: thaibreak-streetfood-reimagined
*/

/*
 * Variables de couleurs
 *
 * Couleurs définies pour un thème sombre et chaleureux avec des touches
 * d'orange inspirées du logo TenPad et du branding de Thaï Break. Les
 * valeurs sont déclarées sur le sélecteur :root afin de pouvoir être
 * réutilisées partout dans les feuilles de style.
 */

:root {
  /*
   * Palette de couleurs inspirée du logo Thaï Break
   *
   * Le fond principal est noir profond afin de faire ressortir le logo
   * et les photos. Les surfaces sont légèrement plus claires pour
   * créer de la profondeur. Les couleurs d'accent reprennent l'orange
   * du mot « BREAK » et le jaune du bol de tennis. Les couleurs de
   * texte sont claires pour un contraste élevé.
   */
  --bg: #0a0a0a;              /* fond principal presque noir */
  --surface: #161616;         /* surfaces et cartes */
  --overlay: #0a0a0acc;       /* voile translucide */
  --text: #ffffff;            /* texte principal (blanc) */
  --muted: #a3a3a3;           /* texte secondaire (gris) */
  --brand: #ff6f2e;           /* couleur d'accent orange (BREAK) */
  --brand-light: #f8d24e;     /* couleur d'accent claire (jaune/ballon) */
  --ring: #383838;            /* bordures et séparateurs */
  --success: #34d399;         /* messages de statut positifs */
  --error: #ef4444;           /* messages de statut négatifs */
}

/* Règles globales
 *
 * On définit une base typographique agréable à lire et un espacement
 * cohérent. Le système de grille utilise flex et grid pour être
 * responsive. Toutes les tailles sont en rem ou en pourcentages afin
 * de respecter les préférences de l'utilisateur.
 */

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--text);
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

/* Sections génériques */

.container {
  width: min(95%, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: 3rem 0;
}

h1, h2, h3 {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -0.05em;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}

/* Barre de navigation simple (optionnel) */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.navbar__logo img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  border: 1px solid var(--brand);
}
.navbar__menu a {
  margin-left: 1.5rem;
  font-weight: 600;
  color: var(--muted);
}
.navbar__menu a:hover {
  color: var(--brand);
}

/* Héros immersif */

.hero {
  position: relative;
  padding: 5rem 0 6rem;
  text-align: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  /*
   * Le héros a désormais un fond noir uni. L'image du logo n'est plus
   * utilisée en arrière‑plan, car le logo est affiché au premier plan.
   */
  background-color: var(--bg);
  opacity: 1;
  filter: none;
}
.hero__veil {
  position: absolute;
  inset: 0;
  /*
   * Ajuste le voile pour un fond noir : du noir translucide en haut
   * vers du noir quasi opaque en bas. Cela crée une légère transition
   * sans masquer complètement l'arrière‑plan.
   */
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.9) 75%);
}
.hero__inner {
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.hero p {
  font-size: 1.25rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.btn--primary {
  background: var(--brand);
  color: #17130d;
  border: none;
}
.btn--secondary {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
}
.btn:hover {
  transform: translateY(-2px);
}

/* Menu (cartes) */

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card__img {
  flex: 0 0 180px;
  overflow: hidden;
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card__body h3 {
  margin-bottom: 0.5rem;
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.item__info {
  flex: 1;
}
.item__name {
  font-size: 1rem;
  margin: 0;
}
.item__price {
  color: var(--brand-light);
  font-weight: 600;
}
.item__qty {
  display: flex;
  align-items: center;
}
.item__qty button {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--brand);
  color: #17130d;
  border-radius: 50%;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.25rem;
  display: grid;
  place-items: center;
}
.item__qty span {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* Panier (cart) */
.cart {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: 16px;
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.cart--visible {
  display: flex;
}
.cart__items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cart__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart__item-name {
  flex: 1;
}
.cart__item-qty {
  display: flex;
  align-items: center;
}
.cart__item-qty button {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--brand);
  color: #17130d;
  border-radius: 50%;
  font-weight: 700;
  cursor: pointer;
  margin: 0 0.25rem;
}
.cart__total {
  font-weight: 700;
  text-align: right;
  margin-top: 0.5rem;
}
.cart__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cart__form .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cart__form input,
.cart__form select {
  padding: 0.75rem;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: #0d1426;
  color: var(--text);
}
.cart__form input:focus,
.cart__form select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.25);
}
.cart__actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Contact section */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.contact__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
}
.contact__icon {
  background: var(--surface);
  border-radius: 50%;
  padding: 0.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ring);
}
.contact__icon svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

/* Footer */

.footer {
  padding: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--ring);
  margin-top: 3rem;
}