/* Fiches Soins Visage — styles écran + impression A4.
   Les fiches (.fiche) utilisent des tailles en « em » : l’impression les réduit d’un bloc. */
:root {
  --wine: #5b1e2e; --wine-2: #7a2c40; --rose: #c4727f; --rose-d: #a4505f; --rose-soft: #f4e1e2;
  --cream: #fcf6f0; --bg: #f6eee8; --gold: #b8955a; --gold-d: #96763f; --gold-soft: #ecdcc0;
  --ink: #34262a; --muted: #75646a; --line: #e6d6cd; --ok: #3d7a57; --no: #a23b4a; --white: #fff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: var(--wine-2); }
h1, h2, h3, h4 { font-family: var(--serif); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid #e4a3ad; outline-offset: 2px; border-radius: 6px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.screen-only { }
#print-root { display: none; }

/* ───────── barre du haut ───────── */
.top { position: sticky; top: 0; z-index: 50; background: var(--wine); color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18); padding-top: env(safe-area-inset-top); }
.top__in { display: flex; align-items: center; gap: 12px; padding: 10px 16px; max-width: 1180px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; flex: none; }
.brand__ic { color: #e8cf9f; display: inline-flex; }
.brand__ic .ic { width: 28px; height: 28px; }
.brand__t { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .01em; white-space: nowrap; }
.brand__t em { color: #e8cf9f; }
.search { flex: 1; position: relative; min-width: 0; }
.search__ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; }
.search input { width: 100%; height: 44px; border-radius: 999px; border: 2px solid transparent; padding: 0 16px 0 40px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); }
.search input::placeholder { color: #8a7a7f; }
.search input:focus { border-color: #e4a3ad; outline: none; }
.top__act { display: flex; gap: 6px; flex: none; }
.nav { display: flex; gap: 4px; padding: 0 16px 8px; max-width: 1180px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: #f5e6ea; text-decoration: none; padding: 7px 14px; border-radius: 999px; font-size: .92rem; white-space: nowrap; border: 1px solid transparent; }
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { background: #fff; color: var(--wine); font-weight: 600; }

/* ───────── boutons ───────── */
.btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--wine); background: #fff; color: var(--wine); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--rose-soft); }
.btn--primary { background: var(--wine); color: #fff; }
.btn--primary:hover { background: var(--wine-2); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); padding: 0 12px; }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: .85rem; }
.btn--danger { border-color: var(--no); color: var(--no); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .ic { width: 18px; height: 18px; }
.count { background: #e8cf9f; color: var(--wine); border-radius: 999px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: .78rem; padding: 0 6px; }

/* ───────── mise en page des vues ───────── */
main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; outline: none; }
.site-foot { text-align: center; color: var(--muted); font-size: .82rem; padding: 0 16px 40px; max-width: 760px; margin: 0 auto; }
.crumb { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
.crumb a { color: var(--wine-2); }
.page-h { font-size: 2rem; line-height: 1.15; margin: 0 0 6px; color: var(--wine); }
.page-sub { color: var(--muted); margin: 0 0 18px; max-width: 70ch; }

/* accueil */
.hero { background: linear-gradient(135deg, #fff 0%, var(--rose-soft) 100%); border: 1px solid var(--line); border-radius: 22px; padding: 30px 26px; margin-bottom: 22px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(184,149,90,.22), transparent 70%); }
.hero__k { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--rose-d); font-weight: 700; margin: 0 0 8px; }
.hero h1 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.1; margin: 0 0 12px; color: var(--wine); max-width: 24ch; }
.hero h1 em { color: var(--rose-d); }
.hero p { max-width: 62ch; margin: 0 0 16px; color: #4d3b40; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.quick a { text-decoration: none; background: #fff; border: 1px solid var(--gold); color: var(--wine); padding: 7px 14px; border-radius: 999px; font-size: .92rem; }
.quick a:hover { background: var(--wine); color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.tile { display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; transition: transform .12s, box-shadow .12s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(91,30,46,.13); border-color: var(--gold); }
.tile__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wine); color: #fff; font-family: var(--serif); font-weight: 700; }
.tile h2 { margin: 4px 0 0; font-size: 1.25rem; color: var(--wine); }
.tile p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; }
.tile__c { font-size: .82rem; color: var(--rose-d); font-weight: 600; }
.h2 { font-size: 1.35rem; margin: 26px 0 10px; color: var(--wine); }
.peau-grp { margin: 0 0 12px; }
.peau-grp h3 { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 6px; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tip { background: #fff; border: 1px dashed var(--gold); border-radius: 14px; padding: 14px 16px; font-size: .93rem; }
.tip b { color: var(--wine); font-family: var(--serif); font-size: 1.02rem; display: block; margin-bottom: 4px; }

/* listes / résultats */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 0 0 14px; }
.filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 3px; }
.filters select { min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 0 12px; font: inherit; color: var(--ink); min-width: 190px; }
.filters .chk { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; font-size: .92rem; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tab { display: inline-flex; gap: 6px; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.tab[aria-pressed="true"], .tab[aria-current="true"] { background: var(--wine); border-color: var(--wine); color: #fff; }
.tab small { opacity: .75; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.bar__c { color: var(--muted); font-size: .9rem; margin-right: auto; }
.grp-h { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rose-d); margin: 22px 0 10px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.grp-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.card-wrap { position: relative; }
.card { display: flex; flex-direction: column; gap: 4px; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 14px 46px; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--gold); box-shadow: 0 8px 22px rgba(91,30,46,.1); }
.card h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; color: var(--wine); }
.card p { margin: 0; color: var(--muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .snip { color: #5a484d; font-size: .86rem; -webkit-line-clamp: 3; }
.card mark { background: #f8e0a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.badge { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--rose-soft); color: var(--wine-2); width: fit-content; }
.badge--actif { background: #e8f0e6; color: #2f5d44; }
.badge--peau { background: #f7e7d3; color: #7a4d14; }
.badge--protocole { background: #f4dfe3; color: var(--wine-2); }
.badge--routine, .badge--conseil { background: #e6e9f4; color: #3a4378; }
.badge--outil { background: #ece6f2; color: #5b3d7a; }
.mini { font-size: .76rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.pick { position: absolute; left: 12px; top: 14px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; }
.pick input { width: 20px; height: 20px; accent-color: var(--wine); cursor: pointer; margin: 0; }
.empty { background: #fff; border: 1px dashed var(--gold); border-radius: 16px; padding: 28px; text-align: center; color: var(--muted); }
.empty b { color: var(--wine); font-family: var(--serif); font-size: 1.15rem; display: block; margin-bottom: 6px; }

/* vue fiche */
.fiche-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 860px; margin: 0 auto 14px; }
.fiche-bar__sp { margin-right: auto; }
.paper { max-width: 860px; margin: 0 auto; }
.prevnext { display: flex; justify-content: space-between; gap: 10px; max-width: 860px; margin: 16px auto 0; }
.prevnext a { text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; color: var(--wine); font-size: .92rem; max-width: 48%; }
.prevnext a:hover { border-color: var(--gold); }
.prevnext small { display: block; color: var(--muted); }

/* sélection */
.sel-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.sel-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.sel-item__n { color: var(--muted); width: 1.6em; text-align: right; }
.sel-item a { flex: 1; text-decoration: none; color: var(--wine); font-weight: 600; min-width: 0; }
.sel-item small { display: block; color: var(--muted); font-weight: 400; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--wine); cursor: pointer; font-size: 1rem; }
.icon-btn:hover { background: var(--rose-soft); }
.icon-btn[disabled] { opacity: .35; cursor: default; }
.preset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

/* réglages */
dialog { border: none; border-radius: 20px; padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--ink); background: #fff; }
dialog::backdrop { background: rgba(40, 14, 22, .55); }
.dlg { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.dlg__h { padding: 18px 22px 8px; }
.dlg__h h2 { margin: 0; color: var(--wine); font-size: 1.5rem; }
.dlg__b { padding: 6px 22px 12px; overflow: auto; }
.dlg__f { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 22px 18px; border-top: 1px solid var(--line); }
.fld { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: .88rem; color: var(--muted); }
.fld input[type="text"] { min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; color: var(--ink); width: 100%; }
.fld input[type="text"]:focus { border-color: var(--rose); outline: none; }
.fld--chk { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: .95rem; }
.fld--chk input { width: 20px; height: 20px; accent-color: var(--wine); }
.dlg h3 { color: var(--wine); font-size: 1.1rem; margin: 18px 0 6px; }
.dlg .hint { color: var(--muted); font-size: .88rem; margin: 0 0 10px; }
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.prod-grid .fld { margin: 0; }
.prod-grid .fld span { color: var(--ink); font-size: .82rem; }
.prod-grid .fld small { color: var(--muted); }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 30px); opacity: 0; background: var(--wine); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: .92rem; pointer-events: none; transition: .25s; z-index: 200; max-width: calc(100vw - 32px); }
#toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ───────── FICHES (écran) ───────── */
.fiche { background: var(--cream); border: 1.5px solid var(--gold); border-radius: 18px; padding: 1.6em 1.7em .9em; position: relative; box-shadow: 0 10px 34px rgba(91,30,46,.12); font-size: 14px; line-height: 1.42; color: var(--ink); font-family: var(--sans); }
.fiche + .fiche { margin-top: 18px; }
.fiche::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(184,149,90,.45); border-radius: 13px; pointer-events: none; }
.f-head { text-align: center; margin-bottom: .9em; }
.f-orn { color: var(--gold); line-height: 0; }
.f-orn__ic { width: 2.1em; height: 2.1em; }
.f-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .78em; color: var(--rose-d); margin: .3em 0 .15em; font-weight: 700; }
.f-title { font-family: var(--serif); font-size: 2.15em; line-height: 1.08; color: var(--wine); margin: 0; font-weight: 700; }
.fiche--protocole .f-title, .fiche--peau .f-title { text-transform: uppercase; letter-spacing: .015em; font-size: 1.85em; }
.f-sub { font-family: var(--serif); font-style: italic; font-size: 1.35em; color: var(--rose-d); margin: .25em 0 0; }
.f-sub span { display: inline-flex; align-items: center; gap: .6em; }
.f-sub span::before, .f-sub span::after { content: ""; width: 2.2em; height: 1px; background: var(--gold); }
.f-acc { font-style: italic; color: var(--muted); margin: .45em 0 0; }
.f-pills { list-style: none; padding: 0; margin: .9em 0 0; display: flex; flex-wrap: wrap; gap: .55em; justify-content: center; }
.pill { display: flex; align-items: center; gap: .55em; border: 1px solid var(--gold); background: #fff; border-radius: 999px; padding: .38em 1em; font-size: .9em; text-align: left; }
.pill .ic { width: 1.5em; height: 1.5em; color: var(--wine); }
.pill b { color: var(--wine); font-family: var(--serif); }
.f-grid { display: grid; gap: .75em; margin: .75em 0; }
.f-grid--2 { grid-template-columns: 1fr 1fr; }
.f-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.f-col { display: flex; flex-direction: column; gap: .75em; min-width: 0; }
.f-h { font-family: var(--serif); font-size: 1.7em; font-style: italic; color: var(--wine); text-align: center; margin: .7em 0 .2em; display: flex; align-items: center; gap: .6em; }
.f-h::before, .f-h::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
.box { background: rgba(244,225,226,.55); border: 1px solid rgba(184,149,90,.55); border-radius: .75em; padding: .65em .85em; margin: .75em 0; min-width: 0; }
.f-grid .box, .f-col .box { margin: 0; }
.box__t { font-family: var(--serif); font-size: 1.17em; color: var(--wine); margin: 0 0 .3em; display: flex; align-items: center; gap: .4em; line-height: 1.2; }
.box__t .ic { width: 1.1em; height: 1.1em; color: var(--gold-d); }
.box--alert { background: #fbeee9; border-color: #d9a190; }
.box--alert .box__t { color: #8c3a24; } .box--alert .box__t .ic { color: #c0502d; }
.box--ok .box__t .ic { color: var(--ok); } .box--no .box__t .ic { color: var(--no); }
.box--goal { background: #f7e9d6; }
.box--ex { background: #fff; border-style: dashed; }
.box--order { background: #fff; }
.box--links { background: #fff; }
.box--tip { display: flex; gap: .7em; align-items: flex-start; background: #b9707c; border-color: #b9707c; color: #fff; }
.box--tip > .ic { width: 1.9em; height: 1.9em; color: #fff; margin-top: .1em; }
.box--tip .box__t { color: #fff; margin-bottom: .2em; }
.f-p { margin: 0; }
.f-note { margin: .4em 0 0; font-size: .85em; color: var(--muted); font-style: italic; }
.f-sublabel { font-size: .82em; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: .6em 0 .15em; font-weight: 600; }
.f-list { list-style: none; margin: 0; padding: 0; }
.f-list li { position: relative; padding-left: 1em; margin: .18em 0; }
.f-list li::before { content: ""; position: absolute; left: .1em; top: .6em; width: .42em; height: .42em; border-radius: 50%; background: var(--wine); }
.f-list--ok li::before { background: var(--ok); } .f-list--no li::before { background: var(--no); }
.f-kv { list-style: none; margin: 0; padding: 0; }
.f-kv li { display: flex; gap: .6em; margin: .22em 0; }
.f-kv b { min-width: 7.8em; max-width: 7.8em; color: var(--wine); font-weight: 600; flex: none; }
.f-num { margin: 0; padding-left: 0; list-style: none; counter-reset: n; }
.f-num li { counter-increment: n; display: flex; gap: .6em; margin: .28em 0; }
.f-num li::before { content: counter(n); flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-size: .85em; font-weight: 700; margin-top: .05em; }
.f-steps { list-style: none; margin: .5em 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.st { display: flex; gap: .7em; background: #fff; border: 1px solid rgba(184,149,90,.55); border-radius: .85em; padding: .55em .7em; min-width: 0; }
.st__n { flex: none; width: 2em; height: 2em; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; background: var(--rose); }
.st--1 .st__n { background: var(--gold); } .st--2 .st__n { background: var(--wine); }
.st__b { min-width: 0; }
.st h4 { font-family: var(--serif); font-size: 1.1em; margin: 0; line-height: 1.2; }
.st h4 em { font-style: italic; font-weight: 400; font-size: .82em; color: var(--rose-d); background: var(--rose-soft); padding: .05em .6em; border-radius: 999px; margin-left: .4em; white-space: nowrap; }
.st p { margin: .15em 0 0; font-size: .92em; }
.st .st__app { display: flex; align-items: center; gap: .4em; color: var(--wine); background: #fbeedd; border: 1px solid var(--gold-soft); border-radius: .5em; padding: .12em .5em; font-size: .85em; }
.st__app .ic { width: 1.1em; height: 1.1em; color: var(--gold-d); }
.prod { font-size: .8em !important; color: var(--muted); margin-top: .2em !important; }
.prod--mine { color: var(--wine) !important; font-weight: 500; }
.f-order { display: flex; flex-wrap: wrap; gap: .35em 0; list-style: none; margin: 0; padding: 0; counter-reset: o; }
.f-order li { counter-increment: o; font-size: .92em; }
.f-order li::before { content: counter(o); display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--wine); color: #fff; font-size: .78em; margin-right: .35em; vertical-align: .08em; }
.f-order li:not(:last-child)::after { content: "→"; margin: 0 .6em; color: var(--gold-d); }
.chips { display: flex; flex-wrap: wrap; gap: .3em; margin: .15em 0; }
.chip { display: inline-block; padding: .12em .75em; border-radius: 999px; border: 1px solid var(--gold); background: #fff; color: var(--wine); font-size: .9em; text-decoration: none; }
a.chip:hover { background: var(--wine); color: #fff; }
.chips--warn .chip { border-color: #d9a190; background: #fdf3ee; color: #8c3a24; }
.chips--sm .chip { font-size: .78em; padding: .05em .6em; }
.tbl-wrap { overflow-x: auto; }
.f-table { width: 100%; border-collapse: collapse; font-size: .93em; background: #fff; }
.f-table th, .f-table td { border: 1px solid rgba(184,149,90,.55); padding: .35em .6em; text-align: left; vertical-align: top; }
.f-table thead th { background: var(--wine); color: #fff; font-family: var(--serif); font-weight: 600; }
.f-table tbody th { background: rgba(244,225,226,.7); color: var(--wine); font-weight: 600; }
.f-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55em 1.2em; }
.f-field { display: flex; gap: .5em; align-items: flex-end; }
.f-field span { white-space: nowrap; color: var(--wine); font-weight: 600; }
.f-field i { flex: 1; border-bottom: 1px dotted #8a6f60; height: 1.4em; min-width: 3em; }
.f-line { border-bottom: 1px dotted #8a6f60; height: 1.7em; margin-top: .2em; }
.f-cases { columns: 2; column-gap: 1.4em; list-style: none; padding: 0; margin: 0; }
.f-cases li { break-inside: avoid; display: flex; gap: .55em; margin: .22em 0; }
.cb { flex: none; width: 1em; height: 1em; border: 1.5px solid var(--wine); border-radius: 3px; margin-top: .22em; background: #fff; }
.f-foot { display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid rgba(184,149,90,.6); margin-top: .9em; padding-top: .45em; font-size: .8em; color: var(--muted); font-style: italic; }
.f-foot__n { font-family: var(--serif); color: var(--wine); font-size: 1.12em; }

/* ───────── responsive ───────── */
@media (max-width: 820px) {
  .top__in { flex-wrap: wrap; }
  .search { order: 3; flex-basis: 100%; }
  .btn__t { display: none; }
  .btn--ghost { padding: 0 10px; }
  .brand { flex: 1; }
}
@media (max-width: 700px) {
  main { padding: 16px 12px 50px; }
  .page-h { font-size: 1.6rem; }
  .fiche { font-size: 13.5px; padding: 1.2em 1em .8em; }
  .f-grid--2, .f-grid--3, .f-steps, .f-fields { grid-template-columns: 1fr; }
  .f-cases { columns: 1; }
  .prod-grid { grid-template-columns: 1fr; }
  .card { padding-left: 44px; }
  .prevnext a { max-width: 100%; }
  .f-kv li { flex-direction: column; gap: 0; }
  .f-kv b { min-width: 0; max-width: none; }
}

/* ───────── IMPRESSION ───────── */
@media print {
  @page { size: A4; margin: 6mm; }
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top, .skip, #toast, dialog, .fiche-bar, .prevnext, .screen-only, .site-foot { display: none !important; }
  body.is-printing > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  main { padding: 0; max-width: none; }
  .paper { max-width: none; }
  .fiche { box-shadow: none; border-radius: 7px; padding: 5mm 6mm 3mm; font-size: 8.7pt; line-height: 1.32; break-after: page; page-break-after: always; margin: 0 !important; }
  .fiche:last-child { break-after: auto; page-break-after: auto; }
  .fiche::before { inset: 1.6mm; border-radius: 5px; }
  .box, .st, .f-table tr, .f-cases li { break-inside: avoid; page-break-inside: avoid; }
  .f-head { margin-bottom: .5em; }
  .f-grid { margin: .5em 0; gap: .5em; }
  .box { margin: .5em 0; padding: .45em .65em; }
  .f-steps { gap: .45em; }
  .f-grid .box, .f-col .box { margin: 0; }
  a, a.chip { color: inherit !important; text-decoration: none !important; }
  .prod--ex { display: none; }
  .print-ex .prod--ex { display: block; }
  .ex2 { display: none; }
  .tbl-wrap { overflow: visible; }
}

/* ───────── PROTOCOLES ILLUSTRÉS (gabarit « 100 fiches illustrées ») ───────── */
.fld select { min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; color: var(--ink); background: #fff; }
.fiche--pro { background: linear-gradient(180deg, #fdf3ee 0%, #fbf4ee 40%, #fcf6f0 100%); overflow: hidden; }
.p-deco { position: absolute; top: 0; pointer-events: none; z-index: 0; line-height: 0; opacity: .95; }
.p-deco--l { left: 0; } .p-deco--r { right: 0; }
.p-deco svg { width: 11em; height: auto; }
.fiche--pro > *:not(.p-deco) { position: relative; z-index: 1; }
.p-head { text-align: center; margin: .2em 0 .8em; }
.p-title { font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--wine); font-size: 2.05em; line-height: 1.05; margin: 0 auto; max-width: 78%; }
.p-sub { font-family: var(--serif); font-style: italic; font-size: 1.5em; color: var(--rose-d); margin: .15em 0 0; }
.p-sub span { display: inline-flex; align-items: center; gap: .7em; }
.p-sub span::before, .p-sub span::after { content: ""; width: 3em; height: 1px; background: var(--gold); }
.p-acc { font-family: var(--serif); font-style: italic; color: #5d4a50; margin: .25em 0 0; font-size: 1.05em; }
.p-pins { list-style: none; margin: .9em 0 0; padding: .7em 0 0; display: flex; justify-content: center; gap: .8em; flex-wrap: wrap; position: relative; }
.p-pins::before { content: ""; position: absolute; left: 12%; right: 12%; top: .22em; height: 1px; background: var(--gold); opacity: .7; }
.p-pins li { position: relative; padding-top: .45em; }
.p-pin { position: absolute; top: -.5em; left: 50%; transform: translateX(-50%); width: .55em; height: .55em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #fbf4ee; }
.p-pins li::before { content: ""; position: absolute; top: -.2em; left: 50%; width: 1px; height: .65em; background: var(--gold); }
.p-pill { display: flex; align-items: center; gap: .6em; background: #fff; border: 1.5px solid var(--gold); border-radius: 999px; padding: .4em 1.1em; text-align: left; box-shadow: 0 2px 6px rgba(91,30,46,.07); }
.p-pill .ic { width: 1.9em; height: 1.9em; color: var(--wine); }
.p-pill b { display: block; font-family: var(--serif); color: var(--ink); font-size: 1.05em; line-height: 1.1; }
.p-pill span { font-size: .95em; line-height: 1.15; }
.p-top { display: grid; grid-template-columns: .92fr 1.08fr; gap: .8em; align-items: start; margin: .4em 0; }
.p-left { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.p-hero { position: relative; margin: 0; border-radius: 1.8em; overflow: hidden; border: 1.5px solid var(--gold); aspect-ratio: 300 / 190; background: #f7e6e4; box-shadow: 0 4px 14px rgba(91,30,46,.12); }
.p-hero svg, .p-hero img.ph, .ps__img svg, .ps__img img.ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ps__img img.ph, .p-hero img.ph { object-fit: cover; }
.p-info { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.box--plain { background: linear-gradient(180deg, rgba(244,225,226,.8), rgba(250,238,236,.6)); margin: 0; }
.box--plain .box__t { font-size: 1.3em; margin-bottom: .2em; }
.p-mat { display: flex; align-items: flex-end; gap: .4em; justify-content: space-between; }
.p-mat .f-list { flex: 1; min-width: 0; font-size: .96em; }
.p-mat__ill, .p-prep__ill { flex: none; line-height: 0; }
.p-mat__ill svg { width: 7.4em; height: auto; }
.p-prep__ill svg { width: 5.2em; height: auto; }
.fiche--pro .f-h { margin: .6em 0 .4em; font-size: 1.9em; }
.fiche--pro .f-h .ic { width: .8em; height: .8em; color: var(--gold-d); }
/* étapes */
.ps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.pro--cols .ps-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.ps { display: flex; align-items: stretch; background: #fff9f4; border: 1.2px solid rgba(184,149,90,.7); border-radius: 1.3em; overflow: hidden; position: relative; min-height: 6.6em; }
.ps--right { flex-direction: row-reverse; }
.ps__img { position: relative; margin: 0; flex: 0 0 38%; min-height: 6.6em; background: #f7e6e4; }
.pro--cols .ps__img { flex-basis: 40%; }
.ps__img::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32%; pointer-events: none; }
.ps--left .ps__img::after { right: 0; background: linear-gradient(to right, rgba(255,249,244,0), #fff9f4); }
.ps--right .ps__img::after { left: 0; background: linear-gradient(to left, rgba(255,249,244,0), #fff9f4); }
.ps__t { flex: 1; min-width: 0; display: flex; gap: .65em; align-items: flex-start; padding: .55em .8em .55em .7em; }
.ps .st__n { width: 2.3em; height: 2.3em; font-size: 1.05em; margin-top: .1em; }
.ps--c1 .st__n { background: var(--gold); } .ps--c2 .st__n { background: var(--wine); }
.ps__b { min-width: 0; }
.ps h4 { font-family: var(--serif); font-size: 1.28em; line-height: 1.12; margin: 0; color: var(--ink); }
.ps h4 em { display: inline-block; font-style: normal; font-weight: 500; font-size: .78em; color: var(--rose-d); background: var(--rose-soft); padding: .05em .7em; border-radius: 999px; margin-left: .35em; white-space: nowrap; font-family: var(--serif); }
.ps p { margin: .2em 0 0; font-size: .98em; }
.ps .st__app { display: flex; align-items: center; gap: .4em; color: var(--wine); background: #fbeedd; border: 1px solid var(--gold-soft); border-radius: .5em; padding: .1em .5em; font-size: .86em; width: fit-content; max-width: 100%; }
.ps--noimg { min-height: 0; }
.pro--cols .ps { min-height: 6.2em; }
.pro--cols .ps h4 { font-size: 1.15em; }
.pro--cols .ps p { font-size: .92em; }
/* pastille produit à côté d’une photo (visible seulement si une photo est chargée) */
.ps__prod { display: none; position: absolute; bottom: .35em; width: 4.4em; padding: .25em .3em .1em; background: rgba(255,250,245,.82); border-radius: .9em; line-height: 0; z-index: 2; box-shadow: 0 1px 4px rgba(91,30,46,.18); }
.ps__prod--left { left: .4em; } .ps__prod--right { right: .4em; }
.ps__img .ps__prod svg { position: static; inset: auto; width: 100%; height: auto; display: block; }
img.ph ~ .ps__prod { display: block; }
/* bas de fiche */
.p-bottom { margin: .6em 0 .4em; align-items: start; }
.box--tip { position: relative; overflow: hidden; }
.box--tip .deco-sprig { position: absolute; right: .2em; bottom: .1em; width: 3.4em; opacity: .55; }
.box--tip > .ic { display: none; }
.fiche--pro .box--tip > svg.deco-sprig { display: block; }
.box--cure { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1em; background: #fff; margin: .4em 0; }
.box--cure .box__t { font-size: 1.05em; }
.p-foot { display: flex; align-items: center; gap: .8em; margin-top: .6em; color: var(--wine); }
.p-foot em { font-family: var(--serif); font-size: 1.25em; white-space: nowrap; }
.p-foot__l { flex: 1; height: 1px; background: var(--gold); }
.fiche--pro .box--order { margin: .5em 0; }

@media (max-width: 700px) {
  .p-top, .pro--cols .ps-list { grid-template-columns: 1fr; }
  .p-hero { aspect-ratio: 300 / 190; }
  .p-title { max-width: 100%; font-size: 1.6em; }
  .p-deco svg { width: 6em; opacity: .6; }
  .ps, .ps--right { flex-direction: column; }
  .ps__img, .pro--cols .ps__img { flex: none; height: 9.5em; }
  .ps__img::after { display: none; }
  .box--cure { grid-template-columns: 1fr; }
  .p-pins::before { display: none; }
}

@media print {
  .fiche--pro, .print-ex .fiche--pro { font-size: 8.1pt; line-height: 1.27; padding: 4.5mm 5.5mm 2.5mm; }
  .fiche--pro.pro--cols, .print-ex .fiche--pro.pro--cols { font-size: 8pt; }
  .p-deco svg { width: 21mm; }
  .p-head { margin: 0 0 .35em; }
  .p-title { font-size: 1.85em; }
  .p-sub { font-size: 1.3em; margin-top: .05em; }
  .p-acc { margin-top: .1em; }
  .p-pins { margin-top: .5em; padding-top: .5em; }
  .p-pill { padding: .22em .9em; }
  .p-pill .ic { width: 1.6em; height: 1.6em; }
  .box--plain .box__t { font-size: 1.15em; margin-bottom: .1em; }
  .box--plain { padding: .3em .6em; }
  .p-left, .p-info { gap: .4em; }
  .p-top { margin: .3em 0; }
  .p-hero { aspect-ratio: 300 / 172; }
  .ps { min-height: 0; }
  .ps__img { min-height: 0; }
  .pro--wide .ps { min-height: 15.6mm; height: auto; }
  .pro--wide .ps__t { padding-top: .35em; padding-bottom: .35em; }
  .pro--cols .ps { min-height: 20.5mm; height: auto; }
  .pro--cols .ps__img { flex-basis: 38%; }
  .pro--noimg .ps { height: auto; }
  .ps h4 { font-size: 1.2em; }
  .ps p { margin-top: .12em; }
  .fiche--pro .f-h { margin: .4em 0 .3em; font-size: 1.6em; }
  .box--plain { padding: .4em .65em; }
  .p-pill { box-shadow: none; }
  .box--cure { margin: .3em 0; padding: .35em .65em; }
  .fiche--pro .box--order { margin: .35em 0; padding: .3em .6em; }
  .p-bottom { margin: .35em 0 .3em; }
  .p-foot { margin-top: .25em; }
  .p-foot em { font-size: 1.05em; }
  .fiche--pro { padding-bottom: 1.6mm; }
  .fiche--pro .prod--mine { display: block; }
  .ps .prod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps .prod--ex ~ .prod--ex ~ .prod--ex { display: none; }
  .fiche--pro.pro--dense, .print-ex .fiche--pro.pro--dense { font-size: 7.6pt; }
}