/* =========================================================
   GRENIKA CONFIGURATEUR
   PREMIUM SAAS AGRITECH V2
   ========================================================= */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {

  --vert-grenika: #1C3027;
  --vert-soft: #2E4C3E;
  --vert-light: #3D7A54;

  --grenika-gold: #D4AF37;
  --grenika-litegold: #E8C963;

  --white: #FFFFFF;
  --off-white: #F6F7F5;

  --text-main: #18211D;
  --text-soft: #667171;

  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.35);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm:
    0 4px 12px rgba(0,0,0,.06);

  --shadow-md:
    0 10px 30px rgba(0,0,0,.08);

  --shadow-lg:
    0 25px 60px rgba(0,0,0,.12);

  --transition:
    280ms cubic-bezier(.22,.61,.36,1);

  --font-main:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;

  --font-mono:
    ui-monospace,
    "Cascadia Code",
    monospace;
}

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

*,
*::before,
*::after {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(212,175,55,.08),
      transparent 40%
    ),
    var(--off-white);

  font-family: var(--font-main);

  color: var(--text-main);

  padding-bottom: 120px;

  overflow-x: hidden;

}

/* =========================================================
   ACCESSIBILITE
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {

  outline: 3px solid var(--grenika-gold);

  outline-offset: 4px;

}

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

.config-header {

  background:
    linear-gradient(
      135deg,
      #1C3027,
      #274235
    );

  padding: 40px 20px;

  text-align: center;

  color: white;

}
.start-program {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-bottom: 22px;

}

.start-badge {

  width: 72px;

  height: 72px;

  object-fit: contain;

  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.15));

}

.header-badge {

  display: inline-block;

  padding: 8px 14px;

  border-radius: 999px;

  background:
    rgba(212,175,55,.15);

  color:
    var(--grenika-gold);

  font-size: .7rem;

  font-weight: 800;

  letter-spacing: 1px;

  margin-bottom: 18px;

}

.header-logo {

  width: 220px;

  max-width: 90%;

  margin-bottom: 20px;

}

.header-eyebrow {

  color:
    var(--grenika-gold);

  font-size: .75rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 10px;

}

.header-subtitle {

  max-width: 560px;

  margin: 0 auto;

  opacity: .82;

  line-height: 1.7;

  font-size: .95rem;

}

.header-zones {

  margin-top: 22px;

  font-size: .8rem;

  font-weight: 700;

  color:
    rgba(255,255,255,.75);

}

.aide-link {

  display: inline-block;

  color: var(--grenika-gold);

  text-decoration: none;

  font-family: var(--font-mono);

  font-size: .72rem;

  letter-spacing: 1px;

  margin-top: 10px;

}

.aide-link:hover {

  opacity: .8;

}

.config-title {

  margin-top: 18px;

  font-size: 1.25rem;

  font-weight: 800;

  letter-spacing: .5px;

}

/* =========================================================
   CARD PRINCIPALE
   ========================================================= */

.arche-config {

  width: 92%;

  max-width: 980px;

  margin: -30px auto 30px;

  padding: 24px;

  border-radius: var(--radius-lg);

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

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

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

}

.config-grid {

  display: flex;

  flex-direction: column;

  gap: 32px;

}

@media (min-width: 768px) {

  .config-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

  }

}

/* =========================================================
   TITRES
   ========================================================= */

.category-title {

  font-size: .95rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 18px;

  padding-bottom: 8px;

  border-bottom: 2px solid var(--grenika-gold);

}

.type-label {

  display: block;

  margin: 18px 0 12px;

  font-family: var(--font-mono);

  font-size: .72rem;

  font-weight: 700;

  color: var(--grenika-gold);

}

/* =========================================================
   CULTURES
   ========================================================= */

.culture-row {

  display: flex;

  align-items: center;

  padding: 14px 10px;

  border-radius: 16px;

  cursor: pointer;

  transition: var(--transition);

  border: 1px solid transparent;

}

.culture-row:hover {

  background: rgba(212,175,55,.08);

  transform: translateY(-2px);

}

.culture-row:has(input:checked) {

  background: rgba(212,175,55,.12);

  border-color: rgba(212,175,55,.35);

}

.culture-row input {

  position: absolute;

  opacity: 0;

}

/* =========================================================
   CHECKBOX
   ========================================================= */

.checkmark {

  width: 22px;

  height: 22px;

  border-radius: 6px;

  border: 2px solid var(--vert-grenika);

  margin-right: 14px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}

.culture-row input:checked ~ .checkmark {

  background: var(--grenika-gold);

  border-color: var(--grenika-gold);

}

.culture-row input:checked ~ .checkmark::after {

  content: "✓";

  color: white;

  font-size: 14px;

}

/* =========================================================
   MINIATURES
   ========================================================= */

.culture-thumb {

  width: 54px;

  height: 54px;

  border-radius: 14px;

  overflow: hidden;

  flex-shrink: 0;

  margin-right: 14px;

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

  transition: var(--transition);

}

.culture-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .35s ease;

}

.culture-row:hover .culture-thumb {

  box-shadow:

    0 8px 18px rgba(212,175,55,.22);

}

.culture-row:hover .culture-thumb img {

  transform: scale(1.12);

}

/* =========================================================
   TEXTES
   ========================================================= */

.plant-name {

  display: block;

  font-weight: 700;

  font-size: .92rem;

  transition: var(--transition);

}

.culture-row:hover .plant-name {

  color: var(--vert-light);

  transform: translateX(4px);

}

.plant-meta {

  font-size: .7rem;

  color: var(--text-soft);

  font-family: var(--font-mono);

}

/* =========================================================
   FOOTER PWA
   ========================================================= */

.pwa-footer {

  position: fixed;

  left: 50%;

  bottom: 20px;

  transform: translateX(-50%);

  width: 92%;

  max-width: 430px;

  padding: 12px 18px;

  border-radius: 999px;

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

  border: 1px solid rgba(255,255,255,.5);

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

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

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 999;

}

.count-label {

  font-size: .75rem;

  font-family: var(--font-mono);

}

.count-val {

  color: var(--grenika-gold);

  font-size: 1.6rem;

  font-weight: 800;

}

/* =========================================================
   CTA FINAL
   ========================================================= */

.btn-final {

  border: none;

  background: var(--grenika-gold);

  color: var(--vert-grenika);

  padding: 13px 26px;

  border-radius: var(--radius-pill);

  font-weight: 800;

  text-transform: uppercase;

  cursor: pointer;

  opacity: .35;

  transition: var(--transition);

}

.btn-final:not(:disabled) {

  opacity: 1;

}

.btn-final:not(:disabled):hover {

  transform: translateY(-2px);

  box-shadow:

    0 10px 25px rgba(212,175,55,.3);

}

/* =========================================================
   BOUTON RETOUR HAUT
   ========================================================= */

#backToTop {

  position: fixed;

  right: 24px;

  bottom: 105px;

  width: 50px;

  height: 50px;

  border: none;

  border-radius: 50%;

  background: var(--grenika-gold);

  color: var(--vert-grenika);

  font-size: 22px;

  font-weight: 800;

  cursor: pointer;

  z-index: 999;

  opacity: 0;

  pointer-events: none;

  transition: var(--transition);

}

#backToTop.show {

  opacity: 1;

  pointer-events: auto;

}

#backToTop:hover {

  transform: translateY(-3px);

}

/* =========================================================
   SCROLLBAR PREMIUM
   ========================================================= */

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-thumb {

  background: var(--grenika-gold);

  border-radius: 999px;

}

/* =========================================================
   DARK MODE OLED
   ========================================================= */

@media (prefers-color-scheme: dark) {

  :root {

    --off-white: #050505;
    --white: #111111;

    --text-main: #F5F5F5;
    --text-soft: #AAB3AE;

    --glass-bg:
      rgba(18,18,18,.75);

    --glass-border:
      rgba(255,255,255,.08);

  }

  body {

    background: #000;

  }

  .culture-row {

    border-color:
      rgba(255,255,255,.03);

  }

}