/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

.right-section {
    padding-right: 40px;
    padding-left: 40px;
}
.fix-header {
    position: fixed;
    z-index: 9;
    max-width: 215px !important;
    left: 0;
    top: 0;
}
.right-section{
    width: calc(100% - 215px ) !important;
}
.left-section{
    width: 215px !important;
}
.single-content h1.elementor-heading-title, .single-content h2.elementor-heading-title, .single-content h3.elementor-heading-title, .single-content h4.elementor-heading-title, .single-content h5.elementor-heading-title, .single-content h6.elementor-heading-title {
    margin-bottom: 0 !important;
}
.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6 {
    margin: 0 !important;
}
/* =============================================================================
   News Grid Widget — news-grid-widget.css
   À placer dans /wp-content/themes/TON-THEME/css/
   ============================================================================= */


/* ── Grille principale ──────────────────────────────────────────────────────── */
.ngw-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background-color: #0d1b2a; /* surchargeable via Elementor */
}

.ngw-col {
    padding: 0;
}


/* ── Badge catégorie ────────────────────────────────────────────────────────── */
.ngw-badge {
    display: inline-block;
    background-color: #f5c518;
    color: #0d1b2a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 100px;
}
a.ngw-hero span.ngw-badge.ngw-badge--top {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

/* ── Style HERO ─────────────────────────────────────────────────────────────── */
.ngw-hero {
   position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-decoration: none;
    border-radius: 5px;
}

.ngw-hero img {
        inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .4s ease;
    border-radius: 5px;
    height: 548px;
}

.ngw-hero:hover img{
        filter: brightness(0.8);
}



.ngw-hero-body {
    position: relative;
    z-index: 2;
    padding: 15px 0 0;
}

.ngw-hero-body .ngw-badge {
    margin-bottom: 10px;
}

.ngw-hero-body h2 {
       margin: 0 0 6px;
    color: #ffffff;
    font-size: 1.6em;
    line-height: 1.2;
    font-weight: 600;
}


/* ── Style LISTE ────────────────────────────────────────────────────────────── */
.ngw-list {
    padding: 0 ;
}

.ngw-week-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #8899aa; /* surchargeable via Elementor */
    text-transform: uppercase;
    padding: 20px 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin: 0;
}

.ngw-list-item {
    padding: 10px 0;
}

.ngw-list-item:last-child {
    border-bottom: none;
}

.ngw-list-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ngw-list-item a:hover h3 {
    text-decoration: underline;
}

.ngw-list-item h3 {
   margin: 6px 0 4px !important;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
}


/* ── Style CARD ─────────────────────────────────────────────────────────────── */
.ngw-cards {
    padding: 0;
}

.ngw-card {
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.ngw-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: all .4s ease;
        border-radius: 5px;
}

.ngw-card:hover img{
        filter: brightness(0.8);
}



.ngw-card-body {
    padding: 10px 0 20px;
}

.ngw-card-body .ngw-badge {
    margin-bottom: 8px;
}

.ngw-card-body h3 {
    margin: 0 0 6px;
    color: #ffffff; /* surchargeable via Elementor */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
.ngw-card span.ngw-badge.ngw-badge--top {
    position: absolute;
    top: 10px;
    left: 10px;
        z-index: 1;
}

.ngw-card {
    position: relative !important;
}

/* ── Méta (temps relatif) ───────────────────────────────────────────────────── */
.ngw-meta {
    color: #8899aa; /* surchargeable via Elementor */
    font-size: .72rem;
    margin: 0;
}
.btn-flesh a {
    position: relative;
    padding-right: 30px !important;
}

.btn-flesh a:before {
    position: absolute;
    content: '';
    width: 30px;
    height: 100%;
    background: url(https://transquadra.test-sites.fr/wp-content/uploads/2026/05/Vector-1.svg);
    background-repeat: no-repeat;
    background-position: center;
    right: 0;
    top: 1px;
    transition: all .5s;
}
.btn-flesh a:hover:before{
    right: -5px;
} 
/* ═══════════════════════════════════════════════════════════════
   SKIPPERS SLIDER — skippers-slider.css
   À placer dans : /wp-content/themes/TON-THEME/assets/css/
   Enqueué via skippers_enqueue_assets() dans le shortcode PHP
═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
.sk-wrapper {
   --sk-blue: #173d83;
    --sk-yellow: #FFE500;
    --sk-white: #FFFFFF;
    --sk-text: #000;
    position: relative;
    background: 0;
    padding: 0;
}

/* ── Filtres ────────────────────────────────────────────────── */
.sk-filters {
        display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 0 35px;
        align-items: center;
}
span.tirer {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.sk-filter-btn {
        background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--sk-white);
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    border-radius: 3px;
    transition: background .2s, color .2s;
    line-height: 1.5em;
}

.sk-filter-btn:hover,
.sk-filter-btn.active {
    background: var(--sk-white);
    color: var(--sk-blue);
}

/* ── Slider wrap ────────────────────────────────────────────── */
.sk-slider-wrap {
    position: relative;
}

.sk-swiper {
    overflow: hidden;
    padding: 0 60px;
    box-sizing: border-box;
}

/* ── Slide masquée par filtre ───────────────────────────────── */
.sk-slide.sk-hidden {
    display: none !important;
}

/* ── Carte ──────────────────────────────────────────────────── */
.sk-card {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: 5px;
}

.sk-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.sk-card--perf    { background: var(--sk-yellow); }
.sk-card--croiseur { background: var(--sk-white); }

/* ── Image ──────────────────────────────────────────────────── */
.sk-card__img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2.5;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.sk-card__img-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sk-img-placeholder {
    width: 100%;
    height: 100%;
    background: #cccccc;
}

/* ── Mini carousel Duo ──────────────────────────────────────── */
.sk-duo-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.sk-duo-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.sk-duo-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.sk-duo-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.sk-duo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sk-duo-bullets {
    position: absolute;
    bottom: 10px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.sk-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .25s;
}

.sk-bullet.active {
    background: #FFE500;
}

/* ── Body ───────────────────────────────────────────────────── */
.sk-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
        min-height: 140px;
}

/* ── Noms du/des skipper(s) ─────────────────────────────────── */
.sk-card__names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sk-card__name {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sk-text);
    margin: 0;
}

/* Le 2e skipper (Duo) a le même style */
.sk-card__name--2 {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sk-text);
    margin: 0;
}

/* Sur fond jaune (Performance), les noms sont bleus */
.sk-card--perf .sk-card__name,
.sk-card--perf .sk-card__name--2 {
    color: var(--sk-blue);
}

/* ── Bateau ─────────────────────────────────────────────────── */
.sk-card__boat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.sk-boat-model {
    font-size: 13px;
    font-weight: 700;
    color: var(--sk-text);
}

.sk-boat-name {
    font-size: 13px;
    font-weight: 400;
    color: #555555;
}

.sk-card--perf .sk-boat-name {
    color: #455F69;
}

/* ── Meta : tags + numéro ───────────────────────────────────── */
.sk-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
}

.sk-card__tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

span.sk-tag.cat-tag {
    border: 1px solid var(--sk-blue);
    background: #ffff;
    color: var(--sk-blue);
}
.sk-tag {
  display: inline-block;
    padding: 0px 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    background: var(--sk-blue);
    color: #ffffff;
    border-radius: 2px;
    border: 1px solid var(--sk-blue);
}

.sk-card__numero {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.sk-n-label {
   font-size: 18px;
    font-weight: 500;
    color: var(--sk-blue);
}
.sk-card--perf span.sk-boat-model {
    color: #455F69;
}
.sk-n-value {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--sk-blue);
}

.sk-card--perf .sk-n-value {
    color: var(--sk-blue);
}
.skipers-slider .elementor-widget-shortcode {
    min-width: 100%;
}
/* ── Navigation ─────────────────────────────────────────────── */
.sk-nav {
    position: absolute;
    top: -45px;
    transform: translateY(-50%);
    z-index: 20;
    background: #fff;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    border-radius: 100px;
}

.sk-nav:hover { opacity: .75; background: #fff;}

.sk-nav img {
    width: 25px;
    height: 25px;
}

.sk-nav--prev { right: 48px; }
.sk-nav--next { right: 0; }

.sk-nav.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.sk-swiper{
    width: calc(100% + 40px) !important;
}

ul.hfe-breadcrumbs {
    padding: 0 !important;
}
span.hfe-breadcrumbs-home-icon {
    margin: 0 !important;
}
/* ── Grille : 5 colonnes ── */
    .skgrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
}

    /* Masquage par filtre */
    .skgrid-item.sk-hidden {
        display: none !important;
    }

    /* Compteur dans les filtres */
    .skgrid-count {
        font-weight: 400;
        opacity: .75;
        font-size: 12px;
    }
.skipers-gride .elementor-widget-shortcode {
    min-width: 100% !important;
}
   

.paragraph_ p {
    margin-bottom: 10px !important;
}
.hfe-flyout-wrapper .hfe-side {
    width: 100% !important;
}


/* =============================================
   INBOARD STORIES SLIDER — Swiper version
   Fichier : css/inboard-slider.css
   ============================================= */

/* ── Wrapper global ──────────────────────────── */
.inboard-slider-wrap {
    --ibs-blue-dark: #071444;
    --ibs-white: #ffffff;
    --ibs-card-w: clamp(150px, 22vw, 260px);
    --ibs-card-h: 540px;
    --ibs-card-r: 16px;
    --ibs-transition: 0.55s;
    position: relative;
    width: 100%;
    background: transparent;
   
    overflow: hidden;
}

/* ── Swiper container ────────────────────────── */
.inboard-slider-wrap .swiper {
    width:      100%;
    overflow:   visible;  /* permet aux slides côtés d'être visibles */
}

/* ── Slides — taille fixe ────────────────────── */
.inboard-slider-wrap .swiper-slide {
    width:      var(--ibs-card-w);
    height:     var(--ibs-card-h);
    flex-shrink: 0;
}

/* ── Card ────────────────────────────────────── */
.inboard-slider-wrap .ibs-card {
    display:         block;
    position:        relative;
    width:           100%;
    height:          100%;
    border-radius:   5px;
    overflow:        hidden;
    text-decoration: none;

    /* État inactif */
    filter:    none;
    opacity:   0.3;
    transform: scale(1);
    transition:
        transform var(--ibs-transition) cubic-bezier(.4,0,.2,1),
        filter    var(--ibs-transition) cubic-bezier(.4,0,.2,1),
        opacity   var(--ibs-transition) cubic-bezier(.4,0,.2,1);
}
/* Slides adjacentes */
.inboard-slider-wrap .swiper-slide-prev .ibs-card,
.inboard-slider-wrap .swiper-slide-next .ibs-card {
    filter:    none;
    opacity:   0.3;
    transform: scale(1);
}
.inboard-slider-wrap{
    position: relative;
}
.inboard-slider-wrap:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,rgba(0, 0, 0, 0) 25%, #173D83 94%);
    z-index: 2;
    pointer-events: none;
}
/* Slide active */
.inboard-slider-wrap .swiper-slide-active .ibs-card {
    filter:    brightness(1) saturate(1);
    opacity:   1;
    transform: scale(1);
  

    /* Fade-in à chaque activation */
    animation: ibs-fade-in 0.5s cubic-bezier(.4,0,.2,1) both;
}

.inboard-slider-wrap .swiper-slide{
  border: 1px solid transparent;
    border-radius: 35px;
    padding: 40px 0px;
}
.inboard-slider-wrap .swiper-slide-active{
  border: 1px solid #ffff;
    padding: 40px 5px;
}


/* ── Fade-in keyframe ────────────────────────── */
@keyframes ibs-fade-in {
    from {
        opacity: 0;
        filter:  brightness(0) saturate(0.5);
    }
    to {
        opacity: 1;
        filter:  brightness(1) saturate(1);
    }
}

/* ── Background image ────────────────────────── */
.inboard-slider-wrap .ibs-bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    transition:          transform var(--ibs-transition) cubic-bezier(.4,0,.2,1);
}

.inboard-slider-wrap .swiper-slide-active .ibs-bg {
    transform: scale(1.04);
}

.inboard-slider-wrap .ibs-bg--no-image {
    background: linear-gradient(160deg, #1a3a7a 0%, #071444 100%);
}

/* ── Overlay dégradé bas ─────────────────────── */
.inboard-slider-wrap .ibs-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0)    40%,
        rgba(0, 0, 0, 0.28) 65%,
        rgba(0, 0, 0, 0.80) 100%
    );
}

/* ── Texte ───────────────────────────────────── */
.inboard-slider-wrap .ibs-content {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        20px 14px 16px;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    transform:      translateY(4px);
    opacity:        0.5;
    transition:
        transform var(--ibs-transition) cubic-bezier(.4,0,.2,1),
        opacity   var(--ibs-transition);
}

.inboard-slider-wrap .swiper-slide-active   .ibs-content,
.inboard-slider-wrap .swiper-slide-prev     .ibs-content,
.inboard-slider-wrap .swiper-slide-next     .ibs-content {
    opacity:   1;
    transform: translateY(0);
}

.inboard-slider-wrap .ibs-title {
    color:          var(--ibs-white);
    font-size:      clamp(9px, 1.2vw, 13px);
    font-weight:    700;
    letter-spacing: 0.07em;
    line-height:    1.3;
    text-align:     center;
    text-shadow:    0 2px 8px rgba(0, 0, 0, 0.5);
}

.inboard-slider-wrap .ibs-date {
    color:          rgba(255, 255, 255, 0.65);
    font-size:      clamp(7px, 0.9vw, 10px);
    font-weight:    500;
    letter-spacing: 0.12em;
    text-align:     center;
    text-transform: uppercase;
}

/* ── Progress bar ────────────────────────────── */
.inboard-slider-wrap .ibs-progress-wrap {
    position:      absolute;
    bottom:        20px;
    left:          50%;
    transform:     translateX(-50%);
    width:         clamp(100px, 25%, 180px);
    height:        3px;
    background:    rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    overflow:      hidden;
    z-index:       10;
}

.inboard-slider-wrap .ibs-progress-bar {
    height:        100%;
    width:         0%;
    background:    var(--ibs-white);
    border-radius: 99px;
}

/* ── Message aucun article ───────────────────── */
.inboard-no-posts {
    color:      #aab4c8;
    text-align: center;
    padding:    24px;
    font-style: italic;
}


/* =============================================================
   photo-video-carousel.css
   À coller dans votre fichier CSS principal ou à @import
   ============================================================= */

/* ── Wrapper ── */
.pv-carousel-wrap {
        position: relative;
    overflow: hidden;
}

/* ── Navigation ── */
.pv-swiper-nav {
        position: absolute;
    top: -50px;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.pv-btn-prev,
.pv-btn-next {
    height: 41px;
     width: 41px;
    z-index: 20;
    background: #fff;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    border-radius: 100px;
   
}

.pv-btn-prev:hover, .pv-btn-prev:focus,
.pv-btn-next:hover , .pv-btn-next:focus { opacity: .35;background: #fff; }

.pv-btn-prev img,
.pv-btn-next img {
    width: 44px;
    height: 44px;
}

/* ── Swiper container ── */
.pv-swiper {
    box-sizing: border-box;
}

/* ── Slide ── */
.pv-slide {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    aspect-ratio: 4.5 / 3;
    cursor: pointer;
}

/* ── Fond image ── */
.pv-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0d2d5e;
    transition: transform .4s ease;
}

.pv-slide:hover .pv-slide-bg {
    transform: scale(1.04);
}

.pv-slide-bg--empty {
    background-color: #0d2d5e;
}

/* ── Fond vidéo YouTube ── */
.pv-yt-bg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    pointer-events: none;
}

/* ── Overlay dégradé ── */
.pv-slide-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(
        to top,
        rgba(5, 20, 60, .85) 0%,
        rgba(5, 20, 60, .10) 60%,
        transparent 100%
    ); */
}

/* ── Contenu slide ── */
.pv-slide-content {
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

/* Badge compteur */
.pv-slide-count {
        display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 5px;
    border-radius: 3px;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}

.pv-slide-count svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

/* Titre */
.pv-slide-title {
        color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    text-transform: uppercase;
}
.pv-slide-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.single-photo-video footer {
    display: none !important;
}
.flex-single {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
}

/* =============================================================
   photo-video-grid.css
   Shortcode [pv_grid] — grille 3 colonnes + filtres + load more
   ============================================================= */

/* ── Wrapper ── */
.pv-grid-wrap {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════
   FILTRES
════════════════════════════════════════════════════════════ */
.pv-grid-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    align-items: center;
}

.pv-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Séparateur visuel entre groupe type et groupe catégories */
.pv-filter-cats {
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.15);
}

.pv-filter-btn {
        display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
    line-height: 1;
    text-transform: uppercase;
}



.pv-filter-btn.active , .pv-filter-btn:hover {
    background: var(--global-palette1);   /* jaune comme la capture */
    color: #000;
    border-color: var(--global-palette1);
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   GRILLE
════════════════════════════════════════════════════════════ */
.pv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ── Item ── */
.pv-grid-item {
    position: relative;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    aspect-ratio: 4.5 / 3;
    text-decoration: none;
    cursor: pointer;
}

/* ── Fond image ── */
.pv-grid-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0d2d5e;
    transition: transform .4s ease;
}

.pv-grid-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pv-grid-item:hover .pv-grid-bg {
    transform: scale(1.04);
}

/* ── Overlay ── */
.pv-grid-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(
        to top,
        rgba(5, 20, 60, .85) 0%,
        rgba(5, 20, 60, .10) 60%,
        transparent 100%
    ); */
}

/* ── Contenu ── */
.pv-grid-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

/* Badge compteur */
.pv-grid-count {
   display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 5px;
    border-radius: 3px;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}

.pv-grid-count img {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Titre */
.pv-grid-title {
    color: #fff;
    font-size: clamp(11px, 1.2vw, 15px);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════════════════════════
   FOOTER : LOAD MORE + COMPTEUR
════════════════════════════════════════════════════════════ */
.pv-grid-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

/* Bouton Load More */
.pv-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--global-palette1);
    border: 1px solid #000;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    padding: 16px 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
    line-height: 1;
}

.pv-load-more:hover {
    background: transparent;
     border: 1px solid #000;
     color: #000;
}

.pv-load-more:disabled,
.pv-load-more.loading {
    opacity: .6;
    cursor: wait;
}

.pv-load-more svg {
    flex-shrink: 0;
}

/* Compteur */
.pv-grid-counter {
        font-size: 13px;
    font-weight: 600;
    color: #000;
    text-align: center;
}
.pv-grid-bg iframe {
    height: 100%;
}

.inside {
    min-height: 200px;
}


/* ═══════════════════════════════════════════════════════
   ARTICLES GRID — articles-grid.css
   À placer dans : /wp-content/themes/TON-THEME/css/
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --ag-yellow:      #FFE000;
    --ag-black:       #111111;
    --ag-white:       #ffffff;
    --ag-gray-text:   #666666;
    --ag-gray-border: #e0e0e0;
    --ag-radius:      5px;
    --ag-gap:         20px;
    --ag-font:        'Inter', sans-serif;
}

/* ── Wrapper ── */
.ag-wrapper {
    width: 100%;
    font-family: var(--ag-font);
}

/* ══════════════════════════════════════════
   FILTRES
══════════════════════════════════════════ */
.ag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
    align-items: center;
}

.ag-filter-btn {
       display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
    line-height: 1;
    text-transform: uppercase;
}



.ag-filter-btn.active, .ag-filter-btn:hover {
        background: var(--global-palette1);
    color: #000;
    border-color: var(--global-palette1);
    font-weight: 700;
}

/* Icône dispatch (point radio) */
.ag-dispatch-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ag-black);
    position: relative;
    box-shadow: 0 0 0 2px var(--ag-black), 0 0 0 4px transparent, 0 0 0 5px var(--ag-black);
}
.ag-filter-btn.active .ag-dispatch-dot,
.ag-filter-btn:hover .ag-dispatch-dot {
    background: var(--ag-white);
    box-shadow: 0 0 0 2px var(--ag-white), 0 0 0 4px transparent, 0 0 0 5px var(--ag-white);
}

/* ══════════════════════════════════════════
   GRILLE — 4 colonnes
══════════════════════════════════════════ */
.ag-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ag-gap);
}

/* Responsive */
@media (max-width: 1100px) {
    .ag-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .ag-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ag-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   CARTE COMMUNE
══════════════════════════════════════════ */
.ag-card {
    border-radius: var(--ag-radius);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* .ag-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
} */

.page-id-42 .degrade-footer {
    display: none;
}
.ag-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.ag-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ══════════════════════════════════════════
   CARTE STYLE INBOARD
   (image plein fond + overlay texte en bas)
══════════════════════════════════════════ */
.ag-card--inboard {
    position: relative;
    /* aspect-ratio: 1/1; */
    background: var(--ag-black);
        min-height: 255px;
}

.ag-card--inboard .ag-card__link {
    position: relative;
    height: 100%;
}

.ag-card--inboard .ag-card__img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    transition: opacity 0.3s;
}
.ag-card--inboard:hover .ag-card__img {
    opacity: 0.6;
}

/* Badge INBOARD (coin haut gauche, fond blanc, texte noir) */
.ag-card__inboard-badge {
        position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--ag-white);
    color: var(--ag-black);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px 3px;
    border-radius: 999px;
}

/* Overlay bas : dégradé + titre + date */
.ag-card__inboard-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 48px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

.ag-card__inboard-title {
    color: var(--ag-white);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ag-card--inboard .ag-card__date {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
}

/* ══════════════════════════════════════════
   CARTE STYLE STANDARD
   (badge coloré sur image + titre + date sous l'image)
══════════════════════════════════════════ */
.ag-card--standard {
    background: var(--ag-white);
}

.ag-card--standard .ag-card__link {
    display: flex;
    flex-direction: column;
}

/* Zone image */
.ag-card__img-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--ag-radius);
}

.ag-card--standard .ag-card__img {
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}
.ag-card--standard:hover .ag-card__img {
    transform: scale(1.04);
}

/* Badge catégorie (fond jaune) */
.ag-card__badge {
        position: absolute;
    top: 10px;
    left: 10px;
    background: var(--e-global-color-kadence1);
    color: var(--ag-black);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px 2px;
    border-radius: 999px;
    line-height: 1.5em;
    text-transform: uppercase;
}

/* Variantes de couleur badge par catégorie (optionnel, à personnaliser) */
.ag-card__badge--reportage  { background: var( --e-global-color-kadence1 ); }
.ag-card__badge--résultat   { background: var( --e-global-color-kadence1 ); }
.ag-card__badge--classement { background: var( --e-global-color-kadence1 ); }
.ag-card__badge--interview  { background: var( --e-global-color-kadence1 ); }
.ag-card__badge--dispatch   { background: var( --e-global-color-kadence1 ); }

/* Corps texte */
.ag-card__body {
    padding: 12px 4px 0px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
}

.ag-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ag-black);
    margin: 0;
}

.ag-card__date {
    font-size: 12px;
    color: var(--ag-gray-text);
}

/* ══════════════════════════════════════════
   LOAD MORE
══════════════════════════════════════════ */
.ag-load-more-wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ag-load-more-btn {
       display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--global-palette1);
    border: 1px solid var(--global-palette1) !important;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    padding: 16px 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all .3s;
    line-height: 1;
}

.ag-load-more-btn:hover, .ag-load-more-btn:focus {
   background: transparent;
    border: 1px solid #000 !important;
    color: #000;
}

.ag-load-more-btn:disabled,
.ag-load-more-btn.loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ag-arrow {
    font-size: 18px;
    line-height: 1;
}

/* Compteur "Affichés X articles sur Y" */
.ag-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--ag-black);
    margin: 0;
}

/* Message no results */
.ag-no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ag-gray-text);
    padding: 40px 0;
    font-size: 15px;
}
.mentions h2 {
    color: #ffff;
}
/* ===== DISPATCH TICKER ===== */
:root {
    --dt-bg         : #0d0d0d;
    --dt-badge-bg   : #FFE500;
    --dt-badge-text : #000;
    --dt-quote      : #000;
    --dt-name       : #000;
    --dt-boat       : rgba(0, 0, 0, 0.6);
    --dt-sep        : rgba(255,255,255,.25);
    --dt-height     : 46px;
    --dt-font-size  : 14px;
    --dt-radius     : 999px;
    --dt-gap        : 30px;
}

.dispatch-ticker {
    display: flex;
    align-items: center;
    background: #FFE500;
    border-radius: 5px;
    height: var(--dt-height);
    overflow: hidden;
    font-size: var(--dt-font-size);
    line-height: 1;
    user-select: none;
    width: 100%;
    color: #000;
    max-width: calc(100% - 210px);
}
.ticker_group {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    background: #000;
}
/* ---- Badge ---- */
.dispatch-ticker__badge {
        display: flex;
    align-items: center;
    gap: 7px;
    background: #000;
    color: #FFE500;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    padding: 5px 10px;
    margin-left: 10px;
    white-space: nowrap;
    letter-spacing: 2%;
    border-radius: 100px;
    margin-right: 10px !important;
}

.dispatch-ticker__dot {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    background   : var(--dt-badge-text);
    animation    : dt-blink 1.2s ease-in-out infinite;
}

@keyframes dt-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .25; }
}

/* ---- Piste défilante ---- */
.dispatch-ticker__track-wrapper {
    flex        : 1;
    overflow    : hidden;
    height      : 100%;
    position    : relative;
}

/* Fade gauche/droite */


.dispatch-ticker__track {
    display    : flex;
    align-items: center;
    height     : 100%;
    white-space: nowrap;
    /* animation  : dt-scroll var(--ticker-duration, 60s) linear infinite; */
    will-change: transform;
    width: max-content;
    animation: dt-scroll 15s linear infinite;
}

.dispatch-ticker__track:hover {
    animation-play-state: paused;
}

@keyframes dt-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Items ---- */
.dispatch-ticker__item {
    display    : inline-flex;
    align-items: center;
    gap        : 10px;
    padding    : 0 var(--dt-gap) 0 0;
}

.dispatch-ticker__quote {
    color      : var(--dt-quote);
    font-weight: 700;
    font-style : italic;
}

.dispatch-ticker__name {
    color      : var(--dt-name);
    font-weight: 500;
    font-size  : 13px;
}

.dispatch-ticker__boat {
    color      : var(--dt-boat);
    font-weight: 400;
    font-size  : 12px;
    letter-spacing: .02em;
}

.dispatch-ticker__sep {
    color      : var(--dt-sep);
    font-size  : 18px;
    font-weight: 300;
    margin-left: calc(var(--dt-gap) / 2);
}
.hide-element{
    display: none;
}
.course-on .hide-element{
    display: flex;
}

/* ---- Documentation ---- */
.download-list a.e-button-base {
	background-position: 12px center;
}


/* ---- Responsive ---- */

/* Tablette */
@media (max-width: 1024px) { 

.dispatch-ticker {
    max-width: 100%;
}

 .pv-grid { grid-template-columns: repeat(2, 1fr); }

.skgrid {
    grid-template-columns: repeat(3, 1fr);
}

.left-section, .fix-header{
display: none;
}
.right-section {
    padding-right: 10px;
    padding-left: 10px;
}
.right-section{
    width: 100% !important;
}
 .ngw-wrap {
        grid-template-columns: 1fr 1fr;
    }

    .ngw-col:last-child {
        grid-column: 1 / -1;
    }

.ngw-hero img {
    height: 350px;
}
.sk-swiper {
    width: 100% !important;
}
.inboard-slider-wrap {
        --ibs-card-w: 30%;
        --ibs-card-h: 400px;
    }

}



/* Mobile */
@media (max-width: 575.98px) { 
    
 :root {
        --dt-height   : 40px;
        --dt-font-size: 12px;
        --dt-gap      : 40px;
    }
    .dispatch-ticker__badge {
        font-size: 9px;
        padding  : 0 12px 0 10px;
    }

    .inboard-slider-wrap {
        --ibs-card-w: 50%;
        --ibs-card-h: 300px;
    }
.ngw-wrap {
        grid-template-columns: 1fr;
    }

    .ngw-col:last-child {
        grid-column: auto;
    }

    .ngw-hero {
        min-height: 320px;
    }
    .skgrid {
    grid-template-columns: repeat(1, 1fr);
    }
    .pv-grid { grid-template-columns: 1fr; }
    .pv-grid-filters { gap: 6px; }
    .pv-filter-btn { font-size: 12px; padding: 6px 12px; }
    .pv-filter-cats { padding-left: 0; border-left: none; }
    .pv-load-more { font-size: 14px; padding: 14px 24px; }


}