/* =============================================================================
   COMPOSANTS DU SITE PUBLIC DE LA PROVINCE — seconde feuille, chargée APRÈS
   assets/css/site.css.
   -----------------------------------------------------------------------------
   RÔLE. site.css porte la CHARTE et l'HABILLAGE (couleurs, polices, barre de
   menu, bandeau de tête, pied de page, accueil, pages d'apostolat), repris
   d'icrss.org. Ce fichier-ci porte les COMPOSANTS propres à la Province :
   la grille du page builder maison, ses blocs, les tuiles des écoles, les voies
   de soutien et les trois formulaires publics (dons, offrandes de Messes, legs).

   CE QUI A ÉTÉ RETIRÉ LE 01/08/2026, lors de la reprise de l'apparence
   d'icrss.org, et pourquoi — 233 lignes en tout :
     - les 131 premières lignes, qui étaient des RUSTINES POSÉES SUR LE THÈME
       JOOMLA : rétablissement des règles du bandeau T4, neutralisation du
       dégradé que le thème posait sur tout <button>, fermeture des flottants
       que justitia-custom.css laissait ouverts, débordement des sections hors
       du .container de Bootstrap, réglages du grand visuel #t4-sideshow. Le
       thème est parti : elles ne visaient plus rien ;
     - la carte des apostolats et le bloc « chanoines », RECOMPOSÉS dans
       site.css (décision de Jean : « tout recomposé »). Les laisser ici les
       aurait fait gagner, ce fichier étant chargé en second.

   ⚠ LA CHARTE N'EST PLUS REDÉCLARÉE ICI. Les formulaires publics portaient leur
   propre bloc de variables (--navy, --bleu, --gris…) faute de :root sur ce
   site, qui héritait alors du thème. Le :root existe désormais, dans site.css.
   Les valeurs différaient d'ailleurs légèrement (--navy valait #2b3446 ici et
   #2b3550 là) : les formulaires suivent maintenant la charte exacte.

   ⚠ ÉCRIT EN « MOBILE D'ABORD » EN FIN DE FEUILLE. Les blocs @media (max-width)
   de ce fichier sont AU MILIEU : une règle posée après eux les écrase sur
   téléphone sans qu'on s'en aperçoive. Toute règle ajoutée en fin de fichier
   doit donc décrire le TÉLÉPHONE, et s'élargir ensuite par un @media
   (min-width) écrit après elle.
   ============================================================================= */

/* ==========================================================================
   Blocs de remplacement des composants du page builder de l'ancien site
   (30/07). Ni sa CSS ni son JavaScript ne sont repris ici : ses fiches
   « person », carrousels et accordéons s'affichaient à plat. Ces classes
   servent les blocs réécrits par tools/fix-public-pages.php.
   ========================================================================== */

/* --- Couvertures cliquables (revues, bulletins) --------------------------- */
.pf-covers { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin: 1.6rem 0 2.2rem; }
.pf-covers--left { justify-content: flex-start; }
.pf-cover-item { margin: 0; width: 232px; max-width: 100%; }
.pf-cover {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  /* « Très légères ombres portées » (demande Jean 30/07). */
  box-shadow: 0 2px 9px rgba(20, 26, 40, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pf-cover img { display: block; width: 100%; height: auto; }
.pf-cover:hover, .pf-cover:focus-visible { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(20, 26, 40, .25); }
.pf-cover__veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; color: #fff; background: rgba(20, 26, 40, .58);
  opacity: 0; transition: opacity .25s ease;
}
.pf-cover:hover .pf-cover__veil, .pf-cover:focus-visible .pf-cover__veil { opacity: 1; }
/* Sans souris, le survol n'existe pas : le voile reste visible, sinon l'appel
   à l'action serait invisible sur téléphone et tablette. */
@media (hover: none) { .pf-cover__veil { opacity: 1; background: rgba(20, 26, 40, .38); } }
.pf-cover__cta { font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .65); padding-bottom: .12rem; }
/* ⚠ Remise à zéro obligatoire : le thème pose sur TOUT figcaption un fond
   sombre, des petites capitales et un positionnement absolu (t4-bundle.css et
   justitia-custom.css). Sans ces annulations, la légende venait se coller en
   pastille noire SUR le bas de la couverture au lieu de se ranger dessous
   (constaté à la capture du 30/07). */
.pf-cover__label {
  display: block; position: static; text-align: center; margin-top: .6rem; line-height: 1.35;
  background: none; color: inherit; padding: 0; text-transform: none;
  letter-spacing: normal; font-size: 1rem; text-shadow: none; width: auto;
}
.pf-cover__strong { display: block; font-family: 'Goudy Modern', Georgia, serif; font-size: 1.12rem; }
.pf-cover__sub { display: block; color: #646E86; font-size: .87rem; margin-top: .1rem; }

/* --- Panneau d'engagements (Confrérie de la Consolation) ------------------ */
.pf-pledges {
  position: relative; border-radius: 12px; overflow: hidden; margin: 1.4rem 0 2rem;
  background: #171d2c center / cover no-repeat; box-shadow: 0 2px 9px rgba(20, 26, 40, .16);
}
/* Voile : le texte de ces engagements est BLANC dans le contenu d'origine (il
   était prévu sur l'image sombre du carrousel). Sans ce voile il disparaîtrait. */
.pf-pledges::before { content: ""; position: absolute; inset: 0; background: rgba(15, 20, 32, .70); }
.pf-pledges__inner { position: relative; padding: 1.7rem 1.9rem; }
.pf-pledges ol { list-style: none; counter-reset: pf-pledge; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.pf-pledges li { counter-increment: pf-pledge; position: relative; padding-left: 3rem; }
.pf-pledges li::before {
  content: counter(pf-pledge); position: absolute; left: 0; top: .1rem;
  width: 2rem; height: 2rem; border-radius: 50%; background: #2b3446; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.pf-pledges h3 { color: #fff; font-size: 1.16rem; margin: 0 0 .25rem; }
.pf-pledges p  { color: rgba(255, 255, 255, .88); margin: 0; font-size: .96rem; }
.pf-pledges p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .pf-pledges__inner { padding: 1.2rem 1.1rem; } .pf-pledges li { padding-left: 2.6rem; } }

/* ⚠ LA SURCHARGE DE `button.confrerie` A ÉTÉ RETIRÉE LE 02/08, et c'est elle qui
   causait le défaut signalé par Jean (« le bouton Lire la lettre de présentation
   n'a pas de mise en forme »).

   Elle datait du 30/07, AVANT la refonte : le thème Joomla habillait ces deux
   boutons en gris foncé à texte doré, et il ne s'agissait alors que de remplacer
   le doré par le bleu nuit du site. Elle ne posait donc QUE la couleur de fond
   et celle du texte — le rembourrage, l'arrondi, la police et la taille venaient
   du thème.

   Le thème est parti le 01/08. Il ne restait qu'un rectangle bleu sans forme, et
   son `background-image: none` empêchait par-dessus le marché tout rattrapage de
   poser un dégradé. Ces boutons sont désormais habillés comme les autres boutons
   du contenu, par la règle unique plus bas dans ce fichier, qui leur donne tout.

   Le `::before` neutralisé visait un pseudo-élément du thème (une icône) qui
   n'existe plus : sans thème, il n'y a plus rien à neutraliser. */

/* --- Extraits de formules (Société du Sacré-Cœur) ------------------------- */
/* Ce texte était en blanc sur fond blanc, donc invisible : il était prévu sur
   une image sombre qui n'existe plus. Présenté ici comme une citation. */
.pf-formules {
  border-left: 3px solid #2b3446; background: #f7f9fc; border-radius: 0 10px 10px 0;
  padding: 1.2rem 1.4rem; margin: 1.6rem 0 2rem;
}
.pf-formules h3 { font-size: 1.1rem; margin: 1.3rem 0 .5rem; color: #2b3446; }
.pf-formules h3:first-child { margin-top: 0; }
.pf-formules p { margin: 0 0 .7rem; text-align: justify; }
.pf-formules p:last-child { margin-bottom: 0; }

/* --- Repli (statuts, textes longs) : <details> natif, sans JavaScript ----- */
.pf-accordion { border: 1px solid #e3e6ec; border-radius: 9px; background: #fbfcfd; margin: 1.6rem 0; }
.pf-accordion > summary {
  cursor: pointer; list-style: none; padding: .95rem 1.15rem; display: flex; align-items: center;
  font-family: 'Goudy Modern', Georgia, serif; font-size: 1.28rem; color: #2b3446;
}
.pf-accordion > summary::-webkit-details-marker { display: none; }   /* Safari */
/* Le chevron qui manquait (retour Jean 30/07), en CSS pure : il pivote à
   l'ouverture, donc il dit toujours l'état réel du bloc. */
.pf-accordion > summary::after {
  content: ""; margin-left: auto; width: .6rem; height: .6rem;
  border-right: 2px solid #2b3446; border-bottom: 2px solid #2b3446;
  transform: rotate(45deg) translate(-.15rem, -.15rem); transition: transform .2s ease;
}
.pf-accordion[open] > summary::after { transform: rotate(-135deg) translate(-.15rem, -.15rem); }
.pf-accordion > summary:hover { background: #f4f6fa; border-radius: 8px; }
.pf-accordion__body { padding: .2rem 1.15rem 1.15rem; }
.pf-accordion__body h4 { font-size: 1.02rem; margin: 1.1rem 0 .25rem; color: #2b3446; }
.pf-accordion__body h4:first-child { margin-top: .3rem; }
.pf-accordion__body p { margin: 0 0 .7rem; text-align: justify; }

/* --- Tuiles des écoles (page « Écoles ») ---------------------------------- */
/* Grille qui se centre d'elle-même et s'adapte au nombre d'écoles : les tuiles
   vivaient auparavant dans trois colonnes de 3/12, donc calées à gauche avec un
   quart de page vide à droite (retour Jean 30/07). */
.pf-schools {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 240px));
  justify-content: center; gap: 1.8rem 1.6rem; margin: 1.6rem 0 2.2rem;
}
.pf-school {
  background: #fff; border: 1px solid #e7e9ef; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 9px rgba(20, 26, 40, .10);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pf-school:hover { transform: translateY(-3px); box-shadow: 0 7px 18px rgba(20, 26, 40, .17); }
/* `contain` et non `cover` : ce sont des blasons et des logos, les rogner les
   mutilerait. Hauteur fixe pour que toutes les tuiles s'alignent. */
.pf-school__logo { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pf-school__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Site de l'école et réseaux : au survol, par-dessus le logo, comme l'ancien site. */
.pf-school__links {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; background: rgba(20, 26, 40, .62); opacity: 0; transition: opacity .2s ease; padding: .8rem;
}
.pf-school:hover .pf-school__links, .pf-school__links:focus-within { opacity: 1; }
.pf-school__links a { color: #fff; font-size: .92rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); }
.pf-school__links a:hover { color: #fff; border-bottom-color: #fff; }
@media (hover: none) { .pf-school__links { position: static; opacity: 1; background: none; padding: 0 0 .6rem; }
  .pf-school__links a { color: #2b3446; border-bottom-color: #c3cddb; } }
/* Le nom DANS la tuile (demande Jean), sur un bandeau qui la ferme. */
.pf-school__info { margin-top: auto; padding: .8rem .9rem 1rem; text-align: center; border-top: 1px solid #eef1f6; background: #fbfcfd; }
.pf-school__name { display: block; font-family: 'Goudy Modern', Georgia, serif; font-size: 1.1rem; line-height: 1.25; color: #2b3446; }
.pf-school__sub { display: block; color: #646E86; font-size: .84rem; line-height: 1.35; margin-top: .28rem; }

/* --- Tuiles (pèlerinages, et tout contenu en cartes) ---------------------- */
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; align-items: start; margin: 1.4rem 0 2rem; }
.pf-tile { border: 1px solid #e7e9ef; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 9px rgba(20, 26, 40, .12); }
.pf-tile__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pf-tile__body { padding: 1.15rem 1.35rem 1.4rem; }
.pf-tile__body > :first-child { margin-top: 0; }
.pf-tile__body > :last-child { margin-bottom: 0; }
.pf-tile h3 { font-size: 1.32rem; margin-bottom: .7rem; line-height: 1.3; }
.pf-btn {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; text-decoration: none;
  background: #2b3446; color: #fff; font-size: .95rem; transition: background .2s ease;
}
.pf-btn:hover, .pf-btn:focus-visible { background: #2b3446; color: #fff; text-decoration: none; }

/* Actualités */
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.news-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; }
.news-item h2 { margin: .6rem 0 .2rem; font-size: 1.3rem; }
.news-item h2 a { text-decoration: none; }
.news-date { color: #646E86; font-size: .85rem; margin: 0 0 .4rem; }

/* Liste des apostolats (gabarit "apostolats") */
.apostolat-grid { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.apostolat-grid li { background: #f4f6fa; border: 1px solid #e4e4e4; border-left: 3px solid #2b3446; padding: .6rem .9rem; }
.apostolat-grid .city { display: block; color: #646E86; font-size: .85rem; }

/* Grille du page builder (sortie de builder.js) : rangees de colonnes en /12.
   Definie en autonome pour ne pas dependre du bundle Bootstrap du template. */
.pb-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem 1.6rem; align-items: start; margin: 0 0 1.2rem; }
.pb-col { min-width: 0; }
/* ⚠ Les colonnes portent AUSSI les classes Bootstrap du site d'origine
   (`col-md-3`…), et le bundle du template leur pose `flex:0 0 25%` +
   `max-width:25%`. Dans notre grille, ce pourcentage se calcule sur la ZONE DE
   GRILLE et non sur la rangée : un `col-md-3` de 273 px se retrouvait bridé à
   25 % de lui-même, soit 69 px — d'où, sur la page Écoles, des tuiles réduites
   à un mot par ligne et des logos minuscules (retour Jean 30/07). Seul
   `col-md-12` (max-width 100 %) échappait au défaut, ce qui rendait le bug
   invisible sur les pages à une seule colonne.
   Le sélecteur d'attribut (0,2,0) l'emporte sur la classe simple (0,1,0). */
.pb-col[class*="col-"] { max-width: none; flex: none; }
.pb-col img { max-width: 100%; height: auto; }
.pb-col.col-md-1  { grid-column: span 1; }
.pb-col.col-md-2  { grid-column: span 2; }
.pb-col.col-md-3  { grid-column: span 3; }
.pb-col.col-md-4  { grid-column: span 4; }
.pb-col.col-md-5  { grid-column: span 5; }
.pb-col.col-md-6  { grid-column: span 6; }
.pb-col.col-md-7  { grid-column: span 7; }
.pb-col.col-md-8  { grid-column: span 8; }
.pb-col.col-md-9  { grid-column: span 9; }
.pb-col.col-md-10 { grid-column: span 10; }
.pb-col.col-md-11 { grid-column: span 11; }
.pb-col.col-md-12 { grid-column: span 12; }
/* Sur mobile, chaque bloc passe pleine largeur. */
@media (max-width: 767px) { .pb-col[class*="col-md-"] { grid-column: 1 / -1; } }

/* ==========================================================================
   Systeme de mise en page maison « pf- » (remplace le page builder du site
   actuel). Reproduit, sous des noms neutres et sans dependance externe, la
   grille en 12 colonnes (flex + gouttieres) et les principaux blocs de
   contenu (titre, image, fiche « person », groupe d'icones, bouton).
   ========================================================================== */
.pf-content, .pf-page-content { width: 100%; }
.pf-section { margin-bottom: 1.5rem; }
.pf-row-container { width: 100%; }
/* Rangee : conteneur flex avec gouttieres de 15px. */
.pf-row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
/* Colonnes : largeur en /12 + padding de gouttiere. */
.pf-col, [class*="pf-col-"], .pf-row-column {
  position: relative; width: 100%; min-height: 1px;
  padding-right: 15px; padding-left: 15px; box-sizing: border-box;
}
.pf-col-md-1,.pf-col-sm-1   { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.pf-col-md-2,.pf-col-sm-2   { flex: 0 0 16.666667%; max-width: 16.666667%; }
.pf-col-md-3,.pf-col-sm-3   { flex: 0 0 25%;         max-width: 25%; }
.pf-col-md-4,.pf-col-sm-4   { flex: 0 0 33.333333%; max-width: 33.333333%; }
.pf-col-md-5,.pf-col-sm-5   { flex: 0 0 41.666667%; max-width: 41.666667%; }
.pf-col-md-6,.pf-col-sm-6   { flex: 0 0 50%;         max-width: 50%; }
.pf-col-md-7,.pf-col-sm-7   { flex: 0 0 58.333333%; max-width: 58.333333%; }
.pf-col-md-8,.pf-col-sm-8   { flex: 0 0 66.666667%; max-width: 66.666667%; }
.pf-col-md-9,.pf-col-sm-9   { flex: 0 0 75%;         max-width: 75%; }
.pf-col-md-10,.pf-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.pf-col-md-11,.pf-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.pf-col-md-12,.pf-col-sm-12 { flex: 0 0 100%;        max-width: 100%; }
/* Rangee sans gouttiere (image collee au texte, ex. fiche chanoine). */
.pf-no-gutter { margin-right: 0; margin-left: 0; }
.pf-no-gutter > [class*="pf-col-"], .pf-no-gutter > .pf-col, .pf-no-gutter > .pf-row-column { padding-right: 0; padding-left: 0; }
/* Colonne interne : empile ses blocs. */
.pf-column { width: 100%; display: flex; flex-wrap: wrap; }
.pf-column-addons { position: relative; z-index: 1; width: 100%; }
/* Espacement entre blocs. */
.pf-addon-wrapper { margin-bottom: 1rem; }
.pf-addon-wrapper:last-child { margin-bottom: 0; }
.pf-addon-title { margin-top: 0; margin-bottom: .5rem; }
/* Images. */
.pf-img-responsive { display: block; max-width: 100%; height: auto; }
/* Fiche « person » (chanoine : photo + informations). */
.pf-person-image { margin-bottom: 20px; position: relative; overflow: hidden; }
.pf-person-image.person-layout-4, .person-layout-4 { margin-bottom: 0; }
.pf-person-information > span, .pf-person-information > a { display: block; }
.pf-person-name { font-size: 16px; font-weight: 700; }
.pf-person-designation { margin-top: 5px; display: block; font-size: 14px; font-weight: 500; color: rgba(0,0,0,.5); }
.pf-person-introtext { margin-top: 10px; }
.pf-person-social, .pf-person-social-icons { list-style: none; display: block; padding: 0; margin: .5rem -5px 0; }
.pf-person-social > li { display: inline-block; margin: 0 5px; }
/* Groupe d'icones (ex. bouton « Donner »). */
.pf-icons-group-list { list-style: none; margin: 0; padding: 0; }
.pf-icons-group-list li { text-align: center; display: inline-block; }
.pf-icons-group-list a { display: inline-flex; align-items: center; gap: .4rem; }
.pf-form-label-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; padding: 0; border: 0; }
/* Bouton generique. */
.pf-btn { display: inline-block; padding: 8px 12px; font-size: 16px; line-height: 1.25; border: 1px solid transparent; border-radius: 4px; text-align: center; cursor: pointer; }
/* Largeurs « xs » (memes valeurs ; utilisees seules sur certains blocs). */
.pf-col-xs-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.pf-col-xs-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.pf-col-xs-3  { flex: 0 0 25%;         max-width: 25%; }
.pf-col-xs-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.pf-col-xs-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.pf-col-xs-6  { flex: 0 0 50%;         max-width: 50%; }
.pf-col-xs-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.pf-col-xs-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.pf-col-xs-9  { flex: 0 0 75%;         max-width: 75%; }
.pf-col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.pf-col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.pf-col-xs-12 { flex: 0 0 100%;        max-width: 100%; }
/* Label de groupe d'icones. */
.pf-icons-label-text { display: block; line-height: 1; }
.pf-icons-label-text.right { display: inline-block; }

/* Visibilite responsive (reprend le comportement des utilitaires du site). */
@media (max-width: 575.98px) { .pf-hidden-xs { display: none !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .pf-hidden-sm { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .pf-hidden-md { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .pf-hidden-lg { display: none !important; } }
@media (min-width: 1200px) { .pf-hidden-xl { display: none !important; } }
@media (min-width: 1400px) { .pf-hidden-xxl { display: none !important; } }
@media print { .pf-hidden-print { display: none !important; } }

/* Empilement sur petit ecran. */
@media (max-width: 575.98px) {
  [class*="pf-col-"], .pf-col { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ==========================================================================
   Blocs du page builder v2 (pfb-) : rendu de includes/page-render.php.
   Les styles reprennent EXACTEMENT ceux releves sur l'ancien site :
   - images : arrondi 15px + ombre douce (facon Province de France) ;
   - boutons : degrade blanc -> #dcebff, survol degrade #233155 -> #646E86 ;
   - palette : bleu nuit #121723 / #2f3958, gris texte #646E86.
   ========================================================================== */
.pfb-sec { margin: 0 0 2.25rem; }
.pfb-sec--light { background: #f4f6fa; border-radius: 15px; padding: 2rem 1.5rem; }
.pfb-sec--dark {
  background: linear-gradient(#2f3958, #121723);
  border-radius: 15px;
  padding: 2rem 1.5rem;
  color: #fff;
}
.pfb-sec--dark h1, .pfb-sec--dark h2, .pfb-sec--dark h3, .pfb-sec--dark h4 { color: #fff; }
.pfb-sec--dark a { color: #dcebff; }

.pfb-title { margin: 0 0 1rem; }

.pfb-text > :last-child { margin-bottom: 0; }
.pfb-text img { max-width: 100%; height: auto; border-radius: 15px; box-shadow: 0 0 10px 0 rgba(0,0,0,.3); }

.pfb-figure { margin: 0; }
.pfb-img { max-width: 100%; height: auto; display: inline-block; }
.pfb-img--soft { border-radius: 15px; box-shadow: 0 0 10px 0 rgba(0,0,0,.3); }
.pfb-caption { color: #646E86; font-size: .88rem; margin-top: .5rem; }
.pfb-sec--dark .pfb-caption { color: #c9d4e8; }

/* Bouton d'un bloc du page builder. REPRIS LE 01/08 SUR LE BOUTON UNIQUE DU
   SITE (.btn de site.css, venu d'icrss.org) : il était blanc, dégradé vers un
   bleu très pâle, avec une ombre portée — c'était l'un des éléments les plus
   reconnaissables de l'ancien site. Il est désormais foncé, comme tous les
   autres boutons.
   Le mécanisme est celui d'icrss : mêmes couleurs dans les deux états, seul le
   SENS du dégradé s'inverse au survol (0deg puis -180deg). Le bouton se
   retourne, il ne bouge pas. */
.pfb-btn, a.pfb-btn {
  display: inline-block;
  padding: 13px 34px;
  border: none;
  border-radius: 8px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  text-decoration: none;
  cursor: pointer;
  background-image: linear-gradient(0deg, var(--navy) 0%, #5f81ac 100%);
  box-shadow: 0 4px 14px rgba(29, 37, 64, .18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  transition: background-image .3s ease;
}
.pfb-btn:hover, a.pfb-btn:hover {
  color: #fff;
  background-image: linear-gradient(-180deg, var(--navy-dark) 0%, var(--bleu) 100%);
}

/* ─── LES BOUTONS ÉCRITS DANS LE CONTENU (défaut signalé par Jean le 01/08) ───
   « Le bouton n'a aucun style… sans doute à vérifier partout », capture de
   ?page=seminary à l'appui :
       <a href="…"><button><i class="fa-solid …"></i> La vie au séminaire
       racontée</button></a>

   CE QUI S'EST PASSÉ. Ces boutons ne portent aucune classe : ils n'en avaient
   pas besoin, le thème Joomla habillait TOUT <button> du site
   (`button:not(.close, .navbar-toggler)` de justitia-custom.css). Les rédacteurs
   ont écrit leur contenu là-dessus pendant des années. Le thème est parti avec
   la refonte du 01/08 : ces boutons sont redevenus des boutons NUS du système
   d'exploitation — gris, minuscules, encadrés d'un filet. Rien ne pouvait le
   signaler : les pages répondent 200, le PHP est valide, le smoke est vert.

   OÙ, EXACTEMENT. Relevé sur les 77 adresses publiques du site : 3 pages
   (séminaire, adoratrices, société du Sacré-Cœur), 4 fiches d'apostolat
   (Nice, Loisy, Bourges, Rennes), plus 3 liens `class="button"` (questions
   fréquentes, vocation), et sur Rennes les deux onglets du bloc de dons.

   POURQUOI PAS SIMPLEMENT « button » COMME LE FAISAIT LE THÈME. Parce que c'est
   ce qui obligeait ce fichier à neutraliser le thème bouton par bouton, en trois
   endroits et à trois reprises (voir `.pf-add-benef`, `.pf-submit-final`,
   `.confrerie`). On ne rattrape donc QUE les boutons du contenu rédigé, dans les
   zones où il s'affiche, et seulement ceux qui n'ont pas déjà leur habit :
   le diaporama, le lecteur de sermons et les formulaires publics portent tous
   une classe et gardent le leur.

   ⚠ `a.button:not(.pfb-btn)` : le bloc « bouton » du page builder rend
   `<a class="button pfb-btn">`. Sans cette exclusion, ce sélecteur-ci (0,2,1)
   l'emporterait sur `.pfb-btn` (0,1,1) et lui imposerait SES valeurs partout où
   les deux règles déclarent la même propriété : interlettrage ramené de 1,5 px
   à 0,4 et corps de 14 px à 15. Les capitales, elles, survivraient — la règle
   ci-dessous ne déclare pas `text-transform` — ce qui rend l'effet de bord
   d'autant plus difficile à voir : le bouton reste ressemblant, mais tous ceux
   du page builder cessent d'être d'accord entre eux.

   PAS DE `text-transform: uppercase`, contrairement à `.pfb-btn` : ces libellés
   ne sont pas des étiquettes de deux mots mais des phrases entières
   (« Maison Notre-Dame-de-Bonne-Délivrance à Loisy »), que les capitales rendent
   pesantes. La casse saisie par le rédacteur est conservée.

   ⚠ TAILLE : CE N'EST PAS UN BOUTON DE PAGE, C'EST UN BOUTON DE PHRASE
   (retour de Jean, 01/08 : « les boutons inline doivent être beaucoup moins
   gros, pour pouvoir bien s'intégrer au paragraphe »). Ces boutons vivent DANS
   le texte courant — « consultez le [site du séminaire]. Vous y trouverez… » —
   et non sous lui. Au corps de `.pfb-btn` (13/34 px, police 15), le bouton était
   plus haut que la ligne qui le porte : le navigateur écartait alors les lignes
   voisines, et le trou se voyait sur tout le paragraphe. Le calibrage a été fait
   à l'image sur les deux cas réels, dans du vrai texte : 5/13 px et 13 px de
   corps sont la première taille qui laisse l'interligne intact. L'ombre et
   l'arrondi diminuent d'autant — une ombre de 14 px sous un bouton de 27 px de
   haut le fait flotter au-dessus de la page. */
:is(.page-content, .apo-body, .ordo-pub-intro, .page-body > article)
:is(button:not([class]), button.confirm, button.confrerie, a.button:not(.pfb-btn)) {
  display: inline-block;
  padding: 5px 13px;
  border: none;
  border-radius: 6px;
  color: #fff;
  letter-spacing: .2px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  background-image: linear-gradient(0deg, var(--navy) 0%, #5f81ac 100%);
  box-shadow: 0 1px 4px rgba(29, 37, 64, .14);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  transition: background-image .3s ease;
}
:is(.page-content, .apo-body, .ordo-pub-intro, .page-body > article)
:is(button:not([class]), button.confirm, button.confrerie, a.button:not(.pfb-btn)):hover {
  color: #fff;
  background-image: linear-gradient(-180deg, var(--navy-dark) 0%, var(--bleu) 100%);
}

/* LES ONGLETS DE LA FICHE DE RENNES (« Virement mensuel » / « Don ponctuel »).
   Même cause, mais on ne peut pas les traiter comme les autres : le contenu de
   la page pose lui-même, dans son <style>, le fond FONCÉ de l'onglet actif
   (`.active { background-image: linear-gradient(#233155, #646E86) }`) et rien
   d'autre — ni corps, ni police, ni arrondi, qu'il attendait du thème.
   D'où la coupe en deux :
     · le CORPS du bouton pour les deux onglets ;
     · le fond CLAIR pour le seul onglet au repos, `:not(.active)` laissant le
       contenu garder la main sur l'actif. Sans ce `:not()`, notre règle (0,2,1)
       écraserait son `.active` (0,1,0) et les deux onglets deviendraient
       identiques : on ne saurait plus lequel est ouvert. */
:is(.page-content, .apo-body) button.onglet {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
:is(.page-content, .apo-body) button.onglet:not(.active) {
  color: #2b3446;
  background-image: linear-gradient(180deg, #fff 0%, #e8eefb 100%);
}

.pfb-divider { border: 0; border-top: 1px solid #d5dae2; margin: 1.25rem 0; }
.pfb-sec--dark .pfb-divider { border-top-color: rgba(255,255,255,.25); }

/* Ligne d'icônes des apostolats (bloc « Liens & réseaux », demande Jean 11/07,
   retour : « juste des logos, sans contour extérieur ») : icône nue + libellé
   à côté, comme sur l'ancien site, dorés au survol. */
.pfb-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding: 0; margin: 0 0 .75rem; }
.pfb-links a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: #2f3958; transition: color .2s; }
.pfb-link-ico { display: inline-flex; font-size: 22px; line-height: 1; }
.pfb-link-lbl { font-size: .95rem; line-height: 1.25; }
.pfb-links a:hover { color: #2b3446; }
.pfb-sec--dark .pfb-links a, .pfb-sec--ontdark .pfb-links a { color: #dcebff; }
.pfb-sec--dark .pfb-links a:hover, .pfb-sec--ontdark .pfb-links a:hover { color: #fff; }

/* Bordure optionnelle d'un bloc (case « bordure » dans le builder). */
.pfb-bordered { border: 1px solid #d5dae2; border-radius: 15px; padding: 1.1rem 1.25rem; }
.pfb-sec--dark .pfb-bordered, .pfb-sec--ontdark .pfb-bordered { border-color: rgba(255,255,255,.3); }
/* Fond de bloc (couleur au choix dans le builder, option texte blanc). */
.pfb-filled { border-radius: 15px; padding: 1.1rem 1.25rem; }

/* Fond de section personnalisé (code couleur choisi dans le builder). */
.pfb-sec--custom { border-radius: 15px; padding: 2rem 1.5rem; }
.pfb-sec--ontdark { color: #fff; }
.pfb-sec--ontdark h1, .pfb-sec--ontdark h2, .pfb-sec--ontdark h3, .pfb-sec--ontdark h4 { color: #fff; }
.pfb-sec--ontdark a { color: #dcebff; }

/* Diaporama du page builder (bloc « slider », JS dans public.js) :
   fondu entre images, fleches, points. Prend la largeur de sa colonne. */
.pfb-slider { position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 0 10px 0 rgba(0,0,0,.3); }
.pfb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.pfb-slide.is-active { opacity: 1; z-index: 1; }
.pfb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfb-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(18,23,35,.75));
  color: #fff; padding: 1.4rem 1rem .7rem; font-size: .95rem;
}
.pfb-sl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(18,23,35,.45); color: #fff; border: 0; border-radius: 50%;
  width: 40px; height: 40px; font-size: 26px; line-height: 1; cursor: pointer;
}
.pfb-sl-arrow:hover { background: rgba(18,23,35,.75); }
.pfb-sl-prev { left: .6rem; }
.pfb-sl-next { right: .6rem; }
.pfb-sl-dots { position: absolute; left: 0; right: 0; bottom: .55rem; text-align: center; z-index: 2; }
.pfb-sl-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 4px;
  background: rgba(255,255,255,.55); cursor: pointer; padding: 0;
}
.pfb-sl-dots button.is-active { background: #fff; }

/* Vidéo YouTube (bloc « video ») : lecteur responsive 16/9, arrondi + ombre
   douce comme les images (façon Province de France). */
.pfb-video { margin: 0; }
.pfb-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,.3); }
.pfb-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pfb-video .pfb-caption { margin-top: .5rem; }

/* Galerie photos (bloc « gallery ») : grille de vignettes, clic = plein écran. */
.pfb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pfb-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.pfb-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.pfb-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.pfb-gallery--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 700px) { .pfb-gallery, .pfb-gallery--2, .pfb-gallery--3, .pfb-gallery--4, .pfb-gallery--5 { grid-template-columns: 1fr 1fr; } }
.pfb-g-item { margin: 0; min-width: 0; }
.pfb-g-link { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,.25); }
.pfb-g-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .25s ease; }
.pfb-g-link:hover img { transform: scale(1.04); }
.pfb-g-item .pfb-caption { margin-top: .4rem; }

/* Visionneuse plein écran de la galerie (lightbox, JS dans public.js). */
.pfb-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(18,23,35,.92); display: flex; align-items: center; justify-content: center; }
.pfb-lb img { max-width: min(92vw, 1400px); max-height: 82vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,.6); }
.pfb-lb-cap { position: absolute; left: 0; right: 0; bottom: 1.2rem; text-align: center; color: #fff; padding: 0 4rem; font-size: 1rem; }
.pfb-lb-close { position: absolute; top: .8rem; right: 1rem; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.pfb-lb .pfb-sl-arrow { position: absolute; }
.pfb-lb .pfb-sl-prev { left: 1rem; }
.pfb-lb .pfb-sl-next { right: 1rem; }

/* Accordéon (bloc « accordion ») : volets dépliants natifs <details>. */
.pfb-acc { border-top: 1px solid #d5dae2; }
.pfb-acc-item { border-bottom: 1px solid #d5dae2; }
.pfb-acc-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: .85rem 2.2rem .85rem .2rem; font-weight: 700; color: #2f3958;
}
.pfb-acc-item summary::-webkit-details-marker { display: none; }
.pfb-acc-item summary::after {
  content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  color: #2b3446; font-size: 1.4rem; font-weight: 400; transition: transform .2s ease;
}
.pfb-acc-item[open] summary::after { content: '−'; }
.pfb-acc-item summary:hover { color: #2b3446; }
.pfb-acc-body { padding: 0 .2rem 1rem; }
.pfb-acc-body > :last-child { margin-bottom: 0; }
.pfb-sec--dark .pfb-acc, .pfb-sec--ontdark .pfb-acc { border-top-color: rgba(255,255,255,.3); }
.pfb-sec--dark .pfb-acc-item, .pfb-sec--ontdark .pfb-acc-item { border-bottom-color: rgba(255,255,255,.3); }
.pfb-sec--dark .pfb-acc-item summary, .pfb-sec--ontdark .pfb-acc-item summary { color: #fff; }

/* Citation (bloc « quote ») : filet or, grand guillemet, auteur en italique. */
.pfb-quote { margin: 0; padding: .4rem 0 .4rem 1.4rem; border-left: 3px solid #2b3446; position: relative; }
.pfb-quote blockquote {
  margin: 0; padding: 0; border: 0; font-size: 1.15rem; line-height: 1.65;
  font-style: italic; color: #2f3958; quotes: '«\00a0' '\00a0»';
}
.pfb-quote blockquote::before { content: open-quote; color: #2b3446; }
.pfb-quote blockquote::after { content: close-quote; color: #2b3446; }
.pfb-quote figcaption { margin-top: .55rem; color: #646E86; font-size: .95rem; }
.pfb-quote cite { font-style: italic; }
.pfb-sec--dark .pfb-quote blockquote, .pfb-sec--ontdark .pfb-quote blockquote { color: #fff; }
.pfb-sec--dark .pfb-quote figcaption, .pfb-sec--ontdark .pfb-quote figcaption { color: #c9d4e8; }

/* Bloc « Dernières actualités » : réutilise la présentation .news-list de la
   page Actualités ; le titre y est un h3 (h2 sur la page dédiée). */
.news-item h3.news-item-title { margin: .6rem 0 .2rem; font-size: 1.3rem; }
.news-item h3.news-item-title a { text-decoration: none; }


/* Horaires de l'apostolat, tenus par le prieur depuis son espace (14/07/2026).
   Présentation identique à l'ancien site (demande Jean 15/07) : titre + listes à
   puces, aucun encadré, pour se fondre dans le contenu de la page. On laisse donc
   les titres et les listes hériter du style de contenu par défaut. */
.org-schedule { margin: 1.6rem 0 2rem; }

/* ─── L'AFFICHE HEBDOMADAIRE (31/07/2026, retours de Jean) ───────────────────
   Trois apostolats publient leurs horaires par une image (Port-Marly, Rennes,
   Montpellier). Deux défauts signalés le même jour :

   1. LA HAUTEUR. L'affiche s'affichait à sa taille naturelle, en pleine largeur
      de colonne : une page d'apostolat déroulait un placard de plusieurs
      milliers de pixels. Elle est désormais bornée, et posée à côté du
      calendrier Google, dont elle reprend la hauteur (500 px, celle que porte
      l'iframe du calendrier sur les trois fiches).

   2. LA LÉGENDE, « qui ne passe pas du tout ». Le thème hérité pose sur TOUT
      <figcaption> une pastille noire à dégradé, en position absolue, large de
      33 %, collée SUR l'image (justitia-custom.css, `figure figcaption`). La
      même remise à zéro existait déjà pour .pf-cover__label et .amap : elle
      manquait ici. À côté du calendrier, l'affiche n'a plus de légende du tout,
      elle porte un titre comme le calendrier a le sien ; ailleurs, la légende
      se range sobrement SOUS l'image. */
.org-schedule-img { margin: 0 0 1.2rem; position: static; }
.org-schedule-img img {
  display: block; max-width: 100%; height: auto; max-height: 31.25rem;   /* 500px, comme le calendrier */
  margin: 0 auto; border-radius: 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
}
/* Remise à zéro de la pastille du thème (voir le commentaire ci-dessus). */
.org-schedule-img figcaption {
  display: block; position: static; float: none; width: 100%; height: auto;
  background: none; padding: 0; margin: .5rem 0 0; border-radius: 0;
  color: #646E86; font-size: .88rem; font-weight: 400; line-height: 1.4;
  text-align: center; text-shadow: none; text-transform: none; opacity: 1;
}
/* ⚠ POSÉE AVANT LES ÉGLISES, dans sa propre rangée (01/08, demande de Jean :
   « pour les feuilles d'horaire particulières de la semaine, il faut les mettre
   comme pour Port-Marly, avant les horaires des églises »). Elle était jusque-là
   glissée dans la rangée du calendrier Google ; la classe s'appelait donc
   `--calendar`, nom qui ne décrivait plus rien.
   Le titre remplace la légende.

   ⚠ L'IMAGE GARDE SES PROPORTIONS, ET L'OMBRE ÉPOUSE SES BORDS (01/08, second
   retour de Jean : « est-ce que le cadre avec l'ombre portée pourrait s'ajuster
   à la hauteur et à la largeur de la feuille ? Sinon ça rajoute des marges
   blanches sur les côtés »).

   La cause tenait en deux déclarations : `width:100%` étirait la BOÎTE sur toute
   la colonne, et `object-fit:contain` y logeait l'affiche sans la déformer — donc
   avec du vide de part et d'autre. L'ombre, elle, se dessine autour de la boîte :
   elle encadrait ce vide. En laissant la largeur suivre la hauteur bornée, la
   boîte n'est jamais plus grande que l'affiche, et il n'y a plus rien à encadrer. */
.org-schedule-img--avant { margin: 0; }
.org-schedule-img--avant img { width: auto; max-width: 100%; object-fit: initial; }

/* Adresse de l'apostolat (issue de la fiche, demande Jean 16/07). */
.apostolat-address { color: #4a5568; font-size: .97rem; margin: 0 0 1.2rem; }
.apostolat-address a { white-space: nowrap; }

.site-search-page { display: flex; gap: .5rem; margin: 0 0 1.5rem; max-width: 34rem; }
.site-search-page input[type=search] {
  flex: 1; padding: .55rem .8rem; font-size: 1rem;
  border: 1px solid #d5dae2; border-radius: 6px;
}
.site-search-page button {
  padding: .55rem 1rem; border: 0; border-radius: 6px; cursor: pointer;
  background: #1a3c6e; color: #fff; font-size: .95rem;
}
.search-count { color: #6b7683; margin-bottom: 1rem; }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: .9rem 0; border-bottom: 1px solid #e2e6ec; }
.search-results li:last-child { border-bottom: 0; }
.search-kind {
  display: inline-block; margin-right: .5rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7683;
}
.search-results a { font-size: 1.08rem; }
.search-results p { margin: .3rem 0 0; color: #4a5568; font-size: .95rem; }
.search-results mark { background: #fdf1dc; color: inherit; padding: 0 .1em; }

/* ─── LECTEUR AUDIO DES SERMONS (18/07/2026) ─────────────────────────────────
   PORTÉ DEPUIS icrss.org (demande Jean : « le même lecteur audio, mêmes
   fonctionnalités »). Les variables de couleur d'icrss (--navy, --bleu…) sont
   remplacées par celles de la Province : bleu institutionnel #1a3c6e.
   ⚠ Deux codebases, un seul lecteur : reporter toute évolution des deux côtés. */
.cd-player{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:1200;
  width:min(720px,calc(100% - 28px));
  display:none;align-items:center;gap:12px;padding:10px 14px;
  background:#12294c;color:#fff;
  border-radius:14px;
  box-shadow:0 10px 34px rgba(0,0,0,.42);
}
.cd-player.is-active{display:flex}
.cdp-cover{width:54px;height:54px;border-radius:6px;object-fit:cover;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cdp-info{min-width:0;flex:1 1 180px;overflow:hidden}
.cdp-title{font-family:inherit;font-weight:600;font-size:.96rem;white-space:nowrap;overflow:hidden}
.cdp-title-text{display:inline-block;white-space:nowrap}
/* Défilement du titre uniquement s'il dépasse (durée fixée en JS selon la longueur) */
.cdp-title-text.cdp-scroll{animation-name:cdpMarquee;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes cdpMarquee{
  0%,9%    {transform:translateX(0)}
  46%,54%  {transform:translateX(var(--cdp-shift,0))}
  91%,100% {transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .cdp-title-text.cdp-scroll{animation:none}
  .cdp-title{text-overflow:ellipsis}
}
.cdp-album{font-size:.8rem;color:#7ea3d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdp-controls{display:flex;align-items:center;gap:6px;flex:none}
.cdp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  background:transparent;color:#fff;transition:background .14s ease;
}
.cdp-btn:hover{background:rgba(255,255,255,.14)}
.cdp-btn:disabled{opacity:.32;cursor:default;background:none}
.cdp-btn svg{width:22px;height:22px;fill:currentColor}
.cdp-btn--main{background:#2f5c9e;width:44px;height:44px}
.cdp-btn--main:hover{background:#7ea3d4}
.cdp-btn--main svg{width:26px;height:26px}
.cdp-progress-wrap{display:flex;align-items:center;gap:10px;flex:2 1 260px;min-width:120px}
.cdp-bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.2);cursor:pointer;flex:1}
.cdp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#7ea3d4;border-radius:3px}
.cdp-time{font-size:.78rem;color:#7ea3d4;font-variant-numeric:tabular-nums;white-space:nowrap}
.cdp-close{
  flex:none;width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
  background:transparent;color:#7ea3d4;transition:background .14s ease,color .14s ease;
}
.cdp-close:hover{background:rgba(255,255,255,.14);color:#fff}
.cdp-close svg{width:20px;height:20px;fill:currentColor}
/* Bouton de vitesse de lecture (cycle 1× → 1.25× → 1.5× → 1.75×) */
.cdp-speed{
  flex:none;min-width:44px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:17px;
  background:transparent;color:#fff;cursor:pointer;font:600 .82rem/1 inherit;padding:0 10px;
  transition:background .14s ease;
}
.cdp-speed:hover{background:rgba(255,255,255,.14)}

/* ⚠ Même piège que pour la liste des sermons : les commandes du lecteur sont
   des <button>, et justitia-custom.css les habille toutes d'un dégradé bleu
   clair avec un voile ::before, par un sélecteur (0,1,1) plus fort que les
   classes `.cdp-*` ci-dessus. Le lecteur d'icrss.org, recopié à l'identique,
   se retrouvait donc avec cinq boutons gris-bleu carrés sur fond marine
   (retour Jean 30/07). On annule nommément, avec une spécificité suffisante. */
.cd-player .cdp-btn,
.cd-player .cdp-close,
.cd-player .cdp-speed{
  background-image:none;box-shadow:none;padding:0;
  text-transform:none;letter-spacing:normal;
}
.cd-player .cdp-btn::before,
.cd-player .cdp-close::before,
.cd-player .cdp-speed::before{content:none;display:none}
.cd-player .cdp-btn{background-color:transparent;border-radius:50%;color:#fff}
.cd-player .cdp-btn:hover{background-color:rgba(255,255,255,.14);background-image:none;color:#fff}
.cd-player .cdp-btn--main{background-color:#2f5c9e}
.cd-player .cdp-btn--main:hover{background-color:#7ea3d4}
.cd-player .cdp-close{background-color:transparent;border-radius:50%;color:#7ea3d4}
.cd-player .cdp-close:hover{background-color:rgba(255,255,255,.14);background-image:none;color:#fff}
.cd-player .cdp-speed{background-color:transparent;border:1px solid rgba(255,255,255,.28);border-radius:17px;color:#fff;padding:0 10px}
.cd-player .cdp-speed:hover{background-color:rgba(255,255,255,.14);background-image:none;color:#fff}

/* --- Audio des sermons / conférences : éléments cliquables (lecture dans le
       lecteur global du site) --- */
.audio-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.audio-item{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:#fff;border:1px solid #e2e6ec;border-radius:10px;cursor:pointer;
  padding:12px 16px;font-family:inherit;color:#1f2733;
  box-shadow:0 3px 12px rgba(20,28,48,.07);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.audio-item:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,28,48,.13);border-color:#7ea3d4}
.audio-item.playing{border-color:#2f5c9e}

/* ⚠ CE QUI RENDAIT LA LISTE DE SERMONS SI LAIDE (retour Jean 30/07 : « le
   lecteur sermons n'est pas beau, et la liste des sermons non plus »).
   Le style ci-dessus est bien celui d'icrss.org, mais il ne mordait pas : chaque
   sermon est un <button>, et justitia-custom.css habille TOUT bouton du site
   d'un dégradé bleu, avec un voile ::before et un survol qui passe le texte en
   blanc. Son sélecteur `button:not(.close, .navbar-toggler)` compte pour une
   classe ET un élément (0,1,1) : il l'emportait sur `.audio-item` (0,1,0), qui
   ne pesait pas assez lourd malgré l'ordre de chargement.
   On repasse donc par-dessus avec `.audio-list .audio-item` (0,2,0), et on
   annule NOMMÉMENT tout ce que le thème pose — un simple `background:#fff` ne
   suffit pas, c'est `background-image` qui portait le dégradé. */
.audio-list .audio-item{
  background-color:#fff;background-image:none;
  border:1px solid #e2e6ec;border-radius:10px;padding:12px 16px;
  box-shadow:0 3px 12px rgba(20,28,48,.07);color:#1f2733;
  text-transform:none;letter-spacing:normal;font-weight:400;
  /* ⚠ TOUTE LA TUILE EN SANS-SERIF (01/08, demande de Jean : « pour les sermons,
     mets tout le contenu en sans-serif, c'est mieux — je parle des tuiles des
     sermons »). La police est posée sur la TUILE, et non sur chacun de ses
     morceaux : le titre, l'auteur, la date et la mention « Écouter » en héritent
     d'un coup, et un morceau ajouté demain naîtra dans la bonne police.
     Elle remplace le `font-family:inherit` qui était là pour battre le thème
     hérité : une valeur explicite le bat tout autant.
     Le repli sert au cas où cette feuille serait chargée sans site.css, qui
     déclare la variable. */
  font-family:var(--sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.audio-list .audio-item::before{content:none;display:none}
.audio-list .audio-item:hover{
  background-image:none;color:#1f2733;border-color:#7ea3d4;
  box-shadow:0 6px 18px rgba(20,28,48,.13);
}
.audio-list .audio-item.playing{border-color:#2f5c9e}
/* Le titre du sermon était le seul morceau en police de TITRE (Goudy). Il suit
   désormais la tuile : plus aucune police n'est déclarée ici, l'héritage fait
   foi — le redéclarer serait le seul endroit à penser le jour où la tuile
   changera de police. */
/* ⚠ EN GRAS ET PLUS BAS (01/08, second retour de Jean : « mets les titres des
   sermons en gras et avec une police moins haute »). Il était à 1,1 rem en
   graisse normale, c'est-à-dire plus grand que le corps de la page mais moins
   marqué : il ne se détachait ni par la taille ni par la graisse. Il passe
   sous 1 rem, en gras — c'est la graisse qui le distingue maintenant, pas la
   hauteur, et la tuile s'en trouve resserrée. */
.audio-list .audio-item-title{font-size:.98rem;font-weight:700}
.audio-item-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#2f5c9e;color:#fff}
.audio-item-ico svg{width:22px;height:22px;fill:currentColor}
.audio-item-ico .ai-ico-pause{display:none}
.audio-item.playing .ai-ico-play{display:none}
.audio-item.playing .ai-ico-pause{display:block}
.audio-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.audio-item-title{font-weight:600;color:#1a3c6e;line-height:1.25}
.audio-item-sub{font-size:.86rem;color:#6b7683}
/* ⚠ LA MENTION « ÉCOUTER » N'EXISTE PLUS (01/08, demande de Jean : « ça prend de
   la place pour rien, il y a le bouton play »). Ses trois règles ont été
   retirées avec elle, plutôt que laissées à habiller un élément que plus
   personne n'écrit : une règle orpheline finit par faire croire qu'un élément
   existe encore. Elle était produite par sermons_block_html(). */

/* Lecteur : adaptation mobile (la barre de progression passe sous les contrôles) */
@media(max-width:760px){
  body.cd-playing{padding-bottom:150px}
  .cd-player{flex-wrap:wrap;gap:8px 12px;padding:8px 12px;bottom:10px}
  .cdp-cover{width:44px;height:44px}
  .cdp-info{flex:1 1 auto;order:1}
  .cdp-close{order:2}
  .cdp-controls{order:3}
  .cdp-speed{order:4}
  .cdp-progress-wrap{order:5;flex:1 1 100%}
}

/* Bouton PDF du lecteur et lien PDF de la liste (18/07, demande Jean : « un
   bouton sur le lecteur qui pointe vers un fichier pdf du sermon s'il a été
   joint »). ⚠ Ajout propre à ce site : le lecteur d'icrss.org n'a pas ce bouton. */
.cdp-pdf{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:transparent;color:#7ea3d4;text-decoration:none;
  transition:background .14s ease,color .14s ease;
}
.cdp-pdf:hover{background:rgba(255,255,255,.14);color:#fff}
.cdp-pdf svg{width:19px;height:19px;fill:currentColor}
.cdp-pdf[hidden]{display:none}

/* Dans la liste : le PDF est un lien À PART, jamais dans le bouton d'écoute
   (un lien dans un bouton est invalide, et le clic deviendrait ambigu). */
.sermon-pdf{
  display:inline-flex;align-items:center;gap:.4rem;
  margin:-4px 0 2px 58px;                 /* aligné sous le titre, pas sous l'icône */
  font-size:.85rem;color:#2f5c9e;text-decoration:none;
}
.sermon-pdf:hover{text-decoration:underline}
.sermon-pdf svg{width:15px;height:15px;fill:currentColor;flex:none}

/* Titre de la section des sermons */
.sermons-block{margin-top:2.2rem}
.sermons-title{font-size:1.5rem;margin:0 0 .8rem}

/* =============================================================================
   « NOUS SOUTENIR » : les voies de soutien, en tuiles (30/07/2026)
   -----------------------------------------------------------------------------
   La page ne portait qu'une phrase et un bouton, alors que l'ancien site
   faisait CHOISIR l'œuvre à soutenir. Ces tuiles rétablissent ce choix.

   ⚠ Écrit en fin de feuille, et en « mobile d'abord » : les blocs
   @media (max-width: …) de ce fichier sont AU MILIEU, si bien qu'une règle
   posée après eux les écrase sur téléphone sans qu'on s'en aperçoive (c'est
   exactement le défaut qui a fait déborder la barre d'onglets de l'application,
   corrigé le 30/07). Le téléphone est donc le cas PAR DÉFAUT ci-dessous, et
   c'est un @media (min-width: …) écrit APRÈS qui élargit sur grand écran.
   ============================================================================= */
.pf-voies { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 1.5rem 0 .5rem; }
.pf-voie {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 1.25rem; text-decoration: none;
  background: #fff; border: 1px solid #e2e6ec; border-radius: 12px;
  color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pf-voie:hover, .pf-voie:focus-visible {
  border-color: #2b3446; box-shadow: 0 4px 16px rgba(43, 52, 70, .10);
  transform: translateY(-1px); text-decoration: none; color: inherit;
}
.pf-voie__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #eef1f6; color: #2b3446; font-size: 1.15rem;
}
.pf-voie__txt { display: block; }
.pf-voie__txt strong { display: block; font-size: 1.08rem; margin-bottom: .2rem; color: #2b3446; }
.pf-voie__txt span { display: block; color: #5a6474; font-size: .95rem; line-height: 1.45; }

/* Sous-titre du formulaire de demande de legs. */
.contact-form-hint { color: #5a6474; margin: 0 0 1rem; }

@media (min-width: 761px) {
  .pf-voies { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

/* =============================================================================
   FORMULAIRES PUBLICS : dons, offrandes de Messes, legs
   -----------------------------------------------------------------------------
   REPRIS D'ICRSS.ORG (demande de Jean, 31/07/2026 : « reprends vraiment
   exactement ce que t'as fait sur icrss.org »). Les regles ci-dessous sont
   celles des gabarits donate.php, masses.php et contact.php d'icrss, recopiees
   telles quelles, a trois adaptations pres :

     1. LES VARIABLES sont declarees ici, sur les conteneurs de page, parce que
        ce site n'a pas de :root de charte (il herite du theme T4 de l'ancien
        Joomla). Les valeurs sont celles d'icrss, qui a lui-meme bascule toute
        sa charte en BLEU : la variable au nom historique « --or-clair » y vaut
        #cdd9e8, un bleu pale. Rien de dore n'entre donc ici, conformement a la
        demande du 30/07.

     2. LES POLICES sont celles d'ICI (Servus pour le corps, Goudy Modern pour
        les titres), et non celles d'icrss.

     3. LE PRIX N'EST PAS EN GOUDY MODERN, alors qu'il l'est sur icrss
        (.off-card-price y porte font-family:var(--titre)). Regle de la maison,
        posee par Jean : cette police est reservee aux titres, jamais un
        montant, et jamais en gras. Les montants restent donc en Servus, comme
        le fait deja la barre de total d'icrss elle-meme.

   /!\ LE THEME HERITE SE MET EN TRAVERS, et c'est pourquoi plusieurs regles
   paraissent redondantes : le bundle T4 habille TOUT <button> d'un degrade
   bleu par « button:not(.close, .navbar-toggler) », qui pese (0,1,1) et
   l'emporte donc sur une simple classe. Chaque bouton est neutralise nommement,
   voile ::before compris (meme correctif que le lecteur de sermons, 30/07).

   /!\ Ecrit en FIN de feuille et en « mobile d'abord » : les blocs
   @media (max-width) de ce fichier sont au MILIEU, si bien qu'une regle posee
   apres eux les ecrase sur telephone sans qu'on s'en apercoive.
   ============================================================================= */
.off-page, .don-page, .pf-form-page {
  max-width:820px; margin:2.5rem auto 5rem; padding:0 1.25rem;
  box-sizing:border-box; width:100%;
}
.don-page { max-width:780px; }
.pf-form-page { max-width:620px; }
.off-intro, .don-intro { font-size:1.05rem; color:var(--gris); margin-bottom:2.2rem; line-height:1.75; }

/* ── Le formulaire commun (repris de site.css d'icrss) ───────────────────── */
.off-page .nl-form, .don-page .nl-form, .pf-form-page .nl-form { margin-top:.5rem; }
.off-page .nl-group, .don-page .nl-group, .pf-form-page .nl-group {
  display:flex; flex-direction:column; gap:5px; margin-bottom:1.1rem;
}
.off-page .nl-group label, .don-page .nl-group label, .pf-form-page .nl-group label {
  font-size:14px; font-weight:500; color:var(--navy);
}
.off-page .nl-group input, .off-page .nl-group select, .off-page .nl-group textarea,
.don-page .nl-group input, .don-page .nl-group select, .don-page .nl-group textarea,
.pf-form-page .nl-group input, .pf-form-page .nl-group select, .pf-form-page .nl-group textarea {
  width:100%; padding:10px 13px; font-size:15px; font-family:var(--sans);
  color:var(--encre); border:1px solid #c8d4e2; border-radius:8px;
  background:#fff; outline:none; transition:border-color .15s; box-sizing:border-box;
}
.off-page .nl-group textarea, .don-page .nl-group textarea, .pf-form-page .nl-group textarea {
  resize:vertical; min-height:120px; line-height:1.55;
}
.off-page .nl-group input:focus, .off-page .nl-group select:focus, .off-page .nl-group textarea:focus,
.don-page .nl-group input:focus, .don-page .nl-group select:focus, .don-page .nl-group textarea:focus,
.pf-form-page .nl-group input:focus, .pf-form-page .nl-group select:focus, .pf-form-page .nl-group textarea:focus {
  border-color:var(--bleu); box-shadow:0 0 0 3px rgba(79,111,156,.10);
}
.nl-group--narrow { max-width:160px; }
.nl-row--2 { display:grid; grid-template-columns:1fr; gap:14px; }
.nl-row--check { display:flex; align-items:flex-start; gap:10px; margin-bottom:1.4rem; }
.nl-row--check input[type=checkbox] {
  flex-shrink:0; width:17px; height:17px; margin-top:2px; cursor:pointer; accent-color:var(--bleu);
}
.nl-row--check label { font-size:14px; line-height:1.55; color:var(--encre); cursor:pointer; font-weight:400; margin:0; }
.nl-row--check label a { color:var(--bleu); text-decoration:underline; }
.req { color:var(--bleu); margin-left:2px; }
.nl-notice { padding:13px 17px; border-radius:7px; margin-bottom:1.5rem; font-size:15px; line-height:1.5; }
.nl-notice--ok  { background:#edf7f1; color:#1a6836; border:1px solid #b0d9c0; }
.nl-notice--err { background:#fdf0f0; color:#8b1a1a; border:1px solid #f0b4b4; }

/* ── Cartes des offrandes de Messes ──────────────────────────────────────── */
.off-cards { display:grid; grid-template-columns:1fr; gap:1.1rem; margin-bottom:1.5rem; min-width:0; }
.off-card {
  background:#fff; border:2px solid var(--or-clair); border-radius:12px;
  padding:1.5rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:1rem;
  transition:border-color .2s, box-shadow .2s; min-width:0; overflow:hidden;
}
.off-card > div:first-child { flex:1; }
.off-card:focus-within, .off-card.has-qty { border-color:var(--bleu); box-shadow:0 0 0 4px rgba(79,111,156,.08); }
.off-card-icon {
  width:44px; height:44px; border-radius:50%; background:var(--fond-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:.1rem;
}
.off-card h3 { font-size:1.05rem; color:var(--navy); margin:0 0 .5rem; line-height:1.3; }
.off-card-desc { font-size:.83rem; color:var(--gris); line-height:1.5; }
.off-card-price { display:inline-block; font-size:1.5rem; font-family:var(--sans); font-weight:600; color:var(--bleu); line-height:1; }
.off-card-price-unit { font-size:.78rem; color:var(--gris); font-family:var(--sans); display:inline; margin-left:.25rem; white-space:nowrap; }

/* Le pas-a-pas + / − */
.off-stepper {
  display:flex; align-items:center; gap:.5rem;
  border:1.5px solid #c8d4e2; border-radius:8px; overflow:hidden; transition:border-color .15s;
}
.off-stepper:focus-within { border-color:var(--bleu); }
.off-page .off-step-btn {
  width:36px; height:40px; border:none; background:var(--fond-2); background-image:none;
  color:var(--navy); font-size:1.2rem; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s; font-family:var(--sans); border-radius:0; box-shadow:none;
}
.off-page .off-step-btn::before { content:none; }
.off-page .off-step-btn:hover { background:var(--or-clair); background-image:none; color:var(--navy); }
.off-qty-input {
  flex:1; border:none; text-align:center; font-size:1.1rem; color:var(--encre);
  padding:.4rem 0; min-width:0; outline:none; font-family:var(--sans); font-weight:500; background:transparent;
}
.off-card-sub {
  font-size:.82rem; color:var(--gris); font-family:var(--sans);
  display:flex; justify-content:flex-end; padding-top:.6rem; border-top:1px solid var(--fond-2);
}
.off-card-sub strong { color:var(--navy); margin-left:.3rem; }

/* Les intentions */
.off-intentions { background:#fff; border:1px solid var(--or-clair); border-radius:10px; padding:1.2rem 1.4rem; margin-bottom:1.5rem; }
.off-intentions-title {
  font-size:.88rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--bleu); font-family:var(--sans); font-weight:600; margin-bottom:.9rem;
}
.off-int-row { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.55rem; flex-wrap:wrap; }
.off-int-row:last-child { margin-bottom:0; }
.off-int-sep { margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--fond-2); }
.off-int-row label {
  flex-shrink:0; width:100%; font-size:.88rem; color:var(--navy);
  font-family:var(--sans); font-weight:500; text-align:left; margin:0;
}
.off-int-input {
  flex:1; min-width:0; padding:7px 10px; border:1.5px solid #c8d4e2; border-radius:8px;
  font-size:.9rem; font-family:var(--sans); color:var(--encre); outline:none; transition:border-color .15s;
}
.off-int-input:focus { border-color:var(--bleu); }

/* La barre de total */
.off-total-bar, .don-total-bar {
  background:var(--navy); color:#fff; border-radius:12px;
  padding:1.2rem 1.6rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1.5rem 0 .8rem;
}
.off-total-bar .label, .don-total-bar .label {
  font-size:.88rem; opacity:.75; font-family:var(--sans);
  text-transform:uppercase; letter-spacing:.08em;
}
.off-total-bar .amount, .don-total-bar .amount {
  font-size:2rem; font-family:var(--sans); font-weight:700; line-height:1.1;
}
.don-tax-hint {
  font-size:.82rem; font-family:var(--sans); background:rgba(255,255,255,.12);
  border-radius:6px; padding:.35rem .75rem; color:rgba(255,255,255,.85);
}

/* Titres de section et cadres */
.off-section-title, .don-info-card-title, .don-paymode-title {
  font-size:1rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--bleu); font-family:var(--sans); font-weight:600;
  margin:2rem 0 1.1rem; padding-bottom:.5rem; border-bottom:1px solid var(--or-clair);
}
.don-info-card, .off-nl, .don-extras, .don-bottom-extras {
  background:#fff; border:1px solid var(--or-clair); border-radius:12px;
  padding:1.5rem 1.4rem 1.2rem; margin-bottom:1.5rem;
}
.don-info-card p.intro, .off-info-intro { font-size:.88rem; color:var(--gris); margin:0 0 1.1rem; }

/* Les tuiles de don */
.don-tiles { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:1.5rem; min-width:0; }
.don-tile {
  background:#fff; border:2px solid var(--or-clair); border-radius:12px;
  padding:1.6rem 1.5rem 1.4rem; display:flex; flex-direction:column; gap:1rem;
  transition:border-color .2s, box-shadow .2s; cursor:default; min-width:0; overflow:hidden;
}
.don-tile:focus-within, .don-tile.has-amount { border-color:var(--bleu); box-shadow:0 0 0 4px rgba(79,111,156,.10); }
.don-tile-icon {
  width:48px; height:48px; border-radius:50%; background:var(--fond-2);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--bleu); margin-bottom:.2rem;
}
.don-tile h3 { font-size:1.15rem; color:var(--navy); margin:0 0 .5rem; }
.don-tile-desc { font-size:.88rem; color:var(--gris); line-height:1.55; }
.don-amounts { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem; }
.don-page .don-chip {
  padding:.38rem .85rem; font-size:.88rem; font-family:var(--sans);
  border:1.5px solid var(--or-clair); border-radius:20px;
  background:transparent; background-image:none; color:var(--navy);
  cursor:pointer; transition:all .15s; white-space:nowrap; box-shadow:none;
}
.don-page .don-chip::before { content:none; }
.don-page .don-chip:hover { border-color:var(--bleu); color:var(--bleu); background:var(--fond-2); background-image:none; }
.don-page .don-chip.active { background:var(--bleu); background-image:none; border-color:var(--bleu); color:#fff; font-weight:500; }
.don-custom {
  display:flex; align-items:center; gap:.5rem; border:1.5px solid #c8d4e2;
  border-radius:8px; overflow:hidden; background:#fff; margin-top:.3rem; transition:border-color .15s;
}
.don-custom:focus-within { border-color:var(--bleu); }
.don-custom label { padding:0 0 0 .9rem; font-size:.88rem; color:var(--gris); white-space:nowrap; font-family:var(--sans); margin:0; font-weight:400; }
.don-custom input {
  flex:1; border:none; padding:.6rem .5rem; font-size:1rem; color:var(--encre);
  outline:none; background:transparent; font-family:var(--sans); min-width:0;
}
.don-custom span { padding:0 .9rem 0 0; font-size:.9rem; color:var(--gris); font-family:var(--sans); }
.don-tile-subtotal {
  display:flex; justify-content:flex-end; font-size:.88rem; color:var(--gris);
  font-family:var(--sans); padding-top:.5rem; border-top:1px solid var(--fond-2);
}
.don-tile-subtotal strong { color:var(--navy); margin-left:.3rem; }

/* Cases a cocher */
.don-check-row, .off-check-row { display:flex; align-items:flex-start; gap:.7rem; }
.don-check-row input[type=checkbox], .off-check-row input[type=checkbox] {
  flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color:var(--bleu); cursor:pointer;
}
.don-check-row label, .off-check-row label { font-size:.92rem; color:var(--encre); cursor:pointer; line-height:1.5; margin:0; font-weight:400; }
.don-check-row label a, .off-check-row label a { color:var(--bleu); text-decoration:underline; }
.don-privacy-sep, .off-privacy-sep { margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--fond-2); }

/* Mode de reglement */
.don-paymode-choices { display:flex; gap:.8rem; flex-wrap:wrap; }
.don-pm {
  flex:1; min-width:180px; display:flex; align-items:center; gap:.6rem; cursor:pointer;
  border:1.5px solid var(--or-clair); border-radius:10px; padding:.8rem 1rem;
  font-family:var(--sans); font-size:.95rem; color:var(--navy);
  transition:border-color .15s, background .15s; margin:0; font-weight:400;
}
.don-pm:hover { border-color:var(--bleu); }
.don-pm.is-active { border-color:var(--bleu); background:var(--fond-2); }
.don-pm input { accent-color:var(--bleu); width:17px; height:17px; flex-shrink:0; }
.don-transfer-hint, .off-hint { font-size:.82rem; color:var(--gris); font-family:var(--sans); margin:.6rem 0 0; line-height:1.5; }

/* Le bouton final, et le badge de paiement securise */
.off-page .off-submit-final, .don-page .don-submit-final, .pf-form-page .pf-submit-final {
  width:100%; padding:.9rem 2rem; background:var(--bleu); background-image:none; color:#fff;
  border:none; border-radius:10px; font-size:1rem; font-family:var(--sans);
  font-weight:600; cursor:pointer; transition:background .15s; margin-bottom:.75rem; box-shadow:none;
}
.off-page .off-submit-final::before, .don-page .don-submit-final::before, .pf-form-page .pf-submit-final::before { content:none; }
.off-page .off-submit-final:hover, .don-page .don-submit-final:hover, .pf-form-page .pf-submit-final:hover {
  background:var(--navy); background-image:none; color:#fff;
}
.off-page .off-submit-final:disabled, .don-page .don-submit-final:disabled { opacity:.45; cursor:not-allowed; }
.off-secure, .don-secure {
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  font-size:.8rem; color:var(--gris); font-family:var(--sans); margin-bottom:2rem;
}
.off-secure svg, .don-secure svg { flex-shrink:0; opacity:.55; }

/* Champ obligatoire manquant, saisie conservee apres erreur */
.off-page input.field-missing, .off-page select.field-missing,
.don-page input.field-missing, .don-page select.field-missing,
.pf-form-page input.field-missing, .pf-form-page textarea.field-missing {
  border-color:#c0392b !important; background:#fdf3f2;
}

@media (min-width: 561px) {
  .nl-row--2  { grid-template-columns:1fr 1fr; }
  .don-tiles  { grid-template-columns:1fr 1fr; }
  .off-int-row label { width:120px; text-align:right; }
  .off-int-row { align-items:center; flex-wrap:nowrap; }
}
@media (min-width: 641px) {
  .off-cards { grid-template-columns:repeat(3, 1fr); }
}

/* ── Quatre réglages tirés du RENDU À L'IMAGE (31/07/2026) ────────────────────
   Chacun corrige un défaut vu sur la capture, pas supposé :

   1. (RÉGLAGE ANNULÉ LE 31/07 — voir plus bas « Le formulaire des legs revient
      à côté de la plaquette », demande de Jean.)
   2. Une seule tuile de don occupait la moitié de la largeur, la grille étant
      figée à deux colonnes. En « auto-fit », une tuile seule prend toute la
      largeur et deux se placent côte à côte.
   3. Le menu déroulant du bénéficiaire gardait l'habillage brut du navigateur
      au milieu de champs soignés : il reçoit le même habillage que les autres.
   4. Le thème justifie le texte, ce qui étirait « Trente Messes célébrées » en
      lignes trouées dans les cartes étroites.
   ─────────────────────────────────────────────────────────────────────────── */
.don-tiles { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.don-page .don-benef {
  width: 100%; padding: 10px 13px; font-size: 15px; font-family: var(--sans);
  color: var(--encre); border: 1px solid #c8d4e2; border-radius: 8px;
  background: #fff; outline: none; transition: border-color .15s; box-sizing: border-box;
}
.don-page .don-benef:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(79,111,156,.10); }

.off-card-desc, .don-tile-desc, .off-hint, .off-info-intro,
.don-info-card p.intro, .off-intro, .don-intro { text-align: left; }

@media (min-width: 561px) {
  /* La règle générale ci-dessus doit garder la main sur le réglage à deux
     colonnes posé plus haut : elle est écrite après, elle l'emporte. */
  .don-tiles { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* ─── FORMULAIRE DES LEGS : les champs ajoutés le 31/07 ───────────────────────
   Demande de Jean : la page des legs ouvre désormais un dossier, et demande
   « plus de données (mais pas trop) ». Tout ce qui est ajouté est FACULTATIF, et
   l'écran doit le dire : sur une page où l'on écrit à contrecœur, un champ qui
   a l'air obligatoire fait renoncer. D'où la mention discrète, et des cases à
   cocher plutôt qu'un menu déroulant (on peut envisager un appartement ET une
   assurance-vie, c'est même le cas courant).
   ─────────────────────────────────────────────────────────────────────────── */
.pf-opt { font-weight: 400; font-size: .82rem; color: var(--gris); }

.pf-assets { display: flex; flex-direction: column; gap: .45rem; margin-top: .15rem; }
.pf-asset {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  font-family: var(--sans); font-size: .92rem; font-weight: 400;
  color: var(--encre); cursor: pointer; line-height: 1.4;
}
.pf-asset input[type=checkbox] {
  flex-shrink: 0; width: 18px; height: 18px; margin: 0;
  accent-color: var(--bleu); cursor: pointer;
}
/* Deux colonnes dès qu'il y a la place : cinq cases empilées repoussent le
   bouton d'envoi hors de l'écran sur un ordinateur portable. */
@media (min-width: 561px) {
  .pf-assets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; }
}

/* ─── Bénéficiaires du legs et leurs parts (31/07) ────────────────────────────
   Une ligne = une œuvre + sa part. Le champ de part est étroit à dessein : il
   ne se remplit pas toujours, et large il ferait croire qu'on l'attend. */
.pf-hint { font-size: .82rem; color: var(--gris); margin: .2rem 0 .5rem; line-height: 1.45; }
.pf-benef { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.pf-form-page .pf-benef select { flex: 1 1 auto; min-width: 0; }
.pf-benef-pct { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
/* ⚠ Sélecteur appuyé : `.pf-form-page .nl-group input` impose 100 % à tous les
   champs du formulaire. Sans cela, la part s'étalait sur toute la largeur, ce
   qui la faisait passer pour un champ principal alors qu'elle est facultative
   et tient en deux chiffres. Constaté au rendu. */
.pf-form-page .pf-benef-pct input { width: 6rem; text-align: right; }
.pf-benef-pct > span { font-size: .9rem; color: var(--gris); }
/* ⚠ LE THÈME HÉRITÉ HABILLE TOUS LES <button>, et il s'y prend de TROIS façons
   qu'il faut neutraliser une par une (justitia-custom.css) :
     · `background-image: linear-gradient(#fff, #dcebff)` sur le bouton ;
     · `:hover` → `linear-gradient(#233155, #646E86)`, le dégradé bleu foncé ;
     · et surtout un `::before` en couche, qui porte LE MÊME dégradé et le
       révèle par son opacité — invisible pour qui ne regarde que le fond.
   Retour de Jean le 31/07 : « le bouton Ajouter une œuvre a encore un dégradé
   bleu foncé, je n'en veux pas ici. » La première correction n'avait traité que
   le premier point. C'est le même traitement que `.pf-submit-final::before`,
   posé plus haut dans ce fichier pour la même raison. */
.pf-form-page button.pf-add-benef::before { content: none; }
.pf-form-page button.pf-add-benef {
  /* align-self : le groupe de champs est une colonne flex, ses enfants sont donc
     ÉTIRÉS par défaut. Sans cette ligne, le bouton faisait toute la largeur et
     pesait autant que « Envoyer ma demande », pour une action secondaire. */
  align-self: flex-start;
  display: inline-block; width: auto; background: none; background-image: none;
  border: 1px dashed #c8d4e2; border-radius: 8px; box-shadow: none;
  padding: .45rem .8rem; font-family: var(--sans); font-size: .88rem; font-weight: 400;
  color: var(--bleu); cursor: pointer; text-transform: none; letter-spacing: normal;
  transition: border-color .15s, background .15s;
}
/* Le survol reste discret : un liseré et un fond très clair, jamais de dégradé
   ni de texte blanc. `background-image: none` est explicite parce que c'est par
   l'IMAGE de fond que le thème repeint, pas par la couleur. */
.pf-form-page button.pf-add-benef:hover {
  border-color: var(--bleu); background: var(--fond-2); background-image: none; color: var(--bleu);
}
.pf-form-page button.pf-add-benef:hover::before { content: none; }

/* Le message sous les bénéficiaires change d'état pendant la saisie
   (legacy-form.js) : il annonce le total, ou ce qui cloche. */
.pf-hint--err { color: #b3261e; }
.pf-hint--ok  { color: #1b6b3a; }

/* ─── Le formulaire des legs revient À CÔTÉ de la plaquette (31/07) ───────────
   Demande de Jean : « le formulaire devrait s'afficher à droite de la tuile qui
   mène vers le PDF, pas en dessous ».

   La page le prévoyait DÉJÀ : son contenu est une rangée du page builder avec
   une colonne de 4 (la plaquette) et une de 8 (le formulaire), et `.pb-row` est
   une grille en 12 colonnes. C'est un `clear: both` posé plus haut dans ce
   fichier, le 31/07 au matin, qui poussait le formulaire sous la plaquette : il
   est retiré. Le réglage était fondé à l'époque — la plaquette flottait — mais
   il survivait à sa cause.

   Ce qui reste ici tient au fait que le formulaire est le seul contenu « pf- »
   qui vive dans une colonne étroite : sa largeur maximale de 620 px, pensée pour
   une page entière, laissait un vide à droite dans une colonne de 8/12.
   ─────────────────────────────────────────────────────────────────────────── */
.pf-legacy-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem 2.5rem; align-items: start; }
.pf-legacy-main .pf-form-page { max-width: none; }
/* La plaquette occupe TOUTE la colonne de gauche. Son contenu vient du page
   builder, où elle vit dans une colonne de 4/12 : sans cette règle, elle ferait
   4/12 de la colonne de gauche, soit une vignette de la taille d'un timbre. */
.pf-legacy-aside .pb-row { display: block; margin: 0; }
.pf-legacy-aside .pb-col[class*="col-"] { width: 100%; max-width: none; }
/* La colonne 8 du contenu hérité est VIDE (l'ancien formulaire Joomla y vivait) :
   elle ne doit pas creuser un blanc sous la plaquette. */
.pf-legacy-aside .pb-col.col-md-8:empty,
.pf-legacy-aside .pb-col.col-md-8 .sppb-addon-wrapper:not(:has(*)) { display: none; }
/* Sur un téléphone, les deux colonnes s'empilent : la plaquette d'abord, puis le
   formulaire, ce qui est le bon ordre de lecture. */
@media (max-width: 900px) {
  .pf-legacy-split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPELS DE FONDS : LES JAUGES (01/08/2026, demande de Jean)

   Posées sur la page publique d'un apostolat, juste sous le bloc des chanoines.
   Trois traitements ont été soumis en maquette ; Jean a retenu la barre à deux
   niveaux : le PLEIN est l'argent constaté, le HACHURÉ ce qui est promis sans
   avoir été vu.

   ⚠ Le plafonnement à 100 % est fait CÔTÉ PHP (funds_compute), pas ici. Quand
     le promis dépasserait l'objectif, la barre s'arrête au bout et la légende
     perd son montant : on n'annonce jamais un objectif dépassé sur la foi de
     promesses. Le CSS ne fait que dessiner ce qu'on lui donne.

   Couleurs et polices prises dans le :root de site.css, jamais écrites en dur.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-funds { margin: 1.8rem 0 2.2rem; }

.pf-fund {
  background: #fff; border: 1px solid #dfe6ef; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(29,37,64,.06);
  overflow: hidden; margin-bottom: 1.1rem;
  display: flex; flex-direction: row; align-items: stretch;
}
.pf-fund-img { flex-shrink: 0; width: 190px; }
.pf-fund-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-fund-corps { flex: 1; min-width: 0; padding: 1.35rem 1.6rem 1.5rem; }

.pf-fund-titre {
  font-family: var(--titre), Georgia, serif; font-weight: 400;
  font-size: 1.5rem; line-height: 1.2; color: var(--navy-dark, #1d2540);
  margin: 0 0 .55rem;
}
.pf-fund-intro { font-size: .93rem; line-height: 1.65; color: var(--encre, #26303f);
                 margin: 0 0 1.15rem; max-width: 62ch; }

/* ---- Chiffres au-dessus de la barre ---- */
.pf-j-tete { display: flex; align-items: baseline; justify-content: space-between;
             gap: .75rem; flex-wrap: wrap; margin-bottom: .55rem; }
.pf-j-fait { font-family: var(--titre), Georgia, serif; font-size: 1.8rem;
             color: var(--navy-dark, #1d2540); line-height: 1; }
.pf-j-fait small { font-family: var(--corps); font-size: .87rem; color: var(--gris, #5b6677); }
/* Aucun versement constaté : on l'écrit, plutôt qu'un « 0 € » qui se lirait
   comme un échec de la collecte alors que c'est un défaut de constatation. */
.pf-j-fait.pf-j-rien { font-size: 1.28rem; color: var(--gris, #5b6677); }
.pf-j-but { font-family: var(--sans), system-ui; font-size: .82rem; color: var(--gris, #5b6677); }
.pf-j-but b { color: var(--navy-dark, #1d2540); font-weight: 600; }

/* ---- La barre ---- */
.pf-j-barre { position: relative; height: 13px; border-radius: 99px;
              background: #e7edf4; overflow: hidden; }
.pf-j-part { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; }
.pf-j-recu { background: linear-gradient(90deg, var(--bleu, #4f6f9c), var(--navy, #2b3550)); z-index: 2; }
.pf-j-promis { background: repeating-linear-gradient(135deg, #cdd9e8 0 6px, #dce5f0 6px 12px); z-index: 1; }
/* ─── LA BANDE DU MILIEU (01/08, demande de Jean) ────────────────────────────
   « Ceux qui ont promis et qui ont donné moins. » Elle se lit entre les deux :
   plus soutenue que le hachuré des promesses (ces gens-là ont donné), plus
   claire que le plein (une part manque encore). Le motif est DIFFÉRENT et pas
   seulement plus foncé : sur un écran mal réglé ou imprimé en noir et blanc,
   deux bleus voisins deviennent la même chose, alors que des rayures fines se
   distinguent toujours de rayures larges. */
.pf-j-partiel {
  background: repeating-linear-gradient(135deg,
              var(--navy, #2b3550) 0 3px, #8fa6c4 3px 7px);
  z-index: 1;
}

/* ---- Légende et date ---- */
.pf-j-pied { display: flex; align-items: center; justify-content: space-between;
             gap: .9rem; flex-wrap: wrap; margin-top: .6rem; }
.pf-j-leg { display: flex; gap: 1rem; flex-wrap: wrap;
            font-family: var(--sans), system-ui; font-size: .78rem; color: var(--gris, #5b6677); }
.pf-j-leg span { display: inline-flex; align-items: center; gap: .38rem; }
.pf-puce { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.pf-puce-recu { background: linear-gradient(90deg, var(--bleu, #4f6f9c), var(--navy, #2b3550)); }
.pf-puce-promis { background: repeating-linear-gradient(135deg, #cdd9e8 0 4px, #dce5f0 4px 8px);
                  border: 1px solid #c3d1e2; }
.pf-j-atteint { color: #1e7a4a; font-weight: 600; }
/* « il manque X » (01/08, demande de Jean). Volontairement discret : c est une
   information, pas une alarme — le visiteur doit la lire, pas la subir. */
.pf-j-manque { color: var(--gris, #5b6677); }
.pf-j-manque b { color: var(--navy-dark, #1d2540); font-weight: 600; }
/* La date dit que le chiffre vit. Une date précise, et non « aujourd'hui » :
   un visiteur qui revient voit ainsi tout de suite si la page a bougé. */
.pf-j-date { font-family: var(--sans), system-ui; font-size: .75rem;
             color: #8894a6; font-style: italic; }

/* ---- Boutons ---- */
.pf-j-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.pf-b { display: inline-block; font-family: var(--sans), system-ui; font-size: .88rem;
        font-weight: 600; text-decoration: none; padding: .68rem 1.25rem;
        border-radius: 6px; border: 1px solid transparent; transition: background-color .18s ease; }
.pf-b-1 { background: var(--navy, #2b3550); color: #fff; }
.pf-b-1:hover { background: var(--navy-dark, #1d2540); color: #fff; }
.pf-b-2 { background: #fff; color: var(--navy, #2b3550); border-color: #c3d1e2; }
.pf-b-2:hover { background: var(--fond-2, #eaeff5); color: var(--navy, #2b3550); }

/* ---- Téléphone : la vignette passe au-dessus, le reste s'empile ---- */
@media (max-width: 620px) {
  .pf-fund { flex-direction: column; }
  .pf-fund-img { width: 100%; height: 150px; }
  .pf-fund-corps { padding: 1.1rem 1.15rem 1.25rem; }
  .pf-j-fait { font-size: 1.55rem; }
  .pf-b { width: 100%; text-align: center; }
}

/* Bandeau « Votre don soutiendra … », quand on arrive par la jauge d'un projet
   (01/08/2026). Sans lui, le visiteur qui vient de cliquer sur une jauge tombe
   sur un formulaire général et croit s'être trompé de lien. */
.don-fund-banner {
  background: var(--fond-2, #eaeff5); border-left: 3px solid var(--bleu, #4f6f9c);
  border-radius: 0 8px 8px 0; padding: .85rem 1.15rem; margin: 0 0 1.4rem;
}
.don-fund-sur { display: block; font-family: var(--sans), system-ui;
                font-size: .7rem; font-weight: 700; letter-spacing: .14em;
                text-transform: uppercase; color: var(--bleu, #4f6f9c); margin-bottom: .15rem; }
.don-fund-banner strong { display: block; font-family: var(--titre), Georgia, serif;
                          font-weight: 400; font-size: 1.22rem; color: var(--navy-dark, #1d2540); }
.don-fund-intro { display: block; font-size: .87rem; color: var(--gris, #5b6677); margin-top: .3rem; }

/* ---- Vidéo de campagne, à côté de la jauge (01/08/2026) ------------------
   Deux formats au choix par campagne : celle de Rennes est un format vertical
   (son iframe d'origine fait 315x560), celle d'Armentières est en paysage.
   Le ratio est porté par aspect-ratio et non par une hauteur fixe : une
   hauteur en dur déforme la vidéo dès que la colonne se resserre. */
.pf-fund-video { flex-shrink: 0; background: #000; align-self: flex-start; margin: 1.35rem 0 1.35rem 1.6rem; }
.pf-fund-video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.pf-fund-video--landscape { width: 300px; aspect-ratio: 16 / 9; border-radius: 8px; }
.pf-fund-video--portrait  { width: 190px; aspect-ratio: 9 / 16; border-radius: 8px; }
/* La vidéo passe à DROITE de la jauge : le texte et les chiffres gardent la
   lecture de gauche, la vidéo vient en appui. */
.pf-fund--landscape, .pf-fund--portrait { flex-direction: row-reverse; }
.pf-fund--landscape .pf-fund-video, .pf-fund--portrait .pf-fund-video { margin: 1.35rem 1.6rem 1.35rem 0; }

/* ---- Mention fiscale, sous les boutons ---- */
.pf-fund-fiscal {
  margin: 1rem 0 0; font-family: var(--sans), system-ui;
  font-size: .78rem; line-height: 1.55; color: var(--gris, #5b6677);
}

@media (max-width: 620px) {
  /* La vidéo repasse AU-DESSUS et pleine largeur : à 390 px, une colonne de
     190 px à côté du texte ne laisserait que quelques mots par ligne. */
  .pf-fund--landscape, .pf-fund--portrait { flex-direction: column; }
  .pf-fund-video { width: 100% !important; margin: 0 !important; border-radius: 0; }
  .pf-fund-video iframe { border-radius: 0; }
  .pf-fund-video--portrait { aspect-ratio: 16 / 9; }
}

/* Bloc du versement récurrent, en remplacement du choix de mode (01/08/2026).
   La carte bancaire n'y est pas proposée : la carte LCL ne prend qu'un paiement
   unique, et quelqu'un venant de « Mettre en place un virement mensuel »
   croirait son versement récurrent en place après un règlement isolé. */
.don-recurrent {
  background: var(--fond-2, #eaeff5); border-radius: 8px;
  padding: .9rem 1.15rem; margin: .35rem 0 0;
}
.don-recurrent p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.6; }
.don-recurrent p:last-child { margin-bottom: 0; }

/* Choix « une seule fois » / « chaque mois », en haut du mode de règlement
   (01/08/2026, demande de Jean : le choix vaut pour TOUT don, campagne ou non). */
.don-kind-choices { display: flex; gap: .75rem; flex-wrap: wrap; margin: .35rem 0 1.4rem; }
.don-kind {
  flex: 1; min-width: 210px; cursor: pointer;
  border: 1px solid #c9d5e3; border-radius: 9px; padding: .8rem 1rem;
  background: #fff; transition: border-color .15s ease, background-color .15s ease;
}
.don-kind:hover { border-color: var(--bleu, #4f6f9c); }
.don-kind.is-active { border-color: var(--navy, #2b3550); background: var(--fond-2, #eaeff5); }
.don-kind input { margin-right: .45rem; }
.don-kind strong { font-family: var(--sans), system-ui; font-size: .95rem; color: var(--navy-dark, #1d2540); }
.don-kind span { display: block; margin-top: .25rem; font-size: .8rem; color: var(--gris, #5b6677); line-height: 1.5; }

/* Signature du mandat SEPA : la case est mise en avant, c'est un engagement
   et non une option de confort (01/08/2026). */
.don-mandat-consent { margin: .9rem 0 .6rem; padding: .7rem .9rem;
  background: #fff; border: 1px solid #c9d5e3; border-radius: 7px; }
.don-mandat-consent label { font-weight: 600; color: var(--navy-dark, #1d2540); }
/* ---- Encart WhatsApp de l'apostolat (01/08/2026) ---- */

/*      (le bloc est desormais en fin de fichier, voir « .pf-wa ») */

/* ---- L'icône PDF d'un sermon, tout à droite (01/08/2026) -----------------
   Jean : « tout à droite il faudrait mettre l'icône du document, comme ça même
   sans ouvrir l'audio on peut quand même lire le PDF ».
   La rangée met la tuile et le lien côte à côte : le lien est HORS du bouton,
   un <a> dans un <button> étant du HTML invalide. */
.audio-row { display: flex; align-items: stretch; gap: .35rem; }
.audio-row > .audio-item { flex: 1; min-width: 0; }
.audio-pdf {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff;
  color: var(--gris, #5b6677); text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.audio-pdf svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                 stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.audio-pdf:hover { color: var(--navy, #2b3550); border-color: var(--bleu, #4f6f9c); background: var(--fond-2, #eaeff5); }
.audio-pdf:focus-visible { outline: 2px solid var(--bleu, #4f6f9c); outline-offset: 2px; }
@media (max-width: 520px) { .audio-pdf { width: 40px; } }

/* ─── L'ENCART « COMMUNAUTÉ WHATSAPP » ───────────────────────────────────────
   Trois retours de Jean le 01/08, qui ont fini par dessiner la même chose des
   deux côtés :
     · « un grand espace vide avant le bouton » — le texte portait
       « flex: 1 1 280px » et repoussait le bouton contre le bord droit ;
     · « en fait, je parle sur mobile » — la disposition en colonne empilait
       logo, titre, texte et bouton sur quatre lignes ;
     · « aligne le titre avec le centre du logo, mets le petit texte en dessous,
       centré comme "Je m'inscris" ».

   D'où UNE SEULE grille pour tout le monde : le logo tient la première colonne,
   le TITRE se met à sa droite et se centre sur lui, la description et le bouton
   passent en dessous, centrés. Une seule disposition, donc rien qui puisse
   diverger entre le téléphone et l'ordinateur — c'est ce qui a produit les deux
   allers-retours précédents. */
.pf-wa {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .6rem .95rem;
  background: #fff; border: 1px solid #cfe9d8; border-left: 4px solid #25d366;
  border-radius: 12px; padding: 1.05rem 1.35rem; margin: 1.6rem 0;
  box-shadow: 0 2px 10px rgba(29,37,64,.05);
}
.pf-wa-ico {
  grid-column: 1; grid-row: 1;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.45rem;
}
/* « display: contents » : l'enveloppe du texte s'efface, et ses deux enfants
   deviennent des cases de la grille. Sans cela, le titre et la description
   resteraient collés l'un sous l'autre dans une seule case, et le titre ne
   pourrait pas se centrer sur le logo. */
.pf-wa-txt { display: contents; }
.pf-wa-txt strong {
  grid-column: 2; grid-row: 1; align-self: center;
  font-family: var(--titre), Georgia, serif; font-weight: 400;
  font-size: 1.16rem; color: var(--navy-dark, #1d2540); margin: 0;
}
/* La description sous les deux colonnes, centrée comme le bouton. */
.pf-wa-txt span {
  grid-column: 1 / -1; grid-row: 2;
  font-size: .88rem; line-height: 1.55; color: var(--gris, #5b6677);
  text-align: center;
}
.pf-wa-btn {
  grid-column: 1 / -1; grid-row: 3; justify-self: center;
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25d366; color: #fff; text-decoration: none;
  font-family: var(--sans), system-ui; font-size: .9rem; font-weight: 600;
  padding: .68rem 1.4rem; border-radius: 7px;
  transition: background-color .18s ease, transform .18s ease;
}
.pf-wa-btn:hover { background: #1da851; color: #fff; transform: translateY(-1px); }
@media (max-width: 560px) {
  .pf-wa { gap: .55rem .8rem; padding: .95rem 1rem; }
  .pf-wa-ico { width: 40px; height: 40px; font-size: 1.25rem; }
  .pf-wa-txt strong { font-size: 1.05rem; }
  /* Sur téléphone le bouton prend toute la largeur : une cible tactile étroite
     au milieu d'un écran de 390 px se rate. */
  .pf-wa-btn { justify-self: stretch; width: 100%; justify-content: center; }
}

/* L'adresse de courriel écrite en clair, sans que la chaîne complète existe
   d'un seul tenant dans le HTML (01/08/2026 : remplace le masquage de Joomla,
   qui n'affichait plus qu'une phrase d'excuse). Le « @ » est dans son propre
   élément — il ne doit rien changer à la lecture. */
.pf-at { display: inline; }
.pf-mail-lien { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.pf-mail-lien:hover { color: var(--bordeaux, #7d2b3b); }

/* La note sous le titre « Horaires » (01/08/2026) : « L'assistance à ces offices
   est réservée aux sœurs et aux retraitants », « Horaires estivaux »… Elle vaut
   pour tout le bloc, d'où sa place juste sous le titre. */
.org-schedule-note {
  font-style: italic; font-size: .92rem; color: var(--gris, #5b6677);
  margin: -.2rem 0 .8rem;
}

/* ─── LA PAGE DE CONTACT EN DEUX COLONNES (01/08/2026, demande de Jean) ──────
   « À gauche, la partie avec l'image, l'adresse et les informations. À droite,
   sur la même ligne, le formulaire pour nous écrire. »
   Les deux morceaux étaient l'un SOUS l'autre, dans des conteneurs séparés. */
.pf-contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
  margin: 2.2rem 0 3rem;
}
.pf-contact-infos > .page-content { padding: 0; max-width: none; }
/* Le bloc hérité de Joomla empilait image et texte sur deux colonnes internes :
   dans une demi-largeur, elles n'ont plus la place. On les remet l'une sous
   l'autre, ce qui donne image en haut, coordonnées dessous. */
.pf-contact-infos .pb-row { display: block; }
.pf-contact-infos .pb-col { width: 100%; max-width: none; flex: none; }
.pf-contact-infos .sppb-person-image { margin-bottom: 1.1rem; }
.pf-contact-infos .sppb-person-image img { width: 100%; height: auto; border-radius: 10px; }
/* Les trois lignes de coordonnées se suivaient sans respirer : elles sortent
   d'un import et n'ont aucune balise entre elles. */
.pf-contact-infos .sppb-person-information,
.pf-contact-infos .sppb-person-introtext { line-height: 1.9; font-size: .95rem; }
.pf-contact-infos .sppb-person-information { font-weight: 600; color: var(--navy-dark, #1d2540); }
.pf-contact-form .pf-form-page { margin-top: 0; }

@media (max-width: 860px) {
  /* Une colonne : sur téléphone, deux demi-largeurs rendraient le formulaire
     inutilisable. */
  .pf-contact-split { grid-template-columns: 1fr; gap: 1.6rem; margin: 1.4rem 0 2.2rem; }
}