/*
Theme Name: Le Grain de Sel
Theme URI: https://example.com
Author: Votre nom
Author URI: https://example.com
Description: Thème WordPress sur-mesure pour un restaurant gastronomique. Optimisé pour la performance, l'accessibilité (WCAG 2.1 AA) et la sécurité. Inclut un système de réservation en ligne sécurisé.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legraindesel
*/

/* ==========================================================================
   1. VARIABLES DE DESIGN (Design Tokens)
   --------------------------------------------------------------------------
   Palette inspirée de la cuisine de bistrot : papier parchemin, ardoise,
   lie-de-vin (vin), laiton vieilli et vert sauge (herbes fraîches).
   Toutes les combinaisons texte/fond ci-dessous respectent un ratio de
   contraste AA (>= 4.5:1 pour le texte courant).
   ========================================================================== */
:root {
  /* Couleurs de fond */
  --color-bg: #F7F3EC;           /* parchemin - fond principal */
  --color-bg-dark: #211D1A;      /* ardoise - fond du hero et du footer */
  --color-bg-card: #FFFDF9;      /* blanc cassé - cartes / encadrés */
  --color-border: #D9CFBE;       /* liseré parchemin - séparateurs discrets */

  /* Couleurs de texte */
  --color-text: #262220;         /* texte principal (contraste élevé sur --color-bg) */
  --color-text-muted: #5B5148;   /* texte secondaire */
  --color-text-inverse: #F7F3EC; /* texte clair sur fond sombre */

  /* Couleurs d'accent */
  --color-wine: #6B1F2A;         /* lie-de-vin - accent principal, CTA */
  --color-wine-dark: #4E1620;    /* variante foncée (survol/focus) */
  --color-brass: #B8892B;        /* laiton vieilli - accent décoratif (jamais pour du texte fin) */
  --color-sage: #4B5A44;         /* vert sauge - validation / éléments naturels */
  --color-error: #9A2B2B;        /* messages d'erreur de formulaire */
  --color-focus: #1D5FA8;        /* couleur de focus clavier, très visible sur toutes les surfaces */

  /* Typographie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* titres, personnalité de la marque */
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif; /* texte courant, lisible */
  --font-mono: "JetBrains Mono", "Courier New", monospace; /* prix de la carte, style "ticket" */

  /* Échelle typographique */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-3: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* Mise en page */
  --content-max: 72rem;
  --radius: 2px; /* volontairement minimal : esthétique "menu imprimé", pas d'arrondis prononcés */
}

/* ==========================================================================
   2. RESET ET BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

/* Respecte les préférences système : désactive les animations pour les
   personnes sensibles au mouvement (critère d'accessibilité WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-wine-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-sm); }

/* ==========================================================================
   3. ACCESSIBILITÉ - ÉLÉMENTS TRANSVERSAUX
   -------------------------------------------------------------------------- */

/* Classe utilitaire pour masquer visuellement un contenu tout en le
   laissant accessible aux lecteurs d'écran (ex : labels explicites, astérisques). */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Lien "Aller au contenu" : premier élément focusable de la page, requis
   pour permettre aux utilisateurs de clavier de sauter la navigation. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-wine);
  color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* Indicateur de focus clavier visible partout sur le site (WCAG 2.4.7).
   On ne supprime JAMAIS l'outline par défaut sans le remplacer. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   4. MISE EN PAGE GÉNÉRALE
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.site-main { display: block; }

section { padding-block: var(--space-lg); }

/* ==========================================================================
   5. EN-TÊTE / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-xs);
}
.site-branding a {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}
.main-navigation a {
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
}
.main-navigation a:hover,
.main-navigation a:focus-visible {
  border-bottom-color: var(--color-brass);
}

/* Bouton menu mobile : masqué sur desktop, contrôlé en JS via aria-expanded */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-text-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
}

@media (max-width: 55rem) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 0.5em; }
  .main-navigation {
    display: none;
    width: 100%;
  }
  .main-navigation.is-open { display: block; }
  .main-navigation ul {
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-sm);
  }
  .site-header .container { flex-wrap: wrap; }
}

/* ==========================================================================
   6. HERO (page d'accueil)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-block: var(--space-xl);
  text-align: center;
}
.hero h1 { color: var(--color-text-inverse); }
.hero .eyebrow {
  font-family: var(--font-mono);
  color: var(--color-brass);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: var(--step--1);
}
.hero p.lead {
  max-width: 40rem;
  margin-inline: auto;
  color: #D8D2C6;
  font-size: var(--step-1);
}

/* Boutons d'appel à l'action */
.btn {
  display: inline-block;
  padding: 0.8em 1.6em;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: var(--step-0);
}
.btn-primary {
  background: var(--color-wine);
  color: var(--color-text-inverse);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-wine-dark); color: var(--color-text-inverse); }
.btn-secondary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.cta-group { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); }

/* ==========================================================================
   7. LA CARTE (menu) — élément signature du site
   -------------------------------------------------------------------------- */
/* Chaque plat est présenté comme sur un vrai menu imprimé : nom, points de
   suite en pointillés, prix aligné en typo monospace (façon addition). */
.menu-category { margin-bottom: var(--space-lg); }
.menu-category > h3 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-wine);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-xs);
}
.menu-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
}
.menu-item-name { font-family: var(--font-display); font-size: var(--step-1); white-space: nowrap; }
.menu-item-leader {
  flex: 1;
  border-bottom: 1px dotted var(--color-border);
  height: 0.6em;
}
.menu-item-price { font-family: var(--font-mono); font-size: var(--step-0); }
.menu-item-desc { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--step--1); margin-top: -0.3em; }

/* ==========================================================================
   8. CARTES / SECTIONS GÉNÉRIQUES
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 55rem) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. FORMULAIRE DE RÉSERVATION
   -------------------------------------------------------------------------- */
.reservation-form {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  max-width: 40rem;
  margin-inline: auto;
}
.reservation-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}
.reservation-form legend {
  font-family: var(--font-display);
  font-size: var(--step-1);
  padding: 0;
  margin-bottom: var(--space-sm);
}
.form-row { margin-bottom: var(--space-sm); }
.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3em;
}
.form-row .required-mark { color: var(--color-wine); }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.7em;
  border: 1px solid var(--color-border);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--color-text);
}
.form-row input:invalid[data-touched="true"],
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
  border-color: var(--color-error);
}
.form-error-message {
  color: var(--color-error);
  font-size: var(--step--1);
  margin-top: 0.3em;
  display: none;
}
.form-row.has-error .form-error-message { display: block; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 40rem) { .form-grid-2 { grid-template-columns: 1fr; } }

/* Champ "piège à robots" (honeypot) : présent dans le HTML pour les bots,
   invisible et ignoré par les humains et les lecteurs d'écran. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Zone de statut du formulaire, annoncée automatiquement aux lecteurs
   d'écran grâce à aria-live (voir template-reservation.php). */
.form-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid transparent;
}
.form-status.success { background: #EAF1E7; border-color: var(--color-sage); color: #2F3A2A; }
.form-status.error { background: #F6E7E5; border-color: var(--color-error); color: var(--color-error); }

/* ==========================================================================
   10. PIED DE PAGE
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-block: var(--space-lg);
}
.site-footer a { color: var(--color-brass); }
.site-footer address { font-style: normal; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 55rem) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid #3A342E;
  font-size: var(--step--1);
  color: #A79E90;
}