/* Single drawing page. Tokens from tokens.css, cards reuse .a-card. */

.d-wrap{max-width:1180px;margin:0 auto;padding:34px 20px 20px}

.d-main{display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap}
.d-media{flex:1 1 440px;min-width:280px;position:relative}
.d-info{flex:1 1 400px;min-width:280px}

/* sheet + colour toggle */
.d-sheet{position:relative;background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);padding:14px;box-shadow:var(--shadow-card)}
.d-sheet img{display:block;width:100%;height:auto;border-radius:9px}
.d-sheet .c-sheet__color{position:absolute;inset:14px;opacity:0;border-radius:9px;
  transition:opacity .45s var(--ease)}
.d-sheet.is-color .c-sheet__color{opacity:1}

.d-pin{
  position:absolute;top:26px;right:26px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:#E60023;color:#fff;font-weight:700;font-size:.82rem;
  padding:9px 14px;border-radius:var(--radius-pill);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  transition:transform .16s var(--ease),background .16s var(--ease)
}
.d-pin:hover{background:#c3001d;transform:translateY(-2px)}

/* info column */
/* .d-crumbs moved to chrome.css - single.php uses it too and dessin.css
   only loads on is_singular('dessin'), so the blog post fell back to Hello
   Elementor's link colour at 4.03:1. */
.d-title{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0 0 14px;line-height:1.12}

.d-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.d-pill{text-decoration:none}
.d-badge{
  display:inline-flex;align-items:center;padding:.3em .8em;border-radius:var(--radius-pill);
  background:var(--col-white);border:1px solid var(--col-border);
  color:var(--col-text);font-size:.8rem;font-weight:700;text-decoration:none
}
.d-badge:hover{border-color:var(--col-heading)}

.d-story{
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);padding:20px 22px;margin:0 0 22px;
  box-shadow:var(--shadow-card)
}
.d-story__label{
  margin:0 0 10px;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--col-accent-text)
}
.d-story__text{margin:0 0 14px;font-size:1rem;line-height:1.75}
.d-listen{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px solid var(--col-border);border-radius:var(--radius-pill);
  font:inherit;font-weight:700;font-size:.85rem;color:var(--col-heading);padding:8px 15px;
  transition:background .16s var(--ease)
}
.d-listen:hover{background:var(--col-band)}
.d-listen[aria-pressed="true"]{background:var(--col-heading);color:#fff;border-color:transparent}
/* The previous version failed silently: the label flipped back to "Ecouter" and
   nothing said why. A real error now shows for four seconds. */
.d-listen.is-failed{background:#FDE9F0;border-color:var(--col-accent-text);color:var(--col-accent-text)}

.d-actions{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.d-actions--soft{gap:8px}
.d-toggle{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  cursor:pointer;background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-pill);font:inherit;font-weight:600;font-size:.86rem;
  color:var(--col-text);padding:9px 16px;
  transition:background .16s var(--ease),border-color .16s var(--ease)
}
.d-toggle:hover{border-color:var(--col-heading)}
.d-toggle[aria-pressed="true"]{background:var(--col-heading);color:#fff;border-color:transparent}

/* related */
.d-related{margin:54px 0 0}
.d-related .c-h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 18px}
.d-related__grid{display:flex;flex-wrap:wrap;gap:14px}
.d-related__grid .a-card{flex:0 1 calc(25% - 11px)}

@media (max-width:900px){
  .d-related__grid .a-card{flex:0 1 calc(33.333% - 10px)}
}
@media (max-width:640px){
  .d-wrap{padding:22px 16px 16px}
  .d-main{gap:24px}
  .d-sheet{padding:10px}
  .d-sheet .c-sheet__color{inset:10px}
  .d-pin{top:20px;right:20px;padding:8px 12px;font-size:.78rem}
  .d-story{padding:16px 17px}
  .d-actions .c-btn{flex:1 1 calc(50% - 5px);justify-content:center;text-align:center}
  .d-actions--soft .d-toggle{flex:1 1 calc(50% - 4px);min-width:0}
  .d-related__grid .a-card{flex:0 1 calc(50% - 7px)}
  .d-related{margin-top:38px}
}

@media print{
  .c-head,.c-foot,.d-info,.d-related,.d-pin{display:none!important}
  .d-sheet{border:0;box-shadow:none;padding:0}
  .d-wrap{padding:0;max-width:none}
  body{background:#fff}
}

/* Opening paragraph, under the badges. Sits between the title and the story,
   so it is muted - it informs, it does not compete with either. */
.d-lead{margin:14px 0 0;color:var(--col-muted);line-height:1.7;font-size:.95rem}

/* See the note in chrome.css. */
.d-pin:hover,.d-pin:focus,.d-pin:active{color:#fff}
/* Hello Elementor's reset also styles bare buttons:
   `button:hover{background-color:#c36;color:#fff}` at (0,1,1), which outranks
   every single-class rule here. Any <button> of ours whose hover changed only
   a transform inherited Hello's pink background AND white text - the Imprimer
   button measured 1.85:1, the carnet arrows 1.23:1. Each restates both. */
.d-listen:hover,.d-listen:focus{background:var(--col-band);color:var(--col-heading)}
.d-toggle:hover,.d-toggle:focus{background:var(--col-white);color:var(--col-heading)}
.d-toggle[aria-pressed="true"]:hover,.d-toggle[aria-pressed="true"]:focus{
  background:var(--col-heading);color:#fff
}