/* =========================================================
   1) NAVIGATION — MENU PRINCIPAL
   ========================================================= */

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation a:hover {
  color: #FFFFFF !important;   /* texte turquoise */
  background: none !important; /* pas de fond noir */
  text-decoration: none !important; /* pas de soulignement */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;          /* contour noir */
  transition: color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* contour noir fin */
}


/* =========================================================
   2) NAVIGATION — VARIANTE CONTOUR FIN
   ========================================================= */

.nav-contour-fin .wp-block-navigation-item__content,
.nav-contour-fin .wp-block-navigation-item__content:visited {
  color: #fff !important;
  -webkit-text-stroke: 0 transparent;
  -webkit-text-fill-color: #fff;
  text-shadow: none !important;
  transition: color 0.25s ease, -webkit-text-stroke 0.25s ease, -webkit-text-fill-color 0.25s ease;
}

.nav-contour-fin .wp-block-navigation-item__content:hover,
.nav-contour-fin .wp-block-navigation-item__content:focus {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.8px #fff;
  text-shadow: none !important;
}

@media (max-width: 781px) {
  .nav-contour-fin .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #000 !important;
    color: #fff !important;
  }

  .nav-contour-fin .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
  .nav-contour-fin .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none !important;
  }

  .nav-contour-fin .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
  .nav-contour-fin .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.8px #fff;
  }

  .nav-contour-fin .wp-block-navigation__responsive-container-close,
  .nav-contour-fin .wp-block-navigation__responsive-container-close svg {
    color: #fff !important;
    fill: #fff !important;
  }
}


/* =========================================================
   3) BOUTONS
   ========================================================= */

.wp-block-button__link {
  background-color: #fff;
  color: #000;
  border: none;             /* supprime le contour */
  transition: all 0.3s ease;
}

.wp-block-button__link:hover {
  background-color: #000;
  color: #fff;
}


/* =========================================================
   4) LIENS — EFFETS DE SOULIGNEMENT
   ========================================================= */



/* =========================================================
   5) IMAGES — EFFETS GÉNÉRAUX
   ========================================================= */

.img-zoom:hover {
  transform: scale(1.01);
  transition: transform 0.3s ease;
}

.img-zoom {
  filter: grayscale(100%);
  transition: filter 0.30s ease;
}

.img-zoom:hover {
  filter: grayscale(0%);
}

.img-zoom {
  transition: box-shadow 0.3s ease
}

.img-zoom:hover {
  box-shadow: 0 8px 20px rgba(255,0,0,0.10);
}

.img-zoomer {
  filter: grayscale(100%);
  transition: filter 1.00s ease;
}

.img-zoomer:hover {
  filter: grayscale(20%);
	cursor:url("https://somaghrib.fr/wp-content/uploads/2025/09/rond-blanc-2.png") 25 25, auto;
}

.post-thumbnail img {
  filter: grayscale(100%);
  transition: filter 0.6s ease;
}

.post-thumbnail img:hover {
  filter: grayscale(0%);
}


/* =========================================================
   6) IMAGES — BANNIÈRE HERO
   ========================================================= */

/* =========================================================
   IMAGES — BANNIÈRE HERO
   ========================================================= */

.wp-block-cover.banniere-hero {
  overflow: hidden;
}

.wp-block-cover.banniere-hero img {
  filter: grayscale(100%);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.wp-block-cover.banniere-hero:hover img {
  transform: scale(1.025);
  filter: grayscale(0%);
}


/* =========================================================
   7) IMAGES — DÉZOOM
   ========================================================= */

/* Effet de dézoom léger uniquement sur une image ciblée */
.image-dezoom img {
  transition: transform 0.8s ease, filter 0.8s ease;
  transform: scale(1.0); /* image légèrement zoomée par défaut */
}

.image-dezoom img:hover {
  transform: scale(0.95); /* dézoom au survol */
  filter: brightness(1.05); /* optionnel */
}


/* =========================================================
   8) TEXTE — CONTOURS ET STYLES
   ========================================================= */

/* Paragraphe normal avec la classe personnalisée */
.text-contour {
  color: black;
  transition: color 0.3s ease;
}

/* Les liens à l’intérieur */
.text-contour a {
  color: black; /* lien noir par défaut */
  text-decoration: none; /* optionnel : supprime le soulignement */
  transition: color 0.3s ease, -webkit-text-stroke 0.3s ease;
}

.paragraphe-contour {
  color: #fff;
  transition: color 0.3s ease, -webkit-text-stroke 0.3s ease;
}

.paragraphe-contour:hover {
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.paragraphe-contour a {
  color: inherit;
  -webkit-text-stroke: inherit;
  text-decoration: none;
}

.paragraphe-contour-2 {
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.paragraphe-contour-2 a {
  color: inherit;
  -webkit-text-stroke: inherit;
  text-decoration: none;
}

.bloc-contour-noir,
.bloc-contour-noir a {
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-decoration: none;
}

.categorie-contour,
.categorie-contour a {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.75px #fff;
  text-shadow: none !important;
  text-decoration: none;
  letter-spacing: 0.3px;
}


/* =========================================================
   9) TYPOGRAPHIE — UTILITAIRES
   ========================================================= */

.majuscules {
  text-transform: uppercase;
}

.letter-spacing-h2 {
  letter-spacing: 0.4px;
}

.letter-spacing-par {
  letter-spacing: 0.2px;
}


/* =========================================================
   10) LETTRINES
   ========================================================= */

.lettrine::first-letter {
  float: left;
  font-size: 4.5em;
  line-height: 0.9;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 4px;
}

.lettrine-35::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.9;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 4px;
}

.lettrine-40::first-letter {
  float: left;
  font-size: 4.0em;
  line-height: 0.9;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 4px;
}

.lettrine-50::first-letter {
  float: left;
  font-size: 5.0em;
  line-height: 0.9;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 4px;
}

.lettrine-55::first-letter {
  float: left;
  font-size: 5.5em;
  line-height: 0.9;
  font-weight: 700;
  margin-right: 10px;
  margin-top: 4px;
}


/* =========================================================
   11) RÈGLES PRIORITAIRES — À LAISSER EN BAS
   ========================================================= */

.image-dezoom-2 img {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), filter 1s ease;
  transform: scale(1);
}

.image-dezoom-2 img:hover {
  transform: scale(0.985);
  filter: brightness(1.01);
}

/* EFFET SUR NAVIGATION HOME PAGE */


.zone-lien-effet a {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.zone-lien-effet a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.zone-lien-effet a:hover::after {
  width: 100%;
}

 

.zone-lien-effet-2 a {
  position: relative;
  text-decoration: none;
}

.zone-lien-effet-2 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #fff; /* soulignement blanc */
  transition: width 0.3s ease;
}

.zone-lien-effet-2 a:hover::after {
  width: 100%;
}

.texte-contour-blanc {
  text-transform: uppercase;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.35px #ffffff;
  font-weight: 700;
}

.texte-contour-noir,
.texte-contour-noir p {
  margin: 0;
  text-transform: uppercase;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0.35px #000;
  font-weight: 700;
  line-height: 1;
}





.wp-block-cover.banniere-format {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.wp-block-cover.banniere-format .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 768px) {
  .wp-block-cover.banniere-format {
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 768px) {
  .image-mobile-46 {
    aspect-ratio: 4 / 6;
    overflow: hidden;
  }

  .image-mobile-46 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (max-width: 768px) {
  p.texte-mobile-45,
  .wp-block-paragraph.texte-mobile {
    font-size: 45px !important;
    line-height: 1.4;
		padding-top: 0px;
		padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 0px;
  }
}

@media (max-width: 768px) {
  .wp-block-columns.margin-mobile {
    margin-top: -30px !important;
  }
}