/*
 * Tokens de design Fluxia — thème client uniquement (décisions #7, #10 CLAUDE.md)
 * Source des valeurs : docs/design-tokens-fluxia.md (projet Claude Design, 3 août 2026)
 *
 * Les variables --brand-* ci-dessous sont des VALEURS PAR DÉFAUT (exemple "Anatolia Grill").
 * Elles seront écrasées par restaurant via les réglages admin (pas encore construit —
 * prévu avec la tâche "Réglages par restaurant", décision #8). Ne jamais coder en dur une
 * marque de client précise ici (décision #6) : ces valeurs par défaut restent neutres/génériques.
 */

/* ---------- Police auto-hébergée (jamais Google Fonts — perf + Loi 25, décision #7) ---------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-700.woff2') format('woff2');
}

:root {
  /* ---------- Configurable par restaurant (décision #7 — 4 leviers + 2 dérivées) ---------- */
  --brand-accent: #C2410C;
  --brand-accent-soft: #FDF1EA;      /* accent à 8% d'opacité sur blanc */
  --brand-accent-ink: #FFFFFF;       /* texte sur fond accent ; #141414 si accent clair */
  --brand-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --brand-logo: none;                /* url() vers le logo du restaurant */
  --brand-banner: none;               /* url() vers la bannière ; absente => aplat accent */

  /* ---------- Couleurs fixes (identiques pour ~40 clients) ---------- */
  --ink-900: #141414;
  --ink-600: rgba(0, 0, 0, .60);
  --ink-500: rgba(0, 0, 0, .50);
  --ink-400: rgba(0, 0, 0, .40);
  --surface: #FFFFFF;
  --surface-muted: #F7F5F2;
  --surface-field: #F4F2EF;
  --border: rgba(0, 0, 0, .12);
  --divider: rgba(0, 0, 0, .07);
  --danger: #B42318;
  --success: #0E7C4A;

  /* ---------- Typographie — échelle (une seule famille) ---------- */
  --font-display: 700 22px/1.15 var(--brand-font);
  --letter-spacing-display: -0.02em;
  --font-title: 700 19px/1.2 var(--brand-font);
  --letter-spacing-title: -0.02em;
  --font-heading: 700 16px/1.25 var(--brand-font);
  --letter-spacing-heading: -0.01em;
  --font-section: 700 15px/1.3 var(--brand-font);
  --letter-spacing-section: -0.01em;
  --font-body-strong: 600 15px/1.3 var(--brand-font);
  --font-body: 400 14px/1.45 var(--brand-font);
  --font-price: 600 14px/1.3 var(--brand-font);
  --font-small: 400 12.5px/1.45 var(--brand-font);
  --font-caption: 600 11px/1.3 var(--brand-font);
  --font-overline: 700 11px/1.3 var(--brand-font);
  --letter-spacing-overline: .09em;

  /* ---------- Espacement — base 4px ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;   /* gouttière d'écran, gauche/droite, partout */
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---------- Rayons, ombres, cibles tactiles ---------- */
  --radius-sm: 6px;    /* badges */
  --radius-md: 10px;   /* champs, vignette 72px, bloc pourboire */
  --radius-lg: 12px;   /* vignette 96px, cartes, blocs d'options */
  --radius-xl: 14px;   /* boutons principaux, logo */
  --radius-full: 999px; /* chips de catégorie */
  --shadow-float: 0 2px 8px rgba(0, 0, 0, .18);
  --shadow-logo: 0 2px 10px rgba(0, 0, 0, .14);
  --button-height: 52px;
  --tap-target-min: 44px;

  /* ---------- Layout responsive (décision #12) ---------- */
  --content-max-width: 1140px;
  /* Breakpoints (768px, 992px) : valeurs fixes utilisées directement dans les media queries
     CSS ailleurs dans le thème — un breakpoint ne peut pas être une variable CSS utilisée
     comme condition de @media (limitation du CSS standard). Documentées ici pour référence. */
}

body {
  font: var(--font-body);
  color: var(--ink-900);
}

/* Conteneur pleine largeur centré (décision #12) */
.container {
  max-width: var(--content-max-width);
}

/* ==========================================================================
   Session 1 — Menu (2a) : restyle des composants existants du thème, sans
   toucher à leur structure (décision #11 — restyler, pas réécrire).
   ========================================================================== */

/* Chips de catégorie (components/category-list.blade.php) */
#navbar-categories .nav-link {
  font: var(--font-body-strong);
  color: var(--ink-600);
  background: var(--surface-field);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4) !important;
}
#navbar-categories .nav-link.active {
  color: var(--brand-accent-ink);
  background: var(--brand-accent);
}

/* Champ de recherche (includes/menu/search.blade.php) */
#menu-search .input-group {
  border-radius: var(--radius-md) !important;
  border-color: var(--border) !important;
}
#menu-search input.form-control {
  font: var(--font-body);
}
#menu-search input.form-control::placeholder {
  color: var(--ink-400);
}

/* Ligne d'item (includes/menu/item.blade.php — restructuré pour matcher la maquette :
   ligne sans bordure, photo à droite, bouton "+" flottant en coin de photo) */
.menu-item-row {
  border: none;
}
.menu-item-row + .menu-item-row {
  border-top: 1px solid var(--divider);
}
.menu-item-row .menu-name {
  font: var(--font-body-strong);
  color: var(--ink-900);
}
.menu-item-row .menu-desc {
  font: var(--font-small);
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-item-row .menu-price {
  font: var(--font-price);
  color: var(--ink-900);
  white-space: nowrap;
}

/* Photo 96px + bouton "+" flottant (règles média — docs/design-tokens-fluxia.md) */
.menu-item-photo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
}
.menu-item-photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
}
.menu-item-add-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent-ink);
  background: var(--brand-accent);
  box-shadow: var(--shadow-float);
  font-size: 15px;
}

/* Bouton "+" contour, sans photo (règle média "Aucune photo") */
.menu-item-add-outline {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--brand-accent);
  color: var(--brand-accent);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.menu-item-add-outline:hover {
  background: var(--brand-accent-soft);
}

/* Titres de section catégorie (includes/menu/grouped.blade.php) */
.menu-group-toggle {
  font: var(--font-section);
  color: var(--ink-900);
}

/* ==========================================================================
   Session 2 — Fiche produit (2b) + Panier (2c) + sidebar desktop
   ========================================================================== */

/* Choix radio/checkbox des options (item-options-radio.blade.php,
   item-options-checkbox.blade.php) — coché = couleur accent */
.form-check-input:checked {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}
.form-check-input:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 0.2rem var(--brand-accent-soft);
}
.menu-option h5 {
  font: var(--font-body-strong);
  color: var(--ink-900);
}
.menu-option .option-details p {
  font: var(--font-small);
  color: var(--ink-500);
}
.form-check-label {
  font: var(--font-body);
}

/* Modal fiche produit (cart-item-modal.blade.php) */
.modal-content {
  border-radius: var(--radius-xl) !important;
}
.modal-title {
  font: var(--font-heading);
  color: var(--ink-900);
}
.modal-body p.text-muted {
  font: var(--font-small);
  color: var(--ink-500) !important;
}

/* Boutons principaux pleine largeur (Ajouter, Passer à la caisse, Payer...) */
.btn-primary {
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: var(--brand-accent-ink) !important;
  border-radius: var(--radius-xl) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.92);
}
.btn.btn-lg,
.btn-primary.btn-lg {
  min-height: var(--button-height);
}

/* Panier — carte (cart-box.blade.php) */
#cart-box {
  border-radius: var(--radius-lg) !important;
  border-color: var(--divider) !important;
}
#cart-box h5,
#cart-box .fw-bold {
  font: var(--font-body-strong);
}
#cart-box .price,
.cart-items .price {
  font: var(--font-price);
  color: var(--ink-900);
  white-space: nowrap;
}
/* .cart-items/.price non scopés à #cart-box (pas #cart-box .cart-items .price) : ce
   partial (includes/cartbox/items.blade.php) est réutilisé tel quel par le panier ET par
   la carte panier du checkout (components/cart-preview.blade.php, Session 3), qui n'a pas
   l'id #cart-box — décision #11, un seul jeu de règles pour un seul partial. */
/* Colonne latérale à ≥992px : rendue "collante" sous la barre de catégories déjà
   sticky-top (decision #12 — la sidebar existe déjà dans _pages/local/menus.blade.php,
   ciblée ici par son id existant pour ne rien surcharger). Décalage approximatif à
   valider visuellement (hauteur réelle de la barre de catégories non mesurable
   sans navigateur). */
@media (min-width: 992px) {
  #cart-box {
    position: sticky;
    top: var(--space-5);
  }
}

/* Bandeau "resto fermé" (menu-item-list.blade.php) — maquette 3b */
.menu-closed-banner {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  border: 1px solid var(--divider);
}
.menu-closed-banner-title {
  font: var(--font-body-strong);
  color: var(--ink-900);
}
.menu-closed-banner-text {
  font: var(--font-small);
  color: var(--ink-500);
  margin: var(--space-1) 0 var(--space-3);
}

/* ==========================================================================
   Session 3 — Checkout (2d) : CSS seulement, structure du thème intouchée
   (décision #11). field-payments.blade.php n'est pas restructuré (point
   d'insertion PayRegister — docs/inventaire-hooks-theme-orange.md) : seules
   des classes Bootstrap déjà présentes (.form-check, .list-group-item) sont
   restylées, comme partout ailleurs dans le thème.
   ⚠️ Portée : ne couvre PAS l'affichage des taxes TPS/TVQ (mécanisme pas
   encore construit, tâche bloquante séparée — décision #9 CLAUDE.md).
   ========================================================================== */

/* Champs texte/courriel/téléphone/commentaire (includes/checkout/field-*.blade.php,
   components/forms/telephone.blade.php — .form-control est la classe commune aux deux
   structures, form-floating et le wrapper du champ téléphone) */
.form-control {
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--surface-field);
  font: var(--font-body);
}
.form-floating > label {
  font: var(--font-body);
  color: var(--ink-500);
}
.form-control:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 0.2rem var(--brand-accent-soft);
}

/* Liste de moyens de paiement (field-payments.blade.php — classes seulement, pas de
   structure touchée, voir note ci-dessus) */
.list-group-item.selected {
  background: var(--brand-accent-soft);
}

/* Bloc "Type de commande" + lien "Modifier" (components/fulfillment.blade.php,
   partagé avec le bandeau resto-fermé du menu, Session 2) — Bootstrap text-primary
   (bleu) remplacé par l'accent, cohérent avec .btn-primary déjà substitué */
.text-primary {
  color: var(--brand-accent) !important;
}

/* Carte panier du checkout (components/cart-preview.blade.php) — mêmes tokens que
   #cart-box (Session 2). Pas d'id propre à ce conteneur : ciblé par la combinaison de
   classes Bootstrap déjà présente dans le fichier vendor (.bg-white.border.shadow-sm
   .rounded-3), suffisamment spécifique pour ne pas déborder sur d'autres cartes. */
.bg-white.border.shadow-sm.rounded-3 {
  border-radius: var(--radius-lg) !important;
  border-color: var(--divider) !important;
}

/* ==========================================================================
   Session 3 — Confirmation/suivi (3a) : includes/order/status.blade.php, seul
   écran réellement visible par un client invité (guest checkout) — le détail
   complet (items, adresse, restaurant) est réservé aux clients connectés par
   le thème vendor (@auth dans livewire/order-preview.blade.php), à discuter
   séparément, pas un manque du restyle (voir ROADMAP).
   ========================================================================== */
#ti-order-status h5 {
  font: var(--font-heading);
  color: var(--ink-900);
}
#ti-order-status h3 {
  font: var(--font-title);
  color: var(--ink-900);
}
#ti-order-status .lead {
  font: var(--font-body);
  color: var(--ink-500);
}
#ti-order-status .progress-bar {
  background-color: var(--brand-accent) !important;
}

/* Sélecteur segmenté Cueillette/Livraison (components/fulfillment.blade.php) */
.fulfillment-toggle {
  display: inline-flex;
  background: var(--surface-field);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.fulfillment-toggle-btn {
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font: var(--font-body-strong);
  color: var(--ink-600);
  min-height: var(--tap-target-min);
}
.fulfillment-toggle-btn.active {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}

/* ==========================================================================
   Session 4 — Pourboire (3e) + états d'erreur (3b resto fermé déjà fait
   Session 2, 3c article épuisé, 3d paiement refusé)
   ========================================================================== */

/* Boutons de montant de pourboire (includes/cartbox/tip-form.blade.php) — même logique
   pilule que les chips de catégorie (Session 1) et le sélecteur segmenté ci-dessus */
.tip-amounts .btn {
  border-radius: var(--radius-full) !important;
  font: var(--font-body-strong);
  color: var(--ink-600);
  background: var(--surface-field);
  border: none;
  min-height: var(--tap-target-min);
}
.tip-amounts .btn.active {
  background: var(--brand-accent) !important;
  color: var(--brand-accent-ink) !important;
  border-color: var(--brand-accent) !important;
}
#tip-form .form-control {
  border-radius: var(--radius-md);
}

/* Article épuisé (menu/item.blade.php — maquette 3c) */
.menu-item-badge-outofstock {
  display: inline-block;
  font: var(--font-caption);
  color: var(--danger);
  background: rgba(180, 35, 24, 0.1);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  margin-left: var(--space-1);
  vertical-align: middle;
}

/* Paiement refusé (3d) — erreurs de formulaire déjà gérées avec grâce par le vendor
   (Checkout.php catch -> ValidationException sur fields.payment, pas de crash) ; juste la
   couleur alignée sur le token --danger plutôt que le rouge Bootstrap par défaut */
.text-danger {
  color: var(--danger) !important;
}

/* Heure de cueillette/livraison en évidence (includes/order/status.blade.php — maquette 3a,
   l'élément le plus important de la page de confirmation) */
.order-fulfillment-hero {
  font: var(--font-display);
  color: var(--brand-accent-ink);
  background: var(--brand-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}

/* ── En-tête : marque + nom du restaurant (includes/header.blade.php) ──────────
   Le gabarit parent affichait SOIT une image SOIT du texte. On rend les deux
   côte à côte : marque figurative à gauche, nom en texte à droite. Le nom vient
   de setting('site_name'), donc ce bloc sert tel quel aux ~40 clients.
   Quand aucun logo n'est téléversé, .fluxia-brand__mark n'est pas rendu du tout
   (pas de règle d'espacement orpheline : c'est `gap` qui gère l'écart). */
.fluxia-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  min-width: 0;                 /* autorise l'ellipse du nom en dessous de 390px */
}
/* Respiration verticale. Deux règles du parent s'y opposaient, mesurées puis
   contournées plutôt que devinées :
   1. `py-md-0` (utilitaire Bootstrap, `!important`) supprime le padding de la
      navbar dès 768px — insurmontable par spécificité, donc on ne touche pas
      à la navbar ;
   2. `.navbar-top .navbar-brand { padding: 0 }` (0,2,0) écrasait un padding
      posé sur `.fluxia-brand` seul (0,1,0).
   D'où ce sélecteur à 0,3,0 : la navbar se dimensionne sur son contenu et
   grandit d'autant. Sans ça, la marque touche le bord haut de l'en-tête
   (0px de marge mesurée à 850 et 1200px). */
.navbar-top .navbar-brand.fluxia-brand {
  padding: var(--space-2) 0;
}
/* La HAUTEUR n'est volontairement pas fixée ici : elle vient du réglage admin
   `logo_height` (Design → Thèmes), appliqué par la règle du thème parent
   `.navbar-top .navbar-brand .img-logo { height: var(--logo-height) }`. Cette
   règle a une spécificité de 0,3,0 et gagnerait de toute façon — mais surtout,
   la laisser gagner est le bon choix : chaque client règle la hauteur de sa
   marque depuis l'admin, sans toucher au CSS (décisions #6 et #7). */
.fluxia-brand__mark {
  width: auto;
  flex: none;
  display: block;
}
.fluxia-brand__name {
  font: var(--font-title);
  color: var(--ink-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fluxia-brand:hover .fluxia-brand__name,
.fluxia-brand:focus-visible .fluxia-brand__name {
  color: var(--brand-accent);
}
/* Écrans étroits : on resserre l'écart et on descend d'un cran typographique
   pour que marque + nom + sélecteur de langue tiennent sur une seule ligne.
   La hauteur de la marque reste pilotée par `logo_height` (voir ci-dessus). */
@media (max-width: 480px) {
  .fluxia-brand { gap: var(--space-2); }
  .fluxia-brand__name { font: var(--font-heading); }
}