@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

.wp-dev-badge{display: none !important;}

/* Dans ton layout global */
@view-transition {
  navigation: auto;
}

:root{
  --odb-primary:#CC0839;
  --odb-primary-invert:rgb(0, 0, 0);
}

body, h1, h2, h3,h4,h5,li,a,p,input,textarea,label,button {
	font-family: "Albert Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	margin: 0;
}

p{text-align: justify;}

h1,h2,h3,h4{
  font-weight: 600;
}

h1{
color: #5A5A5A;
}

p:only-child{margin: 0;}

*{
  box-sizing: border-box;
}

.odbolt-space, :is(.elementor-section-wrap,[data-elementor-id])>.e-con{
	padding-left: var(--padd-odbolt-cont, 50px);
    padding-right: var(--padd-odbolt-cont, 50px);
}


/* GENERAL */

body{
	margin: 0;
  overflow-x: hidden;
}

.odbolt_icone{
    fill:none;
    stroke: #5A5A5A;
    stroke-width: 1.4;
}

a{
	text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

button{
    border:0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    padding: 0;
}

button, a {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.page{
	min-height: calc(100vh - var(--h_header,80px));
	display: flex;
	flex-direction: column;
}

main{
	flex:1;
}

:is(.elementor-section-wrap,[data-elementor-id])>.e-con>.e-con-inner,.odbolt-cont{
    max-width: var(--odbolt-cont, 1400px);
    margin: auto;
    width: 100%;
}

/* SIDEBAR */

.layout-left > .odbolt-cont, .layout-right > .odbolt-cont{
	display: flex;
	width: 100%;
	gap:var(--space-btw-sc, 40px)
}

.layout-left main, .layout-right main{
	width: calc(100% - var(--sidebar-width, 350px));
}

.layout-right main{
	order:2
}

aside.sidebar{
	width: var(--sidebar-width, 350px);
	background-color: aqua;
}

/* TOPBAR */

.topbar-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left{
  gap: 25px;
  display: flex;
}

.topbar-link{
  display: flex;
  align-items: center;
  gap:4px;
  line-height: 1;
}

.topbar-link svg{
  stroke: currentColor;
  height: 20px;
}

/* end TOPBAR */

/* HEADER */

.has-transparent-header #header_odbolt{
  position: relative;
  z-index: 9;
  background-color: transparent !important;
  margin-bottom: calc(-1 * var(--h_header, 80px));
}


.has-transparent-header #header_odbolt .site-logo{
  fill:white;
  color: white;
}

.in_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
  height: var(--h_header);
  
}


.in_header ul{
	padding: 0;
	margin: 0;
}



  
  
 /* ========================
     Button - Primary
  ======================== */


  .btn_odb {
	color: #5A5A5A;
	font-weight: 500;
	background-color: var(--odb-primary);
	border-radius: 8px;
	justify-content: flex-start;
	align-items: center;
	padding: 4px;
	display: inline-flex;
	position: relative;
	gap: 16px;
	text-decoration: none;

	&:hover {
		.btn_text span {
			transform: translateY(-100%);
			opacity: 0;
		}
		.btn_text::before {
			transform: translateY(0%);
			opacity: 1;
		}
		.cont_arrow {
			.arrow_static {
				opacity: 0;
				transform: translate(100%, -50%);
			}
			.arrow_hover {
				opacity: 1;
				transform: translate(-50%, -50%);
			}
		}
	}
}

.btn_text {
	position: relative;
	overflow: hidden;
	padding-right: 16px;
	transition: transform 0.3s, opacity 0.3s;
	display: inline-block;
  color: var(--odb-primary-invert);

	span {
		display: block;
		transition: transform 0.3s, opacity 0.3s;
	}

	&::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transform: translateY(100%);
		transition: transform 0.3s, opacity 0.3s;
		color: var(--odb-primary-invert);
		font-weight: inherit;
	}
}

.btn_cont_arrow {
	background-color: white;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	position: relative;
	overflow: hidden;

	svg {
		width: 18px;
		stroke-width: 1.8;
	}

  
}
.btn_cont_arrow{
  line-height: normal;
}

.btn_odb .btn_cont_arrow svg path{
    fill: transparent !important;
  }

.cont_arrow {
	position: relative;
	overflow: hidden;
	height: 18px;
	width: 18px;

	span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		transition: transform 0.3s, opacity 0.3s;
		line-height: 0;
	}

	.arrow_static {
		opacity: 1;
		z-index: 1;
		transform: translate(-50%, -50%);
	}

	.arrow_hover {
		opacity: 0;
		transform: translate(-100%, -50%);
		z-index: 2;
	}
}















































:root {
  /* 🎨 Palette principale */
  --color-bg: #f6f4f1;
  --color-clair: #eeeeee;
  --color-shadow: #5A5A5A0f;
  --color-title: var(--color-titleBlog, #5A5A5A);
  --color-excerpt: #5A5A5Ab7;
  --color-primary: var(--primary, #588cbd);

  /* 📐 Spacings */
  --space-section: clamp(2rem, 5vw, 5rem);
  --space-gap: clamp(1rem, 2vw, 1.5rem);
  --radius: 8px;

  /* 🖋️ Typography */
  --fs-title: clamp(1.3rem, 2.3vw, 1.3rem);
  --fs-excerpt: clamp(0.95rem, 1.5vw, 1rem);
  --fs-category: clamp(0.75rem, 1vw, 0.8rem);

  /* 📐 Grid */
  --grid-min: clamp(250px, 30vw, 380px);  /* Auto-adaptatif */
}

/* ==========================
STRUCTURE GLOBALE
========================== */


/* ==========================
STYLES COMMUNS AUX POSTS
========================== */
.odbolt-post-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
  transition: transform 0.3s ease;
}

.odbolt-post-thumb {
  overflow: hidden;
  line-height: 0;
  border-radius: var(--radius);
}

.odbolt-post-thumb img {
  aspect-ratio: var(--aspect-blog-img, 16/10);
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  
}

.odbolt-post-card:hover .odbolt-post-thumb img {
  transform: scale(1.1);
}

.odbolt-post-category {
  font-size: var(--fs-category);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: #5A5A5A;
  background-color: white;
  padding: 5px 12px;
  border-radius: 6px;
  position: absolute;
  top: clamp(10px, 2vw, 15px);
  left: clamp(10px, 2vw, 15px);
}

.odbolt-post-title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  color: var(--color-title);
}

.odbolt-post-excerpt {
  font-size: var(--fs-excerpt);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-excerpt);
  margin: 0;
}

/* ==========================
GRILLE BLOG OPTIMISÉE
========================== */
.blog_grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-col-blog, 3), 1fr);
  gap: 35px;
}

.odbolt-post-card .odbolt-post-content {
  padding: clamp(10px, 2vw, 15px);
  background-color: #eeeeee;
  border-radius: var(--radius);
}

.odbolt-post-card .odbolt-post-thumb {
  margin-bottom: 12px;
}

/* ==========================
LISTE BLOG OPTIMISÉE
========================== */
.blog_liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap);
  max-width: 1000px;
  margin: auto;
}

.blog_liste .odbolt-post-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap);
}

.blog_liste .odbolt-post-content {
  padding: clamp(1rem, 3vw, 1.875rem) clamp(10px, 2vw, 15px) 15px;
  max-width: 600px;
}

.blog_liste .odbolt-post-thumb {
  max-width: 380px;
  width: 100%;
  min-width: 128px;
}

/* ==========================
ANIMATION
========================== */
@keyframes appear {
  from {
      opacity: 0;
      scale: 0.95;
  }
  to {
      opacity: 1;
      scale: 1;
  }
}









































































































/* Grille responsive : 3 colonnes desktop, 2 tablette, 1 mobile */
.odb-image-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.odb-image-grid__item {
  cursor: pointer;
  overflow: hidden;
}
.odb-image-grid__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s;
  aspect-ratio: 1;
  height: 100%;
  object-fit: cover;
}

.odb-image-grid__item:hover img {
  transform: scale(1.05);
}

.embla-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgb(255, 255, 255);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;


.embla-lightbox {
  max-width: 100%;
  width: 100%;
  position: relative;
}

.embla__viewport {
  overflow: hidden;
  width: 100%;
  max-height: 100%;
}

.embla__container {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--odb-slide-gap, 1rem);
}

.embla__slide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.embla__slide img {
  max-width: calc(100% - 30px);
  max-height: 70vh;
  object-fit: contain;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Navigation Buttons */
.embla__button {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  bottom: 2rem;
  z-index: 10;
  transition: background 0.2s;
  background-color: #eeeeee;
  transition: .3s;
}



@media screen and (max-width:768px) {
  .embla__button {
    top: auto;
    transform: none;
  }
}

.embla__button--prev {
  left: 2rem;
}

.embla__button--next {
  right: 2rem;
}

.embla__button svg {
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
}

.embla__button--next svg {
  transform: rotate(0deg);
}

/* Dots */
.embla__dots {
  top: 1rem;
  left: 1rem;
  position: fixed;
  transform: none;
  max-width: 100px;
  flex-wrap: wrap;
  bottom: auto;
  justify-content: flex-start;
}

.embla__dot {
  border:solid 1.4px rgba(0, 0, 0, 0.2);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: .3s;
}

.embla__dot--selected {
  border-color: #5A5A5A;
  transform: scale(1.4);
}

/* Close Button */
.embla-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  border: none;
  cursor: pointer;
  z-index: 20;
  will-change: transform;
}
}



.is-draggable{
  cursor: grab !important;
   -moz-user-select: none; /* Firefox */
 -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 user-select: none; /* Propriété standard */
}

.is-dragging{
  cursor: grabbing !important;
}