/* Typical — pages secondaires au design « magazine » (papier, encre, bleu encre). Chargé après mag.css. */
:root{--soleil:var(--accent);--cuivre:var(--stone);--ambre:var(--field-h);--hair:rgba(16,18,20,.16)}
body.page{padding-top:64px}
body.page .bar{border-bottom:1px solid var(--hair)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:50}
.skip:focus{left:8px}

/* boutons : encre sur papier */
body.page .btn{color:var(--ink);border-color:var(--ink);margin-top:0}
body.page .btn::before{background:var(--ink)}
body.page .btn:hover,body.page .btn:focus-visible{color:var(--paper)}

/* en-tête de page */
.page-hero{max-width:1520px;margin:0 auto;padding:clamp(56px,9vw,140px) var(--m) clamp(34px,5vw,80px)}
.page-hero .kicker,.kicker{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:22px}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,8.6vw,138px);line-height:.94;letter-spacing:-.03em;max-width:13ch}
.page-hero p{margin-top:28px;max-width:640px;font-size:clamp(18px,1.6vw,23px);color:var(--soft)}
.on-lin{max-width:1520px;margin:0 auto;padding:0 var(--m) clamp(70px,9vw,140px)}

/* blocs documentaires : titre à gauche, texte à droite, filet d'encre */
.doc{display:grid;grid-template-columns:4fr 8fr;gap:clamp(20px,5vw,90px);border-top:1px solid var(--ink);padding:clamp(28px,4vw,60px) 0}
.doc h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.3vw,50px);line-height:1.02;letter-spacing:-.02em}
body.page .doc .txt{position:static;display:grid;gap:1.05em;max-width:740px;color:var(--ink);text-align:left;align-items:start;padding:0}
.txt ul,.txt ol{padding-left:1.25em}.txt li{margin:.35em 0}
.txt strong{font-weight:600}
.txt a{text-underline-offset:3px}
.txt a:hover{color:var(--accent)}
.doc h3{font-family:var(--serif);font-weight:500;font-size:24px;margin-top:.4em}
.encart{border-left:3px solid var(--accent);background:var(--stone);padding:20px 24px}
.encart > :first-child{margin-top:0}
.tabl{width:100%;border-collapse:collapse;font-size:16px}
.tabl th{text-align:left;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:600;padding:0 14px 12px 0;border-bottom:2px solid var(--ink)}
.tabl td{padding:14px 14px 14px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tabl-wrap{overflow-x:auto}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.paire img,.ba img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--stone)}
.paire figcaption,.ba figcaption{font-size:14px;margin-top:8px;color:var(--soft)}

/* formulaires */
.formu{display:grid;gap:16px;max-width:560px}
.formu label{display:grid;gap:6px;font-weight:600;font-size:15px}
.formu input,.formu textarea,.formu select{font:inherit;font-weight:400;padding:13px 14px;background:#fff;border:1px solid var(--ink);border-radius:0;color:var(--ink)}
.formu textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0}
.msg{font-size:15px;min-height:1.4em}.msg.ok{color:#1d5c3a}.msg.err,.err{color:#8a2020}
.row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.link{background:none;border:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit}
dialog{border:0;padding:clamp(24px,4vw,44px);background:var(--paper);color:var(--ink);max-width:min(520px,92vw);box-shadow:0 30px 90px rgba(16,18,20,.35)}
dialog[open]{position:fixed;inset:0;margin:auto}
dialog::backdrop{background:rgba(15,18,24,.6)}
dialog h3{font-family:var(--serif);font-weight:500;font-size:30px;margin-bottom:10px}

/* routine : trois gestes, une barre qui se remplit */
.routine-box{display:grid;gap:18px;max-width:640px}
.prog{height:6px;background:var(--stone)}
.prog i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--n,0));transition:transform .6s var(--ease)}
.taches{list-style:none;padding:0}
.tache{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--hair);cursor:pointer}
.tache input{position:absolute;opacity:0}
.tache i{flex:none;width:26px;height:26px;border:2px solid var(--ink);position:relative;margin-top:2px}
.tache input:checked + i{background:var(--accent);border-color:var(--accent)}
.tache input:checked + i::after,.chk input:checked + i::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tache input:focus-visible + i,.chk input:focus-visible + i{outline:2px solid var(--accent);outline-offset:3px}
.tache div{display:grid;gap:2px}.tache span{color:var(--soft);font-size:16px}
.tache input:checked ~ div b{text-decoration:line-through;text-decoration-color:var(--soft)}
.bilan{font-weight:600;color:var(--accent)}

/* page d'analyse (dépôt des photos, progression, résultat) */
body.app main.panel{max-width:780px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--m) clamp(70px,9vw,130px);outline:0}
.panel .title{font-family:var(--serif);font-weight:500;font-size:clamp(42px,7.2vw,92px);line-height:.96;letter-spacing:-.03em}
.panel .prix{margin-top:16px;color:var(--accent);font-weight:600;font-size:17px}
.panel .lead{margin-top:18px;color:var(--soft);max-width:560px}
.seg{display:flex;border:2px solid var(--ink);margin:30px 0 10px}
.seg button{flex:1;padding:14px;background:transparent;border:0;font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}
.seg button + button{border-left:2px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.drops{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;aspect-ratio:4/5;background:var(--stone);border:2px dashed rgba(16,18,20,.45);cursor:pointer;overflow:hidden;padding:16px;color:var(--soft);transition:border-color .3s,background .3s}
.drop:hover,.drop.over{background:var(--field-h);border-color:var(--accent)}
.drop:focus-within{border-style:solid;border-color:var(--accent)}
.drop.has{border-style:solid;border-color:var(--ink)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop svg{width:50%;margin:auto;color:var(--ink);opacity:.55}
.drop .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{position:relative;z-index:1;text-align:center;display:grid;gap:2px;font-size:14px}
.cap b{color:var(--ink);font-size:17px;font-family:var(--serif);font-weight:500}
.drop.has .cap{background:rgba(245,244,241,.94);width:calc(100% + 32px);margin:0 -16px -16px;padding:10px}
.warn{position:absolute;top:8px;left:8px;right:8px;z-index:2;background:#fff;color:#8a2020;font-size:13px;padding:6px 10px;border-left:3px solid #8a2020}
.chk{display:flex;gap:14px;align-items:flex-start;margin:20px 0;font-size:15.5px;cursor:pointer;color:var(--soft)}
.chk input{position:absolute;opacity:0}
.chk i{flex:none;width:26px;height:26px;border:2px solid var(--ink);position:relative}
.chk input:checked + i{background:var(--ink)}
.panel .cta{display:block;width:100%;min-height:58px;font:inherit;font-weight:600;font-size:17px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:16px;text-align:center;text-decoration:none;cursor:pointer;margin-top:14px;transition:background .3s,color .3s}
.panel .cta:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.panel .cta:disabled{opacity:.3;cursor:not-allowed}
.panel .cta.ghost{background:transparent;color:var(--ink)}
.missing{color:var(--soft);font-size:14px;margin-top:10px}
.fine{font-size:14px;color:var(--soft);margin-top:14px}
.pbar{height:6px;background:var(--stone);margin:28px 0}
.pbar i{display:block;height:100%;width:4%;background:var(--accent);transition:width .8s var(--ease)}
.psteps{list-style:none;display:grid}
.psteps li{padding:13px 0;border-top:1px solid var(--hair);color:var(--soft)}
.psteps li.ok{color:var(--ink)}.psteps li.ok::before{content:"✓  "}
.psteps li.now{color:var(--ink);font-weight:600}.psteps li.now::before{content:"→  "}
body.app .score{font-family:var(--serif);display:flex;align-items:baseline;gap:.12em;margin-top:24px;font-size:inherit;line-height:1}
body.app .score b{font-weight:400;font-size:clamp(120px,26vw,230px);line-height:.85;letter-spacing:-.04em}
body.app .score span{color:var(--soft);font-size:clamp(26px,4vw,42px)}
.reads{display:grid;gap:14px;margin:28px 0 36px}
.read{display:grid;grid-template-columns:150px 1fr 44px;gap:14px;align-items:center;font-size:15px}
.read .t{height:6px;background:var(--stone);position:relative}.read .t i{display:block;height:100%;background:var(--accent);transition:width 1.2s var(--ease)}
.label{display:block;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:38px 0 12px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proj{margin-top:24px;background:var(--stone);padding:18px 22px;font-size:16px;border-left:3px solid var(--accent)}
.verrou{position:relative;margin-top:22px;min-height:260px}
.flou{filter:blur(7px);opacity:.5;pointer-events:none;user-select:none}
.porte{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background:var(--paper);border:2px solid var(--ink);padding:26px;display:grid;gap:12px;margin:0 8px}
.porte b{font-family:var(--serif);font-weight:500;font-size:26px}
.supprimer{margin-top:44px;padding:22px;border:1px solid var(--hair);display:grid;gap:12px}
body.app .plan li{font-size:18px}

/* pages légales */
body.legal main.lg{max-width:780px;margin:0 auto;padding:clamp(56px,8vw,110px) var(--m) clamp(60px,8vw,110px)}
main.lg h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.5vw,84px);line-height:.98;letter-spacing:-.03em;margin-bottom:.5em}
main.lg h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,34px);margin:1.6em 0 .5em;border-top:1px solid var(--ink);padding-top:.7em}
main.lg p,main.lg li{margin:.55em 0}main.lg ul{padding-left:1.25em}
main.lg .draft,.draft{background:var(--stone);border-left:3px solid var(--accent);padding:16px 20px;font-size:16px;margin:1.2em 0}
main.lg a.back{display:inline-block;margin-bottom:30px;font-size:15px;font-weight:600;color:var(--accent)}

/* page 404 */
.nf{max-width:900px;margin:0 auto;padding:clamp(80px,14vw,200px) var(--m)}
.nf h1{font-family:var(--serif);font-weight:500;font-size:clamp(60px,12vw,180px);line-height:.9;letter-spacing:-.04em}

@media (max-width:760px){
  body.page{padding-top:58px}
  .doc{grid-template-columns:1fr;gap:16px}
  .read{grid-template-columns:110px 1fr 38px}
  .porte{padding:18px}
  .bar .l{gap:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}