@font-face{font-family:Cormorant;font-weight:600;src:url('/fonts/cormorant-600.woff2')}
@font-face{font-family:Satoshi;font-weight:400;src:url('/fonts/satoshi-400.woff2')}
@font-face{font-family:Satoshi;font-weight:700;src:url('/fonts/satoshi-700.woff2')}
@font-face{font-family:'DM Sans';font-weight:400;src:url('/fonts/dmsans-400.woff2')}
@font-face{font-family:'Noto Sans JP';font-weight:400;src:url('/fonts/notosansjp-subset.woff2')}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--text-lede)/1.5 var(--font-body-sales)}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:var(--grain-paper);mix-blend-mode:multiply;z-index:5}
::selection{background:var(--ink);color:var(--bg)}
.shell{max-width:1280px;margin:auto;padding:var(--sp-4) var(--sp-6) var(--sp-6)}
a{color:inherit;text-underline-offset:4px}
button,input,select{font:inherit;color:inherit}
button,select,a.action{min-height:44px}
button,select{cursor:pointer}
button{background:none;border:1px solid var(--muted);border-radius:var(--r-sm);padding:var(--sp-1) var(--sp-3)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.small,label,summary,.basis,.note,.action,.count{font-size:var(--text-small)}

/* Masthead, title and toolbar */
.mast{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 var(--sp-4);border-bottom:2px solid var(--ink);padding-bottom:var(--sp-1)}
.brand{font-size:var(--text-small);font-weight:700;letter-spacing:.22em}
/* Only the 400 file of the kanji face ships: a 700 here would be a browser-faked bold. */
.kanji{font-family:var(--font-kanji);font-weight:400;letter-spacing:0;margin-right:var(--sp-2)}
.countries{display:flex;align-items:center;font-size:var(--text-small);margin-right:calc(-1 * var(--sp-1))}
.countries a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-1)}
.countries a[aria-current=page]{color:var(--accent-text);font-weight:700;text-decoration:none}
.countries span{color:var(--muted)}
.intro{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-5);margin:var(--sp-4) 0}
h1{font:600 var(--text-h1)/1.1 var(--font-display-sales);margin:0}
.intro p{margin:var(--sp-1) 0 0}
.scope{max-width:34ch;color:var(--muted)}
/* Toolbar, 30 September: no labels above the fields (they stay for screen readers); the menus name themselves, « Tous magasins », « Tous rayons ». */
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) 208px 208px;gap:var(--sp-2);align-items:center;padding-bottom:var(--sp-3);border-bottom:1px solid var(--muted)}
label{display:block;margin-bottom:var(--sp-1)}
input,select{border:1px solid var(--muted);border-radius:var(--r-sm);background:var(--surface);min-height:44px;padding:var(--sp-1) var(--sp-2);max-width:100%}
input{width:100%}
/* Effacer sits inside the field, only once something is typed; the browser's own cross is hidden so there is one control. */
.search-wrap{position:relative}
.search-wrap input{padding-right:88px}
.search-wrap input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
#reset{position:absolute;top:0;right:0;height:44px;min-height:0;border:0;border-left:1px solid var(--line);border-radius:0;padding:0 var(--sp-2);font-size:var(--text-small);background:var(--surface)}
#reset:hover{color:var(--accent-text)}
.toolbar :is(input,select){font-size:var(--text-lede)}
#q::placeholder{color:var(--muted);opacity:1}
/* Menus clip long values with an ellipsis rather than mid-letter. */
.toolbar select{text-overflow:ellipsis}
/* The chosen shop filters every view, the list included: it carries the accent. */
#store[data-set=true]{border:2px solid var(--carmine);padding:calc(var(--sp-1) - 1px) calc(var(--sp-2) - 1px);color:var(--accent-text);font-weight:700}

.store-field select,.category-field select{width:100%}
/* Ma liste and Exemples: the shop menu is the only control and keeps its menu width on desktop. */
.toolbar:has(#search-field[hidden]){grid-template-columns:208px}

/* Views: catalogue, Ma liste and the coach examples share one page */
.workspace{display:block;margin-top:var(--sp-4)}
.category-nav{display:none}
.results-header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.count{margin:0;color:var(--muted)}
.view-switch{display:flex;gap:var(--sp-1)}
.view-switch button,.panel button,.example-head button,.list-controls button{font-size:var(--text-small)}
:is(.view-switch,.panel,.example,.list-controls) button:hover{background:var(--surface)}
:is(.view-switch,.list-controls) button[aria-pressed=true]:hover{background:var(--ink-2)}
.storage-note,.announce{font-size:var(--text-small);margin:0 0 var(--sp-2);max-width:66ch}
.storage-note{color:var(--accent-text)}
.panel{margin-bottom:var(--sp-2)}
.storage-note:empty,.announce:empty,.panel:empty{margin:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-1)}
.view-title{font:600 var(--text-h2)/1.15 var(--font-display-sales);margin:0}
.panel-note,.notice,.confirm p{font-size:var(--text-small);margin:0 0 var(--sp-2);max-width:66ch}
.panel-note{color:var(--muted)}
.panel-head .panel-note{margin:0;flex:1 1 40ch}
.notice{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2)}
.confirm{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);max-width:66ch;border:1px solid var(--muted);border-radius:var(--r-sm);padding:var(--sp-2);margin-bottom:var(--sp-2)}
.confirm p{flex-basis:100%;margin-bottom:var(--sp-1)}
.example{margin-bottom:var(--sp-5)}
.example-head{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.example-head p{font-size:var(--text-small);margin:var(--sp-1) 0 0;max-width:66ch}
.example-head button{flex-shrink:0}
/* Pris rows sink under this label and stay readable: muted ink and a struck name, never colour alone. */
.group-label{font-size:var(--text-small);font-weight:700;color:var(--muted);margin:0;padding:var(--sp-3) 0 var(--sp-1);border-top:1px solid var(--line)}
/* Rayon headings, 30 September: the aisle names in menu order, set like aisle signs and the masthead lockup (tracked capitals, 2px ink rule)
   so they outrank product names without a fourth text size. They stick while their rayon scrolls, so a client always knows where they are. */
.rayon-head{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:var(--sp-2);margin:0;padding:var(--sp-3) 0 var(--sp-1);background:var(--bg);border-bottom:2px solid var(--ink);font:700 var(--text-small)/1.5 var(--font-body-sales);letter-spacing:.22em;text-transform:uppercase}
.rayon:first-child .rayon-head{padding-top:var(--sp-1)}
.rayon-count{font:var(--text-small)/1.5 var(--font-numeral-sales);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--muted)}
.rayon-head+:is(.product,.group-label){border-top:0}
.empty{padding:var(--sp-4) 0}
.empty p{margin:0 0 var(--sp-2)}

/* Compact card, 30 September. One scan line per product: photo, name, kcal and protein, one action.
   Glucides, lipides, price, the store page and the sources wait in the details. */
.product{display:grid;grid-template-columns:96px minmax(0,1fr) 256px 176px;grid-template-rows:auto auto 1fr;column-gap:var(--sp-3);align-items:start;padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.food-photo{grid-column:1;grid-row:1/span 3;width:96px;height:96px;border:0;padding:0;position:relative;background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center}
.food-photo img{display:block;width:100%;height:100%;object-fit:contain}
.food-photo img[hidden]{display:none}
.food-photo .photo-zoom{position:absolute;right:0;bottom:0;font-size:var(--text-small);line-height:1;background:var(--bg);color:var(--ink);padding:var(--sp-1);border:1px solid var(--line)}
.photo-fallback{font-size:var(--text-small);padding:var(--sp-1)}
.identity{grid-column:2;grid-row:1;min-width:0}
.brand-line{font-size:var(--text-small);color:var(--muted);margin:0}
.identity :is(h2,h3,h4){font-size:var(--text-lede);line-height:1.35;margin:0;font-weight:700}
.notes{grid-column:2;grid-row:2;min-width:0}
.note,.volume-note{font-size:var(--text-small);line-height:1.5;margin:0;overflow-wrap:break-word}
.note{color:var(--muted)}
/* Desktop: two fixed cells, so kcal and protein line up as columns down the page. */
.numbers{grid-column:3;grid-row:1;display:grid;grid-template-columns:1fr 1fr;align-items:baseline;gap:0 var(--sp-2);padding-top:var(--sp-2)}
.metric{font:var(--text-lede)/1.35 var(--font-numeral-sales);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.metric>span{font:var(--text-small)/1.5 var(--font-body-sales);color:var(--muted);margin-left:var(--sp-1)}
.metric .unknown{margin:0;color:var(--muted)}
.basis{grid-column:1/-1;text-align:right;color:var(--muted);line-height:1.5}
.unknown{font-size:var(--text-small);color:var(--muted)}
div.unknown{grid-column:3;grid-row:1;text-align:right;padding-top:var(--sp-2)}
.destination{grid-column:4;grid-row:1;padding-top:var(--sp-1)}
.list-controls{display:flex;align-items:center;gap:var(--sp-1)}
.list-controls button{flex:1;padding:var(--sp-1)}
input[type=checkbox]{width:var(--sp-4);height:var(--sp-4);min-height:0;padding:0;margin:0;flex-shrink:0;accent-color:var(--ink);cursor:pointer}
.product details{grid-column:2/-1;grid-row:3;min-width:0}
summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--accent-text);width:fit-content}
.detail-content{max-width:66ch;padding:0 0 var(--sp-2)}
details p{font-size:var(--text-small);margin:var(--sp-1) 0;overflow-wrap:anywhere}
.macros{font-size:var(--text-small);line-height:1.5;display:flex;flex-wrap:wrap;gap:0 var(--sp-3);margin:var(--sp-1) 0}
.macro{font-family:var(--font-numeral-sales);font-variant-numeric:tabular-nums}
.macro>span{font-family:var(--font-body-sales);color:var(--muted)}
.pack-price strong{font-variant-numeric:tabular-nums}
.pack-price span{color:var(--muted)}
/* The figures above, where they come from below. */
.sources{border-top:1px solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-1)}
.action{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);border:1px solid var(--muted);border-radius:var(--r-sm);text-decoration:none;margin:var(--sp-1) 0}
.action:hover{background:var(--surface)}

/* Checklist row, 30 September: Ma liste in the aisle. 72 px a row, the whole row ticks, Retirer stays apart.
   Pris rows keep their photo and name readable: muted ink and a struck name, never colour alone. */
.check-row,.check-undo{display:flex;align-items:center;gap:var(--sp-2);border-top:1px solid var(--line);max-width:720px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.check-hit{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);min-height:72px;margin:0;padding:var(--sp-1) 0;font-size:var(--text-lede);cursor:pointer}
.check-photo{flex:0 0 56px;height:56px;background:var(--surface);overflow:hidden}
.check-photo img{display:block;width:100%;height:100%;object-fit:contain}
.check-text{min-width:0;display:flex;flex-direction:column}
.check-name{font-weight:700;line-height:1.35;overflow-wrap:break-word}
.check-meta{font-size:var(--text-small);line-height:1.5;color:var(--muted)}
.check-row>button{flex-shrink:0;font-size:var(--text-small);padding:var(--sp-1) var(--sp-2)}
.check-row>button:hover,.check-hit:hover,.check-undo button:hover{background:var(--surface)}
.check-undo{justify-content:space-between;min-height:72px;font-size:var(--text-small);color:var(--muted)}
.check-undo button{font-size:var(--text-small);color:var(--ink);flex-shrink:0}
#list>.group-label{max-width:720px}
.check-row.is-done .check-name{color:var(--muted);font-weight:400;text-decoration:line-through}
.check-row.is-done .check-photo img{opacity:.55}

#photo-dialog{margin:auto;border:1px solid var(--muted);border-radius:var(--r-frame);background:var(--surface);color:var(--ink);padding:var(--sp-4);max-width:min(640px,calc(100% - 32px));max-height:90vh;overflow:auto}
#photo-dialog::backdrop{background:var(--ink);opacity:.75}
#close-photo{float:right;margin-bottom:var(--sp-3)}
#photo-title{clear:both}
#photo-large{display:block;object-fit:contain;width:100%;max-height:60vh;margin-top:var(--sp-3)}
#photo-credit{font-size:var(--text-small)}

footer{font-size:var(--text-small);color:var(--muted);border-top:1px solid var(--muted);padding-top:var(--sp-3);margin-top:var(--sp-4)}

@media(max-width:760px){
 .shell{padding:var(--sp-3)}
 /* Phone: the title alone. « Retrouve les produits de ton magasin » says what the search field already says, and costs a row above the first photo. */
 .shell{padding-top:var(--sp-2)}
 .intro{display:block;margin:var(--sp-2) 0}
 .intro p{display:none}
 .scope{display:none}
 .toolbar{grid-template-columns:1fr 1fr;gap:var(--sp-1);padding-bottom:var(--sp-1)}
 .search-field{grid-column:1/-1}
 .toolbar select{width:100%;font-size:var(--text-lede)}
 .workspace{margin-top:var(--sp-1)}
 /* Count and the two views on one line; on the narrowest phones the views take their own line. */
 .results-header{flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-1)}
 .view-switch button{padding:var(--sp-1) var(--sp-2)}
 .results-header .view-switch{margin-left:auto}
 /* In Ma liste and Exemples the shop menu is the only control: it takes the row. */
 .toolbar:has(#search-field[hidden]){grid-template-columns:1fr}
 .view-title{font-size:var(--text-h3)}
 .example-head{display:block}
 .example-head button{width:100%;margin-top:var(--sp-2)}

 /* Phone card: the name and figures get the full width beside the photo. The details link and the action share the bottom line;
    an open details pushes the action under its content, so the link never moves under the thumb. */
 .product{grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--sp-2)}
 .food-photo{width:80px;height:88px;grid-row:1/span 3}
 .numbers,div.unknown{grid-column:2;grid-row:2;padding-top:0;text-align:left}
 .numbers{display:flex;flex-wrap:wrap;column-gap:var(--sp-2)}
 .metric{text-align:left}
 .basis{flex-basis:100%}
 .basis{text-align:left}
 .notes{grid-row:3}
 .product details{grid-column:1/-1;grid-row:4}
 /* The summary stops short of the action, so a long source label wraps instead of running under the button. */
 .product summary{max-width:calc(100% - 128px)}
 .product details[open] summary{max-width:none}
 .destination{grid-column:1/-1;grid-row:4;justify-self:end;padding-top:0;z-index:1}
 .product:has(details[open]) .destination{grid-row:5}
 .list-toggle{min-width:104px}
}



@media(max-width:359px){.toolbar{grid-template-columns:1fr}
 .results-header .view-switch{order:-1;width:100%}
 .view-switch button{flex:1 1 0;padding:var(--sp-1)}}

/* Narrow phones: a smaller photo and tighter gaps give the name room to stay on one or two lines. */
@media(max-width:359px){.check-row,.check-hit{gap:var(--sp-1)}
 .check-photo{flex-basis:40px;height:40px}
 .check-hit{min-height:64px}
 .check-row>button{padding:var(--sp-1)}}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}