/*
Theme Name:   Plan de Match — Extra Child
Theme URI:    https://www.plandematch.fr/
Description:  Thème enfant du thème Extra (Elegant Themes) — refonte de la homepage. Ne modifie jamais le thème parent.
Author:       Plan de Match
Version:      1.1.0
Template:     Extra
Text Domain:  plandematch-child
*/

/* ==========================================================================
   PLAN DE MATCH — CSS de la homepage
   Cible le markup réel généré par les modules Extra (Category Builder).
   Chaque bloc indique le module concerné et la classe CSS à saisir dans
   l'onglet « Avancé > Classe CSS » du module.

   --- Journal des versions ---
   1.1.0 (31/08/2026) — Alignement sur la préprod test2026.plandematch.fr :
     · hero pleine largeur via .et_pb_section:has(.pdm-hero-main) + overflow-x
       hidden (repris du module Code de la préprod, qui devient inutile) ;
     · .pdm-css-inject masqué, .pdm-hero-main/side en fond transparent ;
     · cartes Bibliographie en grille auto-fit (le markup réel répartit les
       cartes dans 4 colonnes Divi, pas dans une grille unique) ;
     · .pdm-perk tolère le markup produit par l'éditeur (<p> autour du
       numéro, description en texte nu) ;
     · correctif mobile du premier article du fil conservé (absent de la
       préprod, où la carte restait en 2 colonnes sous 767 px).
   1.0.0 (21/07/2026) — Version initiale, déployée en préprod.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. VARIABLES
   -------------------------------------------------------------------------- */
:root{
  --pdm-noir:#0B0B0C;
  --pdm-noir-2:#171719;
  --pdm-rouge:#E1091B;
  --pdm-rouge-dark:#B00714;
  --pdm-gris-900:#3A3A3D;
  --pdm-gris-600:#6E6E73;
  --pdm-gris-300:#D6D6D9;
  --pdm-gris-100:#F2F2F3;
  --pdm-blanc:#FFFFFF;

  --pdm-display:'Anton','Arial Black',sans-serif;
  --pdm-titre:'Barlow Condensed','Arial Narrow',sans-serif;
  --pdm-texte:'Inter',system-ui,Arial,sans-serif;

  --pdm-r:4px;
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHIE GLOBALE
   Remplace l'Arial 16 px uniforme du thème par une vraie hiérarchie.
   -------------------------------------------------------------------------- */
body,
.et_pb_module,
#main-content{
  font-family:var(--pdm-texte);
  font-size:17px;
  line-height:1.6;
  color:var(--pdm-noir);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--pdm-titre);
  font-weight:700;
  line-height:1.14;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--pdm-noir);
}

#main-content p{ color:var(--pdm-gris-900); }

/* Méta : dates et catégories */
.post-meta,
.post-meta.vcard,
.post-meta.vcard p{
  font-family:var(--pdm-texte);
  font-size:13px;
  line-height:1.4;
  color:var(--pdm-gris-600);
  letter-spacing:.02em;
  text-transform:none;
}
.post-meta a{ color:var(--pdm-gris-600); }
.post-meta a:hover{ color:var(--pdm-rouge); }

/* Bouton « En savoir plus » natif du Blog Feed */
.read-more-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pdm-rouge);
  background:none !important;
  padding:0 !important;
  border:0 !important;
}
.read-more-button:after{ content:"\2192"; }
.read-more-button:hover{ color:var(--pdm-noir); }

/* Overlay natif d'Extra sur les vignettes */
.et_pb_extra_overlay{
  background:rgba(225,9,27,.72) !important;
}

/* Boutons utilitaires (à utiliser dans les modules Texte) */
.pdm-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:var(--pdm-r);
  border:2px solid transparent;
  transition:all .2s;
}
.pdm-btn--red{ background:var(--pdm-rouge); color:#fff !important; }
.pdm-btn--red:hover{ background:var(--pdm-noir); }
.pdm-btn--ghost{ border-color:var(--pdm-noir); color:var(--pdm-noir) !important; }
.pdm-btn--ghost:hover{ background:var(--pdm-noir); color:#fff !important; }
.pdm-btn--white{ background:#fff; color:var(--pdm-rouge) !important; }
.pdm-btn--ghost-w{ border-color:#fff; color:#fff !important; }
.pdm-btn--ghost-w:hover{ background:#fff; color:var(--pdm-noir) !important; }

/* Tag catégorie */
.pdm-tag{
  display:inline-block;
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--pdm-rouge);
  color:#fff;
  padding:4px 9px;
  border-radius:2px;
}
.pdm-tag--dark{ background:var(--pdm-noir); }
.pdm-tag--outline{ background:transparent; color:var(--pdm-rouge); border:1.5px solid var(--pdm-rouge); }

/* --------------------------------------------------------------------------
   2. HEADER  (thème Extra — #main-header)
   -------------------------------------------------------------------------- */
#main-header{
  position:sticky;
  top:0;
  z-index:9999;
  background:var(--pdm-noir);
  border-bottom:3px solid var(--pdm-rouge);
  box-shadow:none;
}
body.admin-bar #main-header{ top:32px; }

#et-menu > li > a,
#et-navigation ul.nav > li > a{
  font-family:var(--pdm-titre);
  font-size:17px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#EDEDEF;
  position:relative;
}
#et-menu > li > a:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:2.5px;
  background:var(--pdm-rouge);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
#et-menu > li > a:hover:after,
#et-menu > li.current-menu-item > a:after{ transform:scaleX(1); }

/* Item de menu « S'abonner » — ajouter la classe pdm-menu-cta dans Apparence > Menus */
#et-menu > li.pdm-menu-cta > a{
  background:var(--pdm-rouge);
  color:#fff;
  border-radius:var(--pdm-r);
  padding:10px 18px !important;
  font-weight:700;
  letter-spacing:.08em;
}
#et-menu > li.pdm-menu-cta > a:after{ display:none; }
#et-menu > li.pdm-menu-cta > a:hover{ background:#fff; color:var(--pdm-noir); }

/* Bandeau TENDANCE */
#top-header .et-trending-post-title,
#top-header a{ font-size:14px; }
#top-header .et-trending-title{
  font-family:var(--pdm-titre);
  font-weight:700;
  letter-spacing:.12em;
  background:var(--pdm-rouge);
  padding:3px 10px;
}

/* --------------------------------------------------------------------------
   3. HERO  —  module « Featured Posts Slider »
   Classe CSS à saisir : pdm-hero
   -------------------------------------------------------------------------- */
.pdm-hero{ margin-bottom:0 !important; }

.pdm-hero .carousel-item,
.pdm-hero .et_pb_slide{
  min-height:560px;
  background-size:cover;
  background-position:center;
  border-radius:var(--pdm-r);
  overflow:hidden;
  position:relative;
}
.pdm-hero .carousel-item:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,8,9,.94) 6%,rgba(8,8,9,.62) 42%,rgba(8,8,9,.05) 78%);
}
.pdm-hero .post-content-box{
  position:relative;
  z-index:2;
  padding:34px;
  max-width:820px;
  background:none !important;
}
.pdm-hero .entry-title{ margin:14px 0 12px; }
.pdm-hero .entry-title a{
  font-family:var(--pdm-display);
  font-weight:400;
  font-size:clamp(30px,3.6vw,50px);
  line-height:1.03;
  text-transform:uppercase;
  color:#fff;
}
.pdm-hero .entry-title a:hover{ color:#FF5A67; }
.pdm-hero .post-meta.vcard,
.pdm-hero .post-meta.vcard p,
.pdm-hero .post-meta a{ color:#B4B4BA; }

.pdm-hero .et-pb-slider-arrows a{
  background:rgba(255,255,255,.12);
  border-radius:var(--pdm-r);
}
.pdm-hero .et-pb-slider-arrows a:hover{ background:var(--pdm-rouge); }
.pdm-hero .et-pb-controllers a{ background:rgba(255,255,255,.35); }
.pdm-hero .et-pb-controllers a.et-pb-active-control{ background:var(--pdm-rouge); }

/* --------------------------------------------------------------------------
   4. BARRE DE RUBRIQUES  —  module « Texte »
   Classe CSS à saisir : pdm-chips
   -------------------------------------------------------------------------- */
.pdm-chips{
  background:var(--pdm-noir-2);
  padding:14px 24px !important;
  margin:0 !important;
  border-radius:var(--pdm-r);
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.pdm-chips::-webkit-scrollbar{ display:none; }
.pdm-chips a{
  display:inline-block;
  font-family:var(--pdm-titre);
  font-weight:600;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#C7C7CC !important;
  border:1.5px solid #3A3A3F;
  border-radius:100px;
  padding:7px 16px;
  margin:0 6px 0 0;
  transition:.18s;
}
.pdm-chips a:hover,
.pdm-chips a.is-active{
  background:var(--pdm-rouge);
  border-color:var(--pdm-rouge);
  color:#fff !important;
}

/* --------------------------------------------------------------------------
   5. FIL D'ACTUALITÉ  —  module « Blog Feed » (mise en page Standard)
   Classe CSS à saisir : pdm-feed
   -------------------------------------------------------------------------- */
.pdm-feed .module-head{
  border-bottom:3px solid var(--pdm-noir);
  padding-bottom:10px;
  margin-bottom:28px;
  background:none !important;
}
.pdm-feed .module-head .feed-title,
.pdm-feed .module-head h1{
  font-family:var(--pdm-display);
  font-weight:400;
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
  color:var(--pdm-noir);
  margin:0;
}

/* Grille 2 colonnes */
.pdm-feed .paginated_page{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

/* Carte article */
.pdm-feed article.post{
  display:flex;
  flex-direction:column;
  border:1px solid var(--pdm-gris-300);
  border-radius:var(--pdm-r);
  overflow:hidden;
  background:#fff;
  margin:0 !important;
  padding:0 !important;
  transition:.22s;
}
.pdm-feed article.post:hover{
  border-color:var(--pdm-noir);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  transform:translateY(-3px);
}
.pdm-feed article.post .header{ margin:0; }
.pdm-feed a.featured-image{
  display:block;
  margin:0;
  aspect-ratio:16/9;
  overflow:hidden;
}
.pdm-feed a.featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pdm-feed .post-content{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
}
.pdm-feed .post-title.entry-title{ margin:0; }
.pdm-feed .post-title.entry-title a{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:24px;
  line-height:1.14;
  text-transform:uppercase;
  color:var(--pdm-noir);
}
.pdm-feed article.post:hover .post-title.entry-title a{ color:var(--pdm-rouge); }
.pdm-feed .excerpt.entry-summary{
  font-size:15.5px;
  color:var(--pdm-gris-900);
  flex:1;
}
.pdm-feed .excerpt.entry-summary p{ margin-bottom:12px; }

/* Le premier article passe en pleine largeur, image à gauche */
.pdm-feed .paginated_page article.post:first-child{
  grid-column:1 / -1;
  flex-direction:row;
}
.pdm-feed .paginated_page article.post:first-child .header{
  width:46%;
  flex:none;
}
.pdm-feed .paginated_page article.post:first-child a.featured-image{
  height:100%;
  aspect-ratio:auto;
  min-height:250px;
}
.pdm-feed .paginated_page article.post:first-child .post-content{ padding:26px; }
.pdm-feed .paginated_page article.post:first-child .post-title.entry-title a{ font-size:30px; }

/* Pagination Extra */
.pdm-feed .pagination,
.pdm-feed .paginated_nav{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:34px;
}
.pdm-feed .pagination a,
.pdm-feed .pagination span{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:16px;
  min-width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1.5px solid var(--pdm-gris-300);
  border-radius:var(--pdm-r);
  color:var(--pdm-gris-600);
}
.pdm-feed .pagination a:hover,
.pdm-feed .pagination .current{
  background:var(--pdm-noir);
  border-color:var(--pdm-noir);
  color:#fff;
}

/* --------------------------------------------------------------------------
   6. WIDGETS DE COLONNE  —  modules « Texte »
   Classe CSS à saisir : pdm-wgt  (ou pdm-wgt pdm-wgt--dark)
   -------------------------------------------------------------------------- */
.pdm-wgt{
  border:1px solid var(--pdm-gris-300);
  border-radius:var(--pdm-r);
  overflow:hidden;
  padding:0 !important;
  margin-bottom:26px !important;
}
.pdm-wgt .pdm-wgt-h{
  background:var(--pdm-noir);
  color:#fff;
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:17px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:11px 16px;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
}
.pdm-wgt .pdm-wgt-h:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pdm-rouge);
  flex:none;
}
.pdm-wgt .pdm-wgt-b{ padding:18px; }
.pdm-wgt .pdm-wgt-b p{ font-size:15px; margin-bottom:14px; }
.pdm-wgt .pdm-btn{ width:100%; justify-content:center; }

/* Variante fond noir (newsletter) */
.pdm-wgt--dark{ border:0; background:var(--pdm-noir); }
.pdm-wgt--dark .pdm-wgt-b{ padding:24px; }
.pdm-wgt--dark .pdm-wgt-b p{ color:#B4B4BA; }
.pdm-wgt--dark h4{
  font-family:var(--pdm-display);
  font-weight:400;
  font-size:25px;
  line-height:1.06;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:9px;
}
.pdm-wgt--dark h4 em{ font-style:normal; color:var(--pdm-rouge); }

/* Lien externe FFHG (classement) */
.pdm-ext{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pdm-gris-600) !important;
  margin-top:10px;
}
.pdm-ext:after{ content:"\2197"; font-size:17px; }
.pdm-ext:hover{ color:var(--pdm-rouge) !important; }

/* --------------------------------------------------------------------------
   7. SECTION À ONGLETS  —  module « Tabbed Posts »
   Classe CSS à saisir : pdm-tabs
   -------------------------------------------------------------------------- */
.pdm-tabs .tabs{
  border-bottom:3px solid var(--pdm-noir);
  background:none !important;
  margin-bottom:28px;
}
.pdm-tabs .tabs ul{ display:flex; gap:0; }
.pdm-tabs .tabs ul li{
  background:none !important;
  border:0 !important;
  margin:0 !important;
}
.pdm-tabs .tabs ul li span,
.pdm-tabs .tabs ul li a{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 22px;
  display:block;
  color:var(--pdm-gris-600);
  border-radius:var(--pdm-r) var(--pdm-r) 0 0;
  transition:.18s;
  cursor:pointer;
}
.pdm-tabs .tabs ul li:hover span{ color:var(--pdm-noir); }
.pdm-tabs .tabs ul li.active span,
.pdm-tabs .tabs ul li.active a{
  background:var(--pdm-noir);
  color:#fff;
}
.pdm-tabs .tab-nav{ display:none; }

/* Extra n'affiche que l'onglet actif : on ne passe en grid que celui-là. */
.pdm-tabs .tab-content{ display:none; }
.pdm-tabs .tab-content.active{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:32px;
  align-items:start;
}

/* Article principal de l'onglet */
.pdm-tabs .main-post{ margin:0; }
.pdm-tabs .main-post a.featured-image{
  display:block;
  aspect-ratio:16/9;
  border-radius:var(--pdm-r);
  overflow:hidden;
}
.pdm-tabs .main-post a.featured-image img{
  width:100%; height:100%; object-fit:cover;
}
.pdm-tabs .main-post .post-content{ padding:18px 0 0; }
.pdm-tabs .main-post .entry-title a{
  font-family:var(--pdm-display);
  font-weight:400;
  font-size:31px;
  line-height:1.07;
  text-transform:uppercase;
  color:var(--pdm-noir);
}
.pdm-tabs .main-post:hover .entry-title a{ color:var(--pdm-rouge); }
.pdm-tabs .main-post .excerpt{ font-size:16px; color:var(--pdm-gris-900); margin-top:8px; }

/* Liste secondaire */
.pdm-tabs ul.posts-list{ margin:0; padding:0; list-style:none; }
.pdm-tabs ul.posts-list li{
  border-bottom:1px solid var(--pdm-gris-300);
  padding:15px 0;
  margin:0;
}
.pdm-tabs ul.posts-list li:first-child{ padding-top:0; }
.pdm-tabs ul.posts-list li:last-child{ border-bottom:0; }
.pdm-tabs ul.posts-list article{
  display:flex;
  gap:15px;
  align-items:center;
}
.pdm-tabs ul.posts-list a.post-thumbnail{
  width:104px;
  flex:none;
  aspect-ratio:4/3;
  border-radius:var(--pdm-r);
  overflow:hidden;
  display:block;
}
.pdm-tabs ul.posts-list a.post-thumbnail img{
  width:100%; height:100%; object-fit:cover;
}
.pdm-tabs ul.posts-list .entry-title{ margin:0 0 5px; }
.pdm-tabs ul.posts-list .entry-title a{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:19px;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--pdm-noir);
}
.pdm-tabs ul.posts-list article:hover .entry-title a{ color:var(--pdm-rouge); }

/* --------------------------------------------------------------------------
   8. BANDEAU ABONNEMENT  —  section Divi (fond rouge) + modules Texte
   Classe CSS de la section : pdm-cta
   -------------------------------------------------------------------------- */
.pdm-cta{
  background:var(--pdm-rouge) !important;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.pdm-cta:before{
  content:"";
  position:absolute;
  right:-90px; top:-90px;
  width:400px; height:400px;
  border:64px solid rgba(255,255,255,.07);
  border-radius:50%;
}
.pdm-cta .et_pb_row{ position:relative; z-index:2; }
.pdm-cta h2{
  font-family:var(--pdm-display);
  font-weight:400;
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.04;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:12px;
}
.pdm-cta p{ color:#FFD9DC !important; font-size:17.5px; margin-bottom:22px; }

.pdm-perk{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--pdm-r);
  padding:14px 16px;
  margin-bottom:12px;
}
.pdm-perk .k{ font-family:var(--pdm-display); font-size:22px; line-height:1; flex:none; color:#fff; }
.pdm-perk b{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:17px;
  letter-spacing:.04em;
  text-transform:uppercase;
  display:block;
  color:#fff;
}
.pdm-perk span{ font-size:14.5px; color:#FFDDE0; }
/* v1.1.0 — l'éditeur Divi enveloppe le numéro dans un <p> et laisse la
   description en texte nu après le <b>. On absorbe les deux variantes de
   markup pour que la carte reste alignée quoi qu'il arrive. */
.pdm-perk > p{ margin:0 !important; flex:none; }
.pdm-perk > p:has(.k){ line-height:1; }
.pdm-perk > div{ font-size:14.5px; color:#FFDDE0; }
.pdm-perk > div b{ margin-bottom:2px; }

/* --------------------------------------------------------------------------
   9. BIBLIOGRAPHIE  —  module « Blog Feed » ou « Masonry Blog »
   Classe CSS à saisir : pdm-biblio
   -------------------------------------------------------------------------- */
.pdm-biblio .module-head{
  border-bottom:3px solid var(--pdm-noir);
  padding-bottom:10px;
  margin-bottom:28px;
}
.pdm-biblio .module-head .feed-title,
.pdm-biblio .module-head h1{
  font-family:var(--pdm-display);
  font-weight:400;
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
  margin:0;
}
.pdm-biblio .paginated_page{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.pdm-biblio article.post{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin:0 !important;
  border:0;
}
.pdm-biblio a.featured-image{
  display:block;
  aspect-ratio:2/3;
  border-radius:var(--pdm-r);
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
  transition:.22s;
}
.pdm-biblio a.featured-image img{ width:100%; height:100%; object-fit:cover; }
.pdm-biblio article.post:hover a.featured-image{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.pdm-biblio .post-content{ padding:0; }
.pdm-biblio .entry-title a{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:18px;
  line-height:1.16;
  text-transform:uppercase;
  color:var(--pdm-noir);
}
.pdm-biblio article.post:hover .entry-title a{ color:var(--pdm-rouge); }
.pdm-biblio .excerpt{ display:none; }
.pdm-biblio .read-more-button{ display:none; }

/* --------------------------------------------------------------------------
   10. FOOTER  (thème Extra — #footer)
   -------------------------------------------------------------------------- */
#footer{ background:var(--pdm-noir); color:#fff; }
#footer .widgettitle,
#footer h4{
  font-family:var(--pdm-titre);
  font-weight:700;
  font-size:16px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:14px;
}
#footer a{ color:#9A9AA0; font-size:15px; }
#footer a:hover{ color:var(--pdm-rouge); }
#footer-bottom{ border-top:1px solid #29292E; }
#footer-info{ color:#6E6E75; font-size:13.5px; }

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .pdm-biblio .paginated_page{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:980px){
  .pdm-tabs .tab-content.active{ grid-template-columns:1fr; }
  .pdm-hero .carousel-item,
  .pdm-hero .et_pb_slide{ min-height:420px; }
  #main-header{ position:relative; }
}

@media (max-width:767px){
  body,
  #main-content{ font-size:16px; }

  .pdm-feed .paginated_page{ grid-template-columns:1fr; }
  .pdm-feed .paginated_page article.post:first-child{ flex-direction:column; }
  .pdm-feed .paginated_page article.post:first-child .header{ width:100%; }
  .pdm-feed .paginated_page article.post:first-child a.featured-image{
    aspect-ratio:16/9;
    min-height:0;
  }
  .pdm-feed .paginated_page article.post:first-child .post-content{ padding:18px; }
  .pdm-feed .paginated_page article.post:first-child .post-title.entry-title a{ font-size:25px; }
  .pdm-feed .module-head .feed-title,
  .pdm-biblio .module-head .feed-title{ font-size:27px; }

  .pdm-hero .post-content-box{ padding:22px; }
  .pdm-hero .carousel-item{ min-height:360px; }

  .pdm-tabs .tabs ul{ overflow-x:auto; }
  .pdm-tabs .main-post .entry-title a{ font-size:26px; }
  .pdm-tabs ul.posts-list a.post-thumbnail{ width:88px; }

  .pdm-biblio .paginated_page{ grid-template-columns:1fr 1fr; }
}


/* ==========================================================================
   3bis. HERO EN GRILLE 1 + 2  (fidèle à la maquette v2 — remplace le slider)
   Modules : deux « Blog Feed »  ·  Classes : pdm-hero-main / pdm-hero-side
   NB : le Blog Feed « standard » d'Extra rend chaque article en carte
   horizontale (image 50% / texte 50%). On force donc l'article en bloc
   pleine largeur pour obtenir une image plein cadre + titre en surimpression.

   v1.1.0 — ces règles étaient injectées via un module Code dans le layout de
   la préprod. Elles sont désormais dans le thème enfant : le module Code peut
   être supprimé du Category Builder (voir le guide de montage).
   ========================================================================== */

/* Bande noire pleine largeur, sans avoir à ajouter de classe sur la section.
   Repris de la préprod : le sélecteur :has() cible automatiquement la section
   qui contient le hero. Fallback conservé pour la classe .pdm-hero-sec, à
   utiliser sur les navigateurs sans :has() ou si l'on préfère l'explicite. */
.pdm-hero-sec,
.et_pb_section:has(.pdm-hero-main){
  background-color:var(--pdm-noir) !important;
  padding-top:36px !important; padding-bottom:44px !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  padding-left:calc(50vw - 50%) !important; padding-right:calc(50vw - 50%) !important;
}
/* indispensable : la sortie en 50vw ci-dessus crée sinon un scroll horizontal */
html, body{ overflow-x:hidden; }

.pdm-hero-sec .et_pb_row,
.et_pb_section:has(.pdm-hero-main) .et_pb_row{ max-width:1280px; }
.pdm-hero-main, .pdm-hero-side{ margin:0 !important; background:transparent !important; }
/* le module Code qui portait ce CSS ne doit jamais occuper de place */
.pdm-css-inject{ display:none !important; }
.pdm-hero-main .paginated_content, .pdm-hero-side .paginated_content{ margin:0; height:100%; }
.pdm-hero-main .paginated_page{ margin:0; height:100%; }
.pdm-hero-side .paginated_page{ margin:0; height:100%; display:flex; flex-direction:column; gap:22px; }

/* article forcé en bloc pleine largeur (au lieu de la carte 50/50 par défaut) */
.pdm-hero-main article.post, .pdm-hero-side article.post{
  display:block !important; position:relative; width:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  border-radius:var(--pdm-r); overflow:hidden;
}
.pdm-hero-side article.post{ flex:1; }
.pdm-hero-main .header, .pdm-hero-side .header{
  margin:0 !important; padding:0 !important; width:100% !important;
  float:none !important; position:relative; height:100%;
}
.pdm-hero-main a.featured-image, .pdm-hero-side a.featured-image{
  display:block; margin:0; width:100%; height:100%; position:relative;
}
.pdm-hero-main a.featured-image img{ width:100% !important; height:520px !important; object-fit:cover; display:block; }
.pdm-hero-side article.post a.featured-image img{ width:100% !important; height:249px !important; object-fit:cover; display:block; }
.pdm-hero-main a.featured-image::after, .pdm-hero-side a.featured-image::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,rgba(8,8,9,.95) 6%,rgba(8,8,9,.5) 46%,rgba(8,8,9,0) 82%);
}
.pdm-hero-main .post-content, .pdm-hero-side .post-content{
  position:absolute !important; left:0; right:0; bottom:0; width:100% !important;
  z-index:3; color:#fff; background:transparent !important;
}
.pdm-hero-main .post-content{ padding:30px; }
.pdm-hero-side .post-content{ padding:18px; }
.pdm-hero-main .entry-title, .pdm-hero-side .entry-title{ margin:0 0 6px; background:transparent !important; }
.pdm-hero-main .entry-title a{
  font-family:var(--pdm-display) !important; font-weight:400; font-size:clamp(26px,2.6vw,42px);
  line-height:1.05; text-transform:uppercase; color:#fff !important;
}
.pdm-hero-side .entry-title a{
  font-family:var(--pdm-titre) !important; font-weight:700; font-size:21px; line-height:1.14;
  text-transform:uppercase; color:#fff !important;
}
.pdm-hero-main .entry-title a:hover, .pdm-hero-side .entry-title a:hover{ color:#FF5A67 !important; }
.pdm-hero-main .post-meta, .pdm-hero-main .post-meta a,
.pdm-hero-side .post-meta, .pdm-hero-side .post-meta a{ color:#CFCFD4 !important; }
.pdm-hero-main .excerpt, .pdm-hero-main .excerpt p{ color:#C8C8CD !important; font-size:16px; margin-top:8px; max-width:600px; }
.pdm-hero-side .excerpt, .pdm-hero-main .read-more-button, .pdm-hero-side .read-more-button{ display:none; }
.pdm-hero-main .et_pb_extra_overlay, .pdm-hero-side .et_pb_extra_overlay{ display:none; }

@media (max-width:980px){
  .pdm-hero-main a.featured-image img{ height:380px !important; }
}
@media (max-width:767px){
  .pdm-hero-side .paginated_page{ flex-direction:column; }
  .pdm-hero-main a.featured-image img{ height:300px !important; }
  .pdm-hero-side article.post a.featured-image img{ height:210px !important; }
  .pdm-hero-main .entry-title a{ font-size:26px; }
}


/* ==========================================================================
   5bis. FIL ACTUALITÉ — correctif image plein cadre
   Le Blog Feed « standard » d'Extra impose une carte 50/50 (image/texte)
   avec une forte spécificité ; on force donc l'image en pleine largeur.
   (Sur le site de test, ces règles sont aussi dans le module Code du layout.)
   ========================================================================== */
.pdm-feed .paginated_page article.post{ display:flex !important; flex-direction:column !important; overflow:hidden; }
.pdm-feed .paginated_page article.post .header{ width:100% !important; float:none !important; margin:0 !important; padding:0 !important; }
.pdm-feed .paginated_page article.post a.featured-image{ width:100% !important; display:block; margin:0; aspect-ratio:16/9; overflow:hidden; }
.pdm-feed .paginated_page article.post a.featured-image img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
.pdm-feed .paginated_page article.post .post-content{ width:100% !important; }
/* première carte : pleine largeur, image à gauche */
.pdm-feed .paginated_page article.post:first-child{ flex-direction:row !important; grid-column:1 / -1; }
.pdm-feed .paginated_page article.post:first-child .header{ width:46% !important; flex:none; }
.pdm-feed .paginated_page article.post:first-child a.featured-image{ height:100% !important; aspect-ratio:auto; min-height:280px; }
.pdm-feed .paginated_page article.post:first-child .post-content{ width:54% !important; }

@media (max-width:767px){
  .pdm-feed .paginated_page article.post:first-child{ flex-direction:column !important; }
  .pdm-feed .paginated_page article.post:first-child .header{ width:100% !important; }
  .pdm-feed .paginated_page article.post:first-child .post-content{ width:100% !important; }
  .pdm-feed .paginated_page article.post:first-child a.featured-image{ aspect-ratio:16/9; min-height:0; }
}


/* ==========================================================================
   12. TITRES DE SECTION  —  module « Texte »
   Classe CSS à saisir : pdm-sec-title
   v1.1.0 — En préprod, « Première Ligne », « L'actualité », « Par rubrique »,
   « Quand la glace vous manque » et « Le hockey en image » sont mis en forme
   module par module, dans les réglages de design du Divi Builder. Résultat :
   la charte n'est pas portable (rien dans le thème), et il faut refaire les
   réglages à chaque nouveau titre. Cette classe fait le travail à leur place.
   Mettre le mot à colorer en italique dans l'éditeur (balise <em>).
   ========================================================================== */
.pdm-sec-title h1, .pdm-sec-title h2{
  font-family:var(--pdm-display) !important;
  font-weight:400;
  font-size:34px;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--pdm-noir);
  border-bottom:3px solid var(--pdm-noir);
  padding-bottom:10px;
  margin:0 0 28px;
}
.pdm-sec-title em{ font-style:normal; color:var(--pdm-rouge); }
/* sur la bande noire du hero, le titre et son filet passent en blanc */
.pdm-hero-sec .pdm-sec-title h1,
.pdm-hero-sec .pdm-sec-title h2,
.et_pb_section:has(.pdm-hero-main) .pdm-sec-title h1,
.et_pb_section:has(.pdm-hero-main) .pdm-sec-title h2{
  color:#fff; border-bottom-color:#fff;
}
@media (max-width:767px){
  .pdm-sec-title h1, .pdm-sec-title h2{ font-size:27px; }
}


/* ==========================================================================
   6. AJOUTS — marge mobile hero, cartes Bibliographie, galerie
   ========================================================================== */

/* Marge entre les deux blocs du hero en mobile */
@media (max-width:767px){
  .pdm-hero-side{ margin-top:22px !important; }
}

/* Bibliographie — cartes média (visuel + type + titre + description).
   v1.1.0 : grille auto-fit au lieu de repeat(4,1fr). Sur la préprod les
   cartes sont réparties dans 4 colonnes Divi, avec 1 ou 2 cartes par
   wrapper — une grille figée à 4 colonnes les écrasait. auto-fit gère les
   deux cas : 1 colonne par wrapper étroit, 4 colonnes si tout est dans un
   seul module pleine largeur. */
.pdm-biblio-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.pdm-biblio-cards .card + .card{ margin-top:0; }
.pdm-biblio-cards .card a{ display:block; color:inherit; text-decoration:none; }
.pdm-biblio-cards .thumb{ display:block; aspect-ratio:4/3; border-radius:var(--pdm-r); overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.14); transition:.22s; }
.pdm-biblio-cards .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdm-biblio-cards .card:hover .thumb{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,.22); }
.pdm-biblio-cards .type{ display:inline-block; font-family:var(--pdm-titre); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--pdm-rouge); margin:12px 0 4px; }
.pdm-biblio-cards h4{ font-family:var(--pdm-titre); font-weight:700; font-size:19px; line-height:1.14; text-transform:uppercase; margin:0 0 4px; color:var(--pdm-noir); }
.pdm-biblio-cards .card:hover h4{ color:var(--pdm-rouge); }
.pdm-biblio-cards p{ font-size:13.5px; line-height:1.45; color:var(--pdm-gris-600); margin:0; }
/* la préprod enveloppe le numéro dans un <p> ; on neutralise sa marge */
.pdm-biblio-cards .card > p:first-child{ margin-top:0; }

/* Galerie « Le hockey en image » — module Galerie Divi forcé en grille */
.pdm-gallery .et_pb_gallery_items{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:16px; margin:0; }
.pdm-gallery .et_pb_gallery_item{ width:auto !important; margin:0 !important; padding:0 !important; float:none !important; }
.pdm-gallery .et_pb_gallery_item .et_pb_gallery_image{ border-radius:var(--pdm-r); overflow:hidden; aspect-ratio:4/3; }
.pdm-gallery .et_pb_gallery_item .et_pb_gallery_image img{ width:100% !important; height:100% !important; object-fit:cover; display:block; border-radius:var(--pdm-r); }
.pdm-gallery .et_pb_gallery_item .et_overlay{ border-radius:var(--pdm-r); }
@media (max-width:980px){ .pdm-gallery .et_pb_gallery_items{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .pdm-gallery .et_pb_gallery_items{ grid-template-columns:1fr 1fr; } }