:root {
  --ink: #2b2119;
  --soft: #6f6558;
  --paper: #fff1d7;
  --card: #fffaf2;
  --brand: #007a45;
  --earth: #8c5a3c;
  --red: #d42828;
  --band-yellow: #ffb000;
  --orange: #ff8c00;
  --blue: #1e83a8;
  --green: #007a45;
  --line: #e4cfa8;
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior-x: none;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:not(.language-menu button):not(.clear-search):not(.install-guide-close) { min-height: 48px; }
.app-frame { max-width: 760px; background: var(--paper); box-shadow: 0 0 40px rgba(55, 42, 25, .12); }
.safety-band { height: 20px; }
.safety-band i:nth-child(1) { background: var(--red); }
.safety-band i:nth-child(2) { background: var(--orange); }
.safety-band i:nth-child(3) { background: var(--band-yellow); }
.safety-band i:nth-child(4) { background: var(--brand); }
.screen { background: var(--paper); }

/* Écran d'ouverture */
.welcome {
  padding: calc(env(safe-area-inset-top) + 2.2rem) 1.5rem max(1.25rem, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 93% 14%, rgba(255, 154, 0, .18) 0 68px, transparent 69px), radial-gradient(circle at 3% 64%, rgba(0, 122, 69, .12) 0 105px, transparent 106px), linear-gradient(145deg, #fffdf8, #fff3d8);
}
.eyebrow { color: var(--brand); font-weight: 900; }
.language { border: 2px solid rgba(0, 122, 69, .28); background: rgba(255, 255, 255, .88); color: var(--soft); }
.language-menu { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 32px rgba(70, 48, 15, .16); }
.scan-mark { width: 7.5rem; }
.corners { stroke: var(--orange); }
.plant-line { stroke: var(--brand); }
.plant-leaf { fill: var(--brand); }
h1 { color: var(--ink); }
h1 .arabic { color: var(--brand); }
.welcome-copy { color: var(--soft); }
.promise-row { color: var(--brand); }
.promise-row b { background: var(--orange); }
.welcome-visual { border-radius: 20px; box-shadow: 0 13px 30px rgba(70, 48, 15, .16); }
.start { min-height: 64px; border-radius: 20px; background: linear-gradient(135deg, #ff9d00, #f06d00); font-size: 1.05rem; box-shadow: 0 12px 26px rgba(224, 104, 0, .25); }
.start:hover, .start:focus-visible { background: linear-gradient(135deg, #f58b00, #dc5700); }
.install-app { border: 2px solid rgba(0, 122, 69, .25); background: #fff; color: var(--brand); box-shadow: 0 7px 18px rgba(70, 48, 15, .08); }
.install-guide-card { border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.install-guide-icon { background: var(--brand); color: #fff; }
.install-guide-ok { border-radius: 14px; background: var(--brand); }

/* Accueil Fallah */
.dashboard { padding-bottom: calc(92px + env(safe-area-inset-bottom)); background: var(--paper); }
.dashboard-header { padding: calc(env(safe-area-inset-top) + 2.25rem) 1.5rem 1rem; background: linear-gradient(145deg, #fffdf8, #fff3d8); }
.mini-brand { gap: .75rem; }
.mini-brand svg { width: 3.25rem; height: 3.25rem; padding: .58rem; border-radius: 14px; background: var(--brand); box-shadow: 0 8px 22px rgba(0, 84, 47, .18); }
.mini-brand span { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; letter-spacing: .02em; }
.mini-brand em { color: var(--brand); }
.round-button { width: 3rem; height: 3rem; border: 2px solid rgba(0, 122, 69, .23); background: #fff; }
.round-button i { background: var(--orange); border-color: #fff3d8; }
.dashboard-main { padding: 1.35rem 1.5rem 2rem; }
.greeting p { color: var(--brand); font-size: .95rem; }
.greeting h2 { margin: .2rem 0 1.25rem; font-size: clamp(1.65rem, 5vw, 2.05rem); }
.scan-card { border: 2px solid rgba(0, 122, 69, .23); border-radius: 20px; padding: 1.15rem; background: linear-gradient(150deg, #fff, #fff8ea); color: var(--ink); box-shadow: 0 13px 30px rgba(70, 48, 15, .10); }
.scan-icon { border-radius: 14px; background: var(--brand); }
.scan-text small { color: var(--brand); font-weight: 900; }
.scan-text strong { font-size: 1.12rem; }
.scan-text em { color: var(--soft); font-size: .82rem; }
.card-arrow { stroke: var(--brand); }
.section-heading { margin: 1.55rem 0 .9rem; }
.section-heading h3 { font-size: 1.12rem; }
.section-heading span { background: #ffe0ac; color: #8f4b00; }
.tool-grid { gap: 18px; }
.tool-card { min-height: 170px; border: 2px solid rgba(0, 122, 69, .23); border-radius: 20px; padding: 22px; background: linear-gradient(150deg, #fff, #fff8ea); box-shadow: 0 13px 30px rgba(70, 48, 15, .10); transition: transform .18s ease, box-shadow .18s ease; }
.tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); box-shadow: 0 17px 36px rgba(70, 48, 15, .15); }
.tool-icon { width: 3.35rem; height: 3.35rem; border-radius: 14px; background: #eef9f2; color: var(--brand); }
.tool-icon svg { width: 2.1rem; }
.tool-card strong { font-size: 1rem; }
.tool-card small { margin-top: .35rem; color: var(--soft); font-size: .78rem; }
.notebook-primary { min-height: 96px; padding: 18px; background: linear-gradient(135deg, #ff9d00, #f06d00); border: 0; color: #fff; box-shadow: 0 12px 26px rgba(224, 104, 0, .25); }
.notebook-primary:after { background: #fff; opacity: .10; }
.notebook-primary .tool-icon { width: 3.5rem; height: 3.5rem; background: rgba(255, 255, 255, .18); color: #fff; }
.notebook-primary strong { color: #fff; font-size: 1.15rem; }
.notebook-primary small { color: #fff5e8; font-size: .82rem; }
.citrus { border-color: rgba(255, 140, 0, .28); }
.citrus .tool-icon { background: #fff1d7; color: var(--orange); }
.red { border-color: rgba(212, 40, 40, .24); }
.red .tool-icon { background: #fff0ee; color: var(--red); }
.blue { border-color: rgba(30, 131, 168, .24); }
.blue .tool-icon { background: #eaf7fb; color: var(--blue); }
.earth { border-color: rgba(140, 90, 60, .23); }
.earth .tool-icon { background: #f5e9e0; color: var(--earth); }
.green .tool-icon { background: #e6f5eb; color: var(--brand); }

/* Navigation inspirée du Carnet */
.bottom-nav { position: fixed; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); width: min(100%, 760px); min-height: 78px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-top: 3px solid var(--line); background: rgba(247, 240, 223, .97); backdrop-filter: blur(10px); border-radius: 0; align-items: end; }
.bottom-nav button { min-height: 58px; justify-content: center; gap: 4px; color: #948975; font-size: .72rem; font-weight: 850; }
.bottom-nav svg { width: 25px; height: 25px; }
.bottom-nav .active { color: var(--brand); }
.bottom-nav .nav-scan { align-self: center; width: 3.9rem; height: 3.9rem; margin: -1.65rem auto 0; border: 5px solid #f7f0df; background: linear-gradient(135deg, #ff9d00, #f06d00); box-shadow: 0 10px 24px rgba(224, 104, 0, .28); }

/* En-têtes et surfaces intérieures */
.catalogue-screen, .product-screen, .course-screen, .scanner-screen, .notebook-screen { background: var(--paper); }
.catalogue-header, .notebook-header, .product-nav { padding: calc(env(safe-area-inset-top) + 2.15rem) 1.5rem 1rem; background: rgba(255, 250, 242, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.icon-button { width: 3rem; height: 3rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--brand); }
.catalogue-header div span, .notebook-header div span { color: var(--brand); font-size: .72rem; }
.catalogue-header h2, .notebook-header h2 { font-size: 1.18rem; }
.catalogue-count { background: #e6f5eb; color: var(--brand); font-size: .8rem; }
.notebook-badge, .course-pilot { background: #ffe0ac; color: #8f4b00; }
.catalogue-main, .notebook-main, .scanner-main, .product-main, .course-main { padding: 1.5rem; background: var(--paper); }
.source-notice { padding: 1rem; border-radius: 14px; background: #fff6e5; color: #68430e; }
.source-notice strong { font-size: .85rem; }
.source-notice small { font-size: .76rem; }
.search-form label { font-size: .92rem; }
.search-box { height: 3.5rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 5px 14px rgba(70, 48, 15, .05); }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 122, 69, .16); }
.clear-search { background: #fff1d7; color: var(--ink); }
.category-filters { gap: .55rem; padding: 1rem 0 .35rem; }
.category-filters button { border: 2px solid var(--line); background: var(--card); padding: .55rem .85rem; font-size: .8rem; }
.category-filters button.selected { border-color: var(--brand); background: var(--brand); color: #fff; }
.product-list { gap: .75rem; }
.product-result { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; background: var(--card); box-shadow: 0 8px 22px rgba(70, 48, 15, .08); }
.result-copy strong { font-size: 1rem; }
.result-meta { font-size: .76rem; }
.result-amm { font-size: .72rem; }
.result-amm b { font-size: .78rem; }

/* Fiche produit */
.product-main { background: var(--paper); }
.product-hero, .pro-hero { border-radius: 20px; background: linear-gradient(145deg, #006b3c, #00542f); box-shadow: 0 15px 32px rgba(0, 84, 47, .22); }
.pro-hero:after { background: #ff9d00; }
.review-badge { border-color: rgba(255, 224, 172, .5); background: rgba(255, 224, 172, .14); color: #ffe0ac; }
.regulatory-panel, .detail-card, .professional-card, .usage-table { border-color: var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 10px 25px rgba(70, 48, 15, .07); }
.regulatory-panel { border-left: 5px solid var(--orange); background: #fff6e5; }
.status-grid > div { border-radius: 12px; background: #fff1d7; }
.panel-number, .professional-card .panel-number, .professional-title .panel-number { border-radius: 10px; background: var(--brand); }
.composition-card { background: var(--card); }
.composition-table { border-color: var(--line); border-radius: 14px; }
.composition-table > div { background: #fff; }
.usage-row + .usage-row { border-top-color: var(--line); }
.usage-row:nth-child(even) { background: #fff8ea; }
.usage-index { background: #e6f5eb; color: var(--brand); }
.professional-title > span { background: var(--brand); }

/* Carnet de terrain */
.notebook-hero { padding: 1.25rem; border: 2px solid rgba(0, 122, 69, .22); border-radius: 20px; background: linear-gradient(145deg, #fff, #eef9f2); color: var(--ink); box-shadow: 0 10px 25px rgba(0, 84, 47, .08); }
.notebook-hero-icon { border-radius: 14px; background: #e6f5eb; color: var(--brand); }
.notebook-hero small { color: var(--brand); font-size: .7rem; }
.notebook-hero h3 { font-size: 1.25rem; }
.notebook-hero p { color: var(--soft); font-size: .9rem; }
.notebook-metrics { gap: 12px; margin: 1rem 0; }
.notebook-metrics article { padding: 1rem .7rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 8px 20px rgba(70, 48, 15, .06); }
.notebook-metrics strong { color: var(--brand); font-size: 1.4rem; }
.notebook-metrics span { font-size: .72rem; }
.notebook-empty { padding: 2rem 1.25rem; border: 2px dashed rgba(0, 122, 69, .42); border-radius: 20px; background: var(--card); }
.notebook-empty p { font-size: .9rem; }
.notebook-safety { padding: 1rem; border-radius: 16px; background: #ffe8bf; color: #68430e; font-size: .8rem; }
.notebook-safety span { color: #7b6040; }

/* Scanner et formation */
.scanner-intro { margin: .25rem 0 1.1rem; }
.scanner-step { border-radius: 9px; background: var(--brand); }
.scanner-intro h2 { font-size: 1.35rem; }
.scanner-intro p { font-size: .9rem; }
.camera-stage { border-radius: 20px; box-shadow: 0 16px 32px rgba(55, 42, 25, .20); }
.capture-text, .upload-text { min-height: 54px; border-radius: 14px; font-size: .9rem; }
.capture-text { background: linear-gradient(135deg, #ff9d00, #f06d00); box-shadow: 0 8px 18px rgba(224, 104, 0, .22); }
.upload-text { border: 2px solid rgba(0, 122, 69, .28); background: #fff; color: var(--brand); }
.ocr-progress, .detected-panel, .ocr-match-list button, .ocr-message { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.detected-panel textarea { border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.detected-panel button { min-height: 50px; border-radius: 14px; background: var(--brand); }
.course-main { min-height: calc(100svh - 4.5rem); background: var(--paper); }
.course-cover { border-radius: 20px; background: linear-gradient(145deg, #006b3c, #00542f); box-shadow: 0 15px 32px rgba(0, 84, 47, .22); }
.course-kicker { color: #ffe0ac; }
.course-progress i { background: var(--orange); }
.course-tabs { border-radius: 14px; background: #eadfc9; }
.course-tabs button { border-radius: 11px; font-size: .8rem; }
.course-tabs button.active { background: #fff; color: var(--brand); }
.lesson-card, .course-answer, .course-modules article { border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 8px 20px rgba(70, 48, 15, .06); }
.course-panel blockquote { border-radius: 18px; background: var(--brand); }
.lesson-steps article { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.lesson-steps b, .course-modules article > b { background: #e6f5eb; }
.course-warning { background: #fff0ee; }
.course-source { border: 2px solid rgba(0, 122, 69, .28); border-radius: 14px; background: #fff; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); width: min(90%, 520px); padding: 14px 18px; border-radius: 14px; background: #00542f; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); font-weight: 800; }
button:focus-visible { outline: 3px solid rgba(0, 122, 69, .28); outline-offset: 3px; }

@media (max-width: 480px) {
  .dashboard-header, .dashboard-main, .catalogue-header, .notebook-header, .product-nav, .catalogue-main, .notebook-main, .scanner-main, .product-main, .course-main { padding-left: 18px; padding-right: 18px; }
  .tool-grid { gap: 12px; }
  .tool-card { min-height: 146px; padding: 18px; }
  .notebook-primary { min-height: 92px; }
  .dashboard-header { padding-top: calc(env(safe-area-inset-top) + 2.1rem); }
  .catalogue-header, .notebook-header, .product-nav { padding-top: calc(env(safe-area-inset-top) + 2rem); }
  .notebook-hero { display: grid; }
  .notebook-metrics { gap: 8px; }
}

@media (min-width: 761px) {
  body { padding: 24px 0; }
  .app-frame, .screen { min-height: calc(100svh - 48px); }
  .app-frame { border-radius: 24px; }
  .bottom-nav { bottom: 24px; border-radius: 0 0 24px 24px; }
}