/* ══════════════════════════════════════════════════════════════
   Landing TopPopote « La preuve par la semaine » (26/09/2026).
   Préfixe .lb-. Maquette : .claude/design-drafts/2026-09-26-landing/variante-b.
   Jetons --ard-*, --hn-gold-*, --g2, --text-grad-2 : night_kitchen.css (body),
   les mêmes valeurs que la maquette dans les deux thèmes.
   ══════════════════════════════════════════════════════════════ */

.lb{
  --lb-shell:1280px;
  --lb-gut:32px;
  background:var(--ard-bg);color:var(--ard-ink);
  font-family:var(--ard-sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--ard-tr),color var(--ard-tr);
}
@media (max-width:640px){.lb{--lb-gut:20px}}

/* ─── Remise à zéro, scopée et sans poids : base.html n'est jamais touché ─── */
:where(.lb) *,:where(.lb) *::before,:where(.lb) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.lb) img,:where(.lb) svg{display:block;max-width:100%}
:where(.lb) ul,:where(.lb) ol{list-style:none}
:where(.lb) a{color:inherit;text-decoration:none}
:where(.lb) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:where(.lb) :focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}

.lb-shell{width:100%;max-width:var(--lb-shell);margin:0 auto;padding:0 var(--lb-gut)}

/* ─── Boutons ─── */
.lb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:3px;
  font-family:var(--ard-sans);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--ard-tr),border-color var(--ard-tr),color var(--ard-tr),transform var(--ard-tr);
}
.lb-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--ard-tr)}
.lb-btn:hover svg{transform:translateX(3px)}
.lb-btn:active{transform:translateY(1px)}
.lb-btn--solid{background:var(--ard-accent);border-color:var(--ard-accent);color:var(--ard-on-accent)}
.lb-btn--solid:hover{background:var(--g2);border-color:var(--g2)}
/* En clair, --g2 éclaircirait le bouton : on fonce au vert de --text-grad-2. */
html[data-theme="light"] .lb-btn--solid:hover{background:var(--text-grad-2);border-color:var(--text-grad-2)}
.lb-btn--line{border-color:var(--ard-rule-strong);color:var(--ard-ink)}
.lb-btn--line:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}

/* ─── Barre du haut ─── */
.lb-top{border-bottom:3px double var(--hn-gold-38)}
.lb-top-in{display:flex;align-items:center;gap:20px;min-height:72px}
/* Le logo ne rétrécit jamais : rétréci, le mot-marque débordait sur « Se connecter ».
   Sa zone cliquable fait 44 px de haut quelle que soit la taille du dessin. */
.lb-logo{position:relative;flex:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.lb-logo::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
.lb-logo-ic{width:36px;height:36px;flex:none;color:var(--ard-accent-text)}
.lb-logo-ic svg{width:100%;height:100%}
.lb-logo-mot{font-family:var(--ard-serif);font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1}
.lb-logo-mot span{color:var(--ard-accent-text)}
.lb-login{
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
  font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:color var(--ard-tr);
}
.lb-login:hover{color:var(--ard-gold-text)}
.lb-top .lb-btn{min-height:44px;padding:0 18px;font-size:12px}
.lb-top .lb-short{display:none}
/* Rubrique, recherche et loupe viennent de la manchette (base.css). Ici, trois
   raccords : la hauteur de la barre, que le relevé de recherche suit pour pendre
   sous le filet ; la rubrique étirée sur toute la barre, son souligné au bas ;
   la recherche (bureau) ou la loupe (sous 1024 px) poussée à droite. */
/* --mn-gut : l'air que base.css met entre rubriques et recherche de 1024 à 1249 px. */
.lb-top{--mn-etage-h:72px;--mn-gut:var(--lb-gut)}
.lb-top .mn-rubriques{height:auto;align-self:stretch}
.lb-top .mn-loupe{flex:none;margin-left:auto}
/* De 1024 à 1249 px, base.css réduit la rubrique à son icône et ne montre le nom
   qu'au survol. Un visiteur neuf ne connaît pas encore l'icône : ici, le nom reste. */
@media (min-width:1024px) and (max-width:1249px){
  .lb-top .mn-rub{justify-content:flex-start}
  .lb-top .mn-rub-ic{top:0;width:18px;height:18px}
  .lb-top .mn-rub-t{position:static;transform:none;font-size:inherit;letter-spacing:inherit;opacity:1;pointer-events:auto}
  .lb-top .mn-rub:focus-visible::before{top:50%;height:38px;margin-top:-19px}
  /* Le nom prend 100 px : à 1024 px, la recherche les rend au lieu de pousser
     le bouton hors de la barre. */
  .lb-top :is(.mn-actions,.mn-cherche){min-width:0}
}
/* La recherche demande 244 px pour son texte d'aide entier. Avec les libellés
   longs, elle ne les a qu'à partir de 1080 px : en dessous, les courts les rendent. */
@media (min-width:1024px) and (max-width:1099px){
  .lb-top .lb-long{display:none}
  .lb-top .lb-short{display:inline}
}
/* La barre pleine demande 567 px : en dessous de 600, elle passe en version compacte. */
@media (max-width:599px){
  .lb-top-in{gap:10px;min-height:62px}
  .lb-logo{gap:7px}
  .lb-logo-ic{width:26px;height:26px}
  .lb-logo-mot{font-size:21px}
  .lb-login{font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
  .lb-top .lb-btn{padding:0 12px;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
  /* Quatre éléments sur une ligne : lien et bouton prennent leur libellé court. */
  .lb-top .lb-long{display:none}
  .lb-top .lb-short{display:inline}
}
/* Avec la loupe, la barre compacte et sa cocotte demandent 406 px. */
@media (max-width:409px){.lb-logo-ic{display:none}}
@media (max-width:370px){
  .lb-logo-mot{font-size:19px}
  .lb-top .lb-btn{padding:0 10px}
}
/* Sous 360 px, le mot-marque ne tient plus à côté de la loupe : la cocotte seule
   le remplace, sur une cible de 44 px. */
@media (max-width:359px){
  .lb-logo{min-width:44px;justify-content:center}
  .lb-logo-ic{display:block}
  .lb-logo-mot{display:none}
}

/* ─── Titres et textes courants ─── */
.lb-h1{font-family:var(--ard-serif);font-weight:500;font-size:clamp(33px,4.4vw,58px);line-height:1.06;letter-spacing:-.018em}
.lb-h1 span{display:block;color:var(--ard-ink-2)}
.lb-h2{font-family:var(--ard-serif);font-weight:500;font-size:clamp(28px,3.1vw,42px);line-height:1.1;letter-spacing:-.012em}
.lb-h3{font-family:var(--ard-serif);font-weight:500;font-size:clamp(23px,2.2vw,29px);line-height:1.15}
.lb-p{font-size:17px;line-height:1.65;color:var(--ard-ink-2);max-width:40ch}
.lb-p + .lb-p{margin-top:14px}
.lb-p b{color:var(--ard-ink);font-weight:600}

/* L'horodatage du carnet : la page suit la semaine, jour après jour. */
.lb-when{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:var(--ard-serif);font-style:italic;font-size:17px;line-height:1.3;color:var(--ard-gold-text);
}
.lb-when svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* ══════════ 1. HERO : la semaine ══════════ */
.lb-hero{padding:52px 0 88px}
.lb-hero-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end;margin-bottom:52px}
@media (max-width:959px){.lb-hero-head{grid-template-columns:minmax(0,1fr)}}
.lb-hero-side .lb-p{font-size:16.5px}
.lb-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.lb-note{margin-top:16px;font-size:14px;line-height:1.55;color:var(--ard-ink-3);max-width:44ch}
.lb-note b{color:var(--ard-ink-2);font-weight:600}
.lb-note a{color:var(--ard-ink-2);border-bottom:1px solid var(--ard-rule-strong);transition:color var(--ard-tr),border-color var(--ard-tr)}
.lb-note a:hover{color:var(--ard-gold-text);border-color:var(--ard-gold-text)}

.lb-plan{border-top:1px solid var(--ard-rule-strong);padding-top:20px}
.lb-plan-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:22px}
.lb-plan-t{font-family:var(--ard-serif);font-weight:500;font-size:24px;line-height:1.2}
.lb-plan-t span{color:var(--ard-gold-text)}
.lb-plan-facts{font-size:14.5px;color:var(--ard-ink-2)}
.lb-plan-facts b{color:var(--ard-ink);font-weight:600}
.lb-plan-facts a{border-bottom:1px solid var(--ard-rule-strong);transition:border-color var(--ard-tr),color var(--ard-tr)}
.lb-plan-facts a:hover{color:var(--ard-gold-text);border-color:var(--ard-gold-text)}
.lb-sep{margin:0 8px;color:var(--ard-ink-3)}

.lb-week-scroll{min-width:0}
.lb-week{display:grid;grid-template-columns:34px repeat(7,minmax(0,1fr));grid-template-rows:auto auto auto;gap:12px 14px}
.lb-corner{grid-column:1;grid-row:1}
.lb-rowlab{grid-column:1;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--ard-rule)}
.lb-rowlab span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ard-ink-3)}
.lb-rowlab--midi{grid-row:2}
.lb-rowlab--soir{grid-row:3}
.lb-day{grid-row:1 / span 3;display:grid;grid-template-rows:subgrid;min-width:0}
.lb-day-h{padding:0 2px 9px;border-bottom:1px solid var(--ard-rule);min-width:0}
.lb-day-n{display:block;font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-ink-3)}
.lb-day-d{display:block;margin-top:2px;font-family:var(--ard-serif);font-size:23px;line-height:1.1}
.lb-day-d sup{font-size:.5em;line-height:0;vertical-align:super}
.lb-day-c{display:block;min-height:1.3em;margin-top:3px;font-size:12.5px;color:var(--ard-ink-3);white-space:nowrap}

.lb-card{
  position:relative;display:flex;flex-direction:column;min-width:0;color:inherit;
  background:var(--ard-bg-2);border:1px solid var(--ard-rule);border-radius:12px;overflow:hidden;
  transition:border-color var(--ard-tr),transform var(--ard-tr),background-color var(--ard-tr);
}
.lb-card:hover{transform:translateY(-3px);border-color:var(--hn-gold-38);background:var(--ard-bg-3)}
.lb-card-ph{aspect-ratio:16/10;overflow:hidden;background:var(--ard-bg-3)}
.lb-card-ph img{width:100%;height:100%;object-fit:cover}
.lb-card-b{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding:10px 11px 12px}
.lb-card-t{
  font-family:var(--ard-serif);font-size:15px;line-height:1.2;color:var(--ard-ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--ard-tr);overflow-wrap:anywhere;
}
.lb-card:hover .lb-card-t{color:var(--ard-gold-text)}
.lb-card-m{margin-top:auto;display:flex;flex-wrap:wrap;gap:0 8px;font-size:12.5px;color:var(--ard-ink-3)}
.lb-empty{
  display:grid;place-items:center;min-height:100%;padding:12px;border-radius:12px;
  border:1px dashed var(--ard-rule-strong);font-size:12.5px;color:var(--ard-ink-3);text-align:center;
}
.lb-plan-cap{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--ard-ink-3)}
.lb-plan-cap svg{width:18px;height:18px;flex:none;fill:currentColor}
.lb-plan-cap svg.lb-arrow{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-swipe{display:none}

/* Sous 960 px, sept colonnes ne tiennent plus : la semaine défile dans son
   cadre (jamais la page), les étiquettes Midi / Soir restent collées à gauche. */
@media (max-width:959px){
  .lb-week-scroll{
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    margin-inline:calc(var(--lb-gut) * -1);padding:4px var(--lb-gut) 14px;
    scroll-padding-left:calc(var(--lb-gut) + 40px);
  }
  .lb-week{grid-template-columns:34px repeat(7,150px);width:max-content}
  .lb-day{scroll-snap-align:start}
  .lb-corner,.lb-rowlab{position:sticky;left:0;z-index:2;background:var(--ard-bg);box-shadow:8px 0 0 var(--ard-bg)}
  .lb-swipe{display:flex}
}

/* ══════════ 2. LA LISTE ══════════ */
.lb-list-sec{padding:110px 0;background:var(--ard-bg-2);border-top:1px solid var(--ard-rule);border-bottom:1px solid var(--ard-rule)}
.lb-list-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 72px;align-items:start}
.lb-rail{position:sticky;top:32px}
.lb-rail .lb-h2{margin-bottom:20px}

.lb-cs{min-width:0}
.lb-cs-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;padding-bottom:16px;border-bottom:1px solid var(--ard-rule-strong)}
.lb-cs-t{font-family:var(--ard-serif);font-weight:500;font-size:24px;line-height:1.2}
.lb-cs-t span{color:var(--ard-gold-text)}
.lb-cs-count{font-size:14.5px;color:var(--ard-ink-2);font-variant-numeric:tabular-nums}
.lb-cs-count b{color:var(--ard-ink);font-weight:600}
.lb-cs-try{display:flex;align-items:flex-start;gap:10px;margin:14px 0 30px;font-size:14px;line-height:1.5;color:var(--ard-ink-3)}
.lb-cs-try svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--ard-gold-text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-cols{columns:2;column-gap:48px}

.lb-ray{break-inside:avoid;margin-bottom:34px;min-width:0}
.lb-ray-h{font:inherit}
.lb-ray-head{display:flex;align-items:center;gap:14px;width:100%;padding:0 0 11px;min-height:36px;border-bottom:1px solid var(--ard-rule);cursor:default}
.lb-ray-head::after{content:"";order:1;flex:1 1 auto;min-width:16px;height:1px;background:linear-gradient(to right,var(--hn-gold-38),transparent 78%)}
.lb-ray-t{order:0;flex:0 1 auto;min-width:0;font-family:var(--ard-serif);font-size:19.5px;line-height:1.2;transition:color var(--ard-tr)}
.lb-ray-n{order:2;flex:none;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.3px;color:var(--ard-ink-3);font-variant-numeric:tabular-nums}
.lb-ray-n svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-ray-ok{opacity:0;transition:opacity var(--ard-tr)}
.lb-ray-chev{display:none;transition:transform var(--ard-tr)}
.lb-ray[data-fini] .lb-ray-t{color:var(--ard-ink-2)}
.lb-ray[data-fini] .lb-ray-n{color:var(--ard-accent-text)}
.lb-ray[data-fini] .lb-ray-ok{opacity:1}

/* ─── Repli après 3 rayons (D5) ───
   Écarts par rapport au CSS de base du brief, validés au mockup
   (.claude/design-drafts/2026-09-26-landing-liste-repli.html) et pourquoi :
   1. justify-content:space-between sur .lb-cs-more-s : le chevron va au bord
      droit de la ligne quelle que soit la longueur du texte, comme le fait
      .lb-ray-chev un peu plus haut sur la même page (cohérence de position).
      Le texte est enveloppé dans .lb-cs-more-txt pour que flex n'ait que
      2 enfants (texte / chevron) et ignore le fait qu'un des deux <span>
      voir/masquer est toujours display:none.
   2. .lb-cs-more-s:hover souligne le texte en or au survol : à l'état de
      repos le texte est déjà doré (choix du brief, pour qu'on le repère
      vite), donc un survol qui foncerait/éclaircirait la couleur serait
      invisible ou inverserait le sens habituel (ici l'or = accent
      permanent, pas un état de hover comme .lb-login). Le soulignement
      donne un retour de survol sans toucher à la couleur.
   3. Pas de règle .lb-cs-more-s:focus-visible dédiée : la règle globale
      :focus-visible (:where(.lb) :focus-visible, ligne 24 de ce fichier)
      donne le même anneau or à 3 px d'offset ; la dupliquer à 4 px
      n'apportait rien et aurait laissé deux offsets différents à côté
      l'un de l'autre dans landing.css.
*/
.lb-cs-more{margin-top:4px}
.lb-cs-more-s{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:12px 0;border-top:1px solid var(--ard-rule-strong);
  cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:600;color:var(--ard-gold-text);
}
.lb-cs-more-s::-webkit-details-marker{display:none}
.lb-cs-more-s:hover .lb-cs-more-txt{text-decoration:underline;text-decoration-color:var(--ard-gold-text);text-decoration-thickness:1px}
.lb-cs-more-chev{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--ard-tr)}
.lb-cs-more[open] .lb-cs-more-chev{transform:rotate(180deg)}
.lb-cs-more[open] .lb-cs-more-voir,.lb-cs-more:not([open]) .lb-cs-more-masquer{display:none}
.lb-cs-more[open]>.lb-cols{margin-top:30px}

.lb-line{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:start;column-gap:14px;padding:10px 0;border-bottom:1px solid var(--ard-ink-4)}
.lb-line:last-child{border-bottom:0}
.lb-check{
  position:relative;width:24px;height:24px;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;color:transparent;border:1px solid var(--ard-rule-strong);
  transition:background-color var(--ard-tr),border-color var(--ard-tr),color var(--ard-tr);
}
.lb-check::after{content:"";position:absolute;inset:-10px}
.lb-check svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lb-check:hover{border-color:var(--ard-gold-text)}
.lb-check[aria-pressed="true"]{background:var(--ard-accent);border-color:var(--ard-accent);color:var(--ard-on-accent)}
.lb-line-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;padding-top:1px}
.lb-name{
  font-size:15.5px;line-height:1.35;overflow-wrap:anywhere;
  text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:transparent;
  transition:color var(--ard-tr),text-decoration-color var(--ard-tr);
}
.lb-prov{font-size:13px;line-height:1.4;color:var(--ard-ink-3);white-space:nowrap}
.lb-qty{font-size:14px;line-height:1.5;text-align:right;white-space:nowrap;color:var(--ard-ink-2);font-variant-numeric:tabular-nums;padding-top:1px}
.lb-approx{font-style:normal;color:var(--ard-ink-3)}
.lb-line[data-done] .lb-name{color:var(--ard-ink-2);text-decoration-color:var(--ard-rule-strong)}
.lb-line[data-done] .lb-qty{color:var(--ard-ink-3)}

.lb-placard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:4px;padding-top:20px;border-top:1px solid var(--ard-rule);font-size:14px;line-height:1.5;color:var(--ard-ink-3)}
.lb-placard p{flex:1 1 260px;min-width:0}
.lb-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--ard-rule-strong);font-size:13.5px;color:var(--ard-ink-2);white-space:nowrap}
.lb-pills{display:flex;flex-wrap:wrap;gap:8px}

/* Sous 720 px : une colonne, les rayons deviennent un accordéon (comme /courses/). */
@media (max-width:959px){
  .lb-list-grid{grid-template-columns:minmax(0,1fr)}
  .lb-rail{position:static}
}
@media (max-width:719px){
  .lb-list-sec{padding:80px 0}
  .lb-cols{columns:1}
  .lb-ray{margin-bottom:0}
  .lb-ray-head{cursor:pointer;padding:14px 0;min-height:52px}
  .lb-ray-chev{display:block}
  .lb-ray:not([data-open]) .lb-ray-body{display:none}
  .lb-ray[data-open] .lb-ray-chev{transform:rotate(180deg);color:var(--ard-gold-text)}
  .lb-ray-head:hover .lb-ray-t{color:var(--ard-gold-text)}
  .lb-placard{margin-top:24px}
  /* Un seul filet entre le dernier rayon FERMÉ et « Voir les… » : sans ça,
     la bordure basse de .lb-ray-head et le border-top de .lb-cs-more-s se
     suivent à 1 px d'écart et se lisent comme un double trait (mockup, 390 px).
     Ciblé sur :not([data-open]) : ouvert, le filet sépare la tête de sa
     propre liste (.lb-ray-body) et doit rester. */
  .lb-cols:has(+ .lb-cs-more) > .lb-ray:last-child:not([data-open]) .lb-ray-head{border-bottom:0}
}

/* ══════════ 3. LE SOIR : mode cuisine ══════════ */
.lb-cook{padding:120px 0}
.lb-cook-grid{display:grid;grid-template-columns:minmax(0,7.5fr) minmax(0,4.5fr);gap:40px 64px;align-items:end}
.lb-cook-txt{padding-bottom:12px}
.lb-cook-txt .lb-h2{margin-bottom:20px}

.lb-cm{min-width:0;background:var(--ard-bg-3);border:1px solid var(--ard-rule);border-radius:16px;overflow:hidden;box-shadow:var(--ard-shadow)}
.lb-cm-prog{height:3px;background:var(--ard-ink-4)}
.lb-cm-prog span{display:block;height:100%;background:var(--ard-accent)}
.lb-cm-top{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--ard-rule)}
.lb-cm-name{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--ard-ink-2)}
.lb-cm-name svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-cm-name span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-cm-name a{border-bottom:1px solid transparent;transition:color var(--ard-tr),border-color var(--ard-tr)}
.lb-cm-name a:hover{color:var(--ard-gold-text);border-color:var(--ard-gold-text)}
.lb-cm-dots{display:flex;gap:6px;flex:none}
.lb-cm-dot{width:7px;height:7px;border-radius:4px;background:var(--ard-ink-4)}
.lb-cm-dot.is-done{background:var(--ard-rule-strong)}
.lb-cm-dot.is-on{width:22px;background:var(--ard-accent)}
.lb-cm-main{position:relative;overflow:hidden;min-height:400px;padding:56px 40px 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lb-cm-ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);pointer-events:none;font-family:var(--ard-serif);font-size:320px;font-weight:600;line-height:1;color:var(--ard-ink);opacity:.045}
.lb-cm-lbl{position:relative;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--ard-gold-text)}
.lb-cm-txt{position:relative;max-width:31ch;margin:18px 0 32px;font-size:clamp(19px,2vw,24px);line-height:1.5;overflow-wrap:anywhere}
.lb-timer{
  position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;
  padding:10px 10px 10px 24px;border:1px solid var(--hn-gold-38);border-radius:999px;background:var(--ard-bg-2);
}
.lb-timer-l{display:block;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ard-ink-3);text-align:left}
.lb-timer-v{display:block;font-family:var(--ard-serif);font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums;text-align:left}
.lb-timer[data-etat="fini"] .lb-timer-v{color:var(--ard-accent-text)}
.lb-timer-b{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;
  background:var(--ard-accent);color:var(--ard-on-accent);
  font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  transition:background-color var(--ard-tr);
}
.lb-timer-b svg{width:15px;height:15px;fill:currentColor}
.lb-timer-b .lb-ic-pause{display:none}
.lb-timer[data-etat="en-cours"] .lb-ic-play{display:none}
.lb-timer[data-etat="en-cours"] .lb-ic-pause{display:block}
.lb-timer-b:hover{background:var(--g2)}
html[data-theme="light"] .lb-timer-b:hover{background:var(--text-grad-2)}
/* Le temps qui reste, en filet sous la pastille. Figé sous reduced-motion. */
.lb-timer-bar{position:absolute;left:24px;right:24px;bottom:-1px;height:2px;overflow:hidden;border-radius:2px}
.lb-timer-bar i{display:block;width:100%;height:100%;background:var(--ard-accent);transform-origin:left center;transition:transform 1s linear}
.lb-timer[data-etat="pret"] .lb-timer-bar{visibility:hidden}
.lb-cm-nav{display:flex;justify-content:space-between;gap:12px;padding:15px 20px;border-top:1px solid var(--ard-rule);font-size:13px;font-weight:600;letter-spacing:.6px;color:var(--ard-ink-3)}
.lb-cm-nav span{display:inline-flex;align-items:center;gap:8px}
.lb-cm-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-cm-nav .is-next{color:var(--ard-ink)}
/* À l'étape 1, « Précédente » est grisée comme dans le vrai mode cuisine (mode_cuisine.css). */
.lb-cm-nav .is-off{opacity:.25}

@media (max-width:959px){
  .lb-cook{padding:88px 0}
  .lb-cook-grid{grid-template-columns:minmax(0,1fr)}
  .lb-cook-txt{order:-1;padding-bottom:0}
}
@media (max-width:520px){
  .lb-cm-top{padding:12px 16px;gap:12px}
  .lb-cm-main{min-height:0;padding:44px 18px 36px}
  .lb-cm-ghost{font-size:220px}
  .lb-timer{border-radius:18px;padding:14px 16px}
  .lb-cm-nav{padding:13px 16px}
}

/* ══════════ 4. LES JOURS SANS IDÉE ══════════ */
.lb-ideas{padding:110px 0 120px;background:var(--ard-bg-2);border-top:1px solid var(--ard-rule);border-bottom:1px solid var(--ard-rule)}
.lb-ideas-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 64px;align-items:start}
.lb-idea .lb-h3{margin-bottom:14px}
.lb-idea .lb-p{font-size:16px}
.lb-idea + .lb-idea--fms{margin-top:120px}
/* Un seul des deux blocs dans la vitrine : il prend toute la largeur. */
.lb-ideas-grid > .lb-idea:only-child{grid-column:1 / -1}

.lb-panel{margin-top:28px;min-width:0;background:var(--ard-bg);border:1px solid var(--ard-rule);border-radius:14px;padding:22px 22px 18px}
.lb-panel-lbl{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ard-ink-3);margin-bottom:10px}
.lb-chips{display:flex;flex-wrap:wrap;gap:8px}
.lb-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:999px;background:var(--ard-bg-2);border:1px solid var(--ard-rule-strong);font-size:14px;white-space:nowrap}
.lb-seg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:20px 0 6px;padding-top:18px;border-top:1px solid var(--ard-ink-4)}
.lb-seg-l{font-size:14px;color:var(--ard-ink-2);margin-right:auto}
.lb-seg-g{display:inline-flex;border:1px solid var(--ard-rule-strong);border-radius:999px;padding:3px;gap:2px}
.lb-seg-b{min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ard-ink-2);font-variant-numeric:tabular-nums;text-align:center;transition:background-color var(--ard-tr),color var(--ard-tr)}
.lb-seg-b:hover{color:var(--ard-ink)}
.lb-seg-b[aria-pressed="true"]{background:var(--ard-ink);color:var(--ard-bg)}

.lb-res{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--ard-ink-4);color:inherit}
.lb-res:first-child{border-top:0}
.lb-res[hidden]{display:none}
.lb-res:hover .lb-res-t{color:var(--ard-gold-text)}
.lb-thumb{width:60px;height:60px;border-radius:9px;overflow:hidden;background:var(--ard-bg-3)}
.lb-thumb img{width:100%;height:100%;object-fit:cover}
.lb-res-t{font-family:var(--ard-serif);font-size:16.5px;line-height:1.25;overflow-wrap:anywhere;transition:color var(--ard-tr)}
.lb-res-m{margin-top:3px;font-size:13px;color:var(--ard-ink-3)}
.lb-res-miss{margin-top:6px;font-size:14px;color:var(--ard-ink-2)}
.lb-res-miss b{color:var(--ard-ink);font-weight:600}
.lb-res-miss--ok{color:var(--ard-accent-text);font-weight:600}
.lb-res-none{padding:16px 0 6px;font-size:14.5px;color:var(--ard-ink-2)}

.lb-fms-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 20px;padding-bottom:14px;border-bottom:1px solid var(--ard-rule)}
.lb-fms-t{font-family:var(--ard-serif);font-size:20px;line-height:1.2}
.lb-fms-m{margin-top:3px;font-size:13.5px;color:var(--ard-ink-3)}
.lb-eq{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ard-ink-2)}
.lb-eq-dots{display:flex;gap:4px}
.lb-eq-dots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--ard-accent-text)}
.lb-eq-dots i.on{background:var(--ard-accent-text)}
.lb-fms-row{display:grid;grid-template-columns:46px 76px minmax(0,1fr);gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--ard-ink-4);color:inherit}
.lb-fms-row:hover .lb-fms-t2{color:var(--ard-gold-text)}
.lb-fms-d{line-height:1.1}
.lb-fms-d small{display:block;font-size:11.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ard-ink-3)}
.lb-fms-d b{display:block;font-family:var(--ard-serif);font-weight:400;font-size:21px}
.lb-fms-d sup{font-size:.5em;line-height:0;vertical-align:super}
.lb-fms-ph{width:76px;height:52px;border-radius:8px;overflow:hidden;background:var(--ard-bg-3)}
.lb-fms-ph img{width:100%;height:100%;object-fit:cover}
.lb-fms-t2{font-family:var(--ard-serif);font-size:16px;line-height:1.25;overflow-wrap:anywhere;transition:color var(--ard-tr)}
.lb-fms-t2 + p{margin-top:2px;font-size:13px;color:var(--ard-ink-3)}
.lb-fms-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}
.lb-fakebtn{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:3px;border:1px solid var(--ard-rule-strong);font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--ard-ink);white-space:nowrap}
.lb-fakebtn--solid{background:var(--ard-accent);border-color:var(--ard-accent);color:var(--ard-on-accent)}

@media (max-width:959px){
  .lb-ideas{padding:88px 0}
  .lb-ideas-grid{grid-template-columns:minmax(0,1fr);gap:88px}
  .lb-idea + .lb-idea--fms{margin-top:0}
}
@media (max-width:460px){
  .lb-panel{padding:18px 16px 14px}
  .lb-fms-row{grid-template-columns:40px 58px minmax(0,1fr);gap:11px}
  .lb-fms-ph{width:58px;height:44px}
  .lb-fms-d b{font-size:19px}
  .lb-fms-foot .lb-fakebtn{flex:1 1 auto;justify-content:center}
}

/* ══════════ 5. L'ADDITION ══════════ */
.lb-bill-sec{padding:120px 0}
.lb-bill-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px 64px;align-items:start}
.lb-tarif{position:sticky;top:40px}
.lb-tarif-k{font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text);margin-bottom:14px}
.lb-tarif .lb-h2{margin-bottom:18px}
.lb-tarif .lb-h2 span{display:block;color:var(--ard-ink-2)}
.lb-tarif .lb-p{max-width:52ch}

.lb-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px;align-items:stretch}
.lb-plan-c{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;background:var(--ard-bg-2);border:1px solid var(--ard-rule);border-radius:12px;transition:border-color var(--ard-tr),background-color var(--ard-tr)}
.lb-plan-c--an{border-color:var(--ard-gold-text);box-shadow:inset 0 0 0 1px var(--ard-gold-text)}
.lb-plan-c-badge{position:absolute;top:-12px;left:24px;padding:4px 10px;background:var(--ard-bg);border:1px solid var(--ard-gold-text);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ard-gold-text);white-space:nowrap}
.lb-plan-c-n{font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-ink-2)}
.lb-plan-c-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-variant-numeric:tabular-nums}
.lb-plan-c-p b{font-family:var(--ard-serif);font-weight:500;font-size:clamp(38px,3.6vw,48px);line-height:1;letter-spacing:-.015em;color:var(--ard-ink)}
.lb-plan-c-p span{font-size:15px;color:var(--ard-ink-2)}
.lb-plan-c-s{font-size:14.5px;line-height:1.5;color:var(--ard-ink-2);flex:1;text-wrap:pretty}
.lb-plan-c .lb-btn{align-self:stretch;justify-content:center;margin-top:6px}

.lb-tarif-foot{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--ard-ink-3);max-width:60ch;text-wrap:pretty}
.lb-tarif-free{margin-top:10px;font-size:14.5px;color:var(--ard-ink-2)}
.lb-tarif-free a{color:var(--ard-ink);font-weight:600;border-bottom:1px solid var(--ard-rule-strong);transition:color var(--ard-tr),border-color var(--ard-tr)}
.lb-tarif-free a:hover{color:var(--ard-gold-text);border-color:var(--ard-gold-text)}

/* Le ticket : bords crantés par des pastilles couleur de page posées sur le haut et le bas. */
.lb-bill{position:relative;max-width:520px;width:100%;justify-self:end;background:var(--ard-bg-2);border-left:1px solid var(--ard-rule);border-right:1px solid var(--ard-rule);padding:40px 34px 44px;font-variant-numeric:tabular-nums}
.lb-bill::before,.lb-bill::after{content:"";position:absolute;left:0;right:0;height:12px;background:radial-gradient(circle at 7px 6px,var(--ard-bg) 5.5px,transparent 6px) 0 0 / 14px 12px repeat-x}
.lb-bill::before{top:-6px}
.lb-bill::after{bottom:-6px}
.lb-bill-t{font-family:var(--ard-serif);font-size:26px;line-height:1.1;text-align:center}
.lb-bill-sub{margin-top:6px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--ard-ink-3);text-align:center}
.lb-bill-grp{margin-top:26px;padding-top:20px;border-top:1px dashed var(--ard-rule-strong)}
.lb-bill-h{font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text);margin-bottom:10px}
.lb-row{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:15.5px;line-height:1.4}
.lb-row-n{flex:0 1 auto;min-width:0}
.lb-row-n small{display:block;font-size:13px;color:var(--ard-ink-3)}
.lb-row-dots{flex:1 1 20px;min-width:20px;border-bottom:1px dotted var(--ard-rule-strong);transform:translateY(-4px)}
.lb-row-p{flex:none;white-space:nowrap;color:var(--ard-ink-2)}
.lb-row--essai .lb-row-p{color:var(--ard-accent-text);font-weight:600}

/* Deux cartes côte à côte demandent de la largeur : une seule colonne dès 1023 px. */
@media (max-width:1023px){
  .lb-bill-sec{padding:88px 0}
  .lb-bill-grid{grid-template-columns:minmax(0,1fr)}
  .lb-bill{justify-self:stretch;max-width:none}
}
@media (min-width:1024px) and (max-width:1199px){
  .lb-bill-grid{gap:48px 40px}
  .lb-plans{gap:16px}
  .lb-plan-c-p{flex-direction:column;align-items:flex-start}
  /* Le bouton s'étire sur la carte et centre son contenu : seul le padding de la carte lui rend de l'air. */
  .lb-plan-c{padding:26px 16px 22px}
}
/* En une colonne, rien à suivre ; sur un écran peu haut, le bloc collant garderait
   les boutons sous la ligne de flottaison. */
@media (max-width:1023px), (max-height:720px){
  .lb-tarif{position:static}
}
@media (max-width:560px){
  .lb-plans{grid-template-columns:minmax(0,1fr);gap:26px}
  .lb-plan-c{padding:26px 20px 22px}
}
@media (max-width:460px){
  .lb-bill{padding:34px 18px 38px}
  .lb-row{font-size:15px}
}

/* ══════════ 6. FIN : une semaine vide ══════════ */
.lb-end{padding:104px 0 120px;border-top:3px double var(--hn-gold-38)}
.lb-end-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.lb-end .lb-h2{font-size:clamp(32px,4vw,54px);margin-bottom:18px}
.lb-empty-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.lb-ew-d{display:grid;gap:8px;min-width:0}
.lb-ew-n{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ard-ink-3);text-align:center;padding-bottom:6px;border-bottom:1px solid var(--ard-rule)}
.lb-ew-s{aspect-ratio:3/4;border:1px dashed var(--ard-rule-strong);border-radius:8px}
.lb-end-login{margin-top:18px;font-size:14.5px;color:var(--ard-ink-2)}
.lb-end-login a{color:var(--ard-ink);font-weight:600;border-bottom:1px solid var(--ard-rule-strong);transition:color var(--ard-tr),border-color var(--ard-tr)}
.lb-end-login a:hover{color:var(--ard-gold-text);border-color:var(--ard-gold-text)}
@media (max-width:959px){
  .lb-end{padding:80px 0 96px}
  .lb-end-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){
  .lb-empty-week{gap:5px}
  .lb-ew-n{font-size:11px;letter-spacing:.6px}
  .lb-ew-s{border-radius:6px}
}

@media (prefers-reduced-motion:reduce){
  .lb *,.lb *::before,.lb *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .lb-card:hover{transform:none}
  .lb-cs-more-chev{transition:none}
}