/* Fallah — habillage coloré (icônes en relief, cartes teintées, images des cultures).
   Chargé après les autres feuilles de style : pour revenir à l'ancien style, il suffit de retirer ce fichier.
   Le logo vert « فلاح FALLAH » (écran d'ouverture et en-tête) n'est pas modifié ici. */

/* ---------- Couleurs par outil ---------- */
.tool-card[data-module="catalogue"], #catalogue, #product-detail { --tint: #ffe8cc; --edge: #f6c086; --glow: rgba(239, 128, 20, .18); }
.tool-card[data-module="calc"], #calc { --tint: #d9f4e0; --edge: #8fd5a2; --glow: rgba(22, 150, 70, .16); }
.tool-card[data-module="engrais"], #engrais { --tint: #fff0bd; --edge: #efcb5c; --glow: rgba(220, 165, 0, .18); }
.tool-card[data-module="cultures"], #cultures { --tint: #ffe0e0; --edge: #f2a0a0; --glow: rgba(220, 60, 60, .15); }
.tool-card[data-module="weather"], #weather { --tint: #dbeeff; --edge: #8fc6f1; --glow: rgba(30, 130, 220, .16); }
.tool-card[data-module="course"], #course { --tint: #ebe0ff; --edge: #c0a3f0; --glow: rgba(120, 70, 210, .16); }
.tool-card[data-module="community"] { --tint: #ddf5d3; --edge: #9cd688; --glow: rgba(60, 160, 40, .16); }
.tool-card[data-module="sites"], #sites { --tint: #d6f1ff; --edge: #87cdee; --glow: rgba(20, 140, 200, .16); }
#notebook { --tint: #ffe6c7; --edge: #f5b878; --glow: rgba(240, 110, 0, .16); }

/* ---------- Accueil ---------- */
.dashboard {
  background:
    radial-gradient(110% 38% at 100% 0%, rgba(196, 230, 160, .55), transparent 70%),
    radial-gradient(90% 30% at 0% 60%, rgba(255, 220, 160, .35), transparent 70%),
    radial-gradient(100% 30% at 100% 100%, rgba(190, 228, 160, .45), transparent 70%),
    var(--paper);
}
.tool-card:not(.notebook-primary) {
  border: 2px solid var(--edge, #e7dcc6);
  background: linear-gradient(160deg, #fffdf8 0%, #fffaf2 35%, var(--tint, #fff8ea) 100%);
  box-shadow: 0 12px 26px var(--glow, rgba(70, 48, 15, .10)), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tool-card:not(.notebook-primary)::after { width: 5.4rem; height: 5.4rem; right: -1.8rem; top: -1.8rem; background: var(--edge, #e7dcc6); opacity: .32; }
.tool-card:not(.notebook-primary) strong { font-size: 1.06rem; font-weight: 900; letter-spacing: -.01em; }
.tool-card:not(.notebook-primary) small { color: #6f6455; }
.tool-icon.tool-icon-3d { width: 4.1rem; height: 4.1rem; padding: 0; border-radius: 19px; background: none; box-shadow: 0 8px 16px var(--glow, rgba(0, 0, 0, .12)); overflow: hidden; }
.tool-icon-3d img { display: block; width: 100%; height: 100%; object-fit: cover; }
.notebook-primary .tool-icon.tool-icon-3d { width: 3.9rem; height: 3.9rem; border-radius: 17px; box-shadow: 0 8px 18px rgba(150, 60, 0, .35); }
@media (max-width: 420px) {
  .tool-icon.tool-icon-3d { width: 3.6rem; height: 3.6rem; border-radius: 16px; }
  .notebook-primary .tool-icon.tool-icon-3d { width: 3.5rem; height: 3.5rem; }
  .tool-card:not(.notebook-primary) strong { font-size: 1rem; }
}

/* Barre du bas : icônes en couleur, le bouton orange « فلاح » ne change pas. */
.bottom-nav svg.nav-color { width: 27px; height: 27px; stroke: none; filter: drop-shadow(0 2px 2px rgba(80, 50, 10, .18)); }
.bottom-nav button:not(.active):not(.nav-scan) svg.nav-color { opacity: .92; }
.bottom-nav .active span { color: var(--brand); }
.bottom-nav button span { white-space: nowrap; }
@media (max-width: 400px) { .bottom-nav button { font-size: .66rem; } }

/* Accès rapide « Scanner » : même relief que les autres icônes. */
.scan-card .scan-icon { background: linear-gradient(150deg, #46c46f 0%, #12904a 55%, #0b6e37 100%); box-shadow: 0 8px 16px rgba(10, 110, 55, .28), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 60, 25, .25); }
.scan-card { border-color: #8fd5a2; background: linear-gradient(160deg, #fffdf8 0%, #f6fbf1 45%, #dff3e2 100%); box-shadow: 0 12px 26px rgba(22, 150, 70, .14); }

/* ---------- En-têtes des écrans : l'icône de l'outil à côté du titre ---------- */
#calc .catalogue-header, #weather .catalogue-header, #cultures .catalogue-header, #sites .catalogue-header,
#engrais .catalogue-header, #catalogue .catalogue-header, #notebook .notebook-header, #course .product-nav {
  background: linear-gradient(180deg, rgba(255, 252, 246, .97), color-mix(in srgb, var(--tint, #fff8ea) 55%, #fffaf2 45%));
  border-bottom: 2px solid var(--edge, var(--line));
}
#calc .catalogue-header > div, #weather .catalogue-header > div, #cultures .catalogue-header > div, #sites .catalogue-header > div,
#engrais .catalogue-header > div, #catalogue .catalogue-header > div, #notebook .notebook-header > div {
  display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center;
}
#calc .catalogue-header > div::before, #weather .catalogue-header > div::before, #cultures .catalogue-header > div::before,
#sites .catalogue-header > div::before, #engrais .catalogue-header > div::before, #catalogue .catalogue-header > div::before,
#notebook .notebook-header > div::before, #course .product-nav > span:nth-of-type(1)::before {
  content: ""; grid-row: 1 / span 2; width: 2.7rem; height: 2.7rem; border-radius: 12px;
  background: center / cover no-repeat; box-shadow: 0 5px 12px var(--glow, rgba(0, 0, 0, .12)); flex: none;
}
#calc .catalogue-header > div::before { background-image: url(/assets/ui/cuve.png); }
#weather .catalogue-header > div::before { background-image: url(/assets/ui/meteo.png); }
#cultures .catalogue-header > div::before { background-image: url(/assets/ui/cultures.png); }
#sites .catalogue-header > div::before { background-image: url(/assets/ui/sites.png); }
#engrais .catalogue-header > div::before { background-image: url(/assets/ui/engrais.png); }
#catalogue .catalogue-header > div::before { background-image: url(/assets/ui/catalogue.png); }
#notebook .notebook-header > div::before { background-image: url(/assets/ui/carnet.png); }
#course .product-nav > span:nth-of-type(1) { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
#course .product-nav > span:nth-of-type(1)::before { width: 2.3rem; height: 2.3rem; border-radius: 10px; background-image: url(/assets/ui/formation.png); }
.catalogue-header h2, .notebook-header h2 { font-weight: 900; }
.catalogue-header > div > h2:only-child { grid-row: 1 / span 2; align-self: center; margin: 0; }

/* Petites icônes sur les onglets de l'outil Engrais */
.en-tabs [data-mode]::before { margin-inline-end: .3rem; }
.en-tabs [data-mode="0"]::before { content: "🧮"; }
.en-tabs [data-mode="1"]::before { content: "🌱"; }
.en-tabs [data-mode="4"]::before { content: "🌾"; }
.en-tabs [data-mode="2"]::before { content: "💰"; }
.en-tabs [data-mode="3"]::before { content: "🔄"; }
.en-tabs [data-mode="5"]::before { content: "🧂"; }

/* Fond léger de la couleur de l'outil en haut de chaque écran */
#calc, #weather, #cultures, #sites, #engrais {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #fff8ea) 50%, var(--paper) 50%) 0, var(--paper) 340px);
}

/* ---------- Cultures & maladies : cartes avec image ---------- */
.cm-cards { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 680px) { .cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cm-card {
  position: relative; display: block; width: 100%; height: 118px; padding: 0; overflow: hidden;
  border: 2px solid #fff; border-radius: 20px; font: inherit; color: #10261c; text-align: start; cursor: pointer;
  background: linear-gradient(180deg, #a9d8ff 0%, #d7eeff 42%, #e6f4d6 78%, #cfe8b4 100%);
  box-shadow: 0 9px 22px rgba(40, 80, 40, .16);
}
.cm-card img {
  position: absolute; top: 0; bottom: 0; right: 0; width: 62%; height: 100%; object-fit: cover; object-position: center 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 44%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 44%);
}
.cm-card-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; height: 100%; max-width: 68%; padding: 0 16px; }
.cm-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.42rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 0 12px rgba(255, 255, 255, .7); }
.cm-card small { padding: 5px 11px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #2d3b31; font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 8px rgba(30, 60, 30, .12); }
.cm-card:active { transform: scale(.985); }
[dir="rtl"] .cm-card img { right: auto; left: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0, rgba(0,0,0,.55) 22%, #000 44%); mask-image: linear-gradient(270deg, transparent 0, rgba(0,0,0,.55) 22%, #000 44%); }
.cm-hero { height: 128px; margin-bottom: 14px; cursor: default; }
.cm-hero strong { font-size: 1.6rem; }

/* Listes de la page d'une culture : rouge pour les maladies, orange pour les ravageurs, vert pour les produits. */
.cm-section:nth-of-type(1) .cm-org { border-inline-start: 6px solid #ef8f8f; background: linear-gradient(90deg, #fff4f3, #fff 40%); }
.cm-section:nth-of-type(2) .cm-org { border-inline-start: 6px solid #f0b05a; background: linear-gradient(90deg, #fff6e9, #fff 40%); }
.cm-section .cm-org.cm-org-empty { border-inline-start-color: #d9cfbf; background: #fffaf2; }
.cm-product { border-inline-start: 6px solid #7ccf93; background: linear-gradient(90deg, #f0fbf3, #fff 40%); }

/* Petites icônes sur les filtres du catalogue */
.category-filters [data-category]::before { margin-inline-end: .3rem; }
.category-filters [data-category=""]::before { content: "📚"; }
.category-filters [data-category="FONGICIDE"]::before { content: "🍄"; }
.category-filters [data-category="INSECTICIDE"]::before { content: "🐛"; }
.category-filters [data-category="HERBICIDE"]::before { content: "🌿"; }

/* Petites icônes sur les onglets de la Formation */
.course-tabs [data-course-panel]::before { margin-inline-end: .3rem; }
.course-tabs [data-course-panel="lesson"]::before { content: "📖"; }
.course-tabs [data-course-panel="path"]::before { content: "🧭"; }
.course-tabs [data-course-panel="quiz"]::before { content: "📝"; }

/* Carnet : l'icône du carnet en relief dans l'encadré d'accueil */
.notebook-hero-icon { width: 3.7rem; height: 3.7rem; border-radius: 16px; background: url(/assets/ui/carnet.png) center / cover no-repeat; box-shadow: 0 8px 16px rgba(240, 110, 0, .25); }
.notebook-hero-icon svg { display: none; }

/* QCM : les points sont des fruits (fraise, framboise, petite cerise) */
@keyframes fruit-pop { 0% { transform: scale(0) rotate(-35deg); opacity: 0; } 65% { transform: scale(1.3) rotate(10deg); opacity: 1; } 100% { transform: none; } }
@keyframes fruit-wait { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.fruit { display: inline-block; width: 30px; height: 30px; vertical-align: middle; filter: drop-shadow(0 2px 2px rgba(120, 20, 30, .18)); }
.fruit.missed { filter: grayscale(1); opacity: .32; }
.fruit.pop { animation: fruit-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.fruit-slot { display: inline-block; width: 26px; height: 26px; margin: 2px; border-radius: 50%; border: 2px dashed #e2cfae; vertical-align: middle; box-sizing: border-box; }
.fruit-slot.now { border: 2px solid #f08c00; background: #fff4e0; animation: fruit-wait 1.4s ease-in-out infinite; }
.fruit-basket { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 14px; padding: 8px 10px; border-radius: 18px; border: 2px solid #f6d6b2;
  background: linear-gradient(160deg, #fffdf8, #fff1e2); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(200, 80, 40, .08); }
.fruit-win { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; color: #b4235a; font-weight: 900; }
.fruit-win .fruit { width: 26px; height: 26px; }
.fruit-row.mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1px; vertical-align: middle; }
.fruit-row.mini .fruit { width: 16px; height: 16px; filter: none; }
.fruit-row.mini .fruit-slot { width: 12px; height: 12px; margin: 2px; border-width: 1.5px; }
.quiz-start .fruit-row.mini .fruit-slot { border-color: rgba(255, 255, 255, .7); }
.quiz-record { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 800; }
.quiz-basket-big { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 300px; margin: 14px auto 6px; padding: 14px; border-radius: 24px;
  background: radial-gradient(circle at 50% 0, #fff, #fff1e0); border: 2px solid #f6d6b2; box-shadow: 0 10px 22px rgba(200, 80, 40, .12); }
.quiz-basket-big .fruit { width: 46px; height: 46px; }
.quiz-cheer { margin: 12px 0 2px; font-size: 1.2rem; font-weight: 900; color: #c2410c; }
.quiz-picked { margin: 0 0 6px; color: #7a6e5e; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .fruit.pop, .fruit-slot.now { animation: none; } }

/* ---------- Page d'ouverture : logo vert, pastilles colorées, mosaïque des cultures ---------- */
#welcome.welcome {
  background:
    radial-gradient(110% 38% at 100% 0%, rgba(196, 230, 160, .55), transparent 70%),
    radial-gradient(90% 30% at 0% 55%, rgba(255, 220, 160, .38), transparent 70%),
    radial-gradient(100% 30% at 100% 100%, rgba(190, 228, 160, .5), transparent 70%),
    var(--paper);
}
.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; }
#welcome .eyebrow { padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .8); border: 2px solid #cfe9d6; box-shadow: 0 6px 14px rgba(0, 98, 51, .08); }
#welcome .eyebrow::before { content: "🇲🇦 "; }
#welcome .language { border: 2px solid #cfe9d6; background: rgba(255, 255, 255, .85); box-shadow: 0 6px 14px rgba(0, 98, 51, .08); }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.welcome-logo { width: min(42vw, 168px); height: auto; border-radius: 23%; box-shadow: 0 20px 36px rgba(0, 70, 35, .30), 0 0 0 6px rgba(255, 255, 255, .75); animation: logo-float 5s ease-in-out infinite; }
#welcome .welcome-copy { max-width: 22rem; margin: 1.15rem auto .9rem; color: #3b3027; font-size: 1.06rem; font-weight: 700; line-height: 1.5; }
#welcome .promise-row { flex-wrap: wrap; gap: 6px; }
#welcome .promise-row b { display: none; }
.promise { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border: 2px solid var(--pe); border-radius: 99px; background: linear-gradient(160deg, #fff, var(--pt)); color: var(--pc);
  font-size: .68rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 12px rgba(70, 48, 15, .06), inset 0 1px 0 #fff; }
.promise::before { font-size: .95rem; letter-spacing: 0; }
.promise-simple { --pt: #dff5e5; --pe: #9fdcb4; --pc: #17803f; }
.promise-simple::before { content: "✨"; }
.promise-fiable { --pt: #e3efff; --pe: #a9c9f3; --pc: #1d5fa8; }
.promise-fiable::before { content: "🛡️"; }
.promise-terrain { --pt: #fff0d9; --pe: #f6c98a; --pc: #b45309; }
.promise-terrain::before { content: "🌱"; }
@keyframes mosaic-left { from { background-position-x: 0; } to { background-position-x: -760.32px; } }
@keyframes mosaic-right { from { background-position-x: -760.32px; } to { background-position-x: 0; } }
#welcome .welcome-mosaic { position: relative; height: auto; margin: .8rem 0 1rem; padding: 12px 0 4px; border: 2px solid #f3dcb5; border-radius: 26px; background: #fff6e8; overflow: hidden;
  box-shadow: 0 14px 30px rgba(120, 80, 20, .14), inset 0 1px 0 #fff; }
#welcome .welcome-mosaic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 38%, rgba(12, 46, 26, .78) 100%); pointer-events: none; }
.mosaic-row { height: 88px; margin-bottom: 8px; background: url(/assets/accueil/bande-1.jpg) 0 0 / auto 100% repeat-x; animation: mosaic-left 52s linear infinite; }
.mosaic-row-2 { background-image: url(/assets/accueil/bande-2.jpg); animation-name: mosaic-right; animation-duration: 60s; }
#welcome .welcome-mosaic .visual-label { position: absolute; z-index: 2; inset: auto 16px 14px; display: grid; gap: 2px; justify-items: start; color: #fff; text-align: start; }
#welcome .welcome-mosaic .visual-label span { font-size: 1.12rem; font-weight: 900; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
#welcome .welcome-mosaic .visual-label small { font-size: .74rem; font-weight: 800; opacity: .92; }
#welcome .start { border-radius: 22px; box-shadow: 0 14px 28px rgba(224, 104, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .35); }
#welcome .start svg { box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
#welcome .install-app { border-radius: 99px; border: 2px solid #cfe9d6; background: linear-gradient(160deg, #fff, #ecf8f0); box-shadow: 0 6px 14px rgba(0, 98, 51, .08); }
@media (max-height: 760px) {
  .welcome-logo { width: min(34vw, 132px); }
  .mosaic-row { height: 70px; }
  @keyframes mosaic-left { from { background-position-x: 0; } to { background-position-x: -604.8px; } }
  @keyframes mosaic-right { from { background-position-x: -604.8px; } to { background-position-x: 0; } }
}
@media (prefers-reduced-motion: reduce) { .welcome-logo, .mosaic-row { animation: none; } }
.en-tabs [data-mode="6"]::before { content: "🏭"; }
.en-tabs [data-mode="7"]::before { content: "💧"; }
/* Leçon OCP : boutons « Essayer » vers les outils (v45) */
.lesson-tools { display: grid; gap: 8px; margin: 14px 0 4px; }
.lesson-tool { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid #cfe9d6; border-radius: 16px; background: linear-gradient(180deg, #fff, #f1faf3); color: #006233; font: inherit; font-weight: 800; text-align: start; box-shadow: 0 6px 14px rgba(0, 98, 51, .08); cursor: pointer; }
/* Scanner : la pastille « À confirmer » restait hors de l'écran quand la matière active est longue (v46). */
.ocr-match-list button { grid-template-columns: 1.7rem minmax(0, 1fr) auto; }
.ocr-match-list button > span:nth-child(2) { min-width: 0; }
.ocr-match-list small { overflow-wrap: anywhere; }
.ocr-match-list em { white-space: nowrap; }
@media (max-width: 380px) { .ocr-match-list button { grid-template-columns: 1.7rem minmax(0, 1fr); } }