/* ==========================================================================
   30-blog.css — LE BLOG, DANS LA CHARTE DU SITE
   ==========================================================================

   Le module blog du CMS est écrit pour un socle Bootstrap : ses gabarits
   émettent « container », « row », « col-md-6 », « py-5 », « text-muted »…
   Ce site n'a pas Bootstrap — et n'en veut pas : zéro ressource distante, la
   page d'accueil tient en 20 Ko de HTML.

   Ce fichier fait donc le pont. Il ne modifie AUCUN gabarit du module : il
   habille les classes que le module produit, avec les variables de la charte
   de Cédric. Le module reste à jour tout seul ; le rendu reste celui du site.

   Le préfixe numérique « 30- » place ce fichier après xedria.css dans le
   chargement alphabétique — la convention du site : rien à déclarer ailleurs.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. La grille de Bootstrap, en trois règles
   --------------------------------------------------------------------------
   Inutile de réimplémenter un système de grille : le blog n'en utilise qu'un
   cas, une liste de cartes. Une grille CSS le fait mieux, et sans point de
   rupture à maintenir — les colonnes se calculent sur la largeur disponible.
   -------------------------------------------------------------------------- */

.he-blog-listing .container,
.he-blog-categorie,
.he-categorie .container,
.he-article .container,
.he-recherche .container{
  width:100%;
  max-width:var(--wrap, 72rem);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.he-blog-listing .row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr));
  gap:var(--sp-5);
  margin:0;
}
.he-blog-listing .row > [class*="col-"]{ padding:0; }

/* Espacements de Bootstrap encore présents dans les gabarits. On ne traduit
   que ceux qui apparaissent réellement — pas la nomenclature entière. */
.he-blog-listing .py-5,
.he-blog-categorie,
.he-categorie .py-5,
.he-article .py-5{ padding-block:var(--sp-section); }
.he-blog-listing .mb-3,.he-article .mb-3{ margin-bottom:var(--sp-3); }
.he-blog-listing .mb-4,.he-article .mb-4{ margin-bottom:var(--sp-5); }
.he-blog-listing .mt-2,.he-article .mt-2{ margin-top:var(--sp-2); }
.he-blog-listing .mt-3,.he-article .mt-3{ margin-top:var(--sp-3); }
.he-blog-listing .mt-4,.he-article .mt-4{ margin-top:var(--sp-5); }
.he-blog-listing .ms-2,.he-article .ms-2{ margin-left:var(--sp-2); }
.he-blog-listing .g-4{ gap:var(--sp-5); }

.he-blog-listing .d-flex,.he-article .d-flex{ display:flex; }
.he-blog-listing .flex-wrap{ flex-wrap:wrap; }
.he-blog-listing .gap-2,.he-article .gap-2{ gap:var(--sp-2); }
.he-blog-listing .align-items-center,
.he-article .align-items-center{ align-items:center; }
.he-blog-listing .justify-content-between{ justify-content:space-between; }
.he-blog-listing .text-center{ text-align:center; }
.he-blog-listing .text-muted,
.he-blog-categorie,
.he-categorie .text-muted,
.he-article .text-muted{ color:var(--muted); }
.he-blog-listing .fw-bold,.he-article .fw-bold{ font-weight:700; }
.he-article .display-5{
  font-size:var(--fs-xl); line-height:1.14; letter-spacing:-.02em;
}


/* --------------------------------------------------------------------------
   2. Les icônes LineIcons — remplacées, pas chargées
   --------------------------------------------------------------------------
   Les gabarits posent <i class="lni lni-calendar">. Charger une fonte d'icônes
   entière pour trois pictogrammes coûterait plus cher que la page elle-même,
   et ajouterait une ressource distante là où le site n'en a aucune.

   On rend donc le caractère directement. aria-hidden n'est pas nécessaire :
   ces éléments sont vides et décoratifs, et le texte qui suit porte le sens.
   -------------------------------------------------------------------------- */

.lni{ font-style:normal; opacity:.75; margin-right:.35em; }
.lni-calendar::before{ content:"\1F5D3\FE0E"; }   /* calendrier */
.lni-timer::before   { content:"\23F1\FE0E"; }    /* chronomètre */
.lni-user::before    { content:"\1F464\FE0E"; }   /* silhouette */
.lni-chevron-up::before   { content:"\2191"; }
.lni-chevron-right::before{ content:"\2192"; }
.lni-search::before  { content:"\1F50D\FE0E"; }


/* --------------------------------------------------------------------------
   3. Le listing
   -------------------------------------------------------------------------- */

.he-blog-listing,
.he-blog-categorie,
.he-categorie{ padding-block:var(--sp-section); }

/* Filtres de catégorie */
.he-blog-filters{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}

.he-badge-category{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.4em .9em;
  font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.04em;
  color:var(--blue);
  background:var(--bg-soft);
  border:1px solid var(--line-strong);
  border-radius:2px;
  text-decoration:none;
  transition:color .18s, border-color .18s, background-color .18s;
}
a.he-badge-category:hover,
a.he-badge-category:focus-visible{
  color:var(--ice);
  border-color:var(--line-hover);
  background:var(--panel-light);
}
a.he-badge-category.active{
  color:var(--on-light);
  background:var(--ice);
  border-color:var(--ice);
}
.he-badge-count{
  font-size:.82em; font-weight:400; opacity:.8;
  padding-left:.5em; border-left:1px solid currentColor;
}

/* Carte d'article */
.he-card-article{
  display:flex; flex-direction:column; height:100%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  transition:transform .22s var(--ease, ease), border-color .22s, background-color .22s;
}
.he-card-article:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  background:var(--panel-light);
}

/* La vignette n'existe que si l'article a une image : sans elle, le bloc doit
   disparaître complètement plutôt que laisser un rectangle vide. */
.he-card-media{ display:block; line-height:0; }
.he-card-media:empty{ display:none; }
.he-card-media img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

.he-card-body{
  display:flex; flex-direction:column; flex:1;
  gap:var(--sp-3);
  padding:var(--sp-5);
}
.he-card-body > .d-flex:first-child{ margin-bottom:0; }
.he-card-body h2,
.he-card-body .h5{
  margin:0;
  font-size:var(--fs-md); line-height:1.3; letter-spacing:-.01em;
}
.he-card-body h2 a{
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--ice),var(--ice));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .25s;
}
.he-card-article:hover h2 a{ background-size:100% 1px; }
.he-card-body p{
  margin:0; flex:1;
  color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.6;
}
.he-card-body small{ font-size:var(--fs-xs); }

.he-link-more{
  color:var(--ice); text-decoration:none; font-size:var(--fs-sm); font-weight:600;
  white-space:nowrap;
}
.he-link-more:hover{ text-decoration:underline; text-underline-offset:3px; }


/* --------------------------------------------------------------------------
   4. L'article
   -------------------------------------------------------------------------- */

.he-article{ padding-block:var(--sp-section); }

.he-breadcrumb{ margin-bottom:var(--sp-5); font-size:var(--fs-xs); }
.he-breadcrumb .breadcrumb{
  display:flex; flex-wrap:wrap; gap:.5em;
  list-style:none; margin:0; padding:0;
  color:var(--muted);
}
.he-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  content:"/"; margin-right:.5em; opacity:.5;
}
.he-breadcrumb a{ color:var(--muted); text-decoration:none; }
.he-breadcrumb a:hover{ color:var(--ice); }
.he-breadcrumb .active{ color:var(--ink-soft); }

.he-article-head{
  max-width:var(--mesure, 44rem);
  margin-inline:auto;
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.he-article-head h1{
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-xl); line-height:1.14; letter-spacing:-.02em;
  text-wrap:balance;
}
.he-article-meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-4);
  margin-top:var(--sp-4);
  font-size:var(--fs-xs); color:var(--muted);
}

/* Le corps : une seule colonne étroite. Une ligne de texte longue se relit mal,
   et c'est le seul réglage qui compte vraiment sur un article. */
.he-article-body{
  max-width:var(--mesure, 44rem);
  margin-inline:auto;
  padding-top:var(--sp-6);
  color:var(--ink-soft);
  font-size:var(--fs-base); line-height:1.72;
}
.he-article-body > * + *{ margin-top:var(--sp-4); }
.he-article-body h2{
  margin-top:var(--sp-7);
  font-size:var(--fs-lg); line-height:1.22; letter-spacing:-.015em;
  color:var(--ink); text-wrap:balance;
}
.he-article-body h3{
  margin-top:var(--sp-6);
  font-size:var(--fs-md); line-height:1.3;
  color:var(--ink);
}
.he-article-body strong{ color:var(--ink); font-weight:700; }
.he-article-body a{
  color:var(--ice);
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.he-article-body ul,
.he-article-body ol{ padding-left:1.4em; }
.he-article-body li + li{ margin-top:var(--sp-2); }
.he-article-body li::marker{ color:var(--blue); }

.he-article-body blockquote{
  margin-inline:0;
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg-soft);
  border-left:2px solid var(--warm);
  color:var(--ink);
  font-size:var(--fs-md); line-height:1.55;
}
.he-article-body blockquote p{ margin:0; }

/* Un tableau doit pouvoir défiler seul : sur un téléphone, il pousserait
   sinon toute la page vers la droite. */
.he-article-body table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm);
  background:var(--bg-soft);
  border:1px solid var(--line);
}
.he-article-body th{
  text-align:left; padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue);
  background:var(--panel);
  border-bottom:1px solid var(--line-strong);
}
.he-article-body td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.he-article-body tr:last-child td{ border-bottom:none; }

.he-article-image{ margin:var(--sp-6) 0; }
.he-article-image img{ width:100%; height:auto; border-radius:2px; }

.he-article-footer{
  max-width:var(--mesure, 44rem);
  margin:var(--sp-7) auto 0;
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.he-article-footer h2,
.he-connexes h2{
  font-size:var(--fs-md); letter-spacing:.02em;
  margin-bottom:var(--sp-4);
}

.he-btn-primary,
.he-blog-listing .btn,
.he-article .btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.7em 1.4em;
  font-size:var(--fs-sm); font-weight:600;
  color:var(--on-light); background:var(--ice);
  border:1px solid var(--ice); border-radius:2px;
  text-decoration:none;
  transition:background-color .18s, transform .18s;
}
.he-btn-primary:hover{ background:var(--ink); transform:translateY(-2px); }


/* --------------------------------------------------------------------------
   5. Pagination et recherche
   -------------------------------------------------------------------------- */

.he-pagination{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  justify-content:center;
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.he-pagination a,
.he-pagination span{
  padding:.5em .9em;
  font-size:var(--fs-sm);
  color:var(--muted); text-decoration:none;
  border:1px solid var(--line);
  border-radius:2px;
}
.he-pagination a:hover{ color:var(--ice); border-color:var(--line-hover); }
.he-pagination .active{
  color:var(--on-light); background:var(--ice); border-color:var(--ice);
}

.he-recherche input[type="search"],
.he-recherche input[type="text"]{
  width:100%; max-width:26rem;
  padding:.7em 1em;
  color:var(--ink); background:var(--bg-soft);
  border:1px solid var(--line-field); border-radius:2px;
  font:inherit; font-size:var(--fs-sm);
}
.he-recherche input:focus-visible{
  outline:2px solid var(--ice); outline-offset:2px;
}


/* --------------------------------------------------------------------------
   6. Retour en haut de page
   -------------------------------------------------------------------------- */

.back-to-top{
  position:fixed; right:var(--sp-5); bottom:var(--sp-5);
  display:none;
  width:2.6rem; height:2.6rem;
  align-items:center; justify-content:center;
  color:var(--on-light); background:var(--ice);
  border-radius:2px; text-decoration:none;
  z-index:40;
}
.back-to-top.show{ display:flex; }


@media (prefers-reduced-motion:reduce){
  .he-card-article,
  .he-card-body h2 a,
  .he-btn-primary{ transition:none; }
  .he-card-article:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   7. Les titres reprennent la largeur de leur colonne
   --------------------------------------------------------------------------
   La charte borne les titres en caractères — h1 à 16ch, h2 à 20ch — pour que,
   sur une page large comme l'accueil, un titre ne traverse pas tout l'écran.

   Dans un article, la colonne est DÉJÀ étroite : le compte en caractères vient
   s'y ajouter, et le titre se brise en quatre lignes au milieu d'une place
   libre. Le site fait exactement cette levée pour ses pages légales, avec le
   même raisonnement — on la reprend ici plutôt que d'en inventer une autre.
   -------------------------------------------------------------------------- */

.he-article-head h1,
.he-article-body :is(h2,h3),
.he-blog-listing :is(h1,h2),
.he-blog-categorie,
.he-categorie :is(h1,h2),
.he-card-body :is(h2,.h5){ max-width:none; }

/* Deux classes que les gabarits posent encore et que la charte ne connaît pas. */
.he-blog-listing .small,
.he-blog-categorie,
.he-categorie .small,
.he-article .small{ font-size:var(--fs-xs); }
.rounded-pill{ border-radius:999px; }


/* En-tete du blog et des pages de categorie. */
.he-blog-head{
  margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.he-blog-head h1{
  margin:0; max-width:none;
  font-size:var(--fs-2xl); line-height:1.06; letter-spacing:-.03em;
}
.he-blog-head p{
  margin:var(--sp-3) 0 0; max-width:56ch;
  color:var(--ink-soft); font-size:var(--fs-md); line-height:1.5;
}


/* Le titre des pages de categorie : le gabarit le pose deja, il ne lui manquait
   que d'echapper a la limite en caracteres de la charte. */
.he-categorie h1{
  max-width:none;
  font-size:var(--fs-2xl); line-height:1.06; letter-spacing:-.03em;
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.he-categorie .row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr));
  gap:var(--sp-5); margin:0;
}
.he-categorie .row > [class*="col-"]{ padding:0; }