/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 12 2025 | 17:57:28 */
/* ===== CSS VARIABLES & CONFIGURATION ===== */
:root {
  /* === FONTS === */
  --font-primary: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Inter", "Helvetica Neue", Arial, sans-serif;
  
  /* ===== PRIMARY COLORS ===== */
  --color-primary: #021557;
  --color-primary-light: #1d2e8a;
  --color-primary-dark: #010d3a;
  
  --color-primary-5:  rgba(2, 21, 87, 0.05);
  --color-primary-10: rgba(2, 21, 87, 0.1);
  --color-primary-25: rgba(2, 21, 87, 0.25);
  --color-primary-50: rgba(2, 21, 87, 0.5);
  --color-primary-75: rgba(2, 21, 87, 0.75);
  
  /* ===== NEUTRAL COLORS ===== */
  --color-black: #000000;
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-70: rgba(0, 0, 0, 0.7);
  
  --color-white: #ffffff;
  --color-broken-white: #f9f9f9;
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-70: rgba(255, 255, 255, 0.7);
  
  --color-gray-100: #f6f6f6;  
  --color-gray-200: #e1e6e6;  
  --color-gray-300: #d5dbdb;
  --color-gray-400: #b3b3b3;  
  --color-gray-500: #9aa9b8;
  --color-gray-600: #788ca0;  
  --color-gray-700: #5e6d81;
  --color-gray-800: #4a5a6f;  
  --color-gray-900: #2c3440;

  --color-error: #ca0c0c;
  --color-valid: #067c06;

  --color-accent-silver: #a8a5a1; 
  --color-accent-silver-light: #d7d4d0; 

  --color-accent-gold: #f0b23e;
  --color-accent-gold-light: #efd6ac;

  --color-accent-azur: #5faee3;
  --color-accent-azur-light: #c8e2f6;
  
  /* ===== GRADIENTS BASÉS SUR PRIMARY COLOR #021557 ===== */
  --gradient-primary: linear-gradient(135deg, #021557 0%, #1d2e8a 100%);
  --gradient-primary-accent: linear-gradient(135deg, #021557 0%, #4158d0 100%);
  --gradient-primary-overlay: linear-gradient(180deg, rgba(2,21,87,0.85) 0%, rgba(2,21,87,0) 100%);
  --gradient-primary-purple: linear-gradient(135deg, #021557 0%, #6a11cb 100%);
  --gradient-primary-cyan: linear-gradient(135deg, #021557 0%, #00c6ff 100%);
  --gradient-primary-warm: linear-gradient(135deg, #021557 0%, #ff7e5f 100%);
  --gradient-primary-soft: linear-gradient(135deg, #021557 0%, rgba(2,21,87,0.1) 100%);
  
  /* Border colors */
  --border-color-primary: var(--color-primary);
  --border-color-primary-light: rgba(2, 21, 87, 0.4);
  --border-color-white: var(--color-white);
  --border-color-gray: rgba(120, 140, 160, 0.6);
  --border-color-black: rgba(0, 0, 0, 0);

  /* === SCROLLBAR === */
  --scrollbar-width: 1px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.6);
}

/* ===== GLOBAL RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--color-gray-800);
  color: var(--color-black);
  background: var(--color-white);
}

/* ===== SCROLLBAR CUSTOM ===== */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: 100%;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ===== PLACEHOLDERS ===== */
::placeholder {
  color: var(--color-gray-500);
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--font-secondary);
}

/* === FONT FAMILY === */
.ff-p { font-family: var(--font-primary); }
.ff-s { font-family: var(--font-secondary); }

/* === FONT LINE HEIGHT === */
.flh-11 { line-height: 1.1; }
.flh-13 { line-height: 1.3; }
.flh-14 { line-height: 1.4; }
.flh-15 { line-height: 1.5; }
.flh-16 { line-height: 1.6; }
.flh-18 { line-height: 1.8; }
.flh-20 { line-height: 2; }

/* ===== UTILITY CLASSES ===== */
.c-p { color: var(--color-primary); }
.c-pl { color: var(--color-primary-light); }
.c-pd { color: var(--color-primary-dark); }

.c-w { color: var(--color-white); }
.c-b { color: var(--color-black); }

.c-valid { color: var(--color-valid); }
.c-error { color: var(--color-error); }

.c-as { color: var(--color-accent-silver); }
.c-asl { color: var(--color-accent-silver-light); }

.c-ag { color: var(--color-accent-gold); }

.c-trans { color: transparent; }
.c-n { background: none; }

/* === BACKGROUND COLORS === */
.bgc-p { background-color: var(--color-primary); }
.bgc-pl { background-color: var(--color-primary-light); }
.bgc-pd { background-color: var(--color-primary-dark); }

.bgc-w { background-color: var(--color-white); }
.bgc-bw { background-color: var(--color-broken-white); }
.bgc-b { background-color: var(--color-black); }

.bgc-valid { background-color: var(--color-valid); }
.bgc-error { background-color: var(--color-error); }

.bgc-as { background-color: var(--color-accent-silver); }
.bgc-asl { background-color: var(--color-accent-silver-light); }

.bgc-ag { background-color: var(--color-accent-gold); }
.bgc-agl { background-color: var(--color-accent-gold-light); }

.bgc-aa { background-color: var(--color-accent-azur); }
.bgc-aal { background-color: var(--color-accent-azur-light); }


.bgc-trans { background-color: transparent; }
.bgc-popup { background-color: rgba(0, 0, 0, 0.5); }
.bg-n { background: none; }

/* === BACKGROUND GRADIENTS === */
.bgc-grad-primary { background: var(--gradient-primary); }
.bgc-grad-primary-accent { background: var(--gradient-primary-accent); }
.bgc-grad-primary-overlay { background: var(--gradient-primary-overlay); }
.bgc-grad-primary-purple { background: var(--gradient-primary-purple); }
.bgc-grad-primary-cyan { background: var(--gradient-primary-cyan); }
.bgc-grad-primary-warm { background: var(--gradient-primary-warm); }
.bgc-grad-primary-soft { background: var(--gradient-primary-soft); }

/* === SVG FILLS === */
.svgf-p { fill: var(--color-primary); }
.svgf-w { fill: var(--color-white); }

.svgf-valid { fill: var(--color-valid); }
.svgf-error { fill: var(--color-error); }

/* === SVG STROKES === */
.svgs-p { stroke: var(--color-primary); }
.svgs-w { stroke: var(--color-white); }

.svgs-valid { stroke: var(--color-valid); }
.svgs-error { stroke: var(--color-error); }

/* === BACKGROUND EFFECTS === */
.bgc-blur-2 { backdrop-filter: blur(2px); }
.bgc-blur-8 { backdrop-filter: blur(8px); }
.bgp-tc { background-position: top center; }

/* === POSITION === */
.p-r { position: relative; }
.p-a { position: absolute; }
.p-f { position: fixed; }
.p-s { position: sticky; }

/* === Z-INDEX === */
.zi--1 { z-index: -1 }
.zi-1 { z-index: 1 }
.zi-2 { z-index: 2 }
.zi-3 { z-index: 3 }
.zi-47 { z-index: 47 }
.zi-48 { z-index: 48 }
.zi-49 { z-index: 49 }
.zi-50 { z-index: 50 }
.zi-51 { z-index: 51 }
.zi-96 { z-index: 96 }
.zi-97 { z-index: 97 }
.zi-98 { z-index: 98 }
.zi-99 { z-index: 99 }
.zi-100 { z-index: 100 }

/* === DISPLAY === */
.d-n { display: none; }
.d-b { display: block; }
.d-i { display: inline; }
.d-ib { display: inline-block; }

/* === FLEX === */
.f { display: flex; }
.f-r { display: flex; flex-direction: row; }
.f-c { display: flex; flex-direction: column; }

.f-jc-s  { display: flex; justify-content: start; }
.f-jc-c  { display: flex; justify-content: center; }
.f-jc-e  { display: flex; justify-content: end; }
.f-jc-sb { display: flex; justify-content: space-between; }
.f-jc-sa { display: flex; justify-content: space-around; }

.f-ai-s { display: flex; align-items: start; }
.f-ai-c { display: flex; align-items: center; }
.f-ai-e { display: flex; align-items: end; }

.f-ai-jc-s       { display: flex; align-items: start; justify-content: start; }
.f-ai-jc-c       { display: flex; align-items: center; justify-content: center; }
.f-ai-jc-e       { display: flex; align-items: flex-end; justify-content: flex-end; }
.f-ai-s-jc-c     { display: flex; align-items: flex-start; justify-content: center; }
.f-ai-c-jc-s    { display: flex; align-items: center; justify-content: start; }
.f-ai-c-jc-sb    { display: flex; align-items: center; justify-content: space-between; }
.f-ai-s-jc-sb    { display: flex; align-items: flex-start; justify-content: space-between; }
.f-ai-e-jc-c     { display: flex; align-items: flex-end; justify-content: center; }
.f-ai-e-jc-sb    { display: flex; align-items: flex-end; justify-content: space-between; }

.f-c-ai-jc-c     { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.f-c-ai-c-jc-s   { display: flex; flex-direction: column; align-items: center; justify-content: start; }
.f-c-ai-s-jc-c   { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.f-c-ai-e-jc-c   { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }

.f-1 { flex: 1; }

.fw-w { flex-wrap: wrap; }
.fw-n { flex-wrap: nowrap; }

/* === FLEX GAPS === */
.f-g-1   { gap: 1px; }
.f-g-2   { gap: 2px; }
.f-g-4   { gap: 4px; }
.f-g-5   { gap: 5px; }
.f-g-8   { gap: 8px; }
.f-g-10  { gap: 10px; }
.f-g-12  { gap: 12px; }
.f-g-15  { gap: 15px; }
.f-g-16  { gap: 16px; }
.f-g-20  { gap: 20px; }
.f-g-22  { gap: 22px; }
.f-g-25  { gap: 25px; }
.f-g-30  { gap: 30px; }
.f-g-35  { gap: 35px; }
.f-g-40  { gap: 40px; }
.f-g-45  { gap: 45px; }
.f-g-50  { gap: 50px; }
.f-g-60  { gap: 60px; }
.f-g-70  { gap: 70px; }
.f-g-100 { gap: 100px; }

/* === PADDING === */
.p-4 { padding: 4px; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }

.pt-8 { padding-top: 8px; }
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
.pt-32 { padding-top: 32px; }
.pt-36 { padding-top: 36px; }
.pt-96 { padding-top: 96px; }

.pb-8 { padding-bottom: 8px; }
.pb-10 { padding-bottom: 10px; }
.pb-16 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 20px; }
.pb-24 { padding-bottom: 24px; }
.pb-32 { padding-bottom: 32px; }
.pb-96 { padding-bottom: 96px; }

.pl-8 { padding-left: 8px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }
.pl-32 { padding-left: 32px; }

.pr-8 { padding-right: 8px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }
.pr-32 { padding-right: 32px; }

.plr-8 { padding-left: 8px; padding-right: 8px; }
.plr-10 { padding-left: 10px; padding-right: 10px; }
.plr-12 { padding-left: 12px; padding-right: 12px; }
.plr-16 { padding-left: 16px; padding-right: 16px; }
.plr-20 { padding-left: 20px; padding-right: 20px; }
.plr-24 { padding-left: 24px; padding-right: 24px; }
.plr-32 { padding-left: 32px; padding-right: 32px; }
.plr-38 { padding-left: 38px; padding-right: 38px; }

.ptb-2 { padding-top: 2px; padding-bottom: 2px; }
.ptb-4 { padding-top: 4px; padding-bottom: 4px; }
.ptb-8 { padding-top: 8px; padding-bottom: 8px; }
.ptb-12 { padding-top: 12px; padding-bottom: 12px; }
.ptb-16 { padding-top: 16px; padding-bottom: 16px; }
.ptb-20 { padding-top: 20px; padding-bottom: 20px; }
.ptb-24 { padding-top: 24px; padding-bottom: 24px; }
.ptb-32 { padding-top: 32px; padding-bottom: 32px; }
.ptb-38 { padding-top: 38px; padding-bottom: 38px; }
.ptb-96 { padding-top: 96px; padding-bottom: 96px; }

.pl-p-100 { padding-left: 100%; }

/* === MARGIN === */
.m-8 { margin: 8px; }
.m-16 { margin: 16px; }
.m-24 { margin: 24px; }
.m-32 { margin: 32px; }

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }
.ml-32 { margin-left: 32px; }

.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-24 { margin-right: 24px; }
.mr-32 { margin-right: 32px; }

.mlr-8 { margin-left: 8px; margin-right: 8px; }
.mlr-16 { margin-left: 16px; margin-right: 16px; }
.mlr-24 { margin-left: 24px; margin-right: 24px; }
.mlr-32 { margin-left: 32px; margin-right: 32px; }

.mtb-8 { margin-top: 8px; margin-bottom: 8px; }
.mtb-16 { margin-top: 16px; margin-bottom: 16px; }
.mtb-24 { margin-top: 24px; margin-bottom: 24px; }
.mtb-32 { margin-top: 32px; margin-bottom: 32px; }

/* === BORDERS === */
.b-n { border: none; }

.b-1-p { border: 1px solid var(--border-color-primary); }
.b-2-p { border: 2px solid var(--border-color-primary); }
.b-1-pl { border: 1px solid var(--border-color-primary-light); }
.b-2-pl { border: 2px solid var(--border-color-primary-light); }
.b-1-w { border: 1px solid var(--border-color-white); }
.b-2-w { border: 2px solid var(--border-color-white); }

/* === BORDER RADIUS === */
.br-1 { border-radius: 1px; }
.br-3 { border-radius: 3px; }
.br-5 { border-radius: 5px; }
.br-8 { border-radius: 8px; }
.br-10 { border-radius: 10px; }
.br-15 { border-radius: 15px; }
.br-20 { border-radius: 20px; }
.br-30 { border-radius: 30px; }
.br-p-50 { border-radius: 50%;}

/* === OVERFLOW === */
.o-h { overflow: hidden; }
.ox-a { overflow-x: auto; }
.ox-h { overflow-x: hidden; }
.oy-a { overflow-y: auto; }
.oy-s { overflow-y: scroll; }
.oy-h { overflow-y: hidden; }

/* === OPACITY === */
.op-0 { opacity: 0; }
.op-6 { opacity: 0.6; }
.op-8 { opacity: 0.8; }
.op-10 { opacity: 1; }

/* === OBJECT FIT === */
.of-co { object-fit: cover; }
.of-ctn { object-fit: contain; }
.objectp-t { object-position: top; }
.objectp-r { object-position: right; }

/* === ASPECT RATIO === */
.ar-10 { aspect-ratio: 1; }
.ar-15 { aspect-ratio: 1.5; }
.ar-17 { aspect-ratio: 1.7; }
.ar-16-9 { aspect-ratio: 16/9; }

/* === WIDTH === */
.w-100 { width: 100vw; }
.w-p-10 { width: 10%; }
.w-p-15 { width: 15%; }
.w-p-30 { width: 30%; }
.w-p-40 { width: 40%; }
.w-p-50 { width: 50%; }
.w-p-60 { width: 60%; }
.w-p-75 { width: 75%; }
.w-p-80 { width: 80%; }
.w-p-100 { width: 100%; }
.w-p-110 { width: 110%; }
.w-p-120 { width: 120%; }

.w-px-120{ width: 120px;}
.w-px-240{ width: 240px;}
.w-px-300{ width: 300px;}

.wmax-px-324{ max-width: 324px;}
.wmax-px-750{ max-width: 750px;}
.wmax-px-1366{ max-width: 1366px;}

/* === HEIGHT === */
.h-100 { height: 100vh; }
.h-p-80 { height: 80%; }
.h-p-100 { height: 100%; }

.h-px-750 { height: 750px; }

/* === POSITION VALUES === */
.t-p-0 { top: 0%; }
.t-p-50 { top: 50%; }
.t-p-75 { top: 75%; }
.t-p-80 { top: 80%; }
.t-p-100 { top: 100%; }

.b-px-8 { bottom: 8px; }
.b-px-16 { bottom: 16px; }

.b-p-0 { bottom: 0%; }
.b-p-75 { bottom: 75%; }
.b-p-80 { bottom: 80%; }
.b-p-100 { bottom: 100%; }

.r-px-8 { right: 8px; }
.r-px-32 { right: 32px; }

.r-p-0 { right: 0%; }
.r-p-100 { right: 100%; }

.l-p-0 { left: 0%; }
.l-p-100 { left: 100%; }

/* === FONT SIZE === */
.fs-8   { font-size: 0.8rem; }
.fs-9   { font-size: 0.9rem; }
.fs-10  { font-size: 1rem; }
.fs-12  { font-size: 1.2rem; }
.fs-14  { font-size: 1.4rem; }
.fs-15  { font-size: 1.5rem; }
.fs-16  { font-size: 1.6rem; }
.fs-18  { font-size: 1.8rem; }
.fs-20  { font-size: 2rem; }
.fs-22  { font-size: 2.2rem; }
.fs-25  { font-size: 2.5rem; }
.fs-26  { font-size: 2.6rem; }
.fs-28  { font-size: 2.8rem; }
.fs-30  { font-size: 3rem; }

/* === FONT WEIGHT === */
.fw-l { font-weight: lighter; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-b { font-weight: bold; }

/* === TEXT === */
.ta-c { text-align: center;}
.ta-e { text-align: end; }
.va-m { vertical-align: middle; }
.tw-n { text-wrap: nowrap; }
.white-s-n { white-space: nowrap; }

.textd-under { text-decoration: underline; }
.fonts-i { font-style: italic; }


/* === ICON SIZES === */
.picto-8   { width: 0.8rem; height: 0.8rem; }
.picto-9   { width: 0.9rem; height: 0.9rem; }
.picto-10  { width: 1rem;   height: 1rem; }
.picto-12  { width: 1.2rem; height: 1.2rem; }
.picto-14  { width: 1.4rem; height: 1.4rem; }
.picto-15  { width: 1.5rem; height: 1.5rem; }
.picto-16  { width: 1.6rem; height: 1.6rem; }
.picto-18  { width: 1.8rem; height: 1.8rem; }
.picto-19  { width: 1.9rem; height: 1.9rem; }
.picto-20  { width: 2rem;   height: 2rem; }
.picto-22  { width: 2.2rem; height: 2.2rem; }
.picto-25  { width: 2.5rem; height: 2.5rem; }
.picto-28  { width: 2.8rem; height: 2.8rem; }
.picto-30  { width: 3rem;   height: 3rem; }
.picto-35  { width: 3.5rem; height: 3.5rem; }
.picto-50  { width: 5rem;   height: 5rem; }
.picto-60  { width: 6rem;   height: 6rem; }
.picto-80  { width: 8rem;   height: 8rem; }


/* === TRANSFORM === */
.transx--50 { translate: -50% 0%; }
.transx--200 { translate: -200% 0%; }
.transy--14 { translate: 0% -14%; }
.transy--100 { translate: 0% -100%; }
.transy-40 { translate: 0% 40%; }

.rotate--2deg { rotate: -2deg; }
.rotate--6deg { rotate: -6deg; }
.rotate-15deg { rotate: 15deg; }

/* === SCALE === */
.scale-08 {scale: 0.8}
.scale-12 {scale: 1.2}

/* === CURSOR === */
.cu-p { cursor: pointer; }
.cu-d { cursor: default; }
.cu-na { cursor: not-allowed; }
.cu-er { cursor: ew-resize; }

/* === USER & POINTER EVENTS === */
.user-s-n { user-select: none; }
.pointer-e-n { pointer-events: none; }
.all-unset { all: unset; }

/* === TRANSITIONS === */
.transition-o-ein-400 { transition: opacity ease-in-out 400ms; }
.transition-stroke-dashoffset-eo-1200 { transition: stroke-dashoffset 1200ms ease-out; }
.transition-stroke-dashoffset-e-2000 { transition: stroke-dashoffset 2000ms ease; }
.transition-stroke-dashoffset-e-4000 { transition: stroke-dashoffset 4000ms ease; }

.transition-o { transition: opacity ;}
.transition-ein { transition: ease-in-out ; }
.transition-400 { transition: 400ms ; }

.transition-o-ein-400 { transition: opacity ease-in-out 400ms; }

.transition-svg1-fill-200-eio > svg:first-of-type > path { transition: fill 200ms ease-in-out; }

.transition-c-200-eio { transition: color 200ms ease-in-out; }

.transition-bgc-200-eio { transition: background-color 200ms ease-in-out; }

.transition-bgc-scale-200-eio { transition: background-color 200ms ease-in-out , scale 200ms ease-in-out; }

.transition-trans-900-eio { transition: translate 900ms ease-in-out; }

/* === HOVER EFFECTS  === */


.hover-c-g400:hover { color: var(--color-gray-400); }

.hover-bgc-pl:hover { background-color: var(--color-primary-light); }

.hover-bgc-p-pl-1000-l-i-p:hover .hover-bgc-p-pl-1000-l-i-c { animation: bgc-p-pl 1s linear infinite alternate; }
@keyframes bgc-p-pl { 0% { background-color: var(--color-primary); } 100% { background-color: var(--color-primary-light); } }

.anim-bgc-p-pl-1000-l-i-c { animation: bgc-p-pl 1s linear infinite alternate; }
.anim-bgc-p-pl-3000-l-i-c { animation: bgc-p-pl 3s linear infinite alternate; }


.hover-svg1-fill-g400:hover > svg:first-of-type { fill: var(--color-gray-400); }

.hover-brillance-500::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 500ms;}
.hover-brillance-500:hover::before { left: 100%; }

.hover-brillance-500-c::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 500ms;}
.hover-brillance-500-p:hover .hover-brillance-500-c::before { left: 100%; }


.hover-svg1-paper-plane-fly-away-1000-l-f:hover > svg:first-of-type { animation: paper-plane-fly-away 1s linear forwards; }


.hover-scale-09:hover { scale: 0.9; }



/* === ANIMATION === */
@keyframes paper-plane-fly-away { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-8px, 8px) scale(0.9); } 50% { transform: translate(-8px, 8px) scale(0.9); } 100% { transform: translate(40px, -40px) rotate(15deg) scale(2); } }

.anim-x--200-0-1000-e-f { animation: x--200-0 1000ms ease forwards; }
@keyframes x--200-0 { from { translate: -200% 0%; } to { translate: 0% 0%; } }

.anim-wave-up-opop-700-e-f { animation: waveUpOpop 700ms ease forwards; }
@keyframes waveUpOpop { 0% { transform: translateY(100%) ; opacity: 0; } 60% { transform: translateY(-10%) ; opacity: 1; } 80% { transform: translateY(5%) ; opacity: 1; } 100% { transform: translateY(0) ; opacity: 1; } }

.anim-fade-out-1800-l-f { animation: fadeOut 1800ms linear forwards;}
.anim-fade-in-400-l-f { animation: fadeIn 400ms linear forwards;}

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.anim-filter-grayscale-0-4000-eio-f { animation: filter-grayscale-0 4s ease-in-out forwards; }
@keyframes filter-grayscale-0 { to { filter: grayscale(0%); } }

.anim-x-0--100-80000-l-i { animation: x-0--100 80s linear infinite; }
@keyframes x-0--100 { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* === ANIMATION DELAY === */
.anim-delay-400 { animation-delay: 400ms; }
.anim-delay-550 { animation-delay: 550ms; }
.anim-delay-700 { animation-delay: 700ms; }
.anim-delay-850 { animation-delay: 850ms; }
.anim-delay-1000 { animation-delay: 1000ms; }
.anim-delay-1500 { animation-delay: 1500ms; }
.anim-delay-1800 { animation-delay: 1800ms; }
.anim-delay-3000 { animation-delay: 3000ms; }

/* === BOX SHADOW === */
.boxsh-0-2-8-v1 { box-shadow: 0 2px 8px var(--color-primary-10); }
.boxsh-3-4-7-v1 { box-shadow: 3px 4px 7px var(--color-primary-10); }
.boxsh-3-8-20-v1 { box-shadow: 3px 8px 20px var(--color-primary-10); }

/* === FILTER === */
.filter-grayscale-100 { filter: grayscale(100%); }
.filter-brightness-70 { filter: brightness(0.7); }

/* === RESPONSIVE DESIGN === */
@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
  
  html{ font-size: 12px; }
  
  .respo-fs-14-1024{ font-size: 1.4rem; }

  .respo-w-p-40-1024{ width: 40%; }
  .respo-ta-c-1024 { text-align: center; }

  .respo-b-px-8{ bottom: 8px; }
  .respo-r-px-8{ right: 8px; }

}

@media screen and (max-width: 768px) {

  .respo-h-auto { height: auto;}

  .respo-w-p-90 { width: 90%; }

  .respo-f-c { flex-direction: column; }
  .respo-f-r { flex-direction: row; }

  .respo-f-g-100 { gap: 100px; }

  .respo-d-n { display: none; }

  .respo-w-px-100{ width: 100px;}
  .respo-w-px-180{ width: 180px;}
  .respo-w-px-200{ width: 200px;}

  .respo-plr-8{ padding-left: 8px; padding-right: 8px; }
  .respo-plr-16{ padding-left: 16px; padding-right: 16px; }
}

@media screen and (max-width: 480px) {

  /* html{ font-size: 10px; } */
  .respo-plr-0-480{ padding-left: 0px; padding-right: 0px; }
  .respo-mb-10-480{ margin-bottom: 10px;}


  .respo-w-px-80-480{ width: 80px;}
}

@media screen and (max-width: 340px) {

  /* html{ font-size: 9px; } */

}

/* === TEST COLORS === */
.test-bgc-g { background-color: green; }
.test-bgc-r { background-color: red; }
.test-bgc-b { background-color: blue; }
.test-bgc-y { background-color: yellow; }
.test-bgc-p { background-color: pink; }
.test-bgc-o { background-color: orange; }

/* ===== UTILITY CLASSES ===== */
.c-w70 { color: var(--color-white-70); }
.c-g100 { color: var(--color-gray-100); }
.c-g200 { color: var(--color-gray-200); }
.c-g300 { color: var(--color-gray-300); }
.c-g400 { color: var(--color-gray-400); }
.c-g500 { color: var(--color-gray-500); }
.c-g600 { color: var(--color-gray-600); }
.c-g700 { color: var(--color-gray-700); }
.c-g800 { color: var(--color-gray-800); }
.c-g900 { color: var(--color-gray-900); }

/* === BACKGROUND COLORS === */
.bgc-p-o5 { background-color: var(--color-primary-5); }
.bgc-p-o10 { background-color: var(--color-primary-10); }
.bgc-p-o25 { background-color: var(--color-primary-25); }
.bgc-p-o50 { background-color: var(--color-primary-50); }

.bgc-w50 { background-color: var(--color-white-50); }
.bgc-w70 { background-color: var(--color-white-70); }

.bgc-b50 { background-color: var(--color-black-50); }
.bgc-b70 { background-color: var(--color-black-70); }

.bgc-g100 { background-color: var(--color-gray-100); }
.bgc-g200 { background-color: var(--color-gray-200); }
.bgc-g300 { background-color: var(--color-gray-300); }
.bgc-g400 { background-color: var(--color-gray-400); }
.bgc-g500 { background-color: var(--color-gray-500); }
.bgc-g600 { background-color: var(--color-gray-600); }
.bgc-g700 { background-color: var(--color-gray-700); }
.bgc-g800 { background-color: var(--color-gray-800); }
.bgc-g900 { background-color: var(--color-gray-900); }

/* === TEXT === */
.wb-ba { word-break: break-all; }
.td-linethrough { text-decoration: line-through; }
.letter-spacing-50 { letter-spacing: 0.5rem; }
.to-el { text-overflow: ellipsis; }
.tt-c { text-transform: capitalize; }

/* === BORDERS === */
.bs-d { border-style: dashed; }
.b-collapse { border-collapse: collapse; }

/* === BOX SHADOW === */
.boxsh-0-4-10--4-v1 { box-shadow: 0 4px 10px -4px var(--color-primary-10); }
.boxsh-6-0-8-v1 { box-shadow: 6px 0 8px var(--color-primary-10); }
.boxsh-5-4-10-v1 { box-shadow: 5px 4px 10px var(--color-primary-10); }

/* === LINKS === */
a {
  text-decoration: none;
  color: inherit;
}

/* === LISTS === */
.list { list-style: none; }

li[data-list="bullet"] {
  list-style-type: disc;
}

ol {
  padding-inline-start: 30px;
  unicode-bidi: isolate;
}

/* === CUSTOM INPUTS === */
.input {
  resize: none;
  outline: none;
}

.input::-webkit-inner-spin-button,
.input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.textarea {
  outline: none;
  resize: none;
  white-space: pre-wrap;
}

/* === CUSTOM INPUT STYLES === */
.c-input-hfp-v1 {
  transition: border-color var(--transition-normal) var(--transition-ease), 
              border-width var(--transition-normal) var(--transition-ease),
              box-shadow var(--transition-normal) var(--transition-ease), 
              color var(--transition-normal) var(--transition-ease);
}
.c-input-hfp-v1:hover {
  border-color: var(--input-border-color-hover);
  box-shadow: var(--input-shadow-hover);
}
.c-input-hfp-v1:focus {
  border: 1px solid var(--input-border-color-focus);
  box-shadow: var(--input-shadow-focus);
}
.c-input-invalid-hfp-v1 {
  border-color: var(--color-error) !important;
  box-shadow: var(--input-shadow-error) !important;
  animation: shake-lr 0.5s;
}

/* === CUSTOM BUTTONS === */
button:disabled {
  background-color: #ccc;
  color: var(--color-primary-light);
  cursor: not-allowed;
  opacity: 0.6;
}
button:disabled:hover {
  background-color: #b8b6b6;
  color: var(--color-primary-light);
  cursor: not-allowed;
  opacity: 0.6;
}

/* === CUSTOM RADIO BUTTONS === */
.radio-13 {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  accent-color: var(--color-orange);
  width: 19px;
  aspect-ratio: 1;
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal) var(--transition-ease), 
              border-width var(--transition-normal) var(--transition-ease),
              box-shadow var(--transition-normal) var(--transition-ease), 
              color var(--transition-normal) var(--transition-ease);
}
.radio-13:hover {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px #d27e1e77;
}
.radio-13:checked {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
.radio-13:checked::after {
  content: "✔";
  color: var(--color-white);
  font-size: 17px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radio2-18 {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-full);
  aspect-ratio: 1;
  width: 26px;
  transition: border-color var(--transition-normal), 
              border-width var(--transition-normal),
              box-shadow var(--transition-normal), 
              color var(--transition-normal);
}
.radio2-18:checked {
  border-color: var(--color-orange);
}
.radio2-18:checked::after {
  content: "";
  background-color: var(--color-orange);
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  scale: 0.8;
  position: absolute;
  top: 0%;
  left: 0%;
}
.radio2-18:hover {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px #d27e1e77;
}

/* === CUSTOM CHECKBOX === */
.checkbox-13 {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  accent-color: var(--color-orange);
  aspect-ratio: 1;
  width: 19px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal), 
              border-width var(--transition-normal),
              box-shadow var(--transition-normal), 
              color var(--transition-normal);
}
.checkbox-13:hover {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 2px #d27e1e77;
}
.checkbox-13:checked {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
.checkbox-13:checked::after {
  content: "✔";
  color: var(--color-white);
  font-size: 17px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* === CUSTOM EYE ANIMATION === */
.eye-icon {
  transition: opacity var(--transition-normal);
  animation: blinkPupil 12s infinite;
  transform-origin: center;
}

@keyframes blinkPupil {
  0%, 33% { transform: scaleY(1); opacity: 1; }
  38% { transform: scaleY(0.1); opacity: 0.3; }
  43%, 76% { transform: scaleY(1); opacity: 1; }
  79% { transform: scaleY(0.1); opacity: 0.3; }
  82% { transform: scaleY(1); opacity: 1; }
  85% { transform: scaleY(0.1); opacity: 0.3; }
  88%, 100% { transform: scaleY(1); opacity: 1; }
}

/* === TRANSITIONS === */
.transition-o-ein-400 { transition: opacity ease-in-out 400ms; }
.transition-stroke-dashoffset-eo-1200 { transition: stroke-dashoffset 1200ms ease-out; }
.transition-stroke-dashoffset-e-2000 { transition: stroke-dashoffset 2000ms ease; }
.transition-stroke-dashoffset-e-4000 { transition: stroke-dashoffset 4000ms ease; }

.transition-h-ein-800 { transition: height var(--transition-slowest); }
.transition-w-eo-200 { transition: width var(--transition-fast); }
.transition-c-e-300 { transition: color var(--transition-normal); }
.transition-c-bgc-e-200 { transition: color var(--transition-fast), background-color var(--transition-fast); }
.transition-fill-e-300 { transition: fill var(--transition-normal); }
.transition-b-e-300 { transition: border var(--transition-normal); }
.transition-o-eio-400 { transition: opacity var(--transition-normal) var(--transition-ease-in-out); }
.transition-transf-eio-300 { transition: transform var(--transition-normal) var(--transition-ease-in-out); }
.transition-transf-eio-600 { transition: transform 600ms var(--transition-ease-in-out); }
.transition-transf-e-400 { transition: transform var(--transition-slow); }
.transition-all-e-300 { transition: all var(--transition-normal) var(--transition-ease); }
.transition-all-e-400 { transition: all var(--transition-slow) var(--transition-ease); }
.transition-all-ein-200-i { transition: all var(--transition-fast) 0s var(--transition-ease-in-out) !important; }
.transition-transf-boxsh-e-200 { transition: transform var(--transition-fast) var(--transition-ease), box-shadow var(--transition-fast) var(--transition-ease); }

.transition-c-svgc-scale-transform-boxsh-ein-500-2all,
.transition-c-svgc-scale-transform-boxsh-ein-500-2all * {
  transition: color var(--transition-slower) 0s var(--transition-ease-in-out), 
              fill var(--transition-fast) 0s var(--transition-ease-in-out),
              scale var(--transition-fast) 0s var(--transition-ease-in-out), 
              transform var(--transition-fast) 0s var(--transition-ease-in-out),
              box-shadow var(--transition-fast) 0s var(--transition-ease-in-out);
}

.transition-c-b-op-ein-500 {
  transition: color var(--transition-slower) 0s var(--transition-ease-in-out), 
              border var(--transition-fast) 0s var(--transition-ease-in-out),
              opacity var(--transition-fast) 0s var(--transition-ease-in-out);
}

/* === FADE ANIMATIONS === */
.fade-in {
  opacity: 1;
}
.fade-out {
  opacity: 0;
}

.fade-in-i {
  opacity: 1 !important;
}
.fade-out-i {
  opacity: 0 !important;
}

.fade-300 {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--animation-duration-fast);
}
.fade-400 {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}
.fade-500 {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--animation-duration-normal);
}
.fade-800 {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--animation-duration-slow);
}
.fade-1100 {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--animation-duration-very-slow);
}

.fade-300.show,
.fade-400.show,
.fade-500.show,
.fade-800.show,
.fade-1100.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* === ROTATION ANIMATIONS === */
.rotate--180-300 {
  transition: transform var(--transition-normal);
  transform-origin: center center;
}
.rotate--180-300-i {
  transition: transform var(--transition-normal) !important;
  transform-origin: center center !important;
}
.rotate--180-300-i.show { transform: rotate(-180deg); }
.rotate--180-300.show { transform: rotate(-180deg); }
.rotate-180-300 {
  transition: transform var(--transition-normal);
  transform-origin: center center;
}
.rotate-180-300.show { transform: rotate(180deg); }

/* === ENTRY ANIMATIONS === */
.upAppear-900 { animation: y--100-0 900ms ease-out forwards; }
.leftAppear-900 { animation: x--100-0 900ms ease-out forwards; }
.anim-lr-marketplace-infinite-15000 { animation: x-lr-marketplace 15s linear alternate infinite; }

.downAppear-500 {
  transition: translate var(--animation-duration-normal) 0s ease;
  translate: 0% 100%;
  pointer-events: none;
}
.downAppear-500.show {
  translate: 0% 0%;
  pointer-events: auto;
}

.anim-fadeinup-appear { animation: o-0-1-y-15-0 0.4s ease forwards; }
.anim-rotate-infinite { animation: d-0-360 1s linear infinite; }
.anim-bounce-down-infinite { animation: y-0-60-0 1.2s ease-in-out infinite; }
.anim-pulse-bg-000015-infinite { animation: pulse-bg-000015 2s ease-out infinite; }

/* === KEYFRAMES === */
@keyframes y--100-0 {
  0% { translate: 0 -100%; }
  100% { translate: 0 0%; }
}

@keyframes x-lr-marketplace {
  0% { translate: 0% 0; }
  100% { transform: translateX(calc(100vw - 18 * 130px)); }
}

@keyframes x--100-0 {
  0% { translate: -100% 0; }
  100% { translate: 0% 0; }
}

@keyframes o-0-1-y-15-0 {
  from { opacity: 0; transform: translateY(15%); }
  to { opacity: 1; transform: translateY(0%); }
}

@keyframes d-0-360 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shake-lr {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

@keyframes x-0-20 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20%); }
}


@keyframes x-0-3 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3%); }
}

@keyframes o-1-0-blur-1-0 {
  0% { opacity: 1; backdrop-filter: blur(1px); }
  100% { opacity: 0; backdrop-filter: blur(0); }
}

@keyframes o-0-1-blur-0-1 {
  0% { opacity: 0; backdrop-filter: blur(0); }
  100% { opacity: 1; backdrop-filter: blur(1px); }
}

@keyframes o-0-1-y--8-0 {
  0% { opacity: 0; transform: translateY(-8%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes o-1-0-y-0--8 {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8%); }
}

@keyframes y-0-60-0 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(60%); }
}

@keyframes w-p-0-100 {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes pulse-bg-000015 {
  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
  100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes particle-traverse {
  from { transform: translate(var(--start-x), var(--start-y)); opacity: 1; }
  to { transform: translate(var(--end-x), var(--end-y)); opacity: 0; }
}

@keyframes particle-curved {
  0% { transform: translate(var(--start-x), var(--start-y)); opacity: 1; }
  50% { transform: translate(var(--mid-x), var(--mid-y)); opacity: 1; }
  100% { transform: translate(var(--end-x), var(--end-y)); opacity: 0; }
}

@keyframes particle-wave {
  0% { transform: translate(var(--start-x), var(--start-y)); opacity: 1; }
  25% { transform: translate(var(--wave1-x), var(--wave1-y)); opacity: 1; }
  75% { transform: translate(var(--wave2-x), var(--wave2-y)); opacity: 1; }
  100% { transform: translate(var(--end-x), var(--end-y)); opacity: 0; }
}

/* === PSEUDO-ELEMENTS === */
.before-white-trans-8::before,
.after-white-trans-8::after {
  height: 100%;
  content: "";
  width: 8%;
  z-index: 2;
  position: absolute;
  background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
}
.after-white-trans-8::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.before-white-trans-8::before {
  left: 0;
  top: 0;
}

/* === HOVER EFFECTS - COLORS === */
.hover-c-p:hover { color: var(--color-primary); }
.hover-c-w:hover { color: var(--color-white); }
.hover-c-s-o:hover { color: #d67c1c; }
.hover-svg-p:hover { fill: var(--color-primary); }
.hover-bgc-p:hover { background-color: var(--color-primary); }
.hover-bgc-s-o:hover { background-color: #d67c1c; }
.hover-bgc-w-o80:hover { background-color: rgba(255, 255, 255, 0.8); }
.hover-b-1-p:hover { border: 1px solid var(--color-primary); }

.hover-c-p-200 { transition: color var(--transition-fast) var(--transition-ease-in-out); }
.hover-c-p-200:hover { color: var(--color-primary); }
.hover-c-s-o-200 { transition: color var(--transition-fast) var(--transition-ease-in-out); }
.hover-c-s-o-200:hover { color: var(--color-orange); }
.hover-c-p-400 { transition: color var(--transition-slow) var(--transition-ease-in-out); }
.hover-c-p-400:hover { color: var(--color-primary); }
.hover-c-w-200 { transition: color var(--transition-fast) var(--transition-ease-in-out); }
.hover-c-w-200:hover { color: var(--color-white); }
.hover-c-w-400 { transition: color var(--transition-slow) var(--transition-ease-in-out); }
.hover-c-w-400:hover { color: var(--color-white); }


/* === HOVER EFFECTS - BACKGROUND COLORS === */
.hover-bgc-gm-200 { transition: background-color var(--transition-fast) var(--transition-ease-in-out); }
.hover-bgc-gm-200:hover { background-color: var(--color-gray-medium); }
.hover-bgc-gm-400 { transition: background-color var(--transition-slow) var(--transition-ease-in-out); }
.hover-bgc-gm-400:hover { background-color: var(--color-gray-medium); }
.hover-bgc-w-400 { transition: background-color var(--transition-slow) var(--transition-ease-in-out); }
.hover-bgc-w-400:hover { background-color: var(--color-white); }
.hover-bgc-p-400 { transition: background-color var(--transition-slow) var(--transition-ease-in-out); }
.hover-bgc-p-400:hover { background-color: var(--color-primary); }



.hover-bgc-tp-200 { transition: background-color var(--transition-fast) var(--transition-ease-in-out); }
.hover-bgc-tp-200:hover { background-color: var(--color-primary-transparent); }
.hover-bgc-s-ol-200 { transition: background-color var(--transition-fast) var(--transition-ease-in-out); }
.hover-bgc-s-ol-200:hover { background-color: #d27e1e85; }
.hover-bgc-valid-rl-200 { transition: background-color var(--transition-fast) var(--transition-ease-in-out); }
.hover-bgc-valid-rl-200:hover { background-color: #bb1919a8; }
.hover-bgc-tw-400 { transition: background-color var(--transition-slow) var(--transition-ease-in-out); }
.hover-bgc-tw-400:hover { background-color: rgba(255, 255, 255, 0.2); }

/* === HOVER EFFECTS - BORDERS === */
.hover-bb-1-p:hover { border-bottom: 1px solid var(--color-primary); }
.hover-b-1-s-o-200 { transition: border var(--transition-fast) var(--transition-ease-in-out); }
.hover-b-1-s-o-200:hover { border: 1px solid var(--color-orange); }
.hover-b-2-pl-200 { transition: border var(--transition-fast) var(--transition-ease-in-out); }
.hover-b-2-pl-200:hover { border: 2px solid var(--color-primary); }
.hover-b-1-p-200 { transition: border var(--transition-fast) var(--transition-ease-in-out); }
.hover-b-1-p-200:hover { border: 1px solid var(--color-primary); }

.hover-bcboxsh-p-300 {
  transition: border-color var(--transition-normal) var(--transition-ease), 
              border-width var(--transition-normal) var(--transition-ease),
              box-shadow var(--transition-normal) var(--transition-ease), 
              color var(--transition-normal) var(--transition-ease);
}
.hover-bcboxsh-p:hover {
  border-color: var(--input-border-color-hover);
  box-shadow: var(--input-shadow-hover);
}
.hover-bcboxsh-p-300:hover {
  border-color: var(--input-border-color-hover);
  box-shadow: var(--input-shadow-hover);
}
.hover-boxsh-2-6-15-v1:hover { box-shadow: 2px 9px 21px #2332501a; }
.hover-boxsh-2-6-18-v1:hover { box-shadow: 2px 9px 26px #23325034; }

.hover-transy--8:hover { transform: translateY(8%); }
.hover-transy--2:hover { transform: translateY(-2%); }

/* === HOVER EFFECTS - SVG === */
.hover-svg-val-r-200 > svg:first-of-type > path { transition: fill var(--transition-fast) var(--transition-ease-in-out); }
.hover-svg-val-r-200:hover > svg:first-of-type { fill: var(--color-error); }

.hover-svgcs-s-o-200 > svg:first-of-type > path { transition: fill var(--transition-fast) var(--transition-ease-in-out), stroke var(--transition-fast) var(--transition-ease-in-out); }
.hover-svgcs-s-o-200:hover > svg:first-of-type { fill: var(--color-orange); stroke: var(--color-orange); }

.hover-svg-p-200 > svg:first-of-type > path { transition: fill var(--transition-fast) var(--transition-ease-in-out); }
.hover-svg-p-200:hover > svg:first-of-type { fill: var(--color-primary); }

.hover-svg-s-o-200 > svg:first-of-type > path { transition: fill var(--transition-fast) var(--transition-ease-in-out); }
.hover-svg-s-o-200:hover > svg:first-of-type { fill: var(--color-orange); }

.hover-svg-w-400 > svg:first-of-type > path { transition: fill var(--transition-slow) var(--transition-ease-in-out); }
.hover-svg-w-400:hover > svg:first-of-type { fill: var(--color-white); }

/* === HOVER EFFECTS - SCALE & TRANSFORM === */
.hover-scale-102-200-e { transition: scale 0.2s ease; }
.hover-scale-102-200-e:hover { scale: 1.02; }

.hover-fw-500 { transition: font-weight 50ms var(--transition-ease-in-out); }
.hover-fw-500:hover { font-weight: var(--fw-medium); }

.hover-bounce-right-svg-1000:hover > svg:first-of-type { animation: x-0-20 1s ease infinite; }

.hover-rotate-infinite:hover > svg:first-of-type {
  animation: d-0-360 4s linear infinite;
  transform-origin: center center;
}

/* === HOVER EFFECTS - UNDERLINES === */
.hover-underline-left-appear-w-300 { position: relative; }
.hover-underline-left-appear-w-300::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 0%;
  height: 10%;
  background-color: var(--color-white);
  transition: width var(--transition-normal) var(--transition-ease);
}
.hover-underline-left-appear-w-300:hover::after { width: 100%; }

/* === HOVER EFFECTS - APPEAR === */
.hover-appear-tto-c-300 {
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-normal) var(--transition-ease), opacity var(--transition-normal) var(--transition-ease);
}

.hover-appear-tt-c-500 {
  transform-origin: top;
  transform: scaleY(0);
  pointer-events: none;
  transition: transform var(--animation-duration-normal);
}

.hover-appear-tt-p:hover .hover-appear-tto-c-300,
.hover-appear-tt-p:hover .hover-appear-tt-c-500 {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

.hover-scale-110-p:hover .hover-scale-110-c { scale: 1.1; }
.hover-transx-30-p:hover .hover-transx-30-c { transform: translatex(2%); }
.hover-bounce-right-3-2000-p:hover .hover-bounce-right-3-2000-c { animation: x-0-3 2s ease infinite; }
.hover-svgc-s-o-p:hover .hover-svgc-s-o-c { fill: var(--color-orange); }
.hover-c-s-o-p:hover .hover-c-s-o-c { color: var(--color-orange); }


.hover-appear-o-c-300 {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal) var(--transition-ease);
}
.hover-appear-p:hover .hover-appear-o-c-300 {
  opacity: 1;
  pointer-events: auto;
}

.hover-scale-18-p:hover .hover-scale-18 { transform: scale(1.8); }

/* === ACTIVE STATES === */
.active-cf-o.active {
  transition: color var(--transition-normal), fill var(--transition-normal);
  color: var(--color-orange);
  fill: var(--color-orange);
}

/* === PICSLOT OVERLAY === */
.picslotoverlay-10 {
  pointer-events: none;
  user-select: none;
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 10% 10%;
}
.picslotoverlay-20 {
  pointer-events: none;
  user-select: none;
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 20% 20%;
}

/* === POPUP OVERLAYS === */
#commandePopupLitigeOverlay,
#adressePopupLitigeOverlay,
#productPopupOverlay {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

#commandePopupLitigeOverlay.active,
#adressePopupLitigeOverlay.active,
#productPopupOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* === VALIDATION ANIMATIONS === */
.checkvalid-tick { animation: checkvalid-tick 0.34s 0.8s cubic-bezier(0.65, 0, 1, 1) forwards; }
.checkvalid-ring { animation: checkvalid-ring 0.38s ease-in forwards; }
.checkvalid-white { animation: checkvalid-white 0.35s 0.35s ease-in forwards; }
.checkvalid-svg { animation: checkvalid-pop 0.32s 1.03s ease-in-out; }

@keyframes checkvalid-ring {
  from { stroke-dashoffset: 353.858; }
  to { stroke-dashoffset: 0; }
}

@keyframes checkvalid-tick {
  from { stroke-dashoffset: 75; }
  to { stroke-dashoffset: 0; }
}

@keyframes checkvalid-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes checkvalid-white {
  from { transform: scale(1); }
  to { transform: scale(0); }
}

/* === LOADING SPINNER === */
.loading-spinner {
  width: var(--icon-sm);
  height: var(--icon-sm);
  border: 2px solid var(--color-white);
  border-top: 2px solid transparent;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: var(--space-5);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === RESPONSIVE DESIGN === */
@media screen and (max-width: 1280px) {
  .respo-fs-40-1280 { font-size: 40px; }

}

@media screen and (max-width: 1024px) {
  .respo-fs-9-1024 { font-size: var(--fs-sm); }
  .respo-f-c-1024 { flex-direction: column; }
  .respo-f-r-1024 { flex-direction: row; }
  .respo-d-n-1024 { display: none !important; }
  .respo-d-b-1024 { display: block !important; }
  .respo-d-f-1024 { display: flex !important; }
  .respo-f-jc-c-1024 { justify-content: center; }
  .respo-f-ai-c-1024 { align-items: center; }
  .respo-mtb-p-22-1024 { margin-top: 22%; margin-bottom: 22%; }
  .respo-mt-200-1024 { margin-top: 200px; }
  .respo-plr-0-1024 { padding-left: 0; padding-right: 0; }
  .respo-plr-px-1-1024 { padding-left: var(--space-1); padding-right: var(--space-1); }
  .respo-plr-px-15-1024 { padding-left: var(--space-15); padding-right: var(--space-15); }
  .respo-w-p-80-1024 { width: 80%; }
  .respo-w-p-40-1024 { width: 40%; }
  .respo-w-p-50-1024 { width: 50%; }
  .respo-w-p-25-1024 { width: 25%; }
  .respo-w-p-100-1024 { width: 100%; }
  .respo-w-px-180-1024 { width: 180px; }
  .respo-w-px-150-1024 { width: 150px; }
  .respo-w-px-200-1024 { width: 200px; }
  .respo-f-1-1024 { flex: 1; }
  .respo-b-n-1024 { border: none; }
  .respo-order-2-1024 { order: 2; }
  .respo-f-g-10-1024 { gap: var(--space-7); }
  .respo-f-g-15-1024 { gap: 15px; }
  .respo-f-g-30-1024 { gap: 30px; }
  .respo-fs-22-1024 { font-size: var(--fs-9xl); }
  .respo-fs-20-1024 { font-size: var(--fs-7xl); }
  .respo-mb-px-15-1024 { margin-bottom: 15px; }
  .respo-ta-c-1024 { text-align: center;}


}

@media screen and (max-width: 768px) {
  .respo-b-n { border: none; }
  .respo-ptb-0 { padding-top: 0; padding-bottom: 0; }
  .respo-p-0 { padding: 0; }
  .respo-f-c { flex-direction: column; }
  .respo-f-r { flex-direction: row; }
  .respo-p-r { position: relative; }
  .respo-f-ai-s { align-items: start; }
  .respo-f-ai-c { align-items: center; }
  .respo-ta-c { text-align: center; }
  .respo-l-0 { left: 0; }
  .respo-f-aijc-c { align-items: center; justify-content: center; }
  .respo-plr-vw-70 { padding-left: 7vw; padding-right: 7vw; }
  .respo-w-p-10 { width: 10%; }
  .respo-w-p-30 { width: 30%; }
  .respo-w-p-80 { width: 80%; }
  .respo-w-p-90 { width: 90%; }
  .respo-w-p-100 { width: 100%; }
  .respo-w-px-80 { width: 80px; }
  .respo-w-px-100 { width: 100px; }
  .respo-w-px-180 { width: 180px; }
  .respo-w-px-200 { width: 200px; }
  .respo-w-px-260 { width: 260px; }
  .respo-h-a { height: auto; }
  .respo-h-p-30 { height: 30%; }
  .respo-h-p-50 { height: 50%; }
  .respo-h-px-7 { height: 7px; }
  .respo-h-px-480 { height: 480px; }
  .respo-h-px-700 { height: 700px; }
  .respo-order-1 { order: 1; }
  .respo-order-2 { order: 2; }
  .respo-order-3 { order: 3; }
  .respo-ar-095 { aspect-ratio: 0.95; }
  .respo-mb-px-30 { margin-bottom: 30px; }
  .respo-plr-0 { padding-left: 0; padding-right: 0; }
  .respo-ptb-px-33 { padding-top: 33px; padding-bottom: 33px; }
  .respo-pt-px-33 { padding-top: 33px; }
  .respo-mt-px-33 { margin-top: 33px; }
  .respo-plr-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
  .respo-plr-px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
  .respo-pb-px-10 { padding-bottom: var(--space-15); }
  .respo-fs-20 { font-size: var(--fs-7xl); }
  .respo-fs-18 { font-size: var(--fs-5xl); }
  .respo-fs-12 { font-size: var(--fs-lg); }
  .respo-f-g-5 { gap: var(--space-5); }
  .respo-f-g-8 { gap: 8px; }
  .respo-f-g-10 { gap: var(--space-10); }
  .respo-f-g-15 { gap: var(--space-15); }
  .respo-f-g-20 { gap: var(--space-20); }
  .respo-f-g-30 { gap: 30px; }
  .respo-f-g-50 { gap: var(--space-50); }
  .respo-mb-px-15 { margin-bottom: 15px; }
  .respo-oy-unset { overflow-y: unset; }
  .respo-d-b-i { display: block !important; }
  .respo-d-f-i { display: flex !important; }
  .respo-picto-80 { width: var(--icon-6xl); }
  .respo-transxy-px-0--17 { translate: 0px -17px; }
  
  ::placeholder {
    font-size: var(--fs-sm);
  }
}

@media screen and (max-width: 480px) {
  .respo-f-c-480 { flex-direction: column; }
  .respo-f-ai-c-480 { align-items: center; }
  .respo-f-jc-c-480 { justify-content: center; }
  .respo-f-aijc-c-480 { align-items: center; justify-content: center; }
  .respo-ta-c-480 { text-align: center; vertical-align: center; }
  .respo-fs-18-480 { font-size: var(--fs-5xl); }
  .respo-d-n-480 { display: none; }
  .respo-plr-px-5-480 { padding-left: var(--space-5); padding-right: var(--space-5); }
  .respo-ptb-px-5-480 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .respo-fs-vw-30-480 { font-size: 3vw; }
  .respo-w-px-18-480 { width: 18px; }
  .respo-w-px-80-480 { width: 80px; }
  .respo-fs-13-480 { font-size: 13px; }
  .respo-picto-22-480 { width: var(--icon-3xl); }
  .respo-t-p-25-480 { top: 25%; }
  
  ::placeholder {
    color: var(--placeholder-color);
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    font-family: var(--font-secondary);
  }
}

@media screen and (max-width: 340px) {
  .respo-f-g-50-340 { gap: var(--space-50); }
  .respo-t-p-25-340 { top: 25%; }
  .respo-fs-14-340 { font-size: var(--fs-2xl); }
  .respo-fs-vw-30-340 { font-size: 3vw; }
}

/* === ANIMATIONS === */
.anim-pulsate-20000-eio-i { animation: pulsate 20s ease-in-out infinite; }

@keyframes pulsate {
    0%, 100% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
}

.anim-svg-fill-v1-50000-l-i { animation: fillAnimation 50s linear infinite; }

@keyframes fillAnimation {
    0%   { fill: #fea839; }
    24%  { fill: #374a7c; }
    50%  { fill: #fbc94d; }
    73%  { fill: #3c78c3; }
    100% { fill: #fea839; }
}

.background-point{ 
  background: repeating-radial-gradient(circle, #021557 0, #021557 3px, transparent 4px, transparent 30px);
  background-size: 22px 23px;
  background-position: center;
}

.divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #09212b;
    left: 50%;
    transform: translateX(-50%);
}

#afterBox{
    clip-path: inset(0 0 0 50%);
}

/* added */
button{
  font-family: var(--font-primary);
}
button:focus {
  outline: none; /* retire l'ancien style de certains navigateurs */
}

button:focus-visible {
  outline: none; /* cache le contour uniquement quand focus via la souris */
}