/* Akeliagarden Plans — pages de l'application (liste, création, comptes, catalogue). L'éditeur a sa propre feuille. */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(polices/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(polices/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(polices/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(polices/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(polices/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
:root {
  --fond: #eef1f0; --surface: #ffffff; --surface2: #f5f7f6; --encre: #1d2b2e; --encre2: #5b6b6e; --bord: #d6dddb;
  --accent: #006f7f; --accent-fort: #00505c; --accent-clair: #e2eff1;
  --ok: #1f6b3a; --ok-c: #e5f4e4; --alerte: #8a5300; --alerte-c: #fdf1dc; --erreur: #b3261e; --erreur-c: #fbebeb;
  --f-ui: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --f-cote: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fond: #121a1c; --surface: #1a2427; --surface2: #213033; --encre: #e6eeee; --encre2: #9fb0b2; --bord: #2e3f42;
  --accent: #3fb2c2; --accent-fort: #7fd0db; --accent-clair: #17393f;
  --ok: #7fd49a; --ok-c: #183a24; --alerte: #f0c27a; --alerte-c: #3d2e14; --erreur: #ff9a90; --erreur-c: #44201c; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.5 var(--f-ui); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.barre { background: var(--surface); border-bottom: 1px solid var(--bord); }
.barre > div { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.marque { font-weight: 600; text-decoration: none; color: var(--encre); display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.marque svg { color: var(--accent); }
.barre nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barre nav a { text-decoration: none; color: var(--encre2); padding: 6px 10px; border-radius: 8px; font-weight: 500; }
.barre nav a:hover { background: var(--surface2); color: var(--encre); }
.barre nav a[aria-current="page"] { background: var(--accent-clair); color: var(--accent-fort); }
.moi { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--encre2); }
.moi form { margin: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.entete p { margin: 0; color: var(--encre2); }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 18px; }
.carte + .carte { margin-top: 16px; }
.grille > .carte + .carte { margin-top: 0; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.btn { border: 1px solid var(--bord); background: var(--surface); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--encre); white-space: nowrap; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.principal:hover { background: var(--accent-fort); color: #fff; }
.btn.danger:hover { border-color: var(--erreur); color: var(--erreur); }
.btn.petit { min-height: 32px; padding: 4px 10px; font-size: 13.5px; }
.btn.lien { border-color: transparent; background: none; color: var(--accent); padding-inline: 6px; }
.champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre2); }
.champ input, .champ select, .champ textarea { font-weight: 400; color: var(--encre); background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; min-height: 40px; width: 100%; }
.champ input:focus-visible, .champ select:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ small { font-weight: 400; color: var(--encre2); }
form.pile { display: flex; flex-direction: column; gap: 14px; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.rangee > .champ { flex: 1 1 180px; }
.choix { display: flex; gap: 8px; flex-wrap: wrap; }
.choix label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--bord); border-radius: 8px; padding: 7px 12px; font-weight: 500; color: var(--encre); cursor: pointer; }
.choix label:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); color: var(--accent-fort); }
.choix input { accent-color: var(--accent); margin: 0; width: auto; min-height: 0; }
.aide { font-size: 13px; color: var(--encre2); margin: 0; }
.flash { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.flash.ok { background: var(--ok-c); color: var(--ok); }
.flash.erreur { background: var(--erreur-c); color: var(--erreur); }
.flash.info { background: var(--accent-clair); color: var(--accent-fort); }
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--encre2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
table.liste td { padding: 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste td.num { font-variant-numeric: tabular-nums; text-align: right; }
.table-defile { overflow-x: auto; }
.pastille { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.p-ok { background: var(--ok-c); color: var(--ok); } .p-al { background: var(--alerte-c); color: var(--alerte); } .p-ko { background: var(--erreur-c); color: var(--erreur); } .p-in { background: var(--accent-clair); color: var(--accent-fort); }
.ref { font: 600 12.5px var(--f-cote); color: var(--accent-fort); background: var(--accent-clair); padding: 1px 7px; border-radius: 6px; letter-spacing: .02em; }
.recherche { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.recherche input { min-width: 240px; }
.projet-nom { font-weight: 600; color: var(--encre); text-decoration: none; }
.projet-nom:hover { color: var(--accent); }
.discret { color: var(--encre2); font-size: 13px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.depart { display: flex; flex-direction: column; gap: 14px; }
.depart h2 { display: flex; align-items: center; gap: 10px; }
.depart h2 svg { color: var(--accent); flex: none; }
.secret { background: var(--surface2); border: 1px dashed var(--bord); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.secret code { font: 600 17px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; word-break: break-all; color: var(--encre); }
.qr { background: #fff; padding: 10px; border-radius: 8px; width: max-content; }
.qr svg { display: block; width: 180px; height: 180px; }
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.connexion .carte { width: min(400px, 100%); }
.connexion h1 { display: flex; gap: 10px; align-items: center; font-size: 21px; margin-bottom: 14px; }
.vignette { width: 92px; height: 70px; object-fit: contain; background: repeating-conic-gradient(#eef1f0 0% 25%, #fff 0% 50%) 0 0 / 12px 12px; border-radius: 6px; border: 1px solid var(--bord); }
.attente { position: fixed; inset: 0; background: rgba(20,30,32,.55); display: grid; place-items: center; z-index: 10; padding: 16px; }
.attente[hidden] { display: none; }
.attente > div { background: var(--surface); border-radius: 12px; padding: 22px; max-width: 420px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.roue { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--accent-clair); border-top-color: var(--accent); animation: tour 1s linear infinite; }
@keyframes tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 3s; } }
details.plus > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .moi span { display: none; }
  table.liste .cache-mobile { display: none; }
}