/* Feuille propre au site, posee PAR-DESSUS Bootstrap. Volontairement courte : tout ce que Bootstrap sait faire est laisse a Bootstrap. On ne redefinit ici que ce qui releve de l'identite du site, et on passe par ses variables CSS pour que le mode sombre suive tout seul. */ :root { --pf-hero-bg: var(--bs-tertiary-bg); } /* Revele au defilement. L'etat initial n'est applique QUE si JavaScript est actif (classe posee sur par site.js) : sans cette precaution, un visiteur sans JavaScript verrait une page entierement vide. */ .js [data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity .5s ease, transform .5s ease; } .js [data-reveal].est-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal].est-visible { opacity: 1; transform: none; transition: none; } } .hero { background: var(--pf-hero-bg); } .carte-projet { transition: transform .2s ease, box-shadow .2s ease; } .carte-projet:hover { transform: translateY(-.25rem); } /* Ratio fixe pour les visuels : sans lui, la grille sursaute pendant le chargement des images, qui n'ont pas toutes les memes proportions. */ .visuel-projet { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .niveau-competence { width: .5rem; height: .5rem; border-radius: 50%; background-color: var(--bs-border-color); display: inline-block; } .niveau-competence.est-acquis { background-color: var(--bs-emphasis-color); } /* --- Bandeau des technologies ------------------------------------------- */ .techno-carte { transition: transform .2s ease; } .techno-carte:hover { transform: translateY(-.2rem); } /* Hauteur fixe : les logos n'ont pas tous les memes proportions, et sans elle la rangee monte et descend d'une carte a l'autre. */ .techno-logo { height: 3rem; width: auto; max-width: 100%; object-fit: contain; } .techno-logo-vide { width: 3rem; border-radius: 50%; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 1.25rem; } /* Bande a defilement. Le defilement natif fait le travail : pas de position calculee en JavaScript, donc rien a resynchroniser au redimensionnement. */ .bande-piste { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .25rem 1rem; /* Masque la barre de defilement sans empecher le geste. */ scrollbar-width: none; } .bande-piste::-webkit-scrollbar { display: none; } .bande-piste > * { flex: 0 0 auto; width: 9rem; scroll-snap-align: start; } .bande-fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--bs-border-color); background-color: var(--bs-body-bg); color: var(--bs-emphasis-color); font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .bande-fleche:hover { background-color: var(--bs-secondary-bg); } @media (prefers-reduced-motion: reduce) { .bande-piste { scroll-behavior: auto; } .techno-carte { transition: none; } }