.pt-serif-regular { font-family: "PT Serif", serif; font-weight: 400; font-style: normal; } :root{ --bg:#0f0f0f; /* Couleur de texte plus lisible sur fond sombre / image */ --text:#f3f4f6; /* blanc-gris neutre et doux pour un contraste élevé */ --muted:#cfd2d6; /* gris clair pour labels et éléments secondaires */ --line:#2a2a2a; --accent:#d8ff55; --maxw:1200px; --g: clamp(12px, 2.2vw, 28px); /* === Fond du site + parallaxe (valeur par défaut pour tout le site) === */ /* Maintenant : image/background-qoi-1.png utilisée par défaut (avec parallaxe) */ --site-bg-image: url("image/background-qoi-1.png"); --site-bg-color: #0e0e10; --site-bg-zoom: 1.2; /* Variables attendues par le JS de parallaxe */ --site-bg-amp-scroll: 4; --site-bg-amp-mouse-x: 6; --site-bg-amp-mouse-y: 2; /* Variables dynamiques écrites par le JS */ --site-bg-offset-x: 0px; --site-bg-offset-y: 0px; } *{box-sizing:border-box} html,body{height:100%} /* Défilement doux natif */ html{ scroll-behavior: smooth; background-color: var(--site-bg-color); } body{ margin:0; font-family: "BauerBodoniStd", Bodoni, "Bodoni MT", Didot, "Times New Roman", Times, serif; color:var(--text); background: transparent; line-height:1.6; text-align: justify; position: relative; overflow-x: clip; } /* === Fond du site en pseudo-élément fixe (avec bleed anti-bandes) === */ body::before{ content:""; position: fixed; inset: -12vh; z-index: -1; background-image: var(--site-bg-image); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-color: var(--site-bg-color); transform: translate3d(var(--site-bg-offset-x), var(--site-bg-offset-y), 0) scale(var(--site-bg-zoom)); transform-origin: center center; will-change: transform; } /* Accessibilité: fige l’effet si demandé */ @media (prefers-reduced-motion: reduce){ body::before{ transform: scale(var(--site-bg-zoom)); } } /* Sécurité sur ratios extrêmes */ @media (max-aspect-ratio: 9/16), (min-aspect-ratio: 21/9){ body::before{ inset: -14vh; } } /* --- OVERRIDE : page sans parallaxe --- Pour désactiver l'élément pseudo-background et utiliser une image de fond simple (sans parallaxe), ajoute data-parallax="off" sur la balise . Exemple: ... */ body[data-parallax="off"]::before{ display: none !important; content: none !important; } body[data-parallax="off"]{ /* image spécifique à la page (ici booking.html utilise fond-qoi-shows-2.png) */ background-image: url("image/fond-qoi-shows-2.png"); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: scroll; background-color: var(--site-bg-color); } /* Header / Nav (si utilisé ailleurs) */ .site-header{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(14px, 3vw, 40px); border-bottom: none; background: transparent; } /* Marque (logo) */ .brand{ color:var(--text); text-decoration:none; display:inline-flex; align-items:center; position:relative; min-height: clamp(68px, 8vw, 96px); } .brand::before{ content:""; display:block; width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); background: url("image/LOGO-QOI-gold.png") no-repeat 50% 50% / contain; } .brand-mark{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; overflow: hidden; } .site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:20px} .site-nav a{ color:var(--muted); text-decoration:none !important; padding:4px 2px; position:relative; } .site-nav a:is(:hover,:focus){color:var(--text)} .site-nav a.is-active{color:var(--text)} .site-nav a.is-active::after, .site-nav a:hover::after, .site-nav a::after{ content: none !important; } /* APPLIQUER “Bodoni Moda SC” UNIQUEMENT AUX TITRES D’ONGLETS NAV */ .site-nav a{ font-family: "Bodoni Moda SC", ui-serif, Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: .02em; text-transform: none; } .burger{ display:none; background:none; border:0; width:40px; height:40px; padding:0; cursor:pointer; } .burger span{display:block; height:2px; background:var(--text); margin:7px; transition:transform .2s} /* Layout */ #content{max-width:var(--maxw); margin:0 auto; padding: clamp(20px, 3vw, 48px)} .hero-intro h1{margin:0 0 8px 0; font-size:clamp(28px, 5vw, 56px)} .hero-intro p{color:var(--muted)} /* =========================== SPACES: une image par ligne (desktop et mobile) =========================== */ .projects-grid{ display:grid; grid-template-columns: 1fr; /* 1 colonne partout */ gap: var(--g); margin-top: 0; } .project-card{ grid-column: 1 / -1; } /* (on supprime les règles qui forçaient 2 colonnes ou 3-12) */ /* Cartes Projects: sans bordure et sans zoom au survol */ .project-figure{ margin:0; overflow:hidden; border-radius:10px; background:#111; position:relative; border: none; } .project-figure img{ width:100%; height: clamp(260px, 48vw, 720px); object-fit:cover; display:block; transform:none; transition: filter .4s ease; filter:saturate(0.92) contrast(1.05); } .project-figure figcaption{ position:absolute; left:16px; bottom:14px; right:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.35); } .project-figure h2{font-size:clamp(16px, 2.4vw, 28px); margin:0} .project-figure span{font-size:14px; color:#eee; opacity:.9} .project-link:is(:hover,:focus) img{ transform:none; filter:saturate(0.92) contrast(1.05); } /* Project detail (inchangé) */ .project-header h1{font-size:clamp(26px, 4vw, 46px); margin:.2em 0} .project-meta{color:var(--muted)} .project-hero img{ width:100%; height:clamp(320px, 45vw, 720px); object-fit:cover; border-radius:12px; border:1px solid var(--line); } .project-info{ display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:var(--g); margin-top:var(--g); } .project-info h2, .project-info h3{margin:.2em 0} .project-gallery{ margin-top:calc(var(--g) * 1.2); display:grid; gap:var(--g); grid-template-columns: repeat(12, 1fr); } .project-gallery figure{margin:0} .project-gallery img{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line); } .project-gallery figure:nth-child(odd){grid-column: span 7} .project-gallery figure:nth-child(even){grid-column: span 5} @media (max-width:900px){ .project-info{grid-template-columns:1fr; gap:calc(var(--g) * .8)} .project-gallery figure{grid-column: span 12} } /* =========================== Titres de section - SPACES =========================== */ .section-title{ font-family: "Bodoni Moda SC", ui-serif, Georgia, "Times New Roman", serif; font-weight: 500; margin: 0; letter-spacing: .02em; } .spaces-title{ font-size: clamp(18px, 3.2vw, 28px); /* plus petit que le h1 par défaut */ } /* =========================== ABOUT: largeur du texte - Desktop: 50% - Mobile: 75% =========================== */ .about-body{ width: 50%; margin-inline: auto; /* centrer */ } @media (max-width:900px){ .about-body{ width: 75%; } } /* About (structures existantes) */ .about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--g); margin-top:8px; } .about-lists{ display:grid; grid-template-columns:1fr 1fr; gap:var(--g); margin-top:var(--g); } .columns{columns:2; gap:16px; padding-left:18px} @media (max-width:900px){ .about-grid, .about-lists{grid-template-columns:1fr} .columns{columns:1} } /* Contact */ .contact-form{max-width:680px} .field{margin-bottom:16px} label{display:block; margin-bottom:6px; color:var(--muted)} input, textarea{ width:100%; padding:12px 14px; background:#121212; color:var(--text); border:1px solid var(--line); border-radius:8px; outline:none; } input:focus, input:focus-visible, textarea:focus, textarea:focus-visible{ border-color:#dfc880; box-shadow:0 0 0 3px color-mix(in oklab, #dfc880 30%, transparent); } .error{color:#ff9aa2; min-height:1em; display:block} .actions{ display:flex; align-items:center; gap:12px; justify-content:center; } .button{ appearance:none; border:1px solid var(--line); background:#171717; color:whitesmoke; padding:10px 16px; border-radius:999px; cursor:pointer; transition:transform .06s ease, background .2s; text-decoration:none; } .button:hover{background:#1f1f1f} .button:active, .button:focus, .button:focus-visible{ border-color:#dfc880; box-shadow:0 0 0 3px color-mix(in oklab, #dfc880 30%, transparent); outline:none; } /* Footer */ .site-footer{ padding:20px clamp(14px, 3vw, 40px); display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); } .site-footer .small{font-size:12px} /* =========================== NAVIGATION - Mobile ≤760px : menu burger (inchangé) - Desktop ≥761px : nav verticale fixe en haut à droite =========================== */ /* Mobile nav */ @media (max-width:760px){ .burger{display:block} .site-header{ justify-content:space-between; } .site-nav{ position:fixed; inset:100px 12px auto 12px; background-color: rgba(100, 100, 100, 0.1); backdrop-filter: blur(3px) brightness(90%) contrast(110%); border:4px solid var(--line); border-radius:10px; padding:0px; display:none; z-index:40;} .site-nav.open{display:block} .site-nav ul{flex-direction:column; gap:8px} .site-nav a{padding:10px 12px; display:block; border-radius:8px} .site-nav a:hover{background:#d2b567} } /* Desktop : nav verticale en haut à droite */ @media (min-width:761px){ .site-header{ justify-content:flex-start; } .site-nav{ position: fixed; top: 14px; right: clamp(14px, 3vw, 40px); background: transparent; border: 0; padding: 0; display: block; z-index: 40; pointer-events: auto; } .site-nav ul{ flex-direction: column; gap: 6px; align-items: flex-end; } .site-nav a{ display: block; padding: 6px 0; text-align: right; } .burger{ display:none; } } /* ----- Layout: footer collé en bas ----- */ html, body { height:auto; } @supports (height: 100dvh) { body{ min-height:100dvh; } } @supports not (height: 100dvh) { body{ min-height:100svh; } } @supports not (height: 100svh) { body{ min-height:100vh; } } body{ display:flex; flex-direction:column; } #content{ flex:1; } /* ----- Thème clair ----- */ :root{ /* valeurs “dark” par défaut conservées */ } body[data-theme="light"]{ --bg:#ffffff; --text:#0f0f0f; --muted:#666666; --line:#e6e6e6; --accent:#0f0f0f; color:var(--text); background: transparent; } body[data-theme="light"] .site-header{ background: color-mix(in oklab, var(--bg) 92%, #ffffff 8%); border-bottom:1px solid var(--line); } body[data-theme="light"] .brand, body[data-theme="light"] .site-nav a{ color:var(--muted); } body[data-theme="light"] .site-nav a.is-active, body[data-theme="light"] .site-nav a:is(:hover,:focus){ color:var(--text); } body[data-theme="light"] .burger span{ background:var(--text); } /* =========================== Cartes projets carrées et propres (structures communes) =========================== */ .project-figure{ position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.5 / 0.98; display: block; background: transparent; } @supports not (aspect-ratio: 1 / 1){ .project-figure{ height: 0; padding-top: 100%; } .project-figure > img, .project-figure > figcaption{ position: absolute; inset: 0; } } .project-figure img{ width: 100%; height: 100%; object-fit: cover; display: block; } .project-figure.tone::after{ display: none; } .project-figure figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; color: inherit; mix-blend-mode: normal; pointer-events: none; } /* ---- Styles spécifiques au splash vidéo (duplication utile si CSS global chargé) ---- */ .cover-link{ position: fixed; inset: 0; display: grid; place-items: center; text-decoration: none; z-index: 2; } .overlay{ display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.05)); } .hero-logo{ width: clamp(140px, 26vw, 360px); height: auto; display: block; pointer-events: none; user-select: none; } .overlay-caption{ margin: 0; color: #dfc880; font-family: "BauerBodoniStd", Bodoni, "Bodoni MT", Didot, "Times New Roman", Times, serif; font-size: clamp(16px, 2.4vw, 28px); letter-spacing: .02em; line-height: 1.2; pointer-events: none; } .bg-video{ position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; object-position: center; z-index: 1; pointer-events: none; background: #000; } .mot-flou { /* Style par défaut (optionnel) */ cursor: pointer; /* Pour indiquer qu'il est survolable */ } .mot-flou:hover { filter: blur(1px); /* Ajustez la valeur pour plus ou moins de flou */ -webkit-filter: blur(2px); /* Pour la compatibilité avec certains navigateurs, notamment Safari */ } /* === HERO CENTRÉ (BOOKING + QOI PRODUCTION) === */ /* Section qui contient les images — centrée verticalement en tenant compte du header */ .center-images{ width:50%; /* on réduit la hauteur pour tenir compte du header sticky (utilise --header-height) */ min-height: calc(100vh - var(--header-height)); display:flex; align-items:center; justify-content:center; padding: 24px 20px; box-sizing:border-box; pointer-events:auto; } /* wrapper pour aligner côte à côte / empiler sur mobile */ .center-images__wrap{ display:flex; align-items:center; justify-content:center; gap: var(--center-gap); flex-wrap:wrap; width:100%; max-width: calc((var(--center-image-max-width) * 2 * var(--center-wide-multiplier)) + var(--center-gap)); margin-inline:auto; } /* chaque item : un lien (wrap de l'image) */ .center-images__item{ position:relative; display:inline-block; border-radius:8px; overflow:visible; text-decoration:none; -webkit-tap-highlight-color: transparent; transition: transform .22s ease; } /* pseudo-overlay (assombrit au hover) - pas de contour */ .center-images__item::after{ content:""; position:absolute; inset:0; border-radius:8px; background: rgba(0,0,0,0); /* invisible par défaut */ pointer-events:none; transition: background .22s ease; } /* image responsive: taille moyenne par défaut et rétrécit grâce au clamp */ .center-images__img{ display:block; width: clamp(var(--center-image-min-width), 36vw, var(--center-image-max-width)); max-width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55)); transition: transform .22s ease, filter .22s ease; -webkit-user-drag:none; user-select:none; } /* hover / focus : léger déplacement + overlay (sans contour visible) */ .center-images__item:hover, .center-images__item:focus{ transform: translateY(-6px) scale(1.02); outline: none; } .center-images__item:hover::after, .center-images__item:focus::after{ background: rgba(0,0,0,0); /* léger assombrissement */ } /* IMAGE WIDE : la deuxième image est visuellement plus large */ .center-images__item--wide .center-images__img{ width: 175%; } /* limitation sur très grands écrans */ @media (min-width:1400px){ .center-images__item--wide .center-images__img{ max-width: calc(var(--center-image-max-width) * var(--center-wide-multiplier)); } } /* Responsive : empile verticalement sur petits écrans et réduit tailles */ @media (max-width:720px){ :root{ --center-gap: 20px; } .center-images__wrap{ flex-direction: column; gap:20px; max-width:92vw; } .center-images__img{ width: clamp(140px, 46vw, 420px); } .center-images__item--wide .center-images__img{ width: clamp(160px, 52vw, 460px); } } /* Très petit écran */ @media (max-width:360px){ .center-images__img{ width: clamp(120px, 56vw, 340px); } .center-images__item--wide .center-images__img{ width: clamp(130px, 60vw, 360px); } } /* Accessibilité: focus visible */ .center-images__item:focus-visible{ outline: 3px solid rgba(223,200,128,0.18); outline-offset: 4px; border-radius:8px; } /* =========================== Styes vidéo / bleed — s'assurer qu'elles prennent toute la largeur horizontale (inchangé : elles utilisent 100vw + margin negative pour full-bleed) =========================== */ .video-bleed, .image-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: clamp(16px, 4vw, 40px); margin-bottom: 0; aspect-ratio: 16 / 10; background: #000; overflow: hidden; } /* Les médias à l'intérieur gardent width:100% et height:108% (comme avant) pour couvrir la zone */ .video-bleed video, .image-bleed img { width: 100%; height: 108%; display: block; object-fit: cover; object-position: center center; } .video-bleed, .image-bleed-2 { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: clamp(16px, 4vw, 40px); margin-bottom: 0; aspect-ratio: 16 / 21; background: #000; overflow: hidden; } /* Flèches de navigation */ .nav-arrow { position: fixed; bottom: 2rem; font-size: 2.5rem; color: white; text-decoration: none; z-index: 1000; opacity: 0.8; transition: opacity 0.3s ease; } .nav-arrow:hover { opacity: 1; } .left-arrow { left: 2rem; } .right-arrow { right: 2rem; } /* Animation des titres au survol */ .project-figure { position: relative; overflow: hidden; } /* Overlay du titre */ .project-title-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; background: none !important; /* Supprime tout fond résiduel */ } .project-title { font-family: 'BauerBodoni', serif !important; /* Police personnalisée */ font-size: 4rem !important; font-weight: 400 !important; color: white; text-transform: uppercase; letter-spacing: 2px; text-align: center; filter: blur(5px); opacity: 0; transition: all 1s ease; line-height: 0.8; /* Réduit l'espacement entre les lignes */ transform: scaleY(1.5); /* Étire verticalement (1.8 = 180% de la hauteur normale) */ width: 90%; margin: 0 auto; word-break: break-word; /* Permet les retours à la ligne */ } /* Classe supplémentaire pour cibler précisément */ .big-title { font-size: 6rem !important; /* Redondant pour forcer */ } /* Debug : bordure rouge autour des titres (à enlever après) */ .project-title-overlay { outline: 1px solid red; /* Pour voir la zone cliquable */ } /* Style des images */ .project-img { width: 100%; height: auto; transition: filter 1s ease, opacity 1s ease; } /* ---------- POLICES ---------- */ @font-face { font-family: 'BauerBodoni'; src: url('fonts/BauerBodoniStd-Roman.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Surcharge spécifique pour la page contact.html */ body.contact-page { background-image: url('image/background-contact.png') !important; background-size: cover !important; background-attachment: fixed !important; }