/*
Theme Name:     La note marketing
Theme URI:      https://lanotemarketing.uqam.ca
Description:    Thème block (FSE) autonome pour le blogue La note marketing — ESG-UQAM. Direction brutalist : palette papier / encre / rouge, Space Grotesk + Space Mono, traitement éditorial fort. Articles, pages, archives, recherche, 404.
Author:         La note marketing
Author URI:     https://lanotemarketing.uqam.ca
Version:        2.4.6
Requires at least: 6.4
Tested up to:   6.7
Requires PHP:   7.4
License:        GNU General Public License v2 or later
License URI:    https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain:    lanote-marketing
Tags:           blog, news, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, threaded-comments, translation-ready
*/

/* ════════════════════════════════════════════════════════════════════
   LA NOTE MARKETING · THÈME BLOCK AUTONOME
   Construit pour le Site Editor (FSE) de WordPress 6.4+.
   ════════════════════════════════════════════════════════════════════ */

/*  ════════════════════════════════════════════════════════════════════
   POLICES AUTO-HÉBERGÉES
   Espace pour fichiers .woff2 dans assets/fonts/
   ════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-mono-700.woff2') format('woff2');
}

:root {
  --lnm-red:       #FF2D2D;
  --lnm-red-deep:  #C00010;
  --lnm-ink:       #0d0d0d;
  --lnm-paper:     #f4f1eb;
  --lnm-display:   "Space Grotesk", "Helvetica Neue", sans-serif;
  --lnm-mono:      "Space Mono", ui-monospace, Menlo, monospace;
}

/* ─── Base ─────────────────────────────────────────────────────────── */
body.wp-site-blocks, body {
  background:  var(--lnm-paper);
  color:       var(--lnm-ink);
  font-family: var(--lnm-display);
}

/* ─── Titres ───────────────────────────────────────────────────────── */
h1, h2, h3, .wp-block-post-title, .wp-block-site-title {
  font-family:    var(--lnm-display);
  font-weight:    700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height:    0.95;
}
.wp-block-post-title, .wp-block-post-title a {
  color: var(--lnm-ink);
  text-decoration: none !important;
  transition: color .15s;
}
.wp-block-post-title a:hover { color: var(--lnm-red); }
/* Très grand uniquement sur le hero d'accueil et l'article unique.
   Les titres en cartes gardent leur taille définie dans les templates. */
body.single .wp-block-post-title,
.lnm-hero .wp-block-post-title { font-size: clamp(40px, 7vw, 70px); }

/* ─── Étiquette catégorie : badge rouge ───────────────────────────── */
.wp-block-post-terms,
.cat-links,
.post-categories {
  font-family:    var(--lnm-mono);
  font-size:      20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight:    700;
  display:        inline-block;
}
.wp-block-post-terms a,
.cat-links a,
.post-categories a {
  text-decoration: none !important;
  padding:         4px 10px;
  display:         inline-block;
}

/* ─── Méta : date, auteur ─────────────────────────────────────────── */
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-author-name {
  font-family:    var(--lnm-mono);
  font-size:      11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--lnm-ink);
}

/* ─── Cartes d'article (Query Loop) ───────────────────────────────── */
.wp-block-query .wp-block-post {
  border:      1px solid var(--lnm-ink);
  padding:     22px;
  background:  var(--lnm-paper);
  margin-bottom: -1px;
  box-shadow:  inset 0 0 0 0 var(--lnm-red);
  transition:  box-shadow .18s;
}
/* Hover seulement sur le front-end (pas dans l'éditeur) */
body:not(.block-editor-iframe__body):not(.wp-admin) .wp-block-query .wp-block-post:hover {
  box-shadow: inset 0 0 0 2px var(--lnm-ink);
}

/* ─── Hero : résumé automatique (sous-titres H2 ou extrait) ───────── */
.lnm-hero-summary {
  list-style:  none;
  padding:     0;
  margin:      0;
  font-family: var(--lnm-display);
  font-size:   clamp(18px, 2vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  max-width:   720px;
}
.lnm-hero-summary li {
  padding:     6px 0;
  border-top:  1px solid rgba(13, 13, 13, 0.18);
}
.lnm-hero-summary li::before {
  content:      "▸ ";
  color:        var(--lnm-red);
  font-family:  var(--lnm-mono);
  margin-right: 6px;
  font-weight:  700;
}
.lnm-hero-summary li:last-child {
  border-bottom: 1px solid rgba(13, 13, 13, 0.18);
}
.lnm-hero-summary--text {
  font-size:   clamp(18px, 2vw, 22px);
  line-height: 1.4;
  border-top:  1px solid rgba(13, 13, 13, 0.18);
  border-bottom: 1px solid rgba(13, 13, 13, 0.18);
  padding:     14px 0;
}
.lnm-hero-summary--text p { margin: 0; }

/* ─── Hero : extrait à pleine largeur avec puces (line-break naturel) ── */
/* Tu écris dans le champ Extrait :
   ▸ Point 1
   ▸ Point 2
   ▸ Point 3
   et chaque ligne s'affiche séparément.
*/
.lnm-hero .wp-block-post-excerpt,
.lnm-hero .wp-block-post-excerpt p,
.lnm-hero .wp-block-post-excerpt__excerpt {
  white-space:    pre-line;
  font-family:    var(--lnm-display);
  font-size:      clamp(18px, 2vw, 22px);
  line-height:    1.4;
  font-weight:    500;
}


/* ─── Image mise en avant : carrée, bordée ────────────────────────── */
.wp-block-post-featured-image img {
  border-radius: 0 !important;
  border:        1px solid var(--lnm-ink);
  aspect-ratio:  1 / 1;
  object-fit:    cover;
}

/* ─── Citations : bloc sombre, guillemet rouge ────────────────────── */
.wp-block-quote, blockquote {
  background:    var(--lnm-ink);
  color:         var(--lnm-paper);
  padding:       28px 28px 24px 60px;
  font-family:   var(--lnm-display);
  font-size:     24px;
  line-height:   1.3;
  font-weight:   500;
  border:        none !important;
  position:      relative;
  font-style:    normal;
  border-radius: 0;
}
.wp-block-quote::before, blockquote::before {
  content:     "\201C";
  color:       var(--lnm-red);
  font-size:   64px;
  line-height: 0;
  position:    absolute;
  top:         34px;
  left:        14px;
}
.wp-block-quote cite {
  display:        block;
  margin-top:     16px;
  font-family:    var(--lnm-mono);
  font-size:      13px;
  letter-spacing: .1em;
  color:          var(--lnm-mono);
  font-style:     normal;
}

/* ─── Bloc fichier ────────────────────────────────────────────────── */
.wp-block-file a:not(.wp-block-file__button) {
  color:       var(--lnm-paper) !important;
  font-size:   20px;
  font-weight: 700;
}

.wp-block-file__button {
  font-size: 20px;
  color:     var(--lnm-paper) !important;
}

/* ─── Boutons ─────────────────────────────────────────────────────── */
.wp-block-button__link, .wp-element-button {
  background:     var(--lnm-ink);
  color:          var(--lnm-paper);
  border-radius:  0 !important;
  font-family:    var(--lnm-mono);
  font-size:      12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding:        14px 24px;
  transition:     background .15s, color .15s;
  border:         none !important;
}
.wp-block-button__link:hover, .wp-element-button:hover {
  background: var(--lnm-red);
  color:      var(--lnm-ink);
}

/* ─── Navigation ──────────────────────────────────────────────────── */
.wp-block-navigation {
  background:     var(--lnm-ink);
  color:          var(--lnm-paper);
  padding:        14px 40px;
  font-family:    var(--lnm-mono);
  font-size:      11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content       { color: var(--lnm-paper); text-decoration: none; }
.wp-block-navigation a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--lnm-red);   text-decoration: none; }
.wp-block-navigation .current-menu-item a,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content { color: var(--lnm-red); text-decoration: none; }

/* ─── Liens dans le contenu ───────────────────────────────────────── */
.wp-block-post-content a {
  color: var(--lnm-red-deep);
  text-decoration: none;
}
.wp-block-post-content a:hover {
  color: var(--lnm-red);
  text-decoration: underline;
}
/* ─── Footer ──────────────────────────────────────────────────────── */
.wp-block-template-part.site-footer,
footer.wp-block-template-part {
  background:     var(--lnm-ink);
  color:          var(--lnm-paper);
  font-family:    var(--lnm-mono);
  font-size:      11px;
  letter-spacing: .08em;
}
/* ════════════════════════════════════════════════════════════════════
Molongui — reset minimal
   ════════════════════════════════════════════════════════════════════ */
body .m-a-box {
  background: var(--lnm-paper) !important;
  color: var(--lnm-ink) !important;
  border: 1px solid var(--lnm-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body .m-a-box-name,
body .m-a-box-name a,
body .m-a-box-name * {
  color: var(--lnm-red) !important;
  text-transform: none !important;
}
body .m-a-box-description,
body .m-a-box-bio {
  color: var(--lnm-ink) !important;
}

/* ════════════════════════════════════════════════════════════════════
   TEMPLATE TOURNOI DES PUBLICITÉS
   ════════════════════════════════════════════════════════════════════ */

body.category-tournoi .wp-block-post-title,
body.category-combat-des-publicites .wp-block-post-title {
  background:    var(--lnm-ink);
  color:         var(--lnm-paper);
  padding:       56px 40px 40px;
  font-size:     clamp(72px, 11vw, 168px);
  border-bottom: 4px solid var(--lnm-red);
  margin:        0;
}

.lnm-podium {
  display:               grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-left:           1px solid var(--lnm-ink);
  border-top:            1px solid var(--lnm-ink);
  margin:                40px 0;
}
.lnm-podium-card {
  padding:        28px;
  min-height:     320px;
  border-right:   1px solid var(--lnm-ink);
  border-bottom:  1px solid var(--lnm-ink);
  display:        flex;
  flex-direction: column;
}
.lnm-podium-card.lnm-podium-or {
  background: var(--lnm-red);
  color:      var(--lnm-ink);
}
.lnm-podium-rank {
  font-family:    var(--lnm-display);
  font-weight:    700;
  font-size:      96px;
  line-height:    0.85;
  color:          var(--lnm-red);
  letter-spacing: -0.04em;
}
.lnm-podium-or .lnm-podium-rank {
  font-size: 156px;
  color:     var(--lnm-ink);
}
.lnm-podium-brand {
  font-family:    var(--lnm-mono);
  font-size:      11px;
  letter-spacing: .18em;
  font-weight:    700;
  margin:         18px 0 4px;
}
.lnm-podium-title {
  font-family:    var(--lnm-display);
  font-weight:    700;
  font-size:      22px;
  line-height:    1.1;
  letter-spacing: -0.015em;
}
.lnm-podium-or .lnm-podium-title { font-size: 28px; }
.lnm-podium-team {
  margin-top:     auto;
  padding-top:    14px;
  border-top:     1px solid rgba(13,13,13,0.2);
  font-family:    var(--lnm-mono);
  font-size:      10px;
  letter-spacing: .08em;
  line-height:    1.6;
}
.lnm-podium-or .lnm-podium-team { border-top-color: var(--lnm-ink); }

/* Grille finalistes */
.lnm-finalists {
  background: #1a1a1a;
  color:      var(--lnm-paper);
  padding:    48px 40px;
}
.lnm-finalists-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  border-left:           1px solid rgba(244,241,235,0.2);
  border-top:            1px solid rgba(244,241,235,0.2);
}
.lnm-finalists-grid .wp-block-embed {
  margin:        0;
  aspect-ratio:  16 / 9;
  border:        1px solid var(--lnm-ink);
}

/* YOP Poll · habillage brutalist */
.yop-poll {
  background:    var(--lnm-paper) !important;
  border:        2px solid var(--lnm-ink) !important;
  border-radius: 0 !important;
  padding:       28px !important;
  font-family:   var(--lnm-display) !important;
}
.yop-poll-question {
  font-family:    var(--lnm-mono) !important;
  font-size:      13px !important;
  letter-spacing: .14em !important;
  font-weight:    700 !important;
  text-transform: uppercase;
  border-bottom:  1px solid var(--lnm-ink);
  padding-bottom: 10px;
  margin-bottom:  18px !important;
}
.yop-poll-result-bar {
  background:    rgba(13,13,13,0.08) !important;
  border-radius: 0 !important;
  height:        22px !important;
}
.yop-poll-result-fill {
  background:    var(--lnm-ink) !important;
  border-radius: 0 !important;
  transition:    width .6s cubic-bezier(.2,.7,.3,1);
}
.yop-poll input[type="submit"], .yop-poll button {
  background:     var(--lnm-ink) !important;
  color:          var(--lnm-paper) !important;
  border:         none !important;
  border-radius:  0 !important;
  font-family:    var(--lnm-mono) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding:        14px 24px !important;
  cursor:         pointer;
}
.yop-poll input[type="submit"]:hover, .yop-poll button:hover {
  background: var(--lnm-red) !important;
  color:      var(--lnm-ink) !important;
}
/* ════════════════════════════════════════════════════════════════════
   RAIL INSTAGRAM (Smash Balloon · sb_instagram_feed)
   Visible uniquement sur desktop (≥1280px)
   ════════════════════════════════════════════════════════════════════ */
 
@media (min-width: 1280px) {
  body.lnm-has-ig-rail { padding-right: 200px; }

  .lnm-ig-rail {
    position:        fixed;
    top:             50px;
    right:           0;
    width:           200px;
    z-index:         30;
    background:      var(--lnm-paper);
    border-left:     1px solid var(--lnm-ink);
    border-bottom:   1px solid var(--lnm-ink);
    max-height:      calc(100vh - 50px);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
  }
  .lnm-ig-rail-header {
    background:     var(--lnm-red);
    color:          var(--lnm-ink);
    padding:        10px 10px;
    font-family:    var(--lnm-mono);
    font-size:      13px;
    letter-spacing: .12em;
    font-weight:    700;
    text-transform: uppercase;
  }
	 	.lnm-ig-rail #sbi_images,
	.lnm-ig-rail .sbi_images {
	  display: flex !important;
	  flex-direction: column !important;
	  width: 200px !important;
	}
	.lnm-ig-rail .sbi_item {
	  width: 200px !important;
	  float: none !important;
	  flex-shrink: 0 !important;
	}	
  /* Le widget Smash Balloon — on cache tout sauf les photos */
  .lnm-ig-rail .sb_instagram_feed  { padding: 0 !important; }
  .lnm-ig-rail .sbi_photo_wrap     { width: 100% !important; }
  .lnm-ig-rail .sbi_item           { border-top: 1px solid rgba(13, 13, 13, 0.15); width: 100% !important; }
 
  /* Masquer bio, boutons, header du widget */
  .lnm-ig-rail #sbi_load,
  .lnm-ig-rail .sbi_follow_btn,
  .lnm-ig-rail .sbi-header,
  .lnm-ig-rail .sbi_header,
  .lnm-ig-rail #sbi_header,
  .lnm-ig-rail .sbi-bio,
  .lnm-ig-rail .sbi_bio,
  .lnm-ig-rail .sbi-header-text,
  .lnm-ig-rail .sbi_header_text,
  .lnm-ig-rail .sbi-header-img,
  .lnm-ig-rail .sbi_header_img,
  .lnm-ig-rail .sbi_username,
  .lnm-ig-rail .sbi-header-link,
  .lnm-ig-rail [id^="sbi_header"] { display: none !important; }
 
  /* Forcer une colonne unique */
  .lnm-ig-rail #sbi_images,
  .lnm-ig-rail .sbi_images        { width: 200px !important; }
  .lnm-ig-rail .sbi_item          { width: 200px !important; float: none !important; }
}
@media (max-width: 1279px) {
  .lnm-ig-rail { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Tes règles existantes */
  .wp-block-post-title { font-size: clamp(40px, 12vw, 64px); }
  .wp-block-navigation { padding: 12px 16px; }
  .lnm-podium { grid-template-columns: 1fr; }
  .lnm-finalists-grid { grid-template-columns: 1fr; }

/* === Header === */
	.lnm-site-header {
		  flex-direction: row !important;
		  flex-wrap: wrap !important;
		  align-items: center !important;
		  justify-content: space-between !important;
		  padding: 14px 16px !important;
		  gap: 12px;
	}
	.lnm-site-header > div:first-child {
		  flex: 1;  /* le logo prend l'espace dispo */
	}
	.lnm-site-header .wp-block-search {
		  flex-basis: 100% !important;  /* force la recherche sur sa propre ligne */
	}
	.lnm-site-header .wp-block-search__inside-wrapper {
		  width: 100% !important;
	}
	.lnm-site-header .wp-block-site-title + p {
		  display: none;
	}
/* === Hero === */
	.lnm-hero .wp-block-post > .wp-block-group {
		  padding: 24px 16px !important;  /* écrase le 40px inline */
	}
	.lnm-hero .wp-block-columns {
		  flex-wrap: wrap !important;
	}
	.lnm-hero .wp-block-column {
		  flex-basis: 100% !important;  /* écrase le 58%/42% inline */
	}
	.lnm-hero .wp-block-post-title {
		  font-size: clamp(36px, 11vw, 56px) !important;  /* écrase le 64-132px inline */
		  line-height: 0.92 !important;
		  word-break: break-word;
		  hyphens: auto;
	}
	.wp-block-post-title {
    font-size: clamp(32px, 10vw, 52px) !important;
    line-height: 0.92 !important;
    word-break: break-word;
    hyphens: auto;
	}
  /* Tuer 100% la bande Instagram et son espace */
  body.lnm-has-ig-rail {
    padding-right: 0 !important;
  }
}