/*!
Theme Name: jeromed
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jeromed
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

jeromed is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Protest+Guerrilla&family=Sora:wght@100..800&display=swap');

/* Reset simple */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family: 'Sora', sans-serif;
    background:#101010;
    color:#e9e9e9;
    line-height:1.6;
    overflow-x: hidden;
}

.container {
    margin:0 auto;
    padding:1rem 1rem;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo .sitename {
    font-family:'Protest Guerrilla';
    white-space: nowrap; /* Empêche le retour à la ligne */
  overflow: hidden; /* Cache le débordement si nécessaire */
  transform-origin: left center; /* Point de référence pour le redimensionnement */
}

.logo a {
	text-decoration:none;
}

.logo a .sitename {
	text-decoration:none;
	color:#e9e9e9;
	text-transform:uppercase;
}

header {
    border-bottom:1px solid #fff;
}

header .container {
    max-width:1360px;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

header nav {
    padding:0.25rem 0.30rem;
    background-color: #101010;
    border:3px solid #fff;
    border-radius:50px;
    width:fit-content;
}

header nav ul {
    list-style:none;
    display: flex;
    gap:0.50rem;
}

header nav a {
    color:white;
    text-decoration: none;
    display:flex;
    gap:5px;
    align-items: center;
    justify-content: center;
    padding:0.5rem 1rem;
    border-radius:50px;
    font-weight:600;
    transition:0.3s ease;
}

header nav a:hover {
    color:#c22ab0;
}

header nav a.active {
    background:white;
    color:#101010;
}

/* Style du bouton hamburger */
.hamburger {
    display: none; /* Masqué sur desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: fixed;
    top: 80px;
    right:1rem;
    z-index: 1001;
    padding: 0.5rem 0.6rem;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #101010;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    margin: 5px 0;
    transition: 0.3s ease;
}

/* Style pour mobile */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* Affiché sur mobile */
    }
    header .container {
        justify-content: space-between;
        padding: 0 1rem;
        margin-top:1rem;
    }
    header nav {
        position: fixed;
        top: 0;
        right:-451px;
        width: 100%;
        overflow: hidden;
        background-color: #101010;
        border: none;
        border-radius: 0;
        height:100%;
        z-index: 1000;
        transition: right 0.3s ease;
        padding: 4rem;
    }
    header nav.active {
        right:0;
    }
    header nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    header nav a {
        width: 100%;
        text-align: center;
    }
}

main {
    border-top:1px solid #fff;
}

#particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

/*Hero*/

.hero {
    border-bottom:1px solid #fff;
    margin:0 auto;
}

.hero .row {
    margin:0 auto;
    max-width:1360px;
    gap:20px;
    display:flex;
    max-height:550px;
}

.hero .col {
    flex:1 calc(50% - 20px);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
	min-width: 550px;
}

.hero img {
    width:auto;
    height:100%;
}

.hero h1 {
    font-size:3.5rem;
    line-height:4rem;
}

.hero p {
    color:#f9F9F9;
    margin-top:20px;
}

.cta {
    padding:1rem 1.5rem;
    background:#fff;
    font-size:20px;
    display: flex;
    align-items: center;
    gap:10px;
    border-radius:50px;
    margin-top:20px;
    text-decoration: none;
    color:#101010;
    font-weight:600;
    width:fit-content;
	border:0;
	cursor:pointer;
}

.cta i {
    transition:0.3s ease;
}

.cta:hover i {
    rotate:45deg;
}

@media (max-width:768px) {
    .hero {
        padding-top:4rem;
        padding-left:0.5rem;
        padding-right:0.5rem;
    }
    .hero h1 {
        font-size:2.5rem;
        line-height:3rem;
    }
    .hero .row {
        flex-direction: column;
        max-height:inherit;
    }
	
	.hero .col {
		min-width:inherit;
	}

    .hero img {
        width:100%; 
        height:auto;
    }
}

.services-section, .gallery, .partners-section, .devis-section, .pageWrap  {
    border-bottom:1px solid #fff;
    padding-top:4rem;
    padding-bottom:4rem;
}

.sectionHead h2, .sectionHead h1, .pageContent h1 {
    font-size:40px;
    line-height:40px;
    font-family: 'Protest Guerrilla';
}

.pageContent h2 {
	font-family: 'Protest Guerrilla';
}

.sectionHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:4rem;
}

.sectionHead p {
    color:#F9F9F9;
    font-size:20px;
}

.servicesContent, .galleryContent, .partnersContent, .devisContent, .pageContent {
    max-width: 1360px;
    margin:0 auto;
}

.services-grid {
    display:flex;
    gap:20px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

.services-grid .card {
    flex:1 calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
    background:#101010;
    border:2px solid #fff;
    border-radius:20px;
    padding:1rem;
    display: flex;
    flex-direction: column;
    gap:10px;
}

.services-grid .card img {
    width:100px;
    height:auto;
}

@media (max-width:768px) {
    .sectionHead {
        flex-direction: column;
        align-items: start;
    }
    .sectionHead p {
        font-size:16px;
    }
    .servicesContent, .partnersContent, .devisContent {
        padding-left:0.5rem;
        padding-right:0.5rem;
    }
    .services-grid {
        flex-direction: column;
    }

    .services-grid .card {
        flex:1 calc(100% - 20px);
        max-width: 100%;
    }
}

/** A Propos **/

.about-section {
    border-bottom:1px solid #fff;
    padding-top:4rem;
    padding-bottom:4rem;
}

.about-item {
    max-width:1360px;
    margin:0 auto;
}

.aboutCont {
    display: flex;
    flex-direction: column;
    gap:2rem;
    font-size:18px;
    color:#F9F9F9;
}

.aboutCont img {
    width:100%;
    border-radius:20px;
    border:1px solid #fff;
}

.aboutCont .cta {
    margin-top:2rem;
}

@media (max-width:768px) {
    .about-item {
        padding-left:0.5rem;
        padding-right:0.5rem;
    }

    .aboutCont {
        flex-direction: column-reverse;
    }
}

#calendar{
    max-width:1000px;
    margin:0 auto;
    padding:1rem;
    background:#101010;
    border:1px solid #fff;
    border-radius:20px;
}

.calendarSection {
    border-bottom:1px solid #fff;
    padding-top:4rem;
    padding-bottom:4rem;
}

.calendarCont {
    max-width: 1360px;
    margin:0 auto;
}

.fc-today-button {
    display: none!important;
}

#eventModal {
    backdrop-filter: blur(20px);
}

.modalHead {
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:10px;
}

#modalDay {
    font-size:14px;
}

.fc-h-event {
    background:#c22ab0!important;
    border:1px solid #c22ab0!important;
}

.fc .fc-daygrid-day.fc-day-today {
    background:#c22ab020!important;
}

.fc .fc-button-primary {
  background-color: #fff!important;
  border-color: transparent!important;
  color: #101010!important;
}

.calendarSection .row {
    display: flex;
    gap:1rem;
}

.calendarSection .col {
    flex:1;
}

.calendarSection img {
    max-height: 574px;
    width:auto;
    border-radius:20px;
    border:4px solid #c22ab0;
}

.calendarSection .illustration {
    display: flex;
    height:fit-content;
    width: fit-content;
    border-radius:20px;
    position:relative;
}

.calendarSection .illustration::after {
    position:absolute;
    content:'';
    top:-2.5%;
    left:0%;
    rotate:-2.5deg;
    width:100%;
    height:105%;
    background:#c22ab0;
    border-radius:20px;
    z-index:-1;
}

@media (max-width:768px) {
    .calendarCont, .galleryContent {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .calendarSection .row {
        flex-direction: column;
        gap:2rem;
    }

    .calendarSection .illustration {
        width:90%;
        margin:0 auto;
    }

    .calendarSection img {
        width:100%;
    }
}

.pageCrawler {
    color:white;
    font-weight:600;
    text-decoration: none;
    display:block;
    margin-left:auto;
    width:fit-content;
    margin-top:20px;
}

.galleryPage {
    border-top:1px solid #fff;
    padding-top:4rem;
    padding-bottom:4rem;
}

/* minimal — tu peux remplacer par ton style */
.gallery-grid { display: flex; flex-wrap:wrap; gap: 15px; justify-content:center } .gallery-item { cursor: pointer; overflow: hidden; flex:1 calc(250px - 15px); border-radius: 8px; max-width:250px; display:flex; } @media (max-width:768px) { .gallery-grid { padding-left:0.5rem; padding-right:0.5rem; } .gallery-item { flex:1 calc(50% - 15px); max-width:50%; } } .gallery-item img { width: 100%; height: auto; transition: transform 0.3s; } .gallery-item:hover img { transform: scale(1.05); }
.gallery-modal {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; backdrop-filter: blur(20px);
}
.gallery-modal[aria-hidden="false"] { display:flex; }

.gallery-modal-content {
    max-width: 700px; width: 90%; border-radius: 10px; position:relative;
    display:flex;
}

.galleryData {
    position:absolute;
    padding:20px;
    bottom:0;
    left:0;
    background:rgba(0, 0, 0, 0.8);
    backdrop-filter:blur(5px);
    width:100%;
    border-radius:10px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
@media (max-width:768px) {
    .galleryData {
        padding:10px 20px;
        font-size:10px;
    }
    .galleryData h3 {
        font-size:12px;
    }
}
.gallery-modal-content img { width:100%; height:auto; border-radius:10px; }
.gallery-close {
    position:absolute;
    right:12px;
    top:8px;
    font-size:28px;
    background:transparent;
    border:0;
    color:#fff;
    cursor:pointer;
}
#modalTitle { color:#fff; margin:0 0 8px 0; }
#modalDesc { color:#d6d6d6; margin:0; white-space:pre-line; }

.pagination {
    margin-top:30px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.pagination div {
    display:flex;
    gap:20px;
    align-items: center;
}

.pagination a {
    color:#000;
    padding:0.5rem 1rem;
    background:#fff;
    display:flex;
    text-decoration:none;
    border-radius:10px;
    transition:0.3s ease;
}

.pagination a:hover {
    background:#FFFFFF90;
}

.pageContent h1 {
	margin-bottom:15px;
}

.site-footer {
		border-top: 1px solid #fff;
}

.footerSection {
	max-width: 1360px;
	  margin: 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:50px;
	padding-top: 4rem;
  padding-bottom: 4rem;
}

.footerSection img {
	width:100px;
	height:auto;
}

.colFooter {
	display:flex;
	flex-direction:column;
	text-align:center;
}

@media (max-width:768px) {
	.footerSection {
		flex-direction:column;
		gap:10px;
	}
}

.colFooter a {
	text-decoration:none;
	color:white!important;
}

.colFooter a:hover {
    color:#c22ab0!important;
}

.colFooter span {
	text-align:center;
}

.type-page {
		max-width: 1360px;
	  margin: 0 auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.entry-header {
	border-bottom:0;
	margin-bottom:15px;
}

.entry-title {
		font-size: 40px!important;
	  line-height: 40px;
	  font-family: 'Protest Guerrilla';
}

.entry-content h2 {
	margin-top:10px;
	margin-bottom:10px;
	font-family: 'Protest Guerrilla';
}

.entry-content ul {
	margin-top:15px;
	margin-bottom:15px;
	padding-left:30px;
}

.entry-content .devis-section .sectionHead {
	display:none;
}

.entry-content .devis-section {
	border-bottom:0!important;
}

.post-edit-link {
	color:white;
}

.devis-field {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:10px;
}

.devis-form {
	max-width:700px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
	align-items:center;
}

.devis-form .cta {
	margin:0 auto;
}

.devis-field {
	flex:1 calc(100%);
}

.devis-row {
	flex:1 calc(50% - 10px);
	max-width:50%;
}

@media (max-width:768px) {
	.devis-row {
		flex: 1 calc(100%);
		max-width:100%;
	}
}

select, input, textarea {
	padding:10px 15px;
	border:1px solid #c22ab0!important;
	border-radius:10px;
	background:#00000080;
	color:white;
}

.fc-event-time {
	display:none;
}

.fc-daygrid-event-harness {
	background: #c22ab0 !important;
  border: 1px solid #c22ab0 !important;
}

.fc-daygrid-event-dot {
	display:none;
}

.header404 {
	max-width:1200px;
	margin:0 auto;
	text-align:center;
	display:flex;
	align-items:center;
	gap:50px;
}

.header404 img {
	max-width:400px;
}

@media (max-width:768px) {
	.header404 {
		flex-direction:column;
	}
}

.page-numbers a {
	color:white!important;
}

.avisWrap {
	margin-top:1.5rem;
	margin-bottom:1.5rem;
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}

.avisCol {
	flex:1 calc(50% - 20px);
	max-width:calc(50% - 20px);
}

.avisHead {
	display:flex;
	gap:10px;
	align-items:center;
	margin-bottom:0.5rem;
	border-bottom:1px solid #fff;
	padding-bottom:0.5rem;
}

.avisHead img {
	width:50px;
	height:auto;
}

.avisHead span {
	font-weight:bold;
}

.avisCont {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: 150px;
    overflow-y: auto;
    scrollbar-width: thin; 
    scrollbar-color: #cccccc #f2f2f2; 
}

@media (max-width:768px) {
	.avisCol {
		flex:1 calc(100% - 20px);
		max-width:calc(100% - 20px);
	}
}

/* Conteneur guirlande */
#garland-noel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding-top: 10px;
    z-index: 99999;
    pointer-events: none; /* Ne bloque pas les clics */
}

/* Ampoules */
#garland-noel .bulb {
    width: 16px;
    height: 22px;
    background: var(--bulb-color);
    border-radius: 50% 50% 40% 40%;
    box-shadow: 0 0 10px var(--bulb-color);
    animation: blink 1.5s infinite ease-in-out;
}

/* Clignotement */
@keyframes blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--bulb-color); }
    50% { opacity: 0.2; box-shadow: 0 0 2px var(--bulb-color); }
}