/* =========================================================
   HD Web Digital — page d'accueil (refonte 2026, modèle Leverage)
   Chargé seulement sur l'accueil par l'extrait « HD — Page d'accueil ».
   Dépend de hd-base.css (variables) et hd-pages.css (.hd-page, accordéon, FAQ).
   ========================================================= */

/* --- Éléments communs --- */
.hd-home-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--hd-navy); }
.hd-home-label i { flex-shrink: 0; width: 10px; height: 10px; border: 2px solid var(--hd-orange); border-radius: 50%; }
.hd-home-label a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hd-home-label a:hover { color: var(--hd-orange) !important; }
.hd-home-label--dark { color: #fff; }
.hd-home-label--center { justify-content: center; width: 100%; }

.hd-home-btn { display: inline-flex; align-items: center; gap: 22px; padding: 6px 6px 6px 22px; border: 2px solid var(--hd-navy); border-radius: 8px; background: var(--hd-navy); color: #fff !important; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: background-color .25s ease, border-color .25s ease; }
.hd-home-btn i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 5px; background: #fff; color: var(--hd-navy); font-style: normal; }
.hd-home-btn i svg { width: 16px; height: 16px; transition: transform .35s ease; }
.hd-home-btn:hover { background: var(--hd-orange); border-color: var(--hd-orange); }
.hd-home-btn:hover i svg { transform: rotate(45deg); }
.hd-home-btn--light { background: #fff; border-color: #fff; color: var(--hd-navy) !important; }
.hd-home-btn--light i { background: var(--hd-navy); color: #fff; }
.hd-home-btn--light:hover { color: #fff !important; }

.hd-home-card { padding: 30px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(11,31,58,.06); }
.hd-home-chars { margin: 0; padding: 0; font-size: clamp(54px, 9.4vw, 148px); line-height: .92; letter-spacing: -.04em; font-weight: 700; text-transform: uppercase; color: var(--hd-navy); }

/* Cartes photo inclinées (accueil + expertises) */
.hd-home-deck__card { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 12px; background: var(--hd-line); box-shadow: 0 18px 40px -18px rgba(11,31,58,.45); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.hd-home-deck__card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   1. Héros
   ========================================================= */
.hd-home-hero { position: relative; overflow: hidden; background: var(--hd-bg); padding: 40px 0 72px; }
.hd-home-hero__lines { position: absolute; inset: 0; pointer-events: none; }
.hd-home-hero__lines::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #D5DBE4; }
.hd-home-hero__lines::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; border-top: 1px dashed #D5DBE4; }
.hd-home-hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.hd-home-hero__top { grid-column: 1 / 9; grid-row: 1; }
.hd-home-hero__intro { display: flex; align-items: center; gap: 14px; }
.hd-home-hero__badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hd-navy); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--hd-line); }
.hd-home-hero__h1 { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: 0; font-weight: 700; text-transform: none; color: var(--hd-navy); }
.hd-home-hero__since { margin: 2px 0 0; font-size: 13px; color: var(--hd-text-2); }
.hd-home-hero__word { margin: 0; padding: 0; font-size: clamp(72px, 12.6vw, 196px); line-height: .86; letter-spacing: -.045em; font-weight: 700; text-transform: uppercase; color: var(--hd-navy); white-space: nowrap; }
.hd-home-hero__word--1 { margin-top: 26px; }
.hd-home-hero__links { grid-column: 10 / 13; grid-row: 1; align-self: start; margin: 4px 0 0; padding: 0; }
.hd-home-hero__links li { padding: 0 !important; border-top: 1px solid #C9D0DB; }
.hd-home-hero__links li:last-child { border-bottom: 1px solid #C9D0DB; }
.hd-home-hero__links a { display: flex; align-items: center; gap: 8px; padding: 8px 2px; font-size: 14px; color: var(--hd-text-2) !important; text-decoration: none; transition: color .2s ease, padding-left .25s ease; }
.hd-home-hero__links svg { width: 13px; height: 13px; }
.hd-home-hero__links a:hover { color: var(--hd-orange) !important; padding-left: 8px; }
.hd-home-hero__deck { position: relative; grid-column: 4 / 9; grid-row: 2; margin: 56px 0 24px; aspect-ratio: 3 / 2; }
.hd-home-hero__deck::before { content: ""; position: absolute; inset: 2% -1% -2% 1%; border-radius: 12px; background: var(--hd-orange); transform: rotate(-4deg); }
.hd-home-hero__deck .hd-home-deck__card.pos-0 { z-index: 4; transform: rotate(-2deg); }
.hd-home-hero__deck .hd-home-deck__card.pos-1 { z-index: 3; transform: rotate(3deg) translate(8px, 4px); }
.hd-home-hero__deck .hd-home-deck__card.pos-2 { z-index: 2; transform: rotate(-6deg) translate(-10px, 8px); }
.hd-home-hero__deck .hd-home-deck__card.pos-3 { z-index: 1; transform: rotate(1deg) scale(.96); }
.hd-home-hero__deck .hd-home-deck__card.is-out { z-index: 5; transform: translate(-55%, -6%) rotate(-16deg); opacity: 0; }
.hd-home-hero__services { grid-column: 9 / 12; grid-row: 2; align-self: center; margin: 0 0 0 40px; padding: 0; }
.hd-home-hero__services li { padding: 0 !important; }
.hd-home-hero__services a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--hd-navy) !important; text-decoration: none; }
.hd-home-hero__services svg { width: 13px; height: 13px; color: var(--hd-orange); transition: transform .5s ease; }
.hd-home-hero__services a:hover { color: var(--hd-orange) !important; }
.hd-home-hero__services a:hover svg { transform: rotate(90deg); }
.hd-home-hero__bottom { grid-column: 1 / 6; grid-row: 3; align-self: end; margin-top: 36px; }
.hd-home-hero__statement { max-width: 460px; margin: 28px 0 0; padding: 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; font-weight: 600; text-transform: uppercase; color: var(--hd-navy); }
.hd-home-hero__word--2 { grid-column: 6 / 13; grid-row: 3; align-self: end; justify-self: end; margin-top: 24px; }
.hd-home-hero__word .hd-char { display: inline-block; }

/* =========================================================
   2. Qui sommes-nous (fond marine)
   ========================================================= */
.hd-home-who { background: var(--hd-navy); color: #fff; padding: 130px 0 120px; }
.hd-home-who__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
.hd-home-who__grid .hd-home-label { align-self: start; margin-top: 10px; }
.hd-home-who__title { max-width: 820px; margin: 0; padding: 0; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; text-transform: uppercase; color: #fff; }
.hd-home-who__text { max-width: 700px; margin: 24px 0 32px; padding: 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); }
.hd-home-who__row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 70px; }
.hd-home-who__img { margin: 0; overflow: hidden; border-radius: 10px; aspect-ratio: 1; background: var(--hd-navy-2); }
.hd-home-who__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hd-home-who__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hd-home-stat { display: flex; flex-direction: column; min-height: 330px; padding: 28px; border-radius: 10px; background: #102849; }
.hd-home-stat p { margin: 0; padding: 0; }
.hd-home-stat .hd-home-stat__label { font-size: 20px; font-weight: 600; text-transform: uppercase; color: #fff; }
.hd-home-stat .hd-home-stat__big { margin: auto 0 18px; padding-bottom: 18px; border-bottom: 1px dashed rgba(255,255,255,.2); font-size: clamp(64px, 7vw, 108px); line-height: .9; letter-spacing: -.04em; font-weight: 600; color: #fff; }
.hd-home-stat__big span { color: var(--hd-orange); }
.hd-home-stat__big small { font-size: .3em; letter-spacing: 0; color: rgba(255,255,255,.6); }
.hd-home-stat .hd-home-stat__text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); }
.hd-home-zone { margin-top: 110px; }
.hd-home-zone__title { margin: 0 0 32px; padding: 0; text-align: center; font-size: 20px; letter-spacing: -.01em; font-weight: 600; text-transform: uppercase; color: #fff; }
.hd-home-zone__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); }
.hd-home-zone__grid li { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 104px; padding: 16px !important; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #fff; transition: background-color .25s ease; }
.hd-home-zone__grid li:hover { background: #102849; }
.hd-home-zone__grid svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--hd-orange); }
.hd-home-zone__grid li:last-child span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); }

/* =========================================================
   3. Expertises (panneau épinglé, cartes qui défilent)
   ========================================================= */
.hd-home-cap { background: var(--hd-bg); }
.hd-home-cap__head { padding: 110px 20px 44px; text-align: center; border-bottom: 1px dashed #D5DBE4; }
.hd-home-cap__title { margin-top: 18px; }
.hd-home-cap__stage { display: grid; grid-template-columns: 1fr 1fr; max-width: 1320px; margin: 0 auto; border-bottom: 1px dashed #D5DBE4; }
.hd-home-cap__texts { padding: 56px 32px; border-right: 1px dashed #D5DBE4; }
.hd-home-cap__item + .hd-home-cap__item { margin-top: 72px; }
.hd-home-cap__idx { display: flex; align-items: baseline; gap: 2px; margin: 0 0 14px; font-size: 18px; color: var(--hd-text-2); }
.hd-home-cap__idx strong { font-size: 40px; line-height: 1; font-weight: 600; color: var(--hd-navy); }
.hd-home-cap__idx em { align-self: center; margin-left: 14px; padding: 5px 9px; border-radius: 4px; background: var(--hd-orange); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hd-home-cap__item h3 { margin: 0 0 14px; padding: 0; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; text-transform: uppercase; color: var(--hd-navy); }
.hd-home-cap__desc { max-width: 520px; margin: 0 0 20px; padding: 0; font-size: 16px; line-height: 1.65; color: var(--hd-text-2); }
.hd-home-cap__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; }
.hd-home-cap__tags li { padding: 8px 14px !important; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(11,31,58,.1); font-size: 13px; font-weight: 500; color: var(--hd-navy); }
.hd-home-cap__mobile-img { margin: 28px 0 0; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 2; }
.hd-home-cap__mobile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hd-home-cap__deck { display: none; }

/* Version animée (ordinateur, ajoutée par hd-home.js) */
.hd-home-cap--live { display: flex; flex-direction: column; height: 100vh; min-height: 640px; }
.hd-home-cap--live .hd-home-cap__head { flex-shrink: 0; padding-top: calc(var(--hd-header-h, 72px) + 24px); padding-bottom: 28px; }
.hd-home-cap--live .hd-home-cap__title { font-size: clamp(54px, 7.4vw, 120px); }
.hd-home-cap--live .hd-home-cap__stage { flex: 1; width: 100%; min-height: 0; }
.hd-home-cap--live .hd-home-cap__texts { position: relative; overflow: hidden; }
.hd-home-cap--live .hd-home-cap__item { position: absolute; inset: 0 32px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 0; opacity: 0; transform: translateY(100%); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease; pointer-events: none; }
.hd-home-cap--live .hd-home-cap__item.is-past { transform: translateY(-100%); }
.hd-home-cap--live .hd-home-cap__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hd-home-cap--live .hd-home-cap__mobile-img { display: none; }
.hd-home-cap--live .hd-home-cap__deck { position: relative; display: block; width: min(520px, 80%); aspect-ratio: 3 / 2; margin: auto; }
.hd-home-cap--live .hd-home-deck__card { opacity: 0; transform: rotate(6deg) translate(4%, 6%) scale(.94); }
.hd-home-cap--live .hd-home-deck__card.is-next { opacity: 1; z-index: 2; transform: rotate(4deg) translate(3%, 2%); }
.hd-home-cap--live .hd-home-deck__card.is-next2 { opacity: 1; z-index: 1; transform: rotate(-5deg) translate(-3%, 4%); }
.hd-home-cap--live .hd-home-deck__card.is-active { opacity: 1; z-index: 3; transform: rotate(-3deg); }
.hd-home-cap--live .hd-home-deck__card.is-past { opacity: 0; z-index: 4; transform: translate(-40%, -4%) rotate(-12deg); }

/* =========================================================
   4. Bandeau géant des services
   ========================================================= */
.hd-home-band { overflow: hidden; background: var(--hd-bg); padding: 40px 0 70px; }
.hd-home-band__track { display: flex; align-items: center; gap: 44px; width: max-content; animation: hd-home-band 80s linear infinite; }
.hd-home-band__track a { font-size: clamp(64px, 10.4vw, 160px); line-height: 1; letter-spacing: -.04em; font-weight: 700; text-transform: uppercase; white-space: nowrap; color: #E3E7EC !important; text-decoration: none; transition: color .3s ease; }
.hd-home-band__track a:hover { color: var(--hd-navy) !important; }
.hd-home-band__star svg { display: block; width: clamp(48px, 6vw, 92px); height: clamp(48px, 6vw, 92px); color: #E3E7EC; }
.hd-home-band__link { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; margin: 26px auto 0; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--hd-navy) !important; text-decoration: underline; text-underline-offset: 4px; }
.hd-home-band__link svg { width: 14px; height: 14px; }
.hd-home-band__link:hover { color: var(--hd-orange) !important; }
@keyframes hd-home-band { to { transform: translateX(-33.333%); } }

/* =========================================================
   5. Pourquoi nous (bento)
   ========================================================= */
.hd-home-why { background: #EDF0F4; padding: 130px 0; }
.hd-home-why__title { max-width: 760px; margin: 0; padding: 0; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; text-transform: uppercase; color: var(--hd-navy); }
.hd-home-why__bento { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 16px; margin-top: 60px; }
.hd-home-why__one { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; min-height: 560px; }
.hd-home-why__one h3, .hd-home-why__quote h3 { margin: 0 0 14px; padding: 0; font-size: 22px; font-weight: 600; text-transform: uppercase; color: var(--hd-navy); }
.hd-home-why__one p { margin: 0 0 26px; padding: 0; font-size: 15px; line-height: 1.6; color: var(--hd-text-2); }
.hd-home-why__fan { position: relative; width: calc(100% + 60px); height: 230px; margin: auto -30px -30px; }
.hd-home-why__fan figure { position: absolute; bottom: 22px; width: 38%; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 10px 24px -10px rgba(11,31,58,.5); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hd-home-why__fan figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hd-home-why__fan figure:nth-child(1) { left: 4%; transform: rotate(-10deg); }
.hd-home-why__fan figure:nth-child(2) { left: 31%; z-index: 2; transform: rotate(3deg) translateY(-8px); }
.hd-home-why__fan figure:nth-child(3) { left: 58%; transform: rotate(12deg); }
.hd-home-why__one:hover .hd-home-why__fan figure:nth-child(1) { transform: rotate(-16deg) translateX(-8px); }
.hd-home-why__one:hover .hd-home-why__fan figure:nth-child(3) { transform: rotate(18deg) translateX(8px); }
.hd-home-why__mid { display: flex; flex-direction: column; gap: 16px; }
.hd-home-why__tall { flex: 1; min-height: 360px; margin: 0; overflow: hidden; border-radius: 12px; }
.hd-home-why__tall img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hd-home-why__since { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; }
.hd-home-why__since strong { display: block; font-size: 44px; line-height: 1; letter-spacing: -.03em; font-weight: 600; color: var(--hd-navy); }
.hd-home-why__since span { display: block; margin-top: 6px; font-size: 13px; color: var(--hd-text-2); }
.hd-home-why__since i { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border: 1px solid var(--hd-line); border-radius: 50%; color: var(--hd-orange); }
.hd-home-why__since i svg { width: 26px; height: 26px; }
.hd-home-why__side { display: flex; flex-direction: column; gap: 16px; }
.hd-home-why__orange { display: flex; align-items: center; gap: 20px; padding: 26px 28px; border-radius: 12px; background: var(--hd-orange); color: #fff; }
.hd-home-why__orange strong { font-size: 58px; line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.hd-home-why__orange span { max-width: 220px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.hd-home-why__quote { position: relative; display: flex; flex-direction: column; flex: 1; }
.hd-home-why__mark svg { display: block; width: 52px; height: 40px; color: #D5DBE4; }
.hd-home-why__slides { position: relative; flex: 1; min-height: 190px; margin-top: 22px; }
.hd-home-why__slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(20px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.hd-home-why__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hd-home-why__slide p { margin: 0; padding: 0; font-size: 17px; line-height: 1.6; color: var(--hd-text); }
.hd-home-why__slide .hd-home-why__who { display: flex; flex-direction: column; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hd-line); }
.hd-home-why__who strong { font-size: 17px; font-weight: 600; color: var(--hd-navy); }
.hd-home-why__who span { font-size: 13px; color: var(--hd-text-2); }
.hd-home-why__nav { position: absolute; right: 30px; bottom: 34px; display: flex; gap: 8px; }
.hd-home-why__nav button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--hd-line); border-radius: 50%; background: #fff; color: var(--hd-navy); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.hd-home-why__nav button:hover { background: var(--hd-orange); border-color: var(--hd-orange); color: #fff; }
.hd-home-why__nav svg { width: 14px; height: 14px; transform: rotate(45deg); }
.hd-home-why__nav [data-prev] svg { transform: rotate(-135deg); }

/* =========================================================
   6. Réalisations (fond marine, cartes empilées)
   ========================================================= */
.hd-home-show { position: relative; padding: 130px 0 110px; background: linear-gradient(115deg, #0B1F3A 0%, #0B1F3A 30%, #10294B 30.1%, #0D2342 52%, #0B1F3A 52.1%); color: #fff; }
.hd-home-show__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.hd-home-show__head .hd-home-label { margin-bottom: 14px; }
.hd-home-show__title { color: #fff; font-size: clamp(48px, 7.4vw, 116px); white-space: nowrap; }
.hd-home-show__stack { display: grid; gap: 40px; }
.hd-home-project { top: calc(var(--hd-header-h, 72px) + 24px); } /* reste « sticky » (hd-base.css) : les projets s'empilent */
.hd-home-project__img { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 8.4; background: #102849; }
.hd-home-project__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hd-home-project__card { position: absolute; right: 6px; bottom: 6px; width: min(440px, 46%); padding: 30px; border-radius: 10px; background: #0A1A31; }
.hd-home-project--left .hd-home-project__card { right: auto; left: 6px; }
.hd-home-project__logo { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--hd-orange); border-radius: 6px; color: var(--hd-orange); font-size: 20px; font-weight: 800; }
.hd-home-project__card h3 { margin: 20px 0 10px; padding: 0; font-size: 28px; letter-spacing: -.02em; font-weight: 600; text-transform: uppercase; color: #fff; }
.hd-home-project__pitch { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px dashed rgba(255,255,255,.2); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
.hd-home-project__card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; }
.hd-home-project__card dt { margin: 0 0 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #fff; }
.hd-home-project__card dd { margin: 0; font-size: 13px; color: rgba(255,255,255,.65); }
.hd-home-project__client { margin: 0; padding: 0; font-size: 14px; color: #FF9B70; }

/* =========================================================
   7. Formules
   ========================================================= */
.hd-home-pack { background: #EDF0F4; padding: 130px 0 110px; }
.hd-home-pack__toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; }
.hd-home-pack__toggle button { padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--hd-navy); font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.hd-home-pack__toggle button.is-active { background: var(--hd-orange); color: #fff; }
.hd-home-pack__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.hd-home-pack__row + .hd-home-pack__row { margin-top: 16px; }
.hd-home-pack__img { min-height: 380px; margin: 0; overflow: hidden; border-radius: 12px; }
.hd-home-pack__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hd-home-plan { display: flex; flex-direction: column; align-items: flex-start; }
.hd-home-plan p, .hd-home-plan h3 { margin: 0; padding: 0; }
.hd-home-plan .hd-home-plan__name { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--hd-navy); }
.hd-home-plan__name i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--hd-orange); color: #fff; }
.hd-home-plan__name svg { width: 22px; height: 22px; }
.hd-home-plan .hd-home-plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 40px; }
.hd-home-plan__price strong { font-size: clamp(48px, 4.4vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 600; color: var(--hd-navy); }
.hd-home-plan__price span { font-size: 15px; color: var(--hd-text-2); }
.hd-home-plan .hd-home-plan__alt { margin-top: 8px; font-size: 13px; color: var(--hd-text-2); }
.hd-home-plan h3 { margin-top: 32px; font-size: 19px; line-height: 1.3; font-weight: 600; text-transform: uppercase; color: var(--hd-navy); }
.hd-home-plan .hd-home-plan__for { margin: 10px 0 26px; font-size: 14px; line-height: 1.6; color: var(--hd-text-2); }
.hd-home-plan .hd-home-btn { margin-top: auto; }
.hd-home-plan__list { display: flex; flex-direction: column; align-items: flex-start; }
.hd-home-plan__list ul { width: 100%; margin: 0 0 26px; padding: 0 0 26px; border-bottom: 1px dashed #CBD2DD; }
.hd-home-plan__list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0 !important; font-size: 15px; line-height: 1.5; color: var(--hd-text); }
.hd-home-plan__list li svg { flex-shrink: 0; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--hd-orange); color: #fff; }
.hd-home-plan__list .hd-home-btn { margin-top: auto; }
.hd-home-pack__row--dark .hd-home-card { background: var(--hd-navy); }
.hd-home-pack__row--dark .hd-home-plan__name, .hd-home-pack__row--dark .hd-home-plan__price strong, .hd-home-pack__row--dark .hd-home-plan h3 { color: #fff; }
.hd-home-pack__row--dark .hd-home-plan__price span, .hd-home-pack__row--dark .hd-home-plan__alt, .hd-home-pack__row--dark .hd-home-plan__for { color: rgba(255,255,255,.7); }
.hd-home-pack__row--dark .hd-home-plan__list li { color: rgba(255,255,255,.9); }
.hd-home-pack__row--dark .hd-home-plan__list ul { border-color: rgba(255,255,255,.2); }
.hd-home-pack__note { max-width: 960px; margin: 28px 0 0; padding: 0; font-size: 14px; line-height: 1.65; color: var(--hd-text-2); }

/* =========================================================
   8. Derniers articles
   ========================================================= */
.hd-home-blog { background: var(--hd-bg); padding: 130px 0 110px; }
.hd-home-blog__grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; }
.hd-home-post { position: relative; display: flex; flex-direction: column; min-height: 330px; overflow: hidden; padding: 30px; border-radius: 12px; background: #fff; color: var(--hd-navy) !important; text-decoration: none; box-shadow: 0 1px 2px rgba(11,31,58,.06); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hd-home-post:hover { transform: translateY(-4px); }
.hd-home-post__date { position: relative; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hd-text-2); }
.hd-home-post__date svg { width: 22px; height: 22px; color: var(--hd-orange); }
.hd-home-post__title { position: relative; margin-top: 24px; font-size: 20px; line-height: 1.3; font-weight: 600; text-transform: uppercase; }
.hd-home-post__foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 22px; border-top: 1px dashed #CBD2DD; font-size: 13px; color: var(--hd-text-2); }
.hd-home-post__foot i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--hd-orange); border-radius: 50%; color: var(--hd-orange); transition: background-color .25s ease, color .25s ease; }
.hd-home-post__foot svg { width: 14px; height: 14px; }
.hd-home-post:hover .hd-home-post__foot i { background: var(--hd-orange); color: #fff; }
.hd-home-post--img { color: #fff !important; background: var(--hd-navy); }
.hd-home-post--img .hd-home-post__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: transform .8s ease; }
.hd-home-post--img:hover .hd-home-post__bg { transform: scale(1.05); }
.hd-home-post--img .hd-home-post__date, .hd-home-post--img .hd-home-post__foot { color: rgba(255,255,255,.85); }
.hd-home-post--img .hd-home-post__foot { border-color: rgba(255,255,255,.3); }

/* =========================================================
   9. FAQ et appel final
   ========================================================= */
.hd-home-faq .hd-home-label { margin-bottom: 4px; }
.hd-home-cta { background: #fff; padding: 72px 0; border-top: 1px solid var(--hd-line); }
.hd-home-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.hd-home-cta__title { font-size: clamp(36px, 5vw, 72px); white-space: nowrap; }
.hd-home-faq .hd-about-h2 { font-size: clamp(32px, 3.6vw, 52px); white-space: nowrap; }

/* =========================================================
   Tablette et mobile
   ========================================================= */
@media (max-width: 980px) {
  .hd-home-hero { padding: 28px 0 56px; }
  .hd-home-hero__lines::after { display: none; }
  .hd-home-hero__grid { grid-template-columns: 1fr; row-gap: 0; }
  .hd-home-hero__top, .hd-home-hero__links, .hd-home-hero__deck, .hd-home-hero__services, .hd-home-hero__bottom, .hd-home-hero__word--2 { grid-column: 1; grid-row: auto; }
  .hd-home-hero__word { font-size: 21vw; }
  .hd-home-hero__links { order: 6; margin-top: 36px; }
  .hd-home-hero__deck { width: 88%; margin: 40px auto 12px; }
  .hd-home-hero__services { margin: 28px 0 0; }
  .hd-home-hero__word--2 { justify-self: end; margin-top: 30px; }
  .hd-home-who, .hd-home-why, .hd-home-show, .hd-home-pack, .hd-home-blog { padding: 88px 0; }
  .hd-home-who__grid, .hd-home-who__row { grid-template-columns: 1fr; gap: 24px; }
  .hd-home-who__img { max-width: 320px; }
  .hd-home-who__cards { grid-template-columns: 1fr; }
  .hd-home-stat { min-height: 260px; }
  .hd-home-zone { margin-top: 72px; }
  .hd-home-zone__grid { grid-template-columns: 1fr 1fr; }
  .hd-home-zone__grid li { min-height: 80px; font-size: 16px; }
  .hd-home-cap__head { padding: 88px 20px 36px; }
  .hd-home-cap__stage { grid-template-columns: 1fr; }
  .hd-home-cap__texts { padding: 44px 20px; border-right: 0; }
  .hd-home-why__bento { grid-template-columns: 1fr; }
  .hd-home-why__one { min-height: 0; }
  .hd-home-why__fan { height: 200px; margin-top: 20px; }
  .hd-home-why__tall { min-height: 320px; }
  .hd-home-show__head { flex-direction: column; align-items: flex-start; }
  .hd-home-project { position: relative; top: auto; }
  .hd-home-project__img { aspect-ratio: 4 / 3; }
  .hd-home-project__card, .hd-home-project--left .hd-home-project__card { position: relative; inset: auto; width: auto; margin-top: -40px; margin-left: 12px; margin-right: 12px; }
  .hd-home-pack__row { grid-template-columns: 1fr; }
  .hd-home-pack__img { min-height: 260px; }
  .hd-home-pack__row--dark .hd-home-pack__img { order: -1; }
  .hd-home-blog__grid { grid-template-columns: 1fr; }
  .hd-home-post { min-height: 260px; }
  .hd-home-cta { padding: 56px 0; }
  .hd-home-cta__title { white-space: normal; }
  .hd-home-cta__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .hd-home-chars { font-size: 14vw; }
  .hd-home-hero__statement { font-size: 18px; }
  .hd-home-zone__grid li { gap: 8px; padding: 12px !important; font-size: 15px; }
  .hd-home-zone__grid li:last-child span { font-size: 13px; }
  .hd-home-card, .hd-home-stat { padding: 24px; }
  .hd-home-project__card dl { grid-template-columns: 1fr; }
  .hd-home-band__track a { font-size: 17vw; }
  .hd-home-cta__title { font-size: 13vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-home-band__track { animation: none; }
}
.hd-home-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) { .hd-home-chars, .hd-home-cta__title { font-size: 10.8vw; } }
/* Expertises épinglées aussi sur tablette et fenêtre réduite (768-980 px) */
@media (max-width: 980px) {
  .hd-home-cap--live .hd-home-cap__head { padding-bottom: 20px; }
  .hd-home-cap--live .hd-home-cap__stage { grid-template-columns: 1fr 1fr; }
  .hd-home-cap--live .hd-home-cap__texts { padding: 28px 20px; border-right: 1px dashed #D5DBE4; }
  .hd-home-cap--live .hd-home-cap__item { inset: 0 20px; }
  .hd-home-cap--live .hd-home-cap__item h3 { font-size: 26px; }
  .hd-home-cap--live .hd-home-cap__desc { font-size: 15px; }
  .hd-home-cap--live .hd-home-cap__deck { width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-home-cap--live .hd-home-cap__item, .hd-home-cap--live .hd-home-deck__card { transition: opacity .2s linear; }
}
/* Retouches 24/10 (2) : héros façon Leverage, bento « Pourquoi nous » plus compact */
@media (min-width: 981px) {
  .hd-home-hero__deck { margin: 18px 0 0; }
  .hd-home-hero__bottom { align-self: start; margin-top: 26px; }
  .hd-home-hero__word--2 { align-self: start; margin-top: 20px; }
}
.hd-home-show__head .hd-home-label { margin-bottom: 26px; }
.hd-home-why { padding: 110px 0; }
.hd-home-why__bento { margin-top: 48px; }
.hd-home-why__one { min-height: 0; }
.hd-home-why__one p { margin-bottom: 22px; }
.hd-home-why__strip { width: calc(100% + 60px); margin: auto -30px -30px; padding: 28px 0 34px; overflow: hidden; }
.hd-home-why__track { display: flex; width: max-content; animation: hd-home-strip 26s linear infinite; }
.hd-home-why__track figure { position: relative; flex-shrink: 0; width: 132px; aspect-ratio: 4 / 5; margin: 0 -6px; overflow: hidden; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 10px 22px -10px rgba(11,31,58,.55); }
.hd-home-why__track figure:nth-child(odd) { transform: rotate(-7deg); }
.hd-home-why__track figure:nth-child(even) { z-index: 1; transform: rotate(6deg) translateY(6px); }
.hd-home-why__track img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes hd-home-strip { to { transform: translateX(-50%); } }
.hd-home-why__tall { flex: none; min-height: 0; aspect-ratio: 1 / 1; }
.hd-home-why__quote .hd-home-why__slides { min-height: 150px; }
@media (max-width: 980px) { .hd-home-why__tall { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .hd-home-why__track { animation: none; } }
.hd-home-hero__badge { width: 58px; height: 58px; background: #fff; }
.hd-home-hero__badge img { display: block; width: 40px; height: auto; }
/* Responsive (24/10) : pas de logo en double sous l'en-tête, « 0 € » sur une ligne, citations sans chevauchement */
.hd-home-why__orange strong { white-space: nowrap; }
@media (max-width: 980px) { .hd-home-hero__badge { display: none; } }
@media (max-width: 600px) {
  .hd-home-why__orange strong { font-size: 46px; }
  .hd-home-why__slides { min-height: 220px; }
}
@media (max-width: 600px) { .hd-home-why__quote .hd-home-why__slides { min-height: 230px; } }
@media (min-width: 601px) and (max-width: 980px) { .hd-home-hero__deck { width: 72%; } }
.hd-home-hero__badge { background: var(--hd-navy); }

/* Mobile et tablette : « WEB » juste sous la liste des services, avant les deux boutons */
@media (max-width: 980px) {
  .hd-home-hero__word--2 { order: 4; margin-top: 14px; }
  .hd-home-hero__bottom { order: 5; margin-top: 28px; }
}

/* Téléphone : les expertises en liste compacte (comme la page Services) au lieu des grandes vignettes */
.hd-home-cap__list { display: none; }
@media (max-width: 767px) {
  .hd-home-cap__stage { display: none; }
  .hd-home-cap__head { border-bottom: 0; padding-bottom: 20px; }
  .hd-home-cap .hd-home-cap__list { display: block; margin: 0 20px; padding: 0 0 56px; list-style: none; border-top: 1px solid var(--hd-line); }
}
@media (max-width: 767px) { .hd-home-cap__list .hd-svc-rows__name { font-size: 20px; gap: 8px 12px; } }

/* Téléphone et tablette : flèches de « Nos engagements » sous le texte, plus de chevauchement */
@media (max-width: 980px) {
  .hd-home-why__nav { position: static; justify-content: flex-end; margin-top: 18px; }
}

/* 27/10 : Formules - les deux rangées ont la même hauteur (la photo portrait de l'Offre Départ ne l'allonge plus) */
@media (min-width: 981px) {
	.hd-home-pack > .hd-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr 16px 1fr auto auto; }
	.hd-home-pack .hd-home-show__head { grid-row: 1; }
	.hd-home-pack__row { grid-row: 2; }
	.hd-home-pack__row--dark { grid-row: 4; }
	.hd-home-pack__row + .hd-home-pack__row { margin-top: 0; }
	.hd-home-pack .hd-estimate { grid-row: 5; }
	.hd-home-pack__note { grid-row: 6; }
	.hd-home-pack__img { position: relative; min-height: 0; }
	.hd-home-pack__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 980px) {
	.hd-home-pack__img { position: relative; height: 260px; min-height: 0; }
	.hd-home-pack__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
/* 29/10 : photo de l'Offre Départ (portrait) cadrée sur le visage et les mains de l'artisan */
.hd-home-pack__row:not(.hd-home-pack__row--dark) .hd-home-pack__img img { object-position: 50% 22%; }

/* Qui sommes-nous : photo à la hauteur des deux blocs (29/10) */
@media (min-width: 981px) {
  .hd-home-who__row { align-items: stretch; }
  .hd-home-who__img { aspect-ratio: auto; position: relative; min-height: 300px; }
  .hd-home-who__img img { position: absolute; inset: 0; }
}