/* Hubaux Avocats — page Accueil */

/* ---- hero ---- */
.hero-modern { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 620px; }
.hero-copy { padding: calc(4 * var(--leading)) clamp(20px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.display { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(32px, 4.5vw, 58px); line-height: clamp(34px, 4.8vw, 62px); letter-spacing: -0.02em; margin: 0; margin-left: -0.058em; }
.hero-copy .row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--leading); }
.hero-title-mark { display: block; width: 64px; height: 3px; background: var(--color-blue); margin-bottom: var(--half); }
.hero-visual { position: relative; overflow: hidden; background: #ffffff; border-left: 1px solid var(--color-divider); }
.hero-grid-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--color-divider) 0 1px, transparent 1px 25%); }
.hq-grid { position: absolute; inset: 0; }
.hq-grid a { position: absolute; left: 0; right: 0; height: 25%; display: flex; align-items: center; text-decoration: none; color: var(--color-text); }
.hq-grid a:nth-child(1), .hq-grid a:nth-child(5) { top: 0; }
.hq-grid a:nth-child(2), .hq-grid a:nth-child(6) { top: 25%; }
.hq-grid a:nth-child(3), .hq-grid a:nth-child(7) { top: 50%; }
.hq-grid a:nth-child(4), .hq-grid a:nth-child(8) { top: 75%; }
.hq-grid a { animation: hq-bg-seq 32s ease-in-out infinite; }
.hq-grid a:nth-child(1) { animation-delay: 0s; }
.hq-grid a:nth-child(2) { animation-delay: 4s; }
.hq-grid a:nth-child(3) { animation-delay: 8s; }
.hq-grid a:nth-child(4) { animation-delay: 12s; }
.hq-grid a:nth-child(5) { animation-delay: 16s; }
.hq-grid a:nth-child(6) { animation-delay: 20s; }
.hq-grid a:nth-child(7) { animation-delay: 24s; }
.hq-grid a:nth-child(8) { animation-delay: 28s; }
@keyframes hq-bg-seq { 0%, 3% { background: transparent; } 7%, 9% { background: #273746; } 13%, 100% { background: transparent; } }
.hq-grid a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-blue); opacity: 0; transition: opacity 0.4s ease; }
.hq-grid a:hover::after { opacity: 1; }
.hq-text { position: absolute; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); font-size: 15px; line-height: 1.35; font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.005em; opacity: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; animation: hq-seq 32s ease-in-out infinite; }
.hq-grid a:nth-child(1) .hq-text { animation-delay: 0s; }
.hq-grid a:nth-child(2) .hq-text { animation-delay: 4s; }
.hq-grid a:nth-child(3) .hq-text { animation-delay: 8s; }
.hq-grid a:nth-child(4) .hq-text { animation-delay: 12s; }
.hq-grid a:nth-child(5) .hq-text { animation-delay: 16s; }
.hq-grid a:nth-child(6) .hq-text { animation-delay: 20s; }
.hq-grid a:nth-child(7) .hq-text { animation-delay: 24s; }
.hq-grid a:nth-child(8) .hq-text { animation-delay: 28s; }
@keyframes hq-seq { 0%, 3% { opacity: 0; color: var(--color-text); } 7%, 9% { opacity: 1; color: #ffffff; } 13%, 100% { opacity: 0; color: var(--color-text); } }
@media (prefers-reduced-motion: reduce) { .hq-text { animation: none; opacity: 0; } .hq-grid a { animation: none; } .hq-grid a:nth-child(1) .hq-text, .hq-grid a:nth-child(2) .hq-text, .hq-grid a:nth-child(3) .hq-text, .hq-grid a:nth-child(4) .hq-text { opacity: 1; } }
.hero-visual-tag { position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.reveal-1 { transition-delay: 0s; } .reveal-2 { transition-delay: 0.5s; } .reveal-3 { transition-delay: 1s; }
@media (max-width: 980px) { .hero-modern { grid-template-columns: 1fr; min-height: 0; } .hero-visual { min-height: 360px; } }

/* ---- 4 piliers ---- */
.pillars { padding: calc(2 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(1.5 * var(--leading)); }
.pillar { display: grid; grid-template-columns: 72px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; padding: calc(1.4 * var(--leading)) clamp(16px, 2vw, 32px); border-top: 2px solid var(--color-divider); }
.pillar-grid .pillar:nth-child(-n+2) { border-top: 2px solid var(--color-divider); }
.pillar-grid > .pillar:nth-last-child(-n+2) { border-bottom: 2px solid var(--color-divider); }
.pillar-grid .pillar:nth-child(odd) { border-right: 2px solid var(--color-divider); padding-left: 0; }
.pillar-grid .pillar:nth-child(even) { grid-template-columns: 1fr 72px; padding-right: 0; }
.pillar-grid .pillar:nth-child(even) .pillar-badge { order: 2; }
.pillar-grid .pillar:nth-child(even) .pillar-body { order: 1; text-align: right; }
.pillar-grid .pillar:nth-child(even) .pillar-body .pillar-title, .pillar-grid .pillar:nth-child(even) .pillar-body .pillar-copy { margin-left: auto; }
@media (max-width: 720px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-grid .pillar:nth-child(odd) { border-right: none; padding-left: 0; }
  .pillar-grid .pillar:nth-child(even) { grid-template-columns: 72px 1fr; padding-right: 0; }
  .pillar-grid .pillar:nth-child(even) .pillar-badge { order: 0; }
  .pillar-grid .pillar:nth-child(even) .pillar-body { order: 0; text-align: left; }
  .pillar-grid .pillar:nth-child(even) .pillar-body .pillar-title, .pillar-grid .pillar:nth-child(even) .pillar-body .pillar-copy { margin-left: 0; }
}
.pillar-badge { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--color-blue); display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-text); animation: badge-glow 8s ease-in-out infinite; }
.pillar-badge svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
@keyframes badge-glow { 0%, 22%, 100% { border-color: var(--color-blue); background: transparent; color: var(--color-text); } 11% { border-color: var(--color-blue); background: color-mix(in srgb, var(--color-blue) 14%, transparent); color: var(--color-accent); } }
.pillar-grid .pillar:nth-child(1) .pillar-badge { animation-delay: 0s; }
.pillar-grid .pillar:nth-child(2) .pillar-badge { animation-delay: 2s; }
.pillar-grid .pillar:nth-child(3) .pillar-badge { animation-delay: 4s; }
.pillar-grid .pillar:nth-child(4) .pillar-badge { animation-delay: 6s; }
@media (prefers-reduced-motion: reduce) { .pillar-badge { animation: none; } }
.pillar-title { font-family: var(--font-heading); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; margin: 0 0 8px; }
.pillar-copy { font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0; }

/* ---- bande domaines (liste, fond navy) ---- */
.domains-band { background: #273746; }
.domains { padding: calc(2.5 * var(--leading)) 0 calc(2.8 * var(--leading)); color: #ffffff; }
.domains .kicker { color: #9dc4dd; }
.domains-head { max-width: 62ch; margin-bottom: calc(1.6 * var(--leading)); }
.domains-head h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 0 -0.05em; color: #ffffff; }
.domains-head p { font-size: 16px; line-height: var(--leading); color: color-mix(in srgb, #ffffff 80%, transparent); max-width: 56ch; margin: var(--leading) 0 0; }
.domain-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.domain-row { position: relative; display: flex; align-items: baseline; gap: 18px; padding: calc(0.9 * var(--leading)) var(--leading) calc(0.9 * var(--leading)) 0; border-top: 2px solid color-mix(in srgb, #ffffff 22%, transparent); text-decoration: none; transition: padding-left 0.4s cubic-bezier(.2,.8,.2,1); }
.domain-grid > .domain-row:nth-last-child(-n+2) { border-bottom: 2px solid color-mix(in srgb, #ffffff 22%, transparent); }
.domain-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; letter-spacing: -0.005em; margin: 0; color: #ffffff; transition: color 0.35s ease; }
.domains .domain-row:hover { padding-left: 10px; }
.domain-row::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; background: var(--color-blue); opacity: 0; transform: translateX(-8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.domains .domain-row:hover::after { opacity: 1; transform: translateX(0); }
@media (max-width: 720px) { .domain-grid { grid-template-columns: 1fr; } .domain-grid > .domain-row:nth-last-child(-n+2) { border-bottom: none; } .domain-grid > .domain-row:last-child { border-bottom: 2px solid color-mix(in srgb, #ffffff 22%, transparent); } }

/* ---- équipe ---- */
.team { padding: calc(1 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); margin-top: calc(1.5 * var(--leading)); }
.team-card { display: flex; flex-direction: column; gap: 20px; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; display: block; filter: grayscale(1); }
.team-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; letter-spacing: -0.01em; margin: 0; }
.team-role { font-size: 15px; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 4px 0 0; }
.team-kicker { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-blue-ink); margin: 0 0 4px; }
.team-cv { list-style: none; margin: var(--half) 0 0; padding: 0; border-top: 1px solid var(--color-divider); }
.team-cv li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--color-divider); font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.team-cv li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 2px; background: var(--color-blue); }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

/* ---- avis Google (carrousel) ---- */
.reviews { padding: calc(1 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.reviews-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--leading); flex-wrap: wrap; }
.reviews-carousel { position: relative; margin-top: calc(1.5 * var(--leading)); overflow: hidden; border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.reviews-track { display: flex; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); touch-action: pan-y; }
.review-card { flex: 0 0 100%; display: flex; flex-direction: column; gap: 14px; padding: calc(1.4 * var(--leading)) clamp(4px, 2vw, 16px); box-sizing: border-box; }
.review-stars { font-size: 15px; letter-spacing: 0.12em; color: var(--color-blue-ink); }
.review-quote { font-size: 18px; line-height: var(--leading); margin: 0; color: color-mix(in srgb, var(--color-text) 85%, transparent); max-width: 62ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.review-author { font-size: 13px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0; }
.reviews-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--half); }
.reviews-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: var(--color-divider); cursor: pointer; }
.reviews-dots button[aria-current="true"] { background: var(--color-text); }