/* =====================================================================
   Shalshelet News — surcouche visuelle moderne (v1.3)
   Thème : GeneratePress 3.6.0 (mode separate-containers)
   100 % CSS, purement cosmétique, chargée sur tout le site.
   Désactivable en supprimant le mu-plugin shalshelet-modern.
   ===================================================================== */

body {
  /* Palette : doré tiré du logo + neutres chauds */
  --sn-gold:        #bf932f;
  --sn-gold-light:  #d9b558;
  --sn-gold-dark:   #9a7521;
  --sn-ink:         #23282d;
  --sn-muted:       #6b7280;
  --sn-champagne:   #ead9ab;
  --sn-card-radius: 14px;
  --sn-shadow:        0 1px 2px rgba(95,75,20,.06), 0 6px 22px rgba(95,75,20,.09);
  --sn-shadow-hover:  0 14px 34px rgba(95,75,20,.16);
  --sn-ring:          0 0 0 3px rgba(191,147,47,.25);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Fond champagne chaleureux + halos dorés discrets */
  background:
    radial-gradient(900px 420px at 88% -60px, rgba(191,147,47,.16), transparent 60%),
    radial-gradient(720px 340px at -8% 14%, rgba(166,124,37,.12), transparent 60%),
    radial-gradient(800px 420px at 50% 110%, rgba(191,147,47,.10), transparent 55%),
    linear-gradient(180deg, #fbf6ea 0%, #f4ecd9 55%, #efe5cf 100%) fixed;
}

/* ---------------------------------------------------------------------
   1. Header : logo centré, fond blanc de l'image neutralisé
   --------------------------------------------------------------------- */
.site-header {
  background-color: transparent !important;
}
.site-header .inside-header {
  padding-top: 18px;
  padding-bottom: 14px;
  display: flex;
  justify-content: center;   /* logo centré, plus moderne */
  align-items: center;
}
.header-image.is-logo-image {
  max-height: 96px;
  width: auto;
  /* le fichier du logo a un fond BLANC : multiply le fond clair de la page
     "absorbe" ce blanc -> effet fond transparent, sans toucher à l'image */
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------
   2. Navigation : barre sombre chaude + accents dorés (sticky)
      (on ne touche PAS aux dimensions des items -> pas de retour à la ligne)
   --------------------------------------------------------------------- */
#site-navigation.main-navigation {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: rgba(30, 25, 15, .96) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(40, 30, 8, .30);
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, transparent, #d9b558 25%, #bf932f 50%, #d9b558 75%, transparent) 1;
}
/* Menu centré + items compacts (les icônes prennent de la place : on resserre
   pour tenir sur UNE ligne ; s'il doit replier, il reste centré et propre).
   DESKTOP UNIQUEMENT (>=769px) : en dessous, GeneratePress gère le hamburger
   et on repasse en menu vertical (voir la media query mobile plus bas). */
@media (min-width: 769px) {
  .main-navigation .main-nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    float: none;
  }
}
.main-navigation .main-nav > ul > li > a {
  color: var(--sn-champagne) !important;
  font-weight: 500;
  font-size: .93em;
  letter-spacing: 0;
  padding-left: 10px !important;
  padding-right: 10px !important;
  position: relative;
  transition: color .2s ease;
  white-space: nowrap;
}
/* Chevron du sous-menu : resserré */
.main-navigation .main-nav ul li a .dropdown-menu-toggle {
  padding-left: 4px !important;
}
.main-navigation .main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--sn-gold-light);
  transition: left .25s ease, right .25s ease;
}
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li > a:focus,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
  color: #f5e3b3 !important;
}
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current_page_item > a::after {
  left: 18px;
  right: 18px;
}

/* Sous-menus : carte sombre chaude, survol doré */
.main-navigation ul ul {
  background-color: #2a2315 !important;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(40, 30, 8, .45);
}
.main-navigation ul ul li a {
  color: var(--sn-champagne) !important;
  transition: background .15s ease, color .15s ease;
}
.main-navigation ul ul li > a:hover,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul li.current-menu-item > a {
  background: rgba(217, 181, 88, .18) !important;
  color: #f5e3b3 !important;
}

/* Bouton menu mobile */
.main-navigation .menu-toggle { color: var(--sn-champagne) !important; }

/* Icônes du menu (SVG en masque, couleur = celle du lien). Ciblées par l'ID
   de chaque élément de menu (stable, stocké en base WordPress). */
#menu-item-19 > a   { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); }
#menu-item-24 > a   { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E"); }
#menu-item-23 > a   { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
#menu-item-2891 > a { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
#menu-item-9269 > a { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
#menu-item-50 > a   { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); }
#menu-item-49 > a   { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
#menu-item-25 > a   { --sn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }

#menu-item-19 > a::before,
#menu-item-24 > a::before,
#menu-item-23 > a::before,
#menu-item-2891 > a::before,
#menu-item-9269 > a::before,
#menu-item-50 > a::before,
#menu-item-49 > a::before,
#menu-item-25 > a::before {
  content: "";
  display: inline-block;
  width: .92em;
  height: .92em;
  margin-right: .35em;
  vertical-align: -.11em;
  background-color: currentColor;
  -webkit-mask: var(--sn-icon) no-repeat center / contain;
  mask: var(--sn-icon) no-repeat center / contain;
}

/* ---------------------------------------------------------------------
   3. Conteneurs (articles, pages) -> cartes
   --------------------------------------------------------------------- */
.separate-containers .inside-article {
  border-radius: var(--sn-card-radius);
  border-top: 3px solid var(--sn-gold);
  box-shadow: var(--sn-shadow);
  overflow: hidden;
  background-clip: padding-box;
}

.entry-title { font-weight: 700; letter-spacing: -.01em; line-height: 1.22; }
.entry-title a { color: var(--sn-ink); transition: color .2s ease; }
.entry-title a:hover { color: var(--sn-gold-dark); }

.entry-meta {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sn-muted);
}
.entry-meta a { color: var(--sn-muted); }
.entry-meta a:hover { color: var(--sn-gold-dark); }

/* ---------------------------------------------------------------------
   4. ACCUEIL / ARCHIVES : grille de cartes
      Pattern flex standard (PAS de height:100%) -> aucun chevauchement :
      chaque carte remplit sa cellule, la grille gère les espacements.
   --------------------------------------------------------------------- */
body.blog #main,
body.archive #main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: 22px;
  row-gap: 26px;
}

/* Conteneur du site élargi (1100px d'origine -> largeur fluide qui suit
   l'écran, plafonnée à 1520px) : 3 cartes par ligne dès que la place existe */
/* !important requis : le CSS dynamique du customizer GeneratePress
   (.grid-container{max-width:1100px}) s'imprime APRÈS cette feuille */
.grid-container { max-width: clamp(1100px, 95vw, 1520px) !important; }
/* La barre de menu peut utiliser quasi toute la largeur de l'écran */
#site-navigation .inside-navigation { max-width: 98vw; }
body.blog #main > *:not(article),
body.archive #main > *:not(article) {
  grid-column: 1 / -1;            /* pagination & co sur toute la largeur */
}
body.blog #main > article,
body.archive #main > article {
  margin: 0 !important;
  display: flex;                   /* la carte remplit la cellule */
  min-width: 0;
}
body.blog .inside-article,
body.archive .inside-article {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  margin: 0 !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
body.blog .inside-article:hover,
body.archive .inside-article:hover {
  box-shadow: var(--sn-shadow-hover);
  transform: translateY(-3px);
}

body.blog .entry-title,
body.archive .entry-title { font-size: 1.32rem; margin-bottom: .25em; }
body.blog .entry-header,
body.archive .entry-header { margin-bottom: .8em; }

body.blog .entry-content,
body.archive .entry-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 0;
}

/* Pied de carte (catégorie) : discret, ne déborde jamais */
body.blog footer.entry-meta,
body.archive footer.entry-meta {
  margin-top: 12px;
  font-size: .74em;
}

/* Média de carte : hauteur UNIFORME, cadré sur le haut du feuillet */
.sn-card-media { margin: 0 0 14px; }
.sn-card-media img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(95,75,20,.14);
  transition: transform .3s ease;
}
.sn-card-media a:hover img { transform: scale(1.015); }

.sn-card-text {
  color: #4b5563;
  line-height: 1.65;
  font-size: .96em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sn-card-actions { margin-top: auto; padding-top: 14px; margin-bottom: 0; }

/* ---------------------------------------------------------------------
   5. Boutons -> pastilles dorées (partout)
   --------------------------------------------------------------------- */
.button,
.read-more,
button.search-submit,
input.search-submit,
.sn-readmore,
.wp-block-button__link {
  background: linear-gradient(135deg, #caa544, #a67c25) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .55em 1.3em !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(166,124,37,.30);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover,
.read-more:hover,
button.search-submit:hover,
input.search-submit:hover,
.sn-readmore:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(166,124,37,.40);
  color: #fff !important;
}

/* ---------------------------------------------------------------------
   6. Recherche : champ arrondi + halo doré
   --------------------------------------------------------------------- */
.search-field,
input[type="search"] {
  border-radius: 999px !important;
  border: 1px solid #e6dcc2 !important;
  padding: .6em 1.1em !important;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-field:focus,
input[type="search"]:focus {
  border-color: var(--sn-gold) !important;
  box-shadow: var(--sn-ring) !important;
  outline: none;
}

/* ---------------------------------------------------------------------
   7. Sidebar : widgets en cartes, titres à accent doré
   --------------------------------------------------------------------- */
.sidebar .widget {
  border-radius: var(--sn-card-radius);
  box-shadow: var(--sn-shadow);
}
.widget-title {
  position: relative;
  padding-bottom: .5em;
  margin-bottom: .9em;
}
.widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: var(--sn-gold);
}
.sidebar .widget a { color: #3b4450; transition: color .15s ease; }
.sidebar .widget a:hover { color: var(--sn-gold-dark); }

/* Catégories -> pastilles (hiérarchie aplatie : les pastilles sont les
   LIENS, les compteurs "(n)" restent en petit texte à côté) */
.widget_categories ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  margin: 0;
  font-size: .8em;
  color: var(--sn-muted);
}
.widget_categories li,
.widget_categories ul.children { display: contents; }
.widget_categories a {
  display: inline-block;
  padding: .38em 1em;
  background: #faf6ec;
  border: 1px solid #e8dcbb;
  border-radius: 999px;
  font-size: 1.08em;
  font-weight: 600;
  color: var(--sn-ink) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.widget_categories a:hover {
  background: #f3e7c8;
  border-color: var(--sn-gold);
  color: var(--sn-gold-dark) !important;
}

/* Archives (~90 mois) -> compactées : 2 colonnes + zone défilante */
.widget_archive ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 6px;
  margin: 0;
}
.widget_archive li {
  margin: 0 !important;
  font-size: .9em;
  line-height: 1.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget_archive ul::-webkit-scrollbar { width: 6px; }
.widget_archive ul::-webkit-scrollbar-thumb {
  background: #d4c69a;
  border-radius: 6px;
}

/* Articles récents : liste aérée avec séparateurs fins */
.widget_recent_entries li {
  padding: .45em 0;
  border-bottom: 1px solid #f0e9d6;
}
.widget_recent_entries li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------
   8. Pagination : pastilles
   --------------------------------------------------------------------- */
.paging-navigation .nav-links a,
.paging-navigation .nav-links span,
.nav-links a {
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   8 bis. Footer : assorti à la barre de navigation
   --------------------------------------------------------------------- */
.footer-widgets {
  background-color: #241d10 !important;
  color: #cdbd92;
  border-top: 2px solid;
  border-image: linear-gradient(90deg, transparent, #d9b558 25%, #bf932f 50%, #d9b558 75%, transparent) 1;
}
.footer-widgets .widget-title,
.footer-widgets h2 { color: var(--sn-champagne); }
.footer-widgets a { color: var(--sn-champagne) !important; }
.footer-widgets a:hover { color: #f5e3b3 !important; }
.site-info {
  background-color: #1c1609 !important;
  color: #a8966b !important;
}
.site-info a { color: var(--sn-champagne) !important; }

/* ---------------------------------------------------------------------
   8 ter. Petits plus : sélection dorée, défilement doux, focus visible
   --------------------------------------------------------------------- */
::selection { background: rgba(191, 147, 47, .30); }
html { scroll-behavior: smooth; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sn-gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.blog #main,
  body.archive #main { grid-template-columns: 1fr; row-gap: 20px; }
  .header-image.is-logo-image { max-height: 64px; }
  .site-header .inside-header { padding-top: 10px; padding-bottom: 8px; }

  /* --- MENU MOBILE ---------------------------------------------------
     GeneratePress affiche le bouton hamburger (<=768px) et gère
     l'ouverture/fermeture. On garantit ici un menu VERTICAL propre,
     pleine largeur, bien tapable, qui ne chevauche plus le contenu
     (ex. le formulaire de contact). Aucun impact desktop. */

  /* Empilement vertical quand le menu est ouvert */
  .main-navigation .main-nav > ul { flex-direction: column; }
  .main-navigation .main-nav > ul > li { width: 100%; float: none; }

  /* Items : pleine largeur, alignés à gauche, cible tactile confortable */
  .main-navigation .main-nav > ul > li > a {
    display: block;
    text-align: left;
    white-space: normal;
    padding: 14px 22px !important;
    font-size: 1rem;
    border-top: 1px solid rgba(217, 181, 88, .14);
  }

  /* Pas de soulignement animé en vertical (inutile / mal placé) */
  .main-navigation .main-nav > ul > li > a::after { display: none; }

  /* Icône un peu plus grande pour le tactile */
  .main-navigation .main-nav > ul > li > a::before {
    width: 1.05em;
    height: 1.05em;
    margin-right: .55em;
  }

  /* Sous-menu (Archives) : liens indentés, déroulé par le chevron GP */
  .main-navigation .main-nav ul ul li a { padding-left: 46px !important; }

  /* Bouton hamburger : bien visible et tapable */
  .main-navigation .menu-toggle {
    padding: 14px 22px;
    font-size: 1rem;
    font-weight: 600;
  }
}

/* ---------------------------------------------------------------------
   10. Accessibilité : pas d'animation si l'utilisateur la désactive
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  body.blog .inside-article:hover,
  body.archive .inside-article:hover { transform: none; }
  .sn-card-media a:hover img { transform: none; }
}