/*
  Dan Studio Signature V1.2.2 — cartouche de plan.
  Feuille autonome : aucune dépendance, aucune variable du site hôte.
  Tout est préfixé .dss ; la règle racine double .dss pour résister aux
  styles de lien des sites clients (footer a, .footer a:hover…).
  Les couleurs se règlent par variables --dss-* (voir README).
*/

@font-face { font-family: "DSS Name"; src: url("assets/fonts/pf-name.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DSS Mono"; src: url("assets/fonts/mono-label.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DSS Hebrew"; src: url("assets/fonts/heebo-he.woff2") format("woff2"); font-weight: 500; font-display: swap; }

@property --dss-tick { syntax: "<length>"; inherits: true; initial-value: 0.7em; }

/* Palette Dan Studio. Priorité nulle (:where) : un site peut tout surcharger. */
:where(.dss) {
  --dss-ivory: #f2efe9;
  --dss-brass: #e0a458;
  --dss-brass-core: #ffd08a;
  --dss-night: #0d131c;

  --dss-ink: var(--dss-ivory);
  --dss-muted: #9aa6b4;
  --dss-role: var(--dss-brass);
  --dss-accent: var(--dss-brass);
  --dss-lit: var(--dss-brass-core);
  --dss-hand: var(--dss-ivory);
  --dss-line: rgb(242 239 233 / 0.28);
  --dss-glow: rgb(224 164 88 / 0.7);
  --dss-focus: var(--dss-brass-core);

  --dss-hand-url: url("assets/signature-dan-studio.webp");
  --dss-size: 1rem;
  --dss-justify: flex-start;
}

/* Sur fond clair : encre nuit, laiton foncé (contraste texte ≥ 4,5). */
:where(.dss[data-tone="light"]) {
  --dss-ink: var(--dss-night);
  --dss-hand: #000;
  --dss-muted: #566170;
  --dss-role: #7a5f3a;
  --dss-accent: #a8742f;
  --dss-lit: #c88a3e;
  --dss-line: rgb(13 19 28 / 0.3);
  --dss-glow: rgb(200 138 62 / 0.6);
  --dss-focus: #7a5f3a;
}

:where(.dss[data-align="center"]) { --dss-justify: center; }
:where(.dss[data-align="end"]) { --dss-justify: flex-end; }

/* Réserve la place avant que le composant ne s'affiche (pas de saut de page). */
dan-studio-signature:not(:defined) { display: block; min-block-size: 6.5em; }

.dss.dss {
  display: flex;
  justify-content: var(--dss-justify);
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: var(--dss-size);
  line-height: 1.3;
  text-align: start;
  -webkit-text-size-adjust: 100%;

  & *, & *::before, & *::after { box-sizing: border-box; }

  & .dss__link {
    --dss-tick: 0.7em;
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "label name" "role role";
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block: 0.6em 2em;
    border: 1px solid var(--dss-line);
    color: var(--dss-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    /* Équerres d'angle : repères de plan, en laiton. */
    background:
      linear-gradient(var(--dss-accent), var(--dss-accent)) left top / var(--dss-tick) 2px no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) left top / 2px var(--dss-tick) no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) right top / var(--dss-tick) 2px no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) right top / 2px var(--dss-tick) no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) left bottom / var(--dss-tick) 2px no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) left bottom / 2px var(--dss-tick) no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) right bottom / var(--dss-tick) 2px no-repeat,
      linear-gradient(var(--dss-accent), var(--dss-accent)) right bottom / 2px var(--dss-tick) no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    transition: border-color 0.4s ease, --dss-tick 0.4s ease;
  }

  /* Règle graduée, à l'intérieur du filet du haut. */
  & .dss__link::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 58%;
    block-size: 0.34em;
    background:
      repeating-linear-gradient(to right, var(--dss-line) 0 1px, transparent 1px 0.45em),
      repeating-linear-gradient(to right, var(--dss-line) 0 1px, transparent 1px 2.25em) bottom / 100% 0.34em;
    background-size: 100% 0.2em, 100% 0.34em;
    background-repeat: repeat-x, repeat-x;
    background-position: left top, left top;
    -webkit-mask-image: linear-gradient(to var(--dss-end, right), #000 30%, transparent);
    mask-image: linear-gradient(to var(--dss-end, right), #000 30%, transparent);
    opacity: 0.7;
    pointer-events: none;
  }

  /* Filet de laiton qui court le long du bord haut au survol. */
  & .dss__link::after {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: -1px;
    inline-size: 0;
    block-size: 2px;
    background: var(--dss-lit);
    transition: inline-size 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
  }

  & .dss__cell {
    display: flex;
    align-items: center;
  }
  & .dss__cell > span { display: block; white-space: nowrap; }

  & .dss__cell--label {
    grid-area: label;
    padding: 0.8em 0.8em;
    font: 400 0.625em/1.2 "DSS Mono", ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dss-muted);
    position: relative;
    isolation: isolate;
  }
  /* Fond de plan de la case « Conçu par » : un quadrillage très fin, comme le papier d'un dessin technique, qui s'efface vers l'intérieur. */
  & .dss__cell--label::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(color-mix(in srgb, var(--dss-ink) 9%, transparent) 1px, transparent 1px) 0 0 / 0.8em 0.8em,
      linear-gradient(to right, color-mix(in srgb, var(--dss-ink) 9%, transparent) 1px, transparent 1px) 0 0 / 0.8em 0.8em;
    -webkit-mask-image: linear-gradient(to var(--dss-end, right), #000 15%, transparent 92%);
    mask-image: linear-gradient(to var(--dss-end, right), #000 15%, transparent 92%);
    pointer-events: none;
  }
  & .dss__cell--name {
    grid-area: name;
    padding: 0.62em 0.8em;
    border-inline-start: 1px solid var(--dss-line);
    font: 500 0.86em/1.1 "DSS Name", "Playfair Display", Georgia, serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--dss-ink);
    transition: border-color 0.4s ease;
  }
  & .dss__cell--role {
    grid-area: role;
    padding-block: 0.72em;
    padding-inline: 0.95em 8.6em;
    border-block-start: 1px solid var(--dss-line);
    font: 400 0.625em/1.2 "DSS Mono", ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.2em;
    word-spacing: 0.9em;
    text-transform: uppercase;
    color: var(--dss-role);
    transition: border-color 0.4s ease;
  }
  /* Ligne libre (attribut caption) : même case, même couleur, écrite comme une note de plan. */
  & .dss__cell--caption {
    padding-inline-end: 8.8em;
    font-size: 0.6875em;
    letter-spacing: 0.05em;
    text-transform: none;
  }
  & .dss__cell--caption > span { white-space: normal; }
  /* Les trois mots passent à la ligne plutôt que d'élargir le cartouche dans une colonne étroite. */
  & .dss__cell--role > span { white-space: normal; }
  & .dss__link[lang|="he"] .dss__cell--caption { font-size: 0.8em; }

  /* L'espacement des capitales ne doit pas pousser le texte hors de sa case. */
  & .dss__cell--label > span,
  & .dss__cell--name > span,
  & .dss__cell--role > span { margin-inline-end: -0.2em; }

  /* Le paraphe n'a pas de case : il se pose par-dessus la seconde ligne, comme une signature. */
  & .dss__cell--hand {
    grid-area: role;
    position: relative;
    pointer-events: none;
  }

  /* Le paraphe : l'original manuscrit, utilisé comme masque. Au repos tout d'une couleur (blanc sur fond sombre, noir sur fond clair) ;
     au survol il passe en fondu au laiton. */
  & .dss__hand {
    position: absolute;
    inset-inline-end: 0.5em;
    inset-block-end: -0.85em;
    inline-size: 5em;
    aspect-ratio: 1661 / 947;
    transform-origin: 70% 55%;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
    pointer-events: none;
  }
  & .dss__hand::before,
  & .dss__hand::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease;
  }
  & .dss__hand::before,
  & .dss__hand::after {
    -webkit-mask: var(--dss-hand-url) center / contain no-repeat;
    mask: var(--dss-hand-url) center / contain no-repeat;
  }
  & .dss__hand::before { background: var(--dss-hand); }
  & .dss__hand::after { background: var(--dss-lit); opacity: 0; }

  /* Survol et clavier : le laiton s'allume et le paraphe grossit un peu. Rien ne s'assombrit. */
  & .dss__link:is(:hover, :focus-visible) {
    --dss-tick: 1.15em;
    border-color: color-mix(in srgb, var(--dss-accent) 75%, transparent);
  }
  & .dss__link:is(:hover, :focus-visible)::after { inline-size: calc(100% + 2px); }
  & .dss__link:is(:hover, :focus-visible) .dss__cell--name,
  & .dss__link:is(:hover, :focus-visible) .dss__cell--role,
  & .dss__link:is(:hover, :focus-visible) .dss__cell--hand {
    border-color: color-mix(in srgb, var(--dss-accent) 45%, transparent);
  }
  & .dss__link:is(:hover, :focus-visible) .dss__hand {
    transform: scale(1.06);
    filter: drop-shadow(0 0 0.55em var(--dss-glow));
  }
  & .dss__link:is(:hover, :focus-visible) .dss__hand::before { opacity: 0; }
  & .dss__link:is(:hover, :focus-visible) .dss__hand::after { opacity: 1; }
  & .dss__link:focus-visible {
    outline: 2px solid var(--dss-focus);
    outline-offset: 0.55em;
  }

  /* Hébreu : mêmes cases, sens inversé, lettres sans capitales ni espacement. */
  & .dss__link:dir(rtl) { --dss-end: left; }
  & .dss__link[lang|="he"] .dss__cell--label,
  & .dss__link[lang|="he"] .dss__cell--role {
    font: 500 0.75em/1.2 "DSS Hebrew", Heebo, "Arial Hebrew", Arial, sans-serif;
    letter-spacing: 0;
    text-transform: none;
  }
  & .dss__link[lang|="he"] .dss__cell > span { margin-inline-end: 0; }
  /* Le nom de marque reste en lettres latines, dans les trois langues. */
  & .dss__link[lang|="he"] .dss__cell--name > span { direction: ltr; unicode-bidi: isolate; }
}

/* Version statique : sans animation (préférence système ou data-motion="off"), l'équerre est déjà posée en grand. */
@media (prefers-reduced-motion: reduce) {
  .dss.dss .dss__link { --dss-tick: 0.95em; }
  .dss.dss .dss__link, .dss.dss .dss__link *, .dss.dss .dss__link::after, .dss.dss .dss__hand::before, .dss.dss .dss__hand::after { transition: none; }
  .dss.dss .dss__link:is(:hover, :focus-visible) { --dss-tick: 0.95em; }
  .dss.dss .dss__link:is(:hover, :focus-visible) .dss__hand { transform: none; filter: none; }
  .dss.dss .dss__link:is(:hover, :focus-visible)::after { inline-size: 0; }
}
.dss.dss[data-motion="off"] .dss__link { --dss-tick: 0.95em; }
.dss.dss[data-motion="off"] .dss__link,
.dss.dss[data-motion="off"] .dss__link *,
.dss.dss[data-motion="off"] .dss__link::after,
.dss.dss[data-motion="off"] .dss__hand::before,
.dss.dss[data-motion="off"] .dss__hand::after { transition: none; }
.dss.dss[data-motion="off"] .dss__link:is(:hover, :focus-visible) { --dss-tick: 0.95em; }
.dss.dss[data-motion="off"] .dss__link:is(:hover, :focus-visible) .dss__hand { transform: none; filter: none; }
.dss.dss[data-motion="off"] .dss__link:is(:hover, :focus-visible)::after { inline-size: 0; }

/* Contraste forcé : couleurs système, le masque suit le texte. */
@media (forced-colors: active) {
  .dss.dss .dss__link { border-color: CanvasText; background: none; }
  .dss.dss .dss__cell--label::before { display: none; }
  .dss.dss .dss__link::before, .dss.dss .dss__link::after { display: none; }
  .dss.dss .dss__cell, .dss.dss .dss__cell--name, .dss.dss .dss__cell--role, .dss.dss .dss__cell--hand { color: CanvasText; border-color: CanvasText; }
  .dss.dss .dss__hand::before { display: none; }
  .dss.dss .dss__hand::after { background: CanvasText; opacity: 1; }
}

/* Impression : encre sombre quel que soit le ton. */
@media print {
  .dss.dss {
    --dss-ink: #0d131c; --dss-muted: #566170; --dss-role: #7a5f3a;
    --dss-accent: #7a5f3a; --dss-line: rgb(13 19 28 / 0.4);
  }
  .dss.dss .dss__link::after { display: none; }
}