/* TUTO SellOff — design system */
:root{
  --primary:#2f5d8c;
  --primary-dark:#204060;
  --primary-light:#d9e7f7;
  --bg:#f4f6f9;
  --text:#2b2f36;
  --text-dim:#6b7280;
  --white:#ffffff;
  --border:#e5e9f0;
  --shadow:0 3px 10px rgba(20,30,50,.10);
  --shadow-lg:0 8px 24px rgba(20,30,50,.14);
  --radius:12px;
  --warn:#e67e22;
  --ok:#2d7d32;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);}
img{max-width:100%;}

.app-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  grid-template-rows:64px 1fr;
  height:100vh;
}

/* Bandeau — hauteur fixe, toujours visible */
.topbar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--primary-dark);
  color:#fff;
  padding:0 22px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  z-index:5;
}
.topbar .brand{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  gap:10px;
}
/* Point 65 : le petit point vert devient l'icône « TU » */
.topbar .brand .dot{
  width:26px;height:26px;border-radius:0;
  background:url(data:image/png;base64,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) center/contain no-repeat;
  box-shadow:none;
}
.topbar .crumb{
  color:#c7d3e6;
  font-size:13px;
  border-left:1px solid rgba(255,255,255,.2);
  padding-left:16px;
}
.topbar .menu-toggle{
  display:none;
  margin-left:auto;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}

/* Menu latéral — hauteur fixe, contenu scrollable indépendamment */
.sidebar{
  background:var(--white);
  border-right:1px solid var(--border);
  overflow-y:auto;
  padding:14px 10px 30px;
}
.sidebar h2{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--text-dim);
  margin:18px 10px 6px;
}
.sidebar details{margin-bottom:2px;}
.sidebar summary{
  list-style:none;
  cursor:pointer;
  font-weight:600;
  font-size:13.5px;
  color:var(--primary-dark);
  padding:9px 10px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sidebar summary::-webkit-details-marker{display:none;}
.sidebar summary:hover{background:var(--primary-light);}
.sidebar summary::after{
  content:"›";
  transform:rotate(90deg);
  transition:transform .15s;
  color:var(--text-dim);
}
.sidebar details[open] summary::after{transform:rotate(-90deg);}
.sidebar nav a{
  display:block;
  padding:7px 10px 7px 22px;
  font-size:13.5px;
  color:var(--text);
  text-decoration:none;
  border-radius:8px;
  margin:1px 0;
}
.sidebar nav a:hover{background:var(--bg);}
.sidebar nav a.active{
  background:var(--primary);
  color:#fff;
  font-weight:600;
}
.sidebar nav a.dead{
  color:#b6bcc6;
  cursor:not-allowed;
  pointer-events:none;
}
.sidebar nav a.dead .badge{
  display:inline-block;
  margin-left:6px;
  font-size:10px;
  background:#f1c7ad;
  color:#7a3e10;
  padding:1px 6px;
  border-radius:10px;
}
.sidebar details.sub{
  margin:0 0 2px 10px;
  padding-left:10px;
  border-left:1.5px solid #1a1a1a;
}
.sidebar details.sub > summary{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-dim);
  padding:6px 10px;
}
.sidebar details.sub > summary:hover{background:var(--bg);}
.sidebar .home-link{
  display:block;
  margin:0 10px 14px;
  font-weight:700;
  color:var(--primary-dark);
  text-decoration:none;
  font-size:14px;
}

/* Contenu — seule zone qui défile */
.content{
  overflow-y:auto;
  padding:32px clamp(16px,4vw,48px) 60px;
}
.content > .page-head{
  margin-bottom:22px;
}
.content > .page-head h1{
  margin:0 0 6px;
  font-size:26px;
  color:var(--primary-dark);
}
.content > .page-head .cat{
  color:var(--text-dim);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.content > .page-head .page-num{
  display:inline-block;
  color:#fff;
  background:var(--primary);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  border-radius:6px;
  padding:1px 9px;
  margin-right:8px;
  vertical-align:middle;
}
.content > .page-desc{
  color:var(--text-dim);
  font-size:15px;
  line-height:1.5;
  margin:0 0 22px;
  max-width:760px;
}

.section{
  background:var(--white);
  border-radius:var(--radius);
  margin-bottom:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.section h2{
  margin:0;
  padding:15px 20px;
  background:var(--primary-light);
  color:var(--primary-dark);
  border-left:8px solid var(--primary);
  font-size:17px;
}
.step{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding:20px;
  border-top:1px solid var(--border);
  align-items:flex-start;
}
.step .text{
  flex:1;
  min-width:230px;
  font-size:15.5px;
  line-height:1.65;
}
.step .text h3{
  margin:0 0 8px;
  font-size:14px;
  color:var(--primary-dark);
}
.step .image{
  flex:2;
  min-width:280px;
  text-align:center;
}
.step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:13px;
  margin-right:8px;
}
.gallery{
  text-align:center;
  padding:18px;
  border-top:1px solid var(--border);
}
.section > .gallery:first-child{border-top:none;}
.gallery p{
  max-width:640px;
  margin:10px auto 0;
  font-size:14.5px;
  color:var(--text);
  line-height:1.6;
}
.gallery img,.image img{
  border:1px solid #d8dee8;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  margin:8px;
}
.block-desc{
  text-align:center;
  font-size:13px;
  font-style:italic;
  color:var(--text-dim);
  padding:2px 20px 14px;
}
.alert,.info{
  margin:18px 20px;
  padding:14px 16px;
  border-radius:8px;
  font-size:14.5px;
  line-height:1.6;
}
.alert{background:#fff3cd;border-left:6px solid var(--warn);}
.info{background:#eaf4fb;border-left:6px solid var(--primary);}
.finish{
  background:#eaf8ea;
  border-top:1px solid #b8dcb8;
  text-align:center;
  padding:18px;
  font-size:18px;
  font-weight:700;
  color:var(--ok);
}
.empty-note{
  background:var(--white);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:26px;
  color:var(--text-dim);
  text-align:center;
}
.links-box a{
  display:inline-block;
  margin:4px 8px 4px 0;
  padding:9px 16px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  border-radius:20px;
  font-size:14px;
}
.links-box a:hover{background:var(--primary-dark);}

/* Rangées en colonnes (éditeur : bloc "Colonnes") — Point 30 : ajout d'une carte visuelle (fond, ombre, marge intérieure) */
.row{
  display:flex;
  gap:20px;
  margin-bottom:24px;
  flex-wrap:wrap;
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 24px;
}
.row > .col{
  flex:1;
  min-width:200px;
}
.row.row-2-30-70 > .col:nth-child(1){flex:0 1 30%;}
.row.row-2-30-70 > .col:nth-child(2){flex:1 1 68%;}
.row.row-2-70-30 > .col:nth-child(1){flex:1 1 68%;}
.row.row-2-70-30 > .col:nth-child(2){flex:0 1 30%;}

/* Accueil */
.home-hero{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:#fff;
  border-radius:var(--radius);
  padding:36px 32px;
  margin-bottom:28px;
  box-shadow:var(--shadow-lg);
}
.home-hero h1{margin:0 0 8px;font-size:28px;}
.home-hero p{margin:0;color:#dbe6f4;font-size:15px;max-width:640px;}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;
}
.card h3{margin:0 0 10px;font-size:14.5px;color:var(--primary-dark);}
.card ul{margin:0;padding:0;list-style:none;}
.card li{margin-bottom:2px;}
.card li.sub-heading{
  margin:8px 0 3px;
  padding:0 8px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-dim);
}
.card li.sub-heading:first-child{margin-top:0;}
.card a{
  display:block;
  padding:6px 8px;
  border-radius:6px;
  color:var(--text);
  text-decoration:none;
  font-size:13.5px;
}
.card a:hover{background:var(--bg);color:var(--primary);}
.card a.dead{color:#b6bcc6;pointer-events:none;}

footer.site-footer{
  text-align:center;
  color:var(--text-dim);
  font-size:12.5px;
  padding:26px 10px 10px;
}

@media (max-width:900px){
  .app-shell{grid-template-columns:1fr;grid-template-rows:64px 1fr;}
  .sidebar{
    position:fixed;top:64px;left:0;bottom:0;width:280px;
    transform:translateX(-100%);
    transition:transform .18s ease;
    box-shadow:var(--shadow-lg);
    z-index:4;
  }
  .sidebar.open{transform:translateX(0);}
  .topbar .menu-toggle{display:inline-block;}
  .step{flex-direction:column;}
}