/*
 * assets/css/tuto.css
 * Fiche tuto (CPT tuto) : rendu écran + impression 1 page paysage.
 */

.epd-tuto-page{
  --blue:#709FF8; --blue-deep:#002AFF; --navy:#0E2451; --salmon:#F19780;
  --pink:#F2B0D0; --orange:#EB4D27; --yellow:#FFFE65; --cream:#F8F6F2;
  --ink:#1a2540; --line:#e4e7ef;
  font-family:"Rethink Sans",system-ui,sans-serif; color:var(--navy);
  max-width:1180px; margin:0 auto; padding:8px 16px 48px;
}

/* Barre d'outils (écran uniquement) */
.epd-tuto-page .tuto-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.epd-tuto-page .tuto-back{font-weight:700;font-size:14px;color:var(--blue-deep);text-decoration:none}
.epd-tuto-page .tuto-back:hover{text-decoration:underline}
.epd-tuto-page .tuto-print{display:inline-flex;align-items:center;gap:10px;font-family:"Rethink Sans",sans-serif;font-weight:700;font-size:15px;padding:13px 24px;border-radius:40px;border:2px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}
.epd-tuto-page .tuto-print:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,36,81,.2)}
.epd-tuto-page .tuto-print svg{width:18px;height:18px}

/* La fiche */
.epd-tuto{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 34px rgba(14,36,81,.13);
  display:flex;flex-direction:column;
}

/* Bandeau d'en-tête */
.tuto-head{
  display:flex;align-items:stretch;gap:0;
  background:linear-gradient(120deg,var(--blue) 0%, #8fb4ff 100%);
  color:#fff;position:relative;
}
.tuto-action{
  background:var(--salmon);display:flex;align-items:center;justify-content:center;padding:0 14px;
}
.tuto-action span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Loos Extended",sans-serif;font-weight:900;font-size:20px;letter-spacing:.05em;color:#fff;
}
.tuto-title{flex:1;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.tuto-title h1{font-family:"Loos Extended",sans-serif;font-weight:900;font-size:clamp(24px,3vw,38px);line-height:1.02;margin:0;color:#fff;text-transform:uppercase;text-wrap:balance}
.tuto-obj{margin:0;font-family:"Loos Extended",sans-serif;font-weight:900;font-size:clamp(14px,1.6vw,20px);color:var(--navy)}
.tuto-illus{flex:none;width:150px;display:flex;align-items:center;justify-content:center;padding:12px}
.tuto-illus img{max-width:100%;max-height:120px;height:auto;object-fit:contain}

/* Grille 3 × 2 */
.tuto-grid{
  flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:0;
}
.tuto-block{padding:16px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tuto-block:nth-child(3n){border-right:none}
.tuto-block:nth-child(n+4){border-bottom:none}
.tuto-block-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.tuto-block-head .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Loos Extended",sans-serif;font-weight:900;font-size:16px}
.tuto-block-head h2{font-family:"Rethink Sans",sans-serif;font-weight:700;font-size:15px;line-height:1.15;margin:0;color:var(--navy)}
.tuto-block-body{font-size:13px;line-height:1.45;color:var(--ink)}
.tuto-block-body p{margin:0 0 7px}
.tuto-block-body :last-child{margin-bottom:0}
.tuto-block-body ul{margin:0 0 7px;padding-left:18px}
.tuto-block-body a{color:var(--blue-deep);font-weight:700}
.tuto-exemple-img{margin-top:8px}
.tuto-exemple-img img{max-width:100%;max-height:90px;width:auto;border-radius:6px}

/* ---- Responsive écran ---- */
@media (max-width:900px){
  .epd-tuto{aspect-ratio:auto}
  .tuto-grid{grid-template-columns:1fr}
  .tuto-block{border-right:none}
  .tuto-block:nth-child(n+4){border-bottom:1px solid var(--line)}
  .tuto-block:last-child{border-bottom:none}
  .tuto-illus{display:none}
}

/* ---- Impression : 1 page paysage ---- */
@media print{
  @page{size:A4 landscape;margin:8mm}
  html,body{background:#fff!important}
  /* masquer le chrome du site */
  #site-header,#site-footer,.site-header,.site-footer,#wpadminbar,.no-print{display:none!important}
  #site-content,.post-inner,.entry-content{margin:0!important;padding:0!important;max-width:none!important}
  .epd-tuto-page{max-width:none;padding:0;margin:0}
  .epd-tuto{aspect-ratio:auto;height:100%;box-shadow:none;border:none;border-radius:0}
  .tuto-grid{grid-template-columns:repeat(3,1fr)}
  .tuto-block{page-break-inside:avoid}
  .tuto-block-body{font-size:11px}
}