/* Exemple de diagnostic, version Coiffure Élodie (18/10).
   Même langage que l'accueil : Bricolage Grotesque pour les titres, Figtree pour le texte,
   barres de couleur comme sur la carte « Coiffure Élodie » du bloc 6, corail + anthracite + bleu pétrole.
   Texte plus grand pour une lecture sans effort. Aucune animation. */
:root{
  --f-titre:"Bricolage Grotesque",Arial,Helvetica,sans-serif;
  --f-texte:"Figtree",Arial,Helvetica,sans-serif;
  --ink:#16393e; --texte:#2f3b3e; --muted:#55656a;
  --petrole:#16393e; --corail:#ff6860; --corail-t:#b23a31; --corail-nuit:#ff8b7e; --anthracite:#1d2226;
  --vert-c:#2fa866; --vert-t:#1f7a47;
  --orange-c:#e8962a; --orange-t:#96590c;
  --rouge-c:#e5483f; --rouge-t:#b5352d;
}
body.dossier-page{font-family:var(--f-texte);font-size:18px;color:var(--texte);background:var(--anthracite);
  --night:#1d2226; --gold:var(--corail-nuit); --ivory:#f5efe6; --ivory-muted:#d7cfc3}
.scene{background:
    linear-gradient(90deg,rgba(29,34,38,.92) 0%,rgba(29,34,38,.62) 42%,rgba(29,34,38,.18) 75%,rgba(29,34,38,.05) 100%),
    linear-gradient(180deg,rgba(29,34,38,.55) 0%,transparent 22%,transparent 62%,rgba(29,34,38,.7) 84%,#1d2226 100%),
    url("assets/exemple-diagnostic-scene.jpg") center bottom/cover no-repeat}
@media(max-width:700px){
  .scene{background:
    linear-gradient(180deg,rgba(29,34,38,.82) 0%,rgba(29,34,38,.6) 45%,rgba(29,34,38,.25) 68%,rgba(29,34,38,.75) 88%,#1d2226 100%),
    url("assets/exemple-diagnostic-scene-mobile.jpg") 62% bottom/cover no-repeat}
}

/* En-tête de page */
.top .back{font-size:17px;color:var(--ivory);border-bottom:1px solid var(--corail-nuit);padding:8px 0 2px}
.fictif{font-size:15px;background:rgba(255,139,126,.10);border:1px dashed var(--corail-nuit);color:#ffc2bb}
.intro h1{font:700 clamp(36px,5.2vw,56px)/1.05 var(--f-titre);font-variation-settings:"opsz" 72;letter-spacing:-.025em;color:#fff}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:#e3ddd4}

/* La feuille */
.sheet{background:#fbf7f1;border-radius:14px;box-shadow:0 0 0 1px rgba(255,139,126,.18),0 40px 90px -30px rgba(0,0,0,.8)}
.sheet::before{border-radius:14px 14px 0 0;background:var(--corail)}
.cover-logo{width:110px}
.cover-type{font:700 17px/1.3 var(--f-texte);color:var(--corail-t)}
.cover-name{font:700 clamp(38px,5.6vw,60px)/1.02 var(--f-titre);font-variation-settings:"opsz" 72;letter-spacing:-.025em;color:var(--ink)}
.cover-meta dt{font-size:15px;color:var(--muted)}
.cover-meta dd{font-size:17px;color:var(--ink)}

.understood h3,.glance h3,.reco h3{font:700 16px/1.3 var(--f-texte);color:var(--corail-t)}
.understood p{font:500 clamp(20px,2.1vw,23px)/1.55 var(--f-texte);color:var(--ink)}

/* En un coup d'œil : mêmes barres que l'accueil */
.glance-q{font:700 19px/1.3 var(--f-titre);color:var(--ink)}
.glance-list{background:#fffdf9;border-color:#16393e1f;border-radius:14px}
.glance-list li{gap:6px;padding:18px 18px 16px}
.glance-list strong{font:700 19px/1.25 var(--f-titre);color:var(--ink)}
.glance .glance-list li .st{font-size:16px;font-weight:700;line-height:1.3;color:var(--t)}
.glance-list li.rouge{background:linear-gradient(180deg,#fde3df,#fdeeeb)}
.glance-band{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:18px 22px;border-radius:12px;background:var(--petrole);color:#fff;font-size:18px;font-weight:700;line-height:1.45}
.glance-band svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--corail-nuit);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.vert{--c:var(--vert-c);--t:var(--vert-t);--n:3}
.orange{--c:var(--orange-c);--t:var(--orange-t);--n:2}
.rouge{--c:var(--rouge-c);--t:var(--rouge-t);--n:1}
.sig{display:inline-flex;align-items:flex-end;gap:3px;height:23px;flex:none}
.sig i{display:block;width:6px;border-radius:2px;background:#16393e1f}
.sig i:nth-child(1){height:10px;background:var(--c)}
.sig i:nth-child(2){height:16px}
.sig i:nth-child(3){height:23px}
.orange .sig i:nth-child(2),.vert .sig i:nth-child(2),.vert .sig i:nth-child(3){background:var(--c)}

/* Les quatre étapes */
.axis{grid-template-columns:250px 1fr;padding:38px 0;border-bottom-color:#16393e17}
.axis header h3{font:700 27px/1.15 var(--f-titre);font-variation-settings:"opsz" 48;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px}
.axis .status{gap:10px;font-size:17px;font-weight:700;color:var(--t)}
.axis{grid-template-columns:230px 1fr}
.axis dl{grid-template-columns:1fr;gap:2px;max-width:560px}
.axis dt{font-size:16px;font-weight:700;color:var(--muted)}
.axis dd{margin:0 0 14px;font-size:18px;line-height:1.6;color:var(--texte)}
.axis dd:last-child{margin-bottom:0}
.axis dd sup{font-size:.65em;line-height:0}

/* Recommandation et signature */
.reco p{font-size:18px;line-height:1.65;color:var(--texte)}
.reco strong{color:var(--ink)}
.sign p{font-size:16px;color:var(--muted)}
.sign-name{font:700 24px/1.1 var(--f-titre) !important;color:var(--ink)}
.sheet-foot{font-size:15px;line-height:1.5;color:var(--muted);border-top-color:#16393e17}

/* Suite */
.next h2{font:700 clamp(32px,4.4vw,46px)/1.08 var(--f-titre);font-variation-settings:"opsz" 72;letter-spacing:-.025em;color:#fff}
.next p{font-size:18px;color:#e3ddd4}
.cta{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:16px 28px;border-radius:999px;font:700 17px/1.2 var(--f-texte);background:var(--corail);color:var(--anthracite)}
.cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta:hover{background:#ff847d}
.cta.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--corail-nuit)}
.cta.ghost:hover{background:var(--corail-nuit);color:var(--anthracite)}
a:focus-visible{outline-color:var(--corail-nuit)}
.solis-footer{border-top:1px solid rgba(255,139,126,.15)}

@media(max-width:820px){
  .axis{grid-template-columns:1fr;gap:14px}
}
@media(max-width:560px){
  .glance .glance-list li{grid-template-columns:auto 1fr auto;gap:12px;padding:14px}
  .glance .glance-list strong{font-size:18px}
  .glance .glance-list li .st{max-width:150px;text-align:right}
  .cta{width:100%;justify-content:center}
}