/* ═══ GIRI MUSCULATION — langage de Giri Cuisine : marbre lumineux, or, EB Garamond + Lato ═══ */
@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-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: #46361f; --encre-pale: #6b573b;
  --lingot: linear-gradient(135deg, #F4D58A 0%, #E8C078 42%, #C9A253 72%, #A07840 100%);
  --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%; overscroll-behavior-x: none; }
html, body, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body {
  margin: 0; font-family: var(--sans); font-size: 19px; line-height: 1.55; color: var(--encre);
  background: var(--marbre);
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: clip;
  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)), url('img/marbre-doux.webp') center / cover no-repeat; pointer-events: none; z-index: 0; }
.entete, .vue, .barre, .mode, .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; text-wrap: balance; }
h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
p { margin: 0 0 12px; text-wrap: pretty; }
a { color: var(--or-sombre); }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.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; }
[hidden] { display: none !important; }

/* ── ouverture : la boule d'or respire puis s'efface (CSS seul) ── */
#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% { transform: scale(.82); opacity: 0; } 35% { opacity: 1; } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ouv-sort { to { opacity: 0; visibility: hidden; } }

/* ── 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,.86); 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); min-height: 44px; }
.marque-t { display: flex; flex-direction: column; line-height: 1.05; }
.marque-giri { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.marque-titre { font-family: var(--serif); font-size: 22px; }
.boule { display: inline-block; width: 30px; height: 30px; 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 { display: block; width: 60px; height: 60px; margin: 0 auto 14px; }
.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; font-family: var(--serif); font-size: 20px; }
.entete-btn svg { width: 22px; height: 22px; }

/* ── vue ── */
.vue { max-width: 820px; margin: 0 auto; padding: 16px 16px 40px; outline: none; view-transition-name: vue; }
@media (min-width: 760px) { .vue { padding: 28px 24px 56px; } }
.chargement { text-align: center; padding: 60px 0; color: var(--encre-pale); }
.sur-titre { font-size: 13px; 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: 34px; }
.section > h2 { margin-bottom: 6px; }
.section > .sous { color: var(--encre-douce); font-size: 19px; margin-bottom: 14px; }
.centre { text-align: center; }

/* ── 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: 21px; color: #3a2708; text-decoration: none; background: var(--lingot); 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) scale(.99); }
.lingot[disabled] { filter: grayscale(.6); opacity: .7; cursor: not-allowed; }
.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; transition: transform .15s, border-color .2s; }
.creux:hover { border-color: var(--or); }
.creux:active { transform: scale(.98); }
.creux svg { width: 22px; height: 22px; }
.nu { background: none; border: 0; min-height: 48px; padding: 10px 14px; color: var(--encre-pale); font-size: 19px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--filet); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.actions .lingot { grid-column: 1 / -1; }

/* ── cartes, héros ── */
.carte { background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); }
.bloc { background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 18px; margin-top: 16px; box-shadow: var(--ombre); }
.bloc > h2.k, .k { font-family: var(--sans); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 600; margin: 0 0 10px; }
.bloc > h2.k { border-bottom: 1px solid var(--filet); padding-bottom: 8px; margin-bottom: 12px; }
.hero { position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4 / 5; background: var(--sable); }
@media (min-width: 640px) { .hero { aspect-ratio: 16 / 10; } }
.hero img { width: 100%; height: 100%; object-fit: cover; animation: ken 22s ease-out forwards; }
@keyframes ken { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,250,242,.97) 0%, rgba(253,250,242,.9) 34%, rgba(253,250,242,.45) 58%, rgba(253,250,242,0) 76%); }
.hero .texte { position: absolute; top: 24px; left: 18px; right: 18px; text-align: center; animation: souffle .6s ease-out .15s both; }
.hero h1 { font-size: clamp(40px, 10vw, 60px); letter-spacing: .3px; }
.hero .sous { font-family: var(--serif); font-style: italic; font-size: 21px; color: #5e440b; margin-top: 8px; }
.hero .chiffres { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 26px; padding: 12px 12px 14px; background: rgba(255,253,248,.96); border-top: 1px solid var(--filet); box-shadow: 0 -8px 24px rgba(74,48,12,.10); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--or-sombre); font-weight: 600; }
.hero .chiffres span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.hero .chiffres b { font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: 0; color: var(--encre); text-transform: none; }
.poussiere i { position: absolute; width: 4px; height: 7px; border-radius: 2px; background: var(--lingot); opacity: 0; animation: flotter 9s ease-in-out infinite; pointer-events: none; }
.poussiere i:nth-child(1) { left: 12%; top: 78%; } .poussiere i:nth-child(2) { left: 28%; top: 86%; animation-delay: 1.6s; } .poussiere i:nth-child(3) { left: 47%; top: 80%; animation-delay: 3.1s; }
.poussiere i:nth-child(4) { left: 63%; top: 88%; animation-delay: 4.4s; } .poussiere i:nth-child(5) { left: 78%; top: 76%; animation-delay: 5.8s; } .poussiere i:nth-child(6) { left: 90%; top: 84%; animation-delay: 7.2s; }
@keyframes flotter { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: .9; } 60% { opacity: .5; } 100% { opacity: 0; transform: translateY(-160px) translateX(10px) rotate(160deg); } }
@keyframes souffle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rev { animation: souffle .5s ease-out both; }

/* ── les trois niveaux ── */
.niveaux { display: grid; gap: 14px; }
@media (min-width: 700px) { .niveaux { grid-template-columns: repeat(3, 1fr); } }
.niveau { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); transition: transform .15s, border-color .2s; }
.niveau:hover { border-color: var(--or); transform: translateY(-2px); }
.niveau:active { transform: scale(.98); }
.niveau .ph { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sable); position: relative; }
.niveau .ph img { width: 100%; height: 100%; object-fit: cover; }
.niveau .rang { position: absolute; top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #3a2708; background: var(--lingot); box-shadow: 0 1px 3px rgba(74,48,12,.25), inset 0 1px 0 rgba(255,255,255,.5); }
.niveau .t { padding: 14px 16px 16px; }
.niveau h3 { font-size: 26px; }
.niveau .pour { font-size: 17px; color: var(--or-sombre); font-weight: 600; margin: 2px 0 8px; }
.niveau p { font-size: 19px; color: var(--encre-douce); margin: 0 0 10px; }
.niveau .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.niveau.choisi { border-color: var(--or); box-shadow: inset 0 0 0 2px var(--or-clair), var(--ombre); }

/* ── frise des 12 semaines ── */
.frise { position: relative; margin: 8px 0 4px; }
.frise-blocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 559px) { .frise-blocs { grid-template-columns: 1fr; } .fb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 10px; } .fb .nom { margin: 0; } .fb .n { grid-column: 1; } .fb .nom { grid-column: 1; } .fb .sems { grid-column: 2; grid-row: 1 / span 2; } }
.fb { position: relative; padding: 10px 8px 12px; border-radius: 14px; border: 1px solid var(--filet); background: rgba(255,253,248,.92); }
.fb .n { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.fb .nom { font-family: var(--serif); font-size: 19px; line-height: 1.1; margin: 2px 0 10px; }
.sems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.sem { position: relative; height: 46px; border-radius: 10px; border: 1px solid var(--filet); background: var(--marbre); display: grid; place-items: center; font-family: var(--serif); font-size: 19px; color: var(--encre-pale); transform-origin: bottom; animation: pousse .5s cubic-bezier(.2,.8,.3,1.2) both; }
.sem.faite { background: var(--lingot); color: #3a2708; border-color: rgba(160,120,64,.55); }
.sem.encours { border: 2px solid var(--or); color: var(--or-sombre); background: #fff; animation: pousse .5s cubic-bezier(.2,.8,.3,1.2) both, halo 2.4s ease-in-out .8s infinite; }
.sem.allegee::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3c3-4 6 4 9 0s6 4 9 0 6 4 6 0' fill='none' stroke='%23b8902d' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.sem.records svg { width: 22px; height: 22px; }
@keyframes pousse { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.45); } 50% { box-shadow: 0 0 0 7px rgba(212,175,55,0); } }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 17px; color: var(--encre-pale); margin-top: 12px; }
.legende i { display: inline-block; width: 16px; height: 16px; border-radius: 5px; vertical-align: -3px; margin-right: 6px; border: 1px solid var(--filet); }
.progres-l { height: 8px; border-radius: 99px; background: var(--sable); overflow: hidden; margin: 12px 0 6px; }
.progres-l i { display: block; height: 100%; background: var(--lingot); border-radius: 99px; transform-origin: left; animation: remplir 1s ease-out both; }
@keyframes remplir { from { transform: scaleX(0); } }

/* ── semaines détaillées ── */
.semaine-l { border: 1px solid var(--filet); border-radius: 14px; background: rgba(255,253,248,.94); margin-top: 8px; overflow: hidden; }
.semaine-l > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: 0; text-align: left; min-height: 56px; }
.semaine-l .num { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; border: 1px solid var(--filet); background: var(--marbre); }
.semaine-l.faite .num { background: var(--lingot); color: #3a2708; }
.semaine-l.encours { border-color: var(--or); }
.semaine-l .tt { flex: 1; min-width: 0; }
.semaine-l .tt b { display: block; font-weight: 600; font-size: 19px; }
.semaine-l .tt span { font-size: 17px; color: var(--encre-pale); }
.semaine-l .chev { transition: transform .2s; color: var(--or); }
.semaine-l.ouverte .chev { transform: rotate(180deg); }
.semaine-l .seances-l { padding: 0 14px 12px 66px; display: grid; gap: 6px; }
.seance-mini { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--filet); background: var(--pierre); min-height: 48px; font-size: 16px; }
.seance-mini.faite { color: var(--encre-pale); }
.seance-mini.faite::after { content: '✓'; color: var(--or); font-weight: 600; }

/* ── séance du jour ── */
.jour-tete { display: flex; gap: 16px; align-items: center; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.anneau { --p: 0; position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); 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 1s ease-out; }
.anneau::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(253,250,242,.97); }
.anneau span { position: relative; text-align: center; line-height: 1; }
.anneau b { display: block; font-weight: 400; font-size: 30px; }
.anneau small { font-family: var(--sans); font-size: 13px; color: var(--encre-pale); }
.anneau.grand { width: min(64vw, 300px); height: min(64vw, 300px); }
.anneau.grand::before { inset: 12px; }
.anneau.grand b { font-size: clamp(64px, 18vw, 104px); }
.exos { display: grid; gap: 10px; margin-top: 14px; }
.exo { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; text-align: left; background: var(--pierre); border: 1px solid var(--filet); border-radius: 16px; min-height: 84px; transition: transform .15s, border-color .2s; }
.exo:hover { border-color: var(--or); }
.exo:active { transform: scale(.985); }
.exo .vig { flex: none; width: 88px; height: 72px; border-radius: 12px; background: var(--pierre); border: 1px solid var(--filet); overflow: hidden; }
.exo .vig svg { width: 100%; height: 100%; }
.exo .t { flex: 1; min-width: 0; }
.exo h3 { font-size: 20px; line-height: 1.15; }
.exo .plan { font-size: 19px; color: var(--encre-douce); margin-top: 3px; }
.exo .plan b { color: var(--encre); font-weight: 600; }
.exo .charge { font-size: 19px; color: var(--or-sombre); font-weight: 600; margin-top: 2px; }
.exo .alerte { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--or); color: var(--or-sombre); margin-top: 4px; }
.exo .fl { flex: none; color: var(--or); }
.echauffe { display: flex; gap: 12px; align-items: flex-start; }
.echauffe .paliers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.palier { padding: 6px 12px; border-radius: 10px; background: var(--marbre); border: 1px solid var(--filet); font-size: 16px; }
.regle { font-size: 19px; color: var(--encre-douce); padding: 14px 18px; border-left: 3px solid var(--or-clair); background: rgba(255,253,248,.85); border-radius: 0 14px 14px 0; margin-top: 16px; }
.regle b { color: var(--or-sombre); font-weight: 600; }

/* ── démonstration animée ── */
.gm-fig, .demo svg { display: block; }
.demo { position: relative; background: var(--pierre); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.demo svg { width: 100%; height: auto; aspect-ratio: 340 / 344; }
.gm-pose { will-change: opacity, transform; }
.gm-tempo { fill: var(--or-clair); opacity: .7; }
.gm-legende { font: 600 15px var(--sans); fill: var(--or-sombre); text-anchor: middle; letter-spacing: 2px; text-transform: uppercase; }
.credit-demo { font-size: 13px; color: var(--encre-pale); margin: 6px 2px 0; }
.credit-demo a { color: var(--encre-pale); }
.credits p { font-size: 16px; color: var(--encre-douce); margin: 0 0 10px; }
.demo .phase { position: absolute; left: 12px; top: 10px; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--or-sombre); background: rgba(255,253,248,.92); border: 1px solid var(--filet); padding: 4px 10px; border-radius: 99px; }
.demo .phase:empty { display: none; }
.gm-carte { width: 100%; max-width: 300px; display: block; margin: 0 auto; }
.gm-sil { fill: #f6efdf; stroke: #d6c393; stroke-width: 1; }
.gm-m { fill: #eee3c7; stroke: #dccb9b; stroke-width: .6; transition: fill .4s; }
.gm-m.mi { fill: #ecd391; }
.gm-m.on { fill: #c9a033; stroke: var(--or-sombre); animation: brille 2.2s ease-in-out infinite; }
@keyframes brille { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.gm-carte-t { font: 600 11px var(--sans); fill: var(--encre-pale); text-anchor: middle; letter-spacing: 1.5px; text-transform: uppercase; }
.muscles-l { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.puce { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(160,120,64,.45); background: rgba(255,253,249,.9); color: #4a3520; font-size: 15px; }
.puce.on { background: var(--lingot); color: #3a2708; font-weight: 600; }

/* ── feuille du bas ── */
.feuille { position: fixed; inset: 0; z-index: 42; }
.feuille .fond { position: absolute; inset: 0; background: rgba(42,33,24,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: apparait .2s ease-out; }
.feuille .panneau { position: absolute; left: 0; right: 0; bottom: 0; max-width: 620px; margin: 0 auto; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgba(255,253,248,.55), rgba(255,252,245,.7)), url('img/marbre-premium.webp') center / cover; background-color: var(--pierre); border-top: 1px solid rgba(212,175,55,.6); border-radius: 22px 22px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(74,48,12,.25); animation: monter .32s cubic-bezier(.2,.8,.2,1); }
@keyframes monter { from { transform: translateY(100%); } to { transform: none; } }
@keyframes apparait { from { opacity: 0; } }
.feuille .poignee { width: 44px; height: 5px; border-radius: 3px; background: var(--filet); margin: 0 auto 14px; }
.feuille h2 { font-size: 28px; margin-bottom: 6px; }
.feuille .tag { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.feuille .large { margin-top: 10px; }
.feuille .fermer-x { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); background: var(--pierre); font-size: 24px; color: var(--encre-douce); }
.liste-p { margin: 6px 0 0; padding: 0; list-style: none; }
.liste-p li { position: relative; padding: 6px 0 6px 26px; font-size: 19px; border-bottom: 1px dotted var(--filet); }
.liste-p li:last-child { border-bottom: 0; }
.liste-p li::before { content: ''; position: absolute; left: 0; top: 13px; width: 15px; height: 15px; background: url(img/boule-or.webp) center / contain no-repeat; }
.deux { display: grid; gap: 14px; }
@media (min-width: 560px) { .deux { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.champ { display: block; margin-bottom: 10px; text-align: left; }
.champ span { display: block; font-size: 17px; color: var(--encre-douce); margin-bottom: 4px; font-weight: 600; }
.champ input { width: 100%; min-height: 52px; padding: 0 16px; font: inherit; font-size: 18px; border: 1px solid var(--filet); border-radius: 14px; background: var(--pierre); color: var(--encre); }
.champ input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(212,175,55,.25); }
.msg { min-height: 24px; font-size: 19px; color: #9a3b1b; margin: 6px 0; }
.msg.ok { color: var(--or-sombre); }
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--sable); margin: 6px 0 14px; }
.onglets button { min-height: 46px; border: 0; border-radius: 11px; background: transparent; font-size: 16px; color: var(--encre-douce); }
.onglets button[aria-selected="true"] { background: var(--pierre); color: var(--encre); font-weight: 600; box-shadow: 0 1px 4px rgba(74,48,12,.15); }

/* ── mode plein écran (test, chrono, cérémonies) ── */
.mode { position: fixed; inset: 0; z-index: 40; background: linear-gradient(rgba(253,250,242,.72), rgba(253,250,242,.72)), 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); animation: apparait .25s ease-out; }
.mode .haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--filet); background: rgba(253,250,242,.9); }
.mode .haut .titre { font-family: var(--serif); font-size: 20px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode .haut .titre em { color: var(--or); font-style: normal; }
.mode .fermer { flex: none; 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); }
.mode .corps { flex: 1; overflow-y: auto; padding: 20px 20px 24px; display: flex; flex-direction: column; align-items: center; }
.mode .corps > * { width: 100%; max-width: 560px; flex-shrink: 0; }
.mode .corps > .anneau.grand { width: min(64vw, 300px); height: min(64vw, 300px); }
.mode .corps.milieu { justify-content: center; }
.mode .bas { padding: 12px 16px 16px; background: rgba(253,250,242,.94); border-top: 1px solid var(--filet); display: grid; gap: 10px; }
.mode .bas > * { width: 100%; max-width: 560px; margin: 0 auto; }
.mode .bas .lingot { min-height: 68px; font-size: 24px; }
.etapes { display: flex; gap: 6px; }
.etapes i { flex: 1; height: 5px; border-radius: 99px; background: var(--filet); transition: background .3s; }
.etapes i.ok { background: var(--or); }
.question { font-family: var(--serif); font-size: clamp(28px, 7vw, 40px); line-height: 1.18; text-align: center; margin: 18px 0 20px; }
.choix { display: grid; gap: 10px; }
@media (min-width: 560px) { .choix.quatre { grid-template-columns: 1fr 1fr; } }
.choix button { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; text-align: left; background: rgba(255,253,248,.95); border: 1.5px solid var(--filet); border-radius: 18px; font-size: 19px; color: var(--encre); transition: transform .12s, border-color .2s, background .2s; }
.choix button:active { transform: scale(.98); }
.choix button[aria-checked="true"] { border-color: var(--or); background: #fff8e6; box-shadow: inset 0 0 0 1px var(--or-clair); }
.choix .ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--marbre); border: 1px solid var(--filet); color: var(--or-sombre); }
.choix button[aria-checked="true"] .ico { background: var(--lingot); color: #3a2708; }
.choix .ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resultat .niveau { margin: 14px 0; }
.pourquoi { font-size: 19px; color: var(--encre-douce); }

/* chrono */
.ch-exo { font-family: var(--serif); font-size: clamp(30px, 7.5vw, 44px); line-height: 1.12; text-align: center; margin: 4px 0 6px; }
.ch-ou { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); font-weight: 600; text-align: center; }
.ch-note { font-size: 19px; color: var(--encre-douce); text-align: center; margin: 4px auto 10px; max-width: 460px; }
.ch-demo { max-width: 340px !important; margin: 6px auto; }
.molettes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.molette { background: rgba(255,253,248,.95); border: 1px solid var(--filet); border-radius: 18px; padding: 10px 8px; text-align: center; }
.molette .l { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--encre-pale); font-weight: 600; }
.molette .v { font-family: var(--serif); font-size: 42px; line-height: 1.1; touch-action: none; user-select: none; cursor: ns-resize; }
.molette .v small { font-family: var(--sans); font-size: 15px; color: var(--encre-pale); margin-left: 3px; }
.molette .pm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.molette .pm button { min-height: 48px; border-radius: 12px; border: 1px solid var(--filet); background: var(--marbre); font-size: 26px; color: var(--or-sombre); }
.molette .pm button:active { background: #fff3d6; }
.molette.large { grid-column: 1 / -1; }
.gros { font-family: var(--serif); font-size: clamp(88px, 26vw, 150px); line-height: 1; text-align: center; color: var(--encre); }
.gros small { display: block; font-family: var(--sans); font-size: 16px; color: var(--encre-pale); letter-spacing: 1.6px; text-transform: uppercase; }
.infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.infos div { background: rgba(255,253,248,.92); border: 1px solid var(--filet); border-radius: 14px; padding: 10px 6px; text-align: center; }
.infos b { display: block; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.infos span { font-size: 13px; color: var(--encre-pale); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.ressenti { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; }
.ressenti button { min-height: 72px; border-radius: 14px; border: 1.5px solid var(--filet); background: rgba(255,253,248,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; color: var(--encre-douce); }
.ressenti button b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--encre); }
.ressenti button[aria-checked="true"] { background: var(--lingot); border-color: rgba(160,120,64,.55); color: #3a2708; }
.anneau.fini { animation: battre .5s ease-out 2; }
@keyframes battre { 50% { transform: scale(1.05); } }

/* cérémonie */
.pluie { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.pluie i { position: absolute; top: -20px; width: 7px; height: 13px; border-radius: 2px; background: var(--lingot); box-shadow: 0 0 4px rgba(232,192,120,.6); opacity: 0; animation: tomber 2.4s ease-in forwards; }
@keyframes tomber { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(105vh) rotate(540deg); } }
.ceremonie { text-align: center; }
.ceremonie .boule.grande { width: 110px; height: 110px; animation: ouv-bat 1.1s ease-in-out both; }
.ceremonie h1 { font-size: clamp(36px, 9vw, 54px); margin: 8px 0; }
.ceremonie .citation { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--or-sombre); }
.records-l { display: grid; gap: 8px; margin: 14px 0; text-align: left; }
.record { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,253,248,.95); border: 1px solid var(--filet); font-size: 19px; }
.record b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--or-sombre); white-space: nowrap; }

/* ── progrès ── */
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tuile { background: var(--pierre); border: 1px solid var(--filet); border-radius: 16px; padding: 12px 8px; text-align: center; box-shadow: var(--ombre); }
.tuile .n { font-family: var(--serif); font-size: 34px; line-height: 1.05; }
.tuile .n small { font-size: 16px; color: var(--encre-pale); }
.tuile .t { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 12px 0; border-bottom: 1px dotted var(--filet); }
.hist li:last-child { border-bottom: 0; }
.hist .q { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--or); font-weight: 600; }
.hist .r { font-size: 19px; color: var(--encre-douce); }
.vide { text-align: center; padding: 30px 16px; color: var(--encre-pale); font-family: var(--serif); font-size: 21px; }

/* ── lecture (science, nutrition) ── */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: rgba(244,236,218,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(74,48,12,.08); margin-bottom: 16px; position: sticky; top: calc(66px + env(safe-area-inset-top)); z-index: 5; }
.seg button { min-height: 46px; border: 0; border-radius: 12px; background: transparent; font-size: 16px; color: var(--encre-douce); }
.seg button[aria-selected="true"] { background: var(--pierre); color: var(--encre); font-weight: 600; box-shadow: 0 1px 4px rgba(74,48,12,.15); }
.lecture { background: rgba(255,253,248,.95); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px 20px; box-shadow: var(--ombre); }
.lecture h1 { font-size: clamp(32px, 7vw, 42px); margin-bottom: 14px; }
.lecture h2 { font-size: 26px; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--filet); }
.lecture p, .lecture li { font-size: 20px; line-height: 1.7; color: var(--encre); max-width: 34em; }
@media (min-width: 760px) { .lecture p, .lecture li { font-size: 21px; } }
.lecture ul { padding-left: 0; list-style: none; }
.lecture li { position: relative; padding: 4px 0 4px 26px; }
.lecture li::before { content: ''; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; background: url(img/boule-or.webp) center / contain no-repeat; }
.lecture b { font-weight: 600; color: var(--encre); }
.lecture .sources { font-size: 17px; color: var(--encre-douce); line-height: 1.6; padding: 10px 14px; background: var(--marbre); border-radius: 12px; border: 1px solid var(--filet); }
.lecture a { color: #5f440a; text-underline-offset: 3px; }
.lecture-photo { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 7; margin-bottom: 14px; box-shadow: var(--ombre); }
.lecture-photo img { width: 100%; height: 100%; object-fit: cover; }
.grille-m { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 600px) { .grille-m { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grille-m { grid-template-columns: repeat(4, 1fr); } }
.mvt { display: flex; flex-direction: column; text-align: left; background: var(--pierre); border: 1px solid var(--filet); border-radius: 16px; overflow: hidden; padding: 0; transition: transform .15s, border-color .2s; }
.mvt:hover { border-color: var(--or); }
.mvt:active { transform: scale(.97); }
.mvt svg { width: 100%; height: auto; aspect-ratio: 320 / 262; background: var(--pierre); padding: 6px; border-bottom: 1px solid var(--filet); }
.mvt span { padding: 8px 10px 10px; font-family: var(--serif); font-size: 18px; line-height: 1.15; }
.credit { font-size: 15px; color: var(--encre-douce); margin-top: 18px; text-align: center; }

/* ── barre du bas ── */
.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; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px; min-height: var(--barre-h); text-decoration: none; color: var(--encre-pale); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; }
.barre a svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.barre a.actif { color: var(--or-sombre); }
.barre a.actif svg { color: var(--or); }
.barre a.actif::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--lingot); }

.mode:not([hidden]) ~ .toast { bottom: auto; top: calc(84px + env(safe-area-inset-top)); }
.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: 60; max-width: calc(100% - 32px); }
.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: -220% 0; } }
.chargement .sq.hero { aspect-ratio: 4 / 5; max-width: 100%; } .chargement .sq.btn { height: 56px; }

::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 .24s ease-out both; }
@keyframes sortir { to { opacity: 0; transform: translateY(-6px); } }
@keyframes entrer { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  #ouverture { display: none; }
}

/* ═══ v2 : le programme qui s'adapte, Gabriel, la communauté, le suivi ═══ */
.texte-l { font-size: 19px; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.outils-seance { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.outils-seance .creux, #b-fatigue { font-size: 17px; min-height: 48px; padding: 10px 16px; }
#b-fatigue[aria-pressed="true"] { border-color: var(--or); background: var(--sable); }
.outils-seance .creux svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch-derniere { text-align: center; font-size: 19px; color: var(--encre-douce); margin: 10px auto 0; }
.ch-liens { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.seg.deux-s { grid-template-columns: 1fr 1fr; margin-bottom: 8px; position: static; }
.demo svg.gm-photo { background: #1d1712; }
.gm-fig-photo { padding: 0 !important; }
.alts { display: grid; gap: 8px; margin-top: 10px; }
.alt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--filet); background: var(--pierre); min-height: 76px; }
.alt:active { transform: scale(.99); }
.alt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
.alt small { display: block; font-size: 17px; color: var(--encre-pale); margin-top: 2px; }
.alt-vig { flex: none; width: 76px; height: 62px; border-radius: 10px; overflow: hidden; background: var(--marbre); border: 1px solid var(--filet); }
.alt-vig svg { width: 100%; height: 100%; display: block; }
.garder { display: flex; align-items: center; gap: 10px; font-size: 19px; color: var(--encre-douce); margin: 8px 0 4px; min-height: 44px; }
.garder input { width: 22px; height: 22px; accent-color: var(--or); }

/* Gabriel : la bulle (la boule d'or de la maison) et la conversation */
.coach-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.coach-tete .boule { width: 46px; height: 46px; }
.coach-tete h2 { font-size: 30px; }
.fil { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 6px 2px; overscroll-behavior: contain; }
.msg-c { max-width: 88%; }
.msg-c p { margin: 0; padding: 12px 15px; border-radius: 18px; font-size: 19px; line-height: 1.5; white-space: pre-line; }
.msg-c.lui { align-self: flex-start; }
.msg-c.lui p { background: var(--pierre); border: 1px solid var(--filet); border-bottom-left-radius: 6px; }
.msg-c.moi { align-self: flex-end; }
.msg-c.moi p { background: var(--sable); border: 1px solid rgba(184,144,45,.35); border-bottom-right-radius: 6px; }
.msg-c.action .lingot { min-height: 54px; font-size: 19px; }
.points i { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--or); animation: souffle 1.2s infinite ease-in-out; }
.points i:nth-child(2) { animation-delay: .2s; } .points i:nth-child(3) { animation-delay: .4s; }
.idees { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.idees .puce { font-size: 17px; min-height: 44px; }
.coach-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; align-items: end; }
.coach-form textarea { width: 100%; min-height: 56px; max-height: 140px; resize: vertical; padding: 13px 14px; font: inherit; font-size: 19px; border: 1px solid var(--filet); border-radius: 16px; background: var(--pierre); color: var(--encre); }
.coach-form .lingot { min-height: 56px; padding: 0 18px; font-size: 18px; }

/* Communauté */
.code-ami { font-family: var(--serif); font-size: 26px; letter-spacing: 3px; color: var(--or-sombre); }
.creux.petit { min-height: 44px; padding: 8px 14px; font-size: 17px; margin-left: 6px; vertical-align: middle; }
.ligne-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.ligne-form .lingot { min-height: 52px; padding: 0 18px; margin-bottom: 14px; }
.defi.reussi { border-color: var(--or); }
.defi h2 { font-size: 26px; margin-bottom: 4px; }
.classement { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.classement li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255,253,248,.95); border: 1px solid var(--filet); font-size: 19px; }
.classement li.moi { border-color: var(--or); background: var(--sable); }
.classement .rg { font-family: var(--serif); font-size: 24px; color: var(--or-sombre); text-align: center; }
.classement li span:last-child { font-size: 17px; color: var(--encre-pale); }

/* Suivi : graphiques maison, une seule teinte */
.tuiles.quatre { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tuiles.quatre { grid-template-columns: repeat(4, 1fr); } }
.tuile > small { display: block; font-size: 15px; color: var(--encre-pale); margin-top: 2px; }
.tuile > small.monte { color: var(--or-sombre); }
.pastilles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; }
.pastilles button { flex: none; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--filet); background: var(--pierre); font-size: 17px; color: var(--encre-douce); }
.pastilles button[aria-selected="true"] { border-color: var(--or); background: var(--sable); color: var(--encre); font-weight: 600; }
.svg-graphe { width: 100%; height: auto; display: block; overflow: visible; }
.svg-graphe .gr { stroke: var(--filet); stroke-width: 1; }
.svg-graphe .ax { font-family: var(--sans); font-size: 17px; fill: var(--encre-pale); }
.svg-graphe .ligne { fill: none; stroke: var(--or); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.svg-graphe .pt { fill: var(--pierre); stroke: var(--or-sombre); stroke-width: 2.5; }
.svg-graphe .cible { fill: transparent; }
.svg-graphe g:hover .pt { fill: var(--or); }
.barres { display: grid; gap: 10px; }
.barre-m { display: grid; grid-template-columns: minmax(110px, 34%) 1fr 40px; gap: 10px; align-items: center; font-size: 18px; }
.barre-m .nm { color: var(--encre-douce); }
.barre-m b { text-align: right; font-weight: 600; }
.piste { position: relative; height: 14px; border-radius: 7px; background: var(--sable); overflow: hidden; }
.piste .zone { position: absolute; top: 0; bottom: 0; left: var(--z1); width: calc(var(--z2) - var(--z1)); border-left: 2px solid var(--or-clair); border-right: 2px solid var(--or-clair); background: rgba(212,175,55,.14); }
.piste .val { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 0 4px 4px 0; background: var(--lingot); }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ph-v { position: relative; padding: 0; border: 1px solid var(--filet); border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--sable); }
.ph-v img { width: 100%; height: 100%; object-fit: cover; }
.ph-v span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 15px; background: rgba(255,253,248,.88); }
.ph-grande { width: 100%; border-radius: 16px; margin: 10px 0; }
.ajout-ph { cursor: pointer; }

/* ═══════════ REFONTE 18/10 — au niveau de l'étalon Giri Cuisine ═══════════ */
/* lisibilité : les étiquettes dorées passent à l'or sombre (contraste ≥ 4,5 sur le marbre), le texte courant reste en Lato 19 px */
.sur-titre, .k, .bloc > h2.k, .tuile .t, .ch-ou, .hist .q, .feuille .tag, .fb .n, .niveau .meta, .molette .l, .legende { color: var(--or-sombre); }
.sur-titre, .bloc > h2.k, .k { font-size: 14px; }
.vide { font-family: var(--sans); font-size: 19px; }
.discret { color: var(--encre-pale) !important; }
html { scroll-padding-top: 96px; }
h1, h2, .section, #suivi, #sv-courbe, #sv-photos { scroll-margin-top: 96px; }
.entete { background: rgba(253,250,242,.9); }
.entete.voilee { background: rgba(253,250,242,.97); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.entete-gabriel { width: auto; padding: 0 14px 0 4px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; font-family: var(--serif); font-size: 19px; color: var(--encre); }
.entete-gabriel .boule { width: 34px; height: 34px; }
@media (max-width: 359px) { .entete-gabriel .gab-t { display: none; } .entete-gabriel { padding: 0 4px; } }

/* l'accueil de la personne inscrite : héros photo, puis LA carte de la séance du jour */
.hero-jour { aspect-ratio: 16 / 11; }
.hero-jour .voile { background: linear-gradient(180deg, rgba(253,250,242,.95) 0%, rgba(253,250,242,.82) 28%, rgba(253,250,242,.25) 52%, rgba(253,250,242,0) 70%); }
.hero-jour .texte { top: 20px; }
.hero-jour h1 em { font-style: normal; color: var(--or-sombre); }
.carte-jour { position: relative; z-index: 2; margin-top: -44px; background: var(--pierre); border: 1px solid var(--filet); border-radius: 22px; overflow: hidden; box-shadow: 0 4px 10px rgba(74,48,12,.10), 0 18px 40px rgba(74,48,12,.14); }
.cj-visuel { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(180deg, #fffdf8, #f6eedc); border-bottom: 1px solid var(--filet); }
.cj-visuel > svg { position: absolute; left: 0; right: 0; top: 12px; width: 100%; height: calc(100% - 84px); }
.cj-visuel > svg.gm-fig-photo { inset: 0; height: 100%; }
.cj-premier { position: absolute; z-index: 1; left: 18px; right: 120px; bottom: 10px; font-size: 17px; color: var(--encre-pale); line-height: 1.2; }
.cj-premier b { display: block; font-family: var(--serif); font-weight: 400; font-size: 23px; color: var(--encre); }
.cj-visuel .anneau { position: absolute; z-index: 1; right: 16px; bottom: -40px; width: 96px; height: 96px; box-shadow: 0 6px 18px rgba(74,48,12,.25); }
.cj-visuel .anneau::before { background: var(--pierre); }
.cj-corps { padding: 20px 18px 16px; }
.cj-corps h2 { font-size: 32px; margin: 6px 0 8px; }
.cj-corps > .k { padding-right: 110px; }
.puces { display: flex; flex-wrap: nowrap; list-style: none; padding: 0; margin: 0 0 16px; font-size: 18px; color: var(--encre-douce); white-space: nowrap; overflow: hidden; }
.puces li + li::before { content: '·'; margin: 0 8px; color: var(--or); }
.cj-corps .lingot.large { width: 100%; min-height: 64px; font-size: 24px; }
.cj-liens { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.lien-discret { color: var(--encre-pale); font-size: 19px; text-decoration: underline; text-decoration-color: var(--filet); text-underline-offset: 5px; padding: 10px 2px; }
.bascule { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--filet); background: var(--pierre); font-size: 17px; color: var(--encre-douce); }
.bascule i { position: relative; flex: none; width: 42px; height: 26px; border-radius: 13px; background: var(--sable); border: 1px solid var(--filet); transition: background .2s; }
.bascule i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(74,48,12,.35); transition: transform .2s; }
.bascule[aria-pressed="true"] { border-color: var(--or); color: var(--encre); }
.bascule[aria-pressed="true"] i { background: var(--lingot); }
.bascule[aria-pressed="true"] i::after { transform: translateX(16px); }
.accueil-cote .section:first-child { margin-top: 28px; }

/* la liste des exercices : grandes vignettes, une ligne de méta, l'information secondaire en ton discret */
.exo { gap: 14px; min-height: 108px; }
.exo .vig { width: 116px; height: 92px; }
.exo h3 { font-size: 22px; }
.exo .meta { font-size: 19px; color: var(--encre-douce); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exo .meta b { font-weight: 600; color: var(--encre); }
.exo .charge { font-size: 17px; margin-top: 2px; }
.exo .charge.discret { font-weight: 400; }
.exo .t { min-width: 0; }
.exos { grid-template-columns: minmax(0, 1fr); }
.exo { min-width: 0; }
.outils-seance .bascule { font-size: 17px; }

/* le chrono, mode athlète : le mouvement en grand, charge × répétitions en très gros, réglables au pouce */
.mode .corps.athlete { padding-top: 14px; }
.athlete .ch-demo { max-width: min(100%, 40vh) !important; margin: 6px auto 0; }
.athlete .ch-exo { font-size: 32px; text-align: center; margin: 4px 0 8px; }
.pts-series { display: flex; justify-content: center; gap: 10px; margin: 10px auto 4px; }
.pts-series i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--filet); }
.pts-series i.cours { border-color: var(--or-sombre); }
.pts-series i.fait { border: 0; background: url(img/boule-or.webp) center / contain no-repeat; }
.gc-ligne { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 12px; }
.gc { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "v v" "m p"; gap: 6px; justify-items: stretch; }
.gc .gc-v { grid-area: v; text-align: center; }
.gc button[data-d="-1"] { grid-area: m; } .gc button[data-d="1"] { grid-area: p; }
.gc-v b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 19vw, 96px); line-height: .95; font-variant-numeric: lining-nums tabular-nums; color: var(--encre); }
.gc-v small { display: block; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--encre-pale); font-weight: 600; margin-top: 2px; }
.gc button { min-width: 62px; height: 58px; border-radius: 16px; border: 1px solid var(--filet); background: rgba(255,253,248,.96); font-size: 32px; line-height: 1; color: var(--or-sombre); }
.gc button:active { transform: scale(.95); background: var(--sable); }
.fois { font-family: var(--serif); font-size: 46px; color: var(--or); padding: 0 4px 74px; }
.ch-sous { text-align: center; font-size: 19px; color: var(--encre-douce); margin: 12px 0 0; font-variant-numeric: lining-nums tabular-nums; }
.anneau.geant { width: min(76vw, 320px); height: min(76vw, 320px); margin: 10px auto 0; }
.mode .corps > .anneau.geant { width: min(76vw, 320px); }
.anneau.geant::before { inset: 14px; }
.anneau.geant b { font-size: clamp(88px, 26vw, 128px); font-variant-numeric: lining-nums tabular-nums; }
.anneau.geant small { font-size: 16px; }
.ch-plus { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.ch-plus .creux { min-width: 124px; min-height: 56px; font-size: 21px; }
.ch-suivant { text-align: center; font-family: var(--serif); font-size: 25px; color: var(--encre); margin: 16px 0 4px; }
.corriger { margin-top: 6px; }
.corriger summary { list-style: none; cursor: pointer; text-align: center; font-size: 17px; color: var(--encre-pale); text-decoration: underline; text-underline-offset: 4px; padding: 10px; }
.corriger summary::-webkit-details-marker { display: none; }
.record-direct { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rd-bandeau { position: absolute; left: 50%; top: calc(86px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 18px; border: 1px solid var(--or); background: rgba(255,253,248,.98); box-shadow: var(--ombre); font-size: 19px; animation: apparait .3s ease-out; }
.rd-bandeau .boule { width: 42px; height: 42px; }

/* progrès */
.vide-elegant { text-align: center; }
.vide-elegant p { font-size: 19px; color: var(--encre-douce); margin: 6px 0 0; }
.vide-elegant .boule.grande { width: 52px; height: 52px; margin-bottom: 8px; }

/* écran large : une barre latérale, un contenu qui respire, deux colonnes */
@media (min-width: 1024px) {
  body { padding-bottom: 0; padding-left: 116px; }
  .barre { top: 0; bottom: 0; right: auto; width: 116px; flex-direction: column; justify-content: center; gap: 4px; border-top: 0; border-right: 1px solid var(--filet); padding: 0; }
  .barre a { flex: none; min-height: 86px; font-size: 15px; }
  .barre a.actif::before { top: 20%; bottom: 20%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .toast { bottom: 28px; }
  .vue { max-width: 1160px; padding: 32px 48px 56px; }
  .hero-jour { aspect-ratio: 21 / 8; }
  .hero-jour .texte { text-align: left; left: 40px; top: 40px; right: 45%; }
  .hero-jour .voile { background: linear-gradient(90deg, rgba(253,250,242,.95) 0%, rgba(253,250,242,.8) 34%, rgba(253,250,242,0) 60%); }
  .accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .carte-jour { margin-top: -72px; margin-left: 24px; }
  .accueil-cote { padding-top: 20px; }
  .exos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .progres-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .mode .corps.athlete > * { max-width: 640px; }
}
.cj-visuel:has(.gm-fig-photo)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(255,253,248,0), rgba(255,253,248,.94) 70%); pointer-events: none; }

/* [TOUCHER 21/10, Brice] plus de carré qui s'allume au toucher : chaque bouton répond par sa propre forme */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }