/* TreeBer Enhanced : style pour le français, l'anglais et l'arabe (de droite à gauche). */
:root {
  --paper: #f1f4ec;
  --surface: #ffffff;
  --ink: #18271d;
  --gris: #55665a;
  --line: #d6ddcf;
  --vert: #2f5e2e;
  --vert-fonce: #214520;
  --vert-clair: #e3ecda;
  --or: #b98a1e;
  --or-clair: #f5e9c6;
  --or-texte: #6b4f0a;
  --bleu: #2d6a8f;
  --rouge: #b3261e;
  --rayon: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}
a { color: var(--vert); }
a:hover { color: var(--vert-fonce); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* En-tête */
.top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 10px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 var(--vert);
}
.top a { text-decoration: none; }
.top .brand { display: flex; align-items: center; }
.logo-tb { height: 54px; width: auto; display: block; }
.logo-sep { width: 1px; height: 38px; background: var(--line); }
.logo-add { height: 36px; width: auto; display: block; }
.top nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; margin-inline-start: auto; font-size: 1rem; }
.top nav > a {
  padding: 8px 2px; font-weight: 600; color: var(--ink);
  border-bottom: 3px solid transparent;
}
.top nav > a:hover { color: var(--vert); border-bottom-color: var(--line); }
.top nav > a.on { color: var(--vert); border-bottom-color: var(--or); }
.top nav form.deconnexion { display: inline; margin: 0; }
.top nav form.deconnexion button {
  margin: 0; padding: 8px 2px; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  color: var(--ink); font-weight: 600; font-size: inherit;
}
.top nav form.deconnexion button:hover { color: var(--vert); border-bottom-color: var(--line); background: none; }
.langs { display: inline-flex; gap: 2px; margin-inline-start: 6px; }
.langs a { padding: 3px 9px; border-radius: 999px; color: var(--gris); font-size: .85rem; font-weight: 600; }
.langs a:hover { background: var(--vert-clair); }
.langs a.on { background: var(--vert); color: #fff; }
.hero-logos { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-logos .logo-tb { height: 150px; }
.hero-logos .logo-add { height: 80px; }
.hero-logos .logo-sep { height: 90px; }
@media (max-width: 600px) {
  .logo-tb { height: 44px; }
  .logo-add { height: 28px; }
  .logo-sep { height: 30px; }
  .top { padding: 8px 14px; }
  .top nav { gap: 2px 14px; font-size: .95rem; }
}

/* Page */
main { max-width: 680px; margin: 28px auto; padding: 0 18px; }
footer { text-align: center; color: var(--gris); padding: 28px 0; font-size: .9rem; border-top: 1px solid var(--line); margin-top: 40px; }
h1 { color: var(--vert-fonce); font-weight: 700; font-size: 1.9rem; line-height: 1.25; margin: .4em 0 .5em; letter-spacing: -.01em; }
h2 { color: var(--ink); font-weight: 650; font-size: 1.3rem; margin: 1.4em 0 .5em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon); padding: 22px; border-top: 3px solid var(--vert); }
label { display: block; margin-top: 14px; font-weight: 600; }
.help { color: var(--gris); font-size: .86rem; font-weight: 400; margin: 2px 0; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #b4bfae; border-radius: 6px; font-size: 1rem;
  font-family: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--or-clair); border-color: var(--or); }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 400; }
.check input { width: auto; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
button, .btn {
  display: inline-block; margin-top: 20px; padding: 11px 22px; background: var(--vert); color: #fff;
  border: 1px solid var(--vert); border-radius: var(--rayon); font-size: 1rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
button:hover, .btn:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.btn.clair { background: transparent; color: var(--vert); border-color: var(--vert); }
.btn.clair:hover { background: var(--vert-clair); color: var(--vert-fonce); }
button:disabled { opacity: .5; cursor: not-allowed; }
.err { color: var(--rouge); font-size: .92rem; margin: 6px 0 0; font-weight: 500; }
.ok { background: var(--vert-clair); border-inline-start: 4px solid var(--vert); padding: 10px 14px; border-radius: 4px; }
.hero { text-align: center; padding: 30px 10px; }
.hero p { color: var(--gris); font-size: 1.1rem; }
ul.menu { padding-inline-start: 20px; }

/* Accueil : courbes de niveau du Rif en fond, deux accès clairs */
main.home { max-width: 980px; margin-top: 0; padding-top: 48px; }
.home-hero {
  padding: 40px 0 28px; text-align: start;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='300' viewBox='0 0 900 300' fill='none' stroke='%232f5e2e' stroke-opacity='.13' stroke-width='1.4'><path d='M-20 230C120 150 220 260 360 190S600 80 760 150 880 120 940 90'/><path d='M-20 205C120 128 225 232 362 168S598 62 758 128 882 100 940 70'/><path d='M-20 180C120 106 228 206 364 146S596 44 756 106 884 80 940 50'/><path d='M-20 255C120 172 218 288 358 212S602 98 762 172 878 140 940 110'/><path d='M-20 280C120 194 214 316 356 234S604 116 764 194 876 160 940 130'/></svg>") no-repeat center top / cover;
}
.home-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .25em; max-width: 14em; }
.home-hero p { font-size: 1.15rem; color: var(--gris); max-width: 36em; margin: 0; }
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 18px; text-align: start; }
.choix .card { padding: 26px; border-top-width: 4px; }
.choix .card:nth-child(2) { border-top-color: var(--or); }
.choix .card h3 { margin: 0 0 6px; font-size: 1.4rem; color: var(--vert-fonce); }
.choix .card p { color: var(--gris); min-height: 4.5em; }
.choix .btn { margin-top: 8px; }

/* Tableau de bord administrateur */
main.wide { max-width: 1000px; }
.dash-title { margin: 0; }
.dash-sub { color: var(--gris); margin: 2px 0 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon); padding: 14px 16px; text-decoration: none; color: inherit; }
.kpi:hover { border-color: var(--vert); }
.kpi .lab { color: var(--gris); font-size: .9rem; }
.kpi .num { font-size: 2.1rem; font-weight: 700; line-height: 1.2; margin: 4px 0; color: var(--ink); }
.kpi .go { color: var(--vert); font-size: .9rem; font-weight: 600; }
.kpi.alert { border-color: var(--or); border-inline-start: 5px solid var(--or); background: #fffdf6; }
.kpi.alert .num { color: var(--or-texte); }
.kpi.ok0 .num { color: #9aa79b; }
.kpi.ok0 .go { color: #9aa79b; }
.dash-h { color: var(--gris); font-size: .95rem; margin: 26px 0 8px; font-weight: 650; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile { display: block; background: var(--vert); border-radius: var(--rayon); padding: 16px 18px; color: #fff; text-decoration: none; font-weight: 650; font-size: 1.05rem; }
.tile:hover { background: var(--vert-fonce); color: #fff; }
.dash-foot { color: #8a978c; font-size: .9rem; margin-top: 16px; }
.dash-note { margin-top: 14px; font-size: .9rem; }
.tbl-wrap { overflow-x: auto; margin: 10px 0; }
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .95rem; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: start; vertical-align: top; }
.tbl th { background: var(--vert-clair); color: var(--vert-fonce); white-space: nowrap; font-weight: 650; border-bottom: 2px solid var(--vert); }
.tbl tbody tr:hover td { background: #f8faf4; }
.tbl .btn { margin-top: 0; padding: 6px 14px; }
.sbadge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 650; }
.s-o { background: var(--or-clair); color: var(--or-texte); }
.s-v { background: var(--vert-clair); color: var(--vert-fonce); }
.s-g { background: #e9ece6; color: #4b5a4f; }
.sp-summary { margin-top: 12px; padding: 12px 16px; background: var(--vert-clair); border-inline-start: 4px solid var(--vert); border-radius: 4px; }
.msgs { margin-top: 18px; font-size: .92rem; }
.msgs p { margin: 4px 0; }
.codes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }

/* Les codes d'arbres sont des étiquettes de pépinière, avec le petit trou d'attache */
.code-chip {
  position: relative; display: inline-block; background: #f3ead0; border: 1px solid #d8c88f; color: #4a3b0c;
  border-radius: 3px 12px 12px 3px; padding: 4px 12px; padding-inline-start: 26px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: .6px;
}
.code-chip::before {
  content: ""; position: absolute; inset-inline-start: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--paper); border: 1px solid #c9b87a;
}
a.code-chip { text-decoration: none; }
a.code-chip:hover { background: #ecdfb2; border-color: var(--or); color: #3a2d06; }
pre.bank { white-space: pre-wrap; background: #f6f7f2; border: 1px solid var(--line); border-radius: var(--rayon); padding: 14px 16px; font-family: inherit; line-height: 1.75; user-select: all; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }