/*
 * Hugo Vidéo — Site Web
 * © 2025 Hugo Mandon — Tous droits réservés
 * Version 1.1.0 — Décembre 2025
 * hugovideo.netlify.app
 */
 
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-teal); border-radius: var(--border-radius); transition: all 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

@font-face { font-family: 'Jost'; src: url('typo/Jost-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('typo/Jost-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('typo/Jost-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }

:root { 
    --bg-primary: #001A1A; --accent-cyan: #00FFFF; --text-white: #FFFFFF; --border-teal: #005E5E;
    --title-size: clamp(1.875rem, 2.148vw, 82.5px); --subtitle-size: clamp(1.125rem, 1.172vw, 45px);
    --paragraph-size: clamp(0.9rem, 0.977vw, 37.5px); --small-text-size: clamp(0.675rem, 0.300vw, 27px);
    --border-effect: clamp(2px, 1vw, 60px); --border-width: clamp(0.1px, 0.0006944vw, 10px);
    --border-radius: clamp(5px, 0.4vw, 50px); --line-length: clamp(10px, 10vw, 1000px);
    --padding-weight: clamp(20px, 2vw, 100px); --padding-height: clamp(10px, 2vh, 100px);
    --padding-large-weight: clamp(30px, 4vw, 100px); --padding-large-height: clamp(10px, 4vh, 100px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; background-color: var(--bg-primary); color: var(--text-white); font-weight: 200; line-height: 1.3; overflow-x: hidden; background-image: url('images/arriereplangrille_hugovideo.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
button { font-family: 'Jost', sans-serif; cursor: pointer; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
img { max-width: 100%; display: block; }
.container { margin: 0 0; padding: 0 var(--padding-large-weight); }

#header { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0, 26, 26, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; border-bottom: var(--border-width) solid var(--accent-cyan); }
.header-container { margin: 0 auto; padding: 0 var(--padding-large-weight); height: clamp(30px, 3.646vw, 70px); display: flex; justify-content: space-between; align-items: center; }
.header-logo { height: clamp(20px, 1.823vw, 70px); width: auto; transition: transform 0.3s ease; }
.header-logo:hover { transform: scale(1.05); }
#header nav { display: flex; gap: var(--padding-large-weight); }
#header nav a { font-size: var(--paragraph-size); font-weight: 200; text-transform: uppercase; position: relative; transition: color 0.3s ease; }
#header nav a::after { content: ''; position: absolute; bottom: clamp(-1px, -0.5vw, -50px); left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 100%; height: var(--border-width); background-color: var(--accent-cyan); transition: transform 0.3s ease; }
#header nav a:hover { color: var(--accent-cyan); }
#header nav a:hover::after { transform: translateX(-50%) scaleX(1); }

.menu-toggle { display: none; background: none; border: none; color: var(--text-white); font-size: clamp(30px, 1.823vh, 70px); z-index: 1001; transition: color 0.3s ease; padding: 0; line-height: 1; align-items: center; justify-content: center; }
.menu-toggle .material-symbols-outlined { font-size: clamp(5px, 5.469vh, 130px); display: none; }

.hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-images-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transform: scale(1.1); transition: opacity 0.3s ease, transform 0.3s ease; }
.hero-image.active { opacity: 1; transform: scale(1); }
.hero-copyright { display: flex; flex-wrap: nowrap; position: absolute; bottom: var(--padding-large-height); left: var(--padding-large-weight); z-index: 3; color: var(--text-white); font-size: var(--paragraph-size); opacity: 0; transition: opacity 0.3s ease; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.hero-copyright.visible { opacity: 1; }
.hero-content { position: relative; z-index: 2; text-align: center; opacity: 1; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; }
.hero-logo { width: auto; height: 40vh; }
.scroll-indicator { position: absolute; bottom: var(--padding-large-height); left: 50%; transform: translateX(-50%); z-index: 4; cursor: pointer; animation: bounce 2s infinite; }
.scroll-arrow { width: clamp(30px, 1.563vw, 60px); height: clamp(30px, 1.563vw, 60px); background-color: transparent; border-left: var(--border-width) solid var(--accent-cyan); border-bottom: var(--border-width) solid var(--accent-cyan); transform: rotate(-45deg); }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-20px); } 60% { transform: translateX(-50%) translateY(-10px); } }

.content-block { padding: var(--padding-weight); margin: var(--padding-large-weight) auto; border: var(--border-width) solid var(--border-teal); border-radius: var(--border-radius); box-shadow: 0 0 var(--border-effect) var(--border-teal); max-width: 1000px; background-color: var(--bg-primary); }
.main-title { font-size: var(--title-size); font-weight: 900; text-transform: uppercase; letter-spacing: 0em; margin-bottom: var(--padding-height); color: var(--accent-cyan); text-align: center; }
.title-line { width: var(--line-length); height: var(--border-width); margin: 0 auto; background-color: var(--accent-cyan); margin-bottom: var(--padding-large-height); }
.presentation-section p { font-size: var(--paragraph-size); font-weight: 200; margin-bottom: calc(var(--padding-height)/2); text-align: justify; }
.presentation-section p:last-child { margin-bottom: 0; }
.highlight { font-weight: 400; }
.presentation-section { padding: 0 0; }
.philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding-weight); }
.philosophy-title { font-size: var(--paragraph-size); font-weight: 400; text-transform: uppercase; margin-bottom: calc(var(--padding-height)/2); color: var(--text-white); letter-spacing: 0; }

.portfolio-section { padding-top: var(--padding-large-weight); margin: var(--padding-large-weight) auto; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--padding-large-weight); margin: var(--padding-large-weight) auto; max-width: 1000px; }
.portfolio-item { display: block; padding: 0; border: var(--border-width) solid var(--border-teal); border-radius: var(--border-radius); box-shadow: 0 0 var(--border-effect) var(--border-teal); background-color: var(--bg-primary); }
.portfolio-image-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); }
.portfolio-image { width: 100%; height: 100%; object-fit: cover; }
.portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 26, 26, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.view-more { font-size: var(--paragraph-size); font-weight: 200; text-transform: uppercase; color: var(--accent-cyan); letter-spacing: 0em; position: relative; }
.view-more::after { content: ''; position: absolute; bottom: clamp(-1px, -0.5vw, -50px); left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 100%; height: var(--border-width); background-color: var(--accent-cyan); transition: transform 0.3s ease; }
.portfolio-item:hover .view-more::after { transform: translateX(-50%) scaleX(1); }
.portfolio-title { font-size: var(--subtitle-size); font-weight: 200; letter-spacing: 0em; text-align: center; padding: var(--padding-height); }

.button-wrapper { text-align: center; }
.button { display: inline-block; background-color: var(--bg-primary); font-size: var(--subtitle-size); font-weight: 200; text-transform: uppercase; color: var(--accent-cyan); padding: var(--padding-height); border: var(--border-width) solid var(--border-teal); border-radius: var(--border-radius); letter-spacing: 0em; box-shadow: 0 0 var(--border-effect) var(--border-teal); transition: all 0.3s ease; }
.button:hover { background-color: var(--accent-cyan); color: var(--bg-primary); border: var(--border-width) solid var(--accent-cyan); box-shadow: 0 0 var(--border-effect) var(--accent-cyan); }

.contact-section { padding-top: var(--padding-large-weight); margin: var(--padding-large-weight) auto; }
.contact-intro { text-align: center; margin: 0 auto var(--padding-large-height) auto; max-width: 1000px; }
.contact-intro p { font-size: var(--subtitle-size); font-weight: 200; text-transform: uppercase; letter-spacing: 0em; color: var(--text-white); }
.contact-form { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--padding-height); }
.hidden { display: none; }
.form-group { display: flex; flex-direction: column; gap: calc(var(--padding-height) / 2); }
.form-group label { font-size: var(--paragraph-size); font-weight: 200; color: var(--text-white); text-transform: uppercase; letter-spacing: 0em; }
.form-group input, .form-group textarea { width: 100%; padding: var(--padding-height); font-family: 'Jost', sans-serif; font-size: var(--paragraph-size); font-weight: 200; color: var(--text-white); background-color: var(--bg-primary); border: var(--border-width) solid var(--border-teal); border-radius: var(--border-radius); box-shadow: 0 0 var(--border-effect) var(--border-teal); transition: all 0.3s ease; outline: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent-cyan); box-shadow: 0 0 var(--border-effect) var(--accent-cyan); }
.form-group textarea { resize: none; min-height: 200px; }
.form-group input:-webkit-autofill, .form-group input:-webkit-autofill:hover, .form-group input:-webkit-autofill:focus, .form-group input:-webkit-autofill:active, .form-group textarea:-webkit-autofill, .form-group textarea:-webkit-autofill:hover, .form-group textarea:-webkit-autofill:focus, .form-group textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset !important; -webkit-text-fill-color: var(--text-white) !important; border: var(--border-width) solid var(--border-teal) !important; box-shadow: 0 0 var(--border-effect) var(--border-teal) !important; transition: background-color 5000s ease-in-out 0s; }
.submit-button-wrapper { margin-top: var(--padding-weight); margin-bottom: var(--padding-large-weight); }
.submit-button:active { transform: translateY(0); }
.submit-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.success-message { text-align: center; padding: var(--padding-height); background-color: rgba(0, 255, 255, 0.1); border: var(--border-width) solid var(--accent-cyan); border-radius: var(--border-radius); box-shadow: 0 0 var(--border-effect) var(--accent-cyan); margin-top: var(--padding-height); animation: fadeInSlideUp 0.3s ease; }
.success-message p { font-size: var(--paragraph-size); font-weight: 200; color: var(--accent-cyan); margin: 0; }

@keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.success-message.fade-out { animation: fadeOut 0.3s ease forwards; }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }

.pages-section { margin: calc(clamp(30px, 3.646vw, 70px) + var(--padding-large-weight)) auto; }
.pages-content { max-width: 1000px; margin: 0 auto; }
.pages-subtitle { font-size: var(--subtitle-size); font-weight: 200; text-transform: uppercase; color: var(--text-white); margin-top: var(--padding-large-height); margin-bottom: var(--padding-height); letter-spacing: 0; }
.pages-text { margin-top: var(--padding-large-weight); margin-bottom: var(--padding-large-weight); }
.pages-text p { font-size: var(--paragraph-size); font-weight: 200; margin-bottom: calc(var(--padding-height)/2); text-align: justify; }
.pages-text p:last-child { margin-bottom: 0; }

.project-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-large-weight); align-items: start; margin-bottom: var(--padding-large-weight); margin-top: var(--padding-large-weight); }
.project-info-box { display: flex; flex-direction: column; gap: var(--padding-height); padding: var(--padding-weight); border: var(--border-width) solid var(--border-teal); border-radius: var(--border-radius); box-shadow: 0 0 var(--border-effect) var(--border-teal); background-color: var(--bg-primary); height: 100%; }
.project-info-item { display: flex; flex-direction: column; gap: calc(var(--padding-height) / 2); }
.project-info-label { font-size: var(--paragraph-size); font-weight: 400; text-transform: uppercase; color: var(--text-white); letter-spacing: 0; }
.project-info-value { font-size: var(--paragraph-size); font-weight: 200; color: var(--text-white); }
.project-cover-wrapper { position: relative; width: 100%; height: 100%; border-radius: var(--border-radius); border: var(--border-width) solid var(--border-teal); box-shadow: 0 0 var(--border-effect) var(--border-teal); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.project-cover-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--project-image); background-size: cover; background-position: center; filter: blur(15px); -webkit-filter: blur(15px); transform: scale(1.1); z-index: 1; }
.project-cover-image { position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.project-section { margin-bottom: var(--padding-large-weight); margin-top: var(--padding-large-weight); }
.project-section-title { font-size: var(--subtitle-size); font-weight: 200; text-transform: uppercase; color: var(--accent-cyan); margin-top: var(--padding-large-height); margin-bottom: var(--padding-height); letter-spacing: 0; }
.project-section-text p { font-size: var(--paragraph-size); font-weight: 200; margin-bottom: calc(var(--padding-height) / 2); text-align: justify; }
.project-section-text p:last-child { margin-bottom: 0; }
.video-grid { display: grid; gap: var(--padding-weight); }
.video-grid-2 { grid-template-columns: repeat(2, 1fr); }
.video-grid-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: var(--padding-height); }
.video-container { display: flex; flex-direction: column; gap: calc(var(--padding-height) / 2); }
.video-label { font-size: var(--paragraph-size); font-weight: 200; text-transform: uppercase; color: var(--text-white); letter-spacing: 0; text-align: center; }
.video-series-label { font-size: var(--paragraph-size); font-weight: 200; text-transform: uppercase; color: var(--text-white); letter-spacing: 0; text-align: center; margin-top: var(--padding-large-height); margin-bottom: var(--padding-height); }
.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: var(--border-radius); overflow: hidden; border: var(--border-width) solid var(--border-teal); box-shadow: 0 0 var(--border-effect) var(--border-teal); background-color: var(--bg-primary); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#footer { background-color: var(--bg-primary); border-top: var(--border-width) solid var(--accent-cyan); padding: var(--padding-large-height) 0; }
.footer-container { margin: 0 auto; padding: 0 var(--padding-large-weight); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding-large-weight); align-items: start; }
.footer-left { display: flex; justify-content: flex-start; }
.social-links { display: grid; grid-template-columns: repeat(2, auto); gap: var(--padding-height) var(--padding-weight); }
.social-links a { display: flex; align-items: center; gap: calc(var(--padding-height) / 2); font-size: var(--paragraph-size); font-weight: 200; text-transform: none; transition: color 0.3s ease; }
.social-text { position: relative; }
.social-text::after { content: ''; position: absolute; bottom: clamp(-1px, -0.5vw, -50px); left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 100%; height: var(--border-width); background-color: var(--accent-cyan); transition: transform 0.3s ease; }
.social-links a:hover { color: var(--accent-cyan); }
.social-links a:hover .social-text::after { transform: translateX(-50%) scaleX(1); }
.social-icon { width: var(--paragraph-size); height: var(--paragraph-size); transition: filter 0s ease; flex-shrink: 0; }
.social-links a:hover .social-icon { filter: brightness(0) saturate(100%) invert(79%) sepia(93%) saturate(3077%) hue-rotate(144deg) brightness(104%) contrast(106%); }
.footer-center { display: flex; align-items: start; justify-content: center; }
.footer-logo { width: auto; object-fit: contain; transition: transform 0.3s ease; }
.footer-logo:hover { transform: scale(1.05); }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: var(--padding-height); text-align: right; }
.contact-info, .legales-info { display: flex; flex-direction: column; gap: var(--padding-height); }
.contact-info p, .legales-info p { font-size: var(--paragraph-size); font-weight: 200; margin: 0; }
.contact-info a, .legales-info a { transition: color 0.3s ease; }
.link-text { position: relative; }
.link-text::after { content: ''; position: absolute; bottom: clamp(-1px, -0.5vw, -50px); left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 100%; height: var(--border-width); background-color: var(--accent-cyan); transition: transform 0.3s ease; }
.contact-info a:hover, .legales-info a:hover { color: var(--accent-cyan); }
.contact-info a:hover .link-text::after, .legales-info a:hover .link-text::after { transform: translateX(-50%) scaleX(1); }
.footer-copyright { font-size: var(--paragraph-size); font-weight: 200; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 800px) {
    body { background-image: url('images/arriereplangrillevertical_hugovideo.png'); }
    .header-container { height: clamp(10px, 10.938vh, 150px); }
    .header-logo { height: clamp(5px, 5.469vh, 130px); }
    .menu-toggle { display: flex; }
    .menu-toggle .material-symbols-outlined { display: block; }
    .header-logo:hover { transform: none; }
    #header nav a::after { display: none; }
    #header nav a:hover { color: var(--text-white); }
    #header nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-primary); flex-direction: column; justify-content: center; align-items: center; gap: var(--padding-large-height); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    #header nav.active { opacity: 1; visibility: visible; }
    #header nav a { font-size: var(--subtitle-size); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; }
    #header nav.active a { opacity: 1; transform: translateY(0); }
    #header nav.active a:nth-child(1) { transition-delay: 0.1s; }
    #header nav.active a:nth-child(2) { transition-delay: 0.2s; }
    #header nav.active a:nth-child(3) { transition-delay: 0.3s; }
    .menu-toggle:hover { color: var(--text-white); }
    .hero-logo { width: auto; height: 40vw; }
    .hero-copyright { flex-direction: column; gap: 0;}
    .scroll-indicator { bottom: calc(2*var(--padding-large-height)); }
    .philosophy-grid { grid-template-columns: 1fr; gap: var(--padding-height); }
    .philosophy-title { text-transform: uppercase; margin-bottom: 0; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-item:hover .portfolio-overlay { opacity: 0; }
    .portfolio-item:hover .view-more::after { transform: translateX(-50%) scaleX(0); }
    .view-more::after { display: none; }
    .button:hover { background-color: var(--bg-primary); color: var(--accent-cyan); border: var(--border-width) solid var(--border-teal); box-shadow: 0 0 var(--border-effect) var(--border-teal); }
    ::-webkit-scrollbar-thumb:hover { background: var(--border-teal); }
    .pages-section { margin: calc(clamp(10px, 10.938vh, 150px) + var(--padding-large-weight)) auto; }
    .project-header-grid { grid-template-columns: 1fr; }
    .project-cover-wrapper { order: -1; }
    .video-grid-2, .video-grid-5 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr; gap: var(--padding-large-height); align-items: center; }
    .footer-left { justify-content: center; order: 1; }
    .social-links { gap: calc(0.5*var(--padding-height)) var(--padding-large-height); }
    .social-links a:hover { color: var(--text-white); }
    .social-links a:hover .social-text::after { transform: translateX(-50%) scaleX(0); }
    .social-links a:hover .social-icon { filter: none; }
    .social-text::after { display: none; }
    .footer-right { justify-content: center; align-items: center; text-align: center; gap: calc(0.5*var(--padding-height)); order: 2; }
    .contact-info, .legales-info { gap: calc(0.5*var(--padding-height)); }
    .contact-info a:hover, .legales-info a:hover { color: var(--text-white); }
    .contact-info a:hover .link-text::after, .legales-info a:hover .link-text::after { transform: translateX(-50%) scaleX(0); }
    .link-text::after { display: none; }
    .footer-center { order: 3; width: 100%; align-items: center; }
    .footer-logo { width: auto !important; height: 40vw !important; margin: var(--padding-large-height) auto; display: block; }
    .footer-logo:hover { transform: none; }
}