/* ==========================================================================
   Futachō 蓋帳 — feuille de style unique
   Charte : papier washi + teinturerie indigo (aizome)
   Aucune règle ne doit être dupliquée dans index.html.
   ========================================================================== */

:root{
  /* Fond clair imposé : l'app garde son papier blanc cassé même si le
     téléphone est en mode nuit (pas d'assombrissement automatique). */
  color-scheme: light;

  /* Palette */
  --washi:      #E7E1D3;
  --washi-deep: #D8D0BE;
  --sumi:       #1A1A1E;
  --ai:         #22406B;
  --kon:        #16223F;
  --asagi:      #6E9BAA;
  --bengara:    #9E3D32;
  --ok:         #2F6B4F;

  /* Trame */
  --gut: 20px;
  --tabbar: 62px;
  --shadow: 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -14px rgba(22,34,63,.45);

  /* Typographie */
  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, -apple-system, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* L'attribut hidden doit toujours l'emporter, même sur display:flex/grid. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;background:var(--washi)}
body{
  min-height:100dvh;
  background:var(--washi);
  font-family:var(--body);
  color:var(--sumi);
  line-height:1.5;
  overscroll-behavior-y:none;
}
/* Fond uni blanc cassé : plus de lignes ni de grain. */
/* Fond personnalisé : la photo choisie, sous un voile washi qui garde le
   texte lisible. `--bg-url` est posée par background.js. */
body.has-bg{
  background-image:
    linear-gradient(rgba(231,225,211,.82), rgba(231,225,211,.82)),
    var(--bg-url);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* --------------------------------------------------------- Ossature ---- */
.shell{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

.masthead{
  padding:calc(12px + env(safe-area-inset-top)) var(--gut) 12px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(22,34,63,.13);
}
.wordmark{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.06em;color:var(--kon)}
.wordmark span{display:block;font-family:var(--body);font-weight:500;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--ai);opacity:.7;margin-top:3px}
.tally{font-family:var(--mono);font-size:11px;color:var(--ai);text-align:right;white-space:nowrap}
.tally b{font-family:var(--display);font-size:20px;font-weight:800;color:var(--kon)}

.main{flex:1;padding:0 var(--gut);padding-bottom:calc(var(--tabbar) + 34px + env(safe-area-inset-bottom))}

/* Bandeau « Protégez votre collection » (tant que l'app n'est pas installée). */
.promo{
  position:relative;z-index:2;margin:12px var(--gut) 0;padding:16px 16px 18px;
  background:var(--kon);color:var(--washi);border-radius:3px;box-shadow:var(--shadow);
}
.promo-head{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.promo-ic{flex:none;color:#F0C36A}
.promo-ic svg{width:22px;height:22px;display:block}
.promo-head b{font-family:var(--display);font-size:16px;font-weight:600}
.promo p{color:rgba(231,225,211,.86);font-size:13px;line-height:1.7;margin-bottom:13px}
.promo .btn{background:var(--washi);color:var(--kon);border-color:var(--washi)}
.promo-x{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border:none;background:none;
  color:rgba(231,225,211,.7);font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
}
.promo-x:active{background:rgba(231,225,211,.15)}

.view{display:none}
.view[aria-hidden="false"]{display:block;animation:rise .3s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ Titres ---- */
.eyebrow{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ai);opacity:.75;
  margin:24px 0 10px;display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:rgba(22,34,63,.16)}
h1,h2{font-family:var(--display);color:var(--kon);font-weight:600}
h1{font-size:26px;line-height:1.3;margin-bottom:8px}
h2{font-size:18px;margin-bottom:6px}
p{font-size:14px;line-height:1.75;color:#3A3A40}
p + p{margin-top:10px}
a{color:var(--ai)}

/* --------------------------------------------- Signature : le disque ---- */
.lid{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#3B5A85,var(--kon) 70%);
  box-shadow:inset 0 0 0 3px rgba(231,225,211,.8),var(--shadow);
  display:grid;place-items:center;color:var(--washi);border:none;
  font-family:var(--display);font-size:15px;text-align:center;line-height:1.35;
  transition:transform .18s ease;cursor:pointer;
}
.lid:active{transform:scale(.96)}
.lid[disabled]{opacity:.55;cursor:not-allowed}
.lid svg{position:absolute;inset:0;width:100%;height:100%}
.lid .label{position:relative;text-shadow:0 1px 3px rgba(0,0,0,.5);padding:0 12px}

.lid-wrap{position:relative;width:180px;margin:24px auto 12px}
.pulse{position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--ai);opacity:0;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.12);opacity:0}}

/* -------------------------------------------------------- Listes clé ---- */
.row{
  border-bottom:1px solid rgba(22,34,63,.13);
  padding:13px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.row .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ai);opacity:.85;white-space:nowrap}
.row .v{font-family:var(--display);font-size:15px;color:var(--kon);text-align:right}
.row .v.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.02em}
.row .v small{display:block;font-family:var(--body);font-size:11px;opacity:.6;margin-top:2px;letter-spacing:0}

.state{font-family:var(--body);font-size:12px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--asagi);flex:none}
.state.is-ok::before{background:var(--ok)}
.state.is-warn::before{background:var(--bengara)}

/* ------------------------------------------------------------ Vide ------ */
.empty{text-align:center;padding:36px 6px}
.empty h2{margin-top:18px}
.empty p{max-width:32ch;margin:8px auto 0}

/* --------------------------------------------------------- Boutons ------ */
.btn{
  display:block;width:100%;padding:15px;border:1px solid transparent;border-radius:2px;
  background:var(--kon);color:var(--washi);font-family:var(--body);
  font-size:14px;font-weight:700;letter-spacing:.1em;cursor:pointer;margin-top:18px;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--ai)}
.btn.ghost{background:transparent;color:var(--kon);border-color:var(--kon)}
.btn.ghost:hover{background:rgba(22,34,63,.07)}
.btn[disabled]{opacity:.45;cursor:not-allowed;background:var(--kon)}
:focus-visible{outline:2px solid var(--bengara);outline-offset:3px}

/* ------------------------------------------------------- Jauge espace --- */
.gauge{height:5px;background:var(--washi-deep);margin-top:10px;overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:var(--kon);transition:width .5s ease}

/* ------------------------------------------------------------ Notice ---- */
.notice{border-left:2px solid var(--ai);padding:12px 0 12px 14px;margin-top:16px;background:rgba(255,255,255,.32)}
.notice.warn{border-color:var(--bengara)}
.notice h2{font-size:15px}
.notice ol{margin:8px 0 0 18px;font-size:13.5px;line-height:1.9;color:#3A3A40}

/* ---------------------------------------------------- Barre d'onglets --- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;
  max-width:520px;margin:0 auto;
  background:rgba(231,225,211,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid rgba(22,34,63,.15);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;border:none;background:none;padding:11px 0 12px;cursor:pointer;color:var(--asagi);
  font-family:inherit;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.tab .ic{display:inline-flex}
.tab .ic svg{width:22px;height:22px;display:block}
.tab[aria-current="page"]{color:var(--kon)}

/* Boutons du fond personnalisé (dans une ligne À propos) */
.bg-actions{display:flex;flex-direction:column;gap:7px;min-width:190px}
.bg-actions .btn{width:auto;padding:10px 14px;font-size:13px}

/* ------------------------------------------------------------ Pied ------ */
.footer{margin-top:34px;padding-top:16px;border-top:1px solid rgba(22,34,63,.13);
  font-size:11px;color:var(--ai);opacity:.8;letter-spacing:.04em;line-height:1.9}
.footer b{font-family:var(--display);color:var(--kon)}

/* ---------------------------------------------------------- Toast ------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar) + 18px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);z-index:20;
  background:var(--kon);color:var(--washi);padding:12px 18px;border-radius:2px;
  font-size:13px;max-width:88vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ============================================= Phase 2 : capture ======== */
.capture-hint{max-width:34ch;margin:2px auto 6px;text-align:center;font-size:13px;color:#3A3A40}
#btn-import{margin-top:14px}
.import-hint{max-width:34ch;margin:8px auto 2px;text-align:center;font-size:12px;color:var(--ai);opacity:.85;line-height:1.6}

/* Panneau GPS (étape 1 : activer la localisation) */
#gps-panel{margin:14px auto 2px;max-width:340px;text-align:center}
.gps-status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:13px;color:var(--ok);
  padding:9px 16px;border:1px solid rgba(47,107,79,.4);border-radius:2px;
  background:rgba(47,107,79,.08);
}
.gps-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.gps-error{margin-top:10px;font-size:13px;color:var(--bengara);line-height:1.6}

.progress{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:14px auto 4px;padding:12px 16px;max-width:320px;
  background:rgba(34,64,107,.07);border:1px solid rgba(34,64,107,.18);border-radius:2px;
  font-size:13px;color:var(--ai);
}
.spin{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(34,64,107,.28);border-top-color:var(--ai);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================================== Phase 2 : filtres collection ===== */
.filters{margin:4px 0 16px}

/* Menu déroulant (un seul contrôle) — élément natif <details>/<summary>. */
.filter-select{position:relative}
.filter-select summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border:1px solid rgba(22,34,63,.22);border-radius:2px;
  background:rgba(255,255,255,.5);font-size:13px;color:var(--kon);
}
.filter-select summary::-webkit-details-marker{display:none}
.filter-title{font-family:var(--body)}
.filter-badge{
  font-family:var(--mono);font-size:11px;min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--kon);color:var(--washi);border-radius:10px;
}
.filter-caret{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ai);
  border-bottom:1.5px solid var(--ai);transform:rotate(45deg);transition:transform .2s}
.filter-select[open] .filter-caret{transform:rotate(-135deg)}
.filter-menu{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:8px;
  border:1px solid rgba(22,34,63,.16);border-radius:2px;background:rgba(255,255,255,.6);
  max-height:46vh;overflow:auto;
}
.chip{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:9px 10px;border-radius:2px;font-size:13px;color:var(--kon);
  transition:background .15s,color .15s;
}
.chip:hover{background:rgba(34,64,107,.06)}
.chip input{width:17px;height:17px;flex:none;accent-color:var(--ai);margin:0}
.chip span{flex:1;display:flex;justify-content:space-between;gap:10px}
.chip b{font-family:var(--mono);font-size:11px;color:var(--ai)}
.chip.is-on{background:rgba(34,64,107,.1);color:var(--kon)}

/* ============================================= Phase 2 : grille ========= */
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;
}
@media (min-width:440px){ .grid{grid-template-columns:repeat(3,1fr)} }
.card{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;
  color:inherit;padding:4px 0 10px;
}
.card-disc{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#3B5A85,var(--kon) 70%);
  box-shadow:inset 0 0 0 3px rgba(231,225,211,.8),var(--shadow);
  transition:transform .18s ease;
}
.card:active .card-disc{transform:scale(.96)}
.card-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-place{font-family:var(--display);font-size:14px;color:var(--kon);text-align:center;line-height:1.25}
.card-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ai);opacity:.75}

/* ============================================= Phase 2 : fiche ========== */
.back{
  background:none;border:none;color:var(--ai);font-family:var(--body);font-size:13px;
  padding:16px 0 6px;cursor:pointer;letter-spacing:.02em;
}
.fiche-disc{
  position:relative;width:200px;aspect-ratio:1;margin:8px auto 4px;border-radius:50%;
  overflow:hidden;background:radial-gradient(circle at 34% 28%,#3B5A85,var(--kon) 70%);
  box-shadow:inset 0 0 0 3px rgba(231,225,211,.8),var(--shadow);
  display:grid;place-items:center;
}
.fiche-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fiche-noimg{color:var(--washi);font-family:var(--display);font-size:13px;opacity:.7}
.fiche-ja{font-family:var(--display);color:var(--ai);font-size:13px;margin-top:-2px}

.field{display:block;margin:12px 0}
.field span{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ai);opacity:.85;margin-bottom:6px;
}
.field input,.field textarea{
  width:100%;padding:11px 12px;border:1px solid rgba(22,34,63,.22);border-radius:2px;
  background:rgba(255,255,255,.5);font-family:var(--body);font-size:15px;color:var(--sumi);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ai);background:#fff}
.field textarea{resize:vertical;line-height:1.6}

.check{display:flex;align-items:center;gap:11px;margin:12px 0;font-size:14px;color:var(--kon)}
.check input{width:20px;height:20px;flex:none;accent-color:var(--ai)}

.btn.danger{margin-top:12px}
.btn.danger.is-armed{background:var(--bengara);color:var(--washi);border-color:var(--bengara)}

/* Bouton « Enregistrer » confirmé : vert + coche dans un rond. */
.btn.is-saved{background:var(--ok);border-color:var(--ok);color:var(--washi)}
.check-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--washi);color:var(--ok);
  margin-right:9px;vertical-align:-5px;
}
.check-badge svg{width:12px;height:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .pulse{animation:none;opacity:.25}
  .spin{animation:none}
}