/* ═══ Le Trésor de Santé — thème marbre lumineux ═══ */
@font-face { font-family: 'EB Garamond'; src: url('fonts/EBGaramond12-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/EBGaramond12-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --marbre: #fdfaf2; --pierre: #fffdf8; --sable: #f4ecda;
  --or: #b8902d; --or-clair: #d4af37; --or-sombre: #8a6512; --filet: #e2d2a4;
  --encre: #2a2118; --encre-douce: #4a3a26; --encre-pale: #8a7352;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --barre-h: 64px; --rayon: 18px;
  --ombre: 0 2px 6px rgba(74,48,12,.08), 0 10px 26px rgba(74,48,12,.10);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.5; color: var(--encre);
  background: var(--marbre);   /* [FOND 21/10] le marbre vit sur body::before : une seule plaque, sans jointure */
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom));
  min-height: 100vh;
}
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(253,250,242,.35), rgba(253,250,242,.55)); pointer-events: none; z-index: 0; }
.entete, .vue, .barre, .cuisine, .toast { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; color: var(--encre); line-height: 1.12; }
h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
p { margin: 0 0 12px; }
a { color: var(--or-sombre); }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
.saut { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px; }
.saut:focus { left: 8px; z-index: 50; }
:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }

/* ── en-tête ── */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(253,250,242,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, box-shadow .3s, border-color .3s; }
.entete.voilee { background: rgba(253,250,242,.82); border-bottom-color: var(--filet); box-shadow: 0 8px 24px rgba(74,48,12,.07); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.marque-t { display: flex; flex-direction: column; line-height: 1.05; }
.marque-giri { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.marque-titre { font-family: var(--serif); font-size: 21px; }
.boule { width: 28px; height: 28px; flex: none; background: url(img/boule-or.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(125,90,16,.35)); }
.boule.grande { width: 56px; height: 56px; margin: 0 auto 16px; }
.entete-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); background: var(--pierre); color: var(--or-sombre); display: grid; place-items: center; }

/* ── vue ── */
.vue { max-width: 760px; margin: 0 auto; padding: 16px 16px 32px; }
@media (min-width: 760px) { .vue { padding: 32px 24px 48px; } .hero { aspect-ratio: 16 / 9; } .hero h1 { font-size: 48px; } }
.chargement { text-align: center; padding: 60px 0; color: var(--encre-pale); }
.sur-titre { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--or); font-weight: 600; margin-bottom: 6px; }
.filet { width: 56px; height: 0; border-top: 1.5px solid var(--or-clair); margin: 14px 0 18px; }
.intro { font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--encre-douce); }
.section { margin-top: 32px; }
.section > h2 { margin-bottom: 16px; }

/* ── boutons ── */
.lingot { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 28px; border-radius: 16px; border: 1px solid rgba(160,120,64,.55); font-family: var(--serif); font-size: 20px; color: #3a2708; text-decoration: none; background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); box-shadow: 0 2px 6px rgba(74,48,12,.12), 0 10px 26px rgba(74,48,12,.18), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden; }
.lingot.respire::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes sheen { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.lingot:hover, .lingot:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(74,48,12,.16), 0 14px 32px rgba(74,48,12,.22), inset 0 1px 0 rgba(255,255,255,.55); }
.lingot:active { transform: translateY(0); }
.lingot.large { width: 100%; }
.creux { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 20px; border-radius: 16px; border: 1px solid rgba(160,120,64,.45); background: linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88)); color: #4a3520; font-family: var(--sans); font-size: 17px; text-decoration: none; }
.creux.actif { background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); color: #3a2708; border-color: rgba(160,120,64,.55); }
.creux svg { width: 22px; height: 22px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.actions .lingot { grid-column: 1 / -1; }

/* ── cartes ── */
.carte { background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.hero { position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4 / 3; background: var(--sable); }
.hero img { width: 100%; height: 100%; object-fit: cover; animation: ken 20s ease-out forwards; }
@keyframes ken { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero .poussiere i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff6d2 0%, #e8c078 55%, transparent 72%); box-shadow: 0 0 6px 1px rgba(232,192,120,.55); opacity: 0; animation: flotter 9s ease-in-out infinite; pointer-events: none; }
.hero .poussiere i:nth-child(1) { left: 12%; top: 70%; animation-delay: 0s; } .hero .poussiere i:nth-child(2) { left: 28%; top: 82%; animation-delay: 1.6s; width: 4px; height: 4px; } .hero .poussiere i:nth-child(3) { left: 47%; top: 76%; animation-delay: 3.1s; } .hero .poussiere i:nth-child(4) { left: 63%; top: 86%; animation-delay: 4.4s; width: 6px; height: 6px; } .hero .poussiere i:nth-child(5) { left: 78%; top: 72%; animation-delay: 5.8s; } .hero .poussiere i:nth-child(6) { left: 90%; top: 80%; animation-delay: 7.2s; width: 4px; height: 4px; } .hero .poussiere i:nth-child(7) { left: 38%; top: 90%; animation-delay: 2.3s; }
@keyframes flotter { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 60% { opacity: .5; } 100% { opacity: 0; transform: translateY(-140px) translateX(10px); } }
.hero .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,250,242,.96) 0%, rgba(253,250,242,.84) 30%, rgba(253,250,242,.4) 50%, rgba(253,250,242,0) 64%); }
.hero .texte { position: absolute; top: 22px; left: 18px; right: 18px; text-align: center; animation: souffle .6s ease-out .15s both; }
.hero h1 { font-size: 40px; letter-spacing: .4px; }
.logo-tete .logo { animation: souffle .6s ease-out both; }
@keyframes souffle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero .sous { font-family: var(--serif); font-style: italic; font-size: 19px; color: #6b4e0c; margin-top: 6px; text-shadow: 0 1px 10px rgba(253,250,242,.95), 0 0 2px rgba(253,250,242,.9); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 560px) { .grille { grid-template-columns: 1fr 1fr 1fr; } }
.vignette { display: block; text-decoration: none; color: var(--encre); background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.vignette .ph { aspect-ratio: 4 / 3; background: var(--sable); overflow: hidden; }
.vignette.pleine { position: relative; }
.vignette.pleine .ph { aspect-ratio: 4 / 5; }
.vignette.chapitre.pleine .ph { aspect-ratio: 4 / 3; }
.vignette.pleine .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(180deg, rgba(253,250,242,0) 0%, rgba(253,250,242,.94) 32%, rgba(253,250,242,.98) 100%); }
.vignette .fam { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #3a2708; background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); box-shadow: 0 1px 3px rgba(74,48,12,.25), inset 0 1px 0 rgba(255,255,255,.5); }
.rev { opacity: 0; transform: translateY(14px); }
.rev.vu { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
.vignette, .ligne, .satsang { transition: transform .15s; }
.vignette:active, .ligne:active, .satsang:active { transform: scale(.97); transition-duration: .12s; }
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.vignette:hover img { transform: scale(1.03); }
.vignette .t { padding: 10px 12px 12px; }
.vignette h3 { font-size: 18px; line-height: 1.15; }
.vignette .meta { font-size: 13px; color: var(--or); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.vignette.chapitre .ph { aspect-ratio: 16 / 10; }
.vignette.chapitre h3 { font-size: 21px; }
.ligne { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--encre); background: var(--pierre); border: 1px solid var(--filet); border-radius: 14px; }
.ligne + .ligne { margin-top: 8px; }
.ligne img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.ligne .t { flex: 1; min-width: 0; }
.ligne h3 { font-size: 18px; }
.ligne .meta { font-size: 13px; color: var(--or); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.vide { text-align: center; padding: 40px 16px; color: var(--encre-pale); font-family: var(--serif); font-size: 20px; }

/* ── recherche & filtres ── */
.recherche { display: flex; align-items: center; gap: 8px; background: var(--pierre); border: 1px solid var(--filet); border-radius: 16px; padding: 4px 6px 4px 14px; margin-bottom: 14px; }
.recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; padding: 12px 0; color: var(--encre); }
.recherche input:focus { outline: none; }
.recherche button { border: 0; background: transparent; color: var(--encre-pale); width: 40px; height: 40px; border-radius: 50%; }
.filtres { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filtres::-webkit-scrollbar { display: none; }
.puce { flex: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(160,120,64,.45); background: rgba(255,253,249,.9); color: #4a3520; font-size: 16px; white-space: nowrap; }
.puce.actif { background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); color: #3a2708; font-weight: 600; }

/* ── fiche ── */
.meta-ligne span + span::before { content: '·'; color: #c9a253; margin-right: 10px; }
.fiche-photo { margin: -16px -16px 0; aspect-ratio: 4 / 3; background: var(--sable); overflow: hidden; }
@media (min-width: 760px) { .fiche-photo { margin: 0; border-radius: var(--rayon); box-shadow: var(--ombre); } }
.fiche-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: center bottom; }
.fiche-tete { padding-top: 18px; }
.meta-ligne { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.fiche h1 { font-size: 36px; margin: 8px 0 8px; }
.accroche { font-family: var(--serif); font-style: italic; font-size: 20px; color: #5a4a32; line-height: 1.35; }
.bloc { background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px 18px; margin-top: 16px; }
.bloc h2 { font-family: var(--sans); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 600; border-bottom: 1px solid var(--filet); padding-bottom: 8px; margin-bottom: 12px; }
.ingr { list-style: none; margin: 0; padding: 0; }
.ingr li { position: relative; padding: 6px 0 6px 24px; font-size: 18px; border-bottom: 1px dotted var(--filet); }
.ingr li:last-child { border-bottom: 0; }
.ingr li::before { content: ''; position: absolute; left: 0; top: 13px; width: 15px; height: 15px; background: url(img/boule-or.webp) center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(125,90,16,.35)); }
.gestes { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.gestes li { counter-increment: g; position: relative; padding: 8px 0 8px 44px; font-size: 18px; line-height: 1.45; }
.gestes li::before { content: counter(g); position: absolute; left: 0; top: 4px; width: 32px; height: 32px; border-radius: 50%; color: #3a2708; font-family: var(--serif); font-size: 20px; display: grid; place-items: center; line-height: 1; background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); box-shadow: 0 1px 3px rgba(74,48,12,.25), inset 0 1px 0 rgba(255,255,255,.5); }
.offre { border-color: var(--or-clair); background: #fffdf8; padding: 20px 22px; box-shadow: inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(201,151,27,.4), var(--ombre); }
.offre p { font-size: 18px; margin: 0; }
.astuce { font-style: italic; color: var(--encre-douce); font-size: 17px; margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--or-clair); background: rgba(255,253,248,.7); border-radius: 0 14px 14px 0; }
.astuce b { font-style: normal; color: var(--or); font-weight: 600; }
.credit { font-size: 13px; color: var(--encre-pale); margin-top: 18px; }

/* ── mode cuisine ── */
.cuisine { position: fixed; inset: 0; z-index: 40; background: linear-gradient(rgba(253,250,242,.7), rgba(253,250,242,.7)), var(--marbre) url('img/marbre-doux.webp') center / cover no-repeat; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.cuisine[hidden] { display: none; }
.cuisine::before { content: ''; position: absolute; inset: -24px; z-index: -1; background: var(--plat, none) center / cover; filter: blur(16px) saturate(.9); opacity: .28; pointer-events: none; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.anneau { --p: 0; position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; font-family: var(--serif); font-size: 22px; color: var(--or-sombre); background: conic-gradient(#c9a253, #f4d58a calc(var(--p) * 1%), var(--filet) 0); box-shadow: 0 2px 6px rgba(125,90,16,.18); transition: --p .5s ease-out; }
.anneau::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(253,250,242,.96); }
.anneau span { position: relative; }
.pluie { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pluie i { position: absolute; top: -14px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff6d2 0%, #e8c078 45%, #b8902d 85%); box-shadow: 0 0 6px rgba(232,192,120,.7); opacity: 0; animation: tomber 2s ease-in forwards; }
@keyframes tomber { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh) rotate(300deg); } }
.cuisine .haut { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--filet); background: rgba(253,250,242,.9); }
.cuisine .haut .titre { font-family: var(--serif); font-size: 20px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.cuisine .fermer { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--filet); background: var(--pierre); font-size: 26px; line-height: 1; color: var(--encre-douce); }
.cuisine .corps { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 24px; overflow-y: auto; }
.cuisine .numero { font-family: var(--serif); font-size: 22px; color: var(--or); letter-spacing: 1px; margin-bottom: 14px; }
.cuisine .etape { font-family: var(--serif); font-size: clamp(32px, 8vw, 52px); line-height: 1.25; color: var(--encre); }
.cuisine .ingr-rappel { margin-top: 26px; font-size: 17px; color: var(--encre-pale); }
.cuisine .ingr-rappel b { color: var(--or); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 6px; }
.cuisine .bas { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 14px 16px 18px; background: rgba(253,250,242,.92); border-top: 1px solid var(--filet); }
.cuisine .bas button { min-height: 76px; font-size: 22px; border-radius: 18px; }
.cuisine .bas .lingot { font-size: 24px; }
.cuisine .fin-texte { text-align: center; }
.cuisine .fin-texte .etape { font-size: clamp(32px, 8vw, 50px); }

/* ── courses ── */
.courses-rec { margin-top: 14px; }
.courses-rec .tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.courses-rec .tete h3 { flex: 1; min-width: 0; }
.courses-rec .retirer { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filet); background: var(--pierre); color: var(--encre-pale); font-size: 20px; }
.coche { list-style: none; margin: 0; padding: 0; }
.coche li { border-bottom: 1px dotted var(--filet); }
.coche label { display: flex; align-items: center; gap: 12px; padding: 10px 2px; font-size: 18px; cursor: pointer; min-height: 48px; }
.coche input { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin: 0; flex: none; border: 1.5px solid #c9a253; border-radius: 8px; background: var(--pierre); display: grid; place-items: center; transition: background .2s; }
.coche input::before { content: ''; width: 13px; height: 7px; border-left: 2.5px solid #3a2708; border-bottom: 2.5px solid #3a2708; transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform .2s; }
.coche input:checked { background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); }
.coche input:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1); }
.coche span { background: linear-gradient(var(--or), var(--or)) no-repeat 0 58% / 0 2px; transition: background-size .35s ease-out, color .35s; }
.coche input:checked + span { background-size: 100% 2px; color: var(--encre-pale); }
.outils { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.outils .creux { flex: 1; }

/* ── semaine ── */
.semaine { width: 100%; border-collapse: collapse; }
.semaine th { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--or-sombre); text-align: left; padding: 10px 8px 10px 0; width: 30%; vertical-align: top; }
.semaine td { padding: 10px 0; border-top: 1px solid var(--filet); vertical-align: top; }
.semaine th:first-child { border-top: 1px solid var(--filet); }
.semaine a { display: block; text-decoration: none; color: var(--encre); font-size: 17px; line-height: 1.3; }
.semaine small { display: block; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--or); font-weight: 600; }

/* ── fondations (lecture) ── */
.lecture p { font-size: 18px; line-height: 1.55; }
.lecture .exergue { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--or-sombre); }
.tresor-l { list-style: none; margin: 0; padding: 0; }
.tresor-l li { padding: 10px 0; border-bottom: 1px dotted var(--filet); font-size: 17px; }
.tresor-l b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--or-sombre); }

/* ── barre basse ── */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: rgba(253,250,242,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--filet); padding-bottom: env(safe-area-inset-bottom); }
.barre a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 8px; min-height: var(--barre-h); text-decoration: none; color: var(--encre-pale); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.barre a svg { width: 26px; height: 26px; }
.barre a.actif { color: var(--or-sombre); }
.barre a.actif svg { color: var(--or); }
.badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--or); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.badge[hidden] { display: none; }

/* ── toast ── */
.toast { position: fixed; left: 50%; bottom: calc(var(--barre-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--encre); color: #fff8e6; padding: 12px 20px; border-radius: 14px; font-size: 16px; box-shadow: var(--ombre); z-index: 45; max-width: calc(100% - 32px); }
.toast[hidden] { display: none; }

/* ── install ── */
.install { display: flex; align-items: center; gap: 12px; }
.install .ic { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.install p { margin: 0; font-size: 15px; color: var(--encre-douce); }
.install b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--encre); }
.pied { margin-top: 40px; text-align: center; font-size: 15px; color: var(--encre-pale); }
.pied a { color: var(--or-sombre); }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .rev { opacity: 1; transform: none; } }

/* ═══ v2 : logo, École, cadenas d'or, feuille du bas, notifications ═══ */
.logo-tete { text-align: center; padding: 4px 0 14px; }
.logo-tete .logo, .ecole-tete .logo { width: 180px; height: auto; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(125,90,16,.22)); }
@media (min-width: 760px) { .logo-tete .logo, .ecole-tete .logo { width: 260px; } }
.ecole-appel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 12px; text-decoration: none; color: var(--encre); }
.ecole-appel img { width: 90px; height: auto; flex: none; }
.ecole-appel div { flex: 1; min-width: 0; font-size: 15px; color: var(--encre-douce); }
.ecole-appel b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--encre); line-height: 1.15; margin-bottom: 4px; }
.ecole-appel span { font-size: 24px; color: var(--or); }
.ecole-tete { text-align: center; padding-bottom: 8px; position: relative; }
.ecole-tete::before { content: ''; position: absolute; left: 50%; top: 74px; width: 250px; height: 250px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(232,192,120,.55) 0%, rgba(232,192,120,.18) 45%, rgba(232,192,120,0) 70%); opacity: .6; animation: halo 4s ease-in-out infinite; z-index: -1; pointer-events: none; }
@media (min-width: 760px) { .ecole-tete::before { top: 107px; width: 360px; height: 360px; } }
@keyframes halo { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.08); } }
.ecole-tete .intro { margin-top: 12px; }
.intro-petite { font-size: 16px; color: var(--encre-douce); margin: 4px 0 12px; }
/* satsangs offerts */
.satsangs { display: grid; gap: 8px; }
.satsang { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px 10px 10px; min-height: 64px; border-radius: 14px; border: 1px solid var(--filet); background: var(--pierre); color: var(--encre); box-shadow: var(--ombre); }
.satsang .num { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; color: #3a2708; background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); }
.satsang .t { flex: 1; min-width: 0; }
.satsang b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.15; }
.satsang small { display: block; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--or); font-weight: 600; margin-top: 3px; }
.satsang .play { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 210deg, #f4d58a, #c9a253 30%, #f6e7b1 52%, #a07840 76%, #f4d58a); box-shadow: 0 2px 5px rgba(125,90,16,.3), inset 0 0 0 2px rgba(255,255,255,.35); }
.satsang .play svg { width: 16px; height: 16px; margin-left: 2px; }
.satsang.actif .play { animation: onde 2.4s ease-out infinite; }
@keyframes onde { 0% { box-shadow: 0 2px 5px rgba(125,90,16,.3), 0 0 0 0 rgba(212,175,55,.55); } 100% { box-shadow: 0 2px 5px rgba(125,90,16,.3), 0 0 0 12px rgba(212,175,55,0); } }
.satsang.actif { border-color: var(--or-clair); background: #fffdf8; }
.lecteur { margin: 0 -16px 14px; background: #000; }
@media (min-width: 760px) { .lecteur { margin: 0 0 14px; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); } }
.lecteur .cadre { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lecteur-t { padding: 10px 16px; background: var(--pierre); font-size: 15px; color: var(--encre-douce); }
.lecteur-t b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--encre); }
/* cadenas d'or */
.verrou { display: block; width: 100%; position: relative; text-align: left; padding: 0; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.verrou .ph { position: relative; overflow: hidden; }
.verrou .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.verrou[data-vu="ok"] .ph::after { animation: sheen 1.6s ease-out .2s 1 both; }
.verrou:hover .ph::after { animation: sheen 1.1s ease-out 0s 1 both; }
.verrou .voile-marbre { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,250,242,.35), rgba(253,250,242,.7)), url('img/marbre-doux.webp') center / cover; opacity: .82; }
.verrou img { filter: saturate(.75); }
.cadenas { width: 44px; height: 53px; filter: drop-shadow(0 3px 6px rgba(125,90,16,.35)); }
.verrou .cadenas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); }
.verrou .t h3 { color: var(--encre-douce); }
.verrou:hover img { transform: none; }
/* feuille du bas */
.feuille { position: fixed; inset: 0; z-index: 42; }
.feuille[hidden] { display: none; }
.feuille .fond { position: absolute; inset: 0; background: rgba(42,33,24,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.feuille .panneau { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,253,248,.5), rgba(255,252,245,.62)), url('img/marbre-premium.webp') center / cover; border-top: 1px solid rgba(212,175,55,.6); border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 -10px 40px rgba(74,48,12,.25); animation: monter .28s ease-out; }
@keyframes monter { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.feuille .poignee { width: 44px; height: 5px; border-radius: 3px; background: var(--filet); margin: 0 auto 14px; }
.feuille .cadenas { width: 54px; height: 65px; margin: 0 auto 8px; display: block; }
.feuille h2 { font-size: 24px; margin-bottom: 8px; }
.feuille p { font-size: 17px; color: var(--encre-douce); margin-bottom: 16px; }
.feuille .large { width: 100%; margin-bottom: 10px; }
.nu { border: 0; background: transparent; color: var(--encre-pale); font-size: 16px; padding: 10px; min-height: 44px; }
.ecole-liens { margin-top: 28px; }
/* notifications & installation */
.install, .push { padding: 14px 16px; margin-top: 10px; }
.push { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.push .boule { width: 40px; height: 40px; margin-top: 4px; }
.push p { flex: 1; min-width: 180px; margin: 0; font-size: 15px; color: var(--encre-douce); }
.push b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--encre); }
.push .deux { display: flex; gap: 8px; width: 100%; }
.push .deux button { flex: 1; min-height: 48px; font-size: 17px; padding: 8px 12px; }
.install .lingot { min-height: 48px; padding: 8px 18px; font-size: 18px; }
.plus-sentinelle { height: 1px; }

/* ═══ v3 wahou : transitions, squelettes, cœur ═══ */
.vue { view-transition-name: vue; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(vue) { animation: sortir .12s ease-in both; }
::view-transition-new(vue) { animation: entrer .22s ease-out both; }
.vue.entree { animation: entrer .22s ease-out; }
@keyframes entrer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sortir { to { opacity: 0; } }
.sq { border-radius: var(--rayon); background: linear-gradient(100deg, #f4ecda 35%, #fffdf8 50%, #f4ecda 65%) 0 0 / 220% 100%; animation: miroiter 1.5s linear infinite; margin: 0 auto 16px; }
@keyframes miroiter { to { background-position: -120% 0; } }
.chargement .sq.logo { width: 180px; height: 148px; } .chargement .sq.hero { aspect-ratio: 4 / 3; } .chargement .sq.btn { height: 56px; }
.ico { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; flex: none; }
.bat { animation: battre .6s ease-out; }
@keyframes battre { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ouverture : la boule dorée respire un instant puis s efface (100 % CSS : si le JS échoue, elle s efface quand même) */
#ouverture { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #fdfaf2 url(img/marbre-doux.webp) center / cover; pointer-events: none; animation: ouv-sort .5s ease 1.1s forwards; }
#ouverture i { width: 132px; height: 132px; background: url(img/boule-or-grande.webp) center / contain no-repeat; filter: drop-shadow(0 10px 18px rgba(125,90,16,.38)); animation: ouv-bat 1.1s ease-in-out both; }
@keyframes ouv-bat { 0% { opacity: 0; transform: scale(.82); } 45% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ouv-sort { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #ouverture { display: none; } }

/* « Ce que ça offre à ton corps » : lisible, instructif, boules d'or */
.offre .corps-intro { font-size: 19px; line-height: 1.55; margin-bottom: 14px; color: var(--encre); }
.corps-points { list-style: none; margin: 0; padding: 0; }
.corps-points li { position: relative; padding: 12px 0 12px 30px; border-top: 1px dotted var(--filet); }
.corps-points li::before { content: ''; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; background: url(img/boule-or.webp) center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(125,90,16,.35)); }
.corps-points b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--or-fonce, #8a6a14); margin-bottom: 3px; }
.corps-points span { display: block; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.offre .corps-moment { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(201,151,27,.09); font-size: 17px; line-height: 1.5; }
.corps-moment b { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); margin-bottom: 4px; font-family: var(--sans); }

/* « En bref » : la phrase que retient quelqu un qui ne connaît rien à la nutrition */
.offre .corps-bref { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #f6e7b1 0%, #e9d38a 55%, #d8b45a 100%); border: 1px solid #b8902d; box-shadow: 0 6px 16px rgba(125,90,16,.18); font-family: var(--serif); font-size: 20px; line-height: 1.42; color: #2a2118; }
.corps-bref b { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b4e0c; margin-bottom: 6px; }

.corps-bref .malin { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(107,78,12,.35); font-family: var(--sans); font-size: 16.5px; line-height: 1.5; color: #3a2c10; }
.corps-bref .malin i { display: block; font-style: normal; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b4e0c; margin-bottom: 4px; font-weight: 700; }

/* ── Mon frigo ── */
.frigo-placard { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--encre-douce); margin-bottom: 14px; cursor: pointer; }
.frigo-placard input { width: 22px; height: 22px; flex: none; accent-color: var(--or); }
.frigo-cat { margin-top: 14px; }
.frigo-cat h2 { font-family: var(--sans); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 600; margin-bottom: 8px; }
.frigo-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.frigo-puces .puce { min-height: 40px; padding: 6px 14px; font-size: 15.5px; }
.frigo-res { margin-top: 26px; }
.frigo-res .compte { font-size: 15px; color: var(--encre-pale); }
.frigo-res h2 { font-family: var(--serif); font-size: 24px; margin: 22px 0 12px; }
.frigo-item { display: flex; flex-direction: column; gap: 6px; }
.frigo-item .manque { font-size: 14px; line-height: 1.35; color: #7a5a1e; padding: 0 4px; }
.puce.bat { animation: battre .35s ease-out; }

.lien-outil { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 6px; font-size: 15px; color: var(--encre-pale); text-decoration: none; }
.lien-outil .ico { width: 20px; height: 20px; color: var(--or-sombre); flex: none; }
.frigo-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--or-sombre); }
.frigo-btn .ico { width: 22px; height: 22px; }
.frigo-saisie { display: flex; gap: 10px; align-items: stretch; margin-top: 16px; }
.frigo-saisie .recherche { flex: 1; margin: 0; }
.frigo-mic { flex: none; width: 56px; border-radius: 16px; border: 1px solid rgba(160,120,64,.55); background: var(--pierre); color: var(--or-sombre); display: grid; place-items: center; }
.frigo-mic svg { width: 26px; height: 26px; }
.frigo-mic.ecoute { background: linear-gradient(135deg, #F4D58A, #C9A253); color: #3a2708; animation: ecoute 1.2s ease-in-out infinite; }
@keyframes ecoute { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,151,27,.45); } 50% { box-shadow: 0 0 0 10px rgba(201,151,27,0); } }
.frigo-aide { font-size: 14px; color: var(--encre-pale); margin: 6px 0 12px; }
.frigo-choisis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.frigo-choisis:empty { display: none; }
.frigo-tu-as { font-size: 15px; color: var(--encre-pale); }
.frigo-choisis .puce i { font-style: normal; margin-left: 6px; opacity: .7; }
.frigo-liste { margin-top: 28px; border-top: 1px solid var(--filet); padding-top: 12px; }
.frigo-liste summary { cursor: pointer; font-size: 16px; color: var(--or-sombre); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.frigo-liste summary::-webkit-details-marker { display: none; }
.frigo-liste summary::before { content: '▸'; font-size: 14px; }
.frigo-liste[open] summary::before { content: '▾'; }
.frigo-liste .recherche { margin-top: 10px; }

.partage { margin-top: 22px; }
.partage .creux .ico { width: 22px; height: 22px; }

/* fondations : précédente / suivante, et les cinq points */
.fond-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.fond-nav .creux { justify-content: flex-start; text-align: left; gap: 10px; padding: 10px 14px; min-height: 64px; }
.fond-nav .creux:last-of-type { justify-content: flex-end; text-align: right; }
.fond-nav .fl { font-size: 22px; color: var(--or); flex: none; }
.fond-nav .lib { display: block; min-width: 0; font-family: var(--serif); font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.fond-nav .lib small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--encre-pale); margin-bottom: 2px; }
.fond-points { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; padding: 6px 0; }
.fond-points a { width: 12px; height: 12px; border-radius: 50%; background: url(img/boule-or.webp) center / contain no-repeat; opacity: .35; }
.fond-points a.ici { opacity: 1; transform: scale(1.35); }

/* ── cadeau : formulaire « Reçois le livre » (visible seulement si la porte d'Élio est ouverte) ── */
.gift { display: none; margin: 22px 0 6px; padding: 22px 20px; }
html.cadeau-on .gift { display: block; }
.gift h3 { margin: 4px 0 8px; }
.gift p { margin: 0 0 12px; line-height: 1.55; }
.gift input[type=text], .gift input[type=email] { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 14px 14px; min-height: 48px; font: inherit; font-size: 17px; color: var(--encre); background: #fffdf8; border: 1.5px solid #d9c590; border-radius: 12px; }
.gift input:focus { outline: 2px solid var(--or); outline-offset: 1px; }
.gift .miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gift .gift-ok { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.gift .gift-ok input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #b8892f; }
.gift .msg { margin-top: 10px; min-height: 1.2em; font-size: 15px; color: var(--encre); }

/* ── plats des élèves : étoiles, galerie, classement ── */
.plats .etoiles { display: flex; gap: 4px; margin: 4px 0 6px; }
.plats .etoiles button { width: 52px; height: 52px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.plats .etoiles svg { width: 38px; height: 38px; }
.note-txt { margin: 0 0 18px; color: var(--encre-douce); }
.note-mini { color: var(--or-sombre); font-weight: 600; }
.plat-poster { display: flex; flex-direction: column; gap: 12px; }
.plat-poster input[type=text] { min-height: 52px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--filet); background: var(--pierre); font: inherit; color: var(--encre); }
.plat-poster .msg { min-height: 1.4em; color: var(--encre-pale); font-size: 16px; }
.gal-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.gal-mini figure, .gal-grille figure { margin: 0; }
.gal-mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--filet); display: block; }
.gal-mini figcaption { font-size: 15px; color: var(--encre-pale); padding: 4px 2px; }
.gal-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 560px) { .gal-grille { grid-template-columns: 1fr 1fr 1fr; } }
.gal-grille .plat { background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.gal-grille .plat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal-grille figcaption { padding: 8px 12px 4px; display: flex; flex-direction: column; font-size: 14px; color: var(--encre-pale); }
.gal-grille figcaption b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--encre); line-height: 1.2; }
.petit { align-self: flex-start; margin: 2px 12px 10px; min-height: 36px; padding: 4px 4px; border: 0; background: none; color: var(--encre-pale); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.ligne.rang .n { font-family: var(--serif); font-size: 30px; color: var(--or); width: 38px; text-align: center; flex: none; }
.gal-mini img, .gal-grille .plat img { height: auto; }

/* v3 : bouton « Mélanger » (tirage aléatoire) + pays du monde — 11/10/2026 */
.melange-ligne { display: flex; justify-content: center; margin: 2px 0 16px; }
.creux.melange { min-height: 46px; padding: 10px 18px; font-size: 16px; border-radius: 999px; }
.creux.melange svg { width: 20px; height: 20px; }
.creux.melange.actif svg { stroke: #3a2708; }
#pays { margin-top: -4px; }
#pays .puce { min-height: 40px; padding: 6px 14px; font-size: 15px; }

.courses-mains { margin-top: 18px; }
.ajout-courses { display: flex; gap: 8px; margin: 4px 0 6px; }
.ajout-courses input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; font-size: 18px; border: 1px solid var(--filet); border-radius: 14px; background: var(--pierre); color: var(--encre); font-family: inherit; }
.ajout-courses .lingot { flex: none; min-height: 48px; padding: 0 18px; }
.courses-mains .coche li { display: flex; align-items: center; gap: 8px; }
.courses-mains .coche label { flex: 1; min-width: 0; }
.courses-mains .coche .retirer { width: 36px; height: 36px; font-size: 16px; flex: none; }

/* compte (12/10) */
.entete-actions { display: flex; gap: 8px; }
.entete-btn .ico { width: 24px; height: 24px; }
.entete-btn.connecte { background: linear-gradient(135deg, #F4D58A, #C9A253); border-color: rgba(160,120,64,.55); color: #3a2708; }
.entete-btn .initiale { font-family: var(--serif); font-size: 21px; line-height: 1; }
.feuille .connexion form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.feuille .connexion input { min-height: 52px; padding: 0 16px; font-size: 18px; border: 1px solid var(--filet); border-radius: 14px; background: var(--pierre); color: var(--encre); font-family: inherit; text-align: center; }
.feuille .connexion #cx-code { font-size: 26px; letter-spacing: .3em; }
.feuille .connexion .boule.grande { width: 52px; height: 52px; margin: 0 auto 8px; display: block; }
.feuille .cx-msg { color: #9a3b1b; font-size: 16px; margin: 6px 0 0; min-height: 1px; }
.feuille .cx-note { font-size: 14px; color: var(--encre-pale); margin: 10px 0 0; }
.feuille .cx-envoye { font-size: 16px; margin: 0 0 4px; }
.moi-carte { padding: 16px 18px; }
.moi-carte p { margin: 0 0 8px; font-size: 17px; color: var(--encre-douce); }
.feuille .connexion form[hidden] { display: none; }

/* [MOBILE PREMIUM 14/10] cibles ≥44 px partout, mention de marque lisible */
.marque { min-height: 44px; }
.marque-giri { font-size: 11px; }
.lien-outil { min-height: 44px; margin: -6px 0 0; }
.frigo-puces .puce, #pays .puce { min-height: 44px; }
.frigo-btn { width: 44px; height: 44px; }
#q-vider { min-width: 44px; min-height: 44px; }
.frigo-placard { min-height: 44px; }
.barre a span { font-size: 12.5px; }
.pied { line-height: 2; }
.pied a { white-space: nowrap; position: relative; }
.pied a::after { content: ""; position: absolute; inset: -12px -6px; } /* zone tactile 44 px */

/* [GOOGLE 14/10] « Continuer avec Google » en tête de la feuille de connexion */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(60,64,67,.26); color: #1f1f1f; font: 600 17px/1.2 var(--sans); text-decoration: none; box-shadow: 0 2px 6px rgba(74,48,12,.10), 0 10px 22px rgba(74,48,12,.10); }
.btn-google:hover, .btn-google:focus-visible { box-shadow: 0 4px 10px rgba(74,48,12,.14), 0 14px 30px rgba(74,48,12,.16); }
.cx-ou { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--encre-pale); font-size: 15px; }
.cx-ou::before, .cx-ou::after { content: ''; flex: 1; height: 1px; background: var(--filet); }

/* ── ☰ menu : réglages (ustensiles, façon de manger, santé) + Mes espaces — 14/10 ── */
.feuille .panneau.menu { text-align: left; max-height: 88vh; overflow-y: auto; }
.feuille .menu .lingot { margin: 2px 0 4px; }
.feuille .menu h3 { font-family: var(--sans); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 600; margin: 18px 0 4px; }
.inter { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px dotted var(--filet); font-size: 17px; color: var(--encre); cursor: pointer; }
.inter input { position: absolute; opacity: 0; width: 0; height: 0; }
.inter i { flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--sable); border: 1px solid var(--filet); position: relative; transition: background .25s; }
.inter i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--pierre); box-shadow: 0 1px 3px rgba(74,48,12,.3); transition: transform .25s; }
.inter input:checked + i { background: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); border-color: rgba(160,120,64,.55); }
.inter input:checked + i::after { transform: translateX(20px); }
.inter input:focus-visible + i { outline: 2px solid var(--or); outline-offset: 2px; }
.feuille .menu .menu-note { font-size: 14px; color: var(--encre-pale); margin: 12px 0 10px; }
.menu-lien { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 17px; color: var(--encre); text-decoration: none; border-top: 1px solid var(--filet); padding: 8px 0 4px; }
.menu-lien .ico { width: 22px; height: 22px; color: var(--or-sombre); }
.reglage-note { font-size: 14px; color: var(--encre-pale); margin: -6px 0 12px; }
.reglage-note a { color: var(--or-sombre); }
/* ── « Que veut mon corps ? » ── */
.corps-q { text-align: center; padding-top: 8px; }
.corps-q .anneau { margin: 0 auto 16px; }
.corps-q h1 { font-size: 30px; margin-bottom: 18px; }
.corps-rep { display: grid; gap: 10px; max-width: 480px; margin: 0 auto; }
.corps-rep .creux { min-height: 60px; flex-direction: column; gap: 2px; }
.corps-rep .creux small { font-size: 14px; color: var(--encre-pale); }
.corps-rep .creux.actif small { color: #5a4010; }
.corps-nav { display: flex; justify-content: space-between; max-width: 480px; margin: 18px auto 0; }
.anneau.grand { width: 150px; height: 150px; font-size: 44px; margin: 0 auto 18px; }
.anneau.grand::before { inset: 12px; }
.pouls p { font-size: 17px; color: var(--encre-douce); max-width: 480px; margin: 0 auto 16px; }
.pouls form { display: flex; gap: 8px; max-width: 480px; margin: 12px auto; }
.pouls input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; font-size: 20px; text-align: center; border: 1px solid var(--filet); border-radius: 14px; background: var(--pierre); color: var(--encre); font-family: inherit; }
.pouls details { margin-top: 10px; color: var(--encre-pale); font-size: 15px; }
.pouls summary { cursor: pointer; padding: 8px; }
.pouls .corps-note { font-size: 13.5px; color: var(--encre-pale); margin-top: 10px; }
.corps-bilan .angles { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.corps-bilan .angles .puce { min-height: 36px; padding: 4px 14px; font-size: 15px; }
.corps-bilan p { font-size: 16px; color: var(--encre-douce); margin: 0 0 8px; }
.corps-bilan .reponses, .corps-bilan .note { font-size: 13.5px; color: var(--encre-pale); }
.corps-bilan .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.corps-grille { margin-top: 16px; }
.frigo-item .manque.bref { color: var(--encre-douce); }
.pouls form[hidden] { display: none; }
#pouls-go:disabled { opacity: .55; transform: none; }

/* passe des génies 14/10 : le pouls bat, une assiette d'abord, l'aliment-trésor, le partage */
@keyframes coeur { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.06); } 28% { transform: scale(1); } 42% { transform: scale(1.04); } 60% { transform: scale(1); } }
.anneau.grand.bat { animation: coeur 1s ease-in-out infinite; }
.grille.une { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
.corps-titre { margin-top: 22px; text-align: center; }
.corps-bilan .tresor { font-size: 15px; line-height: 1.45; color: var(--encre-douce); }
.corps-bilan .tresor b { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); margin-bottom: 2px; }
.corps-bilan .tresor a { color: var(--or-sombre); white-space: nowrap; }
.corps-bilan .deux .large { grid-column: 1 / -1; }
/* [PLAY 15/10] appli Google Play : aucune vente ; Mon compte : liens du bas */
html.appli-play .vente{display:none!important}
.moi-bas{margin-top:18px;justify-content:center;gap:18px;flex-wrap:wrap}
.nu.danger{color:#a8322d}
/* [DIGESTION 15/10] trois lignes à pastilles, l'effet dit en une phrase */
.dig { padding: 10px 0 12px; border-bottom: 1px dotted var(--filet); }
.dig-t { display: block; font-size: 17px; color: var(--encre); font-weight: 600; }
.dig-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dig-choix .puce { min-height: 44px; padding: 6px 16px; font-size: 15.5px; }
.dig-effet { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: #6b5c44; }
.dig-effet b { color: #7a5910; font-weight: 600; }
/* [VIGNETTES 16/10, Maha] « agrandir légèrement les images, bien centrer sur le plat » : la photo n'est plus couverte à moitié
   par le titre — carré plein, plat au centre, rapproché de 6 % ; le titre passe dessous, sur la pierre. */
.vignette.pleine:not(.chapitre) .ph { aspect-ratio: 1 / 1; }
.vignette.pleine:not(.chapitre) img { object-position: 50% 50%; transform: scale(1.06); }
.vignette.pleine:not(.chapitre):hover img { transform: scale(1.1); }
.vignette.pleine:not(.chapitre) .t { position: static; padding: 10px 12px 12px; background: none; }
/* [ENTÊTE 16/10, Maha] « le petit bonhomme n'est pas centré, la lettre non plus » : le bouton gardait la marge du navigateur (1px 6px)
   et l'icône partait à gauche (−3 px) ; l'initiale serif montait de 2 px. Centre exact, mesuré au pixel. */
.entete-btn { padding: 0; place-content: center; justify-items: center; }
.entete-btn > svg { margin: 0; display: block; }
.entete-btn .initiale { display: block; transform: translateY(.1em); }
#btn-semaine-autre { grid-column: 1 / -1; } /* [SEMAINE 16/10] sur toute la largeur, une seule ligne */
.etoiles .ico, .entete-btn .ico { margin: 0; } /* [ÉTOILES 16/10] la marge droite de .ico (prévue pour icône + texte) poussait les icônes seules de 3 px à gauche */
/* [USTENSILES 16/10] l'étape « Dans ta cuisine » : une coche d'or devant chaque ustensile */
.corps-rep.ustensiles { gap: 8px; }
.corps-rep.ustensiles .creux, .corps-rep.ustensiles .creux.actif { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px; text-align: left; background: var(--pierre); color: var(--encre); border: 1px solid var(--filet); }
.corps-rep.ustensiles .creux.actif { border-color: rgba(160,120,64,.55); }
.corps-rep.ustensiles .coche { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #3a2708; border: 1.5px solid rgba(160,120,64,.55); background: var(--pierre); }
.corps-rep.ustensiles button.actif .coche { background: linear-gradient(135deg, #F4D58A, #C9A253); border-color: transparent; }
#ust-ok { margin-top: 14px; width: 100%; }
/* [CHAPITRES 16/10] la photo du chapitre n'est plus noyée sous le voile : elle se montre entière, le titre dessous */
.vignette.chapitre.pleine .ph { aspect-ratio: 16 / 10; }
.vignette.chapitre.pleine .t { position: static; padding: 10px 12px 12px; background: none; }

/* [PROFS-BIENTOT 21/10] page des profs non officielle (Maha) : grisé, non cliquable */
.bientot{opacity:.45;filter:grayscale(1);pointer-events:none;cursor:default}

/* [CANARY 21/10] ordinateur : la barre du bas garde ses 5 boutons sur la colonne du contenu, au lieu de s’étirer sur 1440 px */
@media (min-width: 800px) { .barre { padding-inline: calc((100% - 760px) / 2); } }

.lien-outil[hidden] { display: none; }   /* [GALERIE 21/10] */

/* [MOI-ORDRE + PHOTO-GIRI 21/10] la photo commune, l'ordre logique, et le discret tout en bas */
.photo-moi { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.entete-btn:has(.photo-moi) { padding: 0; overflow: hidden; border-color: rgba(160,120,64,.55); }
.moi-tete { display: flex; align-items: center; gap: 16px; }
.moi-tete h1 { margin: 2px 0 0; }
.moi-tete .intro { margin: 2px 0 0; font-size: 15px; word-break: break-all; }
.moi-photo { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; padding: 0; border: 2px solid var(--or); background: linear-gradient(135deg, #F4D58A, #C9A253); color: #3a2708; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(120,84,30,.18); }
.moi-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.moi-photo .initiale { font-family: var(--serif); font-size: 38px; line-height: 1; }
.moi-photo-crayon { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--pierre); border: 1px solid var(--filet); display: grid; place-items: center; font-size: 14px; color: var(--or-sombre); }
.moi-photo-aide { margin: 12px 0 0; font-size: 14px; color: var(--encre-pale); }
.lien-nu { background: none; border: 0; padding: 0; font: inherit; color: var(--or-sombre); text-decoration: underline; cursor: pointer; }
.moi-discret { margin: 40px 0 8px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--encre-pale); }
.moi-discret a, .moi-discret button { background: none; border: 0; padding: 8px 2px; font: inherit; color: var(--encre-pale); text-decoration: none; cursor: pointer; }
.moi-discret .danger { color: #a8322d; opacity: .8; }
.moi-discret > span { display: none; }
.moi-discret { gap: 2px 20px; }

/* [MENU 21/10] les gestes rares, en petit tout en bas du menu */
.menu-discret { margin: 22px 0 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; font-size: 13px; }
.menu-discret a, .menu-discret button { background: none; border: 0; padding: 10px 2px; font: inherit; color: var(--encre-pale); text-decoration: none; cursor: pointer; }
.menu-discret .danger { color: #a8322d; opacity: .8; }

/* [ÉCOLE 21/10] tiroir des Satsangs + les grands chemins */
.tiroir { margin: 18px 0 8px; border: 1px solid var(--filet); border-radius: 18px; background: rgba(255,253,248,.82); overflow: hidden; }
.tiroir > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; min-height: 64px; }
.tiroir > summary::-webkit-details-marker { display: none; }
.tiroir > summary .t { flex: 1; min-width: 0; }
.tiroir > summary b { display: block; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--encre); }
.tiroir > summary small { display: block; margin-top: 3px; font-size: 14px; color: var(--encre-douce); }
.tiroir > summary .sur-titre { margin: 0 0 2px; }
.tiroir .fleche { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--filet); position: relative; }
.tiroir .fleche::after { content: ''; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-right: 2px solid var(--or-sombre); border-bottom: 2px solid var(--or-sombre); transform: rotate(45deg); transition: transform .25s; }
.tiroir[open] .fleche::after { top: 14px; transform: rotate(-135deg); }
.tiroir .satsangs { padding: 0 12px 14px; }
.tiroir .lecteur { margin: 0 0 12px; }
.chemins { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .chemins { grid-template-columns: 1fr 1fr; } }
.chemin { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 16px 16px 18px; border-radius: 18px; border: 1px solid var(--filet); background: rgba(255,253,248,.82); color: var(--encre); cursor: pointer; }
.chemin .t { flex: 1; min-width: 0; }
.chemin b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.chemin .accroche-chemin { display: block; margin-top: 4px; font-size: 15px; color: var(--encre-douce); }
.chemin small { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--or); }
.chemin .cadenas { width: 26px; height: 26px; flex: none; }
.chemin-feuille { max-height: 86vh; overflow-y: auto; }
.chemin-liste { list-style: none; margin: 10px 0 18px; padding: 0; text-align: left; }
.chemin-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--filet); font-size: 16px; }
.chemin-liste small { flex: none; color: var(--encre-pale); font-size: 13px; }

/* [ACCUEIL 21/10, Brice] accueil téléphone : plus léger, plus lisible */
@media (max-width: 759px) {
  .logo-tete .logo { width: 144px; }
  .logo-tete { padding: 2px 0 10px; }
  .actions .creux.court { min-height: 44px; padding: 8px 12px; font-size: 15px; white-space: nowrap; }
  .pied { margin-top: 28px; font-size: 12.5px; line-height: 1.7; }
}
.outils-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 14px; }
.outils-acc .lien-outil { margin: 0; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--filet); background: rgba(255,253,248,.78); color: var(--encre); font-size: 15px; line-height: 1.2; }
.outils-acc .lien-outil[hidden] { display: none; }
.livre-jus { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; margin: 0 0 14px; text-decoration: none; color: var(--encre); }
.livre-jus img { width: 64px; height: auto; flex: none; border-radius: 4px; box-shadow: 0 4px 12px rgba(80,55,20,.22); }
.livre-jus div { flex: 1; min-width: 0; }
.livre-jus .sur-titre { margin: 0 0 2px; }
.livre-jus b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
.livre-jus .sous { display: block; margin-top: 3px; font-size: 14px; color: var(--encre-douce); }
.livre-jus .fl { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F4D58A, #C9A253); color: #3a2708; font-size: 18px; }
.outils-acc .large-acc { grid-column: 1 / -1; }
/* [COURSES 21/10, Brice] la croix d’un ingrédient reste sur sa ligne, discrète, cible 40 px */
.courses-rec .coche li { display: flex; align-items: center; gap: 4px; }
.courses-rec .coche label { flex: 1; min-width: 0; }
.courses-rec .coche .retirer { width: 40px; height: 40px; flex: none; border: 0; background: none; color: var(--encre-pale); font-size: 15px; opacity: .55; }
.courses-rec .coche .retirer:hover, .courses-rec .coche .retirer:focus-visible { opacity: 1; }

/* [COURSES 21/10] le nom de la recette, en tête de ses ingrédients */
.courses-rec[data-slug] { margin-top: 22px; }
.courses-rec .courses-titre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); }
.courses-rec .courses-titre img { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; box-shadow: 0 3px 10px rgba(80,55,20,.18); }
.courses-rec .courses-titre h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; margin: 0; }

/* [TOUCHER 21/10, Brice] plus de carré qui s'allume au toucher : chaque bouton répond par sa propre forme */
html, a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
.creux:active, .puce:active, .chemin:active, .lien-outil:active, .entete-btn:active, .barre a:active, .livre-jus:active, .carte.ecole-appel:active, .tiroir > summary:active { transform: scale(.97); transition: transform .12s; }
/* [JUS 21/10] le bouton du livre : un vrai lingot rond, l'icône de téléchargement dessinée */
.livre-jus .fl { width: 44px; height: 44px; background: linear-gradient(135deg, #F4D58A 0%, #E8C078 42%, #C9A253 72%, #A07840 100%); color: #3a2708; box-shadow: 0 4px 12px rgba(160,120,64,.35), inset 0 1px 0 rgba(255,255,255,.55); border: 1px solid rgba(160,120,64,.55); }
.livre-jus .fl svg { display: block; }
/* [CROIX 21/10] croix dessinée, centrée dans son cercle */
.courses-rec .retirer { display: grid; place-items: center; padding: 0; line-height: 0; }
.courses-rec .retirer svg { display: block; }

/* [FOND 21/10, Brice] « des césures pas soignées » : l'image paysage répétée de haut en bas laissait une jointure tous les ~200 px.
   Une seule plaque de marbre, fixe, qui couvre l'écran ; le contenu défile par-dessus. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--marbre) url('img/marbre-doux.webp') center / cover no-repeat; }

/* [ÉCOLE 21/10] cartes-promesses */
.chemin { align-items: center; padding: 18px 16px 18px 18px; }
.chemin .chemin-nom { display: block; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--or); margin-bottom: 2px; }
.chemin b { font-size: 26px; font-weight: 500; }
.chemin .accroche-chemin { margin-top: 6px; font-size: 15.5px; line-height: 1.45; }
.chemin small { margin-top: 8px; font-size: 12px; letter-spacing: .6px; text-transform: none; color: var(--or-sombre); }
.chemin .cadenas { display: none; }
.chemin-fl { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--filet); position: relative; }
.chemin-fl::after { content: ''; position: absolute; left: 11px; top: 12px; width: 8px; height: 8px; border-right: 2px solid var(--or-sombre); border-top: 2px solid var(--or-sombre); transform: rotate(45deg); }
/* [ÉCOLE 21/10] un peu d’air entre le logo et le titre */
.ecole-tete .logo { margin-bottom: 14px; }

/* [MENU 21/10, Brice] bas du menu : un filet, puis une ligne courte et alignée */
.menu-discret { margin: 18px 0 2px; padding-top: 12px; border-top: 1px solid var(--filet); display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0; font-size: 13px; }
.menu-discret a, .menu-discret button { flex: 1 1 0; text-align: center; padding: 12px 4px; white-space: nowrap; }
.menu-discret > * + * { border-left: 1px solid var(--filet); }
.feuille .panneau { touch-action: pan-y; will-change: transform; }
.feuille .menu-discret > * + * { border-left: 1px solid var(--filet); }
.feuille .menu-discret { font-size: 12.5px; }

/* [RÉGLAGES 21/10] rappel propre des réglages actifs */
.reglage-note { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: -4px 0 14px; padding: 10px 14px; text-align: left; border: 1px solid var(--filet); border-left: 3px solid var(--or); border-radius: 12px; background: rgba(255,253,248,.8); font: inherit; font-size: 14px; color: var(--encre-douce); cursor: pointer; }
.reglage-note .rn-t b { color: var(--encre); font-weight: 600; }
.reglage-note .rn-n { font-size: 13px; color: var(--encre-pale); }
.reglage-note u { color: var(--or-sombre); text-underline-offset: 2px; }

/* [RETOUR 21/10] le retour des pages hors barre du bas */
.retour-vue { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 8px; margin: 0 0 10px -4px; border-radius: 999px; border: 1px solid var(--filet); background: rgba(255,253,248,.85); color: var(--or-sombre); font: inherit; font-size: 15px; cursor: pointer; }
.retour-vue:active { transform: scale(.97); }
.fiche .retour-vue, article + .retour-vue { position: relative; z-index: 2; }