/* =====================================================================
   FROST STUDIO — clôture du site (colophon.css) : « Prenez contact » en
   une phrase, e-mail et téléphone en grand, puis le pied de page : plan
   du site, mentions légales, confidentialité, langues, copyright.
   Même grammaire que le reste : obsidienne, os, mono, serif italique.
   ===================================================================== */
.colophon { position: relative; background: var(--ob-0); color: var(--bone); padding: clamp(5rem, 12vh, 9rem) var(--gutter) 2.2rem; border-top: 1px solid rgba(233,228,220,.08); }
.colophon__contact { display: grid; gap: 1.1rem; max-width: 60rem; }
.colophon__label { margin: 0; font-size: .64rem; color: var(--bone-soft); }
.colophon__title { margin: 0; }
.colophon__line { display: block; }
.colophon__line--sans { font-size: clamp(3rem, 8vw, 8.4rem); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; line-height: .86; letter-spacing: -.02em; text-transform: uppercase; }
.colophon__line--serif { font: italic clamp(2.3rem, 5.8vw, 6rem)/.98 var(--font-serif); letter-spacing: -.01em; margin: -.04em 0 0 clamp(.4rem, 3.2vw, 3rem); color: rgba(233,228,220,.94); }
.colophon__one { margin: .6rem 0 0; max-width: 34rem; font-size: clamp(1rem, 1.15vw, 1.15rem); font-weight: 300; line-height: 1.5; color: var(--bone-soft); }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; margin-top: 1.2rem; }
.colophon__links a { position: relative; color: var(--bone); text-decoration: none; font: italic clamp(1.5rem, 3vw, 2.8rem)/1.1 var(--font-serif); letter-spacing: -.01em; padding-bottom: .25rem; }
.colophon__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(233,228,220,.35); transform: scaleX(1); transform-origin: left; transition: background .3s, transform .5s var(--ease-out); }
.colophon__links a:hover::after { background: var(--bone); }
.colophon__links a:hover { color: #fff; }
/* --- pied de page --- */
.colophon__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(4rem, 9vh, 7rem); padding-top: 2.2rem; border-top: 1px solid rgba(233,228,220,.1); }
.colophon__brand { display: grid; gap: .8rem; align-content: start; }
.colophon__mark { display: inline-flex; align-items: center; gap: .65rem; color: var(--bone); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.colophon__mark svg { width: 1.35rem; height: 1.35rem; color: var(--bone); }
.colophon__mark i { font: italic 1.08em/1 var(--font-serif); text-transform: none; letter-spacing: 0; color: rgba(233,228,220,.92); }
.colophon__tag { margin: 0; font-size: .62rem; color: var(--bone-faint); }
.colophon__desc { margin: .2rem 0 0; max-width: 26rem; font-size: .92rem; font-weight: 300; line-height: 1.55; color: var(--bone-soft); }
.colophon__grid nav { display: grid; gap: .55rem; align-content: start; }
.colophon__grid h3 { margin: 0 0 .4rem; font-size: .6rem; font-weight: 400; color: var(--bone-faint); }
.colophon__grid nav a { color: var(--bone-soft); text-decoration: none; font-size: .95rem; transition: color .25s; width: fit-content; }
.colophon__grid nav a:hover { color: var(--bone); }
.colophon__grid nav a[aria-current="page"] { color: var(--bone); }
.colophon__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(233,228,220,.08); font-size: .58rem; letter-spacing: .14em; color: var(--bone-faint); }
.colophon__bottom a { color: inherit; text-decoration: none; }
.colophon__bottom a:hover { color: var(--bone); }
.colophon__top { justify-self: end; display: inline-flex; align-items: center; gap: .5rem; color: var(--bone-soft); text-decoration: none; font-size: .58rem; letter-spacing: .16em; }
.colophon__top:hover { color: var(--bone); }
@media (max-width: 767px), (pointer: coarse) and (max-height: 520px) {
  .colophon { padding: 4rem var(--gutter) 1.6rem; }
  .colophon__line--sans { font-size: clamp(2.6rem, 13vw, 3.9rem); }
  .colophon__line--serif { font-size: clamp(2rem, 9.5vw, 2.9rem); margin-left: 1rem; }
  .colophon__links { flex-direction: column; gap: .8rem; }
  .colophon__links a { font-size: 1.5rem; width: fit-content; }
  .colophon__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; margin-top: 3rem; }
  .colophon__brand { grid-column: 1 / -1; }
  .colophon__bottom { flex-direction: column; gap: .5rem; }
}