/* ==========================================================================
   KOLIOCAR — jetons de design, alignés sur la charte actuelle du site
   (Geist + Instrument Serif, encre #1a1814, fonds crème, vert #2C5F2E, chartreuse #C8EB3A).
   Les pages plus anciennes qui utilisent ces variables suivent ainsi la même charte.
   ========================================================================== */

:root {
  /* Fonds */
  --bg:             #ECE5D8;
  --surface:        #F7F2E7;
  --surface-raised: #F7F2E7;

  /* Encre */
  --ink:            #1A1814;
  --ink-2:          #332E26;
  --muted:          #4A4439;
  --faint:          #8C857A;

  /* Accent principal — chartreuse écolo */
  --accent:         #C8EB3A;
  --accent-hover:   #B5D530;
  --accent-ink:     #1A1814;

  /* Accent chaud — terracotta */
  --warm:           #C4553A;
  --warm-soft:      #F5DDD8;

  /* Bordures */
  --border:         rgba(26,24,20,0.14);
  --border-light:   rgba(26,24,20,0.07);
  --border-strong:  #1A1814;

  /* États */
  --success:        #2C5F2E;
  --success-bg:     rgba(44,95,46,0.14);
  --danger:         #C4553A;
  --danger-bg:      #F5DDD8;
  --warning:        #C28A00;
  --warning-bg:     #FFF4CC;

  /* Typographie */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  /* Accent éditorial en italique (« la réservation. ») */
  --font-serif:   'Instrument Serif', Georgia, serif;

  /* Espacement */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* Rayons */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* Ombres */
  --shadow-sm:         0 1px 4px rgba(26,35,22,0.07);
  --shadow-md:         0 4px 16px rgba(26,35,22,0.09);
  --shadow-lg:         0 12px 40px rgba(26,35,22,0.12);
  --shadow-card:       0 2px 12px rgba(26,35,22,0.07);
  --shadow-card-hover: 0 10px 36px rgba(26,35,22,0.13);

  /* Transitions */
  --t-fast: 0.18s ease;
  --t-base: 0.28s ease;

  /* Layout */
  --max-w:    1240px;
  --header-h: 72px;
}

/* Resets */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.spin {
  animation: r-spin 0.9s linear infinite;
}

@keyframes r-spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   KOLIOCAR — matériau « verre liquide » (style iOS 27).
   Un fond translucide flouté, un liseré lumineux (fort en haut à gauche et
   en bas à droite) et un reflet qui suit le pointeur (variables --mx / --my,
   posées par utils/glassPointer.ts).
   Teintes : .lg-glass (clair), .lg-smoke (fumé), .lg-leaf (vert),
   .lg-glass-dark (sur photo ou fond sombre).
   Les styles des pages (chaînes S des composants) utilisent directement les
   variables --glass-* ci-dessous : même matériau, sans classe à ajouter.
   ========================================================================== */

:root {
  /* Verre clair : cartes, panneaux, onglets */
  --glass-bg:     linear-gradient(140deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22));
  --glass-border: 1px solid rgba(255,255,255,0.55);
  --glass-edge:   inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(255,255,255,0.35);
  --glass-shadow: var(--glass-edge), 0 10px 30px rgba(60,45,20,0.08), 0 1px 2px rgba(60,45,20,0.06);
  --glass-blur:   blur(22px) saturate(175%);
  /* Verre plus opaque : fenêtres, menus déroulants, formulaires posés sur une photo */
  --glass-bg-strong: linear-gradient(140deg, rgba(251,248,242,0.9), rgba(247,242,231,0.76));
  --glass-shadow-strong: var(--glass-edge), 0 30px 60px -20px rgba(26,24,20,0.35);
  /* Champ de saisie creusé dans le verre */
  --glass-field:        rgba(255,255,255,0.42);
  --glass-field-border: 1px solid rgba(255,255,255,0.6);
  --glass-field-shadow: inset 0 1px 2px rgba(26,24,20,0.06), inset 0 -1px 0 rgba(255,255,255,0.7);
  /* Verre vert et verre fumé : panneaux de confirmation, cartes sombres */
  --glass-leaf-bg:     linear-gradient(140deg, rgba(44,95,46,0.94), rgba(36,82,38,0.84));
  --glass-leaf-shadow: inset 1px 1px 0 rgba(255,255,255,0.3), inset -1px -1px 0 rgba(200,235,58,0.25), 0 14px 34px rgba(20,60,20,0.22);
  --glass-smoke-bg:     linear-gradient(140deg, rgba(30,28,24,0.9), rgba(22,20,17,0.8));
  --glass-smoke-shadow: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(255,255,255,0.08), 0 14px 34px rgba(20,15,5,0.22);
}

.lg-glass, .lg-smoke, .lg-leaf, .lg-glass-dark {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
}

.lg-glass {
  background: linear-gradient(140deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.25),
              0 10px 30px rgba(60,45,20,0.08), 0 1px 2px rgba(60,45,20,0.06);
}
.lg-smoke {
  background: linear-gradient(140deg, rgba(30,28,24,0.88), rgba(22,20,17,0.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 34px rgba(20,15,5,0.22);
}
.lg-leaf {
  background: linear-gradient(140deg, rgba(44,95,46,0.94), rgba(36,82,38,0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 14px 34px rgba(20,60,20,0.22);
}
.lg-glass-dark {
  background: linear-gradient(140deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 30px rgba(0,0,0,0.18);
}

/* Liseré lumineux */
.lg-glass::before, .lg-smoke::before, .lg-leaf::before, .lg-glass-dark::before {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lg-smoke::before { background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.06) 32%, rgba(255,255,255,0.02) 62%, rgba(255,255,255,0.28)); }
.lg-leaf::before  { background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.08) 32%, rgba(255,255,255,0.02) 62%, rgba(200,235,58,0.45)); }
.lg-glass-dark::before { background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.12) 32%, rgba(255,255,255,0.04) 62%, rgba(255,255,255,0.4)); }

/* Reflet qui suit le pointeur */
.lg-glass::after, .lg-smoke::after, .lg-leaf::after, .lg-glass-dark::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.45), transparent 60%);
  mix-blend-mode: soft-light;
}
.lg-glass:hover::after, .lg-smoke:hover::after, .lg-leaf:hover::after, .lg-glass-dark:hover::after { opacity: 1; }

/* Le contenu passe au-dessus du liseré et du reflet */
.lg-glass > *, .lg-smoke > *, .lg-leaf > *, .lg-glass-dark > * { position: relative; z-index: 4; }

/* Pression élastique */
.lg-press { transition: transform 0.35s cubic-bezier(.3,1.5,.5,1), box-shadow 0.3s; }
.lg-press:hover { transform: translateY(-2px); }
.lg-press:active { transform: scale(0.97); }

/* Halos colorés derrière le verre : fixes, sous tout le contenu (z-index -1, au-dessus du fond de la page).
   Les pages gardent donc un fond transparent pour les laisser voir. */
.lg-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lg-ambient i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: lg-float 22s ease-in-out infinite alternate; }
.lg-ambient i:nth-child(1) { width: 520px; height: 520px; left: -140px; top: 120px; background: #9cc27a; }
.lg-ambient i:nth-child(2) { width: 460px; height: 460px; right: -120px; top: -80px; background: #f0d9b8; animation-duration: 28s; }
.lg-ambient i:nth-child(3) { width: 380px; height: 380px; right: 18%; top: 55%; background: #C8EB3A; opacity: 0.35; animation-duration: 26s; }
.lg-ambient i:nth-child(4) { width: 420px; height: 420px; left: 30%; bottom: -160px; background: #d79a6c; opacity: 0.35; }
@keyframes lg-float { to { transform: translate(60px, -40px) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .lg-ambient i { animation: none; }
  .lg-press, .lg-press:hover, .lg-press:active { transition: none; transform: none; }
}

/* Navigateurs sans backdrop-filter : un fond plus opaque reste lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-glass { background: rgba(247,242,231,0.96); }
  .lg-glass-dark { background: rgba(26,24,20,0.6); }
}
/* Base element styles — variables defined in styles/theme.css */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; color: var(--muted); }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }
img { display: block; max-width: 100%; }

/* Layout utils */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Global button styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.65rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-accent:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}
.btn-outline:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.btn-ink {
  background: var(--ink);
  color: var(--surface-raised);
}
.btn-ink:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Form styles */
.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.field-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: var(--r-md);
  background: var(--glass-field);
  box-shadow: var(--glass-field-shadow);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

.field-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,35,22,0.08);
}

.field-input::placeholder {
  color: var(--faint);
}

.field-group {
  margin-bottom: var(--sp-5);
}

.error-alert {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(196,85,58,0.25);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: var(--sp-5);
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pill-green  { background: var(--success-bg);  color: var(--success); }
.pill-red    { background: var(--danger-bg);   color: var(--danger); }
.pill-accent { background: var(--accent);      color: var(--accent-ink); }
.pill-muted  { background: var(--border-light); color: var(--muted); }

/* Page sections */
.page-section {
  padding: var(--sp-9) 0;
}

.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

/* Loading / Empty states */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-9) 0;
  color: var(--muted);
}

.empty-state {
  text-align: center;
  padding: var(--sp-9) 0;
  color: var(--muted);
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

/* Error page */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: var(--sp-4);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-4); }
}

/* Accessibilité : contour de focus visible au clavier sur tous les fonds (sombre comme clair). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #1a1814;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #C8EB3A;
}

/* Lien « Aller au contenu » : invisible tant qu'il n'a pas le focus clavier. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: 999px; background: #1a1814; color: #f7f2e7; font-size: 14px;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; box-shadow: none; }

/* Téléphone : champs en 16 px au moins, sinon Safari (iOS) zoome à chaque saisie. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* Cases à cocher et boutons radio : 18 px, plus faciles à toucher. */
input[type="checkbox"], input[type="radio"] { width:18px; height:18px; accent-color:#2C5F2E; }

/* Application Android (Capacitor) : comportement d'application plutôt que de page web (classe posée par native.ts). */
html.native {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Application Android, clavier ouvert (classe posée par native.ts) : on libère la place pour la saisie. */
html.native.kb-open .nav-tabs { display: none; }
html.native.kb-open body { padding-bottom: 0; }
html.native.kb-open .au-brand,
html.native.kb-open .au-sub,
html.native.kb-open .au-tabs,
html.native.kb-open .au-legal { display: none; }
html.native.kb-open .au-title { margin-top: 8px; font-size: 26px; }

/* Application Android : pas de halo vert fluo autour des champs (ils ont déjà leur propre bordure quand ils sont actifs). */
html.native :is(input, textarea, select):focus-visible { box-shadow: none; }

/* Application Android : pendant la saisie, la page gagne de la place en bas (environ la hauteur du clavier) pour pouvoir
   défiler et amener le champ au-dessus du clavier, même sur une page courte comme la connexion. Sans dépendre d'aucun
   événement du clavier : dès qu'un champ a le focus. */
html.native body:has(input:focus, textarea:focus, select:focus) { padding-bottom: 50vh; }

/* Jamais de défilement horizontal de la page : un élément qui dépasse à droite (marge négative, halo, tableau) ne décale plus tout le site.
   « clip » (et non « hidden ») garde les en-têtes collants et ne crée pas de zone de défilement. */
html, body { overflow-x: clip; max-width: 100%; }
/* App structural styles — design tokens live in styles/theme.css */
/* L'en-tête est en position sticky (maquette) : il occupe sa place, aucun décalage nécessaire. */