/* GÉNÉRÉ par scripts/construire-site.mjs depuis site/design/ds/ — ne pas modifier à la main. */
/* Sora est servie par le site (assets/ds/) : jamais Google Fonts, voir assets/ds/tokens.css. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/ds/sora-latin.woff2') format('woff2');
}
/* PIMMO — Color tokens
   Derived from the PIMMO app source (Accueil / Logo .dc files).
   A calm, trustworthy blue system on near-white paper. No pure black, no pure white. */
:root {
  /* --- Blue ramp (brand core) --- */
  --pimmo-blue-700: #27406B; /* deep marine — headings, primary text, press shadow */
  --pimmo-blue-500: #4C7EDE; /* PIMMO blue — primary actions, links */
  --pimmo-blue-300: #9DC2F0; /* light azure — accent dot, hover borders */
  --pimmo-blue-200: #C9D8EE; /* control borders */
  --pimmo-blue-100: #D8E2F0; /* dividers */
  --pimmo-blue-050: #E1E9F5; /* faint borders */
  --pimmo-blue-025: #F4F7FC; /* sunken fills (disabled inputs) */

  /* --- Page gradient stops --- */
  --pimmo-sky-1: #F2F6FC;
  --pimmo-sky-2: #E9EFF8;
  --pimmo-sky-3: #E3EBF7;

  /* --- Paper & neutrals --- */
  --pimmo-paper: #FDFEFF;    /* card surface — the "white" */
  --pimmo-slate-500: #6B82A6; /* muted / secondary text */
  --pimmo-slate-400: #8FA0BC; /* placeholder / disabled text */

  /* --- States (added from the PWA mobile field work) ---
     The only sanctioned non-blue hues in the system. Desaturated, marine-compatible.
     Blue stays the colour of ACTION, so rule breaches cannot be signalled in blue. */
  --pimmo-danger-600: #8E3630; /* text on a danger surface */
  --pimmo-danger-500: #B84A45; /* icon, value, alert dot, focus border */
  --pimmo-danger-100: #E7C6C3; /* block border */
  --pimmo-danger-025: #FBF0EF; /* block surface */
  --pimmo-warn-500:   #B8792B; /* non-blocking warning */

  /* --- Complementary neutrals (all marine-tinted) --- */
  --pimmo-blue-150: #DDE6F4;  /* slider track */
  --pimmo-blue-075: #E7EDF6;  /* dummy text lines (PDF viewer) */
  --pimmo-blue-tint: #EDF3FC; /* current-step background */
  --pimmo-desk:     #DFE7F2;  /* "desk" behind a document sheet */

  /* --- Map palette (SVG cartographic background) --- */
  --pimmo-map-water:  #E7EEF7;
  --pimmo-map-block:  #DCE6F3;
  --pimmo-map-road:   #FDFEFF;
  --pimmo-map-build:  #F4F8FD;
  --pimmo-map-stroke: #B9CBE4;
  --pimmo-map-fallback: #E8EFF8; /* fond de repli quand la carte MapLibre ne charge pas */

  /* --- Disabled --- */
  --pimmo-disabled: #B7C2D4;
  --pimmo-disabled-press: #9AA6BC;

  /* ============ Semantic aliases ============ */
  --color-primary: var(--pimmo-blue-500);
  --color-primary-strong: var(--pimmo-blue-700);
  --color-accent: var(--pimmo-blue-300);

  --text-strong: var(--pimmo-blue-700);
  --text-body: var(--pimmo-blue-700);
  --text-muted: var(--pimmo-slate-500);
  --text-subtle: var(--pimmo-slate-400);
  --text-on-primary: var(--pimmo-paper);
  --text-disabled: #B4C2D8; /* unavailable action label on a light surface */

  --text-danger: var(--pimmo-danger-600);
  --icon-danger: var(--pimmo-danger-500);
  --border-danger: var(--pimmo-danger-100);
  --surface-danger: var(--pimmo-danger-025);
  --text-warn: var(--pimmo-warn-500);

  --surface-page: var(--pimmo-sky-2);
  --surface-card: var(--pimmo-paper);
  --surface-sunken: var(--pimmo-blue-025);

  --border-default: var(--pimmo-blue-200);
  --border-strong: var(--pimmo-blue-300);
  --border-subtle: var(--pimmo-blue-050);
  --divider: var(--pimmo-blue-100);

  --focus-ring: rgba(157, 194, 240, 0.35);

  /* Press-shadow colors (3D push buttons) */
  --press-primary: var(--pimmo-blue-700);
  --press-secondary: var(--pimmo-blue-200);
  --press-secondary-hover: var(--pimmo-blue-300);

  /* Page background — the signature vertical sky gradient */
  --gradient-page: linear-gradient(180deg, var(--pimmo-sky-1) 0%, var(--pimmo-sky-2) 45%, var(--pimmo-sky-3) 100%);
  /* Ultra mode — the only gradients outside the page/accent pair. Marine → PIMMO blue. */
  --gradient-ultra: linear-gradient(100deg, var(--pimmo-blue-700) 0%, #3A5FA8 58%, var(--pimmo-blue-500) 100%);
  --gradient-ultra-deep: linear-gradient(135deg, #101C34 0%, var(--pimmo-blue-500) 100%); /* fond immersif plein écran */
  /* Informational accent bar — animated brand gradient */
  --gradient-accent: linear-gradient(90deg, var(--pimmo-blue-500) 0%, var(--pimmo-blue-300) 50%, var(--pimmo-blue-500) 100%);
}

/* PIMMO — Typography tokens
   One typeface: Sora. Geometric, even-width grotesque. Wide tracking on the
   wordmark and on small uppercase labels is the signature move. */
:root {
  --font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (px, matched to the app source) */
  --text-xs: 11px;    /* eyebrow / uppercase labels */
  --text-sm: 12.5px;  /* fine print, notes */
  --text-caption: 13px;
  --text-base: 14px;  /* body */
  --text-md: 15px;    /* button / control label */
  --text-lg: 20px;    /* section heading (h2) */
  --text-xl: 26px;    /* card title */
  --text-2xl: 38px;   /* screen title (h1) */
  --text-3xl: 52px;   /* hero wordmark */

  /* Weights — Sora ships 400/500/600/700; brand uses 400/600/700 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* Letter-spacing — the PIMMO fingerprint */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wordmark: 0.16em; /* PIMMO lockup */
  --tracking-eyebrow: 0.2em;   /* ROADMAP-style small caps */
  --tracking-label: 0.22em;    /* subtitle small caps */
}

/* PIMMO — Spacing scale (4px base) */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;

  /* Common layout measures */
  --card-pad: clamp(20px, 4vw, 32px); /* fluid card padding used across the app */
  --content-max: 480px;               /* max width of the central action column */
  --gap-stack: 14px;                  /* default gap between stacked controls */
}

/* PIMMO — Corner radii. Soft, generous, consistent. */
:root {
  --radius-2xs: 6px;  /* document sheet */
  --radius-xs: 10px;  /* icon buttons, compact number fields */
  --radius-sm: 12px;  /* inputs, small controls */
  --radius-md: 14px;  /* buttons */
  --radius-lg: 18px;  /* logo squircle */
  --radius-xl: 20px;  /* standard cards */
  --radius-2xl: 24px; /* hero / lockup cards */
  --radius-pill: 999px;
}

/* PIMMO — Elevation & the signature 3D "push" buttons.
   Cards float on a whisper-soft marine shadow. Buttons carry a hard-edged
   colored offset (box-shadow: 0 Ypx 0 color) that compresses on press —
   a tactile, reliable, non-gimmicky affordance. */
:root {
  /* Soft ambient card shadows (marine-tinted, never grey) */
  --shadow-card: 0 1px 3px rgba(39, 64, 107, 0.08);
  --shadow-card-hover: 0 4px 14px rgba(39, 64, 107, 0.14);
  --shadow-raised: 0 6px 18px rgba(76, 126, 222, 0.35); /* glowing logo tile */
  --shadow-float: 0 2px 8px rgba(39, 64, 107, 0.14); /* panneaux posés sur la carte */

  /* 3D push-button offsets (the flat, colored under-shadow) */
  --push-primary: 0 4px 0 var(--press-primary);
  --push-primary-hover: 0 5px 0 var(--press-primary);
  --push-secondary: 0 3px 0 var(--press-secondary);
  --push-secondary-hover: 0 3px 0 var(--press-secondary-hover);
  --push-flat: 0 0 0 var(--press-primary); /* pressed / grounded state */

  /* Focus ring (inputs) */
  --ring-focus: 0 0 0 3px var(--focus-ring);
}

/* PIMMO — Motion. Springy but restrained. Everything settles; nothing loops
   in the user's face. Entrances fade-up; buttons spring on the z-axis;
   panels slide horizontally. */
:root {
  /* Easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* buttons, pops, icons */
  --ease-slide: cubic-bezier(0.5, 0, 0.2, 1);       /* @kind other */ /* panel slides */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* @kind other */ /* smooth deceleration */
  --ease-in: ease-in;                               /* @kind other */

  /* Durations */
  --dur-instant: 0.12s; /* @kind other */
  --dur-fast: 0.15s;    /* @kind other */ /* hover / press feedback */
  --dur-med: 0.35s;     /* @kind other */ /* opacity / small moves */
  --dur-slow: 0.5s;     /* @kind other */ /* panel slide */
  --dur-entrance: 0.6s; /* @kind other */ /* fade-up on mount */
}

/* Shared keyframes shipped with the system */
@keyframes pimmo-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pimmo-popIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pimmo-maskWipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -5% -10% 0); } }
@keyframes pimmo-gradientPan { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes pimmo-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --- Added with the mobile (PWA) tier --- */
/* Loading skeletons: a 100deg highlight sweeping across a sunken block. */
@keyframes pimmo-shimmerSweep { from { background-position: 0% 0; } to { background-position: -200% 0; } }
/* Tap confirmation on the map: a ring expanding from the touch point,
   so selecting a parcel never has to move the view. */
@keyframes pimmo-ringPulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
/* --- Added with the prospection screen (desktop) --- */
/* Ultra mode: the chevron texture scrolling under the gradient (UltraButton hover). */
@keyframes pimmo-chev { from { background-position: 0 0, 0 0; } to { background-position: 16px 0, 0 0; } }
/* Current-step dot: a breathing azure halo (ProspectionSteps). */
@keyframes pimmo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(157, 194, 240, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(157, 194, 240, 0); } }

/* Micro-particles on slider release and on save. Blue normally,
   danger-500 when the value breaches a PLU cap — the haptic carries the state. */
@keyframes pimmo-puff { from { opacity: 0.85; transform: translate(0, 0) scale(0.35); } to { opacity: 0; transform: translate(var(--puff-x, 0), var(--puff-y, -32px)) scale(2.3); } }
/* Slider magnifier: the value bubble that pops above the thumb while dragging
   and follows the finger. Mobile PWA + desktop drag alike. */
@keyframes pimmo-loupeIn { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.5); } 60% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.06); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

/* PIMMO — ajouts « prospection ».
   Importé depuis styles.css. Contient uniquement ce que le style inline ne peut
   pas porter : états de survol (les keyframes vivent dans tokens/motion.css). */

.pimmo-ultra-btn {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 16 18'%3E%3Cpath d='M2 3 L7.5 9 L2 15' fill='none' stroke='%23ffffff' stroke-opacity='0.30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 3 L14.5 9 L9 15' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--gradient-ultra);
  background-size: 16px 18px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.pimmo-ultra-btn:hover {
  animation: pimmo-chev .55s linear infinite;
  box-shadow: 0 7px 20px rgba(39, 64, 107, 0.30);
  transform: translateY(-1px);
}
.pimmo-ultra-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(39, 64, 107, 0.30); }
.pimmo-ultra-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Carte cadastrale — attribution MapLibre à la typo de la marque */
.pimmo-cadastre-map .maplibregl-ctrl-attrib { font-family: var(--font-sans); font-size: 10px; }

/* Chiffres alignés — obligatoire sur toute valeur tabulaire (fiche, bilan, grille prix) */
.tnum { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .pimmo-ultra-btn:hover { animation: none; }
}