.row-cats .slider-cta__title {font-size:60px;color:#00a5e7;font-weight:300;letter-spacing:-2.75px;display:block;margin-left:0;}
.row-cats .slider-cta__description {font-size:18px;color:#727272;font-weight:300;display:block;margin:15px 0 40px 5px;}
 
.slider-cta__title {font-size:36px;color:#002c32;font-weight:300;letter-spacing:-2.25px;display:inline-block;margin-left: 6px;}
a.slider-cta__link {font-size:18px;color:#727272;font-weight:300;display:inline-block;margin-left:20px;    text-decoration: underline 1px rgba(35, 31, 32, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 300ms, text-underline-offset 300ms;}

.slider-container .splide__track { overflow: hidden !important; }

.slider-container .splide__slide {
  display: block;          /* back to normal boxes */
  height: 100% !important; /* match the track’s inline height (set by Splide) */
}

body.blog .related-card__media img.wp-post-image, body.blog .row-cats .related-card__media img {
 width: 100%;
  height: 100%;
  object-fit: cover;            /* crop edges, keep aspect ratio */
  object-position: center;      /* center horizontally + vertically */
  display: block;
  transition: transform .25s ease;
}
body.blog a:hover .related-card__media img.wp-post-image {
  transform: scale(1.1);
}
body.blog .splide a:hover h3 {
  color:#01719b;
}

body.blog .row-cats .splide a:hover h3 {
    color:#e5f9ff;}
body.blog .section-separator {
  width: 85%;              /* shorter line */
  height: 0;
  background-color: #a6ddf3;
  margin: 2rem auto;         /* auto centers it */
}
/* keyboard users too */
body.blog a:focus-visible .related-card__media img.wp-post-image {
  transform: scale(1.1);
}


/* === Featured block ====================================================== */


.articles-recents {width: 100%!important;
    display: block;
    background-image: url('../img/bg-recent-artciles-home.png');
    background-repeat:repeat-x;
    background-position: center -25px;}

.featured-link:hover .home-featured__title {color:#01719b}

.home-featured {
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:48px;
  align-items:center;
  margin:48px 0 52px 150px;
}

.home-featured__media{
    margin: 0 0 .75rem;
    aspect-ratio: 16 / 11;
    

    position: relative;
}



.home-featured__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
    border-radius: 25px;
    margin-bottom: 0;
}

/* “EN VEDETTE / FEATURED” pill */
.home-featured__badge{
     position: absolute;
    top: -13px;
    right: 25px;
    display: inline-block;
    padding: 9px 30px;
    font-size: 11px;
    letter-spacing: .08em;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    background: #002c32;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

/* Right column */
.home-featured__content{
  max-width:720px;
}

.home-featured__title {
  font-size: 38px;
  line-height:1.1;
  letter-spacing:-2px;
  color:#002c32;                  /* your dark heading color */
  margin:0 0 14px;
    font-weight:500
}

.home-featured__excerpt{
  color:#000000;                  /* body color */
  font-size:18px;
  line-height:1.6;
  margin:0 0 18px;
}

.home-featured__excerpt p{ margin:0 0 10px; }

.home-featured__cta .btn-link{
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  font-weight:500;
  text-decoration: underline 1px rgba(7,47,51,.3);
  text-underline-offset: 3px;
  transition: text-underline-offset .25s, text-decoration-color .25s, transform .2s;
    color:#002c32;
    font-size:18px;
}

.featured-link:hover .home-featured__cta .btn-link{
     text-decoration: underline 1px rgba(7,47,51,.3);
    color:#01719b;
}

/* Arrow that inherits the link color (stroke) */
.home-featured__cta .btn-link::after{
  content:"";
  width:1.1em;
  height:1.1em;
  display:inline-block;
  transform: translateY(1px);     /* optical alignment with text */
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 5l7 7-7 7'/%3E%3C/svg%3E");
  transition: transform .2s ease;
}

/* Nice nudge on hover/focus */
.featured-link:hover .home-featured__cta .btn-link::after{
  transform: translate(3px,1px);
    color:#01719b;
}



/* === Responsive ========================================================== */
@media (max-width: 1024px){
  .home-featured{ gap:28px; }
}

@media (max-width: 860px){
  .home-featured{
    grid-template-columns: 1fr;
    gap:22px;
    margin:32px 0 56px;
  }
  .home-featured__media{ order:-1; }
  .home-featured__title{ font-size: clamp(26px, 6vw, 36px); }
}



.slider-container .splide__slide img { display:block; }
.slider-container.row-latest-anywhere {margin-bottom:80px;}
.slider-container.row-1 {margin-top:50px}
.slider-container.row-2 {margin-top:80px}
.slider-container.row-3 {margin-top:80px}
.slider-container.row-cats {margin-top:60px}

@media (max-width: 640px) {.slider-container { height: auto; }
}

/* Circle button shell */
.slider-container .splide__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #bfc7cd;            /* circle ring */
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  display: flex;                         /* center the icon */
  align-items: center;
  justify-content: center;
  opacity: 1;
  cursor: pointer;
}

/* hide Splide’s default chevron */
.slider-container .splide__arrow svg, .slider-container .latest-anywhere__arrow svg { display: none; }

/* arrow icon (shaft + head) */
.slider-container .splide__arrow::before, .slider-container .latest-anywhere__arrow::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #7b8794;                   /* arrow color */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">\
<path d="M4 12h12"/>\
<path d="M13 7l5 5-5 5"/>\
</svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">\
<path d="M4 12h12"/>\
<path d="M13 7l5 5-5 5"/>\
</svg>') no-repeat center / contain;
}

/* prev arrow = same icon rotated */
.slider-container .splide__arrow--prev::before, .slider-container .latest-anywhere__arrow--prev::before { transform: rotate(180deg); }

/* states */
.slider-container .splide__arrow:hover, .slider-container .splide__arrow:focus-visible, .slider-container .latest-anywhere__arrow:hover, .slider-container .latest-anywhere__arrow:focus-visible  {
  border-color: #8fa0ad;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.slider-container .splide__arrow:disabled, .slider-container .latest-anywhere__arrow:disabled {
    opacity: .3;
}
.slider-container .splide__arrow.is-disabled, .slider-container .latest-anywhere__arrow.is-disabled { opacity: .35; cursor: default; }

/* keep your existing positioning (or use your own) */
.splide__arrow { top: 37%; }
.row-cats .splide__arrow { top: 48%; }
.splide__arrow--next { right: -22px; }
.splide__arrow--prev { left: -22px; }
.splide__slide a {
  display: block;
  padding: 0 0 14px;   /* left/right like you had on h3, plus bottom padding */
}

/* keep your h3 style but remove bottom/side margins (margins don't count in height) */
.splide h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: #002c32;
  letter-spacing: -1px;
  text-decoration: underline 1px rgba(0, 44, 50, 0);
  transition: text-decoration-color 300ms, text-underline-offset 300ms;
  margin: 20px 10px 0 10px;     /* was: 20px 10px 0 10px */
}

.slider-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0 25px 5px;
}
.slider-filter__btn {
    font-family: 'HCo Gotham SSm', Arial, Helvetica, Sans-serif;
  appearance: none;
  border: 1px solid #abe4fa;
  background: #fff;
    color:#00a5e7;
    text-transform:uppercase;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 11px;
    font-weight:600;
  line-height: 1;
  cursor: pointer;
}
.slider-filter__btn:hover {
  border: 1px solid #00a5e7;
  background: #fff;
    color:#00a5e7;
  
}
.slider-filter__btn.is-active {
  border-color: #e3f6fd;
  background: #e3f6fd;
  color: #00a5e7;
}
.slider-filter.is-loading { opacity: .6; pointer-events: none; }

.slider-filter { position: relative; }

/* keep your existing .slider-filter and .slider-filter__btn rules */

/* replace your current .slider-filter.is-loading::after (absolute) with: */
.slider-filter::after {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;           /* behaves like a small flex item */
  margin-left: 4px;
  border: 3px solid rgba(0,0,0,.2);
  border-top-color: #00a5e7; /* brand color */
  border-radius: 50%;
  animation: px-spin .6s linear infinite;
  opacity: 0;                /* hidden by default, keeps layout if you prefer: visibility:hidden */
  pointer-events: none;
}

/* show spinner only while loading */
.slider-filter.is-loading::after { opacity: 1; }

@keyframes px-spin { to { transform: rotate(360deg); } }

/* OPTIONAL: if you don’t want the buttons to dim while loading, remove opacity and keep only click-block: */
/* .slider-filter.is-loading { pointer-events: none; } */

/* === Category slide overlay style === */
.cat-slide a {
  position: relative;
  display: block;
  border-radius: 12px;          /* matches your rounded images */
  overflow: hidden;       
    padding:0; /* clip overlay */
}

/* keep your existing image rules; add aspect to reserve height */
.cat-slide .related-card__media {margin:0}
.cat-slide .related-card__media img { width:100%; height:100%; object-fit:cover; display:block; }

/* blue overlay shape (bottom-right) */
.cat-slide a::after {
  content: "";
    background: url('../img/dossier-list-form.png') no-repeat;
  position: absolute;
right: -16px;
    bottom: -39px;
    width: 351px;
  height: 183px;
  z-index: 1;
}

/* title on top of the overlay */
h3.cat-slide__title {
  position: absolute;
  right: 18px;
  top: 56%;
  margin: 0;
  z-index: 2;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
    text-align:right;
  max-width: 40%;              /* keeps long titles tidy */
  text-decoration: none;        /* override your underline */
}

/* circular arrow button (bottom-right) */
.cat-slide__arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  z-index: 3;
  cursor: pointer;
}

/* arrow glyph inside the circle (mask so you can recolor via background) */
.cat-slide__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: #fff;  /* arrow color */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">\
<path d="M4 12h12"/>\
<path d="M13 7l5 5-5 5"/>\
</svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">\
<path d="M4 12h12"/>\
<path d="M13 7l5 5-5 5"/>\
</svg>') no-repeat center / contain;
}

/* hover / focus – subtle lift + image zoom matches your style */


.cat-slide a:hover .cat-slide__arrow,
.cat-slide a:focus-visible .cat-slide__arrow {
  border-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  cursor: pointer;
}

/* responsive tweaks */
@media (max-width: 640px) {
  .cat-slide__title { right: 14px; bottom: 14px; font-size: 18px; }
  .cat-slide__arrow { right: 14px; bottom: 14px; width: 30px; height: 30px; }
  .cat-slide__arrow::before { width: 14px; height: 14px; }
  .cat-slide a::after { height: 50%; }  /* a bit taller on small screens */
}

/* header row with arrows on the right */
.row-latest-anywhere .latest-anywhere__header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.row-latest-anywhere .slider-cta__title { font-size:30px;color:#002c32;font-weight:300;letter-spacing:-2.25px;display:inline-block;}
.row-latest-anywhere .slider-cta__subtitle { margin:15px 0 0 6px ;padding-bottom:20px; opacity:.8; font-size:18px;}
.row-latest-anywhere .splide__list {padding: 8px 0; }
.row-latest-anywhere .splide__trac {overflow: visible !important;}
.row-latest-anywhere .splide__slide { padding: 6px;  }
/* arrow controls  */
.latest-anywhere__controls{ display:flex; gap:.75rem; align-items:center; }
.latest-anywhere__arrow{width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #bfc7cd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    display: flex
;
    align-items: center;
    justify-content: center;
    opacity: 1;cursor: pointer;
}
.latest-anywhere__arrow:focus{}

/* card */
.splide__slide a.latest-card{
  display:flex; gap:14px; padding:0; background:#fff; border-radius:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.06); text-decoration:none; color:inherit; min-height: 160px
}
.latest-card__media{
  width:240px; max-width:45%; aspect-ratio:4/3;border-radius: 12px 0 0 12px; overflow:hidden; flex:0 0 auto;
}
.latest-card__media img.wp-post-image { width:100%; height:100%; object-fit:cover; display:block;border-radius:0;transition: transform .25s ease;}
body.blog a:hover .latest-card__media img.wp-post-image {
  transform: scale(1.1);
}
.latest-card__body{ display:flex; flex-direction:column; gap:8px; justify-content: flex-start;
    padding: 15px 6px 5px 0; }
.latest-card__kicker{font-size: 12px;
    letter-spacing: 0px;
    opacity: .7;
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}
.splide h3.latest-card__title{
  font-size:18px; line-height:1.25; letter-spacing:-1px; margin:0;
}

/* Splide sizing */
.splide--latest-anywhere .splide__list{ align-items:stretch; }
.slider-container .splide--latest-anywhere .splide__slide{ height:auto; }
@media (max-width: 1080.98px){
  .latest-card__media{ width:200px; }
    
    .breadcrumb-search-wrapper {
  margin-top: 91px;
}
    
    .article-hero-top-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
    
    .article-hero-top-container-left {
  width: 100%;
}
    .article-hero-top-container-right {
  width: 100%;
        margin-top: 30px;
}
    
    h1.article-hero__title.grand-titre.accueil-blog {
 
  width: 100%;
  margin: 20px 0 0 0;
}
    
    .home-subtitle {
 
  width: 100%;
}
    
    .home-subtitle {
 
  font-size: 32px;
  color: #002c32;
        font-weight:300;
  letter-spacing: -2px;
}
    .home-featured {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin: 20px 0 40px 0;
}
    
    .container-full-width-content.section.accueil-blogue::after {

  top: 104px;
}
    
}
@media (max-width: 768px){
  .latest-card{ flex-direction:column; }
  .latest-card__media{ width:100%; max-width:100%; }
    
    .latest-card__media {
  border-radius: 12px 12px 0 0;
    }
      .home-featured {
    display: flex;
    flex-wrap: wrap;
          gap:0;
  }
    .slider-container.row-latest-anywhere {
  display: none;
}
      .home-featured__media {
    width: 100%;
  }
    .home-featured__content {
  width: 100%;
        padding: 10px;
}
}

@media screen and (max-width:576.98px) {
    .splide__arrow--next { right: -5px; }
.splide__arrow--prev { left: -5px; }
    
    .container-full-width-content.section.accueil-blogue::after {
  background: none;
}
    h1.article-hero__title.grand-titre.accueil-blog {
letter-spacing: -3.50px;
  line-height: 52px;
  font-size: 56px;
}
      .home-subtitle {
    font-size: 24px;
    letter-spacing: -1px;
    line-height: 1.2;
  }
    
    .bolg-search-title {
  font-size: 15px;

  padding-left: 12px;
}
      .home-featured__title {
    font-size: 27px;
    letter-spacing: -1px;
  }
    
    .slider-container.row-1 {
  margin-top: 0;
}
    
    a.slider-cta__link {
  font-size: 16px;
    font-weight: 300;
  display: block;
  margin-left: 9px;
  margin-top: 5px;
}
    .slider-container.row-2 {
  margin-top: 0;
}
    .slider-container.row-3 {
  margin-top: 20px;
        margin-bottom: 40px;
}
     .breadcrumb-search-wrapper {
    margin-top: 78px;
  }
    
    .articles-recents {
  background-image:none;
}
    .slider-cta__title {
  font-size: 30px;
 
}
    
}