/* ====================================
   1. NAVBAR & LOGO
   ==================================== */
.card-text small a.views-more-link {
    clear: both;
    display: inline-block;
}
nav#block-bootstrap-subtheme-main-menu {
    padding-left: 0;
    padding-right: 0;
}
.photoswipe-gallery .view-content.row {
    text-align: center;
}
.block-media-gallery-gallery .field--type-image img{
    margin: 0;
}
.photoswipe-gallery .view-content img.image-style-media-gallery-image-bloc-250x250 {
   margin-bottom: 5px;
}
.photoswipe-gallery .view-content.row a.photoswipe {
    color: transparent;
}
.path-layout p{color:inherit};
.row [class*='col-'] {
  background-clip: content-box;
  min-height: 130px!important;
  margin-bottom: 15px;
}
.modal label.form-label,.modal .modal-title {
	color: var(--blue-dark); 
}

.wrap {
  position: relative;
  /*width: 50%;*/
	overflow:hidden;
}
.img-thumbnail {
    padding: .25rem;
    background: none;
    border: none;
    border-radius: 1.2rem;
    max-width: 100%;
    height: auto;
}
.imageblur {
  display: block;
  width: 100%;
  height: auto;
 filter: blur(0px) brightness(100%);;
 transform:	scale(1)
}

.over {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
 /* background-color: #008CBA;*/
}

.wrap:hover .over {
}
.wrap:hover .overtext {
border: 2px solid white;
-webkit-transform:  translate(-50%, -50%) scale(2) ;
  -ms-transform:  translate(-50%, -50%) scale(2) ;
  transform:  translate(-50%, -50%) scale(2) ;
	  font-size: 0.8rem;



}
.wrap:hover .imageblur {
 filter: blur(20px) brightness(50%);;
 transition: 1.5s ease;
 transform:scale(3);
}

.overtext {
  color: white;
  font-size: 0.8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .5s ease;
  -webkit-transform: translate(-50%, -50%) scale(1) ;
  -ms-transform: translate(-50%, -50%)  scale(1) ;
  transform: translate(-50%, -50%)  scale(1) ;
  text-align: center;
	border: 0;
    width: 50%;
    height: 50%;
	display:flex;
	
}

.overtext div{
margin:auto
}
#block-bootstrap-subtheme-main-menu .nav-item:last-child,#block-bootstrap-subtheme-footer .nav-item:last-child{
    border-right: 0;
}
#block-bootstrap-subtheme-main-menu .nav-item, #block-bootstrap-subtheme-footer .nav-item {
    border-right: 1px solid var(--yellow-light);;
}
.sidebar h2 {
    margin: 0 0 0.5em;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 5px;
     text-shadow: none; 
    font-size: 1.071em;
    line-height: 1.2;
}
.path-frontpage .row {
   /* align-items: center;*/
}

.triptyque .col-lg-12.card {overflow:hidden;}
.triptyque .col-lg-12.card img,.triptyque .timeproject   {width:100%;height:auto}
.triptyque:hover .col-lg-12.card img,.triptyque:hover .timeproject{
	width:100%;
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	-webkit-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;  
	/*transition: all 0.75s 0ms;*/

/*filter:blur(0.3rem) ;*/
}


.card-body.corner::after {
    content: "";
    position: absolute;
    bottom: -14px;
    right: 0px;
    border-right: 2px solid var(--yellow-primary);
    border-bottom: 2px solid var(--yellow-primary);
    height: 15px;
    width: 15px;
}

body{
	max-width:2200px;
	margin-left:auto;
	margin-right:auto;
}

.card-img-overlay.cols > p, .view-header > p {
   /* background-color: rgba(4, 10, 90, 1);*/
    border-radius: 5px;
    /* margin-left: -4px; */
    width: 100%;
    padding: 0.5rem;
    border: 0px solid black;
}
.card{
border:none;
}
.card.inv a,.inv p{
	/* background-color: rgba(255, 255, 255, 1);*/
	color: var(--blue-dark)!important;
}
a.card-link {
    display: flex;
    align-items: center;
    text-align: center;
}
.card-img-overlay.cols > div

 {
    margin: auto;
}
.card-img-overlay.cols {
   /* display: flex;
    align-items: center;
     background-color: rgba(0, 0, 0, 1.5); */
    padding: 0;
	margin:auto;
}
.card-img-overlay.full:after {
    background: transparent url(https://dev.waow.ch/themes/bootstrap/subthemes/bootstrap_subtheme/img/ui/wave-text.png) no-repeat scroll center center;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0px;
    width: 50%;
    top: 0px;
    z-index: 1;
}


.card-img-overlay.full .card-text {
    width: 100%;
    right: 15px;
    z-index: 2;
    text-align: right;
	margin-left: calc(50% + 60px);
}
body.path-user .field--label-above .field__item {
    padding: 0.25rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    margin: 0.25rem 0;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #777;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s 
ease-in-out, box-shadow .15s 
ease-in-out;
}
.site-footer {
    padding: 0;
}
.site-footer__bottom {
  letter-spacing: 0.2px;
  margin-top: 0px;
  border-top: 0px;
    border-top-color: rgb(85, 85, 85);
  border-color: rgba(255, 255, 255, 0.15);
}


/* Appliquer le bleu foncé à l'entête du site */
#block-bootstrap-subtheme-copyright {
  text-align: center;
  padding: 0;
  margin: 0;
}

.navbar {
    background-color: var(--blue-dark) !important;
}
.navbar.bg-primary {
    background-image: none;
   
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23FCD021' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.social-media a.nav-link{
color:#fff!important;
}
.nav-item.flag {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 1200px) {
.nav-item.flag {
    padding-left: 10px;
    padding-right: 8px;
}
}
/*li.facebook a.nav-link{
color:#fff;
}
li.instagram a.nav-link{
color:#5851db ;
}
li.youtube a.nav-link{
color:#c4302b  ;
}*/
body.toolbar-horizontal #navbar-top.fixed-top, body.toolbar-vertical #navbar-top.fixed-top, body.toolbar-vertical.toolbar-tray-open #navbar-top.fixed-top, body.toolbar-horizontal #navbar-main.fixed-top, body.toolbar-vertical #navbar-main.fixed-top, body.toolbar-vertical.toolbar-tray-open #navbar-main.fixed-top {
    top: 39px;
}
/*faire floater les drapeau langue*/
div#block-bootstrap-subtheme-advancedlanguageselectorblock li {
    float: left;
    list-style: none;
    padding-left: 10px;
}
/*remonter la liste des drapeau au niveau du menu*/
div#block-bootstrap-subtheme-advancedlanguageselectorblock ul {
    margin-top: -15px;
}
 /* Ajustement de la marge haute du header, potentiellement lié à un fixed-top qui cache le slideshow */
header#header {
    margin-top: 80px;
}

nav.navigation .nav-link{
color: var(--blue-light);
}
.navbar-dark a.nav-link {
    color: var(--yellow-primary);
}
.navbar-dark a.nav-link.is-active {
    color: var(--yellow-light);
}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus {
    color: var(--yellow-light);
}

nav#navbar-main.fixed-top {
    margin-top: 15px;
}
nav#navbar-top.fixed-top {
    z-index: 1035;
    padding: 0;
    margin: 0;
    display: inline;
}
nav#navbar-top.navbar.fixed-top a.nav-link {
    margin: 0;
    padding: 0;
    padding-right: 10px;
}
/* Votre règle de largeur de logo */
a.navbar-brand img {
    height: 55px;
}
.navbar.bg-primary {
    border: 0px;
}

.row.region.region-top-header-form {
    --bs-gutter-x: 0rem;
    --bs-gutter-y: 0rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.site-footer {
   background:var(--blue-dark);
   border-top: 3px solid var(--yellow-primary);	
   
}
.site-footer:before {
    position: absolute;
    content: " ";
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid var(--yellow-primary);
    width: 0;
    height: 0;
    /* bottom: -18px; */
    left: calc(50% - 15px);
    /* right: 0; */
    display: block;
    margin-top: -17px;
}
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
    display: flex;
    align-items: center;
}
/* ====================================
   2. CAROUSEL & SLIDESHOW
   ==================================== */

/* Fusion de vos deux règles .carousel-caption et correction des chemins */

div.carousel.slide {
    /* Remplacement de #fdea18 par la variable */
    border-bottom: 3px solid var(--yellow-primary); 
    margin-bottom: 10px;
    padding-bottom: 3px;
}
.carousel-inner {
    /* Remplacement de #fdea18 par la variable */
    border-bottom: 3px solid var(--yellow-primary); 
}
div.carousel.slide::after {
    position: absolute;
    content: " ";
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    /* Remplacement de #fdea18 par la variable */
    border-top: 15px solid var(--yellow-primary); 
    width: 15px;
    height: 15px;
    bottom: -18px;
    left: calc(50% - 15px);
    right: 0;
    display: block;
}
.carousel-caption {
    position: absolute;
    right: 20%;
    bottom: 1.25rem;
    left: 10%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    /* Remplacement de #fff par la variable Bootstrap la plus claire */
    color: var(--yellow-light); 
    text-align: left;
    top: 33%; /* Règle de positionnement vertical */
    z-index: 2;
}

/* Chemin d'image : Vérifiez que l'URL relative est correcte par rapport à custom.css */
.carousel-inner:before {
    background: transparent url(../img/ui/slideshow-wave.png) no-repeat scroll center center;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: calc(100% - 0px);
    position: absolute;
    left: -400px;
    width: 1000px;
    top: 0;
    z-index: 1;
}

/* Flèches de contrôle : Le code SVG DATA URL utilise déjà #FCD021, ce qui est cohérent avec --mon-jaune-principal */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FCD021'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")!important;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FCD021'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")!important;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
}

/* Indicateurs */
/* Le code utilise déjà #FCD021, ce qui est cohérent avec --mon-jaune-principal */
.carousel-indicators button {
    border: 1px solid var(--yellow-primary) !important; /* Remplacé #FCD021 par la variable */
    width: 10px !important;
    height: 10px !important;
    border-radius: 5px !important;
    background-color: var(--yellow-primary) !important; /* Remplacé #FCD021 par la variable */
    opacity: 1;
}
.page-intro-image {
    width: 100%;
    overflow: hidden;
    max-height: 455px;
}
.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 5px;
}


/* ====================================
   3. VIEW TABLES (view-projet-waow-2)
   ==================================== */
table {
    font-size: 1em;
}
tr, tr td, tr th {
    border: none;
    border-bottom: none;
}
h1 span.white-group {
  /*  color: var(--blue-light);*/
	color: var(--yellow-primary);
}
h4 span.white-group {
    color: var(--yellow-light);
}
/* Scrollbar (Dimensions) */
.mac-scroll-container {
    max-height: 200px;
    overflow-y: auto;
    padding: 15px;
	overflow:hidden;
}
.mac-scroll-container.card-body{
    max-height: 420px;

}
.timeline.projet .mac-scroll-container {
    max-height: 300px;
    
}
.timeline .timeline_date {
    align-items: center;
    display: grid
;
}

.card.m-3 {
    /* margin-bottom: 4em !important; */
    padding-top: 8rem !important;
  margin-bottom: -4rem !important;
}
/* Scrollbar (ajustement pour le mode sombre) */
.sombre.mac-scroll-container::-webkit-scrollbar-thumb {
    /* Utilisation de la fonction RGBA avec la valeur hex de --mon-jaune-principal */
    background-color: rgba(252, 208, 33, 0); 
}
.sombre.mac-scroll-container.hovered::-webkit-scrollbar-thumb {
    /* Utilisation de la fonction RGBA avec la valeur hex de --mon-jaune-principal */
    background-color: rgba(252, 208, 33, 0.8); 
}

.mac-scroll-container::-webkit-scrollbar {
    background-color: #FCD021;
    width: 2px;
}
.mac-scroll-container::-webkit-scrollbar-button {
    display: none;
}
.mac-scroll-container::-webkit-scrollbar-thumb {
    
    transition: background-color 0.4s ease-in-out;
}
.mac-scroll-container::-webkit-scrollbar-thumb {
    background-color: #FCD021;
    border-radius: 16px;
    border: 2px solid #FCD021;
}

.mac-scroll-container::-webkit-scrollbar-track {
    background-color: #040A5A;
	
}

.mac-scroll-container:hover {
  overflow-y: scroll;
}

/* Colonnes et Dive Points - Positionnement très spécifique */
.view-vue-projet-waow-2 {
    width: 70%;
    float: right;
}
.views-field.views-field-field-image-projet {
    left: -230px;
    position: relative;
}
.itinerary {
    width: 77.1186440678%;
    float: right;
    margin-right: 0;
}
.dive-site {
    position: relative;
}
.dive-point, .dive-point-table {
    position: relative;
    top: 0px;
    width: 16px;
    height: 16px;
    display: block;
    border-radius: 15px;
    left: -7px;
}
.dive-point-table {
    top: -18px;
    left: 0px;
}
.itinerary-picture {
    position: relative;
    left: -250px;
    max-width: 230px;
    max-height: 230px;
}
.itinerary-picture img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: auto;
    border: 0;
}
.description {
    position: absolute;
    top: -5px;
    left: 30px;
}
.dive-site:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
}
.page-view-projet-waow-2 td.views-field:nth-child(2):before {
    position: absolute;
    content: "";
    height: 200px;
    width: 1px;
    margin-left: 10px;
}



/* ====================================
   4. CALENDAR TABLE
   ==================================== */
.timeproject{
margin: 0;
  max-width: 90%;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 3px 1fr;



}
.block .timeproject {
    margin: 0;
    max-width: 100%;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
}
.point_wrap{
position: relative;
  background:var(--blue-light);
	height:100%;
}

.point{
position: absolute;
  position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background:var(--blue-light);
    border-radius: 50%;
}
.timeproject .txt{
    /* margin: 0; */
    padding-right: 1rem;
    /* margin: 0.5rem; */
    padding-left: 1rem;	
	font-size: 1.2rem;
}
.timeproject .txt.date{
 font-style:italic;
}
.point--bottom {
  top: initial;
  bottom: 0;
}
.timeline.projet .timeline__content {
    margin: 1rem;
}
.view-display-id-block_2 .timeline__content.card{
    width: 100%;

}
.view-display-id-block_2 .timeline {
     grid-template-columns: 15rem 0.125rem 1fr;

}

.timeline__content.card,.timeline__content .card {
    background:0;
    text-align: center;
   /* width: 40%;*/
}
.timeline {
    display: grid;
    grid-column-gap: 1rem;
    grid-template-columns: 3fr 0.125rem 6fr;
}
@media (max-width: 768px) {

/*.timeline {
    display: grid;
    grid-column-gap: 0rem;
    grid-template-columns: 1fr 8fr;
}*/
}

.timeline .timeline__separator, .project .timeline__separator {
    /*background: rgb(203 213 225);*/
    background-color:var(--blue-light);
    position: relative;
}
.timeline time.datetime {
    text-align: right;
}
.timeline .timeline__separator::before,.project .timeline__separator::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 50%;
    transform: translateX(-50%);

    background: inherit;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
}



.calendar-view-month thead, .calendar-view-month tbody, .calendar-view-month tr, .calendar-view-month td {
    border: 0;
}
.calendar-view-month td {
    border: 1px solid;
}
.calendar-view-month td img {
    width: 100%;
    height: auto;
}
.calendar-view-day {
    padding: 0;
    margin: 0;
}
ul.pager__items.js-pager__items.calendar-view-pager {
    list-style: none;
}
li.pager__item.pager__next a::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid;
    margin-left: 15px;
    display: inline-block;
    align-items: center;
    vertical-align: -40%;
}
li.pager__item.pager__previous a::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid;
    margin-right: 15px;
    display: inline-block;
    align-items: center;
    vertical-align: -40%;
}
li.pager__item.pager__current,li.pager__item.pager__previous,li.pager__item.pager__next {
    height: 65px;
}
.calendar-view-pager__reset, .calendar-view-table caption {
    display: none;
}
.calendar-view-month thead th {
    background: none;
}
.view-display-id-block_2 ul li {
    float: left;
}
.view-display-id-block_2 ul li .views-field.views-field-field-location {
    position: absolute;
    padding: 5px;
    border-radius: 0px 5px 20px 0px;
}
.view-display-id-block_2 ul li .views-field.views-field-field-location a {
    font-weight: bold;
}


/* =========================================== */
/* 5. VUES ET COMPOSANTS (Couleurs)            */
/* =========================================== */

/* Tables */
.table-hover > tbody > tr:hover > * {
    color: var(--yellow-light); /* OK: #fff9c6 */
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--yellow-light); /* OK: #fff9c6 */
}

/* Vues : Projet WAOW 2 (mac-scroll-container, dive-point, etc.) */
.page-view-projet-waow-2 td.views-field:nth-child(2):before {
    background: var(--yellow-light); /* OK: #fdea18 */
}
.dive-point, .dive-point-table {
    background-color: var(--yellow-primary); /* OK: #fdea18 */
}

/* Calendrier */
.calendar-view-month thead th {
    color: var(--blue-light); /* OK: #DEB775 */
}
.calendar-view-month td {
    border-color: var(--blue-light); /* OK: #B3C1DB */
}
.calendar-view-table .calendar-view-day__row {
    background-color: var(--mon-bleu-moyen); /* OK: #005292 */
}
.calendar-view-table .next-month, .calendar-view-table .previous-month {
    background: var(--blue-primary); /* OK: black -> #040A5A */
    color: var(--blue-light); /* OK: #DEB775 */
}
.calendar-view-table td:hover {
    background-color: var(--blue-light); /* OK: #3774AA */
}
li.pager__item.pager__next a::after {
    border-left-color: var(--yellow-brown); /* OK: #DEB775 */
}
li.pager__item.pager__previous a::before {
    border-right-color: var(yellow-brown); /* OK: #DEB775 */
}

/* Nodes/Teasers */
.node--view-mode-teaser {
    border-bottom-color: var(--bs-border-color); /* OK: #d3d7d9 */
}
.node--view-mode-teaser h2 a {
    color: var(--yellow-primary); /* OK: #FCD021 */
}
.node--view-mode-teaser.node--sticky {
    /* Utilisation des variables Bootstrap pour le fond et le bord */
    background: rgba(var(--bs-body-color-rgb), 0.024); 
    border-color: var(--bs-border-color); 
}
.node__meta {
    color: var(--bs-gray-600); /* OK: #68696b */
}
.node--unpublished .comment-text .comment-arrow {
    /* Gardons les couleurs très claires qui ne font pas partie de votre palette principale */
    border-left-color: #fff4f4; 
    border-right-color: #fff4f4;
}
.d-flex.align-items-center.justify-content-end.event-date:after,.text-lg-end.txt.date div:after {
content: "";
    /* position: absolute; */
    top: -15px;
    left: -20px;
    height: 0px;
    width: 0px;
    border-top: solid 15px transparent;
    border-left: solid 15px var(--yellow-primary);
    border-bottom: solid 15px transparent;
    margin-left: 1rem;
}
/* Vue 'block_2' */
.view-display-id-block_2 ul li .views-field.views-field-field-location {
    background-color: var(--yellow-brown); /* OK: white */
    color: var(--blue-medium); /* OK: #040A5A */
}
.view-display-id-block_2 ul li .views-field.views-field-field-location a {
    color: var(--blue-primary); /* OK: #040A5A */
}

/* Ligne verticale de la vue Projet WAOW 2 */
.dive-site:before {
    background: var(--yellow-primary); /* OK: #fdea18 */
}
/* Effet doux sur les drapeaux */

.language-switcher {
  display: flex;
  align-items: center;
}

.language-switcher .nav-item {
  list-style: none;
}

.language-switcher .nav-link {
  display: flex;
  align-items: center;
  gap: 0rem;
}

.transition-flag {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.transition-flag:hover {
  transform: scale(1.08);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}