/* ══════════════════════════════════════════════════════════════
   tutoriel.css — Guide d'utilisation ShippingFiles
   Charte : charbon #0E1116 · ivoire #F5F1E8 · rouille #E76F51
   Fontes : Young Serif (titres), IBM Plex Serif (corps),
            Instrument Sans (UI), IBM Plex Mono (technique)
   ══════════════════════════════════════════════════════════════ */
:root{
  --charbon:#0E1116;
  --ivoire:#F5F1E8;
  --rouille:#E76F51;
  --rouille-pale:#F6E3DC;
  --rouille-fonce:#C8553D;
  --texte:#1F2228;
  --texte-doux:#5A6068;
  --trait:#E2DACB;
  --carte:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivoire);color:var(--texte);
  font-family:'IBM Plex Serif',Georgia,serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.t-mono{font-family:'IBM Plex Mono',monospace}
h1,h2,h3,.t-title{font-family:'Young Serif','IBM Plex Serif',serif;font-weight:400;line-height:1.2}

/* ── En-tête ── */
.t-header{background:var(--charbon);color:var(--ivoire);padding:18px 20px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'Instrument Sans',system-ui,sans-serif}
.t-header a{color:var(--rouille);text-decoration:none;font-weight:600}
.t-header .t-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--ivoire)}
.t-header .t-brand img{width:30px;height:30px}

/* ── Conteneur lecture ── */
.t-wrap{max-width:760px;margin:0 auto;padding:28px 20px 80px}
.t-hero{text-align:center;padding:18px 0 8px}
.t-hero h1{font-size:34px;color:var(--charbon);margin:.2em 0}
.t-hero .t-sub{font-size:18px;color:var(--texte-doux);margin:0 auto 18px;max-width:560px}
.t-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.t-btn{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;font-size:15px;padding:12px 22px;border-radius:10px;text-decoration:none;cursor:pointer;border:2px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,box-shadow .12s}
.t-btn-primary{background:var(--rouille);color:#fff;box-shadow:0 6px 18px rgba(231,111,81,.35)}
.t-btn-primary:hover{transform:translateY(-2px)}
.t-btn-ghost{background:transparent;color:var(--charbon);border-color:var(--trait)}

/* ── Recherche ── */
.t-search{position:relative;margin:22px 0}
.t-search input{width:100%;font-family:'Instrument Sans',sans-serif;font-size:16px;padding:14px 16px 14px 44px;border:2px solid var(--trait);border-radius:12px;background:var(--carte);color:var(--texte);outline:none}
.t-search input:focus{border-color:var(--rouille)}
.t-search .t-search-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);opacity:.55}
.t-search-empty{display:none;padding:18px;text-align:center;color:var(--texte-doux);font-style:italic}

/* ── Sommaire ── */
.t-toc{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:6px 8px;margin:18px 0 28px}
.t-toc summary{cursor:pointer;font-family:'Instrument Sans',sans-serif;font-weight:700;color:var(--charbon);padding:12px 14px;list-style:none;display:flex;align-items:center;gap:8px}
.t-toc summary::-webkit-details-marker{display:none}
.t-toc ol{margin:4px 0 10px;padding:0 8px;list-style:none;counter-reset:toc}
.t-toc li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--texte);text-decoration:none;font-family:'Instrument Sans',sans-serif;font-size:15px}
.t-toc li a:hover{background:var(--rouille-pale)}
.t-toc li a .t-ico{font-size:18px}

/* ── Sections & étapes ── */
.t-section{margin:40px 0;scroll-margin-top:80px}
.t-section>h2{font-size:27px;color:var(--rouille-fonce);border-bottom:3px solid var(--rouille-pale);padding-bottom:8px}
.t-section .t-intro{color:var(--texte-doux);font-size:18px}
.t-step{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:20px 22px;margin:16px 0}
.t-step-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.t-num{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--rouille);color:var(--ivoire);font-family:'Instrument Sans',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:17px}
.t-step-head h3{margin:0;font-size:19px;color:var(--charbon)}
.t-step p{margin:.4em 0}

/* ── Encadrés ── */
.t-box{border-radius:10px;padding:14px 16px;margin:14px 0;font-size:16px}
.t-box b{font-family:'Instrument Sans',sans-serif}
.t-astuce{background:#FCF6E8;border-left:4px solid #E9C46A}
.t-attention{background:var(--rouille-pale);border-left:4px solid var(--rouille)}
.t-savoir{background:#EAF1F0;border-left:4px solid #2A9D8F}

/* ── Captures + annotation CSS (cercle rouille par-dessus l'image) ── */
.t-shot{position:relative;margin:16px 0;border-radius:12px;overflow:hidden;border:1px solid var(--trait);background:#fff}
.t-shot img{display:block;width:100%;height:auto}
.t-shot--ph{display:flex;align-items:center;justify-content:center;min-height:160px;border:2px dashed var(--trait);color:var(--texte-doux);font-family:'Instrument Sans',sans-serif;font-size:13px;text-align:center;padding:24px;background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f3f3f3 10px,#f3f3f3 20px)}
.t-marker{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--rouille);color:var(--ivoire);font-family:'Instrument Sans',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);font-size:15px}
.t-ring{position:absolute;border:3px solid var(--rouille);border-radius:10px;box-shadow:0 0 0 3px rgba(231,111,81,.25)}

/* ── Retour en haut ── */
.t-top{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:var(--rouille);color:#fff;border:none;font-size:20px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(231,111,81,.45);z-index:40}
.t-top.show{display:flex}

/* ── Pied ── */
.t-footer{background:var(--charbon);color:var(--ivoire);text-align:center;padding:26px 18px;font-family:'Instrument Sans',sans-serif;font-size:14px}
.t-footer a{color:var(--rouille);text-decoration:none}

/* ── Responsive ── */
@media (max-width:560px){
  body{font-size:16px}
  .t-hero h1{font-size:27px}
  .t-section>h2{font-size:23px}
  .t-marker{width:28px;height:28px;font-size:13px}
}

/* ── Impression ── */
@media print{
  .t-header,.t-search,.t-top,.t-actions,.t-footer{display:none !important}
  body{background:#fff;font-size:12pt}
  .t-section{page-break-inside:avoid}
  .t-step{break-inside:avoid;border-color:#bbb}
  a{color:#000;text-decoration:none}
  .t-shot--ph{display:none}
}