/* === FOND GLOBAL OBLIGATOIRE === */
html, body {
background-color: #fcfbf9; /* C'est sur cette couleur que le curseur va s'inverser pour devenir noir */
margin: 0;
}
/* === RIDEAU D'OUVERTURE DU SITE === */
.site-intro {
position: fixed;
inset: 0;
background: #EEEEEF;
z-index: 99999;
transform: translateY(0);
transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.site-intro.open {
transform: translateY(100%);
pointer-events: none;
}
/* Contenu de la page d'accueil : caché tant que le body n'a pas la classe "loaded" */
.header, .carousel-wrapper, .next-section, .footer, .gallery-wrapper,
.projets-title, .projets-grid,
.projet-header, .projet-hero, .projet-columns, .projet-gallery-grid, .voir-aussi-title, .voir-aussi-grid,
.apropos-title, .apropos-intention, .apropos-nav-list {
opacity: 0;
transition: opacity 0.9s ease;
}
body.loaded .header,
body.loaded .carousel-wrapper,
body.loaded .next-section,
body.loaded .footer,
body.loaded .gallery-wrapper,
body.loaded .projets-title,
body.loaded .projets-grid,
body.loaded .projet-header,
body.loaded .projet-hero,
body.loaded .projet-columns,
body.loaded .projet-gallery-grid,
body.loaded .voir-aussi-title,
body.loaded .voir-aussi-grid,
body.loaded .apropos-title,
body.loaded .apropos-intention,
body.loaded .apropos-nav-list {
opacity: 1;
}
/* === PAGE À PROPOS : le rideau agit comme un masque === */
/* Le contenu est déjà visible en dessous dès le départ (pas de fondu en
plus) ; seul le rideau .site-intro qui glisse par-dessus fait le travail
de révélation, pour un effet "masque qu'on retire" en un seul geste. */
body.apropos-page .header,
body.apropos-page .footer,
body.apropos-page .apropos-title,
body.apropos-page .apropos-intention,
body.apropos-page .apropos-nav-list {
opacity: 1;
transition: none;
}
/* === BASE CURSEUR (Desktop uniquement via pointer: fine) === */
@media (pointer: fine) {
body, html, a, button, .nav-item, .logo, .social-icon,
.gallery-item, .project-cover, .project-line a, .item {
cursor: none !important;
}
}
/* === STRUCTURE DU CURSEUR === */
.cursor-wrapper {
position: fixed;
top: 0;
left: 0;
pointer-events: none; /* Laisse passer les clics */
z-index: 1000000;
mix-blend-mode: difference; /* L'inversion se fait sur le parent */
will-change: transform; /* Force l'accélération matérielle (Règle le bug Safari) */
}
.custom-cursor {
width: 50px;
height: 50px;
background-color: white; /* Blanc inversé sur fond #fcfbf9 = Noir */
border-radius: 50%;
transform: scale(0.24);
transform-origin: center center;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
/* Centre le cercle pile sur la pointe de la souris */
margin: -25px 0 0 -25px;
}
/* Au survol d'un élément cliquable */
.custom-cursor.is-hovered {
transform: scale(1);
}
/* === FIX POUR LES ZONES COMPLEXES (Galerie, Carrousel, Images) === */
.cursor-wrapper.force-dark {
mix-blend-mode: normal !important;
}
.cursor-wrapper.force-dark .custom-cursor {
background-color: #000000 !important;
}
/* === FIX POUR LES ZONES SOMBRES (Lightbox, Overlays) === */
.cursor-wrapper.force-light {
mix-blend-mode: normal !important;
}
.cursor-wrapper.force-light .custom-cursor {
background-color: #ffffff !important;
}
/* === RESPONSIVE MOBILE — Désactivation totale du curseur === */
@media (max-width: 768px) {
body, html, * {
cursor: auto !important; /* Réactive le comportement tactile natif */
}
.custom-cursor {
display: none !important;
}
}
/* === HEADER === */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 110px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
box-sizing: border-box;
z-index: 5000;
font-family: 'Archivo', sans-serif;
text-transform: uppercase;
letter-spacing: 4px;
background: transparent; /* Fond transparent */
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Masqué en glissant vers le haut quand on scrolle vers le bas ; reparaît dès
qu'on remonte (voir le script de chaque page : scroll direction). */
.header.header-hidden {
transform: translateY(-100%);
pointer-events: none; /* Désactive les interactions sur le conteneur */
}
.header-inner {
position: relative;
z-index: 1; /* Couche pour le contenu du header */
display: flex;
justify-content: space-between;
width: 100%;
pointer-events: auto; /* Réactive les interactions sur le texte */
}
.logo {
font-weight: 700;
font-size: 1.9rem;
text-transform: none;
letter-spacing: 0;
pointer-events: auto;
cursor: pointer;
}
.logo .logo-symbol { font-weight: 400; font-size: 0.55em; vertical-align: text-top; }
.main-nav { font-weight: 600; display: flex; gap: 20px; align-items: center; }
.nav-item { position: relative; display: inline-block; pointer-events: auto; cursor: pointer; color: #000; transition: color 0.3s ease; }
.nav-item::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1.5px;
background: #000000;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
/* Ni changement de couleur au survol sur ordinateur (le curseur en négatif
donne déjà ce retour visuel), mais l'animation du soulignement au survol
reste. Réservé aux appareils avec un pointeur fin (souris/trackpad) : sur
tactile, il n'y a pas de survol, et ça évite un état "collé" après un tap. */
@media (pointer: fine) {
.nav-item:hover::after { transform: scaleX(1); }
}
/* === BOUTON BURGER (mobile uniquement) === */
.burger-btn {
display: none; /* activé en media query mobile */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 40px;
height: 40px;
background: none;
border: none;
padding: 0;
cursor: pointer;
pointer-events: auto;
z-index: 5500;
}
.burger-btn span {
display: block;
width: 26px;
height: 2px;
background: #000;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; }
.burger-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* === MENU MOBILE PLEIN ÉCRAN === */
/* Un seul conteneur de scroll (.mobile-menu lui-même) : on évite d'imbriquer
un second scroll (position:absolute + overflow-y:auto) à l'intérieur,
qui se comporte de façon peu fiable sur certains navigateurs mobiles
(contenu coupé sans pouvoir scroller jusqu'au bout). */
.mobile-menu {
position: fixed;
inset: 0;
background: #fcfbf9;
z-index: 15000;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.mobile-menu.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.mobile-menu-active { overflow: hidden; }
/* Croix de fermeture (toujours visible en haut à droite) */
.mobile-menu-close {
position: fixed;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
background: none;
border: none;
font-family: 'Archivo', sans-serif;
font-size: 1.5rem;
line-height: 44px;
color: #000;
cursor: pointer;
z-index: 15002;
padding: 0;
}
/* Panneau principal du menu mobile : simple bloc dans le flux normal (plus
de position absolute), avec une hauteur mini de 100% pour occuper tout
l'écran quand le contenu est court, et qui pousse .mobile-menu à scroller
naturellement dès que le contenu (ex : volet Projets ouvert) dépasse. */
.mobile-nav-main {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 100%;
justify-content: flex-start;
padding: 120px 30px 60px;
opacity: 0;
transition: opacity 0.4s ease;
}
.mobile-menu.open .mobile-nav-main {
opacity: 1;
}
/* Items du menu principal : grand texte, apparition en cascade.
L'espacement est géré par margin-bottom (pas par "gap" du parent) : le
volet Projets ci-dessous doit pouvoir avoir une hauteur de 0 sans qu'un
"gap" fixe ajoute un espace vide des deux côtés quand il est fermé. */
.mobile-nav-item {
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: clamp(2.4rem, 11vw, 4.2rem);
line-height: 1.1;
color: #1a1a1a;
text-decoration: none;
display: block;
cursor: pointer;
margin: 0 0 20px;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.mobile-nav-main > .mobile-nav-item:last-child {
margin-bottom: 0;
}
.mobile-menu.open .mobile-nav-item {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.open .mobile-nav-main > .mobile-nav-item:nth-child(1) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-nav-main > .mobile-nav-item:nth-child(2) { transition-delay: 0.36s; }
.mobile-menu.open .mobile-nav-main > .mobile-nav-item:nth-child(4) { transition-delay: 0.42s; }
.mobile-menu.open .mobile-nav-main > .mobile-nav-item:nth-child(5) { transition-delay: 0.48s; }
/* Déclencheur "PROJETS" : au lieu d'envoyer vers un écran séparé, ouvre un
volet juste en dessous (même dynamique que les volets de la page à
propos), en animant la max-height du panneau. */
/* Volet Projets (mobile) : liste des projets repliée par défaut (hauteur ET
marge à 0, pour ne laisser vraiment aucun espace), dépliée au clic sur
"PROJETS" — la marge du bas n'apparaît qu'à l'ouverture (voir règle
.open + ci-dessous), pour ne pas ajouter d'espace en trop quand c'est
fermé. */
.mobile-nav-projets-list {
max-height: 0;
margin: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 20px;
transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
margin-bottom 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.mobile-accordion-trigger.open + .mobile-nav-projets-list {
margin-bottom: 20px;
}
.mobile-project-line a {
text-decoration: none;
color: #1a1a1a;
display: block;
}
.mobile-project-line a .label {
display: block;
font-family: 'Archivo', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: clamp(1.3rem, 5.5vw, 1.9rem);
line-height: 1.2;
}
.mobile-project-line a .category {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
color: #666;
font-size: clamp(0.85rem, 3.2vw, 1.05rem);
margin-top: 2px;
}
/* FR | EN, en bas à droite du menu mobile */
.mobile-menu .mobile-lang-switcher {
position: fixed;
bottom: 30px;
right: 30px;
font-size: 1.1rem;
z-index: 15002;
}
/* === PAGE D'ACCUEIL (CARROUSEL) === */
.carousel-wrapper {
height: 85vh;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
z-index: 10;
margin-top: 110px;
}
.carousel-container { display: flex; gap: 40px; padding-left: 40px; width: max-content; }
.item {
width: 300px;
flex-shrink: 0;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: auto;
/* .item est désormais un (chaque item du carrousel pointe vers sa
page projet) : on lui retire les styles de lien par défaut. */
display: block;
text-decoration: none;
color: inherit;
}
.img { width: 100%; height: 400px; background: #dcdcdc; }
@media (pointer: fine) {
.item:hover { transform: scale(1.1); z-index: 20; position: relative; }
}
.item h2 { font-family: 'Cormorant Garamond', serif; font-size: 21px; margin-top: 15px; font-style: italic; font-weight: 500; }
.item-caption {
font-family: 'Archivo', sans-serif;
font-weight: 400;
font-size: 0.9rem;
color: #444;
margin: 6px 0 0;
/* Le texte va désormais à la ligne pour s'afficher en entier, au lieu
d'être tronqué avec des points de suspension sur une seule ligne. */
white-space: normal;
overflow-wrap: break-word;
max-width: 100%;
line-height: 1.4;
}
/* === SECTION VIOLETTE === */
.next-section {
min-height: 100vh;
background: #6B2A3D;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fcfbf9;
font-family: 'Cormorant Garamond', serif;
z-index: 10;
position: relative;
pointer-events: auto;
text-align: center;
padding: 80px 40px;
box-sizing: border-box;
}
/* Trait horizontal, toujours à distance fixe au-dessus du texte : plutôt
qu'une position absolute (qui ne bouge pas quand le texte centré verticalement
s'agrandit sur plusieurs lignes en responsive), le trait est un vrai élément
du flux flex, donc il suit naturellement la hauteur du texte. */
.next-section::before {
content: '';
display: block;
width: 80%;
height: 1px;
background: rgba(252, 251, 249, 0.5);
margin-bottom: 40px;
flex-shrink: 0;
}
/* Texte en Cormorant Garamond, avec parties en italique */
.next-section p {
font-size: clamp(2.2rem, 8vw, 9rem);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 0 10px;
line-height: 1.1;
max-width: 1400px;
}
.next-section p em {
font-style: italic;
font-family: 'Cormorant Garamond', serif;
}
/* === RÉVÉLATION AU SCROLL === */
.reveal {
opacity: 0;
transform: translateY(60px);
transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* === PAGE GRILLE PROJETS === */
.projets-title {
margin-top: 110px;
padding: 60px 40px 40px;
box-sizing: border-box;
}
.projets-title h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
font-size: 7.5rem;
letter-spacing: 2px;
margin: 0;
line-height: 1;
}
.projets-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 0 40px 80px;
box-sizing: border-box;
}
.project-cover {
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #dcdcdc;
display: block;
text-decoration: none;
cursor: pointer;
}
.project-cover-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 30px;
box-sizing: border-box;
}
@media (pointer: fine) {
.project-cover:hover .project-cover-overlay {
opacity: 1;
}
}
.project-cover-overlay h2 {
font-family: 'Archivo', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.3rem;
color: #fff;
margin: 0 0 10px;
position: relative;
display: inline-block;
}
.project-cover-overlay h2::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background: #fff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
@media (pointer: fine) {
.project-cover:hover .project-cover-overlay h2::after {
transform: scaleX(1);
}
}
.project-cover-overlay p {
font-family: 'Archivo', sans-serif;
font-weight: 400;
font-style: italic;
font-size: 0.95rem;
color: #fff;
margin: 0;
max-width: 500px;
}
/* === PAGE PROJET INDIVIDUELLE === */
.projet-header {
padding: 70px 40px 0;
box-sizing: border-box;
text-align: center;
}
.projet-header h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
text-transform: none;
font-size: 4rem;
letter-spacing: 1px;
margin: 0 auto 20px;
line-height: 1.1;
max-width: 900px;
}
.projet-line-separator {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.2);
margin-bottom: 30px;
}
.projet-intro {
font-family: 'Archivo', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto 120px;
}
.projet-hero {
background-size: cover;
background-position: center;
margin: 0;
width: 100%;
height: 100vh;
background-color: #dcdcdc;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.projet-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 0 40px;
box-sizing: border-box;
margin-bottom: 80px;
justify-items: stretch;
align-items: start;
}
.projet-columns h3 {
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.5rem;
margin: 0 0 20px;
}
.projet-columns p {
font-family: 'Archivo', sans-serif;
font-weight: 300;
font-size: 1.9rem;
line-height: 1.6;
white-space: pre-line;
margin: 0;
}
.projet-side-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* <--- AJOUTER */
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 4 / 5;
background: #dcdcdc;
margin: 0;
justify-self: stretch;
position: relative;
overflow: hidden;
}
.projet-gallery-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 0 40px;
box-sizing: border-box;
margin-bottom: 80px;
}
.projet-gallery-grid .gallery-item {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
background-size: cover; /* <--- AJOUTER s'il n'est pas hérité correctement */
background-position: center; /* <--- AJOUTER */
background-repeat: no-repeat; /* <--- AJOUTER */
display: block;
background: #dcdcdc;
position: relative;
overflow: hidden;
}
@media (pointer: fine) {
.projet-gallery-grid .gallery-item:hover {
transform: none;
z-index: auto;
}
}
.voir-aussi-title {
padding: 0 40px 40px;
box-sizing: border-box;
}
.voir-aussi-title h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
font-size: 3.8rem;
letter-spacing: 1px;
margin: 0;
}
.voir-aussi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 0 40px 80px;
margin-bottom: 40px;
box-sizing: border-box;
}
.voir-aussi-item a {
text-decoration: none;
color: inherit;
display: block;
}
.voir-aussi-item .project-cover {
margin-bottom: 15px;
}
@media (pointer: fine) {
.voir-aussi-item .project-cover:hover .project-cover-overlay {
opacity: 0;
}
}
.voir-aussi-item .project-cover img,
.voir-aussi-item .project-cover {
transition: transform 0.4s ease;
}
@media (pointer: fine) {
.voir-aussi-item a:hover .project-cover {
transform: scale(1.03);
}
}
.voir-aussi-item h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 1.6rem;
margin: 0 0 8px;
}
.voir-aussi-item p {
font-family: 'Archivo', sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: #444;
margin: 0;
}
/* === PAGE GALERIE === */
.gallery-wrapper {
margin-top: 110px;
padding: 40px 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.gallery-row {
overflow: hidden;
width: 100%;
display: flex;
}
.row-track {
display: flex;
gap: 30px;
will-change: transform;
}
.gallery-item {
height: 360px;
width: auto;
object-fit: cover;
flex-shrink: 0;
display: block;
cursor: pointer;
}
/* === VISIONNEUSE (LIGHTBOX) GALERIE === */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.lightbox.active {
opacity: 1;
pointer-events: auto;
}
.lightbox-img {
max-width: 88vw;
max-height: 88vh;
object-fit: contain;
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
transform: scale(0.96);
transition: transform 0.3s ease;
}
.lightbox.active .lightbox-img {
transform: scale(1);
}
.lightbox-close {
position: fixed;
top: 24px;
right: 32px;
width: 44px;
height: 44px;
background: transparent;
border: none;
cursor: pointer;
z-index: 20001;
}
.lightbox-close::before,
.lightbox-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 2px;
background: #fff;
}
.lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.media-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
display: block;
}
/* Bouton rond pour activer/couper le son d'une vidéo (hero, image latérale,
grille 2x2 de la page projet — voir data.js / script-projet.js) */
.media-sound-toggle {
position: absolute;
z-index: 5;
bottom: 20px;
right: 20px;
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 0.3s ease, transform 0.3s ease;
}
@media (pointer: fine) {
.media-sound-toggle:hover {
background: rgba(0, 0, 0, 0.7);
transform: scale(1.08);
}
}
.media-sound-toggle svg {
width: 20px;
height: 20px;
display: block;
}
.media-sound-toggle.is-muted .sound-wave { display: none; }
.media-sound-toggle:not(.is-muted) .sound-mute { display: none; }
/* === FOOTER VERT === */
.footer {
background: #C4F1BE;
padding: 130px 40px 0;
box-sizing: border-box;
font-family: 'Archivo', sans-serif;
color: #000;
overflow: hidden;
}
.footer-top {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: flex-start;
margin-bottom: 220px;
}
.footer-logo {
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 0;
}
.footer-logo a {
color: #000;
text-decoration: none;
}
.footer-logo .logo-symbol {
font-weight: 400;
font-size: 0.55em;
vertical-align: text-top;
}
.footer-right {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-contact-title {
text-transform: uppercase;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 12px;
}
.footer-contact a {
color: #000;
text-decoration: none;
font-weight: 400;
font-size: 1.1rem;
display: block;
}
@media (pointer: fine) {
.footer-contact a:hover {
text-decoration: underline;
}
}
.footer-contact div.footer-phone {
font-size: 1.1rem;
margin-top: 4px;
}
.footer-social {
display: flex;
gap: 15px;
align-self: flex-start;
justify-content: flex-end;
}
.footer-bottom {
width: 100%;
margin: 0 -40px;
padding: 0 15px;
line-height: 0;
}
.footer-bottom p {
font-family: 'Archivo', sans-serif;
font-weight: 700;
text-transform: uppercase;
color: #6B2A3D;
font-size: clamp(5rem, 13.5vw, 15rem);
line-height: 0.6;
margin: 0;
letter-spacing: -2px;
}
.social-icon {
width: 40px;
height: 40px;
border: 1px solid #000000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon i {
font-size: 16px;
}
@media (pointer: fine) {
.social-icon:hover {
background: #fff;
color: #000000;
}
}
/* === SÉLECTEUR DE LANGUE (intégré au menu) === */
.lang-switcher {
display: flex;
align-items: center;
gap: 6px;
pointer-events: auto;
}
.lang-sep {
color: #ccc;
}
.lang-btn {
cursor: pointer;
font-family: 'Archivo', sans-serif;
font-weight: 600;
font-size: inherit;
letter-spacing: inherit;
text-transform: uppercase;
color: #ccc;
transition: color 0.3s ease;
outline: none;
vertical-align: middle;
}
@media (pointer: fine) {
.lang-btn:hover {
color: #000;
}
}
.lang-btn.active {
color: #000;
}
/* === BANNIÈRE COOKIES === */
.cookie-banner {
position: fixed;
bottom: 20px;
left: 20px;
background: #000;
color: #fff;
padding: 10px 15px;
font-family: 'Archivo', sans-serif;
font-size: 0.8rem;
font-weight: 300;
z-index: 10000;
display: flex;
align-items: center;
gap: 8px;
pointer-events: auto;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cookie-banner .cookie-text {
margin: 0;
}
.cookie-banner .cookie-text u {
text-decoration: underline;
}
.cookie-banner .separator {
color: rgba(255, 255, 255, 0.5);
}
.cookie-banner.hidden {
display: none;
}
/* === OVERLAYS === */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #EEEEEF;
z-index: 4000;
/* Position initiale cachée */
transform: translateY(-100%);
transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
display: flex;
align-items: center;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.overlay.active {
transform: translateY(0);
pointer-events: auto;
opacity: 1;
visibility: visible;
}
#overlay-projets {
top: 0px;
bottom: auto;
height: auto;
max-height: 100vh;
align-items: flex-start;
padding-top: 110px;
padding-bottom: 50px;
box-sizing: border-box;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
overflow-y: auto;
transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s ease, visibility 0.7s ease;
}
/* === OVERLAY PROJETS - LISTE UNIQUE === */
.grid-projets {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
gap: 8px;
}
.project-line {
opacity: 0;
transition: opacity 0.35s ease;
}
/* Style des liens */
.project-line a {
text-decoration: none;
color: #1a1a1a;
font-family: 'Archivo', sans-serif;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
display: flex;
align-items: baseline;
width: 100%;
transition: color 0.3s ease;
line-height: 1.4;
position: relative;
}
/* Glyph (flèche) */
.project-line a .glyph {
font-weight: 400;
font-size: clamp(0.9rem, 1.4vw, 1.3rem);
flex-shrink: 0;
margin-right: 12px;
position: relative;
z-index: 1;
}
/* Label en majuscule (nom du projet) */
.project-line a .label {
font-size: clamp(1.1rem, 2vw, 1.8rem);
flex-shrink: 0;
white-space: nowrap;
margin-right: 16px;
position: relative;
z-index: 1;
}
/* Surlignage vert au survol, réservé au nom du projet : un bloc plein caché
derrière le texte du label, qui se déploie de gauche à droite (scaleX)
comme un coup de surligneur. */
.project-line a .label::before {
content: '';
position: absolute;
left: -6px;
right: -6px;
top: -1px;
bottom: -1px;
background: #C4F1BE;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
z-index: -1;
pointer-events: none;
}
@media (pointer: fine) {
.project-line a:hover .label::before {
transform: scaleX(1);
}
}
/* Texte entre parenthèses, poussé au bout de la ligne */
.project-line a i {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
text-transform: none;
font-size: clamp(0.8rem, 1.2vw, 1.2rem);
color: #666;
flex-shrink: 0;
margin-left: auto;
transition: color 0.3s ease;
vertical-align: text-top;
line-height: 1;
position: relative;
z-index: 1;
}
/* Le survol déclenche uniquement le surlignage vert (pas de changement de
couleur du texte) : le curseur négatif au-dessus du surlignage donne déjà
un retour visuel supplémentaire. */
/* Animation en cascade */
.overlay.active .project-line {
opacity: 1;
}
.overlay.active .project-line:nth-child(1) { transition-delay: 0.30s; }
.overlay.active .project-line:nth-child(2) { transition-delay: 0.36s; }
.overlay.active .project-line:nth-child(3) { transition-delay: 0.42s; }
.overlay.active .project-line:nth-child(4) { transition-delay: 0.48s; }
.overlay.active .project-line:nth-child(5) { transition-delay: 0.54s; }
.overlay.active .project-line:nth-child(6) { transition-delay: 0.60s; }
.overlay.active .project-line:nth-child(7) { transition-delay: 0.66s; }
.overlay.active .project-line:nth-child(8) { transition-delay: 0.72s; }
/* === PAGE À PROPOS === */
/* Titre en haut de page, centré (contrairement au titre de la page Projets) */
.apropos-title {
margin-top: 110px;
padding: 60px 40px 40px;
box-sizing: border-box;
text-align: center;
}
.apropos-title h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
font-size: 7.5rem;
letter-spacing: 2px;
margin: 0;
line-height: 1;
}
/* Section "intention" : texte énorme en noir sur fond clair, comme la citation
de l'accueil, mais développé en paragraphe complet. 3 images sans cadre
(fond transparent) sont superposées au texte et dérivent chacune à leur
propre vitesse au scroll pour créer une profondeur asymétrique. */
.apropos-intention {
position: relative;
color: #1a1a1a;
overflow: hidden;
box-sizing: border-box;
padding: 80px 0 200px;
}
.apropos-intention-inner {
position: relative;
padding: 0 40px;
box-sizing: border-box;
z-index: 1;
}
.apropos-text {
font-family: 'Archivo', sans-serif;
font-weight: 400;
letter-spacing: 0.2px;
font-size: 2.3rem;
line-height: 1.55;
text-align: left;
margin: 0;
}
/* === LISTE DE NAVIGATION (reprend la dynamique du sous-menu Projets : mêmes
classes .project-line/.glyph/.label, donc même flèche et même animation de
surlignage au survol). Fond violet sur toute la section (identique à la
citation de l'accueil), du bord à bord — le volet "Études", inséré juste
après son item, se fond directement dedans sans coupure visuelle. Chaque
item est encadré par un trait fin clair. Mêmes marges latérales (40px)
que le reste du site (pas de max-width, comme .projet-columns,
.voir-aussi-grid, etc.). */
.apropos-nav-list {
background: #6B2A3D;
color: #fcfbf9;
padding: 60px 40px 100px;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.apropos-nav-divider {
width: 100%;
height: 1px;
background: rgba(252, 251, 249, 0.2); /* gris clair sur fond violet */
}
/* .project-line est caché par défaut (opacity: 0) tant qu'il n'est pas dans
un .overlay.active — ici on force son affichage puisqu'on est en dehors
du sous-menu. */
.apropos-nav-list .project-line { opacity: 1; }
.apropos-nav-list .project-line a {
padding: 26px 0;
color: #fcfbf9;
}
.apropos-nav-list .project-line a .glyph {
/* Même ratio glyph/label que dans le sous-menu Projets (~0.75 sur le
minimum, ~0.72 sur le maximum, pente vw ajustée à l'identique). */
font-size: clamp(1.8rem, 3.5vw, 2.75rem);
margin-right: 24px;
}
.apropos-nav-list .project-line a .label {
font-size: clamp(2.2rem, 5vw, 3.8rem);
white-space: normal;
min-width: 0;
overflow-wrap: break-word;
}
/* "Centres d'intérêts" est trop long pour tenir sur une ligne à cette taille
sur mobile : plutôt que de continuer à chercher pourquoi il refuse de
passer à la ligne, on affiche simplement une version courte sur mobile
("Intérêts"), et la version complète sur desktop. */
.apropos-nav-list .project-line a .label .label-short {
display: none;
}
@media (max-width: 768px) {
.apropos-nav-list .project-line a .label .label-full {
display: none;
}
.apropos-nav-list .project-line a .label .label-short {
display: inline;
}
}
/* Sur fond violet, le texte blanc devient illisible une fois le surlignage
vert déployé derrière le label : on le fait donc passer en violet (même
couleur que le fond) le temps du survol, pour garder un bon contraste.
Uniquement sur pointeur fin : sur tactile il n'y a pas de survol donc pas
de surlignage à compenser. */
@media (pointer: fine) {
.apropos-nav-list .project-line a:hover .label {
color: #6B2A3D;
}
}
/* Flèche du déclencheur "Études" : part à l'horizontale (pointant vers la
droite) et pivote jusqu'à sa position naturelle (en diagonale, comme les
3 autres flèches) une fois le volet ouvert. */
.apropos-accordion-trigger .glyph {
display: inline-block;
transform: rotate(-45deg);
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.apropos-accordion-trigger.open .glyph {
transform: rotate(0deg);
}
/* === VOLETS ÉTUDES / EXPÉRIENCES : accordéons === */
/* Insérés directement après leur item (voir HTML) : le panneau s'ouvre/se
ferme en animant sa max-height, comme un tiroir qui se déplie. Le fond
violet et le texte blanc viennent directement de .apropos-nav-list. */
.apropos-accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Grille UNIQUE et partagée par les 3 lignes de chaque volet (au lieu d'une
grille par ligne) : les colonnes restent ainsi parfaitement alignées
d'une étape à l'autre. 6 pistes en %, dont 2 pistes "vides" qui servent
uniquement d'espacement, pour positionner les dates quasiment au centre
(45%-55%) et le texte à partir de 70% — sans les décalages qu'un
column-gap créerait avec des pistes en %. Ordre d'affichage décroissant
(3, 2, 1 : le plus récent en premier — voir HTML). */
.apropos-accordion-inner {
padding: 30px 0 50px;
box-sizing: border-box;
display: grid;
grid-template-columns: 8% 28% 9% 10% 15% 30%;
row-gap: 50px;
align-items: start;
}
/* Toutes les colonnes d'une même ligne partagent la même line-height, pour
que leur texte parte du même niveau visuel (sans ça, le "demi-interligne"
propre à chaque taille de police décale les textes les uns par rapport
aux autres même si le haut de leur boîte est, lui, bien aligné). */
.accordion-entry-number,
.accordion-entry-titles h3,
.accordion-entry-date,
.accordion-entry-caption {
line-height: 1.2;
}
.accordion-entry-number {
grid-column: 1;
width: 60px;
height: 60px;
border: 1px solid rgba(252, 251, 249, 0.55);
border-radius: 50%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Archivo', sans-serif;
font-weight: 500;
font-size: 1.3rem;
/* Le rendu italique de Cormorant Garamond n'était pas optiquement centré
dans le cercle ; un chiffre droit en Archivo se centre proprement. */
}
.accordion-entry-titles {
grid-column: 2;
text-align: left;
padding-left: 14px;
}
.accordion-entry-titles h3 {
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.4rem;
margin: 0;
}
.accordion-entry-date {
grid-column: 4;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
opacity: 0.7;
font-size: 1.1rem;
}
.accordion-entry-note,
.accordion-entry-subtitle {
font-family: 'Archivo', sans-serif;
font-weight: 300;
font-size: 0.95rem;
letter-spacing: 0.3px;
opacity: 0.85;
margin: 6px 0 0;
line-height: 1.3;
}
.accordion-entry-caption {
grid-column: 6;
font-family: 'Archivo', sans-serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
/* === VOLET COMPÉTENCES : 4 colonnes === */
/* Mise en page indépendante de la grille à 6 pistes des autres volets.
grid-auto-flow: column + 2 lignes (auto / 1fr) : les 4 titres (h3) et les
4 blocs de contenu, listés dans cet ordre en HTML, remplissent la grille
colonne par colonne — chaque colonne reçoit donc automatiquement son
titre en ligne 1 et son contenu en ligne 2. La ligne 1 prend la hauteur
du plus grand titre, donc le contenu démarre à la même hauteur partout,
même si un titre passe sur 2 lignes.
Les largeurs de colonnes ne sont PAS égales (repeat(4, 1fr)) : réparties
à parts égales, "Savoir-faire" (contenu long) se retrouvait à l'étroit
pendant que "Permis B" (vide) gardait un espace inutilisé. On donne donc
à chaque colonne un poids proportionnel à la quantité de contenu qu'elle
porte réellement, plutôt qu'à la seule largeur de son titre. */
.apropos-competences-grid {
display: grid;
grid-template-columns: 1fr 1.9fr 1.3fr 0.7fr;
grid-template-rows: auto 1fr;
grid-auto-flow: column;
column-gap: 30px;
row-gap: 18px;
padding: 30px 40px 60px;
box-sizing: border-box;
}
.apropos-competences-grid h3 {
font-family: 'Archivo', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.4rem;
line-height: 1.2;
margin: 0;
align-self: start;
}
.competence-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.competence-content p {
font-family: 'Archivo', sans-serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
/* === VOLET CENTRES D'INTÉRÊTS : 3 colonnes === */
.apropos-interests-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 30px;
padding: 30px 40px 60px;
box-sizing: border-box;
}
.apropos-interests-grid p {
font-family: 'Archivo', sans-serif;
font-weight: 300;
font-size: 1.2rem;
line-height: 1.6;
margin: 0;
}
/* ==========================================================================
RESPONSIVE — TABLETTE (≤ 1024px)
========================================================================== */
@media (max-width: 1024px) {
.footer-bottom p { font-size: clamp(4rem, 12vw, 10rem); }
.projet-header h1 { font-size: 5.5rem; }
.projets-title h1 { font-size: 5.5rem; }
.apropos-title h1 { font-size: 5.5rem; }
.apropos-text { font-size: 1.7rem; max-width: 100%; }
.apropos-nav-list { padding: 50px 30px 80px; }
.apropos-accordion-inner { padding: 20px 0 40px; row-gap: 44px; }
.apropos-competences-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: none;
grid-auto-flow: row;
row-gap: 24px;
padding: 30px 30px 50px;
}
.apropos-interests-grid { grid-template-columns: repeat(3, 1fr); padding: 30px 30px 50px; }
}
/* ==========================================================================
RESPONSIVE — MOBILE (≤ 768px)
========================================================================== */
/* La grille Projets ne révélait titre/description qu'au survol : sur tout
appareil sans survol (tactile, quelle que soit la taille d'écran), on
l'affiche en permanence pour ne pas perdre cette information. */
@media (hover: none) {
#projets-grid .project-cover-overlay {
opacity: 1;
}
}
@media (max-width: 768px) {
body { cursor: auto; }
.custom-cursor { display: none; }
.header {
height: 80px;
padding: 0 20px;
letter-spacing: 1.5px;
}
.header-inner { flex-wrap: nowrap; }
.logo { font-size: 1.2rem; }
.main-nav { display: none; }
.burger-btn { display: flex; }
.carousel-wrapper { height: 60vh; margin-top: 80px; }
.carousel-container { gap: 20px; padding-left: 20px; }
.item { width: 200px; }
.img { height: 260px; }
.item h2 { font-size: 17px; }
.item-caption { font-size: 0.8rem; }
.next-section { padding: 0 20px; }
.next-section p { letter-spacing: 1px; }
.next-section::before { margin-bottom: 24px; }
.projets-grid,
.projet-gallery-grid,
.voir-aussi-grid,
.projet-columns {
grid-template-columns: 1fr;
padding: 0 20px;
gap: 24px;
}
.projets-title, .projet-header { padding-left: 20px; padding-right: 20px; }
.projets-title h1 { font-size: 3.2rem; }
.projet-header h1 { font-size: 2.4rem; letter-spacing: 0.5px; }
.projet-intro { font-size: 1.05rem; }
.projet-hero { height: 55vh; }
.projet-columns p { font-size: 1.2rem; }
.projet-side-image { aspect-ratio: 16 / 9; margin-top: 20px; }
.voir-aussi-title { padding: 0 20px 30px; }
.voir-aussi-title h2 { font-size: 2.2rem; }
.gallery-wrapper { margin-top: 80px; padding: 20px 0; gap: 16px; }
.gallery-item { height: 220px; }
.media-sound-toggle { width: 34px; height: 34px; bottom: 12px; right: 12px; }
.media-sound-toggle svg { width: 16px; height: 16px; }
.footer { padding: 60px 20px 0; }
.footer-top {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 80px;
}
.footer-right {
grid-template-columns: 1fr;
gap: 24px;
}
.footer-social { justify-content: flex-start; }
.footer-bottom { margin: 0 -20px; padding: 0 10px; }
.footer-bottom p { font-size: clamp(3rem, 16vw, 7rem); letter-spacing: -1px; }
#overlay-projets { top: 80px; padding-top: 30px; height: 55vh; }
.grid-projets { padding: 0 20px; }
.project-line a { font-size: 1.3rem; }
.project-line a .glyph { font-size: 1.1rem; }
.project-line a i { font-size: 1rem; }
.apropos-title { margin-top: 80px; padding: 40px 20px 20px; }
.apropos-title h1 { font-size: 2.8rem; }
.apropos-intention { padding: 40px 0 120px; }
.apropos-intention-inner { padding: 0 20px; }
.apropos-text { font-size: 1.2rem; letter-spacing: 0; max-width: 100%; }
.apropos-nav-list { padding: 30px 20px 60px; }
.apropos-accordion-inner {
padding: 16px 0 40px;
grid-template-columns: 1fr;
row-gap: 10px;
}
.accordion-entry-number { grid-column: 1; font-size: 1.1rem; width: 44px; height: 44px; margin-bottom: 4px; }
.accordion-entry-titles { grid-column: 1; padding-left: 0; }
.accordion-entry-titles h3 { font-size: 1.1rem; }
.accordion-entry-date { grid-column: 1; margin-bottom: 4px; }
.accordion-entry-caption { grid-column: 1; font-size: 1.05rem; margin-bottom: 30px; }
.apropos-competences-grid {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
row-gap: 10px;
padding: 20px 20px 40px;
}
.apropos-competences-grid h3:not(:first-child) {
margin-top: 20px;
}
.apropos-interests-grid { grid-template-columns: 1fr; row-gap: 24px; padding: 20px 20px 40px; }
.cookie-banner {
left: 12px;
right: 12px;
bottom: 60px;
font-size: 0.7rem;
flex-wrap: wrap;
padding: 8px 12px;
}
}
/* ==========================================================================
RESPONSIVE — PETIT MOBILE (≤ 420px)
========================================================================== */
@media (max-width: 420px) {
.main-nav { font-size: 0.65rem; gap: 6px; }
.logo { font-size: 1rem; }
.item { width: 160px; }
.img { height: 210px; }
.projets-title h1 { font-size: 2.4rem; }
.projet-header h1 { font-size: 2rem; }
.apropos-title h1 { font-size: 2.2rem; }
.apropos-text { font-size: 1.15rem; }
.footer-bottom p { font-size: clamp(2.4rem, 15vw, 5rem); }
}