xpeditis2.0/apps/frontend/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    /* Anneau de focus = accent applicatif #2563EB.
       Le turquoise #34CCCD reste l'accent du site vitrine, mais a l'interieur
       du produit l'action est portee par le bleu : c'est la couleur d'origine
       du dashboard, et elle tient le contraste que le turquoise n'atteint pas
       sur fond clair (4,55:1 contre 2,05:1). */
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body;
  }

  /* Apply Manrope to all headings */
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }

  h1 { @apply text-h1 text-brand-navy; }
  h2 { @apply text-h2 text-brand-navy; }
  h3 { @apply text-h3 text-neutral-800; }
  h4 { @apply text-h4 text-neutral-800; }
  h5 { @apply text-h5 text-neutral-700; }
  h6 { @apply text-h6 text-neutral-700; }

  /* Accessibilite : respecter la preference systeme de mouvement reduit.
     Les animations sont neutralisees plutot que supprimees, afin que les
     callbacks onAnimationEnd de Radix continuent de se declencher. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* Classes historiques, encore employees par /register et /admin/login.
     Elles seront retirees quand ces pages passeront aux primitives de
     src/components/ui. Ne pas les supprimer avant : voir docs/ui-audit.md §D6. */

  /* Bouton d'action : navy plein, texte blanc (14,2:1, AAA). */
  .btn-primary {
    @apply bg-brand-navy text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-navy/90 transition-colors shadow-sm hover:shadow;
  }

  .btn-secondary {
    @apply bg-brand-navy text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-navy/90 transition-colors shadow-sm hover:shadow;
  }

  .btn-success {
    @apply bg-success text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-success-dark transition-colors shadow-sm hover:shadow;
  }

  .btn-outline {
    @apply border-2 border-primary text-primary font-heading font-semibold px-6 py-3 rounded-lg hover:bg-primary hover:text-white transition-colors;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .card-header {
    @apply font-heading font-semibold text-h4 text-brand-navy mb-4;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-label font-body;
  }

  .badge-success {
    @apply badge bg-success/10 text-success;
  }

  .badge-info {
    @apply badge bg-brand-blue-soft text-brand-blue-dark;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-800;
  }

  /* Link styles */
  .link {
    /* Souligne en permanence : un lien identifie par la seule couleur echoue au
       critere WCAG 1.4.1. Le navy assure par ailleurs le contraste que le
       turquoise ne tient pas sur fond clair. */
    @apply text-brand-blue underline underline-offset-2 transition-colors hover:text-brand-blue-dark;
  }

  /* Form elements */
  .input {
    @apply border border-neutral-300 rounded-lg px-4 py-2.5 font-body text-body focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-colors;
  }

  .label {
    @apply text-label text-neutral-600 font-body font-semibold mb-1.5 block uppercase tracking-wider;
  }

  /* Container with brand background */
  .section-navy {
    @apply bg-brand-navy text-white py-16;
  }

  .section-light {
    @apply bg-brand-gray py-16;
  }
}

/* TipTap editor styles */
.tiptap p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.tiptap img.ProseMirror-selectednode {
  outline: 3px solid #34CCCD;
}

/* Prose typography overrides for brand colors */
.prose a {
  color: #34CCCD;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: #10183A;
  font-family: var(--font-manrope), Manrope, sans-serif;
}
.prose blockquote {
  border-left-color: #34CCCD;
}
.prose code {
  background-color: #f3f4f6;
  color: #10183A;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
.prose pre {
  background-color: #10183A;
  color: #e5e7eb;
}