/* ===================================================
   SPWebDev — ajustements spécifiques blog
   Ce fichier n'est pas modifié par le moteur.
   =================================================== */

/* Titres (titre du blog en index, titre de chaque article) —
   même graisse que sur rieger-conseil.com */
h1,
.sgTileTitle {
  font-weight: 800;
}

/* Titres des cartes en présentation Magazine (carte "Nouveautés",
   petites cartes, bandeau "À la une") — le moteur les met par défaut à
   400 (h1/h2/h3 volontairement légers pour ce layout), trop léger par
   rapport à la charte de Johanna. */
.mzLargeCardTitle,
.mzSmallCardTitle,
.mzFeaturedCardTitle {
  font-weight: 600;
}

/* Les titres de Johanna sont plutôt longs et descriptifs — 2 lignes
   avant troncature les coupait presque immédiatement sur les petites
   cartes. Passage à 3 lignes pour que le titre reste lisible. */
.mzSmallCardTitle {
  -webkit-line-clamp: 3;
}

/* Sous-titres à l'intérieur des articles — un peu plus de graisse
   que le gras par défaut du navigateur, pour rester cohérent avec le site */
.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5,
.richtext h6 {
  font-weight: 800;
}

/* Réseaux sociaux — pastille jaune pleine, sans contour, vert au survol */
.sgSocialBtn {
  background: var(--accent);
  border: none;
  color: var(--text);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.sgSocialBtn:hover {
  background: var(--surface-strong);
  color: var(--surface);
}

/* Tags — teinte cerise de la charte (au lieu du contour gris par défaut) */
.postTag {
  background: var(--muted);
  border: none;
  color: #b01a32; /* cerise assombrie pour rester lisible (AA) sur le fond teinté */
  font-weight: 600;
}

/* Boutons (Télécharger / Imprimer) — fond jaune, vert au survol (inverse) */
.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.15);
}
.btn.accent:hover {
  background: var(--surface-strong);
  border-color: var(--surface-strong);
  color: var(--surface);
}

/* Liens du menu — effet "surligneur" jaune au survol, plutôt que le
   soulignement par défaut du moteur */
.siteHeader .links a::after {
  content: none;
}
.siteHeader .links a {
  background-image: linear-gradient(
    120deg,
    var(--accent) 0%,
    var(--accent) 100%
  );
  background-repeat: no-repeat;
  background-position: 0 65%;
  background-size: 100% 0%;
  transition:
    background-size 0.2s ease-in,
    opacity 0.2s ease,
    color 0.2s ease;
}
.siteHeader .links a:hover,
.siteHeader .links a.active {
  background-size: 100% 55%;
}

/* Vignettes de l'index (grille social-grid) — masquer le badge catégorie,
   trop chargé visuellement avec le titre déjà superposé sur l'image */
.sgTileCategory {
  display: none;
}

/* Sommaire (Sommaire de l'article) — fond beige contrasté + fin contour jaune,
   pour le détacher de la page au lieu du blanc quasi invisible sur crème */
.postToc {
  background: var(--surface-soft);
  border-color: var(--accent);
}

/* Tableaux dans les articles — en-tête en vert, texte blanc.
   Le moteur stylise déjà .postBody .richtext thead th (padding, bordures) ;
   même sélecteur ici pour l'emporter en spécificité CSS, pas juste en ordre. */
.postBody .richtext thead th {
  background: var(--surface-strong);
  color: var(--surface);
  font-weight: 700;
}

/* Texte surligné dans les articles (syntaxe markdown ==texte==) —
   même effet "surligneur" que le menu, au lieu du fond plat par défaut */
.richtext mark {
  background-image: linear-gradient(
    120deg,
    var(--accent) 0%,
    var(--accent) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  background-color: transparent;
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 0;
}

/* Présentation Magazine — photos au format carré, uniquement pour ce blog
   (le moteur utilise 440px/210px/3:2 par défaut pour ce layout). */
.mzLargeCardMedia,
.mzSmallCardMedia,
.mzGridCard .mzSmallCardMedia {
  height: auto;
  aspect-ratio: 1 / 1;
}
.mzFeaturedCardMedia {
  flex: 0 0 320px;
  width: 320px;
  height: 320px;
  align-self: center;
  min-height: 0;
}
@media (max-width: 700px) {
  .mzFeaturedCardMedia {
    flex: none;
    width: calc(100% - var(--space-lg));
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
  /* Padding latéral du texte réduit sur mobile (46px de chaque côté par
     défaut, pensé pour le layout desktop à côté de la photo) — ça laisse
     plus de largeur au texte et à la pastille catégorie, qui a plus de
     chances de tenir sur une seule ligne. */
  .mzFeaturedCardContent {
    padding: var(--space-lg);
  }
}

/* Photo de couverture sur la page de chaque article — carré au lieu du
   3:2 par défaut du layout Magazine, pour rester cohérent avec l'index. */
html.layout-magazine .postCoverImage {
  aspect-ratio: 1 / 1;
}

/* Barre de catégories (sous le hero, présentation Magazine) — sur mobile,
   le wrap flex par défaut du moteur affiche 2 catégories par ligne,
   assez brouillon. Empilées et centrées à la place. */
@media (max-width: 700px) {
  .blogCategoryNav {
    flex-direction: column;
    align-items: center;
  }
}

/* Bloc "À la une" — fond crème/beige au lieu du jaune plein par défaut,
   plus doux pour la zone de texte à côté de la photo. */
.mzFeaturedCard {
  background: var(--surface-soft);
  padding-right: var(--space-lg);
}

/* Pastille "type de contenu" (Article / FAQ / Ressource / Checklist) —
   fond jaune plein, texte noir, sans contour : le jaune clair sur jaune
   clair par défaut ne ressortait pas assez. */
.postBadge,
.postCardBadge {
  background: var(--accent);
  color: var(--text);
  border: none;
}

/* Pastille "catégorie" — contour + texte noirs (au lieu du gris discret
   par défaut) pour que le nom de la catégorie ressorte vraiment. */
.postCategory,
.postCardCategory {
  border-color: var(--text);
  color: var(--text);
}

/* Bloc "À la une" : mêmes deux styles pour ses pastilles, qui partagent
   la même classe .mzFeaturedCardLabel dans le moteur — la première
   (type de contenu) et la seconde (catégorie, si présente) sont
   distinguées par leur position dans .mzPillRow. */
.mzPillRow .mzFeaturedCardLabel:first-child {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}
.mzPillRow .mzFeaturedCardLabel:not(:first-child) {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
  /* Le moteur met .mzFeaturedCardLabel en majuscules par défaut — la
     pastille catégorie équivalente des cartes (.postCardCategory) ne
     l'est pas. Retour à la casse normale pour rester cohérent, et ça
     évite au passage le retour à la ligne sur mobile pour les noms de
     catégorie un peu longs. */
  text-transform: none;
}

/* Pastilles un peu plus grandes sur les petites cartes — la taille très
   compacte du moteur pour ce layout (10px, 2px de padding) devenait
   difficile à lire. */
.postCardBadge,
.postCardCategory,
.mzFeaturedCardLabel {
  padding: 4px var(--space-sm);
  font-size: var(--text-xs);
}

/* La pastille catégorie a un contour, contrairement à celle du type de
   contenu — sans compenser, son contour l'agrandit visuellement de
   1px de chaque côté. Padding réduit d'autant pour que les deux
   pastilles paraissent de la même taille (cartes de l'index + bandeau
   "À la une"). */
.postCardCategory,
.mzPillRow .mzFeaturedCardLabel:not(:first-child) {
  padding: 3px calc(var(--space-sm) - 1px);
}

/* Même compensation sur la page d'un article : .postBadge / .postCategory
   y gardent la taille plus confortable du moteur (pas la version compacte
   des cartes), donc la réduction de padding se calcule sur cette base-là. */
.postCategory {
  padding: 5px calc(var(--space-md) - 1px);
}


/* ===================================================
   NEWSLETTER
   =================================================== */

.newsletterSection {
  background: var(--surface-strong);
  margin-top: var(--space-xxl);
  padding: var(--space-lg) 0;
}

/* La newsletter est le dernier bloc de .postBody :
   on supprime le vide sous le bandeau avant le footer. */
.postBody {
  padding-bottom: 0;
}

/* ===================================================
   LAYOUT
   =================================================== */

.newsletterInner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);

  width: 100%;
  max-width: 900px;

  text-align: left;
}

/* Sur une page article, on reste aligné avec
   la largeur du contenu éditorial. */
.postBody .newsletterInner {
  max-width: 720px;
}

.newsletterCopy {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 45px;
}

.newsletterFormSlot {
  flex: 0 1 380px;
  min-width: 0;
  padding-top: 18px;
}

/* ===================================================
   TEXTE NEWSLETTER
   =================================================== */

.newsletterKicker {
  margin: 0 0 var(--space-2xs);

  color: var(--surface-soft);
  opacity: 0.75;

  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.newsletterTitle {
  margin: 0;
  padding: 0;

  color: var(--surface-soft);

  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}

.newsletterText {
  margin: var(--space-xs) 0 0;

  color: var(--surface-soft);
  opacity: 0.9;

  font-size: var(--fs-small);
}

/* ===================================================
   FORMULAIRE BREVO
   =================================================== */

/* Neutralisation de la "carte" Brevo. */
.newsletterFormSlot .sib-form,
.newsletterFormSlot #sib-container {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Les wrappers Brevo doivent pouvoir rétrécir
   correctement à l'intérieur de la colonne flex. */
.newsletterFormSlot .sib-form,
.newsletterFormSlot #sib-form-container,
.newsletterFormSlot #sib-container,
.newsletterFormSlot #sib-form {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

.newsletterFormSlot #sib-container {
  padding: 0 !important;
  font-family: var(--ff-body), sans-serif !important;
}

.newsletterFormSlot #sib-form {
  text-align: left;
}

/* ===================================================
   NETTOYAGE DES BLOCS BREVO
   =================================================== */

/* Brevo ajoute un bloc titre vide.
   Le vrai titre est déjà dans .newsletterTitle. */
.newsletterFormSlot #sib-form > div:first-child {
  display: none !important;
}

/* Réduction des paddings verticaux générés inline
   par Brevo autour des champs. */
.newsletterFormSlot div[style*="padding: 8px 0"] {
  padding: var(--space-xs) 0 !important;
}

/* Labels et aides inutiles visuellement :
   le placeholder + le consentement suffisent. */
.newsletterFormSlot .entry__label,
.newsletterFormSlot .entry__specification {
  display: none !important;
}

/* ===================================================
   INPUT EMAIL
   =================================================== */

.newsletterFormSlot input.input {
  display: block;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  background: var(--surface-soft) !important;
  border: none;
  border-radius: var(--radius-sm);

  font-family: var(--ff-body), sans-serif;
  font-size: var(--text-xs);

  padding: 7px 10px;
}

.newsletterFormSlot input.input::placeholder {
  color: var(--text) !important;
  opacity: 0.55 !important;
}

.newsletterFormSlot input.input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Brevo ajoute un padding spécifique sur certaines
   variantes d'input. */
.newsletterFormSlot .sib-form .input:last-child,
.newsletterFormSlot .sib-form .input__affix:last-child {
  padding-right: 0.5rem;
  height: 25px;
}

/* ===================================================
   CONSENTEMENT
   =================================================== */

.newsletterFormSlot .checkbox {
  background-color: var(--surface-soft) !important;
  border-color: var(--surface-soft) !important;
}

.newsletterFormSlot #ACCORD_CONTACT {
  accent-color: var(--accent);
}

.newsletterFormSlot .sib-optin p {
  color: var(--surface-soft) !important;

  font-family: var(--ff-body), sans-serif !important;
  font-size: var(--fs-small) !important;
}

.newsletterFormSlot #sib-container a {
  color: var(--surface-soft) !important;
  text-decoration: underline;
}

/* ===================================================
   BOUTON
   =================================================== */

.newsletterFormSlot .sib-form-block__button {
  background-color: var(--accent) !important;
  color: var(--text) !important;

  border-radius: 999px !important;

  font-family: var(--ff-body), sans-serif !important;
  font-size: var(--text-xs) !important;
  font-weight: 700;

  padding: 7px 18px !important;

  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.newsletterFormSlot .sib-form-block__button:hover {
  background-color: var(--text) !important;
  color: var(--surface) !important;
}

/* ===================================================
   RESPONSIVE
   =================================================== */

@media (max-width: 700px) {
  .newsletterInner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .newsletterCopy,
  .newsletterFormSlot {
    flex: none;

    width: 100%;
    min-width: 0;
  }

  .newsletterCopy {
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .newsletterFormSlot {
    margin-top: var(--space-md);
    padding-top: 0;
  }

  .newsletterFormSlot .sib-form,
  .newsletterFormSlot #sib-form-container,
  .newsletterFormSlot #sib-container,
  .newsletterFormSlot #sib-form {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .newsletterFormSlot input.input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}