/* ═══════════════════════════════════════════════════════════
   L'OBSERVATOIRE — LE HALL
   Reprend les valeurs exactes du module « Autres Ressources »
   ═══════════════════════════════════════════════════════════ */

.com-content-categories {
  /* ─── TES COULEURS (relevées dans ton module d'accueil) ─── */
  --obs-bleu: #5b7c99;           /* Le bleu principal : cercle, CTA, barre du bas. */
  --obs-bleu-titre: #2a3d4f;     /* Les titres. */
  --obs-bleu-hover: #3d6080;     /* Titre au survol. */
  --obs-bleu-cta-hover: #3a5f7a; /* CTA au survol. */
  --obs-gris: #7a8a96;           /* Les descriptions. */
  --obs-stripe-1: #4a6d8a;       /* Début du dégradé du bandeau. */
  --obs-stripe-2: #7aa0be;       /* Fin du dégradé. */

  /* ─── DIMENSIONS ─── */
  --obs-tuile-mini: 360px;       /* Largeur mini avant passage à la ligne. */
  --obs-ecart: 26px;             /* Espace entre les tuiles. */
  --obs-cercle: 62px;            /* Diamètre du cercle. */
}

/* ─── Le chapô d'accueil ─── */
.com-content-categories .base-desc {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;
  color: var(--obs-gris);
  font-style: italic;
  line-height: 1.7;
  text-align: center;
  max-width: 46em;
  margin: 0 auto 2.5rem;
}

/* ─── La grille ─── */
.com-content-categories__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--obs-tuile-mini), 1fr));
  gap: var(--obs-ecart);
}

/* ─── La tuile ─── */
.com-content-categories__item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  /* Le bandeau dégradé de 5px, dessiné en fond, tout en haut : */
  background: linear-gradient(90deg, var(--obs-stripe-1), var(--obs-stripe-2)) top/100% 5px no-repeat, #fff;
  box-shadow: 0 2px 8px rgba(60,80,100,0.07);
  padding: 39px 28px 28px;      /* 34px + les 5px du bandeau. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .38s ease, box-shadow .38s ease;
}
.com-content-categories__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(60,80,100,0.13);
}

/* ─── La barre bleue qui se déplie en bas au survol ─── */
.com-content-categories__item::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--obs-bleu);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(0.165,0.84,0.44,1);
}
.com-content-categories__item:hover::after { transform: scaleX(1); }

/* ─── On aplatit les emboîtements de Joomla ───
   NE PAS TOUCHER : sans ça, l'ordre ci-dessous ne fonctionne plus. */
.com-content-categories__item-title-wrapper,
.com-content-categories__item-title { display: contents; }

/* ─── Le cercle et son icône ─── */
.com-content-categories__item::before {
  content: var(--obs-icone, "\f02d");
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 20px;
  order: 1;
  width: var(--obs-cercle); height: var(--obs-cercle);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(91,124,153,0.3);
  background: rgba(91,124,153,0.05);
  color: var(--obs-bleu);
  margin-bottom: 22px;
  transition: all .35s ease;
}
.com-content-categories__item:hover::before {
  background: var(--obs-bleu);
  border-color: var(--obs-bleu);
  color: #fff;
  box-shadow: 0 4px 16px rgba(91,124,153,0.3);
}

/* ─── Le titre ─── */
.com-content-categories__item-title a {
  order: 2;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px; font-weight: 700;
  color: var(--obs-bleu-titre);
  line-height: 1.25;
  margin: 0 0 12px 0;
  text-decoration: none;
  transition: color .3s ease;
}
.com-content-categories__item:hover .com-content-categories__item-title a {
  color: var(--obs-bleu-hover);
}

/* ─── La description ─── */
.com-content-categories__description {
  order: 3;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15.5px;
  color: var(--obs-gris);
  line-height: 1.65;
  font-style: italic;
  margin: 0 0 26px 0;
  flex-grow: 1;                 /* Pousse le compte tout en bas. */
  text-align: center;
}
.com-content-categories__description p { margin: 0; }

/* ─── Le compte d'entrées, à la place du CTA ─── */
.com-content-categories__item .badge.bg-info {
  order: 4;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--obs-bleu) !important;
  background: transparent !important;
  padding: 18px 0 0 0;
  width: 100%;
  border-top: 1px solid rgba(91,124,153,0.12);
  border-radius: 0;
  transition: color .3s ease;
}
.com-content-categories__item:hover .badge.bg-info {
  color: var(--obs-bleu-cta-hover) !important;
}

/* ═══ CHOIX DES ICÔNES ═══
   Une ligne par rubrique, accrochée à l'alias de la catégorie.
   Pour changer : cherche une icône sur fontawesome.com et recopie
   son code Unicode ici (le « f02d » de « U+f02d »). */
.com-content-categories__item:has(a[href$="/salut"])              { --obs-icone: "\f1cd"; }  /* bouée */
.com-content-categories__item:has(a[href$="/questions"])          { --obs-icone: "\f059"; }  /* interrogation */
.com-content-categories__item:has(a[href$="/societe"])            { --obs-icone: "\f0c0"; }  /* groupe */
.com-content-categories__item:has(a[href$="/croix"])              { --obs-icone: "\f067"; }  /* croix */
.com-content-categories__item:has(a[href$="/vie"])                { --obs-icone: "\f004"; }  /* cœur */
.com-content-categories__item:has(a[href$="/combat"])             { --obs-icone: "\f0e7"; }  /* éclair */
.com-content-categories__item:has(a[href$="/les-peres-de-la-foi"]){ --obs-icone: "\f19c"; }  /* fronton */
.com-content-categories__item:has(a[href$="/eschatologie"])       { --obs-icone: "\f0ac"; }  /* globe */
.com-content-categories__item:has(a[href$="/eglise"])             { --obs-icone: "\f1ad"; }  /* bâtiment */
.com-content-categories__item:has(a[href$="/originaux"])          { --obs-icone: "\f036"; }  /* lignes */
.com-content-categories__item:has(a[href$="/dictionnaires"])      { --obs-icone: "\f02d"; }  /* livre */


/* ═══ LE TITRE DU HALL ═══
   Le h1 est un enfant direct de .com-content-categories (vérifié par inspection).
   Cadenassé sur .obs-hall : ne touche que l'Observatoire. */

.obs-hall .com-content-categories > h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;               /* La taille du titre. */
  font-weight: 700;
  color: var(--obs-bleu-titre);  /* Le bleu de tes titres de carte. */
  text-transform: none;          /* ← Casse les capitales forcées par Helix. */
  letter-spacing: 0;
  text-align: center;
  border-bottom: 0;              /* Le filet gris. Enlève cette ligne pour le garder. */
  padding-bottom: 0;
  margin: 0 0 1.5rem 0;
}

/* ─── Le surtitre ───
   Change le mot entre guillemets, ou supprime tout le bloc. */
.obs-hall .com-content-categories > h1::before {
  content: "Éditions Bible et Foi";
  display: block;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--obs-bleu);
  margin-bottom: 10px;
}