/* Ardoise: the slate, the brand's one shape (DIRECTION.md 2.6). Import after tokens.css.
   Only for things that ARE pieces: the hero's three slates, the roof, the legend, /pieces, /metiers,
   the software's « écran de pièces » and Réglages > Pièces. Never on buttons, cards, steps or prices.

   Markup:
     <div class="pd-lay" style="--d: 140ms">           entrance wrapper (optional)
       <div class="pd-slate-edge">                     hard edge, follows the cut (site only), hover lift
         <div class="pd-slate pd-slate--shared" style="--tone: var(--site-slate-3)">
           <div class="pd-slate__in"><span class="pd-slate__title">Devis</span><span class="pd-slate__data">D-2026-0041 signé en ligne</span></div>
         </div>
       </div>
     </div>
   Kinds: --shared (dark, a piece every business shares), --own (light, the business's own),
          --onrequest (outlined, « Sur demande »). In the software: add .pd-slate--app. */

.pd-slate {
  --c: var(--pd-chamfer);
  --tone: var(--site-slate-1);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  background: var(--tone-now, var(--tone));
  color: var(--site-slate-text);
}
.pd-slate__in { position: relative; height: 100%; padding: var(--pd-s-15) var(--pd-s-2) var(--pd-s-2); }
.pd-slate__title { display: block; font: 600 15px/20px var(--pd-font-text); }
.pd-slate__data { display: block; margin-top: var(--pd-s-05); font: 400 13px/18px var(--pd-font-text); color: var(--site-slate-text-2); }

.pd-slate--own { --tone: var(--site-slate-light); color: var(--site-slate-light-text); }
.pd-slate--own .pd-slate__data { color: var(--site-slate-light-text-2); }

/* outlined: the outer layer is the outline colour, the inner layer is the page, both cut the same way */
.pd-slate--onrequest { --tone: var(--site-slate-outline); }
.pd-slate--onrequest > .pd-slate__in {
  position: absolute; inset: 1.5px; height: auto;
  background: var(--site-bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c) + 0.6px), calc(100% - var(--c) + 0.6px) 100%, calc(var(--c) - 0.6px) 100%, 0 calc(100% - var(--c) + 0.6px));
}

.pd-slate-edge { filter: drop-shadow(0 var(--pd-slate-edge) 0 var(--site-slate-edge)); }
.pd-slate-edge--hero { filter: drop-shadow(0 4px 0 var(--site-slate-edge)); }

@media (hover: hover) {
  .pd-slate-edge { transition: transform 280ms var(--pd-ease-out), filter 280ms var(--pd-ease-out); }
  .pd-slate-edge:hover { transform: translateY(-3px); filter: drop-shadow(0 5px 0 var(--site-slate-edge)); }
  .pd-slate-edge:hover .pd-slate--shared { --tone-now: var(--site-slate-hover); }
  .pd-slate-edge:hover .pd-slate--own { --tone-now: var(--site-slate-light-hover); }
}
/* touch: the slate crossing the screen's centre line takes the hover look (H16); add .is-centre by script */
@media (hover: none) {
  .pd-slate-edge.is-centre .pd-slate--shared { --tone-now: var(--site-slate-hover); }
  .pd-slate-edge.is-centre .pd-slate--own { --tone-now: var(--site-slate-light-hover); }
}

/* the software's slates: surface with a 1 px line, no edge, no shadow */
.pd-app .pd-slate--app { --c: var(--pd-chamfer-app); --tone: var(--app-line); color: var(--app-text); }
.pd-app .pd-slate--app > .pd-slate__in {
  position: absolute; inset: 1px; height: auto; background: var(--app-surface);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c) + 0.4px), calc(100% - var(--c) + 0.4px) 100%, calc(var(--c) - 0.4px) 100%, 0 calc(100% - var(--c) + 0.4px));
}
.pd-app .pd-slate--app .pd-slate__data { color: var(--app-text-2); }
.pd-app .pd-slate--app.pd-slate--onrequest { --tone: var(--app-border); }
@media (hover: hover) { .pd-app .pd-slate--app:hover > .pd-slate__in { background: var(--app-hover); } }

/* entrance: a slate is set down. Wrap the edge in <div class="pd-lay" style="--d: 140ms">; the script
   adds .is-laid (eave first, left to right, DIRECTION.md 7.3). Reduced motion or no script: laid. */
@media (prefers-reduced-motion: no-preference) {
  .js .pd-lay:not(.is-laid) { opacity: 0; transform: translateY(-22px) rotate(-2deg) scale(1.035); }
  .js .pd-lay { transition: transform var(--pd-dur-lay) var(--pd-spring) var(--d, 0ms), opacity 200ms linear var(--d, 0ms); }
  .js .pd-lay.is-leaving { opacity: 0; transform: translateY(-8px); transition: transform 160ms var(--pd-ease-in), opacity 160ms var(--pd-ease-in); }
}