@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --bg:#eceeef; --surface:#ffffff; --soft:#f4f5f6; --ink:#12161a; --muted:#59636a; --line:#d3d9dc;
  --accent:#d4381b; --accent-ink:#ffffff; --danger:#b3261e; --ok:#2b7a3a;
  --push:#2a63c8; --pull:#12827f; --legs:#2f8a3e;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1214; --surface:#171b1e; --soft:#1d2226; --ink:#eceff1; --muted:#8f9aa1; --line:#2a3136;
    --accent:#ff6b3d; --accent-ink:#14100e; --danger:#ff8a80; --ok:#6ccf7b;
    --push:#6b9bff; --pull:#3cc4bf; --legs:#6ccf7b;
    --band:#1d2226; --band-muted:#9aa5ac;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0f1214; --surface:#171b1e; --soft:#1d2226; --ink:#eceff1; --muted:#8f9aa1; --line:#2a3136;
    --accent:#ff6b3d; --accent-ink:#14100e; --danger:#ff8a80; --ok:#6ccf7b;
    --push:#6b9bff; --pull:#3cc4bf; --legs:#6ccf7b;
    --band:#1d2226; --band-muted:#9aa5ac;
    color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:4px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{outline:0}

/* en-tête */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{max-width:68rem;margin-inline:auto;padding:10px 16px;display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;line-height:1;display:flex;align-items:center;gap:10px}
.brand span:last-child{text-transform:none;letter-spacing:0;font-size:1.45rem}
.brand-mark{width:30px;height:30px;border-radius:4px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:1rem}
nav.main{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav.main a,nav.main button{background:none;border:0;padding:8px 11px;border-radius:4px;text-decoration:none;font-weight:500;font-size:.95rem;cursor:pointer;color:var(--muted)}
nav.main a:hover,nav.main button:hover{color:var(--ink);background:var(--soft)}
nav.main a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
nav.main .cta{background:var(--accent);color:var(--accent-ink);margin-left:6px}
nav.main .cta:hover{background:var(--accent);color:var(--accent-ink);filter:brightness(.95)}

/* mise en page */
.page{max-width:68rem;margin-inline:auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:32px;min-height:60vh}
.narrow{max-width:34rem;margin-inline:auto;width:100%}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;font-size:clamp(2.6rem,8vw,4.6rem);text-wrap:balance;letter-spacing:.005em}
h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;font-size:clamp(1.7rem,4.5vw,2.2rem);text-wrap:balance}
h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.25rem;line-height:1.1}
.lead{font-size:1.15rem;color:var(--muted);max-width:44rem}
.muted{color:var(--muted)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:4px;padding:11px 20px;font-weight:600;letter-spacing:.01em;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{filter:brightness(.94)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--muted);filter:none}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.small{padding:6px 12px;font-size:.88rem}
.btn[disabled]{opacity:.55;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* accueil */
.hero{display:flex;flex-direction:column;gap:20px;padding-block:12px 4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));border:1px solid var(--line);background:var(--surface);border-radius:6px}
.stat{padding:18px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.stat:first-child{border-left:0}
.stat b{font-family:var(--display);font-size:2.4rem;line-height:1;font-weight:700}
.stat span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:560px){.stat{border-left:0;border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:0}.stat:nth-child(even){border-left:1px solid var(--line)}}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:16px;counter-reset:step}
.steps li{counter-increment:step;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:6px}
.steps li::before{content:counter(step);font-family:var(--mono);font-size:.85rem;color:var(--accent)}
.steps p{color:var(--muted);font-size:.95rem}

/* publications */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:transparent;border-radius:99px;padding:6px 14px;cursor:pointer;font-size:.9rem}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:18px;align-items:start}
.post{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--soft)}
.post-in{padding:16px;display:flex;flex-direction:column;gap:10px}
.post-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:2px 7px;color:var(--muted)}
.badge.kind{color:var(--accent);border-color:var(--accent)}
.badge.partner{color:var(--ink);background:var(--soft)}
.post time{font-size:.82rem;color:var(--muted)}
.post h3{font-size:1.45rem;text-wrap:balance}
.post-body{display:flex;flex-direction:column;gap:8px;color:var(--muted);overflow-wrap:anywhere}
.post-body.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.link-btn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;cursor:pointer;text-align:left;align-self:flex-start}
.promo{display:flex;align-items:center;gap:10px;border:1px dashed var(--muted);border-radius:4px;padding:8px 10px;justify-content:space-between;flex-wrap:wrap}
.promo code{font-family:var(--mono);font-size:1rem;letter-spacing:.06em}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:6px;padding:28px 18px;color:var(--muted)}

/* formulaires */
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
label,.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-height:44px}
textarea{min-height:8rem;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{margin-top:4px;width:18px;height:18px;flex:none}
.msg{padding:10px 12px;border-radius:4px;border:1px solid var(--line);background:var(--soft);font-size:.94rem}
.msg.err{border-color:var(--danger);color:var(--danger)}
.msg.ok{border-color:var(--ok);color:var(--ok)}
.tabs{display:flex;border-bottom:1px solid var(--line);gap:4px}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:500}
.tabs a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* programme */
.summary{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px;display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.summary dl{display:flex;gap:6px 28px;flex-wrap:wrap;margin:0}
.summary dl div{display:flex;flex-direction:column}
.summary dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.summary dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.week div{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 6px;text-align:center;display:flex;flex-direction:column;gap:2px;font-size:.85rem}
.week b{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.week .rest{color:var(--muted)}
.week .go{cursor:pointer}
.week .go:hover,.week .go:focus-visible{border-color:var(--accent,#ff6a3d);outline:none}
.day{scroll-margin-top:80px}
@media (max-width:560px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}}
.jump{display:flex;gap:8px;flex-wrap:wrap}
details.principles{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 18px}
details.principles summary{cursor:pointer;font-weight:600}
details.principles dl{margin:14px 0 0;display:grid;grid-template-columns:minmax(7rem,9rem) 1fr;gap:10px 16px}
details.principles dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
details.principles dd{margin:0}
@media (max-width:560px){details.principles dl{grid-template-columns:1fr;gap:2px}details.principles dd{margin-bottom:10px}}
.day{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;scroll-margin-top:90px}
.day-head{padding:16px 18px;display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;align-items:flex-end;border-top:4px solid var(--tone)}
.day-head h2{font-size:2rem}
.day-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tone)}
.day-meta{font-size:.9rem;color:var(--muted)}
.lifts{display:flex;flex-direction:column;counter-reset:l}
.lifts li,.lifts-head{display:grid;grid-template-columns:2rem minmax(0,1fr) 7rem 11rem 5.5rem;gap:6px 12px;align-items:baseline;padding:11px 18px;border-top:1px solid var(--line)}
.lifts li{counter-increment:l}
.lifts li::before{content:counter(l);font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.lifts-head{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-block:8px;background:var(--soft)}
.ex-name{font-weight:600;overflow-wrap:anywhere}
.ex-muscles{display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
.scheme,.load,.rest-t{font-family:var(--mono);font-size:.92rem;font-variant-numeric:tabular-nums}
.load small{display:block;font-size:.72rem;color:var(--muted);font-family:var(--body)}
.rest-t{color:var(--muted);text-align:right}
.cardio{background:var(--soft)}
.day-foot{padding:10px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between}
@media (max-width:760px){
  .lifts-head{display:none}
  .lifts li{grid-template-columns:1.6rem minmax(0,1fr);padding:12px 14px}
  .scheme,.load,.rest-t{grid-column:2;text-align:left}
  .load small{display:inline;margin-left:6px}
  .day-head,.day-foot{padding-inline:14px}
}
.notice{font-size:.9rem;color:var(--muted);border-left:3px solid var(--line);padding-left:12px}

/* suivi */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi b{font-family:var(--display);font-size:1.9rem;line-height:1.05;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;background:var(--soft);white-space:nowrap;font-weight:500}
td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td input{min-height:38px;padding:6px 8px;min-width:5rem}
td input.wide{min-width:11rem}
.add-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:12px;align-items:end}
.add-grid .span2{grid-column:span 2}
@media (max-width:560px){.add-grid .span2{grid-column:auto}}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-family:var(--mono);font-size:11px}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--accent)}
.chart .lbl{fill:var(--ink);font-family:var(--mono);font-size:11px}
.targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:12px}

/* pied de page */
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{max-width:68rem;margin-inline:auto;padding:20px 16px;display:flex;gap:10px 24px;flex-wrap:wrap;justify-content:space-between;font-size:.88rem;color:var(--muted)}
.foot a{color:var(--muted)}
.legal h2{margin-top:10px}
.legal{display:flex;flex-direction:column;gap:12px;max-width:44rem}

@media print{
  .top,.foot,.noprint,.jump,.btn,nav{display:none!important}
  body{background:#fff;color:#000}
  .page{padding:0;max-width:none}
  .day,.summary,details.principles{break-inside:avoid;border-color:#bbb;background:#fff}
  details.principles{display:block}
  :root{--surface:#fff;--soft:#f3f3f3;--ink:#000;--muted:#444;--line:#ccc}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* minuteur, installation */
.timer-card{display:flex;flex-direction:column;gap:12px}
.timer-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.timer-top h2{margin:0}
.timer-top select{max-width:100%}
.timer-time{font-family:var(--display);font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted)}
.timer-time.run{color:var(--accent)}
.timer-time.done{color:var(--ok);font-size:1.6rem}
.linklike{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--ink)}
.install-help{flex-basis:100%;margin:4px 0 0;font-size:.85rem;color:var(--muted)}

.rest-pick{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.rest-pick select{width:auto;min-width:130px}
.guide{display:flex;flex-direction:column;gap:8px}
.guide-row{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px 12px;color:var(--ink);cursor:pointer;font:inherit}
.guide-row:hover,.guide-row:focus-visible{border-color:var(--accent,#ff6a3d);outline:none}
.guide-row.done{opacity:.6}
.guide-row .g-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.guide-row .g-count{font-family:var(--mono);font-size:.75rem;color:var(--muted);white-space:nowrap}
.guide-row .g-meta{font-size:.82rem;color:var(--muted)}
.chart .band{fill:var(--accent,#ff6a3d);opacity:.12}

.danger-zone{border-color:#b5483a}

.ex-alt{display:block;font-size:.78rem;color:#b5483a;margin-top:2px}
.settings summary{cursor:pointer;font-weight:600}
.settings h3{margin-top:10px}

/* Accueil : bandes de couleur pleine largeur pour rythmer la page */
:root{--band:#12161a;--band-ink:#eceff1;--band-muted:#aab4ba}
html,body{overflow-x:clip}
.band{position:relative;background:var(--band);color:var(--band-ink);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.stats.band{border:0;border-radius:0;margin-block:8px}
.stats.band .stat{border-color:rgba(255,255,255,.14);background:transparent}
.stats.band .stat b{color:var(--accent)}
.stats.band .stat span{color:var(--band-muted)}
.steps-wrap.band{padding-block:36px;margin-block:12px}
.steps-wrap.band h2,.steps-wrap.band h3{color:var(--band-ink)}
.steps-wrap.band .steps li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.steps-wrap.band .steps p{color:var(--band-muted)}

/* Accueil, ton plus humain : titres en minuscules, texte à la première personne, pas de cartes identiques */
.hero-text{display:flex;flex-direction:column;gap:20px}
.home-hero{display:grid;gap:28px;align-items:center;padding-block:20px 8px}
.home-hero h1{text-transform:none;font-size:clamp(2.3rem,6.2vw,3.7rem);line-height:1.02;letter-spacing:0;max-width:16ch}
.home-hero .lead{max-width:34rem;font-size:1.12rem;line-height:1.6}
.hero-photo{width:100%;height:auto;aspect-ratio:1/1;max-height:420px;object-fit:cover;object-position:50% 22%;border-radius:6px;display:block}
@media (min-width:820px){.home-hero{grid-template-columns:1.15fr .85fr;gap:48px}.hero-photo{max-height:none;aspect-ratio:1/1.02}}
.choose{display:flex;flex-direction:column;gap:6px}
.choose h2,.how h2{text-transform:none;font-size:clamp(1.8rem,4.5vw,2.4rem)}
.choose-row{display:grid;gap:12px 40px;padding-block:22px;border-top:1px solid var(--line)}
.choose-row:last-child{border-bottom:1px solid var(--line)}
.choose-row h3{text-transform:none;font-size:1.6rem;margin-bottom:4px}
.opts{display:flex;flex-direction:column;gap:14px}
.opts li{display:flex;flex-direction:column;gap:2px;max-width:40rem}
.opts b{font-weight:600}
.opts span{color:var(--muted)}
@media (min-width:760px){.choose-row{grid-template-columns:14rem 1fr}}
.how.band{padding-block:40px;margin-block:20px}
.how h2{color:var(--band-ink);margin-bottom:16px}
.how-list{display:flex;flex-direction:column;gap:14px;max-width:40rem;font-size:1.08rem;line-height:1.6}
.how-list b{color:#fff}
.how-list p{color:var(--band-muted)}

#dl-toast{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:34rem;margin-inline:auto;background:var(--ink);color:var(--bg);padding:12px 40px 12px 14px;border-radius:6px;font-size:.92rem;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.3)}
#dl-toast a{color:inherit;font-weight:600;text-decoration:underline}
#dl-toast button{position:absolute;top:6px;right:8px;background:none;border:0;color:inherit;font-size:1.4rem;line-height:1;cursor:pointer;padding:4px 8px}
.ex-fiche{font-size:.75rem;margin-left:6px;font-weight:400}
.ex-list{display:grid;gap:8px}
.ex-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px}
.ex-card summary{cursor:pointer;display:flex;flex-direction:column;gap:2px}
.ex-body{margin-top:10px}
.ex-body p{margin:0 0 8px}
.food-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.food-list li span{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.food-form{display:grid;gap:12px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:10px;margin-top:10px}
.install-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px}
.install-banner span{flex:1 1 14rem}
.article{max-width:46rem}
.article h2{margin-top:1.8em}
.article .formula{background:var(--surface);border-left:4px solid var(--accent);padding:10px 14px;font-family:Georgia,serif}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:12px}
.photo{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.photo figcaption{display:flex;flex-direction:column;gap:6px;padding:8px;font-size:.85rem}