/* ============================================================
   Brand tokens — single source of truth for color and type.
   Any new color is added HERE first.
   ============================================================ */
:root {
  /* Brand */
  --c-navy:        #1A3A52;
  --c-navy-soft:   #F0F4F7;   /* was also #F0F4F8 — typo collapsed */
  --c-cream:       #F5F1E8;
  --c-cream-page:  #FAF7F2;   /* page background */
  --c-coral:       #C4714A;
  --c-coral-strong:#E84B3A;
  --c-coral-red:   #FF5455;   /* notification badge / auth error accent */
  --c-error-light: #FFE8E8;   /* pale red bg for auth error flash */
  --c-error-border:#FCA5A5;   /* flash error border */
  --c-flash-success-bg:  #D1FAE5; /* flash success bg */
  --c-flash-success-border: #BBF7D0;
  --c-info-bg:     #E3F4FF;   /* flash info / status 'new' bg */
  --c-info-border: #BAE6FD;
  --c-info-fg:     #00AEFF;   /* status 'new' text */
  --c-pending-bg:  #FFF3CD;   /* status pending/awaiting bg */
  --c-pending-fg:  #B45309;   /* status pending text */
  --c-sky-bg:      #E0F2FE;   /* status sent/invoiced bg */
  --c-sky-fg:      #0284C7;   /* status sent/invoiced text */
  --c-success-dark:#065F46;   /* status accepted/paid text */
  --c-purple-bg:   #EDE9FE;   /* status confirmed bg */
  --c-purple-fg:   #7C3AED;   /* status confirmed text */
  --c-red-cta:     #B70102;   /* landing red button */
  --c-white-8:     rgba(255, 255, 255, 0.08);
  --c-white-10:    rgba(255, 255, 255, 0.1);
  --c-white-12:    rgba(255, 255, 255, 0.12);  /* translucent overlay on dark hero */
  --c-white-30:    rgba(255, 255, 255, 0.3);
  --c-white-50:    rgba(255, 255, 255, 0.5);
  --c-white-60:    rgba(255, 255, 255, 0.6);
  --c-white-95:    rgba(255, 255, 255, 0.95);
  --c-cta-blush:   #FFDDDD;   /* landing CTA section pink-blush bg */

  /* Text */
  --c-text:        #1A1A1A;
  --c-text-soft:   #313131;
  --c-mute:        #6B7280;
  --c-mute-soft:   #9CA3AF;
  --c-bronze:      #CD7F32;   /* 3rd-place ranking badge */
  --c-disabled:    #D1D5DB;

  /* Surfaces & borders */
  --c-surface:     #FFFFFF;
  --c-border:      #E5E7EB;
  --c-border-soft: #F3F4F6;
  --c-border-xsoft:#F9FAFB;   /* extra-soft table row separator */

  /* Status */
  --c-success:     #22C55E;
  --c-success-bg:  #DCFCE7;
  --c-success-fg:  #16A34A;
  --c-warning:     #F59E0B;
  --c-warning-bg:  #FEF3C7;
  --c-warning-fg:  #D97706;
  --c-danger:      #DC2626;
  --c-danger-bg:   #FEF2F2;
  --c-danger-fg:   #DC2626;

  /* Layout */
  --w-sidebar:        241px;
  --w-dialog-md:      440px;
  --h-chat-offset:    220px;     /* client thread chrome offset */
  --h-chat-offset-sm: 180px;     /* caterer thread chrome offset */

  /* Type */
  --font-display:      'Fraunces', serif;
  --font-body:         'Marianne', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-feat-display: 'SOFT' 0, 'WONK' 1;
}

/* ============================================================
   Marianne — police officielle de l'Etat (DSFR).
   Fichiers attendus dans /static/fonts/Marianne/. Si absents, le browser
   tombe gracieusement sur system-ui (defini en fallback dans --font-body).
   Pour un rendu pixel-perfect, telecharger les fichiers depuis :
     https://github.com/GouvernementFR/dsfr/tree/main/dist/fonts
   et les placer dans static/fonts/Marianne/.
   ============================================================ */
@font-face {
  font-family: 'Marianne';
  src: url('/static/fonts/Marianne/Marianne-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Marianne';
  src: url('/static/fonts/Marianne/Marianne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Marianne';
  src: url('/static/fonts/Marianne/Marianne-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Marianne';
  src: url('/static/fonts/Marianne/Marianne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Base element styles (moved from base.html <style>) */
html { background-color: var(--c-cream-page); color: var(--c-text); }
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  font-variation-settings: var(--font-feat-display);
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(196, 113, 74, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(196, 113, 74, 0.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(196, 113, 74, 0.25) transparent; }
button, a, [role="button"], select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }

/* Inputs — base + :focus, replacing inline onfocus/onblur handlers */
.input-soft {
  border: 1px solid var(--c-border);
  background: #FFFFFF;
  outline: none;
  transition: border-color .15s;
}
.input-soft:focus {
  border-color: var(--c-navy);
}

/* Ghost button (transparent → cream on hover), replacing onmouseover/onmouseout */
.btn-ghost-navy {
  border: 1px solid var(--c-navy);
  color: var(--c-navy);
  background: transparent;
  transition: background-color .15s;
}
.btn-ghost-navy:hover {
  background: var(--c-cream);
}

/* Sidebar nav links, replacing the JS active-state walker in app.js */
.sidebar-link {
  color: var(--c-mute);
  background: transparent;
  transition: background-color .15s, color .15s;
}
.sidebar-link:hover {
  background: var(--c-cream);
  color: var(--c-navy);
}
.sidebar-link.active,
.sidebar-link.active:hover {
  background: var(--c-navy);
  color: #FFFFFF;
}

/* Desktop main offset for the fixed sidebar.
   Set in CSS so the first paint is correct (no slide-in from JS). */
@media (min-width: 1024px) {
  #main-content { margin-left: var(--w-sidebar); }
}

/* Wizard step indicator (semantic component, JS toggles --done / --current) */
.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--c-cream);
  color: var(--c-mute);
  transition: background-color .15s, color .15s;
}
.step-dot--done    { background: var(--c-navy);  color: #ffffff; }
.step-dot--current { background: var(--c-coral); color: #ffffff; }

.step-connector {
  flex: 1 1 0%;
  height: 2px;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  background: var(--c-cream);
  transition: background-color .15s;
}
.step-connector--done { background: var(--c-navy); }

.step-label { color: var(--c-mute); transition: color .15s, font-weight .15s; }
.step-label--current { color: var(--c-coral); font-weight: 600; }

/* Auth inputs — coral focus ring */
.input-coral {
  border: 1px solid var(--c-border);
  background: #FFFFFF;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-coral:focus {
  border-color: var(--c-coral);
  box-shadow: 0 0 0 3px rgba(196, 113, 74, 0.3);
}

/* Solid coral submit button */
.btn-coral {
  background: var(--c-coral);
  color: #FFFFFF;
  transition: background-color .15s;
}
.btn-coral:hover {
  background: #8B4A3D;
}

/* Disabled CTA — used while signup form is invalid (missing field /
   weak password). The native `disabled` attribute is enough to block
   submission; this just signals the state visually. */
.signup-submit-disabled,
.signup-submit-disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--c-coral);
}

/* Password requirement bullet — turns success-green when the rule is
   satisfied (toggled by signup.js). */
.pw-rule-ok {
  color: var(--c-success);
}

/* Solid navy CTA */
.btn-navy {
  background: var(--c-navy);
  color: #FFFFFF;
  transition: background-color .15s;
}
.btn-navy:hover {
  background: #132B3E;
}

/* Solid red CTA (landing) */
.btn-red {
  background: #B70102;
  color: #FFFFFF;
  transition: background-color .15s;
}
.btn-red:hover {
  background: #8B0001;
}

/* ============================================================
   Brand utilities (token-backed)
   Mirror Tailwind's API but resolve to brand tokens.
   These live HERE, not in tailwind.css, so tailwind.css
   stays regenerable.
   ============================================================ */

/* Text */
.text-text       { color: var(--c-text); }
.text-text-soft  { color: var(--c-text-soft); }
.text-mute       { color: var(--c-mute); }
.text-mute-soft  { color: var(--c-mute-soft); }
.text-disabled   { color: var(--c-disabled); }
.text-navy       { color: var(--c-navy); }
.text-coral      { color: var(--c-coral); }
.text-danger     { color: var(--c-danger); }
.text-success    { color: var(--c-success-fg); }
.text-warning    { color: var(--c-warning-fg); }
.text-red-cta    { color: var(--c-red-cta); }
.text-white-30   { color: var(--c-white-30); }
.text-white-50   { color: var(--c-white-50); }
.text-white-60   { color: var(--c-white-60); }

/* Background */
.bg-cream        { background-color: var(--c-cream); }
.bg-cream-page   { background-color: var(--c-cream-page); }
.bg-navy         { background-color: var(--c-navy); }
.bg-navy-soft    { background-color: var(--c-navy-soft); }
.bg-coral        { background-color: var(--c-coral); }
.bg-mute-soft    { background-color: var(--c-mute-soft); }
.bg-bronze       { background-color: var(--c-bronze); }
.bg-success      { background-color: var(--c-success); }
.bg-success-soft { background-color: var(--c-success-bg); }
.bg-warning      { background-color: var(--c-warning); }
.bg-warning-soft { background-color: var(--c-warning-bg); }
.bg-danger       { background-color: var(--c-danger); }
.bg-danger-soft  { background-color: var(--c-danger-bg); }
.bg-coral-strong { background-color: var(--c-coral-strong); }
.bg-red-cta      { background-color: var(--c-red-cta); }
.bg-white-8      { background-color: var(--c-white-8); }
.bg-white-12     { background-color: var(--c-white-12); }
.bg-white-95     { background-color: var(--c-white-95); }
.bg-cta-blush    { background-color: var(--c-cta-blush); }
.bg-text         { background-color: var(--c-text); }
.bg-border-default { background-color: var(--c-border); }
.bg-border-soft  { background-color: var(--c-border-soft); }

/* Border */
.border-default  { border-color: var(--c-border); }
.border-soft     { border-color: var(--c-border-soft); }
.border-navy     { border-color: var(--c-navy); }
.border-xsoft    { border-color: var(--c-border-xsoft); }
.border-red-cta  { border-color: var(--c-red-cta); }
.border-white-10 { border-color: var(--c-white-10); }
.border-2        { border-width: 2px; }
.border-t-soft   { border-top: 1px solid var(--c-border-soft); }

/* Hover/focus variants */
.hover\:bg-cream:hover     { background-color: var(--c-cream); }
.hover\:bg-navy-soft:hover { background-color: var(--c-navy-soft); }
.focus\:border-navy:focus  { border-color: var(--c-navy); }

/* Catalog list card — whole card clickable, lifts on hover. The `display`
   intentionally isn't set here so the inline `flex flex-col sm:flex-row`
   classes win and keep the image / text side-by-side on >= sm. */
.catalog-card {
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.catalog-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  transform: translateY(-2px);
}
.catalog-card:hover .catalog-card-cta {
  color: var(--c-coral);
}

/* Form accent */
.accent-navy { accent-color: var(--c-navy); }

/* Has-checked variants */
.has-\[\:checked\]\:bg-navy:has(:checked)      { background-color: var(--c-navy); }
.has-\[\:checked\]\:bg-navy-soft:has(:checked) { background-color: var(--c-navy-soft); }
.has-\[\:checked\]\:bg-white:has(:checked)     { background-color: #ffffff; }
.has-\[\:checked\]\:text-white:has(:checked)   { color: #ffffff; }

/* Stock Tailwind classes the original tailwind.css scan missed */
.w-3  { width: 0.75rem; }
.h-3  { height: 0.75rem; }
.w-12 { width: 3rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.w-4\.5 { width: 1.125rem; }
.h-4\.5 { height: 1.125rem; }
.my-20     { margin-top: 5rem; margin-bottom: 5rem; }
.py-2\.5   { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.no-underline { text-decoration: none; }
.w-px       { width: 1px; }
.opacity-70 { opacity: 0.7; }
.text-hero  { font-size: 2.625rem; line-height: 1.1; }

/* sm: variants the compiled Tailwind didn't include but that the
   client catalog cards depend on (image column width). The breakpoint
   matches the rest of the project's sm: rules at 640px. */
@media (min-width: 640px) {
  .sm\:w-72 { width: 18rem; }
}

/* Notification badge accent (project-specific, was in tailwind.css) */
.bg-coral-red   { background-color: var(--c-coral-red); }
.text-coral-red { color: var(--c-coral-red); }
.bg-error-light  { background-color: var(--c-error-light); }
.border-error    { border-color: var(--c-error-border); }
.bg-flash-success { background-color: var(--c-flash-success-bg); }
.border-flash-success { border-color: var(--c-flash-success-border); }
.bg-info         { background-color: var(--c-info-bg); }
.border-info     { border-color: var(--c-info-border); }
.text-info       { color: var(--c-info-fg); }
.bg-pending      { background-color: var(--c-pending-bg); }
.text-pending    { color: var(--c-pending-fg); }
.bg-sky          { background-color: var(--c-sky-bg); }
.text-sky        { color: var(--c-sky-fg); }
.bg-flash-success-dark { background-color: var(--c-flash-success-bg); }
.text-success-dark { color: var(--c-success-dark); }
.bg-purple       { background-color: var(--c-purple-bg); }
.text-purple     { color: var(--c-purple-fg); }

/* Layout (tokenized layout primitives) */
.w-sidebar     { width: var(--w-sidebar); }
.max-w-dialog  { max-width: var(--w-dialog-md); }
.h-chat        { height: calc(100vh - var(--h-chat-offset)); }
.h-chat-narrow { height: calc(100vh - var(--h-chat-offset-sm)); }

/* Max-width utility (Tailwind max-w-20 = 5rem) */
.max-w-20 { max-width: 5rem; }

/* Flex shorthand (Tailwind flex-none = flex: 0 0 auto) */
.flex-none { flex: none; }

/* Badge sizes */
.badge-xs { padding: 2px 6px; border-radius: 4px; font-size: 10px; line-height: 1.4; }

/* ============================================================
   LANDING PAGE — styles isoles sous .landing-root pour ne pas
   contaminer les pages connectees. Portes du Next.js de reference
   (src/app/globals.css). Tous les selecteurs commencent par
   .landing-root pour scoper.
   ============================================================ */

.landing-root {
  font-family: 'Marianne', system-ui, sans-serif;
  color: var(--c-navy);
  background-color: var(--c-cream-page);
}
.landing-root h1,
.landing-root h2,
.landing-root h3 {
  font-family: 'Fraunces', Georgia, serif;
}
.landing-root .font-fraunces {
  font-family: 'Fraunces', Georgia, serif;
}
.landing-root .font-fraunces-italic {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
}

/* Badge "Lancement" sur la section sombre */
.landing-root .badge-launch {
  display: inline-block;
  border: 1.5px solid white;
  border-radius: 8px;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: white;
  letter-spacing: 0.02em;
}

/* Soulignement decoratif (pinceau) sur les titres */
.landing-root .title-deco {
  position: relative;
  display: inline-block;
}
.landing-root .title-deco::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 0.5rem;
  rotate: 40deg;
  background: url('/static/img/landing/deco-brush-strokes.png') no-repeat center;
  background-size: contain;
}
@media (min-width: 640px) {
  .landing-root .title-deco::before { display: none; }
  .landing-root .title-deco::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 40px;
    right: -60px;
    width: 80px;
    height: 80px;
    rotate: 40deg;
    background: url('/static/img/landing/deco-brush-strokes.png') no-repeat center;
    background-size: contain;
  }
}

/* Bouton avec animation "swap" hover (label slide-out, second label slide-in) */
.landing-root .swap-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-weight: 700;
}
.landing-root .swap-btn .swap-front,
.landing-root .swap-btn .swap-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
.landing-root .swap-btn .swap-back { transform: translateY(100%); }
.landing-root .swap-btn:hover .swap-front { transform: translateY(-100%); }
.landing-root .swap-btn:hover .swap-back  { transform: translateY(0); }

/* Galerie photo cliquable : leger dezoom au hover pour signaler l'affordance
   (couple avec cursor:pointer sur le wrapper data-photo-index, gere inline). */
#photos-gallery [data-photo-index] img {
  transition: transform .2s ease;
}
#photos-gallery [data-photo-index]:hover img {
  transform: scale(0.97);
}

/* Detail-with-sidebar layout (70% main / 30% aside).
   Stack vertically on small screens, side-by-side from `lg` (≥1024px). */
.split-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.split-detail > .split-main  { width: 100%; }
.split-detail > .split-aside { width: 100%; }
@media (min-width: 1024px) {
  .split-detail               { flex-direction: row; align-items: flex-start; }
  .split-detail > .split-main  { width: 70%; }
  .split-detail > .split-aside { width: 30%; position: sticky; top: 1.5rem; }
}

/* Step timeline desktop positioning (4 steps placed along an SVG S-curve) */
.landing-root .step-pos-1 { top: -5%;  left: 24%; }
.landing-root .step-pos-2 { top: 26%;  right: 23%; left: auto; }
.landing-root .step-pos-3 { top: 60%;  left: 23%; }
.landing-root .step-pos-4 { top: 94%;  right: 24%; left: auto; }

/* Responsive utilities used by the landing — Tailwind variants `sm:`,
   `md:`, `lg:` are not in the precompiled bundle, so we hand-write
   the ones the landing relies on. Scoped under .landing-root to avoid
   any leak to the connected pages (which use a different layout system). */
@media (min-width: 640px) {
  .landing-root .sm\:absolute        { position: absolute; }
  .landing-root .sm\:block           { display: block; }
  .landing-root .sm\:inline          { display: inline; }
  .landing-root .sm\:flex-row        { flex-direction: row; }
  .landing-root .sm\:flex-row-reverse{ flex-direction: row-reverse; }
  .landing-root .sm\:items-start     { align-items: flex-start; }
  .landing-root .sm\:text-left       { text-align: left; }
  .landing-root .sm\:text-right      { text-align: right; }
  .landing-root .sm\:px-6            { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .landing-root .md\:flex-row        { flex-direction: row; }
  .landing-root .md\:items-start     { align-items: flex-start; }
  .landing-root .md\:grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-root .md\:order-1         { order: 1; }
  .landing-root .md\:order-2         { order: 2; }
  .landing-root .md\:mt-3            { margin-top: 0.75rem; }
}
@media (min-width: 1024px) {
  .landing-root .lg\:flex-row        { flex-direction: row; }
  .landing-root .lg\:justify-end     { justify-content: flex-end; }
  .landing-root .lg\:justify-start   { justify-content: flex-start; }
  .landing-root .lg\:text-left       { text-align: left; }
  .landing-root .lg\:px-8            { padding-left: 2rem; padding-right: 2rem; }
}