/*
Theme Name: Divi Child Theme
Description: Theme enfant de Divi
Author: Reservoir Web
Author URI: https://reservoirweb.fr
Template: Divi
Version: 1.1
*/
/* Police Urbanist auto-hébergée */
@font-face {
    font-family: 'Urbanist';
    src: url('/wp-content/fonts/Urbanist-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('/wp-content/fonts/Urbanist-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

#ma-galerie-fixe img,
#ma-galerie-fixe video,
#ma-galerie-fixe canvas {
    overflow: hidden !important;
}

/* =====================================================
   Boutons de partage sociaux — pastilles rondes
   Divi > Options du thème > CSS personnalisé
   ===================================================== */

.ms-partage {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    clear: both;
}

.ms-partage__label {
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 0.85rem;
    font-weight: 600;
}

.ms-partage__liste {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.ms-partage__liste li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ms-pill,
.ms-pill:link,
.ms-pill:visited,
button.ms-pill,
button.ms-pill:hover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #282e3e !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
    font-family: inherit;
    position: relative;
    outline-offset: 3px;
}

.ms-pill:hover {
    transform: scale(1.1);
    opacity: 0.85;
}

.ms-pill:active {
    transform: scale(0.95);
}

.ms-pill svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    display: block;
}

.ms-copy-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    background: #282e3e;
    color: #ededed;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
}

.ms-copy-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #282e3e;
}

.ms-pill.ms-copied .ms-copy-tip {
    display: block;
}

@media (max-width: 480px) {
    .ms-pill,
    button.ms-pill {
        width: 40px !important;
        height: 40px !important;
    }
    .ms-pill svg {
        width: 18px !important;
        height: 18px !important;
    }
    .ms-partage__liste {
        gap: 12px;
    }
}

/*
 * ============================================================
 * Page Actualités — Module Blog Divi (mode pleine page)
 * ============================================================
 * Objectif : afficher les articles en mode liste avec :
 *   - Sur desktop/tablette : image à gauche en vignette,
 *     titre + métadonnées + résumé empilés à droite
 *   - Sur mobile : titre → métadonnées → image → résumé
 *
 * Sélecteurs basés sur la structure HTML inspectée le 08/06/2026
 * sur nolwennlanguille.com (Divi 4, thème enfant).
 *
 * Prérequis 1 : dans Divi, sur le module Blog de la page Actualités,
 *   onglet Avancé > champ "Classe CSS", saisir : blog-actualites
 *
 * Prérequis 2 : charger actualites-blog-vignette.js
 *   (via functions.php du thème enfant ou module Code Divi)
 *
 * À coller dans : wp-content/themes/Divi-enfant/style.css
 * ============================================================
 */


/* ── Desktop & tablette portrait (≥ 600px) ───────────────── */

.blog-actualites article.et_pb_post {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "image  header"
    "image  content";
  column-gap: 24px;
  row-gap: 8px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
  align-items: start;
}

/* Neutralise le clearfix Divi */
.blog-actualites article.et_pb_post::after {
  display: none;
}

/* Vignette */
.blog-actualites article.et_pb_post .entry-featured-image-url {
  grid-area: image;
}

.blog-actualites article.et_pb_post .entry-featured-image-url img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

/* Titre + métadonnées */
.blog-actualites article.et_pb_post .blog-header-wrapper {
  grid-area: header;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Titre : taille et interligne */
.blog-actualites article.et_pb_post .blog-header-wrapper .entry-title {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0;
}

/* Métadonnées */
.blog-actualites article.et_pb_post .blog-header-wrapper .post-meta {
  margin: 0;
  font-size: 0.85rem;
}

/* Résumé */
.blog-actualites article.et_pb_post .post-content {
  grid-area: content;
  margin: 0;
}


/* ── Tablette portrait (600px–899px) ─────────────────────── */
/* Même layout desktop mais vignette un peu plus petite */

@media (min-width: 600px) and (max-width: 899px) {
  .blog-actualites article.et_pb_post {
    grid-template-columns: 150px 1fr;
  }

  .blog-actualites article.et_pb_post .entry-featured-image-url img {
    height: 110px;
  }
}


/* ── Mobile (< 600px) : empilement vertical ──────────────── */

@media (max-width: 599px) {

  .blog-actualites article.et_pb_post {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Ordre : header (titre+méta) → image → résumé
     Le JS a déjà placé les éléments dans cet ordre dans le DOM,
     donc aucun order CSS n'est nécessaire ici. */

  .blog-actualites article.et_pb_post .entry-featured-image-url {
    width: 100%;
  }

  .blog-actualites article.et_pb_post .entry-featured-image-url img {
    width: 100%;
    height: 200px;
  }

  .blog-actualites article.et_pb_post .blog-header-wrapper .entry-title {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 10px; /* espace sous le titre, au-dessus des métadonnées */
  }

  .blog-actualites article.et_pb_post .blog-header-wrapper .post-meta {
    margin-bottom: 0; /* l'écart avec le résumé est géré par le gap de l'article */
  }
}