/* Charte Oria « Mandarine », amendée le 22/08/2026 pour la lisibilité.
   Voir la note « Lisibilité » plus bas : elle prime sur le reste. */
:root{
  --bg:#faf5ee; --sur:#ffffff; --ink:#2b2118; --mut:#8a7a6a;
  --lin:rgba(43,33,24,.12); --bord:rgba(43,33,24,.22);
  --pri:#e2571b; --onpri:#ffffff; --star:#e2a11b;
  --ok:#0b7c71; --bad:#b53264; --prevu:#96660f;
  --skel:rgba(43,33,24,.08); --skel2:rgba(43,33,24,.16);
  --ombre:0 8px 24px rgba(43,33,24,.10);
}
@media (prefers-color-scheme:dark){
  :root:not([data-oria="clair"]){
    --bg:#201a14; --sur:#2a2219; --ink:#f5ede2; --mut:#a5937d;
    --lin:rgba(245,237,226,.12); --bord:rgba(245,237,226,.26);
    --pri:#f58a4b; --onpri:#2a1608; --star:#f0b429;
    --ok:#6fd3ac; --bad:#f094b8; --prevu:#e6c078;
    --skel:rgba(245,237,226,.08); --skel2:rgba(245,237,226,.16);
    --ombre:0 8px 24px rgba(0,0,0,.34);
  }
}
:root[data-oria="sombre"]{
  --bg:#201a14; --sur:#2a2219; --ink:#f5ede2; --mut:#a5937d;
  --lin:rgba(245,237,226,.12); --bord:rgba(245,237,226,.26);
  --pri:#f58a4b; --onpri:#2a1608; --star:#f0b429;
  --ok:#6fd3ac; --bad:#f094b8; --prevu:#e6c078;
  --skel:rgba(245,237,226,.08); --skel2:rgba(245,237,226,.16);
  --ombre:0 8px 24px rgba(0,0,0,.34);
}

/* ── Lisibilité : règle qui prime sur tout le reste ──────────────────
   Virginie est dyslexique et les chiffres lui coûtent le plus. D'où :
   - Atkinson Hyperlegible pour les titres et TOUS les chiffres : dessinée
     par le Braille Institute, ses 0/O, 1/l/I et 6/9 ne se confondent pas.
   - Lexend pour le texte courant : conçue pour la fluidité de lecture.
   - Aucun trait fin (graisse 400 minimum), aucune MAJUSCULE en continu,
     interlignage large, texte jamais justifié, fond crème et non blanc.
   Le Bodoni Moda de la charte a été retiré : ses pleins et déliés extrêmes
   et ses chiffres à empattements fins sont précisément ce qui la gêne. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Lexend,"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400; font-size:17px; line-height:1.7; letter-spacing:.006em;
  text-align:left; -webkit-font-smoothing:antialiased;
}
p,li{max-width:66ch}
strong,b{font-weight:700}
em,i{font-style:normal; font-weight:700}   /* l'italique se lit mal : on appuie autrement */

/* titres */
.serif{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  font-weight:700; letter-spacing:.004em}

/* CHIFFRES — le point le plus sensible : caractère lisible, chasse fixe,
   chiffres espacés pour qu'ils ne se collent pas les uns aux autres */
.nb,.chiffre{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  font-variant-numeric:tabular-nums lining-nums; font-weight:700; letter-spacing:.045em}

.page{max-width:760px; margin:0 auto; padding:18px 16px 96px;
  display:flex; flex-direction:column; gap:18px}
@media(min-width:900px){.page{max-width:1120px; padding:30px 32px 96px; gap:22px}}
/* étiquettes : plus de MAJUSCULES, elles ralentissent la lecture */
.etq{font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--mut); margin:0}

/* en-tête */
.tete{display:flex; align-items:center; justify-content:space-between; gap:12px}
.marque{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.marque span{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  font-weight:700; font-size:21px}
.rond{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:99px; border:1px solid var(--bord);
  background:transparent; color:var(--mut); cursor:pointer; padding:0; flex:none}
.rond:hover{border-color:var(--pri); color:var(--pri)}
.rond:focus-visible{outline:2px solid var(--pri); outline-offset:2px}

/* cartes */
.carte{background:var(--sur); border:1px solid var(--lin); border-radius:14px; padding:18px 16px}
@media(min-width:900px){.carte{padding:22px 20px}}
.carte h2{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  font-weight:700; font-size:20px; margin:0 0 4px; letter-spacing:.004em}
.carte .sous{font-size:14.5px; color:var(--mut); margin:0 0 16px}

/* boutons — pilule 99px, comme la charte */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:12px 26px; border-radius:99px; font-size:16px; font-weight:600;
  font-family:inherit; border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:filter .12s ease}
.btn:hover{filter:brightness(.94)}
.btn:focus-visible{outline:2px solid var(--pri); outline-offset:2px}
.btn:disabled{opacity:.4; cursor:default; filter:none}
.btn-pri{background:var(--pri); color:var(--onpri)}
.btn-sec{background:transparent; border-color:var(--pri); color:var(--pri)}
.btn-neu{background:transparent; border-color:var(--bord); color:var(--ink)}
.btn-bad{background:transparent; border-color:var(--bad); color:var(--bad)}
.btn-grand{min-height:64px; font-size:18px}
.btn-large{width:100%}

/* champs */
.champ{width:100%; border:1px solid var(--bord); border-radius:10px; padding:13px 15px;
  font-size:16px; font-family:inherit; background:var(--sur); color:var(--ink)}
.champ:focus{outline:none; border:2px solid var(--pri); padding:10px 13px}
label.lab{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.aide{font-size:14px; color:var(--mut); margin:6px 0 0}
.err{font-size:13px; color:var(--bad); margin:6px 0 0}

/* pilules d'état */
.pil{display:inline-flex; align-items:center; font-size:14px; font-weight:600;
  padding:5px 13px; border-radius:99px; white-space:nowrap}
.pil-ok{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok)}
.pil-bad{background:color-mix(in srgb,var(--bad) 15%,transparent); color:var(--bad)}
.pil-neu{background:var(--skel); color:var(--mut)}
.pil-att{background:color-mix(in srgb,var(--prevu) 16%,transparent); color:var(--prevu)}

/* toast */
#toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  background:var(--sur); border:1px solid var(--lin); border-left:3px solid var(--pri);
  border-radius:12px; padding:13px 16px; font-size:13px; box-shadow:var(--ombre);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:50; max-width:calc(100vw - 32px)}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.mauvais{border-left-color:var(--bad)}
#toast.bon{border-left-color:var(--ok)}

/* barre de navigation basse */
.nav{position:fixed; left:0; right:0; bottom:0; background:var(--sur);
  border-top:1px solid var(--lin); display:flex; z-index:40;
  padding-bottom:env(safe-area-inset-bottom,0)}
.nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px; text-decoration:none; color:var(--mut); font-size:13px; min-height:56px;
  justify-content:center}
.nav a.actif{color:var(--pri)}
.nav a:focus-visible{outline:2px solid var(--pri); outline-offset:-2px}

/* squelette de chargement */
.skel{background:linear-gradient(90deg,var(--skel) 25%,var(--skel2) 50%,var(--skel) 75%);
  background-size:200% 100%; animation:oria-shimmer 1.6s linear infinite; border-radius:8px}
@keyframes oria-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* état vide */
.vide{background:var(--sur); border:1px dashed var(--bord); border-radius:16px;
  padding:38px 28px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:12px}
.vide .rondeau{width:52px; height:52px; border-radius:99px;
  background:color-mix(in srgb,var(--pri) 13%,transparent); display:flex;
  align-items:center; justify-content:center; color:var(--pri)}
.vide h3{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  font-weight:700; font-size:20px; margin:0}
.vide p{font-size:13px; color:var(--mut); margin:0; max-width:34ch}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ── « cette photo ressemble à ce que tu as déjà » ── */
.deja{border:2px solid var(--pri); border-radius:14px; padding:14px;
  background:color-mix(in srgb, var(--pri) 8%, transparent); margin-bottom:16px}
.deja-ligne{display:grid; grid-template-columns:56px 1fr; gap:12px; padding:12px 0;
  border-top:1px solid var(--lin)}
.deja-ligne:first-of-type{border-top:none}
.deja-ligne img{width:56px; aspect-ratio:245/342; object-fit:contain;
  border-radius:6px; background:var(--skel); display:block}
.deja-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.deja-nom{font-size:16px; font-weight:700}
.deja-det{font-size:13.5px; color:var(--mut)}
.deja-sur{font-size:13px; color:var(--pri); font-weight:700}
.deja-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.deja-actions .btn{min-height:44px; padding:9px 16px; font-size:14px}