@charset "utf-8";
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box }/*
html { scroll-behavior: smooth }*/
html, body 						{ margin: 0 }

body    						{ font-family: var(--font-text); font-size: 13px; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }

/* HEADER COMMUN */
header                          { font-family: var(--font-titles); width: 93.5%; z-index: 1000; padding: 10px 100px; display: flex; align-items: center }

/* COLONNE GAUCHE : largeur et position communes (logo, pied, sélecteur de langue) */
:root { --col-w: 100px; --col-left: 0 }

/* HOME : langues à gauche, nav à droite */
header.header-home  			{ position: absolute; top: 0; left: 0; width: 100%; justify-content: space-between }
header.header-home a  			{ color: #FFF }
header.header-home a:hover, header.header-home a.active		{ color: #000 }
/* PAGES INTÉRIEURES : nav à droite, place pour le logo fixe */
header.header-nav               { justify-content: flex-end; backdrop-filter: blur(10px); padding: 10px 0 10px 1vw }
header.header-nav a  			{ color: #AAA }
header.header-nav a:hover, header.header-nav a.active		{ color: #000 }

/* LOGO FIXE VERTICAL - pages intérieures uniquement */
.header-logo 					{ position: fixed; left: var(--col-left); top: 50vh; transform: translateY(-50%); z-index: 1000; width: var(--col-w) }
.header-logo a                  { display: block; transition: transform 0.3s ease }
.header-logo img    			{ height: 50px; width: 110px; transform: rotate(-90deg); transform-origin: center center; margin-left: calc((var(--col-w) - 110px) / 2) }
.header-pied					{ position: fixed; left: var(--col-left); width: var(--col-w); bottom: 3.3vh; z-index: 1000; text-align: center; font-size: 0.8em; letter-spacing: 1px; text-transform: uppercase }
.header-pied a                  { color: #666 }
.header-pied a:hover            { color: #333 }

/* LANGUAGE SELECTOR */
.language-selector              { display: flex; gap: 2px; align-items: center; color: #FFF }
.header-nav .language-selector  { color: #999 }
.language-selector a            { color: #999; text-decoration: none; font-size: 0.70rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; padding: 5px 0 }
header .language-selector       { flex: 0 0 var(--col-w); width: var(--col-w); justify-content: center }

@media (max-width: 1400px){
header                          { width: 100%; padding: 10px 20px }
header.header-nav               { padding: 10px 20px }
}

@media (min-width: 951px) {
header.header-home,
header.header-nav                       { width: 93.5%; padding-right: 0; padding-left: var(--col-left) }
header.header-nav .language-selector    { flex: 0 0 var(--col-w); width: var(--col-w); justify-content: center }
}

/* NAVIGATION */
nav                             { flex: 1; display: flex; justify-content: flex-end; align-items: center }
.nav-links                      { display: flex; gap: 40px; list-style: none }
.nav-links a                    { color: #999; text-decoration: none; letter-spacing: 3px; font-weight: 500; text-transform: uppercase; transition: all 0.3s ease; padding-bottom: 5px; border-bottom: 2px solid transparent }
.nav-links a:hover, .nav-links a.active		{ color: #333 }

.nav-logo						{ display: none; visibility: hidden }
.menu                			{ display: none; visibility: hidden }
#nav_mobi 						{ display: none; visibility: hidden }

/* RESPONSIVE */
@media (max-width: 950px) {
header                      	{ padding: 20px; flex-direction: row; gap: 15px; justify-content: space-between; align-items: center }
.header-logo              	 	{ display: none; visibility: hidden }
.header-pied               		{ display: none; visibility: hidden }
nav                         	{ display: none; visibility: hidden }
.language-selector 				{ gap: 0 }
.header-nav               		{ position: fixed; top: 0; left: 0; z-index: 1000; background: #FFF; backdrop-filter: none }
.header-nav .nav-logo           { display: flex; visibility: visible; flex: 1; justify-content: center }
.header-nav .nav-logo img		{ width: 80px; height: auto }
button.menu 					{ -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; cursor: pointer; }
.menu                			{ display: flex; visibility: visible; align-items: center }
.menu i                			{ font-size: 1.8rem; color: #666; padding-right: 30px; cursor: pointer }
header.header-home .menu i 		{ color: #FFF }
header.header-home a:hover		{ border-bottom: none }
	
#nav_mobi 						{ display: block; visibility: visible; height: 100%; width: 0; position: fixed; z-index: 1100; top: 0; left: 0; background-color: #000; overflow-x: hidden; transition: 0.5s }
#nav_mobi ul 					{ list-style: none; margin: 0; padding: 0; text-align: center }
.sidenav i						{ color: #FFF }
.sidenav:hover i				{ color: #FFF }
.sidenav .logo					{ background-color: #000; text-align: center; padding: 5% 0 3% }
.sidenav .logo img				{ width: 120px; height: auto; padding: 10px 0 20px }
.sidenav .close a				{ display: block; text-align: right; font-size: 50px; color: #FFF; padding: 10px 15px 0 0  }	
.sidenav a						{ display: block; width: 100%; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; -webkit-transition: all .25s ease-in; transition: all .25s ease-in }
.sidenav a						{ color: #D1D2D3; padding: .800rem }
.sidenav a.small				{ font-size: 12px; padding: .500rem }
.sidenav a:hover, .sidenav a:focus	{ color: #FFF; font-weight: bold }
}

main    						{ min-height: 100vh; padding-left: var(--col-w) }
@media (max-width: 950px){
main    						{ padding-left: 0; padding-top: 63px }
}

.contenu						{ width: 1200px; margin: auto }
.contenu-min					{ min-height: 450px }
.filet 							{ width: 10%; max-width: 100px; height: 1px; margin: 0 4% }
.contenu .accroche 				{ text-align: center; margin: 0 10%; text-transform: none }
.contenu h2						{ font-size: 24px; margin-bottom: 20px; padding-top: 5px; color: #656360; font-weight: 400; text-transform:none }
.contenu h3						{ font-size: 16px; line-height: 24px; color: #827F7B; font-weight: 400; text-transform:none }
.contenu h4						{ font-size: 20px; line-height: 24px; color: #827F7B; font-weight: 400; text-transform:none }

@media (max-width: 1200px){
.contenu						{ width: 100% }
.contenu .accroche 				{ margin: 0 5% }
}

@media (max-width: 800px){
.contenu .accroche h2			{ font-size: 20px }
.contenu .accroche h3			{ font-size: 14px; text-align: justify}
.contenu h2						{ font-size: 20px; margin-bottom: 10px }
}

h1,	.titreH1					{ font-family: var(--font-titles); font-size: 1.6rem; text-align: center; margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase }
h1 span, .titreH1 span			{ display: inline; font-weight: 300; color: #999 }

@media (max-width: 950px){ 
h1, .titreH1 					{ font-size: 1.2rem }
h1.gauche						{ padding-left: 20px }
h2								{ font-size: 1.3em }	
}

/* HOME */
body.home						{ overflow: hidden }

.hero-container     			{ position: relative; width: 100%; height: 100svh; display: flex; align-items: center; justify-content: center; cursor: none }
.hero-background 				{ position: absolute; inset: 0; z-index: 1; overflow: hidden }
.hero-slide						{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease }
.hero-slide.active				{ opacity: 1 }
.hero-overlay 					{ position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); z-index: 2 }
.hero-content 					{ position: relative; z-index: 3; text-align: center; color: #FFF; padding: 20px; max-width: 800px }
.hero-description 				{ margin: 0; font-size: 0.7rem; font-weight: 300; line-height: 1.4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); letter-spacing: 1px; text-transform: uppercase }
h1.hero-logo 					{ margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.hero-logo img 					{ width: 250px; height: auto; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) }
.hero-zone-left, .hero-zone-right { position: absolute; top: 0; width: 45%; height: 100%; z-index: 10 }
.hero-zone-left  				{ left: 0; cursor: w-resize }
.hero-zone-right 				{ right: 0; cursor: e-resize }

@media (max-width: 768px) {
.hero-description 				{ font-size: 0.9rem }
.hero-zone-left, .hero-zone-right { display: none }
}

/* À PROPOS */
.section 						{ max-width: 1200px; margin: 0 auto 40px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; min-height: 400px; column-gap: 60px }
.section h1 					{ font-family: var(--font-titles); font-size: 1rem; font-weight: 400; color: #333; margin-bottom: 20px; padding: 0 25px; text-transform: uppercase; letter-spacing: 2px; text-align: left }
.section h2 					{ font-family: var(--font-titles); font-size: 1rem; font-weight: 400; color: #333; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px }
.section p 						{ font-size: 0.95rem; color: #555; line-height: 1.2em; margin-bottom: 15px }
.section-content 				{ grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-start }
.section-icon					{ margin-top: 3% }
.section-icon img 				{ width: 30px; height: auto }
.section-photo 					{ grid-column: 2; grid-row: 1 / 3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center }
.section:first-of-type .section-photo { max-height: 550px }
.section-photo img 				{ width: 100%; height: 100%; object-fit: cover }
.complementary-services			{ font-size: 0.7rem; color: #888; letter-spacing: 1.5px; text-transform: uppercase; padding: 20px 0; line-height: 1.3em }

.section.reverse 				{ grid-template-rows: 1fr; align-items: start }
.section.reverse .section-content { grid-column: 2; grid-row: 1 }
.section-form 					{ grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding: 0 25px }
.section-form .captcha-infos	{ color: #DDD; font-size: 0.7em }
.section-form .captcha-infos a, .section-form .captcha-infos a:hover	{ color: #AAA }

.about-slides-wrapper 			{ position: relative; width: 100%; height: 100% }
.about-slide					{ position: absolute; inset: 0; transform: translateX(100%) }
.about-slide.active				{ transform: translateX(0) }
.about-zone-left, .about-zone-right { position: absolute; top: 0; width: 50%; height: 100%; z-index: 10 }
.about-zone-left				{ left: 0; cursor: w-resize }
.about-zone-right				{ right: 0; cursor: e-resize }

@media (max-width: 950px) {
.section                    	{ display: flex; flex-direction: column; min-height: auto }
.section h2 					{ padding: 0 15px 0 25px }
.section-content h2				{ padding: 0 15px 0 0 }
.section-photo              	{ order: 2; height: 300px; margin-left: -20px; margin-right: -15px; width: calc(100% + 20px) }
.section-content            	{ order: 3; padding: 20px 25px; width: 100%; margin: 0 auto; text-align: justify }
.section-icon					{ margin-top: 0 }
.about-slides-wrapper       	{ position: absolute; inset: 0 }
.section.reverse .section-content { order: 1; padding: 0 25px }
.section-form					{ order: 2 }
.section.reverse p 				{ margin: 0 0 5px }
}
@media (max-width: 768px) {
.about-zone-left, .about-zone-right { display: none }
}

/* FORMULAIRE CONTACT */
.form-group 					{ margin-bottom: 20px }
.form-group input,
.form-group textarea 			{ width: 100%; padding: 12px 15px; border: 1px solid #DDD; font-size: 0.95rem; font-family: inherit; transition: border-color 0.3s ease; background: #FFF }
.form-group input:focus,
.form-group textarea:focus 		{ outline: none; border-color: #333 }
.form-group textarea 			{ resize: vertical; min-height: 100px }

.captcha-submit-wrapper 		{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px }
.btn-submit 					{ background: #333; color: #FFF; width: 50px; height: 50px; border: none; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 auto }
.btn-submit:hover 				{ background: #555; transform: scale(1.1) }
.grecaptcha-badge 				{ visibility: hidden !important }

@media (max-width: 768px) {
.captcha-submit-wrapper 		{ grid-template-columns: 1fr; gap: 15px }
}

/* PROJETS */
.gallery-grid					{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 }
.gallery-item					{ position: relative; overflow: hidden; aspect-ratio: 1 / 1; transition: opacity 0.3s ease }
.gallery-item a					{ display: block; width: 100%; height: 100% }
.gallery-item img				{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease }
.gallery-item:hover				{ opacity: 0.9 }
.gallery-item:hover img			{ transform: scale(1.05) }
.gallery-item .overlay			{ position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 15px; padding-bottom: 10% }
.gallery-item:hover .overlay 	{ opacity: 1 }
.gallery-item .plus-icon 		{ width: 45px; height: 45px; background: rgba(255,255,255,0.9); color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transform: scale(0.8); transition: transform 0.3s ease }
.gallery-item:hover .plus-icon 	{ transform: scale(1) }
.image-title            		{ width: 100%; color: #FFF; font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 6px 12px; margin-top: 10px }
.image-title h2.titre 			{ margin: 0; font-size: 0.85rem; font-weight: normal; letter-spacing: normal; white-space: nowrap; text-transform: lowercase; overflow: hidden; text-overflow: ellipsis }

@media (hover: none) {
.gallery-item .overlay			{ opacity: 1; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%); gap: 0; padding-bottom: 10px }
.gallery-item .plus-icon		{ position: absolute; top: 20px; left: calc(50% - 14px); width: 28px; height: 28px; font-size: 0.8rem; transform: none }
.image-title					{ margin-top: 0; padding: 0 8px; font-size: 0.75rem; letter-spacing: 1px }
.image-title .client			{ font-weight: 600 }
.image-title h2.titre			{ display: none }
}

@media (max-width: 1024px) { 
.gallery-grid 					{ grid-template-columns: repeat(3, 1fr) } 
}

@media (max-width: 768px) { 
.gallery-grid 					{ grid-template-columns: repeat(2, 1fr) } 
}

/* PROJET (détail) */
body.projet						{ overflow: hidden; background: #000 }
.project-viewer 				{ position: fixed; inset: 0; z-index: 1 }
.detail-images 					{ position: absolute; inset: 0; overflow: hidden; z-index: 5 }
.detail-slides-wrapper 			{ display: flex; height: 100%; will-change: transform; opacity: 0; transition: opacity 0.3s ease }
.detail-slides-wrapper.ready 	{ opacity: 1 }	/* affiché dès que la première photo est prête */
.detail-slide 					{ flex-shrink: 0; height: 100% }
.detail-slide img 				{ width: auto; height: 100%; object-fit: cover; display: block }
.detail-zone-left, .detail-zone-right { position: absolute; top: 0; width: 45%; height: 100%; z-index: 6 }
.detail-zone-left  				{ left: 0; cursor: w-resize }
.detail-zone-right 				{ right: 0; cursor: e-resize }

.next-project-zone 				{ position: absolute; top: 0; left: 0; width: 100px; height: 100%; z-index: 100; color: #FFF; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-family: var(--font-titles); padding: 40px 0; gap: 20px }
.next-project-zone i 			{ font-size: 18px; cursor: pointer; color: #FFF; font-style: normal; transition: transform 0.2s ease, opacity 0.2s ease }
.next-project-zone i:hover 		{ transform: scale(1.2); opacity: 0.7 }

.project-info 					{ width: 100%; text-align: center; padding: 0 3px }
.project-info h1				{ font-size: 0.75rem; font-weight: inherit; letter-spacing: 1px; text-align: center; margin: 5px 0 }
.project-info p 				{ font-size: 0.75rem; letter-spacing: 1px; margin: 5px 0 }
.project-info .project-date		{ font-size: 9px; text-transform: uppercase; letter-spacing: 1px }

.logo-wrapper 					{ display: flex; align-items: center; justify-content: center; flex-grow: 1; width: 100%; overflow: hidden }
.logo-wrapper img 				{ height: 45px; width: auto; transform: rotate(-90deg) }

.close-btn 						{ position: fixed; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.5); color: #FFF; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center }
.close-btn:hover            	{ background: rgba(0,0,0,0.3) }

@media (max-width: 768px) {
.detail-zone-left, .detail-zone-right { display: none }
}

@media (max-width: 600px) {
.next-project-zone 				{ top: auto; bottom: 0; width: 100%; height: auto; padding: 12px 0; gap: 10px }
.next-project-zone .chevrons-mobi { order: 4; display: flex; gap: 60px; align-items: center; margin: 2% }
.next-project-zone i 			{ font-size: 1.5rem }
.logo-wrapper 					{ order: 1; flex-grow: 0 }
.logo-wrapper img 				{ height: 24px; transform: none }	/* logo horizontal en mobile */
.project-info 					{ order: 3 }
.project-info h1, .project-info p 				{ font-size: 0.8rem }
}

/* MENTIONS LÉGALES */
.legal 							{ padding: 0 4% 40px; max-width: 1400px; margin: 0 auto }

.legal .infos 					{ display: grid; grid-template-columns: 280px 1fr 120px; gap: 30px; align-items: start; line-height: 1.6 }

.legal .infosdetail 			{ border-right: 1px solid #666; padding-right: 30px; font-size: 0.9rem; color: #666; text-align: right }
.legal .infosdetail h2 			{ font-family: var(--font-titles); padding-bottom: 5px; margin: 30px 0 10px; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: #333 }
.legal .infosdetail h2:first-child { margin-top: 0 }
.legal .infosdetail a 			{ color: #666; text-decoration: none; transition: color 0.3s ease }
.legal .infosdetail a:hover 	{ color: #000 }

.legal .infostexte 				{ padding: 0 20px; text-align: left }
.legal .infostexte h2 			{ font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; margin-bottom: 30px; color: #333 }
.legal .infostexte h3 			{ font-size: 1.1rem; font-weight: 500; margin: 30px 0 15px; color: #333 }
.legal .infostexte p 			{ font-size: 0.95rem; margin-bottom: 15px; color: #555; line-height: 1.8; text-align: justify }
.legal .infostexte .centre 		{ text-align: center; margin: 30px 0; padding: 20px; background: rgba(0, 0, 0, 0.03); border-radius: 8px }
.legal .infostexte .minus 		{ font-size: 0.85rem; color: #666; text-decoration: none; transition: color 0.3s ease }
.legal .infostexte .minus:hover { color: #000 }
.legal .infostexte a 			{ color: #333; text-decoration: underline }
.legal .infostexte a:hover 		{ color: #000 }

.legal .photo 					{ text-align: center; padding-top: 20px; opacity: 0; animation: fadeInLeft 0.8s ease-out 0.5s forwards }
.legal .photo img 				{ width: 40px; height: auto; transition: opacity 0.3s ease }

@media (max-width: 1000px) {
.legal .infos 					{ grid-template-columns: 220px 1fr }
.legal .photo 					{ display: none }
}

@media (max-width: 600px) {
.legal 							{ padding: 40px 5% }
.legal .infos 					{ grid-template-columns: 1fr }
.legal .infosdetail 			{ margin-right: 10%; padding-right: 40px }
.legal .infostexte 				{ width: 90%; margin: 5% auto; padding: 0  }
.legal .infostexte p 			{ text-align: left }
}

.legal-reglement 				{ text-align: justify; font-size: 12px; line-height: 1.1em }

.grpd 						{ padding: 0 6% 40px; max-width: 1400px; margin: 0 auto }
.grpd h1 					{ font-size: 2rem; text-align: center; margin-bottom: 40px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase }
.grpd-intro 				{ max-width: 900px; margin: 0 auto 20px; text-align: justify; font-size: 1.1em; line-height: 1.1em; color: #333 }
.grpd-intro p 				{ margin-bottom: 20px }

.grpd-blocs 				{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 40px }
.grpd-bloc 					{ background-color: #F9F9F9; border-left: 2px solid #333; padding: 30px 25px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column }
.grpd-bloc:hover 			{ transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) }
.grpd-icone 				{ margin-bottom: 10px }
.grpd-icone img 			{ width: 10px; height: auto }
.grpd h2 					{ font-family: var(--font-titles); margin: 0; font-size: 1.1em; color: #333; font-weight: 500; letter-spacing: 1px }
.grpd-bloc p 				{ margin-bottom: 10px; color: #555; text-align: justify }
.grpd-bloc .centre 			{ text-align: center; margin-top: 15px; padding: 15px; background: rgba(0, 0, 0, 0.03); border-radius: 8px }
.grpd-bloc a 				{ color: #333; text-decoration: underline; transition: color 0.3s ease }
.grpd-bloc a:hover 			{ color: #000 }

@media (max-width: 768px) {
.grpd 						{ padding: 40px 5% }
.grpd h1 					{ font-size: 1.5rem }
.grpd-intro 				{ padding: 0 2% }
.grpd-blocs 				{ grid-template-columns: 1fr; gap: 20px }
.grpd-icone img 			{ width: 40px }
.grpd h2 					{ font-size: 1.1rem }
}

@media (max-width: 600px) {
.grpd-intro 				{ font-size: 0.9rem }
.grpd-bloc 					{ padding: 20px 15px }
}

.grpd-legal						{ margin-top: 5%; font-size: 12px; line-height: 1.1em; text-align: justify }

footer 							{ padding: 10px 40px 20px }
.footer-content 				{ display: flex; justify-content: space-between }
.footer-left 					{ flex: 1; display: flex; justify-content: center; font-size: 0.75rem; letter-spacing: 2px }
.footer-left a:hover 			{ padding-right: 10px }
.footer-right 					{ flex: 1; display: flex; justify-content: center }
.social-icon 					{ font-size: 1.7rem; transition: color 0.3s ease; margin: 0 10px; vertical-align: middle }
.icon-svg 						{ width: 0.875em; height: 1em }

footer.home						{ position: fixed; bottom: 0; width: 100%; z-index: 900 }
footer.home .footer-content 		{ align-items: center }
footer.home .footer-content a		{ color: #FFF }
footer.home .footer-content a:hover	{ color: #000 }
footer.home .footer-left 			{ font-size: 0.75rem; letter-spacing: 2px }

/* PAGES D'ERREUR */
.section.erreur					{ min-height: calc(100vh - 250px); align-items: center }
.section.erreur .section-content { grid-row: 1 / 3; justify-content: center }
.erreur-code					{ font-family: var(--font-titles); font-size: 8rem; font-weight: 200; line-height: 1; letter-spacing: 10px; color: #DDD }
.erreur-titre					{ font-size: 1.3rem; text-align: left; margin: 20px 0; color: #333 }
.erreur-liens					{ list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 15px 30px }
.erreur-liens a					{ font-family: var(--font-titles); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: #999; border-bottom: 1px solid #DDD; padding-bottom: 4px; transition: color 0.3s ease, border-color 0.3s ease }
.erreur-liens a:hover			{ color: #000; border-color: #000 }

body.maintenance				{ min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px }
.maintenance-logo				{ width: 250px; height: auto; margin-bottom: 40px }
.maintenance .erreur-titre		{ text-align: center }

@media (max-width: 950px) {
.section.erreur					{ min-height: auto }
.section.erreur .section-content { order: 1 }
.erreur-code					{ font-size: 5rem; letter-spacing: 6px }
}