/*  ----------------------------------------------------  */
/*   CHARTE 2026 v2 - www.benoitlabourdette.com            */
/*   Harmonisation complete : cette surcouche remplace     */
/*   l'ensemble de l'ancienne palette (bleu pervenche      */
/*   #5781ff et jaunes #ffd557/#ffe28a/#ffefbc) par la     */
/*   charte litteraire : encre, safran, creme, EB Garamond.*/
/*   Se charge APRES benoitlabourdette.css.                */
/*  ----------------------------------------------------  */

/* -----  1. Polices (locales, souveraines) : Alegreya  -----
   Une seule famille, deux voix : Alegreya pour le texte et les titres,
   Alegreya SC (petites capitales) pour tout l'appareil (boutons, dates,
   fil d'ariane, badges, libelles). Graisses : 400, 700, 900 + italiques. */

@font-face { font-family:'Alegreya'; src:url('fonts/alegreya-regular.woff2') format('woff2'), url('fonts/alegreya-regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya'; src:url('fonts/alegreya-italic.woff2') format('woff2'), url('fonts/alegreya-italic.woff') format('woff'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Alegreya'; src:url('fonts/alegreya-bold.woff2') format('woff2'), url('fonts/alegreya-bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya'; src:url('fonts/alegreya-bolditalic.woff2') format('woff2'), url('fonts/alegreya-bolditalic.woff') format('woff'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Alegreya'; src:url('fonts/alegreya-black.woff2') format('woff2'), url('fonts/alegreya-black.woff') format('woff'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya SC'; src:url('fonts/alegreyasc-regular.woff2') format('woff2'), url('fonts/alegreyasc-regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya SC'; src:url('fonts/alegreyasc-bold.woff2') format('woff2'), url('fonts/alegreyasc-bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

/* -----  2. Variables de la charte  ----- */
:root {
  --blp-encre:      #1e2b3a;   /* structure et texte : bleu encre */
  --blp-encre-2:    #2c3e52;   /* encre plus claire (survols, actifs) */
  --blp-safran:     #d99a2b;   /* accent principal */
  --blp-safran-f:   #a8761a;   /* safran fonce (liens, lisible sur clair) */
  --blp-creme:      #faf7f0;   /* fonds clairs chauds */
  --blp-parchemin:  #f3ecdd;   /* en-tetes secondaires, filets */
  --blp-publics:    #b35c3e;
  --blp-pros:       #2e5266;
  --blp-hybride:    #6d597a;
  --blp-cadre:      #2c4a66;   /* le cadre du site : bleu profond, plus vivant que l'encre */
  --blp-papier:     #f6f1e7;   /* fond de page : papier chaud */
  --blp-serif:      'Alegreya', Georgia, serif;
  --blp-sc:         'Alegreya SC', 'Alegreya', Georgia, serif;
  --blp-sans:       'Alegreya SC', 'Alegreya', Georgia, serif; /* l'appareil parle en petites capitales */
}

/* -----  3. Le cadre : navbar, sidebar, footer, fil d'ariane  ----- */

/* Navbar et footer (tous deux en .bg-dark) : bleu profond, fil safran */
.bg-dark { background-color: var(--blp-cadre) !important; }
nav.navbar.bg-dark {
  border-bottom: 3px solid var(--blp-safran);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  transition: padding 0.25s ease;
}
/* Les ancres internes ne disparaissent pas sous la barre fixe */
:target { scroll-margin-top: 90px; }
/* Au defilement (classe posee par le script), la barre se fait plus discrete */
@media (min-width: 768px) {
  nav.navbar.navbar-reduite { padding-top: 0.15rem; padding-bottom: 0.15rem; }
  nav.navbar.navbar-reduite .navbar-brand { font-size: 1.05rem; }
  nav.navbar.navbar-reduite .navbar-text { display: none; }
}

/* Footer : la charte jusqu'en bas */
footer.bg-dark, footer.bg-dark div {
  font-family: var(--blp-serif) !important;
  font-style: italic;
  font-size: 0.8rem;
  color: rgba(250, 247, 240, 0.75) !important;
}
footer.bg-dark { border-top: 3px solid var(--blp-safran); }
@media (min-width: 768px) {
  /* La sidebar etant fixe sur desktop, le pied de page s'etend
     par-dessus elle pour aller jusqu'au bord gauche de l'ecran */
  footer.bg-dark {
    position: relative;
    z-index: 1016;
    margin-left: -90px;
    width: calc(100% + 90px);
  }
  /* MAIS son TEXTE doit rester centre sur l'axe du CONTENU, pas sur celui de
     l'ecran. Le fond va jusqu'au bord (ci-dessus) ; le texte, lui, est ramene
     de 90px vers la droite pour retrouver le meme axe que l'article.
     Sans cela, le pied de page est decale de 45px vers la gauche par rapport
     a tout le reste. Le defaut preexistait : il ne se voyait pas tant que le
     contenu n'etait pas lui-meme centre. */
  footer.bg-dark > div {
    padding-left: 90px !important;
  }
}

.navbar-brand { font-family: var(--blp-serif); letter-spacing: 0; font-size: 1.35rem; transition: font-size 0.25s ease; }
.navbar-text  { font-family: var(--blp-serif); font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.85) !important; }

/* Sidebar : papier filete, comme une marge de livre.
   Le seul aplat sombre du site reste le bandeau du haut.
   Elle est fixe a l'ecran, sous la barre : le menu accompagne le defilement,
   et le burger l'ouvre a l'endroit ou l'on se trouve. */
.sidebar {
  background-color: var(--blp-papier) !important;
  border-right: 1px solid var(--blp-parchemin);
  position: fixed;
  top: var(--blp-nav-h, 64px);
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1015;
}
@media (min-width: 768px) {
  .sidebar { background-color: var(--blp-papier) !important; }
  /* La sidebar etant sortie du flux, le contenu lui laisse sa place
     (largeur recalculee, sinon 100% + 90px debordent et creent un
     ascenseur horizontal) */
  #content-wrapper { margin-left: 90px; width: calc(100% - 90px); }
}
@media (max-width: 767px) {
  /* Ouverte au burger, elle se pose par-dessus le contenu, la ou l'on est */
  .sidebar.toggled {
    box-shadow: 4px 0 14px rgba(30, 43, 58, 0.18);
  }
}
.sidebar .nav-item .nav-link {
  color: var(--blp-encre) !important;
  border-left: 3px solid transparent;
  padding-left: calc(1rem - 3px); /* compense le filet : centrage exact */
}
.sidebar .nav-item .nav-link span {
  font-family: var(--blp-sc);
  font-size: 0.72rem;
  letter-spacing: 0;
  line-height: 1.15;
}
.sidebar .nav-item .nav-link:hover { color: var(--blp-safran-f) !important; opacity: 1; }
.sidebar .nav-item.active { background-color: transparent !important; }
.sidebar .nav-item.active .nav-link {
  color: var(--blp-safran-f) !important;
  border-left: 3px solid var(--blp-safran);
  font-weight: 600;
}

/* Fil d'ariane : en Garamond, sans boite, comme un titre courant de livre */
.breadcrumb {
  background-color: transparent !important;
  font-family: var(--blp-sc);
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--blp-parchemin);
  border-radius: 0;

  /* LE RESSERREMENT. Bootstrap donne a .breadcrumb un "padding: .75rem 1rem"
     et un "margin-bottom: 1rem" : 12px de vide AU-DESSUS du texte, a l'interieur
     meme du fil, et 16px en dessous. C'est ce padding interne qui l'enfonce.

     Le !important est necessaire, exactement comme pour le background-color
     ci-dessus : sb-admin.min.css declare .breadcrumb avec la meme specificite,
     et selon l'ordre reel de resolution la regle de Bootstrap l'emportait. Le
     modele de boite de l'inspecteur affichait toujours 12px de padding haut. */
  padding: 0.1rem 0.25rem 0.45rem 0.25rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;

  /* Sur telephone, le fil PASSE A LA LIGNE plutot que de deborder ou de se
     faire tronquer : on prefere deux lignes completes a un chemin ampute. */
  flex-wrap: wrap;
  row-gap: 0.1rem;
}
.breadcrumb a { color: var(--blp-safran-f); }
.breadcrumb a:hover { color: var(--blp-encre); }

/* Le separateur : un CHEVRON, pas une barre oblique.
   Bootstrap impose content:"/" — une barre n'indique aucune direction, alors
   qu'un chevron dit la descente dans l'arborescence. */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";               /* › */
  color: var(--blp-safran);
  padding-right: 0.45rem;
}
.breadcrumb-item + .breadcrumb-item { padding-left: 0.45rem; }

/* Le dernier maillon (le nom de la page courante, non cliquable).
   Il etait en #6c757d, le gris de Bootstrap — une couleur qui n'existe nulle
   part dans la charte, comme l'etait le bleu des liens. On le passe a l'encre,
   et on le distingue par le POIDS plutot que par une couleur etrangere : il
   dit ou l'on se trouve, il ne s'efface pas.
   Sur une page ARTICLE ce maillon n'existe plus (voir article_fil_ariane) ;
   sur une page RUBRIQUE il demeure, car il y dit la profondeur. */
.breadcrumb-item.active {
  color: var(--blp-encre) !important;
  font-weight: 700;
}

/* PAGE ARTICLE : le fil n'a plus de maillon "active" (le titre a ete retire),
   donc plus aucun repere de position. On distingue le DERNIER maillon — la
   rubrique qui contient l'article — mais par le POIDS SEUL.

   Il reste SAFRAN, comme tous les liens du site. Le passer a l'encre, comme
   je l'avais d'abord fait, en faisait un faux cul-de-sac : la couleur disait
   "non cliquable" alors que le lien fonctionne — precisement le defaut que le
   retrait du titre visait a corriger. La position, ici, se lit deja au rang
   (c'est le dernier) ; la couleur, elle, doit dire l'action. */
.article-charte .breadcrumb-item:last-child a {
  font-weight: 700;
}

/* Bouton remonter en haut : safran en permanence, pour rester visible
   sur le pied de page bleu (c'est en bas qu'on en a besoin) */
.scroll-to-top, a.scroll-to-top {
  background-color: var(--blp-safran) !important;
  opacity: 0.92 !important;
  position: fixed !important;
  z-index: 1050 !important;
}
.scroll-to-top, .scroll-to-top i, .scroll-to-top:hover, .scroll-to-top:hover i {
  color: var(--blp-encre) !important;
}
.scroll-to-top:hover { background-color: var(--blp-safran-f) !important; }
.scroll-to-top:hover, .scroll-to-top:hover i { color: #fff !important; }

/* Navbar sur telephone : on retire les rustines historiques (marges negatives),
   le slogan s'efface, la marque et la recherche respirent */
@media (max-width: 767px) {
  body { overflow-x: hidden; }
  .navbar-text { display: none !important; }
  /* L'icone maison, invisible mais occupant de la place, decalait la
     premiere ligne du nom : on la retire entierement du flux */
  .navbar .navbar-brand i { display: none !important; margin-left: 0 !important; }

  /* Toute la barre s'aligne sur un meme axe median */
  nav.navbar.navbar-expand {
    flex-wrap: nowrap;
    align-items: center;
  }
  .navbar-brand {
    margin-top: 0 !important;
    margin-left: 0.75rem;   /* respiration apres le burger */
    margin-right: 0.5rem;
    font-size: 0.95rem !important;
    white-space: normal;
    line-height: 1.25;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* La recherche : l'icone disparait, le champ prend une largeur fixe
     (le w-75 de Bootstrap, en !important, exigeait de repondre en !important) */
  .navbar .search-container { display: flex; align-items: center; margin: 0 0.25rem 0 0 !important; }
  .navbar .search-container form { flex-wrap: nowrap; margin: 0; }
  .navbar .search-container i.fas { display: none; }
  .navbar .search-container input.form-control,
  .navbar input.form-control, .navbar .form-control {
    width: 32vw !important;
    max-width: 32vw !important;
    margin-left: 0 !important;
    font-size: 0.85rem;
  }
  .navbar .navbar-nav {
    align-self: center;
    margin: 0 0 0 0.4rem !important;
  }
  .navbar .dropdown { margin-top: 0 !important; }
  .navbar .language-selector a.dropdown-toggle {
    white-space: nowrap;
    display: flex;
    align-items: center;
  }
  .navbar .language-selector a.dropdown-toggle span {
    font-size: 0.75rem;
    margin-left: 0.35rem;
  }

  /* Les images d'en-tete des rubriques (carousel ou image seule) cessent
     d'etre des rubans : elles retrouvent de la hauteur, comme le hero */
  .carousel-inner .carousel-item img,
  .image-accueil .carousel-item img,
  .image-accueil > img,
  .image-accueil a > img,
  .image-accueil img.d-block.w-100 {
    height: 280px !important;
    object-fit: cover;
    width: 100%;
  }
}

/* -----  4. Typographie  ----- */
body { color: var(--blp-encre); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .carousel-caption {
  font-family: var(--blp-serif);
  letter-spacing: 0;
  color: inherit;
}
h1, .h1 { font-weight: 700; }

/* Le texte de lecture (articles, chapeaux, cartes) passe en serif */
#wrapper .card-body p,
#wrapper .card-body li,
#wrapper .card-body blockquote {
  font-family: var(--blp-serif);
  font-size: 1.05rem;
  line-height: 1.6;
}
/* Les elements d'interface restent en sans */
.btn, .badge, .navbar,
.dropdown-menu, .pagination {
  font-family: var(--blp-sc);
  letter-spacing: 0.02em;
}
/* On tape du texte dans les champs : voix de texte, pas de petites capitales */
.form-control, input, textarea, select {
  font-family: var(--blp-serif);
}

/* Titres de section dans les articles : filet safran a la place du pointille gris */
.article h2 {
  border-bottom: 1px solid var(--blp-safran);
  padding-bottom: 0.2em;
}

/* Icones dans les titres et en-tetes : safran, aerees */
h1 i.fas, h1 i.fa,
.card-header i.fas, .card-header i.fa {
  color: var(--blp-safran-f);
  font-size: 0.8em;
  vertical-align: baseline;
  opacity: 0.9;
  margin-right: 0.45em;
}

/* Titres des cartes : une bande de papier creme qui court sous l'image,
   d'un bord a l'autre de la carte, avec un pictogramme genereux */
.card-body .card-title {
  background-color: var(--blp-creme);
  margin: -1.25rem -1.25rem 0.9rem -1.25rem;
  padding: 0.8rem 1.25rem;
}
.card-body .card-title i.fas, .card-body .card-title i.fa {
  color: var(--blp-safran-f);
  font-size: 0.95em;
  margin-right: 0.55em;
  vertical-align: baseline;
}
/* Hors des cartes (couvertures de livres, listes nues) : titre simple */
.couverture-livre .card-title { background: none; margin: 0.5rem 0 0 0; padding: 0; }

/* Liens dans le contenu (jamais les boutons ni les legendes de carrousel) */
#wrapper .card-body a:not(.btn):not(.carousel-control-prev):not(.carousel-control-next),
#wrapper .container-fluid > a { color: var(--blp-safran-f); }
#wrapper .card-body a:not(.btn):hover { color: var(--blp-encre); }

/* Citations : la version litteraire */
blockquote {
  background: var(--blp-creme);
  border-left: 6px solid var(--blp-safran);
  color: var(--blp-encre);
  font-style: italic;
}
blockquote::before { color: var(--blp-safran); font-family: var(--blp-serif); }
blockquote span { color: var(--blp-encre); }

/* Carrousels : legendes toujours blanches, sur bandeau encre lisible */
.carousel-caption,
.carousel-caption a,
#wrapper .carousel-caption a,
.carousel-caption i.fas, .carousel-caption i.fa {
  color: #fff !important;
}
.carousel-caption {
  background: rgba(30, 43, 58, 0.75);
  border-radius: 4px;
  padding: 0.5rem 1.25rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.carousel-caption i.fas, .carousel-caption i.fa { color: var(--blp-safran) !important; }

/* Tableaux SPIP */
table.spip tr.row_first { background-color: var(--blp-parchemin); }

/* -----  5. Cartes et fonds  ----- */

/* Fond de page : papier chaud ; les cartes blanches s'y detachent doucement */
#content-wrapper { background-color: var(--blp-papier) !important; }

/* Respiration : le contenu est centre, a largeur maitrisee, comme une page de journal */
#content-wrapper > .container-fluid {
  max-width: 1420px;
  margin-left: auto;
  margin-right: auto;
  /* PADDING SUPERIEUR : c'est lui qui aligne le fil d'Ariane sur TOUTES les
     pages.

     Bootstrap ne donne au .container-fluid qu'un padding gauche/droite, jamais
     de padding-top. Le ol.breadcrumb se trouvait donc etre le premier enfant
     d'un conteneur sans rien au-dessus de lui : sa marge s'echappait vers le
     haut au lieu de rester a l'interieur (effondrement de marges), et le fil
     ne se posait pas a la meme hauteur d'une page a l'autre.

     La page rubrique y echappait parce qu'elle seule portait la classe pt-2 sur
     son content-wrapper : ce padding bloquait l'effondrement. L'article, la
     composition philosophie et la page mot-cle ne l'avaient pas, et leur fil
     descendait. La correlation etait exacte sur les quatre cas.

     On corrige donc a la SOURCE, ici, une seule fois, plutot que d'ajouter pt-2
     dans chaque composition : toutes les pages s'alignent, y compris celles que
     nous n'avons pas ouvertes.

     La valeur est faible a dessein : elle n'a pas a creer de respiration, mais
     seulement a EXISTER, pour que la marge du premier enfant reste a l'interieur
     du conteneur. La respiration, elle, est reglee sur le fil lui-meme. */
  padding-top: 0.15rem;
}
.card { background-color: #fff; }

/* Les conteneurs internes deviennent transparents (fin des boites dans les boites) */
.bg-light { background-color: transparent !important; }

/* Alleger les cartes : plus de bordures grises Bootstrap, une ombre a peine posee */
.card {
  border: none;
  box-shadow: 0 1px 4px rgba(30, 43, 58, 0.10);
  border-radius: 6px;
}
.card .card { box-shadow: 0 2px 10px rgba(30, 43, 58, 0.10); }
.card > img, .card > a > img { border-radius: 6px 6px 0 0; }

/* En-tetes secondaires de cartes : non plus un bandeau plein, mais un titre
   de chapitre, en serif, souligne d'un filet parchemin (remplace le jaune #ffe28a).
   Sauf les barres de metadonnees (.card-header.small : date, duree, exports),
   qui restent compactes et en sans. */
.card-header:not(.small) {
  background-color: transparent !important;
  color: var(--blp-encre);
  border-bottom: 2px solid var(--blp-parchemin);
  font-size: 1.1rem;
  padding-bottom: 0.5rem;
}
.card-header:not(.small), .card-header .h3, .card-header h1 { font-family: var(--blp-serif); }

.card-header.small {
  background-color: transparent !important;
  border-bottom: 1px solid var(--blp-parchemin);
  font-family: var(--blp-sc);
  font-size: 0.85rem;
  color: #6c757d;
}
.card-header.small a { font-family: var(--blp-sc); }

/* Legendes et sous-titres sous les images (portfolio, fiches techniques) */
.card-footer.text-muted, .card-footer.text-muted div, .card-footer.text-muted span {
  font-family: var(--blp-serif);
  font-style: italic;
  font-size: 0.95rem;
}

/* En-tetes principaux (card-header-blue historique, card-header-charte) : encre */
.card-header-blue, .card-header-charte {
  background-color: var(--blp-cadre) !important;
  color: #fff;
  border-bottom: 3px solid var(--blp-safran);
}
.card-header-blue a, .card-header-charte a { color: #fff; text-decoration: none; }
.card-header-blue i.fas, .card-header-charte i.fas { color: var(--blp-safran); }

/* Pied de carte : dates et durees en retrait */
.card-footer { background-color: transparent; border-top: 1px solid var(--blp-parchemin); }

/* -----  6. Boutons et badges  ----- */
.btn-agence {
  background-color: var(--blp-safran);
  border-color: var(--blp-safran);
  color: var(--blp-encre);
  font-weight: 600;
}
.btn-agence:hover { background-color: var(--blp-safran-f); border-color: var(--blp-safran-f); color: #fff; }

.btn-primary { background-color: var(--blp-encre); border-color: var(--blp-encre); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--blp-safran-f); border-color: var(--blp-safran-f); }
.btn-outline-primary { color: var(--blp-encre); border-color: var(--blp-encre); }
.btn-outline-primary:hover { background-color: var(--blp-encre); border-color: var(--blp-encre); }

.badge-publics  { background-color: var(--blp-publics); color:#fff; }
.badge-pros     { background-color: var(--blp-pros);    color:#fff; }
.badge-hybride  { background-color: var(--blp-hybride); color:#fff; }
.badge-publics, .badge-pros, .badge-hybride {
  font-weight: 400; letter-spacing: 0.04em;
  font-size: 0.75rem; padding: 0.3em 0.6em;
}

/* Telechargements PDF : de vrais boutons, en Garamond */
#wrapper .card-body a[href*="spipdf"],
#wrapper a[href*="spipdf"] {
  display: inline-flex;
  align-items: center;
  font-family: var(--blp-sc);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  background-color: var(--blp-cadre);
  color: #fff !important;
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(30, 43, 58, 0.25);
  transition: background-color 0.2s ease;
  margin: 0.25rem 0;
}
#wrapper .card-body a[href*="spipdf"]:hover,
#wrapper a[href*="spipdf"]:hover {
  background-color: var(--blp-safran-f);
  color: #fff !important;
}
#wrapper a[href*="spipdf"] i.fas {
  color: var(--blp-safran);
  order: -1;
  margin-right: 0.4em;
  margin-left: 0;
}

/* ... mais compact dans le cartouche de metadonnees des articles,
   ou tout s'aligne sur une meme ligne mediane */
.card-header.small.d-flex { align-items: center; }
#wrapper .card-header.small a[href*="spipdf"],
#wrapper .card-body .card-header.small a[href*="spipdf"] {
  font-size: 0.75rem;
  padding: 0.1rem 0.55rem;
  margin: 0 0 0 1.2rem;
  box-shadow: none;
  line-height: 1.5;
}

/* Pictogrammes des petits titres (listes laterales, h6) : safran, comme partout */
h6 i.fas, h6 i.fa {
  color: var(--blp-safran-f);
  font-size: 0.85em;
  margin-right: 0.3em;
}

/* Pagination */
.page-link { color: var(--blp-safran-f); }
.page-item.active .page-link { background-color: var(--blp-encre); border-color: var(--blp-encre); }

/* -----  7. Composants de la couche offre  ----- */
.carte-offre .card-footer { display: none; }
.carte-offre .sous-titre, .sous-titre {
  font-family: var(--blp-serif); font-style: italic;
  color: var(--blp-safran-f); font-size: 1.05rem;
}

.couverture-livre img {
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
  box-shadow: 0 6px 18px rgba(30,43,58,0.25);
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.couverture-livre:hover img { transform: translateY(-4px); }

/* -----  8. La page d'accueil : des sections sur le papier, pas des boites  ----- */
/* Les grandes cartes-enveloppes de l'accueil se dissolvent : leurs titres
   deviennent des titres de section poses sur le fond papier, et seules les
   cartes de contenu (poles, livres, publications) restent blanches. */
.accueil > .card {
  background-color: transparent;
  box-shadow: none;
  border: none;
}
.accueil > .card > .card-header:not(.small),
.accueil > .card .card-header:not(.small) {
  background-color: transparent !important;
  border-bottom: none;
  text-align: center;
  padding: 0.5rem 0 0 0;
  margin-bottom: 1.1rem;
}
.accueil .card-header:not(.small) h1,
.accueil .card-header:not(.small) h2,
.accueil .card-header:not(.small) .h5 {
  font-size: 1.7rem;
  margin-bottom: 0;
  line-height: 1.25;
}
/* Le pictogramme devient le fleuron : centre, genereux, au-dessus du titre */
.accueil .card-header:not(.small) i.fas {
  display: block;
  font-size: 1.8rem;
  margin: 0 auto 0.5rem auto;
  color: var(--blp-safran);
  opacity: 1;
}
/* Filet court centre sous le titre, comme dans un livre */
.accueil .card-header:not(.small)::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background-color: var(--blp-safran);
  margin: 0.65rem auto 0 auto;
}
/* La prose posee directement dans une section (presentation de l'agence) :
   une mesure de livre, plus etroite que les images, centree */
.accueil > .card > .card-body > p {
  font-size: 1.05rem;
  color: var(--blp-encre);
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
/* Respiration entre les sections de l'accueil : de vrais chapitres */
.accueil > .card { margin-top: 3.25rem; }
.accueil > .blp-hero + .card, .accueil > .card:first-child { margin-top: 1rem; }
.accueil > .card > .card-body,
.accueil > .card > .image-accueil > .card-body {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.6rem;
}
/* Les cartes de contenu, elles, restent des cartes */
.accueil .card .card {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(30, 43, 58, 0.10);
}

/* Les poles de l'accueil : ni carte ni fond, une composition posee sur le papier.
   Les titres, au-dessus des images, partagent une meme hauteur (deux lignes)
   et s'ancrent en bas, pour que toutes les images s'alignent. */
.pole-accueil a,
.pole-accueil a .pole-titre,
.pole-accueil a .pole-texte {
  text-decoration: none;
  color: var(--blp-encre) !important;
}
.pole-accueil a { display: block; }
.pole-accueil .pole-titre {
  font-family: var(--blp-serif);
  font-size: 1.15rem;
  font-weight: 700;
  min-height: 5.4rem;
  display: flex;
  align-items: flex-start; /* fleuron et titre accroches en haut, l'espace variable passe sous le titre */
  justify-content: center;
  margin-bottom: 0.6rem;
  line-height: 1.25;
  text-align: center;
}
.pole-accueil .pole-titre span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Les portes sont des noms de lieux, pas des titres d'oeuvres :
   elles parlent en petites capitales, comme la sidebar et le fil d'ariane */
.pole-accueil:not(.publication-accueil) .pole-titre {
  font-family: var(--blp-sc);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.pole-accueil .pole-titre span i.fas {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 0.4rem 0;
}
.pole-accueil .pole-titre i.fas {
  color: var(--blp-safran) !important;
}
.pole-accueil .pole-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--blp-parchemin);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(30, 43, 58, 0.14);
}
.pole-accueil .pole-image img.img-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.25s ease;
}
.pole-accueil a:hover .pole-image img.img-fluid { transform: translateY(-3px); }
.pole-accueil .pole-texte {
  font-family: var(--blp-serif);
  font-size: 1.02rem;
  line-height: 1.55;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--blp-parchemin);
}

/* Le lien discret vers toutes les publications, en fin de section */
.lien-toutes-publications {
  text-align: right;
  font-family: var(--blp-serif);
  margin: 1.5rem 0 0 0;
  clear: both;
}
@media (max-width: 767px) {
  .pole-accueil:not(.publication-accueil) .pole-titre { min-height: 5.1rem; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pole-accueil:not(.publication-accueil) .pole-titre { min-height: 6.6rem; }
}

/* Publications et tags : le meme motif que les poles, en plus petit.
   Une ligne italique (le sous-titre-promesse) tient lieu de texte. */
.publication-accueil .pole-titre {
  font-size: 1rem;
  min-height: 5.7rem; /* trois lignes de titre + fleuron : toutes les images s'alignent */
}
/* Quelle que soit la forme du logo d'origine, l'image se cale au carre */
.publication-accueil .pole-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}
.publication-accueil .pole-titre span i.fas {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}
/* Les fils (themes) ont des titres courts : reserve reduite */
.fil-accueil .pole-titre { min-height: 4rem; }

/* -----  Alignement par sous-grille (navigateurs modernes)  -----
   Chaque rangee de compositions partage ses lignes internes :
   titres, images, dates et textes s'alignent par construction,
   quel que soit le nombre de lignes des titres. Les reserves
   min-height ci-dessus ne servent plus que de filet de securite
   aux navigateurs anciens. */
@supports (grid-template-rows: subgrid) {
  .accueil .card-body > .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.25rem;
    /* Bootstrap compense le padding des colonnes par des marges negatives ;
       la grille ayant retire ce padding, on retire aussi la compensation */
    margin-left: 0;
    margin-right: 0;
  }
  .accueil .card-body > .row > .pole-accueil {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    width: auto;
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .accueil .card-body > .row > .pole-accueil > a { display: contents; }
  .accueil .card-body > .row .pole-titre { min-height: 0 !important; }
  @media (max-width: 767px) {
    .accueil .card-body > .row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 0.9rem;
    }
  }
  /* A partir de 1250px, l'ecran est assez large pour SIX colonnes : les
     vignettes restent lisibles et la page respire moins de vide lateral.
     En dessous, on garde quatre (declaration par defaut ci-dessus), et deux
     sur telephone. La sous-grille recalcule seule l'alignement des images :
     rien d'autre a changer.

     EXCEPTION : la page d'accueil (sommaire-accueil) reste a QUATRE colonnes.
     Ses quatre grandes rubriques sont le point d'entree du site : on les veut
     larges et mises en valeur, pas reduites a des vignettes parmi d'autres. Le
     passage a six ne vaut donc que pour les AUTRES pages (rubriques, "toutes les
     publications", "Voir aussi"). */
  @media (min-width: 1250px) {
    .accueil:not(.sommaire-accueil) .card-body > .row {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

/* Sur telephone, les tetes de chapitre se resserrent pour tenir sur une ligne */
@media (max-width: 767px) {
  .accueil .card-header:not(.small) h1,
  .accueil .card-header:not(.small) h2,
  .accueil .card-header:not(.small) .h5 {
    font-size: 1.3rem;
  }
  .accueil .card-header:not(.small) i.fas {
    font-size: 1.5rem;
  }
}
}

/* La date : toute petite, a droite, quasi collee sous l'image.
   (Prefixe #wrapper .card-body : sans lui, la regle generale du texte
   de lecture en 1,08rem gagne en specificite et grossit la date.) */
#wrapper .card-body .pole-accueil p.pole-date,
.pole-accueil .pole-date {
  font-family: var(--blp-sc);
  font-size: 0.7rem;
  color: #9a927f;
  text-align: right;
  margin: 0.15rem 0 0 0;
  line-height: 1.1;
}
#wrapper .card-body .pole-accueil p.pole-texte {
  font-size: 1.02rem;
  line-height: 1.55;
}
/* Le texte suit la date sans doubler l'espace */
.pole-accueil .pole-date + .pole-texte { margin-top: 0.45rem; }
@media (max-width: 767px) {
  /* Reserve au plus juste (fleuron + deux lignes) : un titre tres long
     pousse sa propre image, mais les rangees cessent de baller */
  .publication-accueil .pole-titre { min-height: 5.9rem; } /* fleuron + trois lignes : les titres d'articles sont longs */
  .fil-accueil .pole-titre { min-height: 4.5rem !important; } /* les fils, aux titres courts, restent compacts */
  /* Les rangees de deux se resserrent verticalement */
  .accueil .pole-accueil.mb-4 { margin-bottom: 1.1rem !important; }
  /* Le texte sous l'image se limite a trois lignes : c'est la longueur
     variable des textes qui creusait les grands vides entre rangees */
  .accueil .pole-accueil .pole-texte {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
  }
}

/* -----  8bis. Le hero de la page d'accueil  ----- */
.blp-hero { position: relative; overflow: hidden; border-radius: 0.25rem; }
.blp-hero img { width: 100%; height: 420px; object-fit: cover; display: block; }
.blp-hero .blp-hero-texte {
  position: absolute; top:0; right:0; bottom:0; left:0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(30,43,58,0.85) 0%, rgba(30,43,58,0.0) 60%);
  color: #fff;
}
.blp-hero h1 {
  font-family: var(--blp-serif); font-weight: 700; font-size: 2.05rem; letter-spacing: 0; color: #fff;
  margin-bottom: 0.75rem; text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
@media (max-width: 767px) {
  .blp-hero img { height: 300px; }
  .blp-hero h1 { font-size: 1.35rem; }
}

/*  ----------------------------------------------------  */
/*   9. LA PAGE D'UNE RUBRIQUE - CHARTE 2026               */
/*   Une rubrique ne melange jamais sous-rubriques et      */
/*   articles : elle est soit un carrefour, soit un lieu   */
/*   de lecture. Toute la page doit le dire d'un coup.     */
/*   La page porte la classe .accueil : elle herite donc   */
/*   des poles, des tetes de chapitre et de la sous-grille */
/*   deja definis en section 8. Ici, le strict complement. */
/*  ----------------------------------------------------  */

/* ----- L'ouverture : le titre et le chapo, sans image -----
   Pas d'image d'en-tete : on entre dans un lieu par son nom. Les images
   vivent dans les vignettes, la ou elles font office de porte. */

.rubrique-ouverture { margin-bottom: 1rem; }

/* Le titre : un frontispice. Fleuron, nom du lieu, filet.
   Le fleuron REMPLACE l'image d'ouverture : il n'est plus un pictogramme
   pose dans le texte, il est l'accueil visuel de la rubrique. Il lui faut
   donc une vraie taille et de l'air autour. Les images, elles, vivent plus
   bas, dans les vignettes, la ou elles font office de porte. */
.rubrique-titre {
  text-align: center;
  padding: 2.2rem 0 0 0;
}
/* Le fleuron cercle : un filet safran fin, un fond creme, et le pictogramme
   au centre. Il cesse d'etre un caractere pose au milieu du texte pour devenir
   un objet, un sceau : l'emblene de la rubrique. C'est lui qui accueille,
   maintenant que les images ont quitte le haut de page. */
/* Selecteur renforce (.rubrique-charte en tete) : Font Awesome impose
   display:inline-block sur .fas, et sans ce poids supplementaire le cercle
   ne se formerait pas. */
.rubrique-charte .rubrique-titre i.fas,
.rubrique-titre i.fas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  font-size: 3.2rem;
  color: var(--blp-safran);
  background-color: var(--blp-creme);
  border: 2px solid var(--blp-safran);
  border-radius: 50%;
  margin: 0 auto 1.6rem auto;
  line-height: 1;
  box-sizing: border-box;
}
.rubrique-titre h1 {
  font-family: var(--blp-sc);   /* petites capitales : c'est un LIEU, pas une oeuvre */
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--blp-encre);
  margin: 0;
  line-height: 1.2;
}
/* Le filet court, comme les tetes de chapitre de l'accueil */
.rubrique-titre::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background-color: var(--blp-safran);
  margin: 0.8rem auto 0 auto;
}

/* Le texte de la rubrique : une mesure de livre. Il introduit, il n'ecrase pas. */
.rubrique-chapo {
  font-family: var(--blp-serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--blp-encre);
  max-width: 52rem;
  margin: 1.5rem auto 0 auto;
  padding: 0 0.75rem;
}
.rubrique-chapo img { max-width: 100%; height: auto; }

/* LES LIENS DU CHAPO DE RUBRIQUE.
   Meme cause que pour la page article : la regle safran de la section 5 vise
   "#wrapper .card-body a", or la page rubrique n'a plus de .card-body ; son
   texte vit dans .rubrique-chapo. Bootstrap reprenait donc la main (#007bff).

   POURQUOI LA PREMIERE TENTATIVE (.rubrique-chapo a) NE SUFFISAIT PAS :
   les liens de contenu SPIP portent la classe .spip_in (ou .spip_out), et
   benoitlabourdette.css declare deja "a.spip_in { width: 100% }" — specificite
   0-1-1, identique a ".rubrique-chapo a". A egalite, l'ordre de chargement
   decidait, de facon fragile.

   On cible donc les classes SPIP elles-memes, precedees du contexte
   .rubrique-chapo : specificite 0-2-1, superieure, la victoire est certaine.
   .spip_in / .spip_out sont, en prime, la vraie cible — tous les liens de
   contenu SPIP les portent, pas seulement ceux du chapo. */
.rubrique-chapo a,
.rubrique-chapo a.spip_in,
.rubrique-chapo a.spip_out {
  color: var(--blp-safran-f) !important;
  text-decoration: none;
}
.rubrique-chapo a:hover,
.rubrique-chapo a.spip_in:hover,
.rubrique-chapo a.spip_out:hover {
  color: var(--blp-encre) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}



/* Les cartes de sous-rubrique parlent en petites capitales, comme les poles
   de l'accueil : la regle existe deja en section 8 via :not(.publication-accueil).
   .rubrique-accueil n'ayant pas cette classe, elle en herite sans rien ajouter. */

/* La grille d'une page rubrique peut etre longue : les titres d'une rangee
   s'alignent par sous-grille (section 8). On garde ici un filet de securite
   pour les navigateurs anciens. */
.rubrique-accueil .pole-titre { min-height: 5.4rem; }
@media (max-width: 767px) {
  .rubrique-accueil .pole-titre { min-height: 5.1rem; }
}


/* ----- L'appareil : exports et PDF, en pied de page -----
   Des outils, pas des contenus. Discrets, ranges, a la fin. */

.rubrique-appareil {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem 1.25rem;
  font-family: var(--blp-sc);
  font-size: 0.85rem;
  margin-top: 2.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--blp-parchemin);
}
.rubrique-appareil div { margin: 0; }
.rubrique-appareil a { color: var(--blp-safran-f); text-decoration: none; }
.rubrique-appareil a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .rubrique-titre { padding-top: 1.6rem; }
  .rubrique-titre h1 { font-size: 1.45rem; }
  /* Sur mobile, le sceau reste un sceau : nettement plus gros que les
     pictogrammes des vignettes. Il accueille, il ne legende pas. */
  .rubrique-charte .rubrique-titre i.fas,
  .rubrique-titre i.fas {
    width: 5.6rem;
    height: 5.6rem;
    font-size: 2.4rem;
    margin-bottom: 1.1rem;
  }
  .rubrique-chapo { font-size: 1.02rem; }
  .rubrique-appareil { justify-content: flex-start; }
}




/* ----- La grille d'une page rubrique -----
   L'accueil montre QUATRE poles : un choix editorial, quatre portes.
   Une page rubrique est un catalogue : elle peut en aligner SIX, mais
   seulement quand l'ecran est vraiment large. En dessous, on reste a
   quatre : six vignettes sur un ecran de 1400px donnent des titres
   illisibles, empiles sur quatre ou cinq lignes.
   La classe .rubrique-charte, posee sur le conteneur de la page rubrique,
   permet de surcharger sans jamais toucher a l'accueil. */

/* Le compte tient la meme ligne de sous-grille que la date d'un article :
   la structure des deux modules est identique (titre, image, date/compte,
   texte), et la sous-grille declare grid-row: span 4. */
#wrapper .card-body .pole-accueil p.pole-compte,
.pole-accueil .pole-compte {
  font-family: var(--blp-sc);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--blp-safran-f);
  text-align: right;
  margin: 0.15rem 0 0 0;
  line-height: 1.1;
  /* La ligne existe MEME si le compte est vide. Sans cela, un p vide s'ecrase
     a zero, la ligne de sous-grille se replie, et toute la carte se disloque :
     images minuscules, titres chevauchant le texte. C'est exactement ce qui
     se produisait en six colonnes. */
  min-height: 1rem;
}
.pole-accueil .pole-compte:empty { min-height: 1rem; display: block; }

/* MEME REGLE POUR LA DATE ET LE TEXTE DES ARTICLES.
   La sous-grille exige quatre enfants (grid-row: span 4). Un p vide qui
   s'ecrase a zero replie sa ligne et decale toute la vignette : c'est ce
   qui disloquait le six colonnes. Vides, ces balises tiennent leur ligne
   sans rien montrer. */
.pole-accueil .pole-date:empty,
.pole-accueil .pole-texte:empty {
  display: block;
  min-height: 1rem;
}
.pole-accueil .pole-compte + .pole-texte { margin-top: 0.45rem; }

/* ----- LA GRILLE DE LA PAGE RUBRIQUE : celle de l'accueil, sans rien changer -----

   La page rubrique porte la classe .accueil : elle herite donc de toute la
   sous-grille de la section 8, et de ses QUATRE colonnes. Ses modules portent
   exactement les memes classes Bootstrap que ceux de l'accueil. Il n'y a donc
   RIEN a surcharger ici, et c'est tres bien ainsi : l'accueil fonctionne, la
   page rubrique fonctionnera pareil.

   (Une tentative de passer a six colonnes a echoue : la sous-grille de la
   section 8 declare "grid-template-rows: subgrid" sur les vignettes alors que
   le parent .row ne definit aucune ligne. Il n'y a donc rien a heriter, et si
   quatre colonnes tiennent, c'est par coincidence - quatre vignettes de quatre
   lignes remplissent les quatre lignes implicites d'une rangee. En six, la
   coincidence tombe. Reparer cela suppose de toucher a la section 8, donc a
   l'accueil : c'est un chantier a mener a froid, plus tard.) */

/* Les seuls reglages propres a la page rubrique : l'image tient son carre,
   et les lignes qui peuvent etre vides (date, compte) gardent leur hauteur,
   sans quoi elles se replient et decalent la vignette. */
.rubrique-charte .pole-accueil .pole-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.rubrique-charte .pole-accueil .pole-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rubrique-charte .pole-accueil .pole-compte,
.rubrique-charte .pole-accueil .pole-date {
  min-height: 1rem;
}

/* ----- Le sceau, decline dans les vignettes de sous-rubriques -----
   La rime : le grand sceau accueille la rubrique en haut de page, et les
   petits sceaux, en dessous, designent ses sous-rubriques. Un article, lui,
   porte son pictogramme NU. Le lecteur n'a plus a lire pour savoir ou il est :
   cercle = un lieu, pas de cercle = un texte.
   Version allegee : filet fin, fond creme, taille modeste. Dans une grille de
   six, un sceau plein alourdirait. */
.rubrique-accueil .pole-titre span i.fas,
.pole-sceau .pole-titre span i.fas {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.2rem;
  color: var(--blp-safran);
  background-color: var(--blp-creme);
  border: 1px solid var(--blp-safran);
  border-radius: 50%;
  margin: 0 auto 0.55rem auto;
  line-height: 1;
  box-sizing: border-box;
  transition: transform 0.25s ease;
}
/* Au survol, le sceau accompagne le mouvement de l'image */
.rubrique-accueil a:hover .pole-titre span i.fas,
.pole-sceau a:hover .pole-titre span i.fas { transform: translateY(-2px); }

@media (max-width: 767px) {
  .rubrique-accueil .pole-titre span i.fas,
  .pole-sceau .pole-titre span i.fas {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.05rem;
  }
}


/* ----- LA GRAMMAIRE DES PICTOGRAMMES -----

   Sur une page de rubrique, les articles n'ont PLUS de pictogramme.

   Pourquoi : sur l'accueil, le pictogramme qualifie l'article par sa provenance
   (il vient des Ressources, de la Creation...) - une information utile, puisque
   l'accueil melange des articles de partout. Sur une page de rubrique, cette
   information est deja donnee trois fois : par le fil d'Ariane, par le grand
   sceau en haut, par le titre. Repetee sur chaque vignette, elle ne distingue
   plus rien : elle decore, et affaiblit le signal.

   La grammaire devient sans exception :
     cercle + pictogramme  =  une rubrique  (le sceau d'ouverture, les vignettes
                                             de sous-rubriques)
     titre nu              =  un article

   Le masquage se fait ICI, par le CSS, et non dans le module : celui-ci est
   partage avec l'accueil, ou le pictogramme doit rester. Aucune regression
   possible. */
.rubrique-charte .publication-accueil .pole-titre span i.fas {
  display: none;
}
/* Le fleuron retire, le titre remonte et retrouve de l'air : on lui rend une
   respiration propre plutot que de laisser le vide qu'occupait l'icone.
   La sous-grille realigne ensuite les images de toute la rangee. */
.rubrique-charte .publication-accueil .pole-titre {
  padding-top: 0.35rem;
}


/* ----- LA PROXIMITE : le texte appartient a SON image -----

   Loi de proximite : un texte doit etre plus proche de l'element qu'il commente
   que du bloc suivant. Ici, l'addition sous l'image (marge de la date, puis
   marge, padding et filet du texte) atteignait pres de 2rem, contre 0,6rem
   au-dessus. Plus du triple : l'oeil hesitait, et ne rattachait plus le texte
   a son image avec certitude.

   On resserre le dessous, et on retire le filet : il separait le texte de son
   image alors qu'il doit l'y lier. La respiration passe SOUS le texte (dans la
   marge de la vignette), la ou elle separe reellement deux publications. */

.rubrique-charte .pole-accueil .pole-date,
.rubrique-charte .pole-accueil .pole-compte {
  margin-top: 0.15rem;
}
.rubrique-charte .pole-accueil .pole-date + .pole-texte,
.rubrique-charte .pole-accueil .pole-compte + .pole-texte,
#wrapper .card-body .rubrique-charte .pole-accueil p.pole-texte,
.rubrique-charte .pole-accueil .pole-texte {
  margin-top: 0.2rem;
  padding-top: 0;
  border-top: none;
}


/* =========================================================================
   9. LA PAGE ARTICLE : le temps de la lecture
   -------------------------------------------------------------------------
   La colonne de droite a disparu. La page suit desormais un seul mouvement :
   l'oeuvre, une coupure, le prolongement, l'appareil.

   Le conteneur porte "accueil article-charte" : "accueil" dissout les cartes
   (section 8), "article-charte" porte ce qui suit. Meme convention que la
   page rubrique.
   ========================================================================= */

/* ----- 9.1 L'ouverture -----
   GRAMMAIRE : un article porte son pictogramme NU. Pas de cercle : le cercle
   dit "un lieu" (le sceau d'une rubrique), et un article n'en est pas un.
   Le titre reste en serif, non en petites capitales, pour la meme raison :
   les petites capitales nomment les LIEUX, le serif porte les OEUVRES. */
.article-charte .article-ouverture {
  text-align: center;
  padding: 2.4rem 0 0 0;
}
/* Le pictogramme d'ouverture.
   PIEGE (le meme qu'a la section du sceau, ligne 782) : Font Awesome impose
   display:inline-block sur .fas avec un poids de selecteur superieur. Sans
   !important, l'icone reste en ligne — et margin:auto n'a aucun effet sur un
   element en ligne : elle se collait a gauche au lieu de se centrer. */
.article-charte .article-ouverture > i.fas {
  display: block !important;
  width: 100%;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--blp-safran);
  margin: 0 0 1rem 0;
}
.article-charte .article-ouverture h1 {
  font-family: var(--blp-serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blp-encre);
  max-width: 40rem;
  margin: 0 auto;
}
.article-charte .article-soustitre {
  font-family: var(--blp-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--blp-encre-2);
  max-width: 40rem;
  margin: 0.7rem auto 0 auto;
}
.article-charte .article-ouverture::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background-color: var(--blp-safran);
  margin: 1.1rem auto 0 auto;
}

/* La ligne de service : date, auteur, duree. Elle informe, elle ne pese pas. */
.article-charte .article-service {
  font-family: var(--blp-sc);
  font-size: 0.85rem;
  color: var(--blp-encre-2);
  text-align: center;
  margin-top: 0.9rem;
}
.article-charte .article-service span + span::before { content: " · "; }

/* ----- 9.2 Emporter : le bouton PDF -----
   Il est COLLE a la duree de lecture, en haut. Raison : c'est en lisant
   "7 min" que le lecteur decide de partir avec le texte. La duree declenche
   le desir ; le bouton doit etre la, a cet instant, et pas 4000 px plus bas.
   Celui du pied de page n'est pas un doublon : c'est le meme objet pour un
   AUTRE geste (conserver apres avoir lu, plutot qu'emporter avant de lire).
   La forme ronde n'est pas gratuite : une pastille, ca se met dans la poche. */
.article-charte .emporter { text-align: center; margin-top: 1.1rem; }
.article-charte .bouton-pdf,
.article-charte .emporter-bas .bouton-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--blp-sc);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--blp-safran-f);
  background-color: var(--blp-creme);
  border: 1px solid var(--blp-safran);
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.article-charte .bouton-pdf:hover {
  background-color: var(--blp-safran);
  color: #fff;
  text-decoration: none;
}

/* ----- 9.3 Le media : pleine mesure, sans carte ----- */
.article-charte .article-media {
  max-width: 62rem;
  margin: 2rem auto 0 auto;
}
.article-charte .article-media img,
.article-charte .article-media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(30, 43, 58, 0.16);
}
.article-charte .article-media-legende {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--blp-encre-2);
  text-align: center;
  margin: 0.5rem 0 0 0;
}

/* ----- 9.4 Le texte : la mesure de livre -----
   52rem : exactement la mesure de .rubrique-chapo. Le site n'a qu'une seule
   mesure de lecture, et c'est celle-la. */
.article-charte .article-texte {
  max-width: 52rem;
  margin: 2.2rem auto 0 auto;
  padding: 0 0.75rem;
  font-family: var(--blp-serif);
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--blp-encre);
}
.article-charte .article-texte img { max-width: 100%; height: auto; }
.article-charte .article-texte h2,
.article-charte .article-texte h3 {
  font-family: var(--blp-sc);
  margin: 2.2rem 0 0.8rem 0;
}

/* Le post-scriptum : un APRES-COUP, pas une boite. Un filet, une encre plus
   claire, un corps legerement moindre : cela suffit a dire son statut. */
.article-charte .article-ps {
  max-width: 52rem;
  margin: 2.4rem auto 0 auto;
  padding: 1.4rem 0.75rem 0 0.75rem;
  border-top: 1px solid var(--blp-parchemin);
  font-family: var(--blp-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--blp-encre-2);
}
.article-charte .article-ps img { max-width: 100%; height: auto; }

/* ----- 9.5 Les documents joints : encore l'article, donc la meme mesure ----- */
.article-charte .article-documents {
  max-width: 52rem;
  margin: 2rem auto 0 auto;
  padding: 0 0.75rem;
}
.article-charte .article-documents ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-charte .article-documents li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--blp-parchemin);
}
.article-charte .article-documents li:first-child {
  border-top: 1px solid var(--blp-parchemin);
}
.article-charte .article-documents i.fas {
  color: var(--blp-safran);
  width: 1rem;
}
.article-charte .article-documents a {
  color: var(--blp-encre);
  text-decoration: none;
}
.article-charte .article-documents a:hover { text-decoration: underline; }
.article-charte .article-documents .poids {
  margin-left: auto;
  font-family: var(--blp-sc);
  font-size: 0.8rem;
  color: var(--blp-encre-2);
  text-transform: uppercase;
}

/* ----- 9.5bis LES LIENS DU TEXTE -----

   POURQUOI ILS ETAIENT BLEUS : la regle qui colore les liens en safran
   (section 5) vise "#wrapper .card-body a". Elle cible .card-body. Or la
   nouvelle page article n'a plus de .card-body : le texte vit dans
   .article-texte. La regle ne l'atteignait donc plus, et Bootstrap reprenait
   la main avec son bleu par defaut (#007bff). Ce bleu n'etait pas un choix :
   c'etait un defaut qui reapparaissait la ou la charte ne passait plus.

   Le safran fonce (--blp-safran-f) est la couleur des liens du site : fil
   d'Ariane, sidebar, appareil, pagination. Le texte de l'article la reprend.

   PORTEE : uniquement les liens de TEXTE. Les pastilles PDF, les vignettes,
   les jetons de mots-cles et le bandeau de retour sont aussi des liens, mais
   ce ne sont pas des liens de texte : ils ont leur propre traitement, et les
   exclusions ci-dessous les preservent. */
.article-charte .article-texte a,
.article-charte .article-ps a,
.article-charte .article-media-legende a {
  color: var(--blp-safran-f);
  text-decoration: none;
}
/* Souligne au SURVOL seulement : sans soulignement permanent (trop bruyant
   dans un texte suivi), mais un lien doit rester reperable autrement que par
   la seule couleur — safran et encre se distinguent mal pour certains yeux. */
.article-charte .article-texte a:hover,
.article-charte .article-ps a:hover,
.article-charte .article-media-legende a:hover {
  color: var(--blp-encre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ----- 9.6 Le portfolio : c'est du CONTENU -----
   Il a donc droit a la pleine largeur et a un titre de chapitre, comme les
   sections de l'accueil. Trois colonnes sur grand ecran, deux sur telephone. */
.article-charte .article-chapitre {
  text-align: center;
  font-family: var(--blp-sc);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blp-encre);
  margin: 3.2rem 0 0 0;
}
.article-charte .article-chapitre::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--blp-safran);
  margin: 0.6rem auto 0 auto;
}
.article-charte .portfolio-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.4rem;
}
.article-charte .portfolio-grille img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(30, 43, 58, 0.14);
  transition: transform 0.25s ease;
}
.article-charte .portfolio-grille a:hover img { transform: translateY(-3px); }

/* ----- 9.7 LA COUPURE -----
   Elle a ete SUPPRIMEE. Le titre "Voir aussi", avec son pictogramme +, dit
   deja le passage a autre chose : le fleuron faisait doublon avec ce qu'il
   annoncait. On garde la respiration (la marge), on retire le signe.
   La regle .article-coupure ne sert plus a rien, mais le <hr /> est retire du
   squelette : rien a styler. */

/* ----- 9.8 Le prolongement : la grille des vignettes -----
   On REEMPLOIE .pole-accueil, telle quelle. Rien de nouveau n'est invente :
   les vignettes de "Voir aussi" sont celles de l'accueil et des rubriques.
   La classe .publication-accueil masque leur pictogramme (section grammaire),
   ce qui est correct ici : le fil d'Ariane, le titre et le bandeau de retour
   disent deja d'ou l'on vient.

   LA MARGE (elle remplace le filet supprime) : elle est posee SUR les blocs
   eux-memes, jamais sur un div qui les envelopperait. Raison : la regle qui
   dissout les cartes (section 8) vise ".accueil > .card", en ENFANT DIRECT.
   Un conteneur intermediaire romprait ce lien de parente et les cartes du bas
   de page redeviendraient BLANCHES au lieu de se fondre dans le papier.

   "Voir aussi" peut manquer (article sans connexes) : le bandeau de retour,
   lui, est toujours la. Les deux portent donc la marge — celle du bandeau est
   definie plus bas, dans sa propre regle, pour ne pas etre ecrasee par elle. */
.article-charte .article-prolongement { margin-top: 3.5rem; }

.article-charte .publication-accueil .pole-titre span i.fas { display: none; }
.article-charte .publication-accueil .pole-titre { padding-top: 0.35rem; }

/* Le bandeau de retour a la rubrique. Il porte le SCEAU (cercle +
   pictogramme), parce qu'il designe un LIEU. La grammaire est tenue. */
.article-charte .retour-rubrique {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 52rem;
  margin: 1.6rem auto 0 auto;
  padding: 1.2rem 1.4rem;
  background-color: var(--blp-creme);
  border: 1px solid var(--blp-parchemin);
  border-radius: 4px;
  text-decoration: none;
  color: var(--blp-encre);
  transition: border-color 0.2s ease;
}
/* Note : si l'article n'a aucun connexe, le bloc "Voir aussi" est absent et le
   bandeau remonte de 1,9rem. Le cas est rare et l'ecart discret ; on prefere
   l'accepter plutot que d'introduire un selecteur de voisinage (~, +, :first-)
   dont le comportement dependrait de la presence d'un portfolio ou d'un PS. */
.article-charte .retour-rubrique:hover {
  border-color: var(--blp-safran);
  text-decoration: none;
}
.article-charte .retour-sceau {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.5rem;
  color: var(--blp-safran);
  background-color: #fff;
  border: 1px solid var(--blp-safran);
  border-radius: 50%;
  box-sizing: border-box;
}
.article-charte .retour-corps { display: block; }
.article-charte .retour-sur {
  display: block;
  font-family: var(--blp-sc);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--blp-encre-2);
}
.article-charte .retour-titre {
  display: block;
  font-family: var(--blp-sc);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
.article-charte .retour-compte {
  display: block;
  font-family: var(--blp-serif);
  font-size: 0.92rem;
  color: var(--blp-encre-2);
}
.article-charte .retour-fleche {
  margin-left: auto;
  color: var(--blp-safran);
}

/* ----- 9.9 Les mots-cles : UNE seule famille -----
   L'ancien bloc en comptait deux (une grille d'images pour les mots pourvus
   d'un logo, un nuage de texte pour les autres). Deux formes, deux poids,
   deux endroits, pour une seule et meme chose : c'est cela qui "faisait trop".

   Ici, un mot-cle est un JETON, toujours le meme. Celui qui a une image la
   porte ; celui qui n'en a pas porte son initiale, dans le MEME rond.
   L'image cesse d'etre un ornement : elle devient une VARIANTE du jeton.

   La grammaire s'enrichit sans se contredire :
     cercle + PICTOGRAMME = un lieu    (le sceau d'une rubrique)
     carre  + PHOTO       = une oeuvre (la vignette d'un article)
     rond   + PHOTO       = un theme   (le jeton d'un mot-cle) */
.article-charte .tags-bande {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 1.4rem;
  max-width: 52rem;
  margin: 0 auto;
}
.article-charte .tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5.2rem;
  text-decoration: none;
  color: var(--blp-encre);
}
.article-charte .tag-rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--blp-parchemin);
  border: 1px solid var(--blp-parchemin);
  box-sizing: border-box;
  transition: border-color 0.2s ease, transform 0.25s ease;
}
.article-charte .tag-rond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La variante sans image : l'initiale, dans le meme rond. */
.article-charte .tag-rond.tag-lettre {
  background-color: var(--blp-creme);
  color: var(--blp-safran-f);
  font-family: var(--blp-sc);
  font-size: 1.35rem;
  font-weight: 700;
}
.article-charte .tag-nom {
  font-family: var(--blp-sc);
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
  margin-top: 0.4rem;
  color: var(--blp-encre-2);
}
.article-charte .tag:hover .tag-rond {
  border-color: var(--blp-safran);
  transform: translateY(-2px);
}
.article-charte .tag:hover .tag-nom { color: var(--blp-encre); }

/* ----- 9.10 L'appareil -----
   Deux statuts DIFFERENTS, donc deux traitements. Le PDF s'adresse a tout le
   monde : forme pleine, c'est une offre. Les exports Word et Markdown ne
   s'affichent que pour les administrateurs : liens nus, c'est de l'outillage.
   Les aligner sur une meme ligne du meme gris laissait croire a un seul lot. */
.article-charte .emporter-bas {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--blp-parchemin);
}
.article-charte .emporter-bas p {
  font-family: var(--blp-sc);
  font-size: 0.9rem;
  color: var(--blp-encre-2);
  margin: 0 0 0.8rem 0;
}
.article-charte .article-appareil {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem 1.25rem;
  font-family: var(--blp-sc);
  font-size: 0.8rem;
  margin-top: 2rem;
  padding-top: 0.7rem;
  border-top: 1px dotted var(--blp-parchemin);
  opacity: 0.75;
}
.article-charte .article-appareil a {
  color: var(--blp-encre-2);
  text-decoration: none;
}
.article-charte .article-appareil a:hover {
  color: var(--blp-safran-f);
  text-decoration: underline;
}

/* ----- 9.11 Telephone : 70 % des visites -----
   Le dessin a ete pense ICI d'abord. Une seule colonne : il n'y a rien a
   reorganiser, rien qui disparaisse, rien qui passe sous la ligne de flottaison
   comme le faisait l'ancienne colonne de droite. */
@media (max-width: 767px) {
  .article-charte .article-ouverture { padding-top: 1.6rem; }
  .article-charte .article-ouverture h1 { font-size: 1.5rem; }
  .article-charte .article-ouverture > i.fas { font-size: 1.8rem; }
  .article-charte .article-soustitre { font-size: 1rem; }
  .article-charte .article-texte { font-size: 1.06rem; padding: 0 0.5rem; }
  .article-charte .portfolio-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .article-charte .retour-rubrique { gap: 0.9rem; padding: 1rem; }
  .article-charte .retour-sceau {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
  }
  .article-charte .tags-bande { gap: 0.9rem 0.8rem; }
  .article-charte .article-appareil { justify-content: flex-start; }
}


/* =========================================================================
   10. TOUTES LES PUBLICATIONS
   -------------------------------------------------------------------------
   La page listait les articles dans un tableau a trois colonnes, en dehors de
   la charte. Elle reprend desormais la grille de vignettes de l'accueil et des
   rubriques : le module sommaire_module_affichage_un_article y est reemploye
   tel quel, sans qu'aucune vignette nouvelle soit ecrite.

   Ce qui est propre a cette page : c'est la SEULE qui melange toutes les
   rubriques. La PROVENANCE de chaque article y devient donc une information
   necessaire — ailleurs, elle est evidente et resterait muette.
   ========================================================================= */

/* La provenance, logee dans la ligne de date (contrat des quatre enfants).
   Petites capitales safran : c'est de l'appareil de reperage, le meme registre
   que le fil d'Ariane, pas du contenu. La date reste a droite.

   PIEGE : sans "min-width: 0" sur le CONTENEUR flex, un nom de rubrique long
   ("Sites web, plateformes video, espaces numeriques de cooperation") refuse de
   se reduire et pousse la carte hors de sa colonne — toute la grille debordait
   a droite. Un element flex ne descend pas sous sa taille de contenu tant qu'on
   ne l'y autorise pas explicitement. */
.publications-charte .pole-accueil .pole-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  text-align: left;
}
.publications-charte .pole-provenance {
  font-family: var(--blp-sc);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--blp-safran-f);
  text-align: left;
  line-height: 1.2;
  /* Le nom trop long est coupe par des points de suspension plutot que de
     deborder : il reste lisible, la carte garde sa largeur. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.publications-charte .pole-jour {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* LE PICTOGRAMME EST RETABLI SUR CETTE PAGE.
   La classe .publication-accueil le masque sur la page article (grammaire : y
   rappeler la rubrique n'apprend rien). Ici c'est l'inverse : la page melange
   tous les secteurs, et le pictogramme distingue d'un coup d'oeil un film d'un
   texte ou d'un morceau de musique.

   ATTENTION — NE PAS TOUCHER A .pole-titre ICI.
   Une premiere version ajoutait "padding-top: 0" sur ce selecteur : plus
   specifique que la reserve .publication-accueil .pole-titre {min-height:5.7rem},
   elle l'ecrasait. Les titres reprenaient leur hauteur naturelle, et les images
   ne s'alignaient plus d'une carte a l'autre (un titre d'une ligne poussait son
   image haut, un titre de trois lignes la poussait bas). La reserve, et la
   sous-grille qui la relaie, doivent rester intactes. On ne stylise que le
   pictogramme lui-meme, rien d'autre. */
.publications-charte .publication-accueil .pole-titre span i.fas {
  display: block !important;
  margin-bottom: 0.35rem;
  color: var(--blp-safran);
}

/* La pagination : de l'appareil, donc discrete et rangee.

   SPIP emet du balisage Bootstrap (ul.pagination > li.page-item > a.page-link).
   Mes premieres regles visaient ".publications-pagination a" et ".on" : ces
   classes n'existent pas ici, elles ne faisaient donc RIEN. Ce qu'on voyait
   etait du Bootstrap pur — des boutons blancs en relief, avec cadre et ombre.

   Or ce relief dit "objet cliquable en volume", alors que toute la charte dit
   l'inverse : pas de boite, c'est la COULEUR qui porte l'action. On dissout
   donc les cadres, comme on a dissout les cartes, et on marque la page courante
   comme le dernier maillon du fil d'Ariane : par le POIDS et l'ENCRE. */
.publications-charte .publications-pagination {
  text-align: center;
  padding: 0.4rem 0 1.2rem 0;
}
/* La pagination du BAS se detache de la grille par un filet : elle clot la
   page, elle n'en fait pas partie. */
.publications-charte .row + .publications-pagination {
  padding: 1.8rem 0 0.4rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--blp-parchemin);
}
.publications-charte .publications-pagination .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}
/* On dissout le bouton : ni fond, ni cadre, ni ombre, ni arrondi. */
.publications-charte .publications-pagination .page-item .page-link {
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-family: var(--blp-sc);
  font-size: 0.95rem;
  color: var(--blp-safran-f);
  padding: 0.25rem 0.6rem;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.publications-charte .publications-pagination .page-item .page-link:hover {
  background-color: transparent;
  color: var(--blp-encre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* La page courante : encre et gras, comme le maillon actif du fil d'Ariane.
   Un filet safran dessous, pour la poser sans l'enfermer. */
.publications-charte .publications-pagination .page-item.active .page-link {
  background-color: transparent;
  border: none;
  color: var(--blp-encre);
  font-weight: 700;
  border-bottom: 2px solid var(--blp-safran);
  cursor: default;
}
/* Les fleches et les points de suspension : plus discrets encore. */
.publications-charte .publications-pagination .page-item.disabled .page-link {
  background-color: transparent;
  border: none;
  color: #b9b2a2;
}


/* =========================================================================
   11. RUBRIQUE DEPLIABLE (composition rubrique-depliable)
   -------------------------------------------------------------------------
   Une rubrique autonome : tous ses articles sur une page, chacun depliable.
   Ferme, l'article montre visuel + titre + sous-titre. Ouvert, son texte
   complet se revele sur place. On ne quitte pas la page.

   Scope : .rubrique-depliable-page, pose sur le conteneur de la composition,
   pour n'affecter qu'elle.
   ========================================================================= */

.rubrique-depliable-page .depliables {
  max-width: 60rem;
  margin: 2rem auto 0 auto;
}

/* ----- LE CHAPO REPLIABLE -----
   Sur cette page, tout est ferme dessous : un chapo long repoussait le premier
   article sous la ligne de flottaison. On plafonne donc sa hauteur et on offre
   un "Lire la suite". Tout en CSS, sans JavaScript : une case a cocher cachee
   porte l'etat, un label la bascule. Le texte n'est jamais coupe (le HTML SPIP
   reste entier) ; c'est seulement un plafond de hauteur qui se leve.

   Si le chapo est court, le plafond ne joue pas et le fondu reste discret ; on
   peut cliquer "Lire la suite" sans effet visible, ce qui est sans gravite. */
.rubrique-depliable-page .chapo-repliable {
  position: relative;
  max-width: 52rem;
  margin: 1.5rem auto 0 auto;
}
/* La case a cocher, invisible : elle ne sert qu'a porter l'etat ouvert/ferme */
.rubrique-depliable-page .chapo-toggle {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
/* Etat FERME : le chapo est plafonne, avec un fondu vers le bas */
.rubrique-depliable-page .chapo-repliable .rubrique-chapo {
  margin: 0;
  max-height: 7rem;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.rubrique-depliable-page .chapo-repliable::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(7rem - 2.5rem);
  height: 2.5rem;
  background: linear-gradient(to bottom, rgba(246,241,231,0), var(--blp-papier));
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Le bouton "Lire la suite / Replier" */
.rubrique-depliable-page .chapo-plus {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
  font-family: var(--blp-sc);
  font-size: 0.9rem;
  color: var(--blp-safran-f);
  cursor: pointer;
  user-select: none;
}
.rubrique-depliable-page .chapo-plus:hover { color: var(--blp-encre); }
.rubrique-depliable-page .chapo-plus-moins { display: none; }

/* Etat OUVERT : la case cochee leve le plafond, efface le fondu, inverse le label */
.rubrique-depliable-page .chapo-toggle:checked ~ .rubrique-chapo {
  max-height: 200rem;   /* grand plafond : ne bride aucun texte reel */
}
.rubrique-depliable-page .chapo-toggle:checked ~ .chapo-plus .chapo-plus-plus { display: none; }
.rubrique-depliable-page .chapo-toggle:checked ~ .chapo-plus .chapo-plus-moins { display: inline; }
/* Le fondu disparait quand c'est ouvert. Le ::before est sur le parent, on le
   cible via l'etat de la case grace a :has (navigateurs recents). Repli sur
   pas de fondu si :has n'est pas supporte : sans gravite. */
.rubrique-depliable-page .chapo-repliable:has(.chapo-toggle:checked)::before {
  opacity: 0;
}

.rubrique-depliable-page .art-depliable {
  border: 1px solid var(--blp-parchemin);
  border-radius: 6px;
  background-color: var(--blp-creme);
  margin-bottom: 1.1rem;
  overflow: hidden;
}

/* La ligne fermee : visuel | titre+sous-titre | chevron */
.rubrique-depliable-page .art-depliable > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem;
  transition: background-color 0.15s ease;
}
.rubrique-depliable-page .art-depliable > summary::-webkit-details-marker {
  display: none;
}
.rubrique-depliable-page .art-depliable > summary:hover {
  background-color: #fff;
}

/* LE VISUEL : le logo de l'article, carre */
.rubrique-depliable-page .art-visuel {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--blp-parchemin);
  box-shadow: 0 2px 8px rgba(30, 43, 58, 0.14);
}
.rubrique-depliable-page .art-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rubrique-depliable-page .art-corps { min-width: 0; }

.rubrique-depliable-page .art-titre {
  display: block;
  font-family: var(--blp-sc);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.18;
  color: var(--blp-encre);
}
/* LE SOUS-TITRE, mis en valeur : italique, sous le titre, bien lisible */
.rubrique-depliable-page .art-soustitre {
  display: block;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--blp-encre-2);
  margin-top: 0.3rem;
}

.rubrique-depliable-page .art-chevron {
  align-self: center;
  color: var(--blp-safran);
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.rubrique-depliable-page .art-depliable[open] .art-chevron {
  transform: rotate(90deg);
}

/* LE TEXTE COMPLET, deplie : une mesure de lecture, sur fond blanc */
.rubrique-depliable-page .art-detail {
  padding: 0 1.4rem 1.6rem 1.4rem;
  border-top: 1px solid var(--blp-parchemin);
  background-color: #fff;
}
.rubrique-depliable-page .art-detail-inner {
  max-width: 44rem;
  margin: 0 auto;
  padding-top: 1.2rem;
  font-family: var(--blp-serif);
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--blp-encre);
}
.rubrique-depliable-page .art-detail-inner p { margin: 0 0 1.1rem 0; }
.rubrique-depliable-page .art-detail-inner h2,
.rubrique-depliable-page .art-detail-inner h3 {
  font-family: var(--blp-sc);
  margin: 1.8rem 0 0.7rem 0;
}
.rubrique-depliable-page .art-detail-inner img { max-width: 100%; height: auto; }
.rubrique-depliable-page .art-detail-inner a { color: var(--blp-safran-f); text-decoration: none; }
.rubrique-depliable-page .art-detail-inner a:hover { color: var(--blp-encre); text-decoration: underline; }
.rubrique-depliable-page .art-ps {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--blp-parchemin);
  color: var(--blp-encre-2);
  font-size: 1rem;
}

/* Telephone : le chevron passe sous le titre, le visuel retrecit */
@media (max-width: 600px) {
  .rubrique-depliable-page .art-depliable > summary {
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
  }
  .rubrique-depliable-page .art-chevron {
    grid-column: 2;
    justify-self: end;
    margin-top: -1.4rem;
  }
  .rubrique-depliable-page .art-visuel { width: 72px; height: 72px; }
  .rubrique-depliable-page .art-titre { font-size: 1.15rem; }
  .rubrique-depliable-page .art-soustitre { font-size: 1rem; }
  .rubrique-depliable-page .art-detail { padding: 0 1rem 1.2rem 1rem; }
}