/* ============================================
   UTILITIES CSS — AVDA
   Classes utilitaires globales
   Dernière mise à jour : Juillet 2026
   ============================================ */

/* ==========================================
   CONTAINERS
   ========================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.container-wide {
  max-width: var(--container-wide);
}

.container-fluid {
  width: 100%;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* ==========================================
   SECTIONS
   ========================================== */
.section {
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
}

.section-sm {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.section-lg {
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
}

.section-top {
  padding-top: var(--spacing-4xl);
}

.section-bottom {
  padding-bottom: var(--spacing-4xl);
}

/* ==========================================
   DISPLAY
   ========================================== */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* ==========================================
   FLEXBOX — Direction
   ========================================== */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* ==========================================
   FLEXBOX — Wrap
   ========================================== */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* ==========================================
   FLEXBOX — Justify Content
   ========================================== */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* ==========================================
   FLEXBOX — Align Items
   ========================================== */
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* ==========================================
   FLEXBOX — Align Self
   ========================================== */
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-stretch { align-self: stretch; }

/* ==========================================
   FLEXBOX — Align Content
   ========================================== */
.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-center { align-content: center; }
.align-content-between { align-content: space-between; }
.align-content-around { align-content: space-around; }

/* ==========================================
   FLEX — Grow / Shrink / Basis
   ========================================== */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* ==========================================
   GRID — Templates
   ========================================== */
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ==========================================
   GRID — Gap
   ========================================== */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }

/* ==========================================
   GRID — Span
   ========================================== */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-full { grid-column: 1 / -1; }

/* ==========================================
   TEXT — Alignment
   ========================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ==========================================
   TEXT — Color
   ========================================== */
.text-primary { color: var(--brand-primary); }
.text-accent { color: var(--brand-accent); }
.text-dark { color: var(--text-dark); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-white { color: var(--text-white); }
.text-education { color: var(--theme-education); }
.text-health { color: var(--theme-health); }
.text-agriculture { color: var(--theme-agriculture); }

/* ==========================================
   TEXT — Font Weight
   ========================================== */
.fw-light { font-weight: var(--fw-light); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }

/* ==========================================
   TEXT — Font Size
   ========================================== */
.fs-display { font-size: var(--fs-display); }
.fs-h1 { font-size: var(--fs-h1); }
.fs-h2 { font-size: var(--fs-h2); }
.fs-h3 { font-size: var(--fs-h3); }
.fs-h4 { font-size: var(--fs-h4); }
.fs-body { font-size: var(--fs-body); }
.fs-body-sm { font-size: var(--fs-body-sm); }
.fs-body-lg { font-size: var(--fs-body-lg); }
.fs-small { font-size: var(--fs-small); }
.fs-xs { font-size: var(--fs-xs); }

/* ==========================================
   TEXT — Transform
   ========================================== */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* ==========================================
   TEXT — Decoration
   ========================================== */
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-decoration { text-decoration: none; }

/* ==========================================
   TEXT — Line Height
   ========================================== */
.lh-1 { line-height: 1; }
.lh-sm { line-height: 1.25; }
.lh-md { line-height: 1.5; }
.lh-lg { line-height: 1.75; }
.lh-xl { line-height: 2; }

/* ==========================================
   TEXT — Letter Spacing
   ========================================== */
.ls-tight { letter-spacing: -0.02em; }
.ls-normal { letter-spacing: 0; }
.ls-wide { letter-spacing: 0.05em; }
.ls-wider { letter-spacing: 0.1em; }

/* ==========================================
   TEXT — Truncation
   ========================================== */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================
   BACKGROUNDS
   ========================================== */
.bg-primary { background-color: var(--brand-primary); }
.bg-accent { background-color: var(--brand-accent); }
.bg-main { background-color: var(--bg-main); }
.bg-surface { background-color: var(--bg-surface); }
.bg-dark { background-color: var(--bg-dark); }
.bg-white { background-color: var(--bg-main); }
.bg-education { background-color: var(--theme-education); }
.bg-health { background-color: var(--theme-health); }
.bg-agriculture { background-color: var(--theme-agriculture); }
.bg-education-light { background-color: var(--theme-education-light); }
.bg-health-light { background-color: var(--theme-health-light); }
.bg-agriculture-light { background-color: var(--theme-agriculture-light); }

/* ==========================================
   MARGINS — Top
   ========================================== */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }
.mt-4xl { margin-top: var(--spacing-4xl); }
.mt-auto { margin-top: auto; }

/* ==========================================
   MARGINS — Bottom
   ========================================== */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }
.mb-4xl { margin-bottom: var(--spacing-4xl); }
.mb-auto { margin-bottom: auto; }

/* ==========================================
   MARGINS — Left
   ========================================== */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }
.ml-auto { margin-left: auto; }

/* ==========================================
   MARGINS — Right
   ========================================== */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }
.mr-auto { margin-right: auto; }

/* ==========================================
   MARGINS — X (Left + Right)
   ========================================== */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================
   MARGINS — Y (Top + Bottom)
   ========================================== */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.my-2xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }
.my-3xl { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); }
.my-4xl { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-4xl); }

/* ==========================================
   PADDINGS — Top
   ========================================== */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }
.pt-3xl { padding-top: var(--spacing-3xl); }
.pt-4xl { padding-top: var(--spacing-4xl); }

/* ==========================================
   PADDINGS — Bottom
   ========================================== */
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }
.pb-3xl { padding-bottom: var(--spacing-3xl); }
.pb-4xl { padding-bottom: var(--spacing-4xl); }

/* ==========================================
   PADDINGS — Left
   ========================================== */
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }
.pl-2xl { padding-left: var(--spacing-2xl); }

/* ==========================================
   PADDINGS — Right
   ========================================== */
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }
.pr-2xl { padding-right: var(--spacing-2xl); }

/* ==========================================
   PADDINGS — X (Left + Right)
   ========================================== */
.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }

/* ==========================================
   PADDINGS — Y (Top + Bottom)
   ========================================== */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }

/* ==========================================
   PADDINGS — All
   ========================================== */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

/* ==========================================
   WIDTH
   ========================================== */
.w-auto { width: auto; }
.w-25 { width: 25%; }
.w-33 { width: 33.333%; }
.w-50 { width: 50%; }
.w-66 { width: 66.666%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-screen { width: 100vw; }

/* ==========================================
   HEIGHT
   ========================================== */
.h-auto { height: auto; }
.h-100 { height: 100%; }
.h-screen { height: 100vh; }

/* ==========================================
   BORDERS
   ========================================== */
.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-left { border-left: 1px solid var(--border-color); }
.border-right { border-right: 1px solid var(--border-color); }
.border-0 { border: none; }
.border-primary { border-color: var(--brand-primary); }
.border-accent { border-color: var(--brand-accent); }

/* ==========================================
   RADIUS
   ========================================== */
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-2xl { border-radius: var(--radius-2xl); }
.radius-full { border-radius: var(--radius-full); }

/* ==========================================
   SHADOWS
   ========================================== */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-accent { box-shadow: var(--shadow-accent); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-none { box-shadow: none; }

/* ==========================================
   OVERFLOW
   ========================================== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ==========================================
   POSITION
   ========================================== */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }
.position-static { position: static; }

/* ==========================================
   Z-INDEX
   ========================================== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ==========================================
   OBJECT FIT
   ========================================== */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* ==========================================
   OBJECT POSITION
   ========================================== */
.object-center { object-position: center; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left { object-position: left; }
.object-right { object-position: right; }

/* ==========================================
   VISIBILITY
   ========================================== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ==========================================
   OPACITY
   ========================================== */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ==========================================
   POINTER EVENTS
   ========================================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ==========================================
   CURSOR
   ========================================== */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ==========================================
   WHITE SPACE
   ========================================== */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ==========================================
   WORD BREAK
   ========================================== */
.break-normal { word-break: normal; overflow-wrap: normal; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }

/* ==========================================
   LIST STYLE
   ========================================== */
.list-none { list-style: none; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }
.list-inside { list-style-position: inside; }
.list-outside { list-style-position: outside; }

/* ==========================================
   RESPONSIVE — Mobile (max-width: 767px)
   ========================================== */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
  .show-mobile-grid { display: grid !important; }
  
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 { grid-template-columns: 1fr; }
  
  .grid-mobile-2 { grid-template-columns: repeat(2, 1fr); }
  
  .text-center-mobile { text-align: center; }
  .text-left-mobile { text-align: left; }
  
  .w-100-mobile { width: 100%; }
  
  .section { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
  .section-sm { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
  .section-lg { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
}

/* ==========================================
   RESPONSIVE — Tablet (768px - 1023px)
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
  .show-tablet-flex { display: flex !important; }
  .show-tablet-grid { display: grid !important; }
  
  .grid-tablet-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-tablet-3 { grid-template-columns: repeat(3, 1fr); }
  
  .text-center-tablet { text-align: center; }
}

/* ==========================================
   RESPONSIVE — Desktop (min-width: 1024px)
   ========================================== */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
  .show-desktop-flex { display: flex !important; }
  .show-desktop-grid { display: grid !important; }
}

/* ==========================================
   RESPONSIVE — Large Desktop (min-width: 1440px)
   ========================================== */
@media (min-width: 1440px) {
  .container { max-width: var(--container-wide); }
}

/* ==========================================
   ACCESSIBILITY — Screen Reader Only
   ========================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================
   SKIP TO MAIN CONTENT
   ========================================== */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: var(--spacing-md);
  z-index: var(--z-tooltip);
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--brand-primary);
  color: var(--text-white);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}

.skip-to-main:focus {
  top: var(--spacing-md);
}

/* ==========================================
   NO SCROLL (pour modale / menu mobile ouvert)
   ========================================== */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}