/*!
Theme Name: JacquesUrbanska_SwpTheme
Theme URI: http://underscores.me/
Author: Jacques Urbanska
Author URI: http://jacques-urbanska.be
Description: Cassiel - just another blog, but my blog !
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE

This theme, like WordPress, is licensed under the GPL.

JacquesUrbanska_SwpTheme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/***** TEMP *****/

.juPostFeaturedImage img {
    max-width: 100%;
    height: auto;
}

/***** ToCheck *****/

.home .attachment-blog-thumb { 
border:none;
-webkit-transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
-ms-transition: opacity 0.1s ease-in-out;
height: 1px;
width: 100%;
}
#content.home {
    margin-top: 50px !important;
}
.home img {
    border-radius: 0px;
}
.home .excerpt {
    font-size: 0;
}
.home .excerpt:hover {
    background: var(--ju-accent);
}
.title-post-home.none.show {
    position: fixed !important;
    top: 100px !important;
    font-size: 10px !important;
    display: block !important;
}
.headerLeftColumn {
    flex-basis: 15% !important;
}
.titrePost::first-letter {
  color: var(--ju-accent);
}


/*
/******************** GENERAL ********************
*/

:root{ /* pour pouvoir changer red en blue (site de cassiel */
  --ju-accent: red;
  --ju-accent-strong: #d00; /* si besoin */
}

/*************** RESPONSIVE **********/

/***** <= 480px *****/
@media (max-width: 480px) {}

/***** <= 768px *****/
@media (max-width: 768px) {
	body.single.content75 article {
	width: initial;
	margin: auto;
}
}

/***** <= 1024px *****/
@media (max-width: 1024px) {
    .wp-block-template-part.tp-ju-sidebar1-part{
        display: none;
  }
  .pageClassicContent {
    width:80%;
  }
  body .juHomeContent {
    max-width: 90% !important;
  }
}

/***** <= 1280px *****/
@media (max-width: 1280px) {
  body .juHomeContent {
    max-width: 80%;
  }
}
/***** <= 1200px *****/
@media (max-width: 1200px) {
body .juLayout-3col,
body .juLayout-2col {
    padding: 0px;
}
}
/***** 481–768 *****/
@media (min-width: 481px) and (max-width: 768px) {}

/***** 769–1024 *****/
@media (min-width: 769px) and (max-width: 1024px) {}

/***** 1025–1280 *****/
@media (min-width: 1025px) and (max-width: 1280px) {}

/***** >= 1281px *****/
@media (min-width: 1281px) {}

/*************** Structure général **********/

/* resets légers */
body { margin: 0; }

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* médias responsive */
embed, iframe, object { max-width: 100%; }
img { height: auto; max-width: 100%; }

/* tables (si tu n’as rien d’autre) */

table { 
  width: 100%; 
}
body {
  font-family: var(--ju-font-base);
  font-size: 16px;
  line-height: 1.5;
}
body .wp-block-column.juCol-left { /* enlève flex-star sur colone pour que le menu sticky fonctionne) *****/
    align-self: stretch; 
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ju-font-base);
}

/*************** Structure Template général **********/

.juFrontPage, /* homepage */
.juPage2Col,
.juPage3Col,
.juLayout-3col, /* single post */
.juSinglePost3Col, /* single post */
.juLayout-2col {
    padding: 30px;
}
.juCol-content {
    margin-top: 10px;
}
.juPageContent #primary,
.juPostContent #primary {
    padding-right: clamp(16px, 5vw, 48px);
}
@media screen and (max-width: 1400px){
.juCol-sidebar {
  display: none;
}
.juCol-content {
  flex-basis: 90% !important;
}
body .arrowTitle::before, 
.lostTitle::before {
  margin-left: 0px;
}
}
@media screen and (max-width: 780px){
.juPageContent #primary,
.juPostContent #primary {
    padding-right: 0;
}
}

/* Glitch line (1px) */
.ju-glitch-line{
  position: fixed;
  top: 0;
  left: 0;
  height: 0.5px;              /* épaisseur */
  width: 0;                 /* sera set en JS */
  background: red;
  z-index: 999999;
  pointer-events: none;
  display: none;
  transform-origin: 0 50%;  /* rotation depuis la gauche */
}

/* Content plus petit */

.single.content75 article {
	width: 75%;
	margin: auto;
}

/***** HEADER juCol-left *****/

.juCol-left a{
  color: #000;
}
.juCol-left a::first-letter{
  color: #000;
  display: inline-block;
  transition: color 1s ease-in-out !important;
}

.juCol-left a:hover::first-letter{
  color: var(--ju-accent);
}

/*************** DISPLAY NONE **********/

.wp-block-search__label,
.rss-widget-feed {
    display: none;
}

/*************** Title General **********/

body .juSiteTitle a { /* TITRE wp-block-site-title */
text-decoration: none;
font-size: 1em;
letter-spacing: 3px;
font-weight: 700;
}
/* animation title (via js) */
body .juSiteTitle a .tchar{
  display:inline-block;
  color:#000;
  transition: color 1s cubic-bezier(.42,0,.58,1);
  will-change: color;
}
.juSiteTitle a .tchar.is-red{ color:#d00; }

@media (prefers-reduced-motion: reduce){
  .juSiteTitle a .tchar{ transition:none; }
}
/* END animation title (via js) */
.arrowTitle {
    font-size: 1em;
    font-weight: 800;
    margin-top:8px;
    padding-bottom: 10px;
}
.arrowTitle::before,
.lostTitle::before {
  content: "----------------> ";
  color: var(--ju-accent);
  margin-left: -30px;
  font-weight: 400;
}
.articleAlone h2 { /* Titre des articleAlone */
	font-size: 1.2em;
}

/*************** LINKS **********/

a.linkClean {
  text-decoration: none !important;
  color: inherit !important;
}

:root .wp-block-post-title a:hover {
  text-decoration: none;
}

.wp-block-post-title a,
.juCol-sidebar a,
.loopPostAgenda .loopPostTitle a {
  color: #000;
  text-decoration: none;
  transition: color 1s ease;
  border-bottom:none !important;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible,
.juCol-sidebar a:hover,
.juCol-sidebar a:focus-visible:hover,
.loopPostAgenda .loopPostTitle a:hover {
  color: var(--ju-accent);
}

figure.loopPostImg a img {
  transition: filter .75s ease-in-out;
}

figure.loopPostImg a:hover img { 
  filter: saturate(140%) hue-rotate(-15deg) contrast(1.1); 
}

/* Base : liens du contenu = couleur du texte, jamais soulignés (inclut visited) */
.juCol-content a,
.juCol-content a:visited {
  text-decoration: none !important;
  color: inherit;
}

/* Bordure seulement sur liens "texte" (pas d'icône, pas linkClean, pas lien qui contient une image) */
.juCol-content a:not(.ju-icon):not(.linkClean):not(:has(img)) {
  border-bottom: 1px dotted #a3a3a3;
  transition: color 200ms ease-in-out;
}

/* Hover uniquement pour ces mêmes liens texte */
.juCol-content a:not(.ju-icon):not(.linkClean):not(:has(img)):hover,
.juCol-content a:not(.ju-icon):not(.linkClean):not(:has(img)):focus-visible {
  color: var(--ju-accent);
}

/* Sécurité : si un lien contient une image, aucune bordure */
.juCol-content a:has(img) {
  border-bottom: 0 !important;
}

/*************** Img Images **********/

body:not(.front-page):not(.home) .juCol-content img {
	border: 1px solid;
	color: #ccc;
}
.noBorder {
	border: none !important;
}
.juCol-content a img:hover {
	border-color: var(--ju-accent);
}
.wp-caption .wp-caption-text {
  text-align: right;
font-size: 0.8em;
color: #ccc;
margin-right: 10px;
}
figure.wp-block-image {
	margin: 20px 0px;
}

/*************** Bouton Button **********/

.wp-block-button {
	font-size: 0.8em;
}
.juButBloc {
	margin-bottom: 30px;
}
.juButton100 {
	width: 100%;
	color: #fff;
}
.juButton100 .wp-element-button {
	background: #000;
	padding: 0px;
	clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
	transition: color .25s ease;
}
.juButton100 .wp-element-button:hover {
	color: #fff !important;
	clip-path: polygon(0 0, 99% 0, 100% 100%, 1% 100%);
	box-shadow: inset 0 -2px 0 0 var(--ju-accent);
}
.juButton50 {
	width: 50%;
	color: #fff;
}
.juButton50 .wp-element-button {
	background: #000;
	padding: 0px;
	clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
	transition: color .25s ease;
}
.juButton50 .wp-element-button:hover {
	color: #fff !important;
	clip-path: polygon(0 0, 99% 0, 100% 100%, 1% 100%);
	box-shadow: inset 0 -2px 0 0 var(--ju-accent);
}


/*************** ICONS **********/

.ju-icons{ 
    display:flex; 
    gap:8px; 
    align-items:center; 
    flex-wrap:wrap; 
}
.ju-icon{ 
    display:inline-flex; 
    line-height:0; 
  color:#505050;
  transition: color 200ms ease-in-out;
  margin: 5px 0px 5px 0px;
}
.ju-icon:hover{
  color:var(--ju-accent);
}
.ju-icon svg{ 
    width:20px; 
    height:20px; 
    display:block; 
    fill: currentColor; 
}
a.ju-icon-linkedin svg{ /* l'icone à l'air plus petit, donc on augmente la taille *****/
  height: 24px !important;
}

/*************** Bloc **********/

.juColorBloc {
  margin-top: 30px;
  border-top: 1px dashed #ccc;
  padding: 30px;
  margin-bottom: 30px;
}
.juColorBloc h1 {
	font-size: 1em;
	background: black;
	color: #fff;
	padding: 1px 10px;
	text-align: center;
}

.backGrey {
  background: #F9F9F9;
  background-size: 6px 6px;
}
.backBlue {
  background: #EDF6FF;
  background-size: 6px 6px;
}
.backYellow {
  background: #fff14b;
  padding: 40px;
}
.backLinear {
  background: linear-gradient(45deg,#ccc 1%,#fff 1%,#fff 49%,#ccc 49%,#ccc 51%,#fff 51%,#fff 99%,#ccc 99%);
  background-size: 6px 6px;
}
.backLinearBold {
  background: linear-gradient(45deg,#898ab7 1%,#fff 1%,#fff 49%,#898ab7 49%,#898ab7 51%,#fff 51%,#fff 99%,#898ab7 99%);
  background-size: 6px 6px;
}
.backLinearInfos {
  background: linear-gradient(45deg,#898ab7 1%,#fff 1%,#fff 49%,#898ab7 49%,#898ab7 51%,#fff 51%,#fff 99%,#898ab7 99%);
  background-size: 6px 6px;
}

/*************** MENU **********/

/* Reset liste + “texte simple” */
.juHeaderVertPartMainMenu ul.menu,
.juHeaderVertPartMainMenu ul.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/***** MENU STICKY *****/

/* La colonne gauche devient un conteneur flex en colonne */
.wp-block-column.juCol-left{
  display: flex;
  flex-direction: column;
}

/* .juHeaderVert prend toute la hauteur disponible de la colonne pour permettre le skicky */
.juHeaderVert{
  flex: 1 1 auto;
}

/* Le sticky reste sur le bloc nav */
.juHeaderVertPartNav{
  position: sticky;
  top: 20px;
  z-index: 10;
  font-size: 1em;
}

/***** MENU NAVIGATION *****/

.juHeaderVertPartMainMenu li{
  margin: 0;
  padding: 0;
}

.juHeaderVertPartMainMenu a{
  display: block;
  text-decoration: none;
}

/* 1ère lettre item actif (et ancêtres) */
.juHeaderVertPartMainMenu .current-menu-item > a::first-letter,
.juHeaderVertPartMainMenu .current_page_item > a::first-letter,
.juHeaderVertPartMainMenu .current-menu-ancestor > a::first-letter,
.juHeaderVertPartMainMenu .current_page_ancestor > a::first-letter{
  color: var(--ju-accent);
}

/***** SOUS-MENU *****/

/* Sous-menus en accordéon */
.juHeaderVertPartMainMenu .sub-menu{
  display: none;          /* fermé par défaut */
  list-style: none;
  margin: 0;
  border-left: 2px dashed #000;
  padding-left: 10px;
}
/* ouvert => le sous-menu apparaît dans le flux (push-down) */
.juHeaderVertPartMainMenu li.submenu-open > .sub-menu{
  display: block;
}
/* Indicateur bracket sur items ayant des enfants */
.juHeaderVertPartMainMenu #primary-menu > li.menu-item-has-children > a::after {
  content: "⩖";           /* fermé */
  display: inline-block;
  margin-left: 6px;
}
/* bracket quand ouvert */
.juHeaderVertPartMainMenu #primary-menu > li.menu-item-has-children.submenu-open > a::after {
  content: "⩕";           /* ouvert */
}

/***** MENU MOBILE *****/

/* Toggle mobile (_s) */
.main-navigation{
  display: block;
  width: auto;
}

/* Desktop par défaut (> 780px) */
.menu-toggle{ display: none; }
.main-navigation ul{ display: block; }

/* Mobile @MEDIA <= 780px : hamburger + overlay full width (gradient) + panneau menu à droite */
@media screen and (max-width: 780px){

  /* bouton visible, liste cachée par défaut */
  .menu-toggle{ display: inline-flex; }
  .main-navigation ul{ display: none; }

  /* position du “bouton” quand menu fermé */
  .juHeaderVertPartMainMenu{
    width: auto;          /* override width:100% éventuel */
    position:fixed;
    top: 20px;
    left: auto;
    right: 12px;
    z-index: 9999;
  }

  /* bouton hamburger */
  .menu-toggle{
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
.juHeaderVert #site-navigation .menu-toggle {
	background: #fff;
	border: 1px solid;
}
  /* icône 3 barres */
  .menu-toggle__icon{
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
  }
  .menu-toggle__icon::before,
  .menu-toggle__icon::after{
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 180ms ease, top 180ms ease, background 180ms ease;
  }
  .menu-toggle__icon::before{ top: -8px; }
  .menu-toggle__icon::after { top:  8px; }

  /* ouvert via JS (_s) : overlay plein écran + contenu poussé à droite */
  .juHeaderVertPartMainMenu.toggled{
    top: 0;
    right: 0;
    left: auto;

    width: 50vw;        /* overlay */
    height: 100vh;
    overflow-y: auto;

    /* place pour le bouton */
    padding: 64px 16px 16px;

    /* overlay: opaque à droite -> transparent à gauche */
    background: linear-gradient(
      to left,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.95) 60%,
      rgba(255,255,255,0.00) 100%
    );

    /* aligne le “panneau” menu à droite */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .juHeaderVertPartMainMenu .sub-menu{
  border-left: 0;
  padding-left: 0;
  border-right: 2px dashed #a1a1a1 !important;
  padding-right: 10px !important;
  }
  /* liste visible en toggled */
.main-navigation.toggled > ul#primary-menu{
  display: block;
}

  /* panneau réel du menu (largeur) + align droite */
  .juHeaderVertPartMainMenu.toggled ul#primary-menu{
    width: 50vw;         /* ajuste ici: 66.666vw si tu veux 2/3 */
    margin: 0;
    padding: 0;
    text-align: right;
  }
  .juHeaderVertPartMainMenu.toggled ul#primary-menu a{
    text-align: right;
  }

  /* bouton reste accessible en haut à droite */
  .juHeaderVertPartMainMenu.toggled .menu-toggle{
    position: absolute;
    inset:0;
    top: 12px;
    right: 12px;
    left: auto;
  }

  /* hamburger -> croix (aria-expanded géré par JS _s) */
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon{
    background: transparent;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before{
    top: 0;
    transform: rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after{
    top: 0;
    transform: rotate(-45deg);
  }
}

/***** ju-lightbox *****/

.ju-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 24px;
}
.ju-lightbox.is-open { 
	display: flex; 
}
.ju-lightbox img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ju-lightbox__close {
  position: fixed;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 8px 10px;
  cursor: pointer;
  z-index: 1000000;
}

/***** PDF.js viewer *****/

body .ju-pdfbox {
	background: rgba(0, 0, 0, 0.15) !important;
}
.ju-pdfbox__close {
	background: red !important;
}
/* juPDFTextBloc - toggle texte brut pdf */ 

body .juPDFTextBloc.wp-block-accordion {
  padding: none;
  margin: none;
  background: none;
  transition: none;
}
body .juPDFTextBloc.wp-block-accordion:hover {
  background-color: none;
}
.juPDFTextBloc .wp-block-accordion-heading__toggle-title {
  font-size: 0.6em;
}
.juPDFTextBloc .wp-block-accordion-panel {
  font-size: 0.6em;
}
body .juPDFTextBloc .wp-block-accordion-item.is-open {
  background: linear-gradient(45deg,#898ab7 1%,#fff 1%,#fff 49%,#898ab7 49%,#898ab7 51%,#fff 51%,#fff 99%,#898ab7 99%);
  background-size: 6px 6px;
  padding: 10px;
}

/***** Blockquote *****/

.single-post blockquote,
.page blockquote {
  margin: 20px 0 30px;
  border-left: 5px solid #000;
  padding-left: 20px;
}
body .quoteRight blockquote {
  border-left: 0;
  border-right: 5px solid;
  width: 65%;
  margin-left: auto;   /* colle à droite */
  margin-right: 0;
  text-align: right;
  padding-right: 10px;
}

/***** JU: Translation link icon (EN/FR) *****/

.juTranslation {
  /* ajuste ici si tu veux l’aligner à droite, ou le placer sous le titre */
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.juTranslation .juTranslationLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border: 1px solid var(--ju-accent);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
}
a.juTranslationLink {
	border-color: red !important;
	font-size:0.8em;
}

/* Si Icons ou SVG*/

.juTranslation .juTranslationLink:hover,
.juTranslation .juTranslationLink:focus{
  text-decoration: none;
}

.juTranslation .juTranslationIcon{
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* SVG icons (simple badge with letters) */
.juTranslation .juTranslationIcon--en{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Ctext x='9' y='11.2' text-anchor='middle' font-family='Arial, sans-serif' font-size='7' font-weight='700' fill='currentColor'%3EEN%3C/text%3E%3C/svg%3E");
}

.juTranslation .juTranslationIcon--fr{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Ctext x='9' y='11.2' text-anchor='middle' font-family='Arial, sans-serif' font-size='7' font-weight='700' fill='currentColor'%3EFR%3C/text%3E%3C/svg%3E");
}

/* Screen-reader only */
.juSrOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/***** Cursor Mousse Pointer ju-cursor.js *****/

/* Par défaut, on laisse le curseur natif */
@media (pointer: fine) {
  html.ju-cursor-enabled body {
    cursor: none !important;
  }

  /* Exceptions utiles */
  html.ju-cursor-enabled input,
  html.ju-cursor-enabled textarea,
  html.ju-cursor-enabled select {
    cursor: text !important;
  }

  html.ju-cursor-enabled button,
  html.ju-cursor-enabled a,
  html.ju-cursor-enabled [role="button"],
  html.ju-cursor-enabled [role="link"] {
    cursor: none !important;
  }
}

/* Caché par défaut (activé par JS uniquement si conditions OK) */
.cursor,
.cursor2 {
  visibility: 0;
}

html.ju-cursor-enabled .cursor,
html.ju-cursor-enabled .cursor2 {
  display: block;
}

/* N’activer l’expérience custom cursor que sur pointeur fin (desktop) */
@media (pointer: fine) {
  html.ju-cursor-enabled body.home {
    cursor: none;
  }

  /* Garde le curseur I-beam dans les champs */
  html.ju-cursor-enabled body.home input,
  html.ju-cursor-enabled body.home textarea {
    cursor: text;
  }

  .cursor {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 10000;

    /* positionnement: JS met translate3d(x,y,0), CSS fait le -50%/-50% */
    transform: translate3d(0,0,0) translate(-50%, -50%);

    /* “outer ring” légèrement inertiel */
    transition: transform 160ms ease-out, background-color 160ms ease-out, opacity 160ms ease-out;
    will-change: transform;
  }

  .cursor2 {
    width: 5px;
    height: 5px;
	background: var(--ju-accent);
    border-radius: 999px;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 10000;
    transform: translate3d(0,0,0) translate(-50%, -50%);
    will-change: transform;
  }

/* hover: anneau rouge semi-transparent */
.cursor.is-hover {
  background-color: var(--ju-accent);
  opacity: 0.5;
}

/* clic: point qui grossit */
.cursor2.is-down {
  width: 50px;
  height: 50px;
  opacity: .5;
}

  /* états */
  .cursor.is-hover {
    opacity: 0.5;
  }
  .cursor2.is-hover {
    opacity: 1;
  }
  .cursor.is-down {
  transform: scale(1.2); /* ou ajuster */
  }
  .cursor2.is-down {
    width: 30px;
    height: 30px;
    opacity: 0.5;
  }
}

/* Respect reduce motion: on n’active pas l’effet (JS), mais au cas où */
@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor2 {
    transition: none !important;
  }
}

/***** Accordion Toggle Accordéon *****/

.wp-block-accordion {
  padding: 5px 15px 5px;
  margin: 20px 0px;
  background: #F0F0F0;
  transition: background-color 180ms ease-in-out;
}
.wp-block-accordion:hover {
  background-color: #EDF6FF;
}

/***** Special Class *****/

.contentJustify .entry-content {
	text-align: justify;
}
.endNotes {
	padding: 0px 0px;
}
.endNotes h3 {
	font-size: 1em;
}

/*
/******************** SIDEBAR ********************
*/

/***** Sidebar: semi-transparente, puis opaque au survol (smooth) *****/
body .juCol-sidebar .juSidebar {
  opacity: 0.4;
  transition: opacity 1s ease-in-out;
}
body .juCol-sidebar .juSidebar:hover {
  opacity: 1;
}
body h2.widget-title {
font-size:0.9em;
}
.widget-title::before {
    content:"⫍ ";
    color:var(--ju-accent);
}
.juSidebar ul {
list-style-type:none;
}

/***** Widget search *****/

.search-submit {
  display: none;
}
.search-field {
  width: 100%;
}

/***** Widget juSocial *****/

.juSocial .custom-html-widget{
  display: flex;
  justify-content: space-between; /* ou space-evenly */
  align-items: center;
  width: 100%;
}

.juSocial .custom-html-widget a.ju-icon{
  display: inline-flex;
  align-items: center;
}

.juSocial .custom-html-widget a.ju-icon svg{
  height: 18px;
  width: auto;
  display: block;
}
.juSocial a.ju-icon-linkedin svg{ /* l'icone à l'air plus petit, donc on augmente la taille */
  height: 22px !important;
}

/***** Widget rss *****/

.widget_rss .widget-title a.rss-widget-title::first-letter {
    color: red !important;
}
.widget_rss ul {
  padding-left: 0px;
}
.widget_rss ul li {
  font-size: 0.8em;
}
.widget_rss ul li::before {
  content: "⤳ ";
  color: var(--ju-accent);
}
.widget_rss ul li::after {
  content: "-----------";
  display: block;
  color: #d2d0d0;
}
.widget_rss .rss-widget-feed {
  display:none;
}
.widget_rss .rss-date {
  color: #d2d0d0;
  margin-left: 10px;
}

.juCol-sidebar .juSidebar .widget {
    padding: 10px 0 15px 0 !important;
    margin-bottom: 10px !important;
    gap: 0.3em;
}
.juCol-sidebar .juSidebar .widget:not(:last-child) {
    border-bottom: 1px dotted;
}

h2.sidebarTitles .sidebarTitleText{
  display: inline-block; /***** ou block *****/
  font-size:0.9em;
}
h2.sidebarTitles .sidebarTitleText::first-letter{
  color: red !important;
}
.sidebarTitles {
    margin-bottom: 10px !important;
}

.tp-ju-sidebar a { 
    text-decoration: none; 
}

.rssWidget .rssBloc li {
    font-size: 0.8em;
    margin-bottom: 7px;
}


/*
/******************** PAGES TEMPLATES ********************
*/

/**********  PAGE HOME **********/ 

/*.home .loopPostIMGHome {
    margin-top: 50px !important;
}
.home .loopPostBloc .post,
.home .loopPostBloc .post figure {
    margin-bottom: 0px !important;
}
.home .loopPostBloc .post a img {
    height:1px;
}
.home img:hover {
height: 100px !important;
}*/

.juHomeContent {
  max-width: 60%;
}
.home .loopPostIMGHome {
  position: relative;
  padding-top: 25px; /***** réserve la zone du titre *****/
  z-index: 1;
}
.home .loopPostBloc .wp-block-post,
.home .loopPostBloc .wp-block-post figure {
  margin-bottom: 0 !important;
}
/***** pile d’images *****/
.home .loopPostIMGHome .wp-block-post a img {
  height: 1.5px;
  width: 100%;
  display: block;
  object-fit: cover !important;
}
/***** instantané, mais ciblé sur ton loop *****/
.home .loopPostIMGHome .wp-block-post:hover a img {
  height: 100px !important;
}
/***** titre en haut de la pile *****/
.home .loopPostIMGHome .loopPostTitleHome {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  z-index: 10;
  font-size: 16px !important;
  line-height: 1.2;
  font-weight: 400;
}
.home .loopPostIMGHome .loopPostTitleHome a:before {
    content:"------------> ";
    color:var(--ju-accent);
	margin-left:-15px;
} 
.home .loopPostIMGHome .loopPostTitleHome a {
    color:var(--ju-accent);
	border-bottom:none !important;
}    
.home .loopPostIMGHome .wp-block-post:hover .loopPostTitleHome {
  opacity: 1;
}

/********** PAGE ARCHIVES > CATEGORIES **********/


.loopPostTitleGroup, 
.loopPostImg {
    padding: 0;
    margin-bottom: 10px !important;
}
.loopPostBloc .post {
    margin-bottom: 50px !important;
}
.loopPostTitle::before {
content: "----------------> ";
  color: var(--ju-accent);
  font-weight: 400;
  font-size: 0.7em;
  vertical-align: top;
}
.loopPostTitle a::first-letter {
    color: var(--ju-accent);
}
.loopPostTitle.wp-block-post-title :where(a) {
  display: initial;
}
.loopPostDate {
    font-size: 0.5em !important;
    color: gray;
    line-height: 1em;
    margin-top: -5px !important;
}
.post.category-stikypost {
    background: #efefef;
    padding: 10px;
}

.catLoopCol {
    padding: 0 50px 0 0px !important;
}

/* flèche avant le titre + 1re lettre rouge */
.archive.category .wp-block-query-title::before {
  content: "XXXXXXXXXXX ";
  color: blue;
  display: inline;
  font-weight: 800;
}
h2.loopPostTitle {
  font-size: 1.1em;
  font-weight: 400;
  font-variant: small-caps !important;
  line-height: 1em;
}
.archive.category .wp-block-query-title {
margin-bottom: 30px;
}
.archive.category .wp-block-query-title span {
  display: inline;
  font-weight: 800;
}
.archive.category .wp-block-query-title span::first-letter {
  color: var(--ju-accent);
}
/* espacements titre+date et image */
.catLoopCol .wp-block-group,
.catLoopCol .wp-block-post-featured-image {
  padding: 0;
  margin-bottom: 10px !important;
}

/* espace entre les items */
.catLoopCol .wp-block-post {
  margin-bottom: 50px !important;
}

/* flèche avant le titre + 1re lettre rouge */
.catLoopCol .wp-block-post-title::before {
  content: "-----> ";
  color: var(--ju-accent);
  display: inline;
}
.catLoopCol .wp-block-post-title > a {
  display: inline;
  color: inherit;
  text-decoration: none;
}
.catLoopCol .wp-block-post-title > a::first-letter {
  color: var(--ju-accent);
}

/* date */
.catLoopCol .wp-block-post-date {
  font-size: 0.5em !important;
  color: gray;
}

/* sticky (WordPress ajoute la classe .sticky sur l’<li>) */
.catLoopCol .wp-block-post.sticky {
  background: #efefef;
  padding: 10px;
}

/* Zéro espace partout dans la loop catégorie (.catLoopCol) */

/* 1) Couper le block-gap Core */
.catLoopCol { --wp--style--block-gap: 0; }
.catLoopCol.is-layout-flex,
.catLoopCol.is-layout-grid { gap: 0 !important; }

/* 2) Couper l’écart entre frères en flow */
.catLoopCol.is-layout-flow > * + * { margin-block-start: 0 !important; }

/* 3) À l’intérieur de chaque item (li.wp-block-post), coller les blocs */
.catLoopCol .wp-block-post > * + * { margin-block-start: 0 !important; }

/* 4) Empêcher le collapse de marges des enfants (titre, figure, p, etc.) */
.catLoopCol .wp-block-post > * { display: flow-root; }

/* 5) Neutraliser marges natives tête/pied dans chaque sous-section */
.catLoopCol .wp-block-post > * > :first-child { margin-top: 0; }
.catLoopCol .wp-block-post > * > :last-child  { margin-bottom: 0; }


/********** PAGE LOOP **********/



/********** PAGE AGENDA **********/

.loopPostAgenda .post {
    margin-bottom: 30px !important;
}
.fieldDates .value {
    font-weight: 400;
}
.fieldDates .value::first-letter {
    color:var(--ju-accent);
}
.loopPostAgenda .loopPostTitle a {
  border-bottom: none !important;
} 
.loopPostAgenda .loopPostTitle::before {
  content: none;
}
.loopPostAgenda .loopPostTitle a::before {
  content: "-----> ";
  color: var(--ju-accent);
} 
.loopPostAgenda .loopPostTitle a::first-letter {
    color: var(--ju-accent);
    display:inline !important;
}
.loopPostAgenda .loopPostTitleGroup {
    margin-left: 30px !important;
}
.loopPostAgenda .fieldLieu {
    margin-top: 0;
    color: #aaa9a9;
}
.loopPostAgenda .fieldLieu .value::before {
    content:">>> ";
}

/********** PAGE LOOP PAGINATION **********/

.loopPostPagination {
  font-weight: lighter !important;
  font-size: .8em !important;
  color: gray !important;
}
.loopPostPagination * {
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}
.loopPostPagination a:hover {
	color: red !important;
}

/********** PAGE NETWORKS **********/

.networksPage h2 {
  font-size: 1em;
}

/********** PAGE CONTACT **********/


.contactPage h2 {
  font-size: 1em;
}

/********** PAGE 404 **********/

.error404 .search-form.ju404-search {
  padding: 40px 40px;
  background: #f5f7fa;
}
.error404 .search-field {
  background: #e9f0ff;
  padding: 10px 20px;
}
.error404 .ju404-cats::before {
  content: "some categories ";
  color: var(--ju-accent);
}
.error404 .loopPostTitle404 {
  font-size: 1em;
  font-weight: 700;
  margin-top: 100px !important;
}
.error404 .loopPostTitle404::before {
  content: "/////// ";
  color: var(--ju-accent);
  font-weight: 400;
}

/*
/******************** POSTS TEMPLATE ********************
*/

/********** POST TEMPLATE .single-post.blogPost **********/

.juPostInfos {
  margin-top: 30px;
  border-top: 1px dashed var(--ju-accent);
  padding-top: 40px;
  padding: 30px;
  background: linear-gradient(45deg,#898ab7 1%,#fff 1%,#fff 49%,#898ab7 49%,#898ab7 51%,#fff 51%,#fff 99%,#898ab7 99%);
  background-size: 6px 6px;
}

/***** ===== Etat Focus + Intro ===== *****/

/***** état normal *****/
.single-post.articleAlone .juCol-left,
.single-post.articleAlone .arrowTitle,
.single-post.articleAlone .juCol-sidebar {
  opacity: 0.1;
  transition: opacity 1s ease-in-out;
  pointer-events: auto;
}

.single-post.articleAlone .juCol-left:hover,
.single-post.articleAlone .arrowTitle:hover,
.single-post.articleAlone .juCol-sidebar:hover {
  opacity: 1;
}

/***** intro auto (3s) *****/
.single-post.articleAlone .juCol-left,
.single-post.articleAlone .arrowTitle,
.single-post.articleAlone .juCol-sidebar {
  animation:
    juWritingRestIntro 3s ease-in-out 0s 1 backwards,
    juWritingPointerOn 3s step-end 0s 1 forwards;
}

@keyframes juWritingRestIntro {
  0%   { opacity: 1; }
  100% { opacity: 0.1; }
}

/***** coupe le hover pendant l'intro, réactive à la fin *****/
@keyframes juWritingPointerOn {
  0%, 99% { pointer-events: none; }
  100%    { pointer-events: auto; }
}

/***** ===== end intro *****/

.single-post .juPostCats.arrowTitle {
  color: #919191;
  font-weight: normal;
  font-size: 0.8em;
}

.single-post .postCategories {
    color: var(--ju-accent);
    font-size: 0.6em;
    font-weight: lighter;
}
.single-post .postCategories::before {
  content: "----------------> ";
  color: blue;
  margin-left: -30px;
}

.single-post .entry-title::before {
  content: "⫍ ";
}
.single-post .entry-title {
  margin-bottom: 0px;
  font-variant: small-caps;
  font-size: 1.3em;
  font-weight: 400;
}
.single-post .entry-title::after {
  content: " ⫎";
}
.single-post .posted-on {
  font-size: 0.8em;
  font-style: italic;
  color: #bfbdbd;
  margin-top: -5px;
  display: block;
  margin-bottom: 10px;
}
/***** Custom field SCF .juCustomFieldsBloc *****/
.juCustomFieldsBloc .juPostInfosTitle::before {
  content: "⫻";
  color: var(--ju-accent);
}
.juCustomFieldsBloc .juPostInfosTitle {
  font-size: 1.05em;
  display: inline-block;
  padding-bottom: 10px;
}
.juCustomField-datetime::before {
  content: "☉";
}
.juCustomField-location::before {
  content: "⚲";
}
.juCustomField-more::before,
.juCustomField-link1::before,
.juCustomField-link2::before {
  content: "☍";
}




.single-post.blogPost .titreGroupPost {
    width: 100%;
    background: #000;
    gap: 0;
    margin-top: -20px !important;
}
.single-post.blogPost .titreGroupPost > * {
  padding-left: 5px;
}
.single-post.blogPost .titrePost {
  padding-top:5px;
  color: white;
  font-size: 1em;
}
.single-post.blogPost .datePost {
  color: grey;
  font-style:italic;
}


/***** /////////////////////////// UNDERSCORE style à ventiler *****/


/***** === 2) Navigation _s (JS toggle => .toggled) === *****/


/***** === 3) Accessibilité WP (à garder) === *****/
.screen-reader-text{
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus{
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  left: 5px;
  position: absolute;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/***** skip-link target *****/
#primary[tabindex="-1"]:focus{ outline: 0; }

/***** === 4) Alignments Gutenberg (à garder si tu utilises alignleft/right/center) === *****/
.alignleft{ float: left; margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright{ float: right; margin-left: 1.5em; margin-bottom: 1.5em; }
.aligncenter{ clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }

/***** === 5) Captions / galleries (garde si tu utilises les galleries core) === *****/
.wp-caption{ margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"]{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text{ text-align: center; }

.gallery{ display: grid; grid-gap: 1.5em; margin-bottom: 1.5em; }
.gallery-item{ display: inline-block; text-align: center; width: 100%; }
.gallery-columns-2{ grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3{ grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4{ grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5{ grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6{ grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7{ grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8{ grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9{ grid-template-columns: repeat(9, 1fr); }
.gallery-caption{ display: block; }