/* ============================================================
   04. PAGE ACTUALITÉS ID : 30 — LE BLOG DES DEV
   ============================================================ */

/**
 * Fond sombre sur la page d'archive du blog.
 * Double sélecteur nécessaire car Kadence injecte son propre background.
 */
body.blog {
    background: #000C26 !important;
    background-color: #000C26 !important;
}

/**
 * Background de la page Actualités et achat (page ID 30 et 39).
 * Illustration pleine hauteur centrée sur fond sombre.
 */

body.page-id-30, .page-id-39 #main {
    background-color: #000C26 !important;
    background-image: url('../images/illustration_page_actualité_v4_1920.webp') !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: 1920px 3543px !important;
    min-height: 3543px !important;
}

.page-id-30 .site-main,
.page-id-30 .entry-content-wrap {
    max-width: 1920px !important;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}
/**
 * Conteneur des cards limité à 1160px.
 */
.blog .content-container {
    max-width: 1160px !important;
    margin: 0 auto !important;
}

/* Fond des articles du blog */
body.single-post {
    background-color: #000C26 !important;
}

body.single-post .content-bg,
body.single-post .entry-content-wrap,
body.single-post .site-main {
    background-color: transparent !important;
}


/* ============================================================
 FORMULAIRE DE FILTRES PAGE ACTUALITÉS 
/* FORMULAIRE ACTUALITÉS — CLONE STRICT DE MYSTÈRES
============================================================ */

/* Conteneur principal */
.blog-filters {
    max-width: 1160px;
    margin: 2rem auto 3rem auto;
    padding: 1.5rem 2rem;
    background: rgba(34, 56, 124, 0.7);
    border: 4px solid #FF00D9; /* seule différence : couleur */
    border-radius: 8px;
    box-shadow: 0 0 50px #FF00D9;
}

.blog-filters form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* tous les éléments prennent la même hauteur */
    justify-content: center;
    gap: 1rem;
}

/* Chaque enfant du formulaire devient un flex centré verticalement */
.blog-filters form > * {
    display: flex;
    align-items: center;
}

/* Champ de recherche */
.blog-filters input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 1rem;
    background: rgba(34, 56, 124, 0.15);
    border: 4px solid #FF00D9;
    border-radius: 4px;
    color: #ffffff !important;
    font-family: 'Futura LT', sans-serif !important;
    font-size: 1rem;
}

.blog-filters input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

/* Menus déroulants */
.blog-filters select,
.blog-filters select:focus,
.blog-filters select:active,
.blog-filters select:hover,
.blog-filters select:visited,
.blog-filters select:focus-visible {
    padding: 0.6rem 2rem;
    background-color: rgba(34, 56, 124, 0.5) !important;
    border: 4px solid #FF00D9 !important;
    border-radius: 4px;
    color: #ffffff !important;
    font-family: 'Futura LT', sans-serif !important;
    font-size: 1rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.blog-filters select option {
    background: #000C26;
    color: #ffffff;
}

/* Bouton Filtrer */
.blog-filters button[type="submit"] {
    padding: 0.6rem 2rem;
    background: #22387C;
    border: 4px solid #FF00D9;
    border-radius: 4px;
    color: #ffffff !important;
    font-family: 'Futura LT', sans-serif !important;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-filters button[type="submit"]:hover {
    background: #2d4a9e;
    border-color: #cc00ae;
}

/* Hauteur uniforme pour tous les éléments interactifs */
.blog-filters input[type="text"],
.blog-filters select,
.blog-filters button[type="submit"] {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    margin: 0;
}



/* ── CARDS ARTICLES ────────────────────────────────────── */

/**
 * Layout flex horizontal : image à gauche, texte à droite.
 */
.blog article.loop-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/**
 * Conteneur image — on annule le ratio Kadence et on fixe la taille.
 */
.blog article.loop-entry a.post-thumbnail {
    order: 1;
    flex-shrink: 0;
    width: 550px !important;
    height: 325px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    display: block;
}

.blog article.loop-entry .post-thumbnail-inner {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**
 * Image — taille fixe avec bordure magenta.
 */
.blog article.loop-entry .post-thumbnail-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 4px solid #FF00D9;
}

/**
 * Contenu textuel — prend l'espace restant à droite.
 */
.blog article.loop-entry .entry-content-wrap {
    order: 2;
    flex: 1;
}

/**
 * Tous les textes des cards en blanc.
 */
.blog article.loop-entry .entry-title a,
.blog article.loop-entry .entry-summary,
.blog article.loop-entry .entry-meta,
.blog article.loop-entry .entry-meta a,
.blog article.loop-entry .post-more-link,
.blog article.loop-entry .category-links a {
    color: #ffffff !important;
}


.page-id-30 .wp-block-post-featured-image img {
    border: 4px solid #FF00D9;
}

/* ============================================================
   ARTICLES DE BLOG — MISE EN PAGE GLOBALE (single-post)
   Sélecteur racine : body.single-post
   Appliqué automatiquement à TOUS les articles présents et futurs.
   ============================================================ */


/* ----------------------------------------
   1. HÉRO — TITRE H1
   ---------------------------------------- */

/* Limite la largeur du H1 pour éviter qu'il s'étale sur 1920px.
   Centré dans la zone héro avec retour à la ligne automatique. */
body.single-post .entry-hero .entry-title {
    max-width: 800px;           /* Ajuster : 700px–1200px */
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.25;          /* Ajuster : 1.1–1.5 */
    font-size: 2.5rem;          /* ← ajoute cette ligne — ajuster : 1.5rem–4rem */
    
}

/* H1 des articles — Futura LT à la place d'Ethnocentric */
body.single-post .entry-hero .entry-title {
    font-family: 'Futura LT', sans-serif !important;
}



/* ----------------------------------------
   2. SIDEBAR GAUCHE — LARGEUR & STYLES
   ---------------------------------------- */

/* Largeur fixe de la sidebar.
   Kadence ne l'expose pas facilement en CSS depuis le back-office,
   on la force ici directement. */
body.single-post #secondary {
    width: 280px;               /* Ajuster : 220px–360px */
    min-width: 500px;
    flex-shrink: 0;
    /* Correction : espace entre la sidebar et le bord du navigateur */
    padding-left: 100px;         /* Ajuster : 20px–60px selon le goût */
    box-sizing: border-box;     /* Le padding est inclus dans les 280px */
}

/* Titres de widget ("Articles récents", "Commentaires récents", etc.) */
body.single-post #secondary .wp-block-heading {
    font-size: 0.85rem;         /* Ajuster : 0.75rem–1rem */
    color: rgb(255, 255, 255);  /* Couleur titres sidebar — ajuster */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(255, 255, 255);
}

/* Liens de la sidebar (articles récents, catégories, etc.) */
body.single-post #secondary a {
    color: rgb(44, 141, 252);   /* Couleur au repos — ajuster */
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.5;
}

body.single-post #secondary a:hover {
    color: #ffffff;             /* Couleur au survol — ajuster */
}

/* Liste articles récents : suppression des puces et espacement propre */
body.single-post #secondary .wp-block-latest-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.single-post #secondary .wp-block-latest-posts li {
    padding: 7px 0;
    border-bottom: 1px solid rgb(255, 255, 255);
}

body.single-post #secondary .wp-block-latest-posts li:last-child {
    border-bottom: none;
}

/* Barre de recherche sidebar */
body.single-post #secondary .wp-block-search__input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.875rem;
}

body.single-post #secondary .wp-block-search__button {
    font-size: 0.8rem;
}


/* ----------------------------------------
   3. CONTENU ARTICLE — ÉVITE LE DÉBORDEMENT
   ---------------------------------------- */

/* Empêche l'article de déborder de sa zone dans le flex parent.
   min-width: 0 est la clé quand un enfant flex dépasse son conteneur. */
body.single-post .content-wrap {
    min-width: 0;
    max-width: 100%;
}


/* ----------------------------------------
   4. SECTION "SIMILAR POSTS" — RECENTRAGE
   ---------------------------------------- */

/* La classe alignfull de Gutenberg/Kadence sort le bloc du flux normal
   avec des marges négatives calculées sur la largeur du viewport,
   ce qui le décale à droite quand une sidebar est présente.
   On annule ce comportement pour l'utiliser normalement. */
/* On sort le bloc de #main pour le repositionner
   au niveau du conteneur parent qui inclut la sidebar */
body.single-post .entry-related.alignfull {
    /* Annule TOUT ce que Kadence injecte en inline ou via ses classes */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    /* Extension vers la gauche pour compenser la sidebar (280px + son padding) */
    /* Si ta sidebar fait 280px de large dont 40px de padding-left : */
    margin-left: calc(-280px) !important;  /* = - largeur sidebar */
    width: calc(100% + 280px) !important;  /* réintègre la largeur sidebar */
}

/* Recentrage du contenu interne dans cette zone étendue */
body.single-post .entry-related-inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

body.single-post .entry-related-title {
    text-align: center;
    margin-bottom: 2rem;
}

/* Titre "Similar Posts" centré */
body.single-post .entry-related-title {
    text-align: center;
    margin-bottom: 2rem;
}


/* ----------------------------------------
   5. COULEURS DES LIENS — ARTICLE & NAVIGATION
   ---------------------------------------- */

/* Liens dans le corps de l'article */
body.single-post .entry-content a {
    color: #ffffff;             /* Violet doux — ajuster selon palette du thème */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

body.single-post .entry-content a:hover {
    color: #ffffff;
}

/* Tags en bas d'article */
body.single-post .entry-tags .tag-link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.single-post .entry-tags .tag-link:hover {
    color: #ffffff;
}

/* Navigation précédent / suivant */
body.single-post .post-navigation a {
    color: #ffffff;
    transition: color 0.2s ease;
}

body.single-post .post-navigation a:hover {
    color: #ffffff;
}

/* Liens dans les métadonnées (auteur, catégorie...) */
body.single-post .entry-meta a,
body.single-post .entry-taxonomies a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.single-post .entry-meta a:hover,
body.single-post .entry-taxonomies a:hover {
    color: #ffffff;
}




/* ============================================================
   ARTICLES DE BLOG — Corps de texte en Inter
   Surcharge la règle globale Futura LT uniquement dans
   le contenu des articles. Les titres (h1–h6) ne sont
   pas touchés car ils ont leurs propres règles avec !important.
   ============================================================ */

body.single-post .entry-content p,
body.single-post .entry-content span,
body.single-post .entry-content li,
body.single-post .entry-content a,
body.single-post .entry-content blockquote,
body.single-post .entry-content figcaption,
body.single-post .entry-content td,
body.single-post .entry-content th {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;    /* Ajuster : 400 normal, 500 medium */
}

/* ----------------------------------------
   SIDEBAR — Éléments de couleur
   ---------------------------------------- */

/* Label "Search" au-dessus du champ de recherche */
body.single-post #secondary .wp-block-search__label {
    color: rgb(255, 255, 255) !important;
    font-size: 0.8rem;
}

/* "No comments to show." */
body.single-post #secondary .wp-block-latest-comments {
    color: rgb(255, 255, 255) !important;
    font-size: 0.8rem;
}

/* ----------------------------------------
   MÉTADONNÉES ARTICLE — date, auteur
   ---------------------------------------- */

/* Date de publication */
body.single-post .entry-date {
    color: rgb(255, 255, 255) !important;
}

/* Label "By" avant le nom de l'auteur */
body.single-post .meta-label {
    color: rgb(255, 255, 255) !important;
    margin-right: 4px;
}

/* ----------------------------------------
   SIMILAR POSTS — Points de pagination Splide
   ---------------------------------------- */

/* Points inactifs */
body.single-post .splide__pagination__page {
    background: rgb(255, 255, 255) !important;
}

/* Point actif */
body.single-post .splide__pagination__page.is-active {
    background: #ffffff !important;   /* Violet — ajuster selon palette */
    transform: scale(1.3);
}


/* ----------------------------------------
   CENTRAGE DES ARTICLES
   ---------------------------------------- */

body.single-post .entry-content.single-content {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}





/* ============================================================
 BOUTON Retour ves actualités
   ============================================================ */



.edv-retour-blog {
    position: absolute !important;
    top: 220px !important;      /* Ajuster selon hauteur header */
    left: 100px !important;
    z-index: 9998 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 340px;               /* = largeur sidebar */
    box-sizing: border-box;
    padding: 10px 18px;
    background: rgba(0, 12, 38, 0.85);
    border: 4px solid #ffffff;
    border-radius: 4px;
    color: #ffffff !important;
    font-family: 'Futura LT', sans-serif !important;
    font-size: 0.8rem;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
    backdrop-filter: blur(4px);
}

.edv-retour-blog:hover {
    border-color: #FF00D9;
    color: #c9a8ff !important;
}

/* ----------------------------------------
   NAVIGATION PRÉCÉDENT / SUIVANT
   ---------------------------------------- */

body.single-post .post-navigation .nav-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 200px !important;
}

body.single-post .post-navigation .nav-previous::after {
    display: none !important;
}

body.single-post .post-navigation .nav-previous {
    border: none !important;
    box-shadow: none !important;
}

body.single-post .post-navigation .nav-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap:0px !important;
}

body.single-post .post-navigation .nav-previous,
body.single-post .post-navigation .nav-next {
    max-width: 45% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
body.single-post .post-navigation .nav-previous a,
body.single-post .post-navigation .nav-next a {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
    max-width: 400px !important;   /* Ajuster selon le rendu */
}


body.page-id-30 {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

body.page-id-30 #inner-wrap {
    flex: 1 !important;
}