/* Utilitaires CSS inspirés de Tailwind pour header/navigation.
   Objectif: supprimer l'inclusion CDN en production sans casser le layout. */

:root {
  --brand-green: #16a34a; /* proche de green-600 */
  --brand-green-hover: #15803d; /* green-700 */
  --text-white: #ffffff;
}

/* Container et spacing */
.container { width: 100%; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-7xl { max-width: 80rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }

/* Breakpoints similaires */
@media (min-width: 640px) { /* sm */
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) { /* lg */
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Flex & alignment */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-end { justify-content: flex-end; }
.gap-4 { gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }

/* Typo & couleurs */
.text-white { color: var(--text-white); }
.hover\:text-green-300:hover { color: #86efac; }
.focus\:outline-none:focus { outline: none; }

/* Boutons */
.rounded-md { border-radius: .375rem; }
.bg-brand { background-color: var(--brand-green); color: var(--text-white); }
.hover\:bg-green-700:hover { background-color: var(--brand-green-hover); }
.shadow { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); }

/* Utilitaires divers utilisés dans le header */
.h-8 { height: 2rem; }
.w-auto { width: auto; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }

/* Liaisons sémantiques simples */
a.button { text-decoration: none; display: inline-flex; align-items: center; }