/* Exemple de diagnostic SOLIS — version « dossier » (v3) */
:root{
  --desk:#efe6da;      /* fond : bureau sable */
  --paper:#fffcf7;     /* feuille du dossier */
  --ink:#142326;
  --muted:#5a6668;
  --line:#e7ddd0;
  --coral:#ff6860;
  --coral-ink:#c9433b;
  --vert:#2f7d55; --vert-bg:#e4f1e9;
  --orange:#b9770e; --orange-bg:#fbefd8;
  --rouge:#c43d36; --rouge-bg:#fbe3e0;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif;
  --sans:"Segoe UI",Aptos,"Helvetica Neue",Arial,sans-serif;
  --hand:"Segoe Print","Bradley Hand","Comic Neue",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.dossier-page{margin:0;background:var(--desk);color:var(--ink);font:400 17px/1.6 var(--sans)}
a:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}

.top{display:flex;justify-content:space-between;align-items:center;max-width:1040px;margin:0 auto;padding:22px 24px}
.top img{display:block;width:112px;height:auto}
.top .back{color:var(--ink);font-size:15px;text-decoration:none;border-bottom:1px solid var(--coral)}

main{max-width:1040px;margin:0 auto;padding:0 24px}
.intro{max-width:640px;padding:20px 0 0}
.fictif{display:inline-block;margin:0 0 18px;padding:5px 12px;border-radius:12px;background:#fff;border:1px dashed var(--coral-ink);color:var(--coral-ink);font-size:13.5px}
.intro h1{margin:0 0 14px;font:400 clamp(36px,5.6vw,58px)/1.04 var(--serif);letter-spacing:-.02em}
.lead{margin:0;color:var(--muted);font-size:18px;max-width:560px}

/* Le bureau : Kenai posé sur le haut de la feuille */
.desk{position:relative;margin-top:clamp(120px,16vw,190px)}
.kenai-peek{position:absolute;z-index:2;right:7%;width:clamp(170px,23vw,250px);height:auto;
  /* la coupure du corps (84 % de l’image) tombe pile sur le bord de la feuille */
  top:calc(clamp(170px,23vw,250px) * 1305 / 1206 * -.84);
  filter:drop-shadow(0 10px 14px rgba(20,35,38,.18))}

.sheet{position:relative;background:var(--paper);border-radius:6px;padding:clamp(28px,6vw,72px) clamp(22px,6.5vw,80px) 36px;
  box-shadow:0 1px 0 #e2d6c6,0 2px 2px rgba(60,40,20,.05),0 30px 60px -28px rgba(60,40,20,.35)}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:6px 6px 0 0;background:var(--coral)}

.cover{padding-bottom:34px;border-bottom:1px solid var(--line)}
.cover-logo{display:block;width:96px;height:auto;margin-bottom:38px}
.cover-type{margin:0 0 4px;color:var(--coral-ink);font:italic 400 20px/1.3 var(--serif)}
.cover-name{margin:0 0 26px;font:400 clamp(40px,6.4vw,68px)/1 var(--serif);letter-spacing:-.025em;max-width:70%}
.cover-meta{display:flex;flex-wrap:wrap;gap:12px 44px;margin:0}
.cover-meta dt{font-size:13px;color:var(--muted)}
.cover-meta dd{margin:0;font-weight:600;font-size:15.5px}

.understood{padding:38px 0 34px;border-bottom:1px solid var(--line)}
.understood h3,.glance h3,.reco h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--muted)}
.understood p{margin:0;max-width:34em;font:400 clamp(21px,2.5vw,26px)/1.45 var(--serif)}

.glance{padding:30px 0 10px}
.glance-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.glance-list li{padding:16px 16px 14px;border-left:1px solid var(--line);display:grid;gap:2px}
.glance-list li:first-child{border-left:0}
.glance-list strong{font-size:16px}
.glance-list span:not(.dot){font-size:13.5px;color:var(--c)}
.glance-list .dot{margin-bottom:8px}

.vert{--c:var(--vert);--bg:var(--vert-bg)}
.orange{--c:var(--orange);--bg:var(--orange-bg)}
.rouge{--c:var(--rouge);--bg:var(--rouge-bg)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--bg)}

.axis{position:relative;display:grid;grid-template-columns:230px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--line)}
.axis header h3{margin:0 0 8px;font:400 28px/1.1 var(--serif);letter-spacing:-.01em}
.axis .status{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:600;color:var(--c)}
.axis dl{margin:0;display:grid;grid-template-columns:170px 1fr;gap:10px 20px;max-width:560px}
.axis dt{font-size:13.5px;color:var(--muted);padding-top:2px}
.axis dd{margin:0;font-size:16.5px;line-height:1.5}

.kenai-note{position:absolute;right:-6px;bottom:-14px;z-index:1;display:flex;align-items:center;gap:8px;margin:0;padding:6px 14px;background:var(--paper);
  color:var(--coral-ink);font:400 17px/1.3 var(--hand);transform:rotate(-2.5deg)}
.kenai-note svg{width:20px;height:20px;fill:var(--coral);flex:0 0 20px}

.reco{padding:40px 0 10px}
.reco p{margin:0 0 28px;max-width:38em;font-size:17px}
.sign{display:flex;align-items:center;gap:16px}
.sign img{width:84px;height:auto}
.sign p{margin:0;display:grid;font-size:14px;color:var(--muted)}
.sign-name{font:400 26px/1.1 var(--hand);color:var(--ink)}
.sheet-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

.next{display:flex;justify-content:center;text-align:center;padding:80px 0 100px}
.next > div{max-width:600px}
.next h2{margin:0 0 12px;font:400 clamp(32px,4.6vw,46px)/1.08 var(--serif);letter-spacing:-.02em}
.next p{margin:0 0 26px;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta{display:inline-block;padding:15px 24px;border-radius:999px;background:var(--coral-ink);color:#fff;font-weight:600;text-decoration:none}
.cta:hover{background:#ad362f}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cta.ghost:hover{background:var(--ink);color:#fff}

@media(max-width:820px){
  .glance-list{grid-template-columns:1fr 1fr}
  .glance-list li:nth-child(3){border-left:0}
  .glance-list li:nth-child(n+3){border-top:1px solid var(--line)}
  .axis{grid-template-columns:1fr;gap:16px}
  .cover-name{max-width:100%}
}
@media(max-width:560px){
  .desk{margin-top:150px}
  .kenai-peek{right:4%;width:150px;top:calc(150px * 1305 / 1206 * -.84)}
  .axis dl{grid-template-columns:1fr;gap:2px}
  .axis dd{margin-bottom:10px}
  .kenai-note{position:relative;right:auto;bottom:auto;margin-top:6px;padding:0;align-self:start}
  .cta{width:100%;text-align:center}
}

/* v4 : fond noir et doré comme le reste du site, dossier clair posé dessus */
body.dossier-page{
  --night:#10191d; --gold:#e9b56a; --ivory:#f5efe6; --ivory-muted:#b9b2a7;
  background:
    radial-gradient(60% 520px at 78% 330px, rgba(233,165,80,.30), transparent 70%),
    radial-gradient(40% 380px at 12% 120px, rgba(233,165,80,.10), transparent 70%),
    var(--night);
  background-repeat:no-repeat;
}
.top .back{color:var(--ivory);border-bottom-color:var(--gold)}
.intro h1{color:var(--ivory)}
.lead{color:var(--ivory-muted)}
.fictif{background:rgba(233,181,106,.10);border-color:var(--gold);color:var(--gold)}
.kenai-peek{filter:drop-shadow(0 0 22px rgba(233,165,80,.35)) drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.sheet{box-shadow:0 0 0 1px rgba(233,181,106,.18),0 40px 90px -30px rgba(0,0,0,.8),0 0 120px -40px rgba(233,165,80,.35)}
.next h2{color:var(--ivory)}
.next p{color:var(--ivory-muted)}
.cta{background:var(--coral);color:#10191d}
.cta:hover{background:#ff847d}
.cta.ghost{color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--gold)}
.cta.ghost:hover{background:var(--gold);color:#10191d}
a:focus-visible{outline-color:var(--gold)}
.solis-footer{border-top:1px solid rgba(233,181,106,.15)}

/* v5 : le dossier est posé sur la table du café doré */
body.dossier-page{position:relative;background:var(--night)}
.scene{position:absolute;z-index:0;left:0;right:0;top:0;height:max(640px,56.25vw);
  background:
    linear-gradient(90deg,rgba(16,25,29,.92) 0%,rgba(16,25,29,.62) 42%,rgba(16,25,29,.18) 75%,rgba(16,25,29,.05) 100%),
    linear-gradient(180deg,rgba(16,25,29,.55) 0%,transparent 22%,transparent 62%,rgba(16,25,29,.7) 84%,#10191d 100%),
    url("assets/exemple-diagnostic-scene.jpg") center bottom/cover no-repeat}
.top,main{position:relative;z-index:1}
.intro h1,.lead{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.lead{color:#d7cfc3}
@media(max-width:700px){
  .scene{height:700px;background:
    linear-gradient(180deg,rgba(16,25,29,.82) 0%,rgba(16,25,29,.6) 45%,rgba(16,25,29,.25) 68%,rgba(16,25,29,.75) 88%,#10191d 100%),
    url("assets/exemple-diagnostic-scene-mobile.jpg") 62% bottom/cover no-repeat}
}