/* =========================================================
   URBA LITE — Colors & Type
   Palette inspirée de l'imagerie publique française :
   bleu marine (mairie / République), blanc cassé (papier),
   fluo (gilet de chantier).
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- BASE PALETTE ---------- */

  /* Marine — la couleur d'autorité, dominante des CTAs et fonds sombres */
  --marine:      #0B1E3F;   /* primary, fond hero / footer / CTA */
  --marine-2:    #11295A;   /* hover de marine */
  --marine-3:    #1B3A78;   /* surfaces actives, badges info */
  --marine-soft: #E5EAF3;   /* fond pâle dérivé du marine */

  /* Paper — fond neutre */
  --paper:       #F6F4EE;   /* fond par défaut, légèrement chaud */
  --paper-2:     #EFECE3;   /* hover des surfaces papier */
  --paper-3:     #E7E3D7;   /* aplat de section alterné */
  --white:       #FFFFFF;   /* surfaces éclatantes (modals, popovers) */

  /* Ink — texte */
  --ink:         #0B1E3F;   /* texte principal — identique à marine */
  --ink-2:       #344563;   /* texte secondaire */
  --ink-3:       #5C6A82;   /* texte tertiaire / placeholder */
  --ink-4:       #8A95A8;   /* hint, légende */

  /* Rule — bordures */
  --rule:        #E2DFD9;   /* bordure neutre par défaut */
  --rule-2:      #D1CDC2;   /* bordure plus marquée */
  --rule-marine: #C7D0E0;   /* bordure teintée bleue */

  /* ---------- HI-VIS — la couleur de signal ---------- */
  /* Jaune fluo gilet — pour balisage neutre, surlignage */
  --hi-vis:        #F2FF1F;
  --hi-vis-2:      #DCEB00;   /* version pressée / accessible sur petits texts */
  --hi-vis-soft:   rgba(242, 255, 31, 0.4);  /* surlignage feutre */

  /* Orange fluo gilet — pour alerte, action urgente, point de chaleur */
  --hi-vis-orange:    #FF6A1F;
  --hi-vis-orange-2:  #E65A12;
  --hi-vis-orange-soft: rgba(255, 106, 31, 0.12);

  /* ---------- SEMANTIC ---------- */
  --success:      #2D7A4A;
  --success-soft: #E2F1E8;
  --warning:      #B8730A;       /* warm amber — distinct du fluo orange */
  --warning-soft: #FBEFD8;
  --danger:       #C0392B;
  --danger-soft:  #F7E1DE;
  --info:         var(--marine-3);
  --info-soft:    var(--marine-soft);

  /* ---------- ZONAGE PLU (couleurs métier) ---------- */
  /* Convention française classique pour les zones du PLU.
     Réutilisable dans les cartes, badges, légendes. */
  --zone-u:   #E66A4F;  /* Urbain — terracotta */
  --zone-au:  #F2A93B;  /* À urbaniser — orangé */
  --zone-a:   #E8D85C;  /* Agricole — jaune paille */
  --zone-n:   #6FA85B;  /* Naturel — vert */
  --zone-uy:  #9B8FBE;  /* Activité — mauve */

  /* ---------- TYPE STACK ---------- */
  --font-sans:  "Inter Tight", "Marianne", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SIZES ---------- */
  --text-xs:    12px;   /* labels mono, légendes */
  --text-sm:    14px;   /* meta, captions */
  --text-base:  16px;   /* body */
  --text-md:    18px;   /* lead body, intro de section */
  --text-lg:    20px;   /* titre de card */
  --text-xl:    24px;   /* h4 */
  --text-2xl:   32px;   /* h3 */
  --text-3xl:   40px;   /* h2 */
  --text-4xl:   56px;   /* h1 marketing */
  --text-5xl:   72px;   /* hero display */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-0:    0px;     /* tampon, badge institutionnel, CTA primaire */
  --radius-1:    2px;
  --radius-2:    4px;     /* cards, inputs (default) */
  --radius-3:    8px;     /* containers larges */
  --radius-pill: 999px;   /* chips de zonage, status pills */

  /* ---------- ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 30, 63, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 30, 63, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 30, 63, 0.12);
  --shadow-xl: 0 24px 64px rgba(11, 30, 63, 0.18);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   550ms;

  /* ---------- LAYOUT ---------- */
  --container-marketing: 1280px;
  --container-app:       1440px;
  --header-height:       64px;
  --sidebar-width:       260px;
}

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */

.h-display {
  font-family: var(--font-sans);
  font-size: clamp(40px, 6vw, var(--text-5xl));
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.h1 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.5vw, var(--text-4xl));
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
}

.h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}

.p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}

.small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--ink-3);
}

/* Eyebrow — la signature institutionnelle, mono caps */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Mono label — pour références cadastrales, codes de zonage */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-2);
  color: var(--ink);
}

/* Highlight — surlignage fluo derrière un mot clé */
.hi-vis-mark {
  background: linear-gradient(180deg, transparent 55%, var(--hi-vis-soft) 55%);
  padding: 0 0.1em;
}

/* Disclaimer juridique — barre orange sur le côté */
.disclaimer {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-2);
  padding: 12px 16px;
  background: var(--hi-vis-orange-soft);
  border-left: 2px solid var(--hi-vis-orange);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}