.citation-ob {
    display: block;       /* permet d'utiliser margin auto */
    margin-left: auto;    /* centre horizontalement */
    margin-right: auto;   /* centre horizontalement */
    text-align: center;   /* centre le texte à l'intérieur */
    max-width: 80%;       /* limite la largeur sur grands écrans */
    font-size: 2rem;      /* taille du texte */
    position: relative;   /* nécessaire si tu as les guillemets décoratifs en ::before/::after */
    z-index: 1;           /* texte au-dessus des guillemets */
}


.citation-ob::before,
.citation-ob::after {
    content: "";
    position: absolute;
    width: 6rem;
    height: 6rem;

    background-image: url("https://collectiflouvreboites.fr/wp-content/uploads/2026/02/guillemet.svg");
    background-size: contain;
    background-repeat: no-repeat;

    pointer-events: none;
    z-index: -1; /* derrière le texte */
    opacity: 1;  /* visible */
}

/* ouvrant - décalage plus large */
.citation-ob::before {
    top: -2rem;       /* plus haut */
    left: -3rem;      /* plus à gauche */
    transform: rotate(180deg);
}

/* fermant - décalage plus large */
.citation-ob::after {
    bottom: -2rem;    /* plus bas */
    right: -3rem;     /* plus à droite */
}


.portrait-ob {
    display: block;
    margin: 0 auto;              /* centre horizontalement */
    width: 100%;                   /* prend 50% de la largeur du parent */
    height: auto;                 /* hauteur automatique pour garder les proportions */
    aspect-ratio: 1 / 1;          /* force un carré si nécessaire */
    object-fit: cover;            /* image couvre bien la zone */
    
    /* masque SVG pour découper l'image */
    -webkit-mask-image: url("https://collectiflouvreboites.fr/wp-content/uploads/2026/02/masque-photo.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;   /* s'adapte à la taille du div */
    -webkit-mask-position: center;
    
    mask-image: url("https://collectiflouvreboites.fr/wp-content/uploads/2026/02/masque-photo.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.bouton-ob {
    display: inline-block;          /* largeur adaptée au texte */
    background-color: white;      /* fond vert */
    color: #ffffff;                 /* texte blanc */
    padding: 12px 25px;             /* espace autour du texte */
    border: 2px solid #379150;      /* bordure verte */
    border-top-right-radius: 16px;  /* coin haut droit arrondi */
    border-bottom-left-radius: 16px;/* coin bas gauche arrondi */
    border-top-left-radius: 0;      /* coin haut gauche carré */
    border-bottom-right-radius: 0;  /* coin bas droit carré */
    font-size: 1em;                /* texte lisible */
    font-weight: bold;
    text-align: center;             /* centre le texte à l'intérieur */
    text-decoration: none;          /* supprime le soulignement */
    cursor: pointer;                /* curseur main */
    margin: 0 auto;                 /* centre horizontalement si parent block */
	width: 100%;
}

.bouton-ob:hover {
    background-color: white;      /* fond blanc au hover */
    color: white;                 /* texte vert au hover */
    text-decoration: none;          /* pas de soulignement */
}

h2 {
    color: #073446;           /* couleur du texte */
    font-size: 2.2rem;        /* plus petit que h1 */
    line-height: 1.2;         /* interlignage réduit */
    font-weight: bold;
    text-align: left;       /* centre le texte */
    position: relative;       /* nécessaire si tu veux un ::before décoratif */
    display: inline-block;    /* largeur adaptée au texte */
    margin: 0 auto;           /* centre horizontalement si parent block */
}

h3 {
    color: #073446;        /* même palette que le h2 */
    font-size: 1.8rem;     /* plus petit */
    line-height: 1.3;
    font-weight: 600;      /* un peu moins gras */
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
		text-align: center;
}

/* Image du bloc spectacle */
.bloc-spectacle {
    position: relative; /* nécessaire pour l'overlay */
    display: inline-block;
}

.bloc-spectacle img {
    display: block;
    border-radius: 50px 0 50px 0;
    transition: border-radius 0.3s ease;
}

/* Overlay vert */
.bloc-spectacle::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(55, 145, 80, 0.5); /* #073446 à 50% */
    border-radius: 50px 0 50px 0;          /* mêmes coins initiaux */
    opacity: 0;
    transition: opacity 0.3s ease, border-radius 0.3s ease;
    pointer-events: none;                   /* laisse cliquer sur l'image */
}

/* Hover */
.bloc-spectacle:hover img {
    border-radius: 0 50px 0 50px; /* inverse les coins */
}

.bloc-spectacle:hover::after {
    opacity: 1;
    border-radius: 0 50px 0 50px; /* overlay suit l'inversion */
}


.entry-content a {
  text-decoration: none;
	color:#379150;
}

.entry-content a:hover {
  text-decoration: none;
  border-bottom: 2px solid #379150;
  color: #379150;
}


.entry-title {
    position: relative;
    color: #379150;
    font-size: 3rem;          /* texte plus gros */
    font-weight: bold;
    line-height: 1.2;
    padding-left: 0rem;       /* juste assez pour le SVG large */
}

/* SVG décoratif en arrière-plan */


.entry-title {
    position: relative;
    padding-left: 1rem; /* décale le texte */
}

.entry-title::before {
    content: "";
    position: absolute;

    left: -1%;
    width: 3rem;
    height: 5rem;

    transform: translateY(-50%) rotate(-15deg);

    background-image: url("https://collectiflouvreboites.fr/wp-content/uploads/2026/02/circonflexe.svg");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
/* Conteneur pour lightbox */
.img-bloc-texte-lightbox {
    position: relative;
    display: inline-block;
    overflow: hidden; /* cache l'overlay */
}

/* Image avec coins arrondis initiaux */
.img-bloc-texte-lightbox img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50px 0 50px 0; /* coins initiaux : haut-gauche / bas-droit */
    transition: border-radius 0.3s ease;
}

/* Overlay invisible par défaut */
.img-bloc-texte-lightbox::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(55, 145, 80, 0.5); /* overlay vert à 50% */
    border-radius: 50px 0 50px 0;            /* coins initiaux identiques à l'image */
    opacity: 0;
    transition: opacity 0.3s ease, border-radius 0.3s ease;
    pointer-events: none;                     /* overlay non cliquable */
}

/* Hover sur le conteneur */
.img-bloc-texte-lightbox:hover img {
    border-radius: 0 50px 0 50px; /* coins inversés : haut-droit / bas-gauche */
}

.img-bloc-texte-lightbox:hover::after {
    opacity: 1;                     /* overlay visible */
    border-radius: 0 50px 0 50px;  /* overlay suit les coins inversés */
}

.img-bloc-texte img {
    display: block;          /* nécessaire pour border-radius fiable */
    width: 100%;
    height: auto;
    border-radius: 0 50px 0 50px; /* haut-gauche, haut-droit, bas-droit, bas-gauche */
    object-fit: cover;       /* si l'image a un ratio différent du conteneur */
}

.bloc-spectacle-bleu img {
  border-radius: 50px 0 50px 0;
  display: block;
}

.bloc-spectacle-bleu {
  position: relative;
  display: inline-block;
}

.bloc-spectacle-bleu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #073446;
  opacity: 0.6;
  border-radius: 50px 0 50px 0;
  pointer-events: none;
}

.bloc-spectacle-jaune img {
  border-radius: 50px 0 50px 0;
  display: block;
}

.bloc-spectacle-jaune {
  position: relative;
  display: inline-block;
}

.bloc-spectacle-jaune::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f2a905;
  opacity: 0.6;
  border-radius: 50px 0 50px 0;
  pointer-events: none;
}

.bloc-spectacle-vert img {
  border-radius: 50px 0 50px 0;
  display: block;
}

.bloc-spectacle-vert {
  position: relative;
  display: inline-block;
}

.bloc-spectacle-vert::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #379150;
  opacity: 0.6;
  border-radius: 50px 0 50px 0;
  pointer-events: none;
}

.bloc-spectacle-bleu img,
.bloc-spectacle-jaune img,
.bloc-spectacle-vert img {
  border-radius: 50px 0 50px 0;
  display: block;
  transition: border-radius 0.3s ease;
}

.bloc-spectacle-bleu:hover img,
.bloc-spectacle-jaune:hover img,
.bloc-spectacle-vert:hover img {
  border-radius: 0 50px 0 50px;
}

.bloc-spectacle-bleu::after,
.bloc-spectacle-jaune::after,
.bloc-spectacle-vert::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  border-radius: 50px 0 50px 0;
  transition: opacity 0.3s ease, border-radius 0.3s ease;
  pointer-events: none;
}

/* couleurs */
.bloc-spectacle-bleu::after { background: #073446; }
.bloc-spectacle-jaune::after { background: #f2a905; }
.bloc-spectacle-vert::after { background: #379150; }

/* hover */
.bloc-spectacle-bleu:hover::after,
.bloc-spectacle-jaune:hover::after,
.bloc-spectacle-vert:hover::after {
  opacity: 0;
  border-radius: 0 50px 0 50px;
}

.separateur {
  width: 40%;
  height: 6px;
  margin: 8% auto;
  padding: 0 20px;
  background: radial-gradient(circle, #073446 2px, transparent 2.1px);
  background-size: 16px 6px;
  background-repeat: repeat-x;
}

.wp-block-button__link {
  background-color: #379150 !important;
  color: #fff;
}

.main-navigation a{
	font-size: 15px !important;
  letter-spacing: 0px !important;
}