/* Cosméto Maison : apothicaire en verre cobalt. Polices système uniquement (rapide, hors ligne). */
:root {
  --fond: #F5F6F8;
  --surface: #FFFFFF;
  --encre: #1B2333;
  --encre-douce: #5E6878;
  --trait: #DDE2EA;
  --cobalt: #2C4F8C;
  --cobalt-pale: #E6ECF6;
  --sur-cobalt: #FFFFFF;
  --sauge: #3D7656;
  --sauge-pale: #E5F0E9;
  --miel: #9A6510;
  --miel-pale: #FBF0DC;
  --rouge: #A8352A;
  --rouge-pale: #F9E6E3;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --rayon: 10px;
  --barre: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="clair"]) {
    --fond: #10141B; --surface: #171D27; --encre: #E6EAF1; --encre-douce: #98A2B3; --trait: #283142;
    --cobalt: #8DAEE6; --cobalt-pale: #1D2840; --sur-cobalt: #0E1626;
    --sauge: #86C8A1; --sauge-pale: #16281E; --miel: #E5B45E; --miel-pale: #2B2213; --rouge: #EE9A90; --rouge-pale: #321A18;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 16px/1.55 var(--sans);
  padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom));
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 1.85rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- En-tête et navigation ---------- */
.entete { display: flex; align-items: center; gap: 24px; padding: 14px 16px 6px; max-width: 760px; margin: 0 auto; }
.marque { white-space: nowrap; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--cobalt); }
.logo { width: 30px; height: 30px; stroke-width: 1.5; }
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  background: var(--surface); border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
.onglets button {
  flex: 1; height: var(--barre); border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--encre-douce); font-size: .72rem; -webkit-tap-highlight-color: transparent;
}
.onglets button svg { width: 23px; height: 23px; }
.onglets button[aria-current="page"] { color: var(--cobalt); font-weight: 600; }
.onglets button[aria-current="page"] svg { stroke-width: 2; }

@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .entete { justify-content: space-between; padding: 20px 16px; }
  .onglets { position: static; border: 0; background: none; gap: 4px; padding: 0; }
  .onglets button { flex: none; flex-direction: row; height: 38px; padding: 0 14px; border-radius: 99px; font-size: .9rem; gap: 7px; }
  .onglets button svg { width: 18px; height: 18px; }
  .onglets button:hover { color: var(--encre); }
  .onglets button[aria-current="page"] { background: var(--cobalt-pale); }
}

.bouton-theme { margin-left: auto; }
.lien-aide { margin-left: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--cobalt); font-weight: 600; font-size: .92rem;
  text-decoration: none; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--trait); background: var(--surface); }
.lien-aide span { width: 22px; height: 22px; border-radius: 50%; background: var(--cobalt); color: var(--sur-cobalt); display: grid; place-items: center; font-size: .8rem; }
@media (min-width: 860px) { .lien-aide { margin-left: 0; } }
.intro a { color: var(--cobalt); font-weight: 600; }
main { max-width: 760px; margin: 0 auto; padding: 10px 16px 32px; }
section > h1 { margin-top: 12px; }
.intro { color: var(--encre-douce); margin: 6px 0 22px; max-width: 60ch; }
.discret { color: var(--encre-douce); font-size: .88rem; }
small { color: var(--encre-douce); font-weight: 400; font-size: .82rem; }
.chargement { padding: 40px 0; text-align: center; color: var(--encre-douce); }
.titre-bloc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 10px; }

/* ---------- Boutons et champs ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--rayon); border: 1px solid var(--cobalt);
  background: var(--cobalt); color: var(--sur-cobalt); font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bouton.secondaire { background: transparent; color: var(--cobalt); }
.bouton.petit { min-height: 36px; padding: 0 12px; font-size: .86rem; }
.bouton:disabled { opacity: .55; cursor: default; }
.bouton:active { transform: translateY(1px); }
.icone { border: 0; background: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; cursor: pointer; color: var(--encre-douce); }
.icone:hover { background: var(--cobalt-pale); color: var(--encre); }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--rayon);
  border: 1px solid var(--trait); background: var(--surface);
}
textarea { resize: vertical; }
input[type="number"] { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--cobalt); margin: 0; }

/* ---------- Zone de scan ---------- */
.scan {
  border: 1.5px dashed color-mix(in srgb, var(--cobalt) 45%, var(--trait)); border-radius: 16px;
  background: var(--surface); padding: 22px 18px; transition: border-color .15s, background-color .15s;
}
.scan.survol { border-color: var(--cobalt); background: var(--cobalt-pale); }
.scan-vide { text-align: center; }
.scan-titre { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.scan-aide { color: var(--encre-douce); font-size: .92rem; margin-top: 4px; }
.scan-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 12px; }
.scan-encours { display: flex; gap: 16px; align-items: center; }
.scan-encours img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--trait); }
.scan-encours > div { flex: 1; }
.progression { height: 4px; border-radius: 4px; background: var(--trait); overflow: hidden; margin-top: 10px; }
.progression i { display: block; height: 100%; width: 35%; background: var(--cobalt); border-radius: 4px; animation: glisse 1.3s ease-in-out infinite; }
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .progression i { animation: none; width: 100%; opacity: .5; } }

.ligne-saisie { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; position: relative; }
.ligne-saisie input { padding-left: 42px; }
.icone-champ { position: absolute; left: 12px; color: var(--encre-douce); }

.resultat-scan { margin-top: 16px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; }
.resultat-scan h3 { margin-bottom: 8px; }
.produit { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.produit img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
.resultat-scan details { margin-top: 12px; }

/* ---------- Listes ---------- */
.liste { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.liste:empty { display: none; }
.element { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--trait); min-height: 60px; }
.element:first-child { border-top: 0; }
.element .texte { flex: 1; min-width: 0; }
.element .nom { font-weight: 600; }
.element .sous { color: var(--encre-douce); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.element .quantite { display: flex; align-items: center; gap: 6px; color: var(--encre-douce); font-size: .88rem; }
.element.cliquable { cursor: pointer; }
.element.cliquable:hover { background: var(--cobalt-pale); }
.vide { padding: 28px 18px; text-align: center; color: var(--encre-douce); background: var(--surface); border: 1px dashed var(--trait); border-radius: 14px; }
.vide .bouton { margin-top: 14px; }

.recherche { position: relative; margin-top: 26px; }
.suggestions { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); margin-top: 6px; overflow: hidden; }
.suggestions:empty { display: none; }
.suggestions button { display: flex; width: 100%; text-align: left; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; border-top: 1px solid var(--trait); background: none; cursor: pointer; }
.suggestions button:first-child { border-top: 0; }
.suggestions button:hover, .suggestions button:focus-visible { background: var(--cobalt-pale); }

.pastille { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.p-ok { background: var(--sauge-pale); color: var(--sauge); }
.p-miel { background: var(--miel-pale); color: var(--miel); }
.p-rouge { background: var(--rouge-pale); color: var(--rouge); }
.p-neutre { background: var(--cobalt-pale); color: var(--cobalt); }

/* Anneau de complétude des recettes */
.anneau { width: 40px; height: 40px; flex-shrink: 0; }
.anneau circle { fill: none; stroke-width: 3.5; }
.anneau .fond-anneau { stroke: var(--trait); }
.anneau .plein { stroke: var(--cobalt); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.anneau.complet .plein { stroke: var(--sauge); }
.anneau text { stroke: none; font: 600 11px var(--sans); fill: var(--encre-douce); text-anchor: middle; dominant-baseline: central; }

/* ---------- Étiquette de recette (élément signature) ---------- */
.retour { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--cobalt); font-weight: 600; cursor: pointer; padding: 8px 0; margin: 4px 0 10px; }
.etiquette {
  background: var(--surface); border: 1px solid var(--encre); border-radius: 6px; padding: 5px;
  box-shadow: 0 1px 0 var(--trait), 0 10px 30px -18px rgba(27, 35, 51, .35);
}
.etiquette-int { border: 1px solid var(--encre); border-radius: 3px; padding: 22px 20px 20px; }
.etiquette-tete { text-align: center; border-bottom: 1px solid var(--trait); padding-bottom: 16px; }
.etiquette-tete .categorie { font-family: var(--serif); font-style: italic; color: var(--encre-douce); }
.etiquette-tete h1 { font-size: 2rem; margin: 4px 0 8px; }
.etiquette-tete p { color: var(--encre-douce); max-width: 46ch; margin: 0 auto; font-size: .95rem; }
.quantite-totale { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 6px; font-size: .95rem; }
.formule { list-style: none; padding: 0; margin: 10px 0 0; }
.formule li { padding: 10px 0; border-bottom: 1px dotted var(--trait); }
.formule li:last-child { border-bottom: 0; }
.formule .haut { display: flex; align-items: baseline; gap: 8px; }
.formule .ingr { font-weight: 600; }
.formule .points { flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--encre-douce) 60%, transparent); transform: translateY(-4px); min-width: 20px; }
.formule .grammes { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.formule .bas { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--encre-douce); font-size: .84rem; flex-wrap: wrap; }
.formule .bas select { width: auto; min-height: 32px; padding: 4px 8px; font-size: .84rem; }
.formule .bas input { width: 70px; min-height: 32px; padding: 4px 8px; font-size: .84rem; }
.unite { font-size: .86rem; color: var(--encre-douce); background: var(--fond); border-radius: var(--rayon); padding: 10px 12px; margin-top: 14px; }
.formule .repere { text-align: right; font-size: .84rem; color: var(--cobalt); margin-top: 2px; }
.formule li.absent .ingr { color: var(--encre-douce); }
.formule li.facultatif .grammes { color: var(--encre-douce); font-size: 1.05rem; }
.manquants { background: var(--miel-pale); color: var(--miel); border-radius: var(--rayon); padding: 12px 14px; margin-top: 16px; font-size: .92rem; }
.manquants ul { margin: 6px 0 0; padding-left: 18px; }
.etapes { counter-reset: e; list-style: none; padding: 0; margin: 10px 0 0; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 7px 0; }
.etapes li::before { content: counter(e); font-family: var(--serif); font-weight: 600; color: var(--cobalt); font-size: 1.1rem; line-height: 1.4; }
.bloc-etiquette { margin-top: 22px; }
.securite { background: var(--rouge-pale); color: var(--rouge); border-radius: var(--rayon); padding: 12px 14px; margin-top: 18px; font-size: .9rem; }
.securite ul { margin: 6px 0 0; padding-left: 18px; }
.alerte { background: var(--miel-pale); color: var(--miel); border-radius: var(--rayon); padding: 10px 12px; margin-top: 10px; font-size: .9rem; }

/* ---------- Savon ---------- */
.panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 4px 0; }
.panneau .liste { border: 0; border-radius: 0; }
.reglages label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--trait); }
.reglages label > span { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--encre-douce); }
.reglages small { display: block; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; }
.chiffres div { padding: 16px 10px; text-align: center; border-left: 1px solid var(--trait); }
.chiffres div:first-child { border-left: 0; }
.chiffres b { display: block; font-family: var(--serif); font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.chiffres span { color: var(--encre-douce); font-size: .82rem; }
.chiffres .cle b { color: var(--cobalt); }
.profil { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; }
.qualite { padding: 7px 0; }
.qualite .haut { display: flex; justify-content: space-between; font-size: .92rem; }
.jauge { position: relative; height: 6px; border-radius: 6px; background: var(--trait); margin-top: 6px; }
.jauge .plage { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--sauge) 35%, transparent); border-radius: 6px; }
.jauge .valeur { position: absolute; top: -4px; width: 4px; height: 14px; border-radius: 2px; background: var(--encre); transition: left .2s; }

/* ---------- Ingrédients ---------- */
.filtres { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.filtres button { flex-shrink: 0; border: 1px solid var(--trait); background: var(--surface); border-radius: 99px; padding: 6px 13px; font-size: .85rem; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: var(--sur-cobalt); }
.fiche { padding: 18px 0; border-bottom: 1px solid var(--trait); }
.fiche-tete { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.fiche .inci { font-style: italic; font-family: var(--serif); color: var(--encre-douce); }
.fiche p { margin-top: 6px; max-width: 62ch; }
.fiche .attention { color: var(--miel); font-size: .88rem; margin-top: 6px; }
.fiche .officiel { color: var(--encre-douce); font-size: .8rem; margin-top: 6px; }

/* ---------- Base ---------- */
.panneau.maj { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; }
.source .etat { font-size: .8rem; margin-top: 2px; color: var(--encre-douce); }
.source .nom-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.maj-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.bandeau { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  background: var(--rouge-pale); color: var(--rouge); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; font-size: .92rem; }
.bandeau ul { margin: 6px 0; padding-left: 18px; }
.bandeau p { color: var(--encre-douce); }
.onglets button { position: relative; }
.onglets button.signal::after { content: ""; position: absolute; top: 10px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 860px) { .onglets button.signal::after { top: 6px; left: auto; right: 6px; } }
.regle { font-size: .86rem; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--cobalt); }
.regle.interdit { border-color: var(--rouge); color: var(--rouge); font-weight: 600; }
.usage { font-size: .86rem; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--sauge); }
.verifie { font-size: .84rem; color: var(--sauge); margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.verifie::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--sauge-pale); box-shadow: inset 0 0 0 1.5px var(--sauge); }
.source .etat.ok { color: var(--sauge); }
.source .etat.erreur { color: var(--rouge); }
.source .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.source .actions .bouton { min-height: 32px; font-size: .82rem; padding: 0 10px; }
.interrupteur { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.interrupteur input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.interrupteur span { position: absolute; inset: 0; background: var(--trait); border-radius: 99px; transition: background .15s; }
.interrupteur span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.interrupteur input:checked + span { background: var(--cobalt); }
.interrupteur input:checked + span::after { transform: translateX(18px); }
.journal { margin-top: 30px; }
.journal summary { cursor: pointer; color: var(--cobalt); font-weight: 600; padding: 8px 0; }
.journal .entree { font-size: .84rem; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.journal .entree.erreur { color: var(--rouge); }

/* ---------- Fenêtres ---------- */
dialog {
  border: 0; padding: 0; border-radius: 16px; width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px);
  background: var(--surface); color: var(--encre); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
}
dialog::backdrop { background: rgba(16, 20, 27, .45); }
dialog form { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
dialog label, dialog fieldset { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; }
dialog label.case { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: 6px; }
.dlg-tete { display: flex; justify-content: space-between; align-items: center; margin: -4px -8px 0 0; }
.dlg-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.puces label { flex-direction: row; align-items: center; gap: 6px; border: 1px solid var(--trait); border-radius: 99px; padding: 5px 12px; font-weight: 400; font-size: .86rem; cursor: pointer; }
.puces label:has(input:checked) { background: var(--cobalt-pale); border-color: var(--cobalt); color: var(--cobalt); }
.puces input { width: 0; height: 0; min-height: 0; opacity: 0; position: absolute; }
.erreur { color: var(--rouge); font-size: .9rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--barre) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--encre); color: var(--fond); padding: 10px 16px; border-radius: 10px; font-size: .9rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100% - 32px);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 860px) { .toast { bottom: 24px; } }

.pied { max-width: 760px; margin: 0 auto; padding: 0 16px 28px; color: var(--encre-douce); font-size: .78rem; }

@media (max-width: 420px) {
  h1 { font-size: 1.6rem; }
  .etiquette-tete h1 { font-size: 1.65rem; }
  .etiquette-int { padding: 18px 14px 16px; }
  .chiffres b { font-size: 1.3rem; }
  .panneau.maj { flex-direction: column; align-items: stretch; }
  .maj-boutons .bouton { flex: 1; }
}

/* ---------- Scan : état de chargement et erreurs ---------- */
.progression.determinee i { animation: none; transition: width .25s ease; }
.scan-encours img[hidden] { display: none; }
.erreur-bloc { background: var(--rouge-pale); color: var(--rouge); }
.erreur-bloc p { color: var(--encre); margin: 4px 0 8px; }
.erreur-bloc details { margin-top: 6px; color: var(--encre-douce); }
.erreur-bloc summary { cursor: pointer; font-size: .82rem; }
.erreur-bloc pre { white-space: pre-wrap; word-break: break-word; font-size: .78rem; margin: 6px 0 0; color: var(--encre-douce); }
.alerte a { color: inherit; text-decoration: underline; }

/* ---------- Stock : saisie en g ou en ml ---------- */
.element .quantite select { width: auto; min-height: 36px; padding: 4px 6px; font-size: .88rem; }
.element .equivalent { font-size: .8rem; }

/* ---------- Scanner de code-barres (plein écran) ---------- */
dialog.scanner { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; background: #000; color: #fff; }
dialog.scanner::backdrop { background: #000; }
.scanner-cadre { position: relative; width: 100%; height: 100%; overflow: hidden; }
.scanner-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visee {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(82vw, 440px); aspect-ratio: 2.1 / 1; border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .55); outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 0;
  transition: outline-color .2s;
}
.visee.trouve { outline: 4px solid #6BD49A; }
.laser { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #FF5A4E; box-shadow: 0 0 8px #FF5A4E; animation: balaye 1.8s ease-in-out infinite alternate; }
@keyframes balaye { from { top: 18%; } to { top: 82%; } }
@media (prefers-reduced-motion: reduce) { .laser { animation: none; } }
.scanner-haut { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.scanner-haut .icone { color: #fff; background: rgba(0, 0, 0, .45); border-radius: 50%; }
.scanner-bas { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, .75) 30%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scanner-etat { font-weight: 600; min-height: 1.4em; max-width: 520px; }
.scanner-etat.ok { color: #6BD49A; }
.scanner-etat.erreur { color: #FFB4AB; }
.scanner-note { font-size: .8rem; opacity: .75; max-width: 520px; }
.scanner-points { display: flex; gap: 8px; }
.scanner-points i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); }
.scanner-points i.plein { background: #6BD49A; border-color: #6BD49A; }
.scanner .bouton.secondaire { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ---------- Recettes : catégories ---------- */
.categorie-recettes { margin-top: 10px; }
.categorie-recettes > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; }
.categorie-recettes > summary::-webkit-details-marker { display: none; }
.categorie-recettes > summary::after { content: "+"; margin-left: auto; color: var(--cobalt); font-size: 1.3rem; line-height: 1; }
.categorie-recettes[open] > summary { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
.categorie-recettes[open] > summary::after { content: "−"; }
.categorie-recettes .nom-cat { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.categorie-recettes > .liste { border-radius: 0 0 14px 14px; border-top: 0; }
#liste-recettes > .liste { margin-top: 10px; }
.filtres button[data-realisables] { border-color: var(--sauge); color: var(--sauge); }
.filtres button[data-realisables][aria-pressed="true"] { background: var(--sauge); border-color: var(--sauge); color: var(--surface); }

/* ---------- Scan : produit fini ---------- */
.produit-fini { background: var(--miel-pale); border-radius: var(--rayon); padding: 12px 14px; margin-top: 12px; }
.produit-fini > b { color: var(--miel); }
.produit-fini p { margin-top: 6px; font-size: .92rem; }
.puces-recettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.composition { margin-top: 10px; }
.composition summary { cursor: pointer; }
.lien { background: none; border: 0; padding: 0; color: var(--cobalt); text-decoration: underline; cursor: pointer; font: inherit; }


/* =====================================================================
   Thèmes (choix dans « Apparence ») et modernisation de l'interface
   ===================================================================== */
:root { --ombre: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.18); --verre: rgba(255, 255, 255, .82); --rayon: 12px; --fond: #F4F5F8; }
:root[data-mode="sombre"] {
    --fond: #10141B; --surface: #171D27; --encre: #E6EAF1; --encre-douce: #98A2B3; --trait: #283142;
    --cobalt: #8DAEE6; --cobalt-pale: #1D2840; --sur-cobalt: #0E1626;
    --sauge: #86C8A1; --sauge-pale: #16281E; --miel: #E5B45E; --miel-pale: #2B2213; --rouge: #EE9A90; --rouge-pale: #321A18;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); --verre: rgba(23, 29, 39, .82);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-mode="clair"]) { --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); --verre: rgba(23, 29, 39, .82); --fond: #10141B; } }
:root[data-couleur="sauge"] { --cobalt: #2F6B4F; --cobalt-pale: #E3EFE8; --sur-cobalt: #FFFFFF; }
:root[data-couleur="sauge"][data-mode="sombre"] { --cobalt: #86C8A1; --cobalt-pale: #15291F; --sur-cobalt: #0B1A12; }
@media (prefers-color-scheme: dark) { :root[data-couleur="sauge"][data-mode="auto"] { --cobalt: #86C8A1; --cobalt-pale: #15291F; --sur-cobalt: #0B1A12; } }
:root[data-couleur="terracotta"] { --cobalt: #A2482B; --cobalt-pale: #F7E7E0; --sur-cobalt: #FFFFFF; }
:root[data-couleur="terracotta"][data-mode="sombre"] { --cobalt: #F0A07F; --cobalt-pale: #33201A; --sur-cobalt: #2A1209; }
@media (prefers-color-scheme: dark) { :root[data-couleur="terracotta"][data-mode="auto"] { --cobalt: #F0A07F; --cobalt-pale: #33201A; --sur-cobalt: #2A1209; } }
:root[data-couleur="prune"] { --cobalt: #6B3E7C; --cobalt-pale: #F0E7F4; --sur-cobalt: #FFFFFF; }
:root[data-couleur="prune"][data-mode="sombre"] { --cobalt: #C9A2DB; --cobalt-pale: #2A1E31; --sur-cobalt: #1C1023; }
@media (prefers-color-scheme: dark) { :root[data-couleur="prune"][data-mode="auto"] { --cobalt: #C9A2DB; --cobalt-pale: #2A1E31; --sur-cobalt: #1C1023; } }
:root[data-couleur="ardoise"] { --cobalt: #334155; --cobalt-pale: #E7EBF0; --sur-cobalt: #FFFFFF; }
:root[data-couleur="ardoise"][data-mode="sombre"] { --cobalt: #B4C0D3; --cobalt-pale: #222B38; --sur-cobalt: #111827; }
@media (prefers-color-scheme: dark) { :root[data-couleur="ardoise"][data-mode="auto"] { --cobalt: #B4C0D3; --cobalt-pale: #222B38; --sur-cobalt: #111827; } }

body { transition: background-color .25s ease, color .25s ease; }
h1 { letter-spacing: -0.02em; }

/* En-tête collant translucide */
/* Le flou est porté par un pseudo-élément : sur l'en-tête lui-même, il deviendrait le repère de la barre d'onglets « fixed » */
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--verre); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.entete { position: sticky; top: 0; z-index: 15; isolation: isolate;
  max-width: none; padding-left: max(16px, calc((100% - 760px) / 2 + 16px)); padding-right: max(16px, calc((100% - 760px) / 2 + 16px)); }
.bouton-theme { border: 1px solid var(--trait); background: var(--surface); color: var(--cobalt); width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; cursor: pointer; }
.bouton-theme:hover { border-color: var(--cobalt); }

/* Barre d'onglets flottante (mobile) */
@media (max-width: 859px) {
  .onglets { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding-bottom: 0; border: 1px solid var(--trait); border-radius: 22px;
    background: var(--verre); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: var(--ombre); overflow: hidden; }
  body { padding-bottom: calc(var(--barre) + 26px + env(safe-area-inset-bottom)); }
  .onglets button { position: relative; }
  .onglets button[aria-current="page"]::before { content: ""; position: absolute; top: 7px; width: 46px; height: 30px; border-radius: 99px; background: var(--cobalt-pale); z-index: -1; }
  .onglets button svg { margin-top: 2px; }
  .toast { bottom: calc(var(--barre) + 30px + env(safe-area-inset-bottom)); }
}

/* Cartes : arrondis plus généreux et ombres douces */
.liste, .panneau, .chiffres, .suggestions, .vide, .scan, .categorie-recettes > summary { box-shadow: var(--ombre); }
.liste, .panneau, .chiffres { border-radius: 16px; }
.categorie-recettes > .liste { box-shadow: var(--ombre); }
.scan { border-radius: 20px; }
.element { transition: background-color .15s ease; }
.element.cliquable:active { background: var(--cobalt-pale); }

/* Boutons et champs */
.bouton { border-radius: 12px; transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease; }
.bouton:not(.secondaire) { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--cobalt) 70%, transparent); }
.bouton:not(.secondaire):hover { filter: brightness(1.06); }
.bouton.secondaire:hover { background: var(--cobalt-pale); }
input, select, textarea { border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 22%, transparent); }
.recherche input { padding-left: 14px; }
.filtres button { transition: background-color .15s ease, color .15s ease; }
.pastille { letter-spacing: .01em; }

/* Fenêtres */
dialog { border-radius: 20px; }
dialog::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Fenêtre « Apparence » */
.choix-theme { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; font-weight: 400; }
.choix-theme label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1.5px solid var(--trait); border-radius: 14px; cursor: pointer; font-size: .88rem; font-weight: 500; }
.choix-theme label:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-pale); color: var(--cobalt); font-weight: 600; }
.choix-theme input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.choix-theme label:has(input:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.pastille-couleur { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.apercu-mode { width: 44px; height: 30px; border-radius: 8px; border: 1px solid var(--trait); }
.apercu-mode.clair { background: linear-gradient(135deg, #F4F5F8 50%, #FFFFFF 50%); }
.apercu-mode.sombre { background: linear-gradient(135deg, #10141B 50%, #171D27 50%); }
.apercu-mode.auto { background: linear-gradient(135deg, #F4F5F8 50%, #10141B 50%); }

@media (prefers-reduced-motion: reduce) { body, .bouton, .element, input { transition: none; } }
.onglets button { isolation: isolate; }
@media (min-width: 860px) { .bouton-theme { margin-left: 0; } }
.entete .lien-aide { margin-left: -14px; }
@media (min-width: 860px) { .entete { justify-content: flex-start; } .entete .onglets { margin-left: auto; } }
@media (min-width: 860px) { .entete .bouton-theme { margin-left: 16px; } #filtres-recettes { flex-wrap: wrap; overflow: visible; } }