@import url('/static/design/portfolio_main_ressources.css'); html { overflow-y: scroll; } * { box-sizing: border-box; padding: 0; margin: 0; } :root { --img-width: 240px; --img-height: 209px; --img-padding: 20px; --nav-height: 50px; --nav-button-size: 60px; --page-ratio: 80%; /* mesh gradient colours */ --deep-blue: #425d7b; --mid-blue: #5e7893; --light-blue: #8fa3b8; --very-light: #a7b1bb; } /* NOTE: si tu voulais cibler le portant la classe .timeline, utilise body.timeline { ... } — je laisse le sélecteur d’origine */ .timeline body { display: flex; justify-content: center; flex-direction: column; align-items: center; height: 100%; overflow-x: hidden; } .timeline .header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: calc(var(--img-padding) * 4) 0 calc(var(--img-padding) * 2); } .timeline h1 { font-size: 54px; font-weight: 800; line-height: 1.2; } .flickity-viewport { overflow-x: hidden; position: relative; } .timeline { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: calc(var(--img-padding) * 5); } .timeline:before, .timeline:after { display: block; position: absolute; content: ""; background-size: auto 100%; background-position: left center; width: 12%; height: 120%; z-index: 100; } .timeline .carousel { width: var(--page-ratio); height: calc(var(--img-height) + calc(var(--img-padding) * 9)); } .timeline .carousel-cell { background: white; border-radius: 8px; width: calc(var(--img-width) + calc(var(--img-padding) * 2)); height: calc(var(--img-height) + calc(var(--img-padding) * 6)); margin: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 4px transparent, 0 8px 20px 0 rgba(0, 0, 0, 0.131); margin-top: calc(var(--img-padding) * 4); } .timeline .carousel-cell .img-wrapper { /* Background carrousel img background: var(--bs-body-bg); */ border-radius: 8px; position: relative; } .timeline .carousel-cell .img-title { border-radius: 8px; font-size: 22px; text-align: center; position: relative; padding-top: 1rem; } .timeline .carousel-cell:before, .timeline .carousel-cell:after, .timeline .carousel-cell .img-wrapper:before, .timeline .carousel-cell .img-wrapper:after { content: ""; border-radius: 50%; background-color: rgba(58, 58, 58, 0.5); box-shadow: inset 0 2px 0 rgb(0 0 0 / 20%); display: block; height: 6px; overflow: hidden; position: absolute; width: 6px; z-index: 100; } .timeline .carousel-cell:before, .timeline .carousel-cell:after { bottom: 8px; } .timeline .carousel-cell:before { left: 8px; } .timeline .carousel-cell:after { right: 8px; } .timeline .carousel-cell .img-wrapper:before, .timeline .carousel-cell .img-wrapper:after { top: -12px; } .timeline .carousel-cell .img-wrapper:before { left: -12px; } .timeline .carousel-cell .img-wrapper:after { right: -12px; } .timeline .carousel-cell .img-wrapper img { display: block; height: var(--img-height); width: var(--img-width); border-radius: 4px; position: relative; object-fit: cover; } .timeline .carousel-cell .img-wrapper img:before { position: absolute; width: 10px; height: 10px; background: var(--color-third); z-index: 100; } .timeline .carousel-cell time { text-align: center; font-size: 38px; font-weight: 800; display: flex; justify-content: center; flex-direction: column; align-items: center; line-height: 1; position: absolute; top: -68px; margin-top: 20px; } .timeline .carousel-cell > span { font-size: 26px; font-weight: 800; line-height: 1; text-align: center; position: absolute; bottom: 0; } .timeline .carousel-cell time span { font-size: 16px; font-weight: 600; } .timeline .carousel-cell.is-selected { box-shadow: 0 0 0 4px var(--color-fourth), 0 8px 20px 0 transparent, 0 0 0 4px transparent, 0 8px 20px 0 rgba(0, 0, 0, 0.2); position: relative; z-index: 0; } /* ---- previous/next buttons ---- */ .flickity-button:hover { filter: brightness(1.08); cursor: pointer; } /* === Flickity nav buttons — version unifiée et fixée === */ .flickity-prev-next-button { position: absolute; top: 50%; width: var(--nav-button-size); height: var(--nav-button-size); padding: 0; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; transform: translateY(-50%); transition: filter 0.2s ease, transform 0.2s ease; overflow: visible; /* pas de clipping du pseudo-élément circulaire */ } .flickity-prev-next-button::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, var(--deep-blue), var(--light-blue)); opacity: 0.9; pointer-events: none; transition: opacity 0.2s ease, filter 0.2s ease; } /* placement: ronds “débordants” sur les côtés */ .flickity-prev-next-button.previous { left: calc(var(--nav-button-size) * -0.5); } .flickity-prev-next-button.next { right: calc(var(--nav-button-size) * -0.5); } .flickity-prev-next-button:hover { filter: brightness(1.06); cursor: pointer; } /* icône centrée au pixel près quel que soit le viewBox du SVG */ .flickity-prev-next-button .flickity-button-icon { position: absolute; width: 40%; height: 40%; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #fff; margin: 0; /* supprime le décalage vertical */ } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 0; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 0; } .flickity-page-dots { display: none; } .timeline-desc { width: 100%; height: auto; position: relative; background-color: var(--deep-blue); line-height: 1.6; overflow: hidden; } .timeline-desc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 900px at 15% 15%, var(--mid-blue) 0%, transparent 60%), radial-gradient(1000px 800px at 80% 10%, var(--very-light) 0%, transparent 55%), radial-gradient(900px 700px at 30% 70%, var(--deep-blue) 0%, transparent 50%), radial-gradient(800px 650px at 85% 65%, var(--light-blue) 0%, transparent 45%), linear-gradient(180deg, var(--deep-blue), var(--very-light)); background-repeat: no-repeat; background-size: cover; z-index: 0; pointer-events: none; } .timeline-desc .carousel { width: 100%; position: relative; z-index: 1; } .timeline-desc .carousel-cell { width: 100%; } .timeline-desc .carousel-cell .card { width: var(--page-ratio); margin: 40px auto; padding: 0 40px 0; border-radius: 8px; height: 750px; overflow-y: scroll; position: relative; z-index: 1; overflow-x: hidden; /* transform: translateX(0%); */ } .timeline-desc .carousel-cell .card h3 { font-size: 38px; margin-bottom: calc(var(--img-padding) * 0.7); top: 0; padding-top: calc(var(--img-padding) * 2); line-height: 1; } .timeline-desc .carousel-cell .card h3:before { position: relative; content: ""; width: 100%; height: calc(var(--img-padding) * 1.5); bottom: calc(calc(var(--img-padding) * 1.5) * -1); } .timeline-desc .carousel-cell .card h4 { padding-top: calc(var(--img-padding) * 1.4); padding-bottom: calc(var(--img-padding) * 0.2); line-height: 1; } .timeline-desc .carousel-cell .card h5 { padding-bottom: calc(var(--img-padding) * 0.6); line-height: 1; } .timeline-desc .carousel-cell .card p { padding-bottom: 0.7rem; margin-bottom: 0; } p.tabbed-paragraph { padding-left: 30px; /* Tabulation value */ } .timeline-desc .flickity-button { display: none; } /* links block inside experience cards */ .timeline-desc .links-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.5rem 0; } .timeline-desc .links-container .link-item { margin: 0; } .timeline-desc .links-container .link-item a { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.5rem; border-radius: 999px; background: linear-gradient(135deg, var(--deep-blue), var(--light-blue)); color: white; text-decoration: none; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .timeline-desc .links-container .link-item a:hover, .timeline-desc .links-container .link-item a:focus { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); } .timeline-desc .links-container .link-item a:focus { outline: none; } /* Light theme */ body[data-bs-theme="light"] .timeline .carousel-cell { background-color: var(--bs-body-bg); } body[data-bs-theme="light"] .timeline .carousel-cell .img-title { color: var(--bs-body-color); } /* Dark theme */ body[data-bs-theme="dark"] .timeline .carousel-cell { background-color: var(--bs-body-bg); } body[data-bs-theme="dark"] .timeline .carousel-cell .img-title { color: var(--bs-body-color); } /* responsive nav buttons */ @media (max-width: 640px) { .flickity-prev-next-button { width: 48px; height: 48px; } .flickity-prev-next-button.previous { left: calc(48px * -0.5); } .flickity-prev-next-button.next { right: calc(48px * -0.5); } } /* décale verticalement les flèches : positif = plus bas */ :root { --nav-y-offset: 24px; /* ajuste 12/16/20/24px selon ton œil */ } /* descend les boutons prev/next */ .flickity-prev-next-button { top: calc(50% + var(--nav-y-offset)); /* avant: 50% */ transform: translateY(-50%); /* on garde le centrage relatif */ z-index: 2; /* au-dessus des cartes si besoin */ }