/*
 * utilities.css — Helpers that consume tokens.css.
 * Keep this file small. Only add a utility if it's used in 3+ places.
 */

/* ---- Layout primitives ---- */
.stack  { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-5); }

.row    { display: flex; flex-direction: row; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.row-sm { display: flex; flex-direction: row; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; flex-direction: row; gap: var(--s-3); align-items: center; justify-content: space-between; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr;             gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr);      gap: var(--s-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);      gap: var(--s-3); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.container { max-width: var(--bp-desk); margin: 0 auto; padding-left: var(--s-4); padding-right: var(--s-4); }
@media (min-width: 1024px) { .container { padding-left: var(--s-6); padding-right: var(--s-6); } }

/* ---- Spacing — margin top / bottom / padding ---- */
.mt-0{margin-top:0}  .mt-1{margin-top:var(--s-1)}  .mt-2{margin-top:var(--s-2)}
.mt-3{margin-top:var(--s-3)}  .mt-4{margin-top:var(--s-4)}  .mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}  .mt-7{margin-top:var(--s-7)}  .mt-8{margin-top:var(--s-8)}

.mb-0{margin-bottom:0}  .mb-1{margin-bottom:var(--s-1)}  .mb-2{margin-bottom:var(--s-2)}
.mb-3{margin-bottom:var(--s-3)}  .mb-4{margin-bottom:var(--s-4)}  .mb-5{margin-bottom:var(--s-5)}
.mb-6{margin-bottom:var(--s-6)}  .mb-7{margin-bottom:var(--s-7)}  .mb-8{margin-bottom:var(--s-8)}

.p-0{padding:0}  .p-1{padding:var(--s-1)}  .p-2{padding:var(--s-2)}
.p-3{padding:var(--s-3)}  .p-4{padding:var(--s-4)}  .p-5{padding:var(--s-5)}

/* ---- Typography utilities ---- */
.t-display {
    font-family: var(--font-display); font-weight: 900;
    font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -1px;
}
.t-display em {
    font-style: normal;
    background: var(--grad-cuban);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.t-h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.5px;
}
.t-h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-h2); line-height: var(--lh-snug);
}
.t-body  { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body);  line-height: var(--lh-body);  color: var(--text-2); }
.t-small { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small); line-height: 1.4;            color: var(--text-3); }
.t-meta  { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-meta);
           letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }

@media (max-width: 639px) {
    .t-display { font-size: 32px; }
    .t-h1      { font-size: 24px; }
    .t-h2      { font-size: 18px; }
    .t-body    { font-size: 14px; }
}

/* ---- Color utilities (use with restraint — prefer components) ---- */
.text-1      { color: var(--text-1); }
.text-2      { color: var(--text-2); }
.text-3      { color: var(--text-3); }
.text-orange { color: var(--orange); }
.text-gold   { color: var(--gold); }
.text-red    { color: var(--red); }
.text-cyan   { color: var(--cyan); }

/* ---- Visibility ---- */
.hidden { display: none !important; }
@media (max-width: 639px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 640px)  { .only-mobile  { display: none !important; } }

/* ---- Accessibilité ---- */
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}
.skip-link {
    position: absolute;
    top: -100%; left: 8px;
    z-index: 99999;
    background: #ff8533; color: #fff;
    padding: 10px 18px; border-radius: 0 0 8px 8px;
    font-weight: 700; font-size: .95rem; text-decoration: none;
    transition: top .15s;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}