/* Base commune : variables, remise à zéro, éléments partagés.
   Les variables --brand* sont remplacées par la couleur du restaurant (js/shared/theme.js).
   Propriétés « logiques » (inline/block) partout : prêt pour l'arabe (droite à gauche). */

/* Polices de Restora, les mêmes sur toutes les pages et tous les téléphones
   (avant, chaque téléphone affichait sa propre police) : Manrope pour le texte,
   Josefin Sans pour les titres, comme la page de présentation. Servies par
   notre domaine (le CSP n'autorise que nos fichiers), gardées un an par le
   navigateur (_headers) et dans la coquille hors ligne (SHELL de sw.js).
   « swap » : le texte s'affiche tout de suite avec la police du téléphone,
   puis la nôtre prend le relais. Sous-ensemble latin : l'arabe garde la
   police du téléphone. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;        /* une seule fonte variable pour toutes les graisses */
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 700;            /* seule graisse : les titres en 600 l'utilisent aussi */
  font-display: swap;
  src: url("../fonts/josefin-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --brand: #0b6e72;
  --brand-ink: #ffffff;    /* texte posé sur --brand */
  --brand-text: #0b6e72;   /* --brand utilisé comme texte sur fond clair */
  --brand-soft: #e3eff0;   /* fond très clair teinté */

  --paper: #f7f3ec;        /* fond de page, ton « papier » */
  --card: #ffffff;
  --ink: #1d1b18;          /* texte principal */
  --muted: #6b645b;        /* texte secondaire (contraste ≥ 4,5 sur --paper) */
  --line: #ebe4d8;

  /* Fond de la page et ce qui est posé directement dessus (titres, notes,
     liens du bas). Remplacés par la couleur de fond du restaurant, claire ou
     sombre (js/shared/theme.js, applyPage) ; les cartes gardent --card et --ink. */
  --page: var(--paper);
  --page-ink: var(--ink);
  --page-muted: var(--muted);
  --page-line: var(--line);
  --page-accent: var(--brand-text);
  --page-glass: rgb(247 243 236 / 0.94);

  --radius: 18px;
  --shadow: 0 1px 2px rgb(60 45 25 / 0.05), 0 6px 20px rgb(60 45 25 / 0.06);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Josefin Sans", "Manrope", system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

h1, h2, h3, p, dl, dd {
  margin: 0;
}

a {
  color: var(--brand-text);
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;           /* zone à toucher de 44 px au moins */
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--brand-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Liens « Données personnelles · Mentions légales » en bas des pages */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
  margin-top: 6px;
  font-size: 1rem;
}

.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--page-muted);
}