/*

Theme Name: Strasbourg Galerie Tour
Author: Stéphane Bourgeaud-Lignot
Description: Thème du Strasbourg Galerie Tour
Version: 1.0

*/


/* ----- Imports ----- */

/*@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,wght@0,100..900;1,100..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- CSS RESET ----- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ----- Fonts ----- */
html, p { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color:#000; font-size:16px; margin: 0 0 20px; line-height: 1.15;}
h1 {  font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 64px; line-height: 60px; text-transform: uppercase;}
h2 {  font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; color: #3f3180; font-size: 28px; margin:50px 0 30px;}
h3 {  font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 21px; margin:30px 0 30px;}
strong {/*text-transform: uppercase;*/ font-weight: 800;}

p {text-align: justify;}
a {text-decoration: none; color: inherit;}
a:hover {text-decoration: underline; color:#3f3180;}

p.overtitle {font-size:21px; margin:0px; text-transform: uppercase; font-weight: 400; line-height: 1; color:#999;}
p.subtitle {font-size:21px;font-weight: 700; line-height: 1; text-transform: uppercase; text-align: left;}

h1, p.subtitle {margin-bottom: 60px;}
h1:has(+ p.subtitle) {margin-bottom: 0px;}

ul {list-style-position: outside; margin-left: 20px;}
ul li {margin-bottom: 10px;}

.dispn {display:none;}




/* ----- Structure ----- */

.wcontainer {width:100%; padding:0; box-sizing: border-box;}
.ncontainer {max-width:1100px; margin:auto; box-sizing: border-box; padding: 30px;}

.ncontainer.shaped {border-radius: 40px 0 40px 0;}
.ncontainer.shaped.main {position: relative; top:-80px; z-index:999; background-color:#FFF; }

.flex2cols {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; gap: 50px;}
.flex2cols div { min-width:300px;}
.flex2cols .galerieInfos, .galerieInfos p {text-align: left;}

.cols2_container {column-count: 2; column-gap: 50px; margin-bottom: 50px;}
.cols3_container {column-count: 3; column-gap: 50px; margin-bottom: 50px;}
.cols2_container a.ablock, .cols3_container a.ablock {display: block; padding:5px 0; margin-bottom: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

#image600 {width:100%; height:600px; background-color: #CCC; z-index:100;}
#image600 img {object-fit: cover; width:100%; height: 600px;}

footer {width:100%; padding: 30px; box-sizing: border-box; background-color:#cecfe8; color:#000; text-align: center; font-size: 14px; line-height: 1.5;}

.footer2 > ul {display:flex; /*background-color: #353a68;*/ justify-content: space-between; flex-wrap: wrap;}
.footer2 ul {list-style: none; margin-left: 0px;}
.footer2 > ul > li {text-align: left; text-transform: uppercase; font-weight: bold;}
.footer2 ul li ul, .foooter2 ul li ul li {text-transform: none; font-size: 16px; text-align: left; font-weight: 400;}
.foooter2 ul li ul li {margin-bottom: 0px;}



.breadcrumbs .ncontainer {background-color:#FFF; height: 80px; position:relative; top:40px;}
.breadcrumbs ul li {display:inline}
.breadcrumbs ul li:after {content: " > "; margin: 0 10px;}
.breadcrumbs ul li:last-child:after, .breadcrumbs ul li:first-child:after {content: ""; margin: 0;}


.subevent {list-style: none;}
.subevent li { padding: 20px 0 10px; display: flex; flex-direction: row; justify-content: space-between; gap:20px; min-height:50px; border-bottom: 1px solid #CCC;}
.subevent li:last-of-type {border-bottom: none;}
.subevent li div { flex-grow: 1; width:25%}
.subevent li div:nth-child(3) { flex-grow: 2; width: 50%;}
.subevent h3 {margin: 0;}


#map {width:100%; height:500px; background-color: #CCC; overflow: hidden; margin-bottom: 50px;;}
#map img, 
#map .leaflet-tile-container img {
    max-width: none !important;
    max-height: none !important;
    width: 256px !important;
    height: 256px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: content-box !important;
}
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}
#map .leaflet-marker-icon.custom-svg-icon {
            max-width: 35px !important;  /* Force la largeur définie en JS */
            max-height: 35px !important; /* Force la hauteur définie en JS */
            width: 35px !important;
            height: 35px !important;
            
            /* Annule les styles parasites de ton site */
            padding: 0 !important;
            margin: 0 !important;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }
.leaflet-tile-pane {filter: grayscale(100%) brightness(108%) contrast(90%);}

/* --------- Splide --------- */
.splide, .splide__track, .splide__list {margin-top: 0 !important; padding-top: 0 !important;}
.splide__track {display: block; overflow: hidden;}
.splide__slide {width:100%; height: 100%; background-color: #FFF; padding: 0; margin: 0; display: flex !important; flex-direction: column; justify-content: flex-end;}
.splide__slide img {width:100%; height:100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.splide__slide .ncontainer {position:relative; top:280px; left:0; width: 100%; margin:auto; background-color:#CCC; font-size: 96px; text-transform: uppercase; line-height: 80px; font-weight: 900; color:#FFF; align-self: flex-end; background: rgba(255, 255, 255, 0.5); border-radius: 40px 0 40px 0; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);}
.splide__slide .ncontainer h2 {margin: 0; padding: 0; font-size: 48px; line-height: 48px; text-transform: uppercase; font-weight: 900; color:#000;}
.splide__slide .ncontainer h2 span {display: block; font-size: 24px; line-height: 24px; text-transform: uppercase; font-weight: 400; color:#000;}
.splide__slide .ncontainer a.btn {display: inline-block; color:#000; border-left:1px solid #999; border-top:1px solid #999; height:40px; line-height:40px; text-decoration: none; padding: 0px 30px 0 25px; border-radius: 20px 0 40px 0; margin-top: 0px; font-size: 14px; text-transform: uppercase; font-weight: 800; position:absolute; bottom:0; right:0; }
.splide__slide .ncontainer a.btn:hover {background-color:#353a68; color :#FFF; text-decoration:none;}
.splide__slide .ncontainer p {line-height: 18px; height: 36px; text-overflow: ellipsis; overflow: hidden; text-align: left; text-transform: none;}

/* -------- Navigation Desktop -------- */
nav {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    z-index: 9999;
}

nav .ncontainer {
    height: 80px;
    position: relative;
    line-height: 80px;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 40px 0 40px 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#logo {
    position: absolute;
    top: 5px;
    left: 5px;
}

/* Reinitialisation de la liste générée par WP */
nav .ncontainer ul {
    position: absolute;
    top: 0;
    right: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Alignement des elements du menu */
nav .ncontainer li {
    display: inline-block;
    width: auto;
    margin: 0 10px;
    padding: 0;
}

/* Stylisation du lien cliquable */
nav .ncontainer li a {
    display: block;
    line-height: 77px; /* 80px - 3px de bordure */
    padding: 0 15px;
    text-decoration: none;
    color: inherit; /* Utilise la couleur de texte parente */
    border-bottom: 3px solid transparent; /* Evite le saut d'element au survol */
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Effet au survol et sur la page active WordPress */
nav .ncontainer li a:hover,
nav .ncontainer li.current-menu-item > a {
    border-bottom: 3px solid #3f3180;
}

/* -------- Style du bouton Burger (Masqué sur Desktop) -------- */
.menu-toggle {
    display: none;
    position: absolute;
    top: 29px; /* Position verticale fixe (80px / 2 - 22px / 2) */
    right: 30px;
    transform: none; /* On supprime le translateY(-50%) qui causait le décalage */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10001;
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: #3f3180;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Animation du burger en X */
.menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}






/* -------- Tiles -------- */

.tile_container {display:flex; column-gap: 50px; overflow: scroll; margin:-10px -50px 0px; padding: 10px 50px 50px; box-sizing: border-box;}

.tile_250 {background-color: #FFF; width:250px; height:400px; filter: drop-shadow(0px 15px 15px #CCC); position: relative;}
.tile_250 img {width:250px; height: 250px; object-fit: cover;}

.tile_250 .label {display:inline; font-size: 10px; text-transform: uppercase; background: rgba(255, 255, 255, 1); padding: 10px 20px; border-radius: 15px 0 15px 0; width: auto; position: absolute; top:235px; right:0; /* backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);*/ }
.tile_250 .label_tag {display:inline; font-size: 10px; text-transform: uppercase; background: rgba(255, 255, 255, 0.7); padding: 10px 10px; border-radius: 15px 0 15px 0; width: auto; position: absolute; top:10px; left:10px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

.tile_250 h3 { padding: 0 10px; position: absolute; left: 0; top:240px; max-height:75px; overflow: hidden; line-height: 22px;}
.tile_250 .date {padding: 0 10px; font-size: 13px; text-align: left; position: absolute; left: 0; top:345px;}
.tile_250 .place {padding: 7px 10px; font-size: 13px; position: absolute; left: 0; top:370px; height: 30px; width: 100%; border-top: 1px solid #CCC; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;} 

.tile_350 {background-color: #FFF; width:350px; height:400px; filter: drop-shadow(0px 15px 15px #CCC); position : relative;}
.tile_350 img {width:350px; height: 200px; object-fit: cover;}
.tile_350 h3 { padding: 0 10px; position: absolute; left: 0; top:185px; height:44px; overflow: hidden; line-height: 22px;}
.tile_350 p { padding: 0 10px; position: absolute; left: 0; top:275px; height:74px; overflow: hidden; text-align: left; }
.tile_350 .label_tag {display:inline; font-size: 10px; height:auto; text-transform: uppercase; background: rgba(255, 255, 255, 0.7); padding: 10px 10px; border-radius: 15px 0 15px 0; width: auto; position: absolute; top:10px; left:10px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.tile_350 .date {padding: 7px 10px; font-size: 13px; position: absolute; left: 0; top:370px; height: 30px; width: 170px; border-top: 1px solid #CCC; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;} 
.tile_350 .place {padding: 7px 10px; font-size: 13px; position: absolute; left: 170px; top:370px; height: 30px; width: 180px; border-top: 1px solid #CCC; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;} 



.tile_container_grid {display:flex; column-gap: 50px; flex-wrap:wrap; box-sizing: border-box; justify-content: space-between;}
.tile_container_grid a {width: 15%;}
.tile_container_grid a img {width: 100%;}

/*.tile_container_grid {columns:3; column-gap: 50px;}*/

/* -------- Galerie -------- */

img.galerieLogo {width:200px; height:100px; object-fit: contain; object-position: left bottom; margin-bottom: 20px;}
img.galerieLogoGrid {width:250px; height:150px; object-fit: contain; object-position: center middle; margin-bottom: 50px;}


/* -------- FAQ Accordéons --------- */
.accordion {background-color:#FFF; color: #000; cursor: pointer; padding: 20px 0px 20px 40px; box-sizing: border-box; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; position: relative;}
.accordion h3 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color: #000; font-size: 18px; margin:0;}
.accordion h3:before {content: "↓"; position: absolute; top:20; left:0; font-weight: 800; color:#000;}
.accordion:hover { background-color: #f2f3f9;}
.accordion.active, .accordion.active:hover { background-color:#f2f3f9;}
.accordion.active h3 {color:#353a68;}
.panel {padding: 0px 0px; border-bottom: 1px solid #EEE; height: 0px; box-sizing: border-box; overflow: hidden; transition: all 0.4s ease-out; margin: 0; line-height: 1.25;}
.active + .panel {height: auto; overflow: hidden; padding: 20px 0px; background-color: #f2f3f9; }


/* ----------- Leaflet ------------- */
/* Style du conteneur du marqueur (Picto + Cadre Blanc) */
/* Wrapper Leaflet réinitialisé */
.leaflet-marker-icon.custom-div-icon {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    z-index: 500 !important; /* Force les étiquettes au-dessus des lignes */
}

/* Conteneur de l'étiquette */
.custom-marker-container {
    display: inline-flex;
    align-items: center;
    background: #3f3180; /* Fond opaque indispensable pour masquer la ligne dessous */
    padding: 6px 12px;
    border-radius: 10px 0 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    border: 2px solid #353a68;
    white-space: nowrap;
    cursor: pointer;
    transform: translate(-50%, -50%); /* Centrage parfait sur le point GPS */
}

.custom-marker-label {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
}



/* ==========================================================================
   Styles personnalisés - Contact Form 7
   ========================================================================== */

/* 1. Largeur globale du formulaire */
.wpcf7 {
    width: 100%;
}

.wpcf7-form {
    width: 100%;
    box-sizing: border-box;
}

/* 2. Typographie générale et libellés (labels) */
.wpcf7-form,
.wpcf7-form label,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

/* Libellés de champs en gras */
.wpcf7-form label {
    font-weight: bold;
    display: block; /* S'assure que le label prend toute la largeur si besoin */
    margin-bottom: 5px;
}

/* 3. Style des champs de saisie (text, email, tel, textarea, select, etc.) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc; /* Gris standard, ajustable selon vos besoins */
    border-radius: 4px; /* Optionnel : léger arrondi */
    box-sizing: border-box; /* Évite les dépassements de largeur */
    background-color: #fff;
    color: #333;
}

/* Focus sur les champs lors du clic */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: #3f3180; /* Rappel du violet lors de la saisie */
    outline: none;
}

/* 4. Style du bouton d'envoi */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
    background-color: #3f3180;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Effet au survol du bouton */
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: #2e2360; /* Violet légèrement plus sombre au survol */
}











@media (max-width: 1100px) { 

	#image600 {height:400px;}
	#image600 img {height:400px;}

    .ncontainer {margin:auto; box-sizing: border-box; padding: 20px;}

    .flex2cols {display:block;}
	.tile_container {margin:-10px -20px 0px; padding: 10px 20px 50px; box-sizing:content-box; width:100%;}
    .cols3_container, .cols2_container {columns: 1;}


    nav {
        top: 10px; /* 10px du haut */
    }

    nav .ncontainer {
        margin: 0 10px; /* 10px de marge de chaque côté */
        transition: height 0.3s ease, border-radius 0.3s ease;
        overflow: hidden; /* Garantit que le blur et le fond englobent le UL */
    }

    /* Le conteneur s'agrandit automatiquement à l'ouverture du menu */
    nav .ncontainer.is-active {
        height: auto; /* Entoure le UL au lieu de restreindre à 80px */
        border-radius: 40px 0 20px 0px;
        padding-bottom: 20px;
    }

    /* Affichage du bouton burger */
    .menu-toggle {
        display: flex !important;
    }

    /* Repositionnement du UL dans le flux */
    nav .ncontainer ul.main-nav-list {
        display: none; /* Fermé par défaut */
        position: static; /* Rentre dans la hauteur du ncontainer */
        top: auto;
        right: auto;
        margin-top: 80px; /* S'affiche sous le logo/burger */
        padding: 0;
        text-align: center;
        width: 100%;
    }

    /* Ouverture du menu */
    nav .ncontainer ul.main-nav-list.is-active {
        display: block;
    }

    /* Éléments en colonne */
    nav .ncontainer li {
        display: block;
        margin: 0;
    }

    nav .ncontainer li a {
        line-height: 50px;
        padding: 0 20px;
        border-bottom: none;
    }

    nav .ncontainer li a:hover,
    nav .ncontainer li.current-menu-item > a {
        border-bottom: none;
        color: #3f3180;
        background-color: rgba(63, 49, 128, 0.05);
    }




	h1 {font-size: 48px; line-height: 48px;}
    p {text-align: left;}

	.footer2 ul {min-width:50%;}


	

	
	

.subevent li { padding: 10px 0; display: block; min-height:50px; border-bottom: 1px solid #CCC;}
.subevent li:last-of-type {border-bottom: none;}
.subevent li div { width:100%; margin-bottom: 10px;}
.subevent li div:nth-child(3) { margin-top: 20px; width: 100%;}


}