:root {

  --orange: #ff4b27;
  --orange-dark: #dc391b;

  --black: #101010;
  --dark: #242424;

  --blue: #24b5db;
  --blue-light: #dff7fc;

  --sand: #f4dfb0;
  --sand-light: #fffaf0;

  --grey: #6e7378;
  --grey-light: #eff0f1;

  --white: #ffffff;

  --radius: 18px;

  --shadow:
    0 8px 22px rgba(0, 0, 0, .08);
}



/* ========================================
   RESET
======================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background:
    var(--sand-light);

  color:
    var(--black);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}


a {
  color: inherit;
  text-decoration: none;
}


img {
  max-width: 100%;
  display: block;
}



/* ========================================
   HEADER FIXE
======================================== */

#siteHeader {

  position: sticky;

  top: 0;

  z-index: 9999;
}


.site-header {

  background:
    rgba(255, 255, 255, .97);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-bottom:
    3px solid var(--orange);

  box-shadow:
    0 3px 14px rgba(0, 0, 0, .06);
}


.header-top {

  height: 58px;

  padding:
    5px 12px;

  display: grid;

  grid-template-columns:
    48px 1fr 48px;

  align-items: center;

  gap: 8px;
}


.header-logo {

  width: 46px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;
}


.header-logo img {

  width: 100%;
  height: 100%;

  object-fit: contain;
}


.header-logo-right {
  justify-self: end;
}


.header-event {

  text-align: center;

  line-height: 1;
}


.header-event span {

  display: block;

  margin-bottom:
    4px;

  color:
    var(--orange);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1.3px;
}


.header-event strong {

  display: block;

  font-size:
    17px;

  font-weight:
    950;
}



/* ========================================
   NAV
======================================== */

.main-nav {

  height:
    45px;

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  background:
    white;

  border-top:
    1px solid #eeeeee;
}


.main-nav a {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    1px;

  color:
    #666;

  font-size:
    8px;

  font-weight:
    800;
}


.nav-icon {

  font-size:
    16px;

  line-height:
    1;
}


.nav-label {

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.main-nav a.active {

  color:
    var(--orange);
}



/* ========================================
   CONTAINER
======================================== */

.container {

  width:
    calc(100% - 16px);

  max-width:
    600px;

  margin:
    0 auto;

  padding:
    8px 0 18px;
}



/* ========================================
   HERO COMPACT
======================================== */

.home-hero {

  overflow:
    hidden;

  padding:
    18px;

  border-radius:
    var(--radius);

  background:

    radial-gradient(
      circle at 88% 10%,
      rgba(255, 255, 255, .65),
      transparent 25%
    ),

    linear-gradient(
      180deg,
      #42c0e2 0%,
      #cceff8 47%,
      #f4dcaa 48%,
      #eccb83 100%
    );

  box-shadow:
    var(--shadow);
}


.hero-pills {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin-bottom:
    15px;
}


.hero-pills span {

  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.91);

  font-size:
    9px;

  font-weight:
    850;
}


.hero-label {

  margin-bottom:
    6px;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    1.2px;

  text-transform:
    uppercase;
}


.home-hero h1 {

  margin:
    0;

  font-size:
    clamp(38px, 12vw, 58px);

  line-height:
    .84;

  font-weight:
    1000;

  letter-spacing:
    -2.5px;

  text-transform:
    uppercase;
}


.home-hero h1 span {

  display:
    block;

  margin-top:
    7px;

  color:
    var(--orange);

  font-size:
    .72em;

  line-height:
    .9;

  font-style:
    italic;

  letter-spacing:
    -1.5px;

  text-transform:
    none;
}


.hero-message {

  margin-top:
    16px;

  font-size:
    17px;

  line-height:
    1.15;

  font-weight:
    800;
}


.hero-message strong {

  color:
    var(--orange);
}


.hero-actions {

  margin-top:
    16px;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    7px;
}


.btn {

  min-width:
    0;

  min-height:
    48px;

  padding:
    11px 8px;

  border-radius:
    13px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  font-size:
    14px;

  font-weight:
    900;
}


.btn-orange {

  background:
    var(--orange);

  color:
    white;
}


.btn-black {

  background:
    var(--black);

  color:
    white;
}



/* ========================================
   INFOS ESSENTIELLES
======================================== */

.essential-grid {

  margin-top:
    8px;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    7px;
}


.essential-card {

  min-width:
    0;

  min-height:
    66px;

  padding:
    10px;

  border-radius:
    14px;

  background:
    white;

  box-shadow:
    var(--shadow);

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.essential-icon {

  flex:
    0 0 auto;

  font-size:
    22px;
}


.essential-card div {

  min-width:
    0;
}


.essential-card small {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--orange);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .8px;

  text-transform:
    uppercase;
}


.essential-card strong {

  display:
    block;

  font-size:
    12px;

  line-height:
    1.15;
}



/* ========================================
   DASHBOARD
======================================== */

.dashboard {

  margin-top:
    8px;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    7px;
}


.dashboard-card {

  min-width:
    0;

  min-height:
    74px;

  padding:
    11px;

  border-radius:
    14px;

  background:
    var(--grey-light);

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  box-shadow:
    0 3px 12px rgba(0,0,0,.04);
}


.dashboard-live {

  background:
    var(--blue-light);
}


.dashboard-icon {

  width:
    39px;

  height:
    39px;

  flex:
    0 0 39px;

  border-radius:
    11px;

  background:
    white;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    19px;
}


.dashboard-card div {

  min-width:
    0;
}


.dashboard-card small {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--orange);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;
}


.dashboard-card strong {

  display:
    block;

  font-size:
    13px;

  line-height:
    1.1;
}



/* ========================================
   GRILLADES
======================================== */

.food-strip {

  margin-top:
    8px;

  min-height:
    66px;

  padding:
    11px 14px;

  border-radius:
    14px;

  background:

    linear-gradient(
      135deg,
      #f5dfae,
      #fff0cc
    );

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  box-shadow:
    var(--shadow);
}


.food-strip > span {

  font-size:
    28px;
}


.food-strip strong {

  display:
    block;

  margin-bottom:
    2px;

  font-size:
    14px;
}


.food-strip small {

  display:
    block;

  color:
    #665640;

  font-size:
    10px;

  line-height:
    1.25;
}



/* ========================================
   TOUCH
======================================== */

a {

  -webkit-tap-highlight-color:
    transparent;
}


.btn:active,
.dashboard-card:active,
.main-nav a:active {

  transform:
    scale(.97);
}



/* ========================================
   PETITS TELEPHONES
======================================== */

@media (max-width: 350px) {

  .home-hero h1 {
    font-size:
      36px;
  }


  .hero-actions {

    grid-template-columns:
      1fr;
  }


  .essential-grid {

    grid-template-columns:
      1fr;
  }

}



/* ========================================
   TABLETTE / DESKTOP
======================================== */

@media (min-width: 701px) {

  #siteHeader {

    width:
      100%;
  }


  .header-top,
  .main-nav {

    max-width:
      600px;

    margin:
      0 auto;
  }


  .container {

    padding-top:
      12px;
  }

}