/* ============================================================
 * DP UI Pack — 10 Homepage (page-id-324) — v2 ADDITIF
 * Cible : page d'accueil de detectiveparis.fr.
 *
 * RÈGLE ABSOLUE : NE PAS toucher aux containers Hestia / Visual Composer.
 *   - Pas de règle sur .main, .main-raised, .container, .row, .col-md-*
 *   - Pas de règle sur .vc_row, .vce-row-container, .vce-row, .vce-col, .vce-col-inner
 *   - Pas de display:grid / display:flex sur des éléments structurels
 *   - Pas de !important (sauf surcharge inline ponctuelle)
 *
 * On polish UNIQUEMENT :
 *   - Typographie titre hero (h1.hestia-title)
 *   - Liens / hover / focus / sélection texte
 *   - .box-header / .box-content (encadrés "secret pro")
 *   - Images du contenu (radius + shadow douce)
 *   - Sidebar widgets : baseline carte blanche (l'agent #6 ira plus loin)
 *
 * Tous les sélecteurs sont préfixés `body.home` pour scoper.
 * ============================================================ */


/* -----------------------------------------------------------
 * 1. Sélection de texte — touche d'identité visuelle
 * --------------------------------------------------------- */
body.home ::selection {
  background: var(--dp-primary);
  color: #fff;
}


/* -----------------------------------------------------------
 * 2. Titre hero — typo seulement, pas de container override
 * --------------------------------------------------------- */
body.home h1.hestia-title {
  font-family: var(--dp-font-h);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}


/* -----------------------------------------------------------
 * 3. Liens dans le contenu — souligné fin rouge sur hover
 * --------------------------------------------------------- */
body.home .page-content-wrap a {
  color: var(--dp-primary-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(220, 38, 38, 0.4);
  transition: color var(--dp-tr-fast), text-decoration-color var(--dp-tr-fast);
}

@media (hover: hover) {
  body.home .page-content-wrap a:hover {
    color: var(--dp-primary);
    text-decoration-color: var(--dp-primary);
  }
}


/* -----------------------------------------------------------
 * 4. Boutons Visual Composer — léger lift au hover SANS
 *    redéfinir le style. On préserve le rendu natif du thème.
 * --------------------------------------------------------- */
body.home .page-content-wrap button.vce-button {
  transition: transform var(--dp-tr-fast), box-shadow var(--dp-tr-fast);
}

@media (hover: hover) {
  body.home .page-content-wrap button.vce-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.22);
  }
}


/* -----------------------------------------------------------
 * 5. Encadrés .box-header / .box-content — touche subtile
 *    border-left rouge + padding plus aéré. Aucun grid/flex.
 * --------------------------------------------------------- */
body.home .page-content-wrap .box-header {
  padding: 1rem 1.2rem 0.4rem;
  border-left: 3px solid var(--dp-primary);
  background: linear-gradient(180deg, var(--dp-bg-soft) 0%, transparent 100%);
  border-radius: var(--dp-radius-sm) var(--dp-radius-sm) 0 0;
}

body.home .page-content-wrap .box-content {
  padding: 0.4rem 1.2rem 1rem;
  border-left: 3px solid var(--dp-primary);
  background: linear-gradient(180deg, transparent 0%, var(--dp-bg-soft) 100%);
  border-radius: 0 0 var(--dp-radius-sm) var(--dp-radius-sm);
}

body.home .page-content-wrap .box-header h3.box-title {
  margin-top: 0;
}


/* -----------------------------------------------------------
 * 6. Images du contenu — radius + shadow douce
 *    Cible UNIQUEMENT les <img> et <figure>, pas les wrappers VC.
 * --------------------------------------------------------- */
body.home .page-content-wrap figure.wp-block-image,
body.home .page-content-wrap .vce-single-image-wrapper figure {
  border-radius: var(--dp-radius-sm);
  overflow: hidden;
}

body.home .page-content-wrap img.vce-single-image,
body.home .page-content-wrap .wp-block-image img {
  border-radius: var(--dp-radius-sm);
  box-shadow: var(--dp-shadow-xs);
}

body.home .page-content-wrap figcaption {
  font-size: 0.85rem;
  color: var(--dp-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 0.4rem;
}


/* -----------------------------------------------------------
 * 7. Texte fort — couleur sombre pour bien ressortir
 * --------------------------------------------------------- */
body.home .page-content-wrap strong {
  color: var(--dp-text-strong);
}


/* -----------------------------------------------------------
 * 8. Sidebar widgets — BASELINE non-conflictuel uniquement.
 *    L'agent #6 prendra le relais pour la finition.
 *    On ne touche PAS au layout sidebar/colonne.
 * --------------------------------------------------------- */
body.home .blog-sidebar .widget {
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-sm);
  padding: 1.1rem 1.1rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--dp-shadow-xs);
}

body.home .blog-sidebar .widget a {
  color: var(--dp-primary-dark);
  transition: color var(--dp-tr-fast);
}

@media (hover: hover) {
  body.home .blog-sidebar .widget a:hover {
    color: var(--dp-primary);
  }
}


/* -----------------------------------------------------------
 * 9. Accessibilité — focus visible sur liens et boutons
 * --------------------------------------------------------- */
body.home .page-content-wrap a:focus-visible,
body.home .blog-sidebar .widget a:focus-visible,
body.home .page-content-wrap button.vce-button:focus-visible {
  outline: 2px solid var(--dp-primary);
  outline-offset: 3px;
  border-radius: var(--dp-radius-xs);
}


/* -----------------------------------------------------------
 * 10. Nettoyage — paragraphes vides parasites du contenu BDD
 * --------------------------------------------------------- */
body.home .page-content-wrap p:empty,
body.home .blog-sidebar .widget p:empty {
  display: none;
}