/*
 * bonjourbisous.com — le front du site public. Ces règles mettent en forme la structure (s-*) et les
 * composants internes (bb-* : galerie, partage, pubs, invitation ; tr-* : transitions.dev).
 *
 * Identité (demande du 14/10/2026 : « comme bonnesimages.com ») : bande d'en-tête bleue #2E6290 avec le logo blanc et
 * le menu, page gris clair #f7f7f7, contenu dans des cartes blanches à angles droits et ombre légère, titres de widgets
 * sur bandeau orange #FA8B37 (texte #041B36, contraste 7,2:1 ; blanc sur le bleu : 6,4:1), icônes de partage carrées
 * aux couleurs des réseaux. Police système, aucune police externe.
 *
 * Les échelles sont fixes ; on pioche dedans plutôt que d'inventer de nouvelles valeurs :
 *   espacement 4 6 8 12 16 18 20 24 32 48 64
 *   texte      13 14 15 16 17 18 20 24 · titres en em (1,5em / 1,2em comme bonnesimages.com)
 *   graisse    400 (corps, titres) · 600 (accent) · 700 (élément courant) · 800 (logo texte)
 *   rayon      --rayon (cartes, réglable, 0 par défaut) · 4 (icônes, vignettes) · 8 (pagination)
 *   z-index    --z-etiquette 10 · --z-entete 40 · --z-volet 45 · --z-menu 50 · --z-evitement 60
 * --lien : la couleur des liens configurée dans l'admin (biblio/style.ts) ; liens du contenu.
 */

:root {
  --marque: #2e6290;
  --marque-fonce: #1f4466;
  --marque-clair: #eef3f8;
  --lien: #2e6290;
  /* Couleur de marque en TEXTE et en fond derrière un petit texte blanc : contraste d'au moins
        4,5:1 contre le blanc (WCAG AA). Quand une couleur de marque claire est choisie dans l'admin,
        le layout la remplace par une teinte plus foncée (biblio/style.ts) ; la bande d'en-tête et les bordures gardent --marque. */
  --marque-texte: var(--marque);

  /* Neutres gris (ceux de bonnesimages.com : texte #303030, texte moyen #666, page #f7f7f7). */
  --gris-100: #f2f2f2;
  --gris-200: #e6e6e6;
  --gris-300: #d4d4d4;
  --gris-500: #666;
  --gris-600: #555;
  --gris-700: #444;
  --creme: #f7f7f7;

  --texte: #303030;
  --texte-2: var(--gris-600);
  --texte-3: var(--gris-500);
  --fond-page: var(--creme);
  --panneau: #fff;
  --bordure: var(--gris-200);
  /* Bord des champs de saisie : 3:1 contre le blanc (WCAG 1.4.11). */
  --bordure-champ: #949494;

  /* Bandeau de titre des widgets (Réglages → Style : moderne.fondTitreWidget / moderne.texteTitreWidget). */
  --fond-titre-widget: #fa8b37;
  --texte-titre-widget: #041b36;

  --rayon: 0px;
  --rayon-petit: 0px;
  --rayon-icone: 4px;
  --rayon-bouton: 8px;
  --ombre: 0 1px 2px #bbb;

  --conteneur: 1236px;
  --goutiere: 18px;
  --police: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

  --hauteur-entete: 94px;
  --hauteur-entete-mobile: 60px;
  --entete-ligne: rgb(255 255 255 / 0.2);

  /* Échelle fixe des z-index. */
  --z-etiquette: 10;
  --z-entete: 40;
  --z-volet: 45;
  --z-menu: 50;
  --z-evitement: 60;
}

@media (min-width: 1200px) {
  :root {
    --goutiere: 34px;
  }
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body.theme-moderne {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte);
  font: 400 17px/1.75 var(--police);
  -webkit-font-smoothing: antialiased;
}

/* Les réinitialisations utilisent :where() pour une spécificité nulle, ce qui laisse les règles des composants (une classe) les surcharger. */
:where(.theme-moderne) img {
  max-width: 100%;
  height: auto;
}

:where(.theme-moderne) a {
  color: var(--lien);
  text-decoration: none;
}

:where(.theme-moderne) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.theme-moderne :focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(.theme-moderne) :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--texte);
  line-height: 1.25;
  text-wrap: balance;
}

:where(.theme-moderne) p {
  margin: 0;
  text-wrap: pretty;
}

.theme-moderne [hidden] {
  display: none !important;
}

.s-lecteur-ecran {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.s-evitement {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: var(--z-evitement);
  padding: 8px 16px;
  border-radius: var(--rayon-petit);
  background: #fff;
  color: var(--texte) !important;
  font-weight: 600;
  transform: translateY(-200%);
}

.s-evitement:focus {
  transform: none;
}

/* ---------------------------------------------------------------- en-tête */

/*
 * Bande bleue comme bonnesimages.com : 94 px sur ordinateur, logo à gauche, menu en majuscules à droite terminé par la
 * loupe (liste déroulante de recherche). Sous 960 px : bande de 60 px avec logo et ☰ ; le menu s'ouvre dessous
 * (data-menu-ouvert, bouton-menu.tsx) en repoussant la page, recherche en bas. Non collante, sans animation.
 */
.s-entete {
  position: relative;
  z-index: var(--z-entete);
  background: var(--marque);
  color: #fff;
}

.s-entete-interieur {
  display: flex;
  align-items: center;
  max-width: var(--conteneur);
  min-height: var(--hauteur-entete);
  margin: 0 auto;
  padding: 0 var(--goutiere);
}

.s-entete :focus-visible {
  outline-color: #fff;
}

.s-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-right: 48px;
  line-height: 0;
  color: #fff !important;
  text-decoration: none !important;
}

.s-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Logo téléversé sans version mobile : hauteur plafonnée à celle du logo de bonnesimages.com. */
.s-logo .s-logo-libre {
  width: auto;
  max-height: 48px;
}

.s-marque {
  flex: none;
  color: var(--marque-texte);
}

.s-logo-texte {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.s-logo-texte span {
  font-weight: 400;
  opacity: 0.8;
}

.s-menu {
  flex: 1 1 auto;
  min-width: 0;
}

.s-menu > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  text-transform: uppercase;
}

.s-menu a {
  display: block;
  padding: 9px 15px;
  color: #fff;
}

.s-menu a:hover {
  text-decoration: none;
}

.s-menu a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-menu-recherche {
  position: relative;
}

.s-bouton-recherche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

/* Formulaire de recherche (champ + bouton gris), comme le .search-form de bonnesimages.com. */
.s-recherche {
  display: flex;
  text-transform: none;
}

.s-recherche input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--bordure-champ);
  border-right: 0;
  border-radius: 0;
  background: #fff;
  color: var(--texte);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
}

.s-recherche input::placeholder {
  color: var(--texte-3);
}

.s-recherche input:focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: -2px;
}

.s-recherche button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 0;
  background: var(--gris-500);
  color: #fff;
  cursor: pointer;
}

.s-recherche button:focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: 2px;
}

/* Bouton ☰ : seulement sous 960 px. */
.s-bouton-menu {
  display: none;
}

/*
 * Les éléments injectés de l'extérieur dans l'en-tête (annonces automatiques AdSense, code de plugin) ne doivent pas couper
 * la ligne de l'en-tête : tout enfant autre que le logo / ☰ / le menu va à la FIN de la ligne, en pleine largeur.
 * (La pellicule PageSpeed montrait une pub entre le logo et ☰, 01/10/2026.)
 */
.s-entete-interieur > :not(.s-logo, .s-menu, .s-bouton-menu) {
  flex: 1 1 100%;
  order: 20;
  max-width: 100%;
}

@media (hover: hover) and (min-width: 900px) {
  .s-menu a:hover,
  .s-bouton-recherche:hover {
    opacity: 0.7;
  }
}

/* Ordinateur : la recherche s'ouvre sous la loupe, dans une boîte blanche (data-recherche-ouverte). */
@media (min-width: 960px) {
  .s-recherche {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--z-menu);
    width: 300px;
    padding: 12px;
    background: var(--panneau);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
  }

  .s-entete:not([data-recherche-ouverte]) .s-recherche {
    display: none;
  }
}

@media (max-width: 959.98px) {
  .s-entete-interieur {
    flex-wrap: wrap;
    min-height: var(--hauteur-entete-mobile);
    padding: 0;
  }

  .s-logo {
    min-height: var(--hauteur-entete-mobile);
    margin: 0 0 0 16px;
  }

  .s-bouton-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 6px 6px 6px auto;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
  }

  .s-bouton-menu:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  .s-menu {
    flex: 1 1 100%;
  }

  .s-entete:not([data-menu-ouvert]) .s-menu {
    display: none;
  }

  .s-menu > ul {
    display: block;
    margin: 0;
    border-top: 1px solid var(--entete-ligne);
  }

  .s-menu a {
    padding: 18px;
    border-bottom: 1px solid var(--entete-ligne);
  }

  .s-bouton-recherche {
    display: none;
  }

  .s-menu-recherche {
    padding: 18px;
  }
}

/* ---------------------------------------------------------------- mise en page */

/* Contenu + barre latérale de 336 px dès 960 px, comme bonnesimages.com ; en dessous, la barre latérale passe dessous. */
.s-disposition {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 20px var(--goutiere) 32px;
}

.s-principal {
  min-width: 0;
}

@media (min-width: 960px) {
  .s-disposition {
    grid-template-columns: minmax(0, 1fr) 336px;
    align-items: start;
  }
}

/* Téléphone : la carte de contenu occupe toute la largeur. */
@media (max-width: 480px) {
  .s-disposition {
    padding: 0 0 24px;
  }
}

/* Contenu en pleine largeur quand il n'y a aucun widget de barre latérale (page des catégories). */
.s-disposition:has(> .s-barre-laterale .s-widgets:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.s-barre-laterale:has(.s-widgets:empty) {
  display: none;
}

/* Carte blanche : cadre de page, accueil, widgets de la barre latérale. */
.s-cadre,
.s-bloc,
.s-barre-laterale .s-widget {
  border-radius: var(--rayon);
  background: var(--panneau);
  box-shadow: var(--ombre);
}

.s-cadre,
.s-bloc {
  padding: 18px;
}

@media (max-width: 480px) {
  .s-cadre,
  .s-bloc {
    padding: 16px 9px 4px;
  }
}

/* Titre de page : 1,5em, graisse normale (1,2em centré sur téléphone). */
.s-titre-page,
.s-bienvenue h1 {
  margin-bottom: 0.4em;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .s-titre-page,
  .s-bienvenue h1 {
    font-size: 1.2em;
    text-align: center;
  }
}

.s-contenu > * + * {
  margin-top: 24px;
}

.s-contenu h2 {
  font-size: 1.25em;
  font-weight: 500;
}

/* Le gras utilise 600 (doux) ; 700 paraissait trop lourd avec la police système. */
:where(.theme-moderne) :where(strong, b) {
  font-weight: 600;
}

.s-contenu h3 {
  font-size: 18px;
  font-weight: 600;
}

.s-contenu .bb-intro,
.s-contenu .bb-conclusion {
  max-width: 42em;
}

.s-contenu .bb-intro p + p,
.s-contenu .bb-conclusion p + p {
  margin-top: 12px;
}

.s-contenu ul:not([class]),
.s-contenu ol:not([class]) {
  padding-left: 24px;
}

/* Le texte des pages statiques (À propos, Contact, Mentions légales) arrive dans une enveloppe sans style ;
      la règle « > * + * » ci-dessus ne l'atteint pas — paragraphes et titres se collaient. */
.s-contenu > div:not([class]) > * + * {
  margin-top: 16px;
}

.s-contenu > div:not([class]) > h2 {
  margin-top: 32px;
  font-size: 1.35em;
  line-height: 1.3;
  text-wrap: balance;
}

.s-contenu > div:not([class]) > p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- accueil */

/* Une seule carte blanche : titre, introduction, vignettes, grandes images. */
.s-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.s-date {
  color: var(--texte-3);
  font-size: 15px;
}

.s-intro {
  margin: 0.4em 0 0.8em;
}

.s-intro a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.s-bloc .s-intro:first-child {
  margin-top: 0;
}

@media (max-width: 480px) {
  .s-accueil .s-intro,
  .s-date {
    padding: 0 6px;
  }
}

.s-bloc-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.s-bloc-titre h2 {
  font-size: 1.25em;
  font-weight: 500;
}

.s-bloc-titre a {
  font-size: 16px;
  white-space: nowrap;
}

/* Titre de salutation : « Bonsoir ! » ; la question (« Que veux-tu envoyer ce soir ? ») est plus discrète. */
.s-bloc-titre h2 span {
  color: var(--texte-2);
  font-weight: 400;
}

/*
 * Vignettes comme la .category-grid de bonnesimages.com : quatre colonnes (deux sous 800 px), image carrée de
 * 110×110 centrée, nom dessous. Les vignettes configurées dans l'admin (Catégories → Mise en page) utilisent la même grille.
 */
.s-tuiles,
.theme-moderne .bb-tuiles-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 20px 0 30px;
  list-style: none;
  font-size: 16px;
}

@media (max-width: 799.98px) {
  .s-tuiles,
  .theme-moderne .bb-tuiles-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.s-tuiles a,
.theme-moderne .bb-tuile a {
  display: block;
  color: var(--texte);
  text-align: center;
}

.s-tuiles a:hover {
  text-decoration: none;
}

.s-tuile-image {
  display: block;
  width: 110px;
  height: 110px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--rayon-icone);
  background: var(--gris-100);
}

.s-tuile-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}

/* Léger fondu au survol (opacité .7, 0,2 s) ; pas de zoom (demande du 05/10/2026). */
@media (hover: hover) {
  .s-tuiles a:hover img,
  .theme-moderne .bb-tuile a:hover img {
    opacity: 0.7;
  }
}

.s-tuile-nom {
  display: -webkit-box;
  margin: 6px 0 12px;
  overflow: hidden;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Grandes images (accueil, listes) : image, nom de la galerie en gras, nombre, icônes d'envoi — comme les .graphic de bonnesimages.com. */
.s-images {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  gap: 24px;
}

.s-image {
  text-align: center;
}

.s-image-lien {
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--gris-100);
}

.s-image-lien img {
  display: block;
  width: 100%;
  height: auto;
}

/* Inclure le conteneur de contenu pour surcharger .s-contenu h2 (h2 des pages de liste). */
.s-image :is(h2, h3),
.s-contenu .s-image h2 {
  margin: 8px 0 10px;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.75;
}

.s-image-nombre {
  margin-top: -8px;
  color: var(--texte-3);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.s-image .bb-boutons-envoi {
  margin-top: 10px;
}

/* ---------------------------------------------------------------- listes (catégorie, recherche) : grandes images empilées */

.s-grille-cartes,
.theme-moderne #archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.s-grille-cartes > *,
.theme-moderne #archive > .s-archive-element {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

.theme-moderne #archive > .s-pagination {
  margin-top: 0;
}

/* Groupes de vignettes de la page de catégorie (Catégories → Mise en page) : comme les vignettes de l'accueil. */
.theme-moderne .bb-tuiles-groupe h2 {
  margin-top: 0.5em;
  font-size: 1.35em;
  font-weight: 400;
}

.theme-moderne .bb-tuiles-groupe h2 + .bb-tuiles-grille {
  padding-top: 12px;
}

/* Vignettes configurées dans l'admin (Catégories → Mise en page) : elles partagent la grille .s-tuiles ci-dessus. */
.theme-moderne .bb-tuile a:hover {
  text-decoration: none;
}

.theme-moderne .bb-tuile img,
.theme-moderne .bb-tuile-vide {
  display: block;
  width: 110px;
  height: 110px;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--rayon-icone);
  background: var(--gris-100);
  transition: opacity 200ms ease;
}

.theme-moderne .bb-tuile-titre {
  display: block;
  margin: 6px 0 12px;
  line-height: 1.4;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- galerie */

/* Mise en page de la galerie : images empilées, chacune suivie de sa légende et de la rangée d'icônes. */
.theme-moderne .bb-contenu-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.theme-moderne .bb-contenu-article figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center !important;
}

.theme-moderne .bb-contenu-article figure > br {
  display: none;
}

.theme-moderne .bb-contenu-article figure .bb-image-lien {
  order: 1;
  width: 100%;
  max-width: 600px;
}

.theme-moderne .bb-contenu-article figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--rayon);
  background: var(--gris-100);
}

/* Légende : message en gras, puis la description (le <br> de séparation est remplacé par strong en bloc). */
.theme-moderne .bb-contenu-article figcaption {
  order: 2;
  max-width: 600px;
  margin: 8px 0 10px !important;
  line-height: 1.75;
}

.theme-moderne .bb-contenu-article figcaption strong {
  display: block;
  font-weight: 600;
}

.theme-moderne .bb-contenu-article figcaption br {
  display: none;
}

.theme-moderne .bb-contenu-article figure .bb-boutons-envoi {
  order: 3;
  margin-bottom: 29px;
}

.theme-moderne .bb-contenu-article figure .bb-codes-article {
  order: 4;
  width: 100%;
}

.theme-moderne .bb-image-lien {
  display: block;
}

/*
 * Rangée d'icônes d'envoi comme les .share-icons de bonnesimages.com : carrés de 42×42 (38×38 sous 540 px), angles de 4 px,
 * fond à la couleur du réseau (--couleur-envoi, LienPartage), symbole blanc de 22 px, 20 px d'écart. Le nom du réseau
 * reste le nom accessible (aria-label) ; le libellé visible (.bb-envoi-nom) est masqué comme chez eux.
 * Classes neutres (jamais « share », « social » ni un nom de réseau) : voir biblio/partage.ts.
 */
.theme-moderne .bb-boutons-envoi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.theme-moderne .bb-boutons-envoi .bb-envoi {
  display: flex;
}

.theme-moderne .bb-boutons-envoi :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rayon-icone);
  background: var(--couleur-envoi, var(--gris-700));
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.theme-moderne .bb-boutons-envoi a:hover {
  text-decoration: none;
}

.theme-moderne .bb-envoi-nom {
  display: none;
}

/* Boîte de l'icône de partage (mode sprite d'IconePartage) : c'était auparavant un style en ligne répété sous chaque image. */
.bb-envoi-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--couleur-envoi, transparent);
  color: #fff;
  vertical-align: middle;
}

.bb-envoi-icone-image {
  background: transparent;
}

.bb-envoi-svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: #fff;
}

/* Dans la rangée, l'icône remplit le carré du lien (qui porte déjà la couleur). */
.theme-moderne .bb-envoi-icone {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.theme-moderne .bb-envoi-icone svg {
  width: 22px;
  height: 22px;
}

.theme-moderne .bb-envoi-icone-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (min-width: 900px) {
  .theme-moderne .bb-boutons-envoi :is(a, button):hover {
    opacity: 0.7;
  }
}

@media (max-width: 540px) {
  .theme-moderne .bb-boutons-envoi :is(a, button) {
    width: 38px;
    height: 38px;
  }

  .theme-moderne .bb-envoi-icone svg {
    width: 20px;
    height: 20px;
  }
}

/* Boîtes Lien / HTML / code BB de la galerie, dépliées par le bouton « Code » (RangeeEnvoiCodes) : libellé centré, champ de 400 px. */
.theme-moderne .bb-codes-article {
  display: grid;
  gap: 8px;
  max-width: 600px;
  margin: -16px auto 29px;
  text-align: center;
}

/* Les grandes images de groupe n'ont pas la marge de figure des galeries. */
.theme-moderne #archive .s-image .bb-codes-article {
  margin-top: 16px;
}

.theme-moderne .bb-code-article label {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.theme-moderne .bb-code-article strong {
  font-size: 16px;
  font-weight: 600;
}

.theme-moderne .bb-code-saisie {
  width: 400px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid #777;
  border-radius: 0;
  background: #fff;
  color: var(--texte-3);
  font: 16px/1.4 var(--police);
}

/* Téléphone : les galeries masquent leurs codes ; les pages de groupe les gardent comme la référence. */
@media (max-width: 480px) {
  .theme-moderne .bb-boutons-envoi .bb-envoi-code,
  .theme-moderne .bb-codes-article {
    display: none;
  }

  .theme-moderne #archive .s-image .bb-envoi-code {
    display: flex;
  }

  .theme-moderne #archive .s-image .bb-codes-article:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-moderne #archive .s-image .bb-code-article label {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pagination (Pagination dans site.tsx) comme bonnesimages.com : numéros sur fond bleu, page courante cerclée. */
.theme-moderne .s-pagination {
  margin: 14px 0 8px;
}

.theme-moderne .s-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-moderne .s-pagination li {
  display: flex;
}

.theme-moderne .s-pagination a,
.theme-moderne .s-pagination .est-actuel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: var(--rayon-bouton);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.theme-moderne .s-pagination a {
  background: var(--marque-texte);
  color: #fff;
}

.theme-moderne .s-pagination a:hover {
  text-decoration: none;
}

.theme-moderne .s-pagination .est-actuel {
  background: #fff;
  color: var(--marque-texte);
  box-shadow: inset 0 0 0 2px var(--marque-texte);
}

.theme-moderne .s-pagination-fleche a {
  padding: 0 22px;
}

@media (hover: hover) and (min-width: 900px) {
  .theme-moderne .s-pagination a:hover {
    opacity: 0.7;
  }
}

/* Mobile : Précédent / Suivant aux deux bords sur la première ligne, les numéros en dessous. */
@media (max-width: 740px) {
  .theme-moderne .s-pagination ul {
    row-gap: 12px;
  }

  .theme-moderne .s-pagination .s-pagination-fleche:first-child {
    order: 1;
    margin-right: auto;
  }

  .theme-moderne .s-pagination .s-pagination-fleche:last-child {
    order: 2;
    margin-left: auto;
  }

  .theme-moderne .s-pagination ul::after {
    content: '';
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  .theme-moderne .s-pagination li:not(.s-pagination-fleche) {
    order: 4;
  }

  .theme-moderne .s-pagination li:not(.s-pagination-fleche) :is(a, .est-actuel),
  .theme-moderne .s-pagination li.est-actuel {
    min-width: 42px;
    min-height: 44px;
    padding: 0 10px;
  }

  .theme-moderne .s-pagination-fleche a {
    min-width: clamp(100px, 38vw, 150px);
    min-height: 48px;
    padding: 0 clamp(10px, 4vw, 22px);
  }
}

.theme-moderne .s-pagination-total {
  margin-top: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Images associées sous un article et images similaires sur la page image. */
.theme-moderne #images-associees,
.theme-moderne .bb-similaires {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
}

.theme-moderne .bb-similaires h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}

@media (min-width: 640px) {
  .theme-moderne .bb-similaires h2 {
    font-size: 26px;
  }
}

/* Images similaires sur la page image — deux colonnes centrées, angles droits ;
      150 px / 15 px d'écart sur mobile, 200 px / 40 px d'écart sur grand écran. */
.theme-moderne .bb-similaires #images-associees-grille {
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  gap: 15px;
}

/* Vignettes fixes de 200 px sur grand écran, autant de colonnes que possible (2 sur petit ordinateur, 3 sur grand). */
@media (min-width: 640px) {
  .theme-moderne .bb-similaires #images-associees-grille {
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 40px;
  }
}

.theme-moderne .bb-similaires .bb-image-associee a {
  border-radius: 0;
}

/* Deux colonnes sur mobile : trois rendaient le texte des images illisible et les vignettes serrées. */
.theme-moderne #images-associees-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 640px) {
  .theme-moderne #images-associees-grille {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.theme-moderne .bb-image-associee a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--gris-100);
}

.theme-moderne .bb-image-associee img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- page image */

.theme-moderne .bb-page-image > :not(.bb-similaires) {
  max-width: 600px;
  margin-inline: auto;
}

.theme-moderne .bb-image {
  margin: 0 auto;
}

.theme-moderne .bb-image img {
  display: block;
  width: 100%;
  border-radius: var(--rayon);
  background: var(--gris-100);
}

.theme-moderne .bb-page-image > br {
  display: none;
}

/* Les boîtes Lien / HTML / code BB sont inutiles sur mobile (pas de copie vers des forums) : masquées. */
@media (max-width: 479px) {
  .theme-moderne .bb-page-image .bb-codes-article,
  .theme-moderne .bb-page-image .bb-codes {
    display: none;
  }
}

.theme-moderne .bb-page-image .bb-boutons-envoi {
  margin-top: 16px;
}

/* Sous l'image (demande du 05/10/2026) : simple, centré, aéré. */
.theme-moderne .bb-page-image .bb-detail {
  margin-top: 28px;
  text-align: center;
  text-wrap: balance;
}

.theme-moderne .bb-page-image .bb-nom {
  margin-top: 12px;
  text-align: center;
  text-wrap: pretty;
}

.theme-moderne .bb-lien-categorie {
  margin-top: 20px;
  text-align: center;
}

.theme-moderne .bb-lien-categorie a {
  color: var(--marque-texte);
  font-size: 18px;
  font-weight: 600;
}

.theme-moderne .bb-lien-categorie a:hover {
  text-decoration: underline;
}

/* Codes d'intégration — dimensions précises (05/10/2026) : boîte blanche de 400×41, bordure grise de 1 px,
      angles droits, police normale ; bouton de copie de 42×41 ; libellé centré au-dessus. */
.theme-moderne .bb-codes {
  display: grid;
  gap: 8px;
  margin: 10px auto 0;
  padding-bottom: 20px;
}

.theme-moderne .bb-code label {
  display: block;
  font-weight: 600;
  text-align: center;
}

.theme-moderne .bb-code-ligne {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.theme-moderne .bb-code .bb-code-saisie {
  flex: 0 1 400px;
  min-width: 0;
  height: 41px;
  padding: 6px;
  border: 1px solid #777;
  border-radius: 0;
  background: #fff;
  color: var(--texte-3);
  font: 16px/1.2 var(--police);
}

.theme-moderne .bb-copier {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 41px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #f5f5f5;
  color: var(--texte);
  cursor: pointer;
}

.theme-moderne .bb-copier:hover {
  background: #e9e9e9;
}

.theme-moderne .bb-copier:focus-visible,
.theme-moderne .bb-code .bb-code-saisie:focus-visible {
  outline: 2px solid var(--marque-texte);
  outline-offset: 2px;
}

.theme-moderne .bb-lien-categorie br {
  display: none;
}

.theme-moderne .bb-image-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-weight: 600;
}

.theme-moderne .bb-image-position {
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

.theme-moderne .bb-image-categories {
  margin-top: 24px;
  color: var(--texte-3);
}

/* ---------------------------------------------------------------- page des catégories (index-categories.tsx) */

.s-index-intro {
  margin-top: -4px;
}

.s-index {
  margin-top: 24px;
}

/* Champ de filtre + nombre de résultats. */
.s-index-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.s-index-recherche {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-petit);
  background: #fff;
  color: var(--texte-3);
}

.s-index-recherche:focus-within {
  border-color: var(--marque);
  box-shadow: 0 0 0 3px var(--marque-clair);
}

.s-index-recherche input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 16px;
}

.s-index-recherche input:focus-visible {
  outline: none;
}

.s-index-total {
  color: var(--texte-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* Index A–Z : reste en haut pendant le défilement. */
.s-alphabet {
  position: sticky;
  top: 0;
  z-index: var(--z-etiquette);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px -4px 0;
  padding: 8px 4px;
  background: var(--panneau);
  border-bottom: 1px solid var(--bordure);
}

.s-alphabet a,
.s-alphabet span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--rayon-petit);
  font-size: 16px;
  font-weight: 600;
}

.s-alphabet a {
  color: var(--texte);
}

.s-alphabet a:hover {
  background: var(--marque-clair);
  color: var(--marque-texte);
  text-decoration: none;
}

.s-alphabet span {
  color: var(--gris-300);
}

/* Une seule ligne à défilement horizontal sur mobile : évite que la bande collante ne couvre l'écran. */
@media (max-width: 639px) {
  .s-alphabet {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .s-alphabet::-webkit-scrollbar {
    display: none;
  }

  .s-alphabet a,
  .s-alphabet span {
    flex: none;
  }
}

/* Groupes par lettre. */
.s-index-groupe {
  scroll-margin-top: 72px;
  margin-top: 32px;
}

.s-index-lettre {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--marque-texte);
  font-size: 20px;
  font-weight: 700;
}

.s-index-lettre::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bordure);
}

.s-index-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-index-liste a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.s-index-liste a:hover {
  border-color: var(--marque);
  background: var(--marque-clair);
  text-decoration: none;
}

.s-index-image {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--rayon-petit);
  background: var(--gris-100);
}

.s-index-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-index-texte {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.s-index-nom {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-index-liste a:hover .s-index-nom {
  color: var(--marque-texte);
}

.s-index-nombre {
  color: var(--texte-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.s-index-vide {
  margin-top: 32px;
  color: var(--texte-3);
  text-align: center;
}

/* ---------------------------------------------------------------- barre latérale */

/* Widgets comme bonnesimages.com : carte blanche, bandeau de titre orange en majuscules, liste à puces rondes. */
.s-barre-laterale .s-widgets {
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Sous 960 px : barre latérale à 90 % de la largeur, deux colonnes de widgets à partir de 640 px. */
@media (max-width: 959.98px) {
  .s-barre-laterale {
    width: 90%;
    margin-inline: auto;
  }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .s-barre-laterale .s-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.s-barre-laterale .s-widget {
  overflow: hidden;
  font-size: 1.1rem;
}

.s-barre-laterale .s-widget-entete {
  margin: 0;
}

.s-barre-laterale .s-widget-titre {
  display: block;
  margin: 0;
  padding: 0.75em 1em;
  background: var(--fond-titre-widget);
  color: var(--texte-titre-widget);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.s-barre-laterale .s-widget-corps {
  padding: 16px 24px 24px;
}

.s-barre-laterale .s-widget-corps ul {
  margin: 0;
  padding: 0;
  line-height: 2.1;
  list-style: circle inside;
}

.s-barre-laterale .s-widget-corps a {
  color: var(--texte);
}

.s-barre-laterale .s-widget-corps a:hover {
  text-decoration: underline;
}

.s-barre-laterale .s-widget .est-actuel > :is(a, span),
.s-barre-laterale .s-widget a[aria-current='page'] {
  font-weight: 700;
}

.s-barre-laterale .s-widget .s-sous-liste {
  padding-left: 16px;
}

.s-barre-laterale .s-toutes-categories a {
  color: var(--lien);
}

/* Recherche latérale : toute la largeur disponible, bouton bleu et focus clavier visible. */
.s-recherche-laterale {
  display: flex;
  width: 100%;
  margin: 0;
}

.s-recherche-laterale input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--bordure-champ);
  border-right: 0;
  border-radius: 0;
  background: var(--panneau);
  color: var(--texte);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
}

.s-recherche-laterale input::placeholder {
  color: var(--texte-3);
}

.s-recherche-laterale button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 0;
  background: var(--marque-texte);
  color: #fff;
  cursor: pointer;
}

.s-recherche-laterale :is(input, button):focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: 2px;
}

@media (max-width: 799.98px) {
  .s-barre-laterale .s-widget-corps ul {
    line-height: 2.4;
  }
}

/* ---------------------------------------------------------------- publicité */

.theme-moderne .bb-pub-conteneur {
  margin: 24px auto !important;
}

/* ---------------------------------------------------------------- pied de page */

/*
 * Pied de page comme bonnesimages.com : sur le fond de la page, trois lignes centrées (« ↑ Aller en haut », pages
 * À propos · Contact · Confidentialité, « © année Bonjour Bisous »). biblio/style.ts pose --pied-fond (Réglages → Style)
 * et passe le texte en blanc sur un fond foncé.
 */
.s-pied {
  --pied-fond: var(--fond-page);
  --pied-texte: var(--texte);
  --pied-accent: var(--marque-texte);
  padding: 8px 16px calc(64px + env(safe-area-inset-bottom));
  background: var(--pied-fond);
  color: var(--pied-texte);
  text-align: center;
}

.s-pied-ligne {
  margin: 0 0 1.75em;
}

.s-pied a {
  color: var(--pied-texte);
  text-decoration: none;
}

.s-pied a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-pied a:focus-visible {
  outline: 2px solid var(--pied-accent);
  outline-offset: 3px;
}

/* Liens séparés par « · » (pseudo-élément en inline-block : il n'hérite pas du soulignement du lien survolé). */
.s-pied-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
}

.s-pied-liens > * + *::before {
  content: '·';
  display: inline-block;
  margin: 0 0.6em;
  color: var(--pied-texte);
}

.s-pied-reseaux {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.s-pied-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.s-pied-copyright {
  margin-bottom: 0;
}

/* « Paramètres de confidentialité » : un bouton (il ouvre la boîte de consentement) qui ressemble aux liens du pied de page. */
.s-pied-consentement {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.s-pied-consentement:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-pied-consentement:focus-visible {
  outline: 2px solid var(--pied-accent, var(--marque));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-moderne *,
  .theme-moderne *::before,
  .theme-moderne *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Lien automatique de catégorie dans un titre (biblio/lien-auto.ts) : souligné,
      pour que la couleur ne soit pas la seule distinction. */
.theme-moderne .bb-lien-auto {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Boîtes de pub réservées : 20 px pour l'étiquette de la politique, plus la hauteur du bloc au point de rupture. */
.theme-moderne .bb-pub {
  margin: 24px 0;
  min-height: 270px;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.theme-moderne .bb-pub-gauche {
  text-align: left;
}

.theme-moderne .bb-pub-droite {
  text-align: right;
}

.theme-moderne .bb-pub img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.theme-moderne .bb-pub-libelle {
  height: 20px;
  margin: 0;
  color: var(--texte-3);
  font-size: 13px;
  line-height: 20px;
}

.theme-moderne .bb-pub-boite {
  min-height: 250px;
}

.theme-moderne .bb-pub-boite > .bb-pub-conteneur,
.theme-moderne .bb-pub-boite > .bb-pub-apercu {
  margin-inline: auto;
}

.theme-moderne .bb-pub .bb-pub-unite {
  margin-inline: auto;
}

.theme-moderne .bb-pub-gauche .bb-pub-unite {
  margin-left: 0;
}

.theme-moderne .bb-pub-droite .bb-pub-unite {
  margin-right: 0;
}

.theme-moderne .bb-pub-en-ligne,
.theme-moderne .bb-pub[data-pub="contenu_article"] .bb-pub-boite > img,
.theme-moderne .bb-pub[data-pub="entre_liste"] .bb-pub-boite > img {
  width: 300px;
  height: 250px;
  max-width: 100%;
  object-fit: contain;
}

/* L'en-tête et le pied de page partagent la grille et les marges de la colonne principale. */
.theme-moderne .bb-pub-enveloppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--goutiere);
}

.theme-moderne .bb-pub[data-pub="entete_haut"] {
  min-height: 120px;
}

.theme-moderne .bb-pub[data-pub="entete_haut"] .bb-pub-boite {
  min-height: 100px;
}

/* Pub d'en-tête : taille exacte selon la largeur d'écran (pubs.tsx, `fixe`), pour qu'elle ne repousse jamais la page. */
.theme-moderne .bb-pub-fixe {
  width: 320px;
  max-width: 100%;
  height: 100px;
}

@media (min-width: 768px) {
  .theme-moderne .bb-pub[data-pub="entete_haut"] .bb-pub-boite {
    min-height: 90px;
  }

  .theme-moderne .bb-pub-fixe {
    width: 728px;
    height: 90px;
  }
}

.theme-moderne .bb-pub[data-pub="apres_galerie"] {
  min-height: 600px;
}

.theme-moderne .bb-pub[data-pub="apres_galerie"] .bb-pub-boite {
  min-height: 580px;
}

/* Garder les pubs hors des blocs image / outils, avec un filet visible et 32 px de chaque côté. */
.theme-moderne .bb-pub.bb-pub-separee {
  margin-block: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--bordure);
}

.theme-moderne .bb-page-image > .bb-pub {
  max-width: none;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .theme-moderne .bb-pub {
    min-height: 300px;
  }
  .theme-moderne .bb-pub-boite {
    min-height: 280px;
  }
  .theme-moderne .bb-pub-en-ligne,
  .theme-moderne .bb-pub[data-pub="contenu_article"] .bb-pub-boite > img,
  .theme-moderne .bb-pub[data-pub="entre_liste"] .bb-pub-boite > img {
    width: 336px;
    height: 280px;
  }
  .theme-moderne .bb-pub[data-pub="entete_haut"] {
    min-height: 110px;
  }
  .theme-moderne .bb-pub[data-pub="entete_haut"] .bb-pub-boite {
    min-height: 90px;
  }
  .theme-moderne .bb-pub[data-pub="barre_laterale"] {
    min-height: 270px;
  }
  .theme-moderne .bb-pub[data-pub="barre_laterale"] .bb-pub-boite {
    min-height: 250px;
  }
  .theme-moderne .bb-pub[data-pub="barre_laterale"].bb-pub-haute {
    min-height: 620px;
  }
  .theme-moderne .bb-pub[data-pub="barre_laterale"].bb-pub-haute .bb-pub-boite {
    min-height: 600px;
  }
  .theme-moderne .bb-pub[data-pub="apres_galerie"] {
    min-height: 400px;
  }
  .theme-moderne .bb-pub[data-pub="apres_galerie"] .bb-pub-boite {
    min-height: 380px;
  }
}

@media (min-width: 960px) {
  .theme-moderne .bb-pub-enveloppe {
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 20px;
  }
  .theme-moderne:has(.s-barre-laterale .s-widgets:empty) .bb-pub-enveloppe {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Seuls les blocs confirmés non remplis sous la ligne de flottaison peuvent se replier. Ne jamais masquer les blocs initiaux. */
.theme-moderne .bb-pub:not([data-pub="entete_haut"]):not([data-pub="mobile_haut"]):not([data-pub="barre_laterale"]):has(ins[data-ad-status="unfilled"]) {
  display: none;
}

/* Limite d'écran du panneau (emplacements_pub.appareil). Les blocs masqués n'envoient aucune requête de pub (pubs.tsx). */
@media (max-width: 767.98px) {
  .theme-moderne .bb-pub-seulement-ordinateur {
    display: none;
  }
}

@media (min-width: 768px) {
  .theme-moderne .bb-pub-seulement-mobile {
    display: none;
  }
}

/* Sous 1024 px, la barre latérale s'empile juste au-dessus du pied de page : une pub visible de barre latérale et la pub du pied de page
      se suivraient en fin de page, donc la pub du pied de page s'efface. */
@media (max-width: 767.98px) {
  .theme-moderne:has(.s-barre-laterale .bb-pub[data-pub="barre_laterale"]:not(.bb-pub-seulement-ordinateur)) .bb-pub-enveloppe:has(> .bb-pub[data-pub="pied_page"]) {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .theme-moderne:has(.s-barre-laterale .bb-pub[data-pub="barre_laterale"]:not(.bb-pub-seulement-mobile)) .bb-pub-enveloppe:has(> .bb-pub[data-pub="pied_page"]) {
    display: none;
  }
}

/* Bandeau de sous-galeries au-dessus d'un article de galerie (groupes de vignettes de la catégorie de même slug). */
.s-contenu > .bb-tuiles:first-child {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bordure);
}

/* ---------------------------------------------------------------- mouvement du toast (invite-notifications.tsx)
    * Entrée en glissement : toast de transitions.dev (tel quel). */
.tr-volet {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  filter: blur(2px);
  will-change: transform, opacity, filter;
  transition:
    opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-volet.est-ouvert {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tr-volet {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- carte d'invitation douce (invite-notifications.tsx)
    * Notre propre carte avant la demande d'autorisation du navigateur (web.dev, UX des autorisations). Noms de classes neutres (bb-invite-*).
    * En bas à droite sur ordinateur (à l'écart de l'en-tête, du menu et de la recherche), pleine largeur en bas sur mobile. Mouvement : .tr-volet ci-dessus. */
.bb-invite {
  position: fixed;
  z-index: var(--z-volet);
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  gap: 12px;
  align-items: start;
  width: min(380px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: #fff;
  color: var(--texte);
  box-shadow: 0 12px 32px rgb(28 25 23 / 0.2);
  pointer-events: none;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.bb-invite.est-ouvert {
  pointer-events: auto;
}

.bb-invite-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--marque-clair);
  color: var(--marque-fonce);
}

.bb-invite-texte p {
  margin: 0;
  color: var(--texte-2);
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

.bb-invite-texte .bb-invite-titre {
  margin-bottom: 4px;
  color: var(--texte);
  font-size: 17px;
  font-weight: 700;
}

.bb-invite-fermer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--gris-500);
  cursor: pointer;
}

.bb-invite-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bb-invite-actions button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--rayon-petit);
  font: 600 16px/1 var(--police);
  cursor: pointer;
}

.bb-invite-non {
  border: 1px solid var(--gris-300);
  background: #fff;
  color: var(--gris-700);
}

.bb-invite-oui {
  border: 0;
  background: var(--marque-fonce);
  color: #fff;
}

.bb-invite-oui:hover {
  background: #1f3a63;
}

@media (max-width: 640px) {
  .bb-invite {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: auto;
  }

  .bb-invite-actions button {
    flex: 1;
  }
}

/* ---------------------------------------------------------------- calendrier des fêtes */

/* /calendrier-des-fetes : une ligne par fête — date, vignette + nom (lien vers la galerie), étiquettes. */
.bb-cal-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 15px;
}

.bb-cal-mois h2 {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bordure);
}

.bb-cal-liste {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.bb-cal-liste li {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gris-100);
}

.bb-cal-liste li.bb-cal-proche {
  background: var(--marque-clair);
}

.bb-cal-date {
  color: var(--texte-2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bb-cal-jour {
  display: inline-block;
  min-width: 2.6em;
}

.bb-cal-fete {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--texte);
  line-height: 1.35;
}

a.bb-cal-fete {
  color: var(--lien);
}

a.bb-cal-fete:hover .bb-cal-nom {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bb-cal-fete img,
.bb-cal-sans-image {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--rayon-icone);
  object-fit: cover;
}

.bb-cal-sans-image {
  background: var(--gris-100);
}

.bb-cal-proche .bb-cal-sans-image {
  background: var(--panneau);
}

.bb-cal-precision {
  color: var(--texte-3);
  font-size: 15px;
}

.bb-cal-etiquettes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.bb-cal-etiquette {
  padding: 1px 8px;
  border-radius: var(--rayon-icone);
  background: var(--gris-100);
  color: var(--gris-700);
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
}

.bb-cal-etiquette-ferie {
  background: var(--marque-texte);
  color: #fff;
}

.bb-cal-etiquette-proche {
  background: var(--fond-titre-widget);
  color: var(--texte-titre-widget);
}

.bb-cal-notes > * + * {
  margin-top: 12px;
}

.bb-cal-notes h2 + * {
  margin-top: 8px;
}

.bb-cal-notes ul {
  margin: 0;
  padding-left: 22px;
}

.bb-cal-notes li + li {
  margin-top: 6px;
}

.bb-cal-notes li,
.bb-cal-notes p {
  text-wrap: pretty;
}

.bb-cal-notes time {
  font-variant-numeric: tabular-nums;
}

.bb-cal-notes h2:not(:first-child) {
  margin-top: 28px;
}

@media (max-width: 640px) {
  .bb-cal-liste li {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 4px;
  }

  .bb-cal-date {
    grid-column: 1 / -1;
    font-size: 14px;
  }

  .bb-cal-etiquettes {
    justify-content: flex-end;
  }
}

/* ---------------------------------------------------------------- fête des prénoms */

/* /bonne-fete : fête du prénom du jour et des 7 jours suivants. */
.bb-prenoms {
  max-width: 42em;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--fond-titre-widget);
  background: var(--panneau);
}

.bb-prenoms > * + * {
  margin-top: 8px;
}

.bb-prenoms-date {
  color: var(--texte-3);
  font-size: 15px;
}

.s-contenu .bb-prenoms h2 {
  margin-top: 2px;
  font-size: 1.35em;
}

.bb-prenoms h3 {
  margin-top: 14px;
  font-size: 16px;
}

.bb-prenoms-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
  gap: 2px 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.bb-prenoms-jour {
  color: var(--texte-3);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Lien vers le calendrier sur /jours-de-fete, et ligne « Bonne fête … ! » de l'accueil. */
.bb-lien-calendrier a,
.bb-prenom-accueil a {
  font-weight: 600;
}

.bb-prenom-accueil {
  margin-top: 6px;
  font-size: 15px;
}

@media (max-width: 480px) {
  .bb-prenom-accueil {
    padding: 0 6px;
  }
}