/* Hubaux Avocats — page Actualités + articles (utilisée avec css/domaine.css) */
.ahead { padding: calc(3 * var(--leading)) 0 calc(1.8 * var(--leading)); }
.ahead h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(36px, 5.4vw, 68px); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 0 -0.05em; animation: d-rtl 0.9s ease-out both; animation-delay: 0.25s; }
.ahead .kicker { animation: d-fade 0.6s ease-out both; }
.ahead-lead { font-size: 16.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 56ch; margin: calc(1 * var(--leading)) 0 0; animation: d-fade 1.6s ease-out both; animation-delay: 1s; }

.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); padding: calc(1.2 * var(--leading)) 0 calc(3 * var(--leading)); border-top: 2px solid var(--color-divider); }
.agrid > .acard:nth-child(1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .agrid { grid-template-columns: 1fr; } .agrid > .acard:nth-child(1) { grid-template-columns: 1fr; } }

.acard { padding-top: calc(1.4 * var(--leading)); }
.agrid > .acard:nth-child(1) { padding-top: calc(1.8 * var(--leading)); }
.acard-media { position: relative; display: block; overflow: hidden; border-radius: 6px; border: 1.5px solid var(--color-divider); }
.acard-media img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; filter: grayscale(0.2); transition: filter 1.2s ease, transform 2.4s cubic-bezier(.2,.8,.2,1); }
.acard-media:hover img { filter: grayscale(0); transform: scale(1.03); }
.agrid > .acard:nth-child(1) .acard-media img { aspect-ratio: 16 / 9; }
.acard-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #ffffff 30%, transparent) 47%, color-mix(in srgb, #ffffff 58%, transparent) 50%, color-mix(in srgb, #ffffff 30%, transparent) 53%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; animation: dvisual-sheen 5s linear infinite; }

.acard-body { padding-top: var(--leading); }
.agrid > .acard:nth-child(1) .acard-body { padding-top: 0; }
.acard-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--half); }
.acard-tag { position: relative; padding-left: 20px; color: var(--color-blue-ink); }
.acard-tag::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--color-blue); }
.acard-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 var(--half); }
.agrid > .acard:nth-child(1) .acard-title { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.1; font-weight: var(--font-heading-weight); }
.acard-title a { color: var(--color-text); text-decoration: none; background-image: linear-gradient(var(--color-blue), var(--color-blue)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.5s cubic-bezier(.2,.8,.2,1); padding-bottom: 3px; }
.acard-title a:hover { background-size: 100% 2px; }
.acard-desc { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0 0 var(--leading); max-width: 60ch; }
.acard-more { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: 0.04em; color: var(--color-text); text-decoration: none; }
.acard-arrow { display: block; width: 26px; height: 2px; background: var(--color-blue); position: relative; transition: width 0.4s ease; }
.acard-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-right: 2px solid var(--color-blue); border-top: 2px solid var(--color-blue); transform: rotate(45deg); }
.acard-more:hover .acard-arrow { width: 44px; }

/* ---- article ---- */
.apost { padding: calc(2.6 * var(--leading)) 0 0; }
.aback { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent); text-decoration: none; margin-bottom: calc(1.2 * var(--leading)); animation: d-fade 0.6s ease-out both; }
.aback::before { content: ""; width: 18px; height: 2px; background: var(--color-blue); }
.aback:hover { color: var(--color-text); }
.apost-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--half); animation: d-fade 0.8s ease-out both; animation-delay: 0.2s; }
.apost h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 0 -0.05em; max-width: 30ch; animation: d-rtl 0.9s ease-out both; animation-delay: 0.35s; }
.apost-lead { font-size: 17.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 82%, transparent); max-width: 58ch; margin: calc(1 * var(--leading)) 0 0; animation: d-fade 1.6s ease-out both; animation-delay: 0.9s; }
.apost-figure { position: relative; margin: calc(1.6 * var(--leading)) 0 0; overflow: hidden; border-radius: 6px; border: 1.5px solid var(--color-divider); animation: d-fade 1.8s ease-out both; animation-delay: 0.6s; }
.apost-figure img { width: 100%; aspect-ratio: 21 / 9; display: block; object-fit: cover; filter: grayscale(0.2); }
.apost-body { padding: calc(2 * var(--leading)) 0 calc(2.4 * var(--leading)); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); border-top: 2px solid var(--color-divider); margin-top: calc(2 * var(--leading)); }
.apost-aside { align-self: start; position: sticky; top: 24px; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.apost-aside strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: var(--color-text); margin-bottom: 6px; }
.apost-aside a { color: var(--color-blue-ink); }
.apost-body p { font-size: 16px; line-height: calc(var(--leading) + 4px); color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0 0 var(--leading); max-width: 68ch; opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.apost-body.is-visible p { opacity: 1; transform: translateY(0); }
.apost-body.is-visible p:nth-child(2) { transition-delay: 0.12s; }
.apost-body.is-visible p:nth-child(3) { transition-delay: 0.24s; }
.apost-body.is-visible p:nth-child(4) { transition-delay: 0.36s; }
.apost-body p:last-child { margin-bottom: 0; }
.apost-note { font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 58%, transparent); border-top: 1px solid var(--color-divider); padding-top: var(--half); margin-top: var(--leading) !important; max-width: 68ch; }
@media (max-width: 760px) { .apost-body { grid-template-columns: 1fr; gap: var(--half); } .apost-aside { position: static; } }
@media (prefers-reduced-motion: reduce) { .acard-sheen { animation: none; opacity: 0; } .ahead h1, .ahead .kicker, .ahead-lead, .apost h1, .apost-lead, .apost-meta, .apost-figure, .aback { animation: none; opacity: 1; transform: none; } .apost-body p { opacity: 1; transform: none; transition: none; } }