/* 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}

/* ── ce que la photo laisse voir ── */
.defauts{border-radius:12px; padding:14px; margin-bottom:16px;
  background:color-mix(in srgb, var(--prevu) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--prevu) 30%, transparent)}
.defauts .d-titre{font-size:15px; font-weight:700; margin:0 0 6px}
.defauts .d-liste{margin:0 0 8px; padding-left:22px; font-size:15px; line-height:1.7}
.defauts .d-alerte{font-size:15px; line-height:1.7; margin:0 0 8px; color:var(--bad)}
.defauts .d-rappel{font-size:14px; color:var(--mut); margin:0; line-height:1.6}
.defauts .d-texte{margin-top:10px}
.defauts .d-texte summary{cursor:pointer; font-size:14px; font-weight:600; padding:6px 0}
.defauts .d-texte pre{white-space:pre-wrap; word-break:break-word; font-family:inherit;
  font-size:14px; line-height:1.7; background:var(--sur); border:1px solid var(--lin);
  border-radius:8px; padding:12px; margin:6px 0 0; max-height:340px; overflow:auto}
.decoupage{border-color:color-mix(in srgb,var(--pri) 35%,transparent);
  background:color-mix(in srgb,var(--pri) 9%,transparent)}

/* La fiche d'une pièce : ce qui la sépare de ses variantes.
   Fond neutre — ce n'est ni une alerte ni une action, c'est une description. */
.fiche{background:var(--sur); border-color:var(--lin)}
.fiche .f-faces{display:flex; gap:12px; margin:0 0 12px; flex-wrap:wrap}
.fiche .f-face{flex:1 1 130px; min-width:130px}
.fiche .f-face img{width:100%; max-width:150px; aspect-ratio:1; object-fit:contain;
  background:var(--skel); border-radius:10px; display:block}
.fiche .f-face span{display:block; font-size:14px; color:var(--mut); margin-top:5px}
.fiche .f-mesures{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 10px}
.fiche .f-mesure{border:1px solid var(--lin); border-radius:10px; padding:7px 11px;
  background:var(--bg); font-size:14px; line-height:1.35}
.fiche .f-mesure b{display:block; font-size:13px; font-weight:400; color:var(--mut)}
.fiche .f-grave{margin:0; font-size:14px; line-height:1.7; color:var(--mut)}
.fiche .f-grave code{font-family:inherit; color:var(--ink); font-weight:500}

/* Les états d'une pièce : un par ligne, avec son prix et ce qu'il veut dire.
   « Beau » veut dire très abîmé — sans l'explication, personne ne peut deviner,
   et un mauvais état choisi fausse la valeur de toute la collection. */
.etats-lignes{display:flex; flex-direction:column; gap:8px}
.etat-ligne{display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:baseline;
  width:100%; text-align:left; min-height:50px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--bord); background:transparent; color:var(--ink);
  font-family:inherit; font-size:16px; line-height:1.7; cursor:pointer}
.etat-ligne .e-nom{font-weight:500}
.etat-ligne .e-prix{grid-row:1; grid-column:2; font-size:17px; white-space:nowrap}
.etat-ligne .e-dit{grid-column:1 / -1; font-size:14px; color:var(--mut); line-height:1.7}
.etat-ligne[data-choisi="1"]{border:2px solid var(--pri); padding:10px 13px;
  background:color-mix(in srgb, var(--pri) 12%, transparent)}
/* la graisse suffit : --pri sur fond teinté descend sous le contraste requis */
.etat-ligne[data-choisi="1"] .e-nom{font-weight:700}
.etat-ligne:focus-visible{outline:2px solid var(--pri); outline-offset:2px}

/* Les pastilles d'état pour les cartes, qui n'ont ni prix ni explication. */
.etat-pastille{min-height:44px; padding:0 15px; border-radius:99px;
  border:1px solid var(--bord); background:transparent; color:var(--ink);
  font-family:inherit; font-size:16px; cursor:pointer}
.etat-pastille[data-choisi="1"]{border:2px solid var(--pri); font-weight:700;
  background:color-mix(in srgb, var(--pri) 12%, transparent)}
.etat-pastille:focus-visible{outline:2px solid var(--pri); outline-offset:2px}

/* L'aperçu de la webcam : assez grand pour viser, pas plus. Il prenait tout
   l'écran alors qu'on n'y regarde que le cadrage. */
.apercu-webcam{width:100%; max-width:460px; margin:0 auto; display:block;
  border-radius:12px; background:#000; aspect-ratio:4/3; object-fit:cover}

/* Le zoom : la pièce est petite et la caméra large. On rogne au centre, à
   l'écran ET sur la photo envoyée, pour que les deux montrent la même chose. */
.cadre-webcam{position:relative; width:100%; max-width:460px; margin:0 auto}
.cadre-webcam .apercu-webcam{max-width:none; width:100%}
.viseur{position:absolute; inset:0; pointer-events:none; border-radius:12px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--pri) 70%, transparent) inset}
.reglage-zoom{display:flex; align-items:center; gap:12px; margin-top:12px}
.reglage-zoom label{font-size:15px; white-space:nowrap}
.reglage-zoom input[type=range]{flex-grow:1; height:34px; accent-color:var(--pri)}
.reglage-zoom .val{font-size:16px; min-width:3.4em; text-align:right}

/* Le mode deux faces : une case à cocher qui explique ce qu'elle fait. */
.deux-faces{display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  border:1px solid var(--bord); border-radius:12px; padding:14px; font-size:16px;
  line-height:1.7; background:transparent}
.deux-faces input{width:24px; height:24px; flex:none; margin-top:2px; accent-color:var(--pri)}
.deux-faces b{display:block; font-weight:600}
.deux-faces .df-dit{display:block; font-size:14px; color:var(--mut); line-height:1.7}
.deux-faces:has(input:checked){border:2px solid var(--pri); padding:13px;
  background:color-mix(in srgb, var(--pri) 10%, transparent)}
.deux-faces:focus-within{outline:2px solid var(--pri); outline-offset:2px}
.decoupage .btn{margin-top:10px}