/*
 * Home page only - templates/front/index.html.twig. Loaded after home.css (the .hp-* design shared with the Solutions
 * and "Comment ça marche" pages), so everything here is scoped to .hp--home.
 * 1. hero carousel (image / video slides that fade into each other)
 * 2. generous spacing between the sections, 3. minimal look, 4. fade-in while scrolling (assets/js/home.js)
 */
.hp--home {
    --hp-light: #f6f8fa;
    --hp-line: #e4eaef;
    --hp-muted: #66768a;
    --hp-space: clamp(36px, 4.25vw, 64px);
}
.hp--home .hp-container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
/* ---------- 1. Hero carousel ---------- */
.hp--home .hp-hero__slides { display: grid; }
.hp--home .hp-slide { --hp-slide-rgb: 244, 248, 251; position: relative; z-index: 0; grid-area: 1 / 1; display: flex; align-items: center; min-height: clamp(540px, 40vw, 720px); background: #e8eff5; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.hp--home .hp-slide.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
/* the slide that is going away stays opaque under the one fading in, so the background never shows through */
.hp--home .hp-slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; transition: none; }

.hp--home .hp-slide__media { position: absolute; inset: 0; }
.hp--home .hp-slide--on-dark { --hp-slide-rgb: 15, 33, 56; }
/* overlay from left to right: the slide color under the texts, fading to transparent on the right (rotated to top-down on phones, see below) */
.hp--home .hp-slide__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--hp-slide-rgb), .94) 0%, rgba(var(--hp-slide-rgb), .85) 32%, rgba(var(--hp-slide-rgb), .45) 55%, rgba(var(--hp-slide-rgb), 0) 80%); pointer-events: none; }
.hp--home .hp-slide--on-dark .hp-slide__media::after { background: linear-gradient(90deg, rgba(var(--hp-slide-rgb), .86) 0%, rgba(var(--hp-slide-rgb), .6) 40%, rgba(var(--hp-slide-rgb), .12) 100%); }
.hp--home .hp-slide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hp--home .hp-slide__video.is-playing { opacity: 1; }

.hp--home .hp-slide .hp-container { min-height: 0; padding-top: 72px; padding-bottom: 104px; }
.hp--home .hp-hero__kicker { margin-bottom: 18px !important; color: var(--hp-muted); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.hp--home .hp-hero__title { margin-bottom: 24px; font-size: clamp(30px, 3.1vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.hp--home .hp-hero__title b { color: var(--hp-red); }
.hp--home .hp-hero__highlight { margin-bottom: 6px; font-size: 1.3em; }
.hp--home .hp-hero__text { max-width: 560px; margin-bottom: 32px !important; font-size: 18px; font-weight: 400; line-height: 1.6; }
.hp--home .hp-hero__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hp--home .hp-hero .hp-stores { margin-bottom: 32px; }

/* slides with a dark picture or video: white texts */
.hp--home .hp-slide--on-dark .hp-hero__kicker { color: rgba(255, 255, 255, .8); }
.hp--home .hp-slide--on-dark .hp-hero__title { color: #fff; }
.hp--home .hp-slide--on-dark .hp-hero__text { color: rgba(255, 255, 255, .9); }
.hp--home .hp-slide--on-dark .hp-hero__highlight,
.hp--home .hp-slide--on-dark .hp-hero__title b,
.hp--home .hp-slide--on-dark .hp-red { color: #ff5a60; }

/* dots: round, white with a thin dark ring so they stay readable on any photo or video; the active one is red */
.hp--home .hp-hero__nav { position: absolute; right: 0; bottom: 40px; left: 0; z-index: 3; pointer-events: none; }
.hp--home .hp-hero__nav-inner { display: flex; align-items: center; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.hp--home .hp-hero__dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.hp--home .hp-hero__dot span { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(15, 33, 56, .35); transition: background-color .25s, box-shadow .25s, transform .25s; }
.hp--home .hp-hero__dot:hover span { background: #fff; }
.hp--home .hp-hero__dot.is-active span { background: var(--hp-red); box-shadow: 0 0 0 2px #fff; transform: scale(1.2); }
.hp--home .hp-hero__dot:focus-visible { outline: 2px solid var(--hp-navy); outline-offset: -2px; border-radius: 50%; }

@keyframes hp-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    /* the texts of the slide fade in a little after the slide itself */
    .hp--home .hp-slide.is-active .hp-hero__content > * { animation: hp-fade-up .9s cubic-bezier(.2, .7, .2, 1) both; }
    .hp--home .hp-slide.is-active .hp-hero__content > :nth-child(1) { animation-delay: .15s; }
    .hp--home .hp-slide.is-active .hp-hero__content > :nth-child(2) { animation-delay: .25s; }
    .hp--home .hp-slide.is-active .hp-hero__content > :nth-child(3) { animation-delay: .35s; }
    .hp--home .hp-slide.is-active .hp-hero__content > :nth-child(4) { animation-delay: .45s; }
    .hp--home .hp-slide.is-active .hp-hero__content > :nth-child(5) { animation-delay: .55s; }
}
@media (prefers-reduced-motion: reduce) {
    .hp--home .hp-slide, .hp--home .hp-slide.is-active { transition: none; }
}
@media (max-width: 991px) {
    /* Phones and tablets: the hero fills the screen under the 70 px bar (min-height 100vh), the texts are on top and the
       picture or video sits under them in the last 40vh. A gradient from the slide color to transparent covers the top
       of the visual, so the texts stay readable whatever the slides look like. */
    .hp--home .hp-slide { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: calc(100vh - 70px); min-height: calc(100svh - 70px); background: rgb(var(--hp-slide-rgb)); }
    .hp--home .hp-slide__media { top: auto; height: calc(40vh + 80px); }
    .hp--home .hp-hero__bg { position: absolute; inset: 0; order: 0; height: 100%; aspect-ratio: auto; }
    .hp--home .hp-slide__media::after,
    .hp--home .hp-slide--on-dark .hp-slide__media::after { background: linear-gradient(to bottom, rgb(var(--hp-slide-rgb)) 0%, rgba(var(--hp-slide-rgb), 0) 70%); }
    .hp--home .hp-slide .hp-container { padding-top: 48px; padding-bottom: 40vh; }
    .hp--home .hp-hero__nav { bottom: 24px; }
    .hp--home .hp-hero__nav-inner { padding: 0 12px; }
}

/* ---------- 2. Spacing ---------- */
.hp--home .hp-section,
.hp--home .hp-vision,
.hp--home .hp-app,
.hp--home .hp-markets,
.hp--home .hp-approach,
.hp--home .hp-stats,
.hp--home .hp-support { padding-top: var(--hp-space); padding-bottom: var(--hp-space); }
.hp--home .hp-charter { padding-top: var(--hp-space); padding-bottom: 0; }
.hp--home .hp-charter__main { padding-bottom: clamp(48px, 6vw, 88px); }

.hp--home .hp-title { margin-bottom: 22px; }
.hp--home .hp-text { margin-bottom: 36px !important; }
.hp--home .hp-markets__head { margin-bottom: clamp(40px, 5vw, 64px); }
.hp--home .hp-markets__head .hp-text { margin-bottom: 0 !important; }
.hp--home .hp-support__grid { row-gap: clamp(36px, 5vw, 56px); }
.hp--home .hp-charter__list { gap: 18px 32px; margin: 8px 0 40px !important; }

@media (min-width: 768px) {
    .hp--home .hp-markets__grid { gap: 20px; }
    .hp--home .hp-steps { gap: 32px; }
    .hp--home .hp-features { gap: 36px; }
}
@media (min-width: 992px) {
    .hp--home .hp-app__grid { gap: clamp(40px, 5vw, 80px); }
    .hp--home .hp-approach__grid,
    .hp--home .hp-stats__grid { gap: clamp(48px, 6vw, 96px); }
}
@media (max-width: 1199px) {
    .hp--home .hp-approach__grid,
    .hp--home .hp-stats__grid { gap: 48px; }
    /* the figures block is stacked under its intro: center both */
    .hp--home .hp-stats__intro { text-align: center; }
}

/* vision: the text on top, the values under it, at every width (3 values per row on phones and tablets, the last row
   starting on the left like the text) */
.hp--home .hp-vision__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.hp--home .hp-vision__intro { text-align: left; }
.hp--home .hp-vision__intro .hp-text { max-width: none; }
.hp--home .hp-values { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 40px 20px; padding-left: 0 !important; border-left: 0; }
.hp--home .hp-values__item { flex: 0 0 calc((100% - 40px) / 3); }
@media (min-width: 992px) {
    .hp--home .hp-values { gap: 40px 32px; }
    .hp--home .hp-values__item { flex: 0 0 150px; }
}
@media (max-width: 420px) {
    .hp--home .hp-values__item { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
    .hp--home { --hp-space: 32px; }
    .hp--home .hp-container { padding-left: 20px; padding-right: 20px; }
    /* market cards: stacked, no horizontal scroll */
    .hp--home .hp-markets__grid { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .hp--home .hp-steps { row-gap: 40px; }
    .hp--home .hp-features { gap: 28px; }
    .hp--home .hp-support__grid > .hp-support__contact { padding: 36px 20px; }
}

/* ---------- 3. Minimal look: lighter weights, hairline borders, no shadows, color kept for accents ---------- */
.hp--home .hp-kicker { margin-bottom: 14px !important; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hp--home .hp-title { font-size: clamp(28px, 2.9vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.hp--home .hp-title--xl { font-size: clamp(30px, 3.2vw, 46px); }
.hp--home .hp-text { max-width: 520px; color: inherit; font-size: 17px; line-height: 1.7; }

.hp--home .hp-btn { min-height: 48px; padding: 12px 26px; border-width: 1px; font-size: 15px; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; }
.hp--home .hp-btn:hover { transform: none; }
.hp--home .hp-btn--primary { box-shadow: none; }
.hp--home .hp-btn--outline { border-color: #cfd8e1; background: transparent; color: var(--hp-navy) !important; }
.hp--home .hp-btn--outline:hover { border-color: var(--hp-red); background: transparent; color: var(--hp-red) !important; }
.hp--home .hp-btn--navy-outline { border-color: #cfd8e1; background: #fff; }
.hp--home .hp-btn__play { width: 28px; height: 28px; }

/* values (vision) */
.hp--home .hp-values__icon { width: 72px; height: 72px; border: 1px solid var(--hp-line); background: #fff; font-size: 26px; }
.hp--home .hp-values__label { margin-top: 18px; color: var(--hp-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }

/* application */
.hp--home .hp-features__icon { width: 48px; height: 48px; border: 1px solid var(--hp-line); background: #fff; color: var(--hp-navy); font-size: 18px; }
.hp--home .hp-features__item strong { font-size: 17px; font-weight: 700; }

/* markets: hairline cards without icon, the card color only tints the arrow and the border on hover */
.hp--home .hp-market { border: 1px solid var(--hp-line); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.hp--home a.hp-market:hover { border-color: var(--hp-card); box-shadow: 0 22px 40px -28px rgba(15, 33, 56, .4); transform: none; }
.hp--home .hp-market__photo { aspect-ratio: 4 / 3; }
.hp--home .hp-market__body { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 22px 22px 24px; }
.hp--home .hp-market__icon { display: none; }
.hp--home .hp-market__title { margin-top: 0; font-size: 19px; font-weight: 700; }
.hp--home .hp-market__text { margin-top: 8px; font-size: 15px; }
.hp--home .hp-market__arrow { position: static; width: auto; height: auto; margin-top: auto; padding-top: 20px; background: none; color: var(--hp-card); font-size: 14px; }
/* stacked cards on phones: the arrow sits on the right, centered on the text */
@media (max-width: 767px) {
    .hp--home .hp-market__body { position: relative; padding-right: 64px; }
    .hp--home .hp-market__arrow { position: absolute; top: 50%; right: 24px; bottom: auto; left: auto; margin: 0; padding: 0; font-size: 18px; transform: translateY(-50%); }
    .hp--home a.hp-market:hover .hp-market__arrow { transform: translate(3px, -50%); }
}

/* approach */
.hp--home .hp-steps__icon { width: 60px; height: 60px; border: 1px solid var(--hp-line); background: #fff; box-shadow: none; color: var(--hp-red); font-size: 22px; }
.hp--home .hp-steps__item strong { margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.hp--home .hp-steps__item:not(:last-child)::after { top: 25px; border-color: #b9c4d0; }

/* key figures */
.hp--home .hp-stats__title { font-weight: 700; }
.hp--home .hp-stats__item { padding: 12px 20px; border-left-color: rgba(255, 255, 255, .18); }
.hp--home .hp-stats__icon { color: var(--hp-red); font-size: 28px; }
.hp--home .hp-stats__item strong { color: #fff; font-weight: 700; }
.hp--home .hp-stats__item span:not(.hp-stats__icon) { color: rgba(255, 255, 255, .75); font-size: 16px; font-weight: 400; }

/* charter */
.hp--home .hp-charter__icon { border-width: 1px; }
.hp--home .hp-charter__list li { font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* customer service */
.hp--home .hp-support__grid > .hp-support__contact { border: 1px solid var(--hp-line); }
.hp--home .hp-support .hp-btn { border-radius: 999px; }
.hp--home .hp-support__phone strong { font-weight: 700; }
.hp--home .hp-support__list li { font-weight: 600; }

/* ---------- 4. Fade-in while scrolling (the .hp-js class is set by index.html.twig, .is-visible by home.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hp-js .hp--home > section:not(.hp-hero) { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
    .hp-js .hp--home > section.is-visible { opacity: 1; transform: none; }

    /* cards, steps and figures appear one after the other */
    .hp-js .hp--home .is-visible :is(.hp-market, .hp-values__item, .hp-steps__item, .hp-features__item, .hp-stats__item, .hp-charter__list li, .hp-support__list li) { animation: hp-fade-up .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--i, 0) * .1s); }
    .hp--home :is(.hp-market, .hp-values__item, .hp-steps__item, .hp-features__item, .hp-stats__item, .hp-charter__list li, .hp-support__list li):nth-child(2) { --i: 1; }
    .hp--home :is(.hp-market, .hp-values__item, .hp-steps__item, .hp-features__item, .hp-stats__item, .hp-charter__list li, .hp-support__list li):nth-child(3) { --i: 2; }
    .hp--home :is(.hp-market, .hp-values__item, .hp-steps__item, .hp-features__item, .hp-stats__item, .hp-charter__list li, .hp-support__list li):nth-child(4) { --i: 3; }
    .hp--home :is(.hp-market, .hp-values__item, .hp-steps__item, .hp-features__item, .hp-stats__item, .hp-charter__list li, .hp-support__list li):nth-child(5) { --i: 4; }
}