/**
 * base.css
 *
 * Reset et styles fondamentaux. Mobile first strict :
 * le style de base cible le mobile, les media queries ajoutent
 * des styles pour les écrans plus grands (min-width uniquement).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* L'attribut hidden gagne TOUJOURS — sinon un display:flex/grid posé sur
   l'élément le neutralise (bug repéré à l'audit visuel : filtres du menu,
   ligne Réduction du tunnel). */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Footer collé en bas : le body occupe au moins tout l'écran et le
     contenu principal s'étire, poussant le footer en bas même sur les
     pages courtes (404, réservation suspendue…). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Le contenu principal absorbe l'espace disponible. flex-basis auto pour
   ne pas écraser les pages longues. */
.main-content {
  flex: 1 0 auto;
}

/* Le footer garde sa hauteur naturelle, jamais compressé. */
.site-footer {
  flex-shrink: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
}

p {
  color: var(--color-text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* Focus visible obligatoire (section 9 du design-system — accessibilité) */
:focus-visible {
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 2px;
}

/* Zones tactiles minimum 44x44px sur mobile (design-system.md, section 9).
   Volontairement limité aux contrôles de formulaire : appliqué globalement
   aux <a>, la règle gonflerait tout lien passé en block/flex (navigation,
   liens dans le texte). Les liens-boutons recevront leur zone tactile via
   leurs classes de composants (Phase 2). */
button,
input,
select {
  min-height: 44px;
}

/* Bandeau des modes de service (V3 : pause / fermeture exceptionnelle) */
.service-banner {
  padding-block: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  color: var(--color-text-on-accent);
}

.service-banner--pause {
  background-color: var(--color-accent-orange);
}

.service-banner--ferme {
  background-color: var(--color-error);
  color: #fff;
}

/* Bandeau « commande en salle » : le client voit en permanence à quelle
   table il commande, et peut se corriger s'il a scanné la mauvaise. */
.table-banner {
  padding-block: var(--space-3);
  font-size: var(--text-sm);
  background-color: var(--color-accent-green);
  color: var(--color-text-on-accent);
}

.table-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  text-align: center;
}

.table-banner__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  padding-block: var(--space-1);
}

.table-banner__leave {
  color: inherit;
  text-decoration: underline;
  opacity: 0.85;
  /* Zone tactile confortable : on est sur un téléphone, à table. */
  padding-block: var(--space-1);
}

.table-banner__leave:hover,
.table-banner__leave:focus-visible {
  opacity: 1;
}

/* Contenu principal — espacement vertical par défaut */
.main-content {
  padding-block: var(--space-9);
}

.container {
  width: 100%;
  max-width: var(--breakpoint-xl, 1280px);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* En-tête de page — commun à TOUTES les pages (titre + intro courte).
   L'intro est bornée pour garder une longueur de ligne lisible et éviter
   qu'elle ne s'étire sur toute la largeur. Aligné à gauche sur la grille. */
.page-header {
  max-width: 640px;
}

.page-header__intro {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Transitions de page (design-system.md 6.3) — View Transitions
   cross-document : fondu natif entre les pages, sans JS ni History API,
   donc sans risque pour les scripts de page (Stripe, formulaires).
   Les navigateurs sans support gardent une navigation classique. */
@view-transition {
  navigation: auto;
}

@keyframes lgc-page-out {
  to { opacity: 0; }
}

@keyframes lgc-page-in {
  from { opacity: 0; }
}

::view-transition-old(root) {
  animation: lgc-page-out var(--duration-base) var(--ease-in-out-premium) both;
}

::view-transition-new(root) {
  animation: lgc-page-in var(--duration-base) var(--ease-in-out-premium) both;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Texte accessible aux lecteurs d'écran, masqué visuellement (convention WordPress) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : visible uniquement au focus clavier */
.skip-link:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  width: auto;
  height: auto;
  clip-path: none;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent-yellow);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* Scroll reveal (design-system.md 6.3) — piloté par main.js.
   Les styles "cachés" ne s'appliquent que si le JS a confirmé sa présence
   (classe lgc-js-reveal sur <html>) : sans JS, tout le contenu reste visible. */
.lgc-js-reveal .lgc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-soft),
              transform var(--duration-slow) var(--ease-out-soft);
}

.lgc-js-reveal .lgc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Skeleton loader — jamais de spinner générique (voir design-system.md 6.3) */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-surface) 0%,
    var(--color-bg-surface-raised) 50%,
    var(--color-bg-surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.6s var(--ease-standard) infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Message de scan d'un QR de table : le client doit savoir pourquoi son
   scan n'a pas abouti, sinon il recommence indéfiniment. */
.scan-notice {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  text-align: center;
}

.scan-notice--warn {
  background-color: rgba(232, 178, 61, 0.14);
  color: var(--color-accent-yellow);
}

.scan-notice--error {
  background-color: rgba(228, 87, 61, 0.14);
  color: var(--color-error);
}