/* =============================================================================
   SITE PUBLIC DE LA PROVINCE DE FRANCE — feuille de style unique.
   -----------------------------------------------------------------------------
   ORIGINE : ce fichier est le système de design du site international
   icrss.org (site/public/assets/css/site.css), repris à la demande de Jean du
   01/08/2026 : « reprends exactement l'apparence du site icrss.org ». Il
   REMPLACE les quatre feuilles du template Joomla T4 « ja_justitia »
   (fa6.min.css, t4-bundle.css, justitia-custom.css, justitia-all.css) et les
   1469 lignes de rustines de l'ancien public.css, qui reproduisaient
   l'apparence de l'ancien site.

   CE QUI A ÉTÉ RETIRÉ d'icrss, parce que la Province n'en a pas l'usage :
   le sélecteur de langue (site monolingue), la frise de la page Histoire, le
   widget « pensées du jour », la page Spiritualité du charisme et la galerie
   de chant grégorien.

   CE QUI A ÉTÉ AJOUTÉ pour la Province, tout en bas du fichier : la recherche
   dans la barre de menu, le bandeau de l'ordo, les pages d'apostolat
   (chanoines, horaires, carte, sermons), la carte de France et les
   formulaires publics.

   POUR CHANGER LES COULEURS OU LES POLICES de tout le site, il suffit de
   modifier le bloc :root ci-dessous. Tout le reste s'y adapte.
   ============================================================================= */

/* Polices Goudy (hébergées localement, récupérées du site de Loisy) :
   GoudyModern pour les titres, GoudyOldstyle pour les italiques élégantes. */
@font-face{
  /* GoudyModern n'existe QU'EN graisse normale : on déclare le fichier sur toute
     la plage 100–900 pour que le navigateur n'invente JAMAIS un faux-gras
     (font-weight:bold/600/700 rendra les vrais glyphes réguliers, pas un gras
     synthétisé). Règle voulue par Jean : ne jamais mettre GoudyModern en gras. */
  font-family:'GoudyModern'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/goudy-modern-regular.woff2') format('woff2');
}
@font-face{
  font-family:'GoudyOldstyle'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/goudy-oldstyle-italic.woff2') format('woff2');
}

/* Police Servus (hébergée localement, récupérée du site de la Province de France) */
@font-face{
  font-family:'Servus'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Servus-Regular.woff2') format('woff2'),
      url('../fonts/Servus-Regular.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/Servus-RegularItalic.woff2') format('woff2'),
      url('../fonts/Servus-RegularItalic.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Servus-Bold.woff2') format('woff2'),
      url('../fonts/Servus-Bold.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:italic; font-weight:700; font-display:swap;
  src:url('../fonts/Servus-BoldItalic.woff2') format('woff2'),
      url('../fonts/Servus-BoldItalic.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/Servus-SemiBold.woff2') format('woff2'),
      url('../fonts/Servus-SemiBold.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:italic; font-weight:600; font-display:swap;
  src:url('../fonts/Servus-SemiBoldItalic.woff2') format('woff2'),
      url('../fonts/Servus-SemiBoldItalic.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/Servus-Light.woff2') format('woff2'),
      url('../fonts/Servus-Light.woff') format('woff');
}
@font-face{
  font-family:'Servus'; font-style:italic; font-weight:300; font-display:swap;
  src:url('../fonts/Servus-LightItalic.woff2') format('woff2'),
      url('../fonts/Servus-LightItalic.woff') format('woff');
}

/* ============================================================
   CHARTE GRAPHIQUE DU SITE — palette bleu marine de la Province de France.
   ------------------------------------------------------------
   Ce sont exactement les valeurs d'icrss.org, et ce n'est pas un hasard :
   icrss.org avait lui-même pris ce bleu à la Province (son propre fichier
   porte le commentaire « palette BLEUE inspirée de la Province de France »).
   Reprendre son apparence ne fait donc entrer AUCUNE couleur étrangère.

   ⚠ L'ACCENT ROUGE DE L'ANCIEN SITE A DISPARU (décision de Jean du 01/08,
   « suivre icrss exactement ») : les cercles d'icônes, les mots mis en valeur
   et les boutons d'action étaient rouges, ils sont désormais bleus. Pour le
   rétablir un jour, il suffirait d'ajouter une variable --accent ici et de
   la poser sur .pilier .ico, .card .date et .btn — rien d'autre.

   Titres : GoudyModern. Texte : Servus. Menu : Marcellus (capitales).
   ============================================================ */
:root{
  /* Bleus de la charte */
  --navy:#2b3550; --navy-dark:#1d2540; --bleu:#4f6f9c; --bleu-clair:#93aac4;
  /* Fonds et encre */
  --fond:#f6f8fb; --fond-2:#eaeff5; --encre:#26303f; --gris:#5b6677;

  /* --- Noms historiques conservés (désormais en BLEU) : ainsi toutes les règles
         et les gabarits qui utilisent var(--bordeaux), var(--or)... suivent. --- */
  --bordeaux:#2b3550; --bordeaux-dark:#1d2540; --rouge:#4f6f9c;
  --or:#7290b3; --or-clair:#cdd9e8; --or-fonce:#4f6f9c;
  --creme:#f6f8fb; --creme-2:#eaeff5;

  /* Polices */
  --titre:'GoudyModern', Georgia, 'Times New Roman', serif;
  --titre-italique:'GoudyOldstyle', Georgia, serif;
  --corps:'Servus', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:'Google Sans Flex', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Police de la barre de menu (onglets de premier niveau) : capitales romaines
     élégantes Marcellus, en harmonie avec les titres GoudyModern. */
  --menu:'Marcellus', 'GoudyModern', Georgia, serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--corps);color:var(--encre);background:var(--fond);font-size:17px;line-height:1.7}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;line-height:1.2;color:var(--navy)}
/* Éléments UI : navigation, badges, étiquettes, dates, formulaires → sans-serif */
.sub-menu a,
.tile-tag,.tile-date,.tile-author,
.fc-date,.fc-author,
.news-filter a,.news-filter-year a,
.pagination a,.pagination span,
.btn,.ap-title,.ap-spd-btn,
.news-search input,.nl-group input,.nl-group select,
input,button,select,textarea{font-family:var(--sans)}
a{color:var(--bleu);text-decoration:none}
a:hover{color:var(--navy)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--bleu);z-index:60;transition:width .1s}

/* Lien d'évitement (accessibilité clavier) : invisible tant qu'il n'a pas le
   focus ; premier élément tabulable de chaque page, il saute au contenu. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
  padding:.6rem 1.1rem;border-radius:0 0 8px 0;font-family:var(--sans);font-size:.95rem}
.skip-link:focus{left:0;color:#fff}

/* ---------- Barre de menu : fixée tout en haut, pleine largeur ---------- */
/* Logo collé à gauche, recherche collée à droite, menu au centre. Transparente sur
   l'image ; fond bleu progressif au défilement (site.js fait varier --navbg). */
.mainnav{position:fixed;top:0;left:0;right:0;z-index:50;min-height:60px;
  background:rgba(29,37,64,calc(var(--navbg,0)));transition:background .25s,box-shadow .25s;
  display:flex;justify-content:center}
.mainnav.solid{box-shadow:0 2px 12px rgba(0,0,0,.22)}
/* Wrapper centré qui contient tout le contenu de la barre */
.nav-inner{width:100%;max-width:1180px;display:flex;align-items:center;gap:18px;padding:0 30px}
.nav-logo{flex-shrink:0;display:flex;align-items:center;overflow:visible}
.nav-logo img{height:40px;width:auto;display:block;transition:height .3s,opacity .3s,transform .3s}
/* Accueil : logo caché, apparaît avec la barre bleue au scroll */
.home .nav-logo img{opacity:0;pointer-events:none}
.home .mainnav.solid .nav-logo img{opacity:1;pointer-events:auto}
/* Autres pages : logo grand, descendu sous la barre ; remonte et se réduit au scroll */
body:not(.home) .nav-logo img{height:72px;transform:translateY(16px)}
body:not(.home) .mainnav.solid .nav-logo img{height:40px;transform:translateY(0)}
.nav-collapse{flex:1;display:flex;align-items:center}
.nav-links{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:2px;flex:1;justify-content:center;margin:0}
/* Éléments de premier niveau : qu'ils soient cliquables (<a>) ou de simples
   libellés déclencheurs de sous-menu (<span class="nav-parent-label">), ils
   partagent EXACTEMENT la même apparence (police, taille, graisse, couleur,
   opacité). Ainsi un onglet-lien ne ressort jamais « plus gras » que les autres. */
.nav-links a,
.nav-links span.nav-parent-label{
  position:relative;
  display:block;padding:10px 14px;font-family:var(--menu);font-size:16px;font-weight:400;
  letter-spacing:1.6px;text-transform:uppercase;color:#fff;opacity:.7;transition:.2s}
.nav-links span.nav-parent-label{cursor:default}
/* Au survol : le texte RESTE blanc (plus de bleu). */
.nav-links a:hover{color:#fff;opacity:1}
.has-sub:hover>.nav-parent-label{opacity:1}
/* Bande blanche au survol, deux cas :
   1. Onglet de premier niveau SANS sous-menu (ex. « Dans le monde ») : bande sur
      la largeur du TEXTE, en bas de l'onglet (`>li>a` = on exclut les liens des
      sous-menus, qui ne doivent donc PAS avoir de bande). */
.nav-links>li>a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;
  background:#fff;opacity:0;transition:opacity .2s ease}
.nav-links>li>a:hover::after{opacity:1}
/* 2. Onglet AVEC sous-menu : bande sur TOUTE la largeur du cadre du sous-menu, en
      tête de celui-ci (remplace l'ancienne bande bleue), visible UNIQUEMENT quand
      on survole le libellé parent — pas quand on survole les items du sous-menu
      (sélecteur de frère `~` : le survol d'un item ne survole plus le parent). */
.sub-menu::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:#fff;opacity:0;transition:opacity .2s ease}
.nav-parent-label:hover ~ .sub-menu::after{opacity:1}
/* --- Sous-menus déroulants (desktop) --- */
.nav-links li{position:relative}
.sub-toggle{display:none} /* visible seulement sur mobile */
.sub-menu{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:230px;background:var(--navy-dark);
  border-radius:0 0 8px 8px;
  box-shadow:0 14px 32px rgba(0,0,0,.35);list-style:none;z-index:55;
  padding:6px 0 6px;
  /* Pont invisible : le padding-top crée une zone de survol continue entre
     le lien parent et le sous-menu, évitant le "hover gap" qui referme
     le dropdown quand la souris traverse l'espace entre les deux. */
}
.sub-menu::before{
  content:"";position:absolute;top:-10px;left:0;right:0;height:10px;
  /* Zone tampon transparente qui prolonge la zone de survol vers le haut */
}
.sub-menu a{
  display:block;padding:11px 20px;
  font-family:var(--sans);font-size:13.5px;font-weight:400;
  letter-spacing:.4px;text-transform:none;
  color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.07);transition:.15s
}
.sub-menu li:last-child a{border-bottom:none}
.sub-menu a:hover{background:rgba(79,111,156,.28);color:#fff;padding-left:26px}
/* Afficher au survol du <li> (focus-within pour le clavier) */
.has-sub:hover>.sub-menu,.has-sub:focus-within>.sub-menu{display:block}
/* Réseaux sociaux : icônes blanches collées au bord GAUCHE de l'écran.
   Volontairement SORTIES du flux (position absolue par rapport à .mainnav, qui est
   en position:fixed) : avec la recherche collée à droite, tout le centre reste au
   menu, qui est ainsi plus espacé. Elles sont donc excentrées par rapport au reste
   du contenu : c'est assumé. Même opacité que les onglets (.7 → 1 au survol). */
.nav-social{position:absolute;left:14px;top:0;height:100%;z-index:2;
  display:flex;align-items:center;gap:4px}
.nav-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  color:#fff;opacity:.7;border-radius:50%;transition:opacity .2s,background .2s}
.nav-social a:hover{opacity:1;background:rgba(255,255,255,.14)}
.nav-social svg{width:17px;height:17px;display:block}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:26px;height:2px;background:#fff;transition:.25s}

/* ---------- Bandeau de tête (masthead) ---------- */
.masthead{position:relative;background-color:var(--navy);background-size:cover;background-position:center;
  color:#fff;min-height:36vh;display:flex;flex-direction:column;justify-content:center}
.masthead--big{min-height:60vh}

/* ⚠ UN VOILE SOMBRE SOUS LA BARRE DE MENU (01/08, demande de Jean : « sous la
   bande supérieure, où il y a le menu, il faudrait tout de même en dessous un
   petit dégradé bleu foncé au-dessus de l'image en masthead, pour que ça se
   fonde ensuite dedans ; sinon on ne voit pas bien les titres de menu »).

   La barre de menu est TRANSPARENTE et flotte sur la photographie. Tant que
   celle-ci est sombre, les titres se lisent ; sur une photographie claire — un
   sanctuaire éclairé, une façade au soleil — ils s'y noient. Le voile général du
   bandeau ne peut pas répondre à ce besoin : il a été ALLÉGÉ le matin même à la
   demande de Jean (« l'image de fond doit être moins sombre »), et l'assombrir
   de nouveau reviendrait sur cette décision.

   D'où un dégradé LOCAL, dense en haut et nul à 210 px : il ne teinte que la
   bande qui passe sous le menu, et se fond dans la photographie au lieu de la
   couper par une arête. Il est posé en pseudo-élément plutôt que dans le style
   en ligne du bandeau, qui porte déjà le voile général et sa photographie.

   ⚠ LE CONTENU DOIT REPASSER AU-DESSUS : sans `position:relative` sur
   .masthead-center, le titre et les armes se retrouveraient SOUS ce voile. */
.masthead::before{
  content:"";position:absolute;left:0;right:0;top:0;height:210px;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(20,28,48,.72) 0%, rgba(20,28,48,.45) 45%, rgba(20,28,48,0) 100%)}
/* Titre + devise, centrés en blanc (padding haut pour passer sous la barre fixe). */
.masthead-center{text-align:center;padding:90px 24px 50px;max-width:1000px;margin:0 auto;
  position:relative;z-index:1}
/* ⚠ OMBRES PORTÉES RENFORCÉES le 01/08, en même temps que l'allègement du voile
   sur la photographie (voir masthead_html() dans includes/public-layout.php).
   Le voile est passé de .42/.66 à .22/.44 : c'est désormais l'ombre du texte,
   et non plus le voile, qui garantit la lisibilité du blanc sur une photo
   claire. Les deux réglages vont ensemble — alléger l'un sans renforcer l'autre
   rend le titre illisible dès que la photographie est lumineuse. */
.masthead-center h1{color:#fff;font-size:clamp(30px,5.2vw,56px);line-height:1.1;
  text-shadow:0 2px 6px rgba(10,16,32,.55), 0 2px 22px rgba(10,16,32,.45)}
.masthead-center .devise{font-family:var(--titre-italique);font-style:italic;color:#eef4fb;font-size:clamp(18px,2.6vw,28px);margin-top:14px;
  text-shadow:0 2px 6px rgba(10,16,32,.55), 0 2px 16px rgba(10,16,32,.4)}
/* Les armes de l'Institut, en tête du bandeau d'accueil (comme sur icrss.org).
   Le <picture> qui les porte est un élément en ligne : sans `display:block` sur
   lui, la marge automatique de l'image ne la centrerait pas. */
.masthead-center picture{display:block}
.masthead-logo{width:135px;height:auto;margin:0 auto 20px;display:block;filter:drop-shadow(0 3px 14px rgba(10,16,32,.5))}
@media(max-width:640px){.masthead-logo{width:100px}}

/* ---------- Encart de présentation, débordant sur le bas du bandeau ---------- */
.intro-card-wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:5}
.intro-card{background:#fff;margin-top:-72px;padding:40px 48px;border-radius:14px;border-top:4px solid var(--bleu);
  box-shadow:0 18px 50px rgba(29,37,64,.18);color:#39424f;text-align:justify}
.intro-card p{font-size:1.18rem;line-height:1.85;margin:0}
@media(max-width:640px){
  .intro-card{margin-top:-44px;padding:26px 22px;border-radius:10px}
  .masthead-logo{width:100px}
  .intro-card p{font-size:1.05rem}
}

/* ---------- Hero (accueil) : image assombrie + titre blanc ---------- */
.hero{position:relative;height:88vh;min-height:480px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:linear-gradient(rgba(20,28,48,.5),rgba(20,28,48,.78)),url('../img/masthead.jpg') center/cover;animation:slowzoom 18s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero .inner{position:relative;max-width:820px;padding:40px 24px;color:#fff}
.hero h2{color:#fff;font-size:clamp(34px,6vw,58px);font-weight:400;margin-bottom:18px;letter-spacing:1px}
.hero blockquote{font-size:clamp(18px,2.4vw,23px);font-style:italic;color:#dbe5f1;line-height:1.5}
.hero cite{display:block;margin-top:14px;font-size:15px;font-style:normal;letter-spacing:1px;color:#b9c8dc}
.scrolldown{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--bleu-clair);font-size:28px;animation:bob 1.8s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
/* Boutons façon Province de France : dégradé bleu ciel par défaut, qui devient un
   dégradé bleu foncé DANS L'AUTRE SENS au survol (0deg ↔ -180deg), coins arrondis.
   Reproduit le mécanisme « gradient button » d'icrspfrance.fr, adapté à notre palette. */
/* Base FONCÉE, texte blanc. Mêmes couleurs dans les deux états, mais le SENS du
   dégradé s'inverse : par défaut 0deg (sens inversé), au survol -180deg (le
   dégradé de référence). Le dégradé se "retourne" au passage de la souris ;
   seule la couleur change, pas de déplacement. */
.btn{display:inline-block;margin-top:26px;padding:13px 34px;border:none;border-radius:8px;
  color:#fff;text-transform:uppercase;letter-spacing:1.5px;font-size:14px;font-weight:600;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}
.btn:hover{color:#fff;background-image:linear-gradient(-180deg,var(--navy-dark) 0%,var(--bleu) 100%)}
/* La variante "solid" partage exactement le même rendu (alias conservé). */
.btn.solid{background-image:linear-gradient(0deg,var(--navy) 0%,#5f81ac 100%)}
.btn.solid:hover{background-image:linear-gradient(-180deg,var(--navy-dark) 0%,var(--bleu) 100%)}
/* ─── Boutons d'appel à l'action des pages de contenu ───────────────────────
   Historiquement, chaque page d'identité/vocation (Présentation, Séminaire,
   Devenir chanoine, Retraites, Adoratrices) définissait son PROPRE style de
   bouton (contour bleu ou or) dans un <style> inline. Ce contenu vit désormais
   en base de données et est affiché par article.php dans un conteneur `.prose`.
   Pour que TOUS les boutons du site adoptent le style unique de l'accueil (.btn),
   on redéfinit ici ces classes héritées avec le sélecteur « .prose <classe> »
   (spécificité 0,2,0), volontairement SUPÉRIEURE au <style> inline du corps
   (`.btn-pres{}`, spécificité 0,1,0) : la règle ci-dessous l'emporte donc sans
   qu'on ait à migrer la base. Les gabarits (replis) utilisent désormais
   directement `.btn solid` ; toute nouvelle page doit faire de même. */
.prose .btn-pres, .prose .btn-pres--gold,
.prose .btn-ret,  .prose .btn-ret--gold,
.prose .btn-sem,  .prose .btn-sem--gold,
.prose .ador-btn{
  display:inline-block;margin:0;padding:13px 34px;border:none;border-radius:8px;
  color:#fff;text-transform:uppercase;letter-spacing:1.5px;font-size:14px;font-weight:600;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}
.prose .btn-pres:hover, .prose .btn-pres--gold:hover,
.prose .btn-ret:hover,  .prose .btn-ret--gold:hover,
.prose .btn-sem:hover,  .prose .btn-sem--gold:hover,
.prose .ador-btn:hover{
  color:#fff;background-image:linear-gradient(-180deg,var(--navy-dark) 0%,var(--bleu) 100%)}

section{padding:80px 0}
.section-title{text-align:center;font-size:clamp(28px,4vw,38px);margin-bottom:8px}
.section-sub{text-align:center;color:var(--gris);font-style:italic;margin-top:20px;margin-bottom:46px}
.rule{width:90px;height:2px;background:var(--bleu);margin:10px auto 0}

.split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center}
.split.rev{grid-template-columns:1.1fr 0.9fr}
/* Image d'un bloc split, façon Province de France : pas de cadre blanc,
   simplement des coins arrondis et une ombre douce. */
.split .ph{height:360px;background:var(--fond-2) center/cover;border-radius:12px;box-shadow:0 16px 38px rgba(29,37,64,.16);background-image:linear-gradient(rgba(29,37,64,.08),rgba(29,37,64,.08)),url('../img/masthead.jpg')}
.split h2{font-size:34px;margin-bottom:14px}
.split p{margin-bottom:14px}

/* Grille auto-adaptative : s'équilibre quel que soit le nombre de cartes (3, 4…). */
.piliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.pilier{text-align:center;padding:34px 18px;background:#fff;border:1px solid #e3e9f1;border-top:3px solid var(--bleu);transition:.25s;color:inherit;text-decoration:none;display:block}
.pilier:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(29,37,64,.14)}
/* Carte de pilier cliquable (un lien est renseigné) : curseur main + accent au survol. */
.pilier.is-link{cursor:pointer}
.pilier.is-link:hover h3{color:var(--bleu)}
.pilier .ico{font-size:42px;color:var(--bleu);margin-bottom:14px}
.pilier h3{font-size:23px;margin-bottom:8px;transition:color .2s} .pilier p{font-size:16px;color:var(--gris)}


.access{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.acard{background:#fff;border:1px solid #e3e9f1;padding:30px;transition:.25s;border-left:3px solid var(--bleu)}
.acard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(29,37,64,.12)}
.acard h3{font-size:24px;margin-bottom:8px} .acard p{color:var(--gris);font-size:16px}
.acard .more{display:inline-block;margin-top:12px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--bleu)}

.news{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid #e3e9f1;overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(29,37,64,.12)}
/* La vignette est un lien (couverture en fond) ; sans couverture, dégradé neutre. */
.card .thumb{display:block;position:relative;height:175px;background:var(--fond-2) center/cover;border-bottom:3px solid var(--bleu)}
.card .thumb.no-cover{background:linear-gradient(135deg,var(--fond-2),#e7edf5)}
.card .thumb .card-tag{position:absolute;top:10px;left:10px;background:rgba(20,28,48,.82);color:#fff;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:3px}
.card .body{padding:22px} .card .date{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--bleu);margin-bottom:6px}
.card h3{font-size:22px;margin-bottom:8px} .card p{font-size:16px;color:var(--gris)}

.band{background:linear-gradient(rgba(20,28,48,.82),rgba(20,28,48,.9)),url('../img/masthead.jpg') center/cover;color:#fff;text-align:center;padding:90px 0}
.band h2{color:#fff;font-size:clamp(28px,4vw,40px);margin-bottom:14px}
.band p{max-width:620px;margin:0 auto 6px;color:#dbe5f1}

/* ---------- Bandeau de titre des pages internes : image assombrie + titre blanc ---------- */
.page-head{position:relative;background:linear-gradient(rgba(20,28,48,.55),rgba(20,28,48,.72)),url('../img/masthead.jpg') center/cover;color:#fff;padding:70px 0 64px;text-align:center}
.page-head h1{color:#fff;font-size:clamp(30px,5vw,46px)}
.page-head .crumb{color:var(--bleu-clair);font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.page-head .crumb a{color:var(--bleu-clair)} .page-head .crumb a:hover{color:#fff}
.prose{max-width:820px;margin:0 auto;padding:60px 24px}
.prose h2{font-size:30px;margin:28px 0 12px} .prose h3{font-size:24px;margin:22px 0 10px}
.prose p{margin-bottom:16px;text-align:justify} .prose img{margin:18px 0;border-radius:5px;box-shadow:0 0 10px 0 rgba(0,0,0,.3)}
.prose ul,.prose ol{margin:0 0 16px 26px}
/* Apparences d'image dans le corps des articles (choisies dans l'éditeur) */
.prose .img-left,.prose figure.img-left{float:left;max-width:42%;margin:6px 26px 14px 0}
.prose .img-right,.prose figure.img-right{float:right;max-width:42%;margin:6px 0 14px 26px}
.prose .img-center,.prose figure.img-center{display:block;margin:18px auto}
.prose .img-full,.prose figure.img-full{display:block;width:100%;margin:18px 0}
.prose figure{margin:18px 0} .prose figure img{margin:0;width:100%}
.prose figcaption{font-size:14px;color:var(--gris);text-align:center;margin-top:6px;font-style:italic}
.prose::after{content:"";display:block;clear:both}
/* Lettrine façon Province de France : grande initiale + fragment "first_word"
   calé dans le creux (décalage selon la lettre via .w1/.w2/.w3) + groupe de mots
   d'ouverture en petites majuscules (.sc). Voir le helper lettrine() (helpers.php). */
.drop_cap{float:left;font-family:var(--titre);font-size:56px;line-height:56px;margin-right:12px;color:var(--bleu-clair)}
.first_word{float:left;margin-left:-10px;font-variant:small-caps}
.first_word.w1{margin-left:-12px}
.first_word.w2{margin-left:-18px}
.first_word.w3{margin-left:-28px}
.first_word sup{font-variant:normal}
.sc{font-variant:small-caps}
@media(max-width:640px){
  .prose .img-left,.prose figure.img-left,.prose .img-right,.prose figure.img-right{float:none;max-width:100%;margin:18px 0}
}
/* ── Galerie miniatures ── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;max-width:1100px;margin:30px auto;padding:0 24px}
.gallery figure{margin:0}
.gallery figcaption{font-size:13px;color:var(--gris);margin-top:4px;text-align:center;line-height:1.4}

a.gal-thumb{display:block;overflow:hidden;border-radius:2px}
a.gal-thumb img{
  height:185px;width:100%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 6px 16px rgba(29,37,64,.12);
  display:block;
  transition:transform .25s ease;
}
a.gal-thumb:hover img,a.gal-thumb:focus img{transform:scale(1.04)}

/* ── Lightbox / visualiseur plein écran ── */
/* Caché par défaut via display:none (pas l'attribut hidden que les styles
   auteur écrasent). Affiché en ajoutant la classe .gal-lb--open via JS. */
.gal-lb{
  display:none;
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.93);
  flex-direction:column;
  align-items:center;justify-content:center;
}
.gal-lb.gal-lb--open{display:flex}

/* Zone centrale : image + légende */
.gal-lb-stage{
  display:flex;flex-direction:column;align-items:center;
  padding:0 70px;   /* espace pour les flèches latérales */
  max-width:100vw;
  box-sizing:border-box;
}
.gal-lb-img{
  max-width:100%;max-height:calc(100vh - 160px);
  object-fit:contain;
  border:2px solid rgba(255,255,255,.07);
  box-shadow:0 8px 48px rgba(0,0,0,.7);
}
.gal-lb-caption{
  color:rgba(255,255,255,.78);font-size:14px;line-height:1.5;
  text-align:center;margin:10px 0 0;padding:0 16px;
  max-width:680px;
}

/* Bouton fermer — coin haut droit, absolu dans le parent fixed */
.gal-lb-close{
  position:absolute;top:14px;right:14px;
  width:42px;height:42px;
  background:rgba(255,255,255,.13);border:none;border-radius:50%;
  cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  z-index:1;
}
.gal-lb-close svg{width:22px;height:22px}
.gal-lb-close:hover{background:rgba(255,255,255,.28)}

/* Flèches gauche / droite — absolues, centrées verticalement */
.gal-lb-prev,.gal-lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;
  background:rgba(255,255,255,.13);border:none;border-radius:50%;
  cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  z-index:1;
}
.gal-lb-prev{left:12px}
.gal-lb-next{right:12px}
.gal-lb-prev svg,.gal-lb-next svg{width:28px;height:28px}
.gal-lb-prev:hover,.gal-lb-next:hover{background:rgba(255,255,255,.28)}

/* Pied de page lightbox : compteur + diaporama — absolu en bas */
.gal-lb-footer{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:14px 20px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.gal-lb-counter{color:rgba(255,255,255,.6);font-size:14px;min-width:64px;text-align:right}
.gal-lb-play{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:20px;color:#fff;cursor:pointer;
  padding:6px 18px;font-size:13px;
  transition:background .2s;
}
.gal-lb-play svg{width:15px;height:15px}
.gal-lb-play:hover{background:rgba(255,255,255,.26)}

@media(max-width:600px){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:0 12px}
  a.gal-thumb img{height:130px}
  .gal-lb-stage{padding:0 48px}
  .gal-lb-prev,.gal-lb-next{width:36px;height:36px}
  .gal-lb-prev svg,.gal-lb-next svg{width:20px;height:20px}
  .gal-lb-prev{left:6px}
  .gal-lb-next{right:6px}
}
.list-items{max-width:900px;margin:0 auto;padding:50px 24px;display:grid;gap:18px}
.list-item{background:#fff;border:1px solid #e3e9f1;border-left:3px solid var(--bleu);padding:22px}
.list-item h3{font-size:24px;margin-bottom:6px}
.list-item .date{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--bleu)}
/* Grille 2 tuiles — sermons & conférences */
.formation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  max-width:1100px;margin:0 auto;padding:32px 24px}
@media(max-width:660px){.formation-grid{grid-template-columns:1fr}}
.fc{background:#fff;border:1px solid #e3e9f1;border-left:3px solid var(--bleu);
  padding:18px 20px;display:flex;flex-direction:column;gap:6px;
  position:relative;cursor:pointer}
.fc:hover{border-color:var(--bleu);box-shadow:0 2px 8px rgba(29,57,95,.08)}
/* En-tête : titre à gauche, date à droite sur la même ligne */
.fc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fc-header h3{flex:1;font-size:17px;margin:0;line-height:1.35;font-family:var(--titre)}
.fc-date{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--bleu);
  white-space:nowrap;margin-top:2px;flex-shrink:0}
.fc-header h3 a{color:var(--navy);text-decoration:none}
.fc-header h3 a:hover{color:var(--bleu)}
/* Lien étiré : rend toute la tuile cliquable */
.fc-header h3 a::after{content:'';position:absolute;inset:0}
.fc-author{display:inline-block;font-size:13px;background:rgba(29,57,95,.1);color:var(--navy);
  padding:3px 9px;border-radius:3px;width:fit-content;position:relative;z-index:1}
/* Pied de tuile : auteur à gauche, badges média (audio/document) à droite */
.fc-foot{display:flex;align-items:center;gap:10px}
.fc-media{display:inline-flex;gap:6px;flex-shrink:0;position:relative;z-index:1;margin-left:auto}
.fc-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:rgba(29,57,95,.08);color:var(--bleu)}
.fc-badge--audio{background:rgba(176,141,87,.16);color:var(--gold,#b08d57)}
.fc-ico{width:15px;height:15px;fill:currentColor}

footer{background:var(--navy-dark);color:#aebccf;font-size:15px;padding:54px 0 28px}
footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px 36px}
footer .footer-contact{flex:1 1 auto;min-width:240px}
footer h4{color:var(--bleu-clair);font-size:20px;margin-bottom:14px;font-weight:400;font-family:var(--titre)}
footer a{color:#aebccf} footer a:hover{color:#fff}
footer ul{list-style:none} footer li{padding:4px 0}
.copyright{text-align:center;border-top:1px solid rgba(147,170,196,.22);margin-top:34px;padding-top:18px;font-size:13px;color:#8294ab}

/* Bandeau d'annonce fixe en tête (réglable dans l'admin « Paramètres ») */
.site-announce{position:fixed;top:0;left:0;right:0;z-index:55;
  background:linear-gradient(90deg,var(--navy),var(--bleu));color:#fff;
  font-size:14px;line-height:1.35;text-align:center;padding:9px 16px;
  box-shadow:0 1px 6px rgba(20,28,48,.25)}
.site-announce a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.site-announce .ann-dates{opacity:.82;font-style:italic;white-space:nowrap}
.site-announce .wrap{padding:0;max-width:1100px}
/* Le menu se cale sous le bandeau (hauteur mesurée en JS, cf. layout.php). Le -1px
   le fait chevaucher d'1px SOUS le bandeau (opaque et au-dessus, z-index plus
   élevé) : zéro liseré transparent possible entre les deux, à toute échelle. */
body.has-announce .mainnav{top:calc(var(--announce-h,44px) - 1px)}
body.nav-open .site-announce{display:none}

/* Réseaux sociaux dans le pied de page */
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.08);color:#c5d3e4;transition:background .18s,color .18s}
.footer-social a:hover{background:rgba(255,255,255,.16);color:#fff}
.footer-social svg{width:16px;height:16px}

/* Colonne de droite : bouton « Nous contacter » (icône avion en papier) */
.footer-cta{flex:0 0 auto;align-self:center}
.footer-contact-btn{display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:6px;color:var(--navy);font-family:var(--sans);
  font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;border:1px solid rgba(255,255,255,.7);
  background-image:linear-gradient(180deg,#ffffff 0%,#dce5f1 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  transition:background-image .25s,color .2s,box-shadow .2s}
.footer-contact-btn:hover{color:var(--navy-dark);
  background-image:linear-gradient(180deg,#eaf1fa 0%,var(--bleu-clair) 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.footer-contact-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero .bg{animation:none}}

@media(max-width:980px){
  .piliers{grid-template-columns:1fr 1fr}.news,.access{grid-template-columns:1fr}
  .pays{grid-template-columns:1fr 1fr}.split,.split.rev{grid-template-columns:1fr}
}
/* ---------- Mobile : hamburger + menu glissant depuis la droite ---------- */
@media(max-width:880px){
  .nav-burger{display:flex;margin-left:auto}
  /* Comme sur desktop : la barre est transparente en haut de page et se remplit
     de bleu au défilement (via --navbg piloté par site.js). On NE force donc plus
     de fond opaque sur mobile. Exception : quand le tiroir mobile est ouvert, on
     rend la barre opaque pour que le bouton de fermeture reste lisible. */
  body.nav-open .mainnav{background:var(--navy)}
  .nav-collapse{
    position:fixed;top:0;right:0;height:100vh;width:80%;max-width:330px;
    flex-direction:column;align-items:flex-start;
    background:var(--navy-dark);padding:78px 22px 22px;
    transform:translateX(100%);transition:transform .3s ease;box-shadow:-6px 0 24px rgba(0,0,0,.4);
    overflow-y:auto;
  }
  .nav-collapse.open{transform:translateX(0)}
  .nav-links{flex-direction:column;align-items:flex-start;width:100%;flex:none}
  .nav-links a,.nav-links span.nav-parent-label{padding:14px 4px;font-size:16px;width:100%}
  /* Dans le tiroir mobile : réseaux sociaux en bas, séparés par un trait, icônes
     plus grandes pour le tactile. */
  .nav-social{position:static;height:auto;width:100%;border-top:1px solid rgba(255,255,255,.2);margin-top:12px;padding-top:14px;gap:10px}
  .nav-social a{width:42px;height:42px}
  .nav-social svg{width:20px;height:20px}
  body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-burger span:nth-child(2){opacity:0}
  body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* --- Sous-menus sur mobile (inline dans le tiroir) --- */
  .has-sub>a::after{display:none} /* flèche CSS remplacée par le bouton */
  .sub-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;
    font-size:16px;padding:4px 10px;margin-left:auto;transition:transform .2s;vertical-align:middle
  }
  .has-sub{display:flex;flex-wrap:wrap;align-items:center}
  .has-sub>a,.has-sub>.nav-parent-label{flex:1}
  .sub-menu{
    position:static;transform:none;box-shadow:none;
    border-top:none;border-radius:0;
    border-left:2px solid var(--bleu);
    padding:4px 0;margin:4px 0 8px 18px;
    background:rgba(0,0,0,.18);width:100%;order:3
  }
  .sub-menu::before{display:none}
  .has-sub>.sub-menu{display:none}
  /* Sur mobile, NI :hover NI :focus-within ne pilotent le sous-menu (au tactile le
     hover reste « collé » après le tap, ce qui empêchait le repli) : seul .open,
     basculé au clic sur le libellé parent ou le bouton ▾, l'ouvre ET le referme. */
  .has-sub:hover>.sub-menu,
  .has-sub:focus-within>.sub-menu{display:none}
  .has-sub.open>.sub-menu{display:block}
  .has-sub.open>.sub-toggle{transform:rotate(180deg);color:var(--bleu-clair)}
  .sub-menu a{padding:10px 14px;font-size:14px;border-bottom-color:rgba(255,255,255,.06)}
  .sub-menu a:hover{padding-left:20px}
}
@media(max-width:560px){.piliers,.pays{grid-template-columns:1fr}}

/* ============================================================
   SECTION ACTUALITÉS — vue en tuiles chronologiques
   ============================================================ */

/* Barre de filtres par catégorie */
.news-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:36px 0 24px}
.news-filter a{
  display:inline-block;padding:8px 22px;border-radius:20px;font-size:13px;
  letter-spacing:.7px;text-transform:uppercase;font-weight:500;transition:.18s;
  border:1px solid var(--bleu-clair);color:var(--bleu);background:#fff;
}
.news-filter a:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.news-filter a.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Grille de tuiles */
.news-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1180px;margin:0 auto;padding:0 24px 60px;
}

/* Tuile individuelle */
.news-tile{
  position:relative;border-radius:6px;overflow:hidden;cursor:pointer;
  background:var(--navy);aspect-ratio:4/3;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 4px 16px rgba(29,37,64,.12);
  transition:transform .22s,box-shadow .22s;
}
.news-tile:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(29,37,64,.22)}

/* Image de couverture en fond */
.news-tile .tile-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .38s ease;
}
.news-tile:hover .tile-bg{transform:scale(1.05)}

/* Dégradé sombre sur la moitié basse (lisibilité du titre) */
.news-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,28,48,.05) 25%,rgba(20,28,48,.85) 100%);
}
/* Tuile sans image : fond bleu marine direct, pas de dégradé */
.news-tile.no-cover::after{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);
  opacity:.92;
}

/* Badge de catégorie (lien cliquable pour filtrer) */
.news-tile .tile-tag{
  position:absolute;top:12px;left:12px;z-index:3;
  background:var(--bleu);color:#fff;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:3px;text-decoration:none;
  transition:background .15s;
}
.news-tile .tile-tag:hover{background:var(--navy-dark)}

/* Lieu de l'album (apostolat / Séminaire / Maison généralice) : grisé, en haut à droite */
/* Voile en dégradé qui assombrit le coin haut-droit, derrière le lieu (lisibilité) */
.news-tile .tile-corner{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 58% at top right, rgba(20,28,48,.66) 0%, rgba(20,28,48,.30) 42%, rgba(20,28,48,0) 74%);
}
.news-tile .tile-place{
  position:absolute;top:13px;right:14px;z-index:3;
  color:rgba(255,255,255,.62);
  font-size:11px;letter-spacing:.4px;font-style:italic;
  max-width:55%;text-align:right;line-height:1.25;
  text-shadow:0 1px 3px rgba(20,28,48,.55);
  pointer-events:none;
}

/* Texte de la tuile en bas */
.news-tile .tile-body{position:relative;z-index:2;padding:14px 18px 18px}
.news-tile .tile-date{font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}
.news-tile .tile-title{font-family:var(--titre);font-size:clamp(15px,1.5vw,19px);color:#fff;line-height:1.25}
.news-tile .tile-author{font-size:12px;color:rgba(255,255,255,.55);margin-top:5px;font-style:italic}
.news-tile .tile-excerpt{font-size:13px;color:rgba(255,255,255,.6);margin-top:6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 24px 50px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;padding:8px 18px;border-radius:4px;font-size:15px;font-weight:500;transition:.18s}
.pagination a{border:1px solid var(--bleu-clair);color:var(--bleu)}
.pagination a:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.pagination .current{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.pagination .disabled{color:var(--gris);border:1px solid #e3e9f1;cursor:default}

/* Responsive tuiles */
@media(max-width:980px){.news-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .news-tiles{grid-template-columns:1fr;padding:0 16px 40px}
  .news-tile{aspect-ratio:16/9}
  .news-tile .tile-title{font-size:16px}
}

/* Bouton retour en haut à gauche d'une page album (racine ou sous-album) */
.album-back{max-width:1180px;margin:0 auto;padding:24px 24px 0}
.album-back-btn{display:inline-flex;align-items:center;gap:5px;font-size:14px;letter-spacing:.3px;color:var(--bleu)}
.album-back-btn:hover{color:var(--navy);text-decoration:underline}

/* Filtre par année (sous la barre de filtres principale, vue Photographies) */
/* Filtre par année : menu déroulant stylé (page Photographies) */
.year-filter{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 0 10px}
.year-filter-label{font-size:13px;letter-spacing:.7px;text-transform:uppercase;
  font-weight:500;color:var(--gris);font-family:var(--sans)}
.year-select-wrap{position:relative;display:inline-block}
.year-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--sans);font-size:13px;letter-spacing:.5px;font-weight:500;
  color:var(--bleu);background:#fff;border:1px solid var(--bleu-clair);
  border-radius:20px;padding:9px 40px 9px 20px;cursor:pointer;outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s,color .18s;min-width:150px}
.year-select:hover{border-color:var(--bleu)}
.year-select:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(79,111,156,.2)}
/* Chevron dessiné en CSS (aucune image externe) */
.year-select-wrap::after{
  content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--bleu);border-bottom:2px solid var(--bleu);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* Grille de sous-albums dans la page d'un album (réutilise les classes .news-tiles) */
.sub-albums{padding:30px 0 0}

/* ============================================================
   Lecteur audio soigné (page sermon/article avec fichier audio)
   ============================================================ */
.audio-player{display:flex;align-items:center;gap:16px;background:var(--navy);color:#fff;
  border-radius:10px;padding:16px 20px;margin:30px 0;max-width:620px}
.ap-btn{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--bleu);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;color:#fff}
.ap-btn:hover{background:var(--bleu-clair)}
.ap-btn svg{width:18px;height:18px;fill:#fff;display:block}
.ap-track{flex:1;min-width:0}
.ap-title{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:3px;font-family:var(--sans)}
.ap-author{font-size:11px;color:rgba(255,255,255,.55);font-style:italic;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-controls{display:flex;align-items:center;gap:10px}
.ap-progress{flex:1;height:5px;background:rgba(255,255,255,.2);border-radius:3px;
  cursor:pointer;position:relative}
.ap-fill{height:100%;background:var(--bleu-clair);border-radius:3px;width:0;
  pointer-events:none;transition:width .05s linear}
.ap-time{font-size:12px;color:rgba(255,255,255,.65);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:80px;text-align:right}
.ap-speed{display:flex;gap:5px;margin-top:7px}
.ap-spd-btn{
  background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.65);
  font-size:11px;font-family:var(--sans);padding:3px 8px;border-radius:3px;
  cursor:pointer;transition:.15s;letter-spacing:.2px;line-height:1.4;
}
.ap-spd-btn:hover{background:rgba(255,255,255,.22);color:#fff}
.ap-spd-btn.active{background:var(--bleu-clair);color:#fff;font-weight:600}

/* ============================================================
   Barre de recherche dans la section Actualités
   ============================================================ */
.news-search{display:flex;align-items:center;gap:6px;max-width:420px;margin:14px auto 28px;
  padding:0 24px}
.news-search input[type=search]{
  flex:1;border:1px solid #d0daea;border-radius:6px;padding:8px 12px;font-size:14px;
  font-family:var(--sans);color:var(--encre);background:#fff;outline:none;
  transition:border .15s}
.news-search input[type=search]:focus{border-color:var(--bleu)}
.search-clear{color:var(--gris);font-size:20px;line-height:1;cursor:pointer;
  text-decoration:none;padding:0 4px}
.search-clear:hover{color:var(--navy)}
@media(max-width:600px){.news-search{max-width:100%;margin-top:10px}}

/* ============================================================
   Formulaire newsletter
   ============================================================ */
.nl-form{margin-top:.5rem}

/* Groupe label + champ (label au-dessus) */
.nl-group{display:flex;flex-direction:column;gap:5px;margin-bottom:1.1rem}
.nl-group label{font-size:14px;font-weight:500;color:var(--navy)}
.nl-group input,.nl-group select,.nl-group textarea{
  width:100%;padding:10px 13px;font-size:15px;font-family:var(--sans);
  color:var(--encre);border:1px solid #c8d4e2;border-radius:6px;
  background:#fff;outline:none;transition:border-color .15s;box-sizing:border-box}
.nl-group textarea{resize:vertical;min-height:120px;line-height:1.55}
.nl-group input:focus,.nl-group select:focus,.nl-group textarea:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(30,80,160,.08)}

/* Variante étroite pour le titre de politesse */
.nl-group--narrow{max-width:160px}

/* Deux colonnes côte à côte (prénom / nom) */
.nl-row--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Ligne de consentement avec case à cocher */
.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}
.nl-row--check label a{color:var(--bleu);text-decoration:underline}
.nl-row--check label a:hover{color:var(--navy)}

/* Astérisque obligatoire */
.req{color:var(--bordeaux);margin-left:2px}

/* Messages de confirmation / erreur */
.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}

@media(max-width:540px){
  .nl-row--2{grid-template-columns:1fr}
  .nl-group--narrow{max-width:100%}
}
@media(max-width:600px){.news-search{max-width:100%;margin-top:10px}}


/* ---------- FAQ (accordéon <details>/<summary>) ---------- */
.faq-wrap{max-width:820px;margin:0 auto;padding:0 1.5rem 4rem}
.faq-intro{font-size:17px;line-height:1.75;color:var(--encre);margin:2rem auto 2.5rem}
.faq-list{display:flex;flex-direction:column;gap:.5rem}
.faq-item{border:1px solid #d6dce8;border-radius:10px;background:#fff;overflow:hidden;
  box-shadow:0 2px 8px rgba(29,37,64,.06)}
.faq-item[open]{border-color:var(--bleu)}
.faq-q{cursor:pointer;padding:1.1rem 1.4rem;font-family:var(--titre);font-size:1.06rem;
  color:var(--navy);list-style:none;display:flex;align-items:center;gap:.7rem;
  user-select:none;line-height:1.4}
.faq-q::-webkit-details-marker{display:none}
.faq-q::before{content:"";display:block;flex-shrink:0;width:20px;height:20px;
  border-radius:50%;background:var(--bleu);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size:14px;background-repeat:no-repeat;background-position:center;
  transition:transform .2s}
.faq-item[open] .faq-q::before{transform:rotate(180deg)}
.faq-a{padding:.2rem 1.4rem 1.2rem 3.5rem;color:var(--encre);font-size:1rem;line-height:1.8}
@media(max-width:540px){
  .faq-q{padding:.9rem 1rem;font-size:.97rem}
  .faq-a{padding:.1rem 1rem 1rem 1rem}
}

/* ---------- Bloc renvoi FAQ sur la page d'accueil ---------- */
.faq-promo{background:var(--creme-2);padding:4rem 1.5rem}
.faq-promo .wrap{max-width:760px;margin:0 auto;text-align:center}
.faq-promo h2{font-family:var(--titre);font-size:clamp(22px,3.2vw,32px);color:var(--navy);margin-bottom:.8rem}
.faq-promo p{color:var(--encre);font-size:1.08rem;line-height:1.7;margin-bottom:1.8rem}


/* ============================================================
   FRISE CHRONOLOGIQUE — « Histoire de l'Institut » (page d'accueil).
   Reprise telle quelle de la page Histoire d'icrss.org.
   ============================================================ */
.history-wrap{max-width:900px;margin:0 auto;padding:0 1.5rem 4rem}
.history-intro{font-size:17px;line-height:1.75;color:var(--encre);margin:2rem auto 3rem;
  max-width:680px;text-align:center}

/* Conteneur de la frise — ligne verticale centrale via ::before */
.timeline{position:relative;padding:1rem 0}
.timeline::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom, transparent 0%, var(--or) 5%, var(--or) 95%, transparent 100%);
  transform:translateX(-50%)}

/* Rangée : 3 colonnes — gauche | point central | droite */
.tl-row{
  display:grid;grid-template-columns:1fr 48px 1fr;
  align-items:center;margin-bottom:3rem;gap:0}

/* Colonne centrale avec le point doré */
.tl-pin{display:flex;justify-content:center;align-items:center;z-index:1}
.tl-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--or);border:3px solid #f4f7fb;
  box-shadow:0 0 0 2px var(--or);flex-shrink:0}

/* Bulle de contenu */
.tl-bubble{
  background:#fff;border:1px solid #dce5f0;border-radius:9px;
  padding:1.15rem 1.5rem;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.tl-heading{
  display:block;font-family:var(--titre);font-size:1.05rem;
  color:var(--navy);font-weight:400;margin-bottom:.45rem}
.tl-bubble p{margin:0;font-size:14.5px;line-height:1.65;color:var(--encre)}

/* Année affichée de l'autre côté du trait */
.tl-date{
  font-family:var(--titre);font-size:1.75rem;color:var(--navy);
  font-weight:400;opacity:.7;line-height:1}

/* Rangée NORMALE (index pair) : bulle à gauche, année à droite */
.tl-row:not(.tl-right) .tl-bubble{text-align:right;padding-right:1.8rem}
.tl-row:not(.tl-right) .tl-date{padding-left:1.8rem;text-align:left}

/* Rangée INVERSÉE (index impair) : année à gauche, bulle à droite */
.tl-row.tl-right .tl-date{text-align:right;padding-right:1.8rem}
.tl-row.tl-right .tl-bubble{padding-left:1.8rem}

/* Année dans la bulle — cachée sur desktop, visible sur mobile */
.tl-year-mobile{display:none}

/* ── Mobile : colonne unique, trait sur la gauche ─────────────── */
@media(max-width:620px){
  .timeline::before{left:15px;transform:none}
  .tl-row{
    grid-template-columns:30px 1fr;
    gap:0 12px;margin-bottom:2rem}
  .tl-row .tl-pin{grid-column:1;grid-row:1;align-self:start;padding-top:4px}
  .tl-row .tl-bubble{grid-column:2;grid-row:1;text-align:left !important;
    padding:1rem 1.2rem !important}
  .tl-row .tl-date,.tl-row.tl-right .tl-date{display:none}
  .tl-row.tl-right .tl-pin{grid-column:1;grid-row:1}
  .tl-row.tl-right .tl-bubble{grid-column:2;grid-row:1}
  .tl-year-mobile{
    display:block;font-family:var(--titre);font-size:1.1rem;
    color:var(--navy);opacity:.65;margin-bottom:.35rem;font-weight:400}
}


/* #############################################################################
   #                                                                           #
   #   COMPOSANTS PROPRES À LA PROVINCE DE FRANCE                              #
   #   Tout ce qui suit n'existe pas sur icrss.org : la recherche dans la      #
   #   barre de menu, le bandeau de l'ordo, la grille du page builder maison,  #
   #   les pages d'apostolat, la carte de France et la page d'accueil.         #
   #                                                                           #
   ############################################################################# */

/* ============================================================
   RECHERCHE DANS LA BARRE DE MENU
   ------------------------------------------------------------
   Occupe la place laissée libre par le sélecteur de langue d'icrss (le site de
   la Province est monolingue). Collée au bord DROIT, sortie du flux comme les
   réseaux sociaux le sont à gauche : tout le centre reste au menu.
   La loupe ne bouge pas ; le champ se déplie vers la GAUCHE (demande de Jean du
   18/07 : « discrète »). Sans JavaScript, .open n'est jamais posée : le champ
   reste alors ouvert en permanence (règle .no-js plus bas) et le formulaire
   s'envoie normalement — la recherche ne dépend pas du navigateur.
   ============================================================ */
.nav-search{position:absolute;right:14px;top:0;height:100%;z-index:2;display:flex;align-items:center}
.nav-search form{display:flex;align-items:center}
.nav-search input[type=search]{
  width:0;padding:0;border:none;border-bottom:1px solid rgba(255,255,255,0);
  background:transparent;color:#fff;font-family:var(--sans);font-size:14px;
  outline:none;transition:width .25s ease,padding .25s ease,border-color .25s ease}
.nav-search.open input[type=search]{width:190px;padding:6px 10px 6px 4px;border-bottom-color:rgba(255,255,255,.5)}
.nav-search input[type=search]::placeholder{color:rgba(255,255,255,.55)}
.nav-search button{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:none;border:0;cursor:pointer;color:#fff;opacity:.7;border-radius:50%;
  transition:opacity .2s,background .2s}
.nav-search button:hover{opacity:1;background:rgba(255,255,255,.14)}
.nav-search svg{width:16px;height:16px;fill:currentColor;display:block}
/* Sans JavaScript, le champ est ouvert d'emblée (voir le commentaire ci-dessus). */
.no-js .nav-search input[type=search]{width:170px;padding:6px 10px 6px 4px;border-bottom-color:rgba(255,255,255,.45)}

/* Dans le tiroir mobile, la recherche redevient un élément ordinaire, en pleine
   largeur et TOUJOURS dépliée : replier un champ n'a aucun intérêt là où la
   place ne manque pas, et un champ qu'il faut ouvrir avant de taper est un
   geste de plus au doigt. Même traitement que le sélecteur de langue d'icrss. */
@media(max-width:880px){
  .nav-search{position:static;height:auto;width:100%;
    border-top:1px solid rgba(255,255,255,.2);margin-top:12px;padding-top:12px}
  .nav-search form{width:100%}
  .nav-search input[type=search],
  .nav-search.open input[type=search]{
    flex:1;width:auto;padding:9px 12px;border-bottom-color:rgba(255,255,255,.45)}
  .nav-search button{width:42px;height:42px;flex-shrink:0}
}

/* ============================================================
   BANDEAU DE L'ORDO — la fête du jour, tout en haut de l'écran.
   ------------------------------------------------------------
   Il réutilise .site-announce (le bandeau d'annonce d'icrss) : même mécanique,
   la barre de menu se cale dessous grâce à --announce-h, mesurée en JavaScript.
   C'était le bon emplacement : Jean a placé la fête du jour dans la barre du
   haut le 31/07, et icrss avait déjà, exactement là, une bande pleine largeur.
   La COULEUR LITURGIQUE du jour, quand elle est connue, se lit dans la pastille.
   ============================================================ */
/* ⚠ Les classes ci-dessous sont celles que produit ordo_public_today_html()
   (includes/ordo.php) : ne pas les renommer ici sans changer la fonction. */
.ordo-band{font-family:var(--sans);letter-spacing:.2px}
.ordo-band .ordo-topbar{display:inline-flex;align-items:center;gap:.55em;flex-wrap:wrap;justify-content:center}
.ordo-band .ordo-topbar-name{font-weight:500}
.ordo-band .ordo-topbar-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.ordo-band .ordo-topbar-tag{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
  background:rgba(255,255,255,.18);border-radius:3px;padding:2px 8px}
.ordo-band a{color:#fff}

/* ============================================================
   PAGES D'APOSTOLAT — chanoines, horaires, adresse, sermons.
   ------------------------------------------------------------
   Recomposées le 01/08 (décision de Jean : « tout recomposé »). Jusque-là,
   elles reproduisaient l'agencement de l'ancien site, en blocs importés.
   ============================================================ */
/* Le corps d'une page d'apostolat : plus large que .prose (820 px), car ces
   pages ont des rangées à deux colonnes, mais borné pour rester lisible. */
.apo-body{max-width:1080px;margin:0 auto;padding:52px 24px 64px}
.apo-body > .pf-section{margin-bottom:2.4rem}
.apo-body > .pf-section:last-child{margin-bottom:0}

/* ⚠ 160 PX DE VIDE PAR SECTION, QUE PERSONNE N'AVAIT DEMANDÉS (mesuré le 01/08).
   `section{padding:80px 0}`, plus haut dans cette feuille, habille les grandes
   bandes pleine largeur de la page d'accueil, reprises du modèle d'icrss. Or les
   sections du page builder sont, elles aussi, des <section> — et le bloc des
   chanoines et celui des sermons également. Chacun recevait donc 80 px de
   rembourrage en haut ET en bas : sur la page de Limoges, 330 px séparaient les
   fiches des chanoines du titre de la première église.

   Ces sections-ci ont déjà leur respiration, déclarée juste au-dessus
   (2,4 rem entre deux sections). On leur retire donc celle de l'accueil.

   ⚠ LES SECTIONS DE COULEUR GARDENT LA LEUR : `.pfb-sec--light`, `--dark` et
   `--custom` déclarent `padding:2rem 1.5rem` dans public.css, et une classe
   l'emporte sur un sélecteur d'élément. Sans ce rembourrage, leur texte
   toucherait le bord de la bande colorée.

   ⚠ Le même vide existe sur les pages ORDINAIRES (`.page-content`), pour la
   même raison. Il n'est pas touché ici : ce chantier porte sur les pages
   d'apostolat, et c'est à Jean de dire si les autres pages doivent suivre —
   une ligne à ajouter. */
.apo-body section{padding-top:0;padding-bottom:0}

/* DEUX RANGÉES DANS UNE MÊME SECTION doivent respirer. Une section n'en portait
   qu'une, jusqu'à ce que celle de Port-Marly soit redécoupée (01/08) : ses
   documents et la rangée suivante se touchaient alors à 22 px, la légende
   « Consulter » de l'un venant sous le titre de l'autre. */
.apo-body .pf-row + .pf-row{margin-top:1.6rem}

/* Le bloc des sermons se DÉCOLLE de ce qui le précède quand il se pose tout
   seul en fin de page (son cas courant) — mais pas quand il occupe une colonne
   du page builder, où c'est la rangée qui commande l'espacement. Sans cela, sur
   Port-Marly, « Dernières homélies » et « Conférences » démarraient 38 px plus
   bas que « Calendrier », leur voisin de rangée. */
.apo-body .pf-addon-wrapper > .sermons-block{margin-top:0}

/* Adresse d'une église, sous son titre.
   ALIGNÉE À GAUCHE depuis le 01/08 (demande de Jean : « lorsqu'une adresse
   figure sous le titre d'une église ou d'un apostolat, elle doit être alignée à
   gauche »). Elle était centrée, ce qui la détachait du titre qu'elle précise —
   or ce titre, lui, est à gauche comme tout le contenu de la page. */
.apostolat-address{
  display:flex;align-items:center;justify-content:flex-start;gap:.6em;flex-wrap:wrap;
  font-family:var(--sans);font-size:15px;color:var(--gris);
  margin:0 0 1.4rem;padding-bottom:1.1rem;border-bottom:1px solid #dce5f0;text-align:left}
.apostolat-address a{color:var(--bleu)}

/* ─── LE TITRE DE L'ÉGLISE COIFFE SES DEUX COLONNES (01/08, retour de Jean) ───
   « Tout ce qui est sur la colonne de droite ne doit pas être sur la même ligne
   que le nom de l'église, mais juste en dessous, au même niveau que les
   horaires, pour qu'on comprenne que c'est la carte qui est sous cette église.
   Et la bordure sous l'adresse pourra alors prendre toute la largeur. »

   Le titre et l'adresse sont sortis de la colonne des horaires par
   apo_titre_pleine_largeur() (includes/apo-legacy.php) et posés dans une colonne
   de douze douzièmes, en tête de la MÊME rangée : `.pf-row` passe à la ligne, la
   carte et les horaires se rangent donc dessous, à la même hauteur.

   Le trait sous l'adresse court dès lors sur toute la largeur, ce qui est
   précisément ce qui fait comprendre que ce qui suit dépend de ce titre. Les
   écarts sont repris ici : l'adresse n'a plus besoin de sa propre marge basse,
   c'est la colonne qui la porte, sinon le titre se retrouvait à 2,4 rem de ce
   qu'il annonce. */
.apo-col-titre{margin-bottom:1.5rem}
.apo-col-titre .pf-addon-wrapper{margin-bottom:0}
.apo-col-titre .apostolat-address{margin-bottom:0;padding-bottom:.9rem}
/* Le titre lui-même se resserre sur son adresse : ils forment un seul bloc. */
.apo-col-titre h1,.apo-col-titre h2,.apo-col-titre h3,.apo-col-titre h4{margin-bottom:.45rem}

/* ⚠ LE NOM DE L'ÉGLISE DOMINE CE QU'IL ANNONCE (01/08, demande de Jean : « mets
   un peu plus gros le titre des églises ; il a la même taille, voire est plus
   petit que la section horaire, ça, ça ne va pas »).

   Il ne portait AUCUNE taille : un <h3> nu retombe sur le défaut du navigateur,
   soit 1,17 em, c'est-à-dire environ 20 px dans le corps de ces pages. Or ce
   qu'il chapeaute est déclaré, et plus gros : « Horaires » est à 22 px et
   « Sermons » à 24 px. Le titre d'une église passait donc APRÈS ses propres
   sous-titres, ce qui inversait la lecture de la page.

   ⚠ ON NE PEUT PAS VISER `h3.pfb-title` : sur ces pages, « Calendrier »,
   « Semaine passée » ou « Catéchisme et sacrements » portent exactement la même
   classe, et grossiraient avec. C'est la COLONNE qui distingue un nom d'église —
   .apo-col-titre n'est posée que sur un titre suivi d'une adresse ou d'un
   encadré d'horaires. Vérifié sur les 39 pages : 54 blocs d'horaires,
   54 colonnes de titre, aucune page n'y échappe. */
.apo-col-titre h1,.apo-col-titre h2,.apo-col-titre h3{font-size:28px}

/* --- Les chanoines de l'apostolat ---
   UN QUART DE LA LARGEUR, PAS PLUS (demande de Jean, 01/08 : « quand un
   chanoine est tout seul sur une ligne, sa fiche est beaucoup trop large ; la
   bonne taille des tuiles est d'un quart de la largeur de la page »).

   ⚠ POURQUOI `repeat(4, …)` ET NON `auto-fit`. C'est `auto-fit` qui produisait
   le défaut : il compte les colonnes d'après le nombre d'éléments, si bien
   qu'un chanoine seul obtenait UNE colonne, donc toute la largeur, et sa fiche
   s'étalait sur 1030 px avec une photo de 104 px perdue au milieu. Quatre
   colonnes déclarées valent quatre colonnes, qu'il y ait un chanoine ou six :
   la tuile fait toujours un quart, et une rangée incomplète laisse simplement
   sa place vide à DROITE (choix de Jean : les tuiles commencent à gauche, comme
   les titres et les textes de la page).

   `minmax(0,1fr)` et non `1fr` : la valeur par défaut d'une piste de grille est
   `auto`, qui ne descend pas sous la largeur de son contenu. Un courriel long
   (« chn.dedainville@icrsp.org ») élargirait alors sa colonne et les quatre
   cesseraient d'être égales. */
.canons-block{margin:0 0 2.6rem}
.canons-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
/* Sous 1000 px la tuile deviendrait plus étroite que sa photo : on retire des
   colonnes plutôt que de laisser le nom se couper en morceaux. */
@media(max-width:1000px){.canons-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.canons-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:420px){.canons-list{grid-template-columns:1fr}}
.canon-item{
  background:#fff;border:1px solid #e3e9f1;border-top:3px solid var(--bleu);
  padding:24px 18px;text-align:center;transition:.25s}
.canon-item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(29,37,64,.14)}
.canon-photo{
  width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center top;
  margin:0 auto 14px;display:block;box-shadow:0 4px 14px rgba(29,37,64,.18);border:3px solid #fff}
/* Repli quand le chanoine n'a pas de photo : un rond neutre aux initiales. */
.canon-photo.canon-ph{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--fond-2),#e7edf5);
  font-family:var(--titre);font-size:34px;color:var(--bleu)}
.canon-name{font-family:var(--titre);font-size:20px;color:var(--navy);line-height:1.25;margin-bottom:.3rem}
/* Même règle que dans l'infobulle de la carte : la charge se lit en minuscules.
   Les deux endroits doivent rester d'accord — c'est la même information. */
.canon-role{font-family:var(--sans);font-size:13.5px;color:var(--bleu)}
.canon-prov{font-family:var(--sans);font-size:12.5px;color:var(--gris);font-style:italic;margin-top:.25rem}
.canon-info{font-size:14.5px;color:var(--gris);margin-top:.55rem}
.canon-contact{font-size:14px;margin-top:.5rem}
.canon-contact a{display:block;word-break:break-word}

/* --- Horaires (tenus par le prieur) --- */
.org-schedule{background:#fff;border:1px solid #e3e9f1;border-left:3px solid var(--bleu);padding:22px 26px}
.org-schedule h3,.org-schedule .sched-title{
  font-family:var(--titre);font-size:22px;color:var(--navy);margin:0 0 .9rem}
.org-schedule table{width:100%;border-collapse:collapse}
.org-schedule td,.org-schedule th{padding:.5rem .2rem;border-bottom:1px solid #eef2f7;vertical-align:top;text-align:left}
.org-schedule tr:last-child td{border-bottom:none}
.org-schedule .sched-day{font-family:var(--sans);font-size:13px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--bleu);white-space:nowrap;width:34%}
.org-schedule .sched-note{font-size:14px;color:var(--gris);font-style:italic}
.org-schedule ul{list-style:none;margin:0}
.org-schedule li{padding:.4rem 0;border-bottom:1px solid #eef2f7}
.org-schedule li:last-child{border-bottom:none}

/* --- Sermons d'un apostolat --- */
.sermons-block{margin-top:2.4rem}
.sermons-title{font-family:var(--titre);font-size:24px;color:var(--navy);margin-bottom:1rem}

/* ─── CARTES MAPS ET CALENDRIERS GOOGLE (01/08/2026, demandes de Jean) ────────
   « Les cartes Maps interactives doivent avoir une hauteur et une largeur fixes
   (la taille varie actuellement selon les apostolats). La carte Maps et le
   calendrier Google doivent avoir des bords arrondis et une ombre portée, comme
   dans l'ancien système. »

   POURQUOI LA TAILLE VARIAIT. Ces iframes viennent des pages de l'ancien site,
   collées telles que Google les fournit, et chacune porte les dimensions du
   jour où elle a été copiée : 600 × 450 sur dix d'entre elles, 400 × 300 à
   Limoges, 500 × 500 ailleurs, et AUCUNE dimension sur les quarante autres —
   un iframe sans attribut retombe alors sur les 300 × 150 du navigateur. D'où
   des cartes de toutes les tailles d'un apostolat à l'autre.

   ⚠ ON SÉLECTIONNE PAR L'ADRESSE DE L'IFRAME, pas par la classe du bloc qui
   l'entoure. Les enveloppes héritées sont irrégulières (`raw-html map`,
   `raw-html custom-dimensions`, ou rien du tout) : s'y fier laisserait des
   cartes non traitées, et le défaut reviendrait au premier bloc collé à la
   main. L'adresse, elle, est la même partout.

   ⚠ UNE RÈGLE DE FEUILLE L'EMPORTE SUR LES ATTRIBUTS `width`/`height`, qui ne
   sont que des valeurs de repli — il n'y a donc rien à retirer dans les
   contenus. Elle ne l'emporterait PAS sur un attribut `style`, mais aucun de
   ces iframes n'y déclare de dimension (seulement `border:0`).

   Le `border-radius` posé sur l'iframe lui-même suffit à rogner ce qu'il
   affiche : c'est un élément remplacé, il se peint dans sa propre boîte. */
.apo-body iframe[src*="google.com/maps/embed"],
.apo-body iframe[src*="calendar.google.com"]{
  display:block;width:100%;max-width:100%;height:340px;border:0;
  border-radius:15px;box-shadow:0 0 10px 0 rgba(0,0,0,.3)}
/* Le calendrier en mode planning est une LISTE d'événements : trop court, il
   n'en montre qu'un ou deux et l'ascenseur fait le reste. Il respire donc un
   peu plus que la carte, qui elle se lit d'un coup d'œil. */
.apo-body iframe[src*="calendar.google.com"]{height:420px;margin-bottom:1rem}
/* Sur téléphone, les deux passent l'un sous l'autre en pleine largeur : une
   carte de 340 px de haut dans 350 px de large est un carré, ce qui suffit. */
@media(max-width:700px){
  .apo-body iframe[src*="google.com/maps/embed"]{height:260px}
  .apo-body iframe[src*="calendar.google.com"]{height:360px}
}

/* Les documents intégrés (feuilles de semaine, tract d'activités) ont leur
   propre bloc, POSÉ PLUS BAS dans cette feuille : il doit passer après les
   règles d'images des articles du 01/08, qui déclarent les mêmes propriétés.
   Chercher « DOCUMENTS INTÉGRÉS ». */

/* ============================================================
   CARTE DES APOSTOLATS (la carte de France de la page d'accueil)
   ------------------------------------------------------------
   Le tracé et les points viennent de includes/deaneries-map.php, construits
   depuis les coordonnées en base : la carte suit les apostolats d'elle-même.
   ============================================================ */
.amap-wrap{max-width:820px;margin:0 auto;position:relative}
.amap{width:100%;height:auto;display:block}
.amap .amap-dot,.deaneries-map .dmap-dot{fill:var(--navy);transition:fill .15s;cursor:pointer}
.amap .amap-dot:hover,.deaneries-map .dmap-dot:hover{fill:var(--bleu)}
/* ⚠ LA CIBLE SE RESSERRE SOUS LA SOURIS (01/08, demande de Jean : « les cercles
   sont trop sensibles ; il faut vraiment qu'on ne voie les tuiles des chanoines
   que quand la souris est exactement dessus »).

   Le cercle transparent de deaneries-map.php a un rayon de 15 pour un point
   visible de 6. Mesuré sur les 38 apostolats : VINGT-DEUX paires ont ainsi des
   cibles qui se recouvrent, et c'est le voisin qui répond — la Chapelle
   d'Armentières pour Lille, Port-Marly pour Paris. À 7, il n'en reste que trois,
   celles dont les points eux-mêmes se superposent.

   ⚠ SEULEMENT POUR UN POINTEUR FIN. Au doigt, la cible large reste nécessaire,
   d'autant que le SVG est réduit sur un téléphone : ces 15 unités n'y valent
   déjà que 7 pixels d'écran. Les mêmes conditions que le script de la carte, qui
   distingue déjà le tactile par `(hover: none)`.

   `r` en propriété de feuille est du SVG 2 : un navigateur qui l'ignore garde
   l'attribut du balisage, donc le comportement d'avant. On ne perd rien. */
@media (hover:hover) and (pointer:fine){
  .amap .amap-hit{r:7}
}
.amap-hors{fill:none;stroke:#c9d4e2;stroke-dasharray:3 3}
.amap-inset-label{font-family:var(--sans);font-size:11px;fill:var(--gris)}
/* ---------- Infobulle au survol d'un point ----------
   ⚠ CES RÈGLES DÉCRIVENT LE BALISAGE RÉEL de apostolates_map_html(), qu'il faut
   avoir sous les yeux pour les lire :

     <div class="amap-tip">
       <strong class="amap-tip__name">Nom de l'apostolat</strong>
       <span class="amap-tip__city">Ville</span>
       <ul class="amap-tip__list amap-tip__list--3">
         <li> <img class="amap-tip__photo">            ← la photo est SŒUR de __who
              <span class="amap-tip__who">
                <span class="amap-tip__nom">Nom</span>
                <span class="amap-tip__role">Charge</span>
              </span> </li>
       </ul>
     </div>

   Une première version avait été écrite sur un balisage SUPPOSÉ, et se trompait
   sur trois points (retour de Jean : « on voit encore les puces de liste, ça ne
   va pas du tout ») : la liste n'était pas dépuceléе, le modificateur de
   colonnes était nommé `__list2` alors que le PHP écrit `__list--2`, et le flex
   qui aligne la photo au texte était posé sur `__who`, qui ne contient pas la
   photo. Ne pas modifier ces sélecteurs sans rouvrir le PHP. */
.amap-tip{
  position:absolute;z-index:5;pointer-events:none;
  min-width:200px;max-width:min(540px, calc(100vw - 32px));
  background:#fff;border:1px solid #dce5f0;border-radius:9px;padding:13px 15px;
  box-shadow:0 12px 30px rgba(29,37,64,.20)}
/* Le nom de l'apostolat est le titre ; la ville, sa précision. */
.amap-tip__name{
  display:block;font-family:var(--titre);font-weight:400;font-size:18px;
  color:var(--navy);line-height:1.2}
.amap-tip__city{
  display:block;font-family:var(--sans);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--gris);margin-top:.15rem}
/* La liste des chanoines, SUR UNE SEULE COLONNE (demande de Jean, 01/08, en
   second examen : « les photos et les titres sont trop petits, mets-les sur une
   seule colonne, on verra mieux les têtes et les noms »).
   Trois colonnes tenaient dans la largeur, mais chacune était si étroite qu'il
   fallait rapetisser la vignette et le nom pour les y faire entrer. Sur une
   colonne, la même largeur profite à un seul chanoine à la fois : la vignette
   passe de 38 à 54 px et le nom de 13,5 à 15,5.
   `list-style:none` est indispensable : c'est un <ul>, et les puces
   s'affichaient au milieu de la grille. */
.amap-tip__list{
  list-style:none;margin:.8rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:.75rem}
/* Une entrée : la photo, puis le nom et la charge empilés à côté. */
.amap-tip__list li{display:flex;align-items:center;gap:.7rem;padding:0;min-width:0}
.amap-tip__who{display:flex;flex-direction:column;min-width:0}
.amap-tip__photo{
  width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center top;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(29,37,64,.18)}
.amap-tip__photo--ph{
  background:linear-gradient(135deg,var(--fond-2),#e7edf5);
  font-family:var(--titre);font-size:19px;color:var(--bleu)}
.amap-tip__nom{font-size:15.5px;color:var(--encre);line-height:1.25}
/* ⚠ LA CHARGE N'EST PAS EN CAPITALES (demande de Jean, 01/08 : « ça prend trop
   de place »). Les valeurs sont stockées correctement capitalisées — « Prieur »,
   mais aussi « Official de l'Officialité interprovinciale de Lille et Reims » —
   et cette dernière, mise en capitales, occupait trois lignes dans une colonne
   d'infobulle. L'interlettrage, qui n'existait que pour aérer des capitales,
   part avec elles. */
.amap-tip__role{font-family:var(--sans);font-size:12.5px;color:var(--bleu);line-height:1.3}

/* ---------- La carte cède la place à une liste sur téléphone ----------
   Demande de Jean, 01/08 : « sur mobile, il ne faut pas mettre la carte, ce
   n'est pas pratique ; il vaut mieux une liste de tous les apostolats sur deux
   colonnes ». Une carte de France dans 390 px de large donne des points de
   quelques pixels, impossibles à viser au doigt.
   Les deux sont écrites dans la page (voir apostolates_map_html) et c'est ici
   qu'on choisit : rien n'est calculé côté navigateur, et la liste sert aussi de
   contenu lisible aux moteurs et aux lecteurs d'écran. */
.amap-liste{display:none}
@media(max-width:700px){
  .amap{display:none}
  /* ⚠ L'ÉCART SOUS LE TITRE (01/08, demande de Jean : « il manque un petit
     espace entre le titre "Nos apostolats en France" et la liste sur mobile,
     c'est trop collé »). La liste portait margin:0, et sur écran large ce
     n'était pas visible : c'est la CARTE qui s'affiche là, avec son propre
     espacement. La liste n'apparaît que sous 700 px, donc le défaut aussi. */
  .amap-liste{
    display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;
    list-style:none;margin:1.35rem 0 0;padding:0}
  .amap-liste li{min-width:0}
  .amap-liste a{
    display:block;padding:.55rem .7rem;border:1px solid #e3e9f1;border-radius:8px;
    background:#fff;color:var(--navy);line-height:1.3;height:100%}
  .amap-liste a:hover{border-color:var(--bleu)}
  .amap-liste__nom{display:block;font-size:15px}
  /* ⚠ LA VILLE NE S'AFFICHE PLUS (01/08, demande de Jean : « ne mets pas le
     sous-titre dans la liste des apostolats, par exemple pour Dijon tu as
     marqué Fontaine-lès-Dijon, ce n'est pas nécessaire »). Elle reste PRODUITE
     par deaneries-map.php et non retirée du HTML : ce fichier porte le chantier
     de la Corse d'une autre session, et l'y toucher aurait emporté son travail
     en cours. Le jour où l'on voudra la revoir, il n'y a qu'une ligne à ôter. */
  .amap-liste__ville{display:none}
}
/* Sous 380 px, deux colonnes de noms comme « Chapelle d'Armentières » se
   coupent en trop de lignes : une seule colonne se lit mieux. */
@media(max-width:380px){
  .amap-liste{grid-template-columns:1fr}
}
.dmap-legend{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;
  font-family:var(--sans);font-size:13px;color:var(--gris)}
.dmap-leg{display:flex;align-items:center;gap:.4rem}
.amap-hint{text-align:center;font-size:14px;color:var(--gris);font-style:italic;margin-top:1rem}

/* ============================================================
   PAGE D'ACCUEIL — blocs propres à la Province.
   ============================================================ */
/* Les médaillons des œuvres (Retraites, Camps et colonies, Sacré-Cœur, Écoles,
   Confrérie de la Consolation). Ce sont des sceaux ronds : ils gardent leur
   forme, on ne les encadre pas. UNE SEULE grille pour tous les écrans, là où
   l'ancien site entretenait deux sections jumelles, une pour le PC et une pour
   le téléphone, qu'il fallait modifier toutes les deux. */
.oeuvres{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:34px 26px;
  max-width:980px;margin:0 auto}
.oeuvre{display:block;text-align:center;transition:transform .25s}
.oeuvre:hover{transform:translateY(-6px)}
.oeuvre img{width:100%;max-width:185px;margin:0 auto;filter:drop-shadow(0 8px 20px rgba(20,28,48,.35))}
.oeuvre span{display:block;margin-top:.7rem;font-family:var(--sans);font-size:13px;
  text-transform:uppercase;letter-spacing:1px;color:#fff}

/* Bande de chiffres (147 chanoines, 71 sœurs…). Les nombres montent au
   défilement (site.js) ; la valeur finale est écrite dans le HTML, donc lisible
   même sans JavaScript. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:30px 18px;text-align:center}
.stat-num{font-family:var(--titre);font-size:clamp(38px,5vw,54px);color:var(--navy);line-height:1}
.stat-lbl{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--gris);margin-top:.4rem}

/* La devise manuscrite, dessinée au défilement (SVG repris de l'ancien site). */
.moto{margin:0 auto;max-width:35em;opacity:.6}
.moto .anim{stroke:var(--navy);fill:var(--navy);stroke-dasharray:1800;stroke-width:2;
  stroke-miterlimit:10;animation:moto-trace 6s cubic-bezier(0,.23,1,.1)}
@keyframes moto-trace{
  0%{opacity:0;fill:none;stroke-dashoffset:1800}
  30%{opacity:1;fill:none;stroke-dashoffset:1800}
  90%{fill:rgba(0,0,0,0)}
  100%{opacity:1;fill:rgba(0,0,0,0);stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){.moto .anim{animation:none;stroke-dashoffset:0}}

/* Encart de citation pleine largeur (Dom Guéranger, sur l'accueil).
   La photographie de fond est posée en style en ligne par home-body.php ; à
   défaut, le fond crème de la charte. Le VOILE CLAIR est indispensable : le
   texte est bleu marine, et la photographie est sombre par endroits. */
.citation{position:relative;background:var(--creme-2) center/cover no-repeat;padding:64px 0}
.citation::before{content:"";position:absolute;inset:0;background:rgba(246,248,251,.70)}
.citation blockquote{
  position:relative;
  max-width:860px;margin:0 auto;padding:0 24px;text-align:center;
  font-family:var(--titre);font-size:clamp(22px,3.1vw,30px);line-height:1.45;color:var(--navy)}
.citation cite{display:block;margin-top:1.1rem;font-family:var(--titre-italique);font-style:italic;
  font-size:17px;color:var(--gris)}

/* ============================================================
   ENVELOPPE DU CONTENU
   ------------------------------------------------------------
   <main class="page-body"> est un simple emballage, SANS largeur ni marge :
   ce sont les sections qu'il contient qui portent leur pleine largeur (les
   bandes de couleur de l'accueil) ou leur conteneur centré. Lui donner une
   largeur empêcherait toute bande d'aller bord à bord.
   ============================================================ */
.page-body{display:block}
/* Respiration verticale ET LARGEUR des pages ordinaires. L'accueil et les pages
   d'apostolat ont les leurs. */
.page-content{max-width:1180px;margin:0 auto;padding:56px 24px 72px}
/* Page de TEXTE (aucune rangée du page builder) : on resserre à la mesure de
   lecture du site. Voir le commentaire d'index.php : une ligne de 1400 px ne se
   lit pas, l'œil perd le début de la suivante. */
.page-content--texte{max-width:880px}
.page-content > .pf-section{margin-bottom:2.4rem}
.page-content > .pf-section:last-child{margin-bottom:0}
/* Respiration des titres et des listes du contenu hérité, que le thème Joomla
   portait jusqu'ici : sans elle, chaque titre colle au paragraphe précédent. */
.page-content h2{font-size:clamp(24px,3vw,31px);margin:2rem 0 .7rem}
.page-content h3{font-size:clamp(20px,2.4vw,25px);margin:1.6rem 0 .5rem}
.page-content h2:first-child,.page-content h3:first-child{margin-top:0}
.page-content p{margin-bottom:1rem}
.page-content ul,.page-content ol{margin:0 0 1rem 1.4rem}
.page-content--texte p{text-align:justify}

/* --- La barre de menu sur les pages internes ---------------------------------
   Le logo de la Province est un bloc HORIZONTAL (475 × 150) : à la hauteur de
   72 px qu'icrss donne à son écu, il occupe 228 px de large. Ajouté aux six
   onglets en Marcellus espacé, il faisait passer « Contact » à la ligne dès
   1400 px de large (constaté à l'image le 01/08). Le logo est donc plus bas,
   et les onglets se resserrent avant que la place ne manque. */
body:not(.home) .nav-logo img{height:58px;transform:translateY(8px)}
body:not(.home) .mainnav.solid .nav-logo img{height:38px;transform:translateY(0)}
@media(max-width:1320px){
  .nav-links a,.nav-links span.nav-parent-label{padding:10px 9px;font-size:15px;letter-spacing:1px}
}
/* Dans une page d'apostolat, c'est .apo-body qui borne et qui espace : les
   rangées ne doivent pas ajouter une seconde largeur ni un second retrait. */
.apo-body .pf-section > .pf-row{max-width:none;padding:0}

/* Vignette ronde d'une carte d'entrée de l'accueil (.pilier). Sur icrss, .ico
   porte un caractère ; ici, une photographie. */
.pilier .ico img{
  width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto;
  box-shadow:0 4px 14px rgba(29,37,64,.18)}
.pilier .ico{line-height:0}

/* La barre de menu est FIXÉE et transparente en haut de page : une page servie
   SANS bandeau de tête (la 404, une page nue) démarrerait donc sous elle, et
   son premier titre serait illisible. On dégage la hauteur de la barre dans ce
   seul cas, reconnu en PHP (voir public_head, qui pose la classe ci-dessous).
   ⚠ NE PAS retenter de le deviner en CSS avec `:first-child` : le bandeau de
   tête est émis AVANT <main>, jamais dedans, donc le contenu en est TOUJOURS
   le premier enfant. La règle s'appliquait alors à toutes les pages et creusait
   un vide de 130 px sous chaque bandeau (défaut signalé par Jean le 01/08). */
.page-body--sans-bandeau{padding-top:130px}

/* ============================================================
   MÉGAMENU « APOSTOLATS » — plusieurs colonnes.
   ------------------------------------------------------------
   Demande de Jean, 01/08 : « il est impossible de tout y trouver ». Les 38
   apostolats s'empilaient en UNE colonne, plus haute que l'écran.
   La classe est posée par site_menu() (public-layout.php) au-delà de 8 entrées :
   ce n'est donc pas réservé aux apostolats, tout sous-menu qui grandit en
   profitera.

   QUATRE COLONNES sur grand écran, trois puis deux quand la place manque : le
   panneau est en `repeat(auto-fit, minmax(…))`, il compte donc ses colonnes
   tout seul et rien n'est à revoir si des apostolats sont créés ou fermés.

   ⚠ LA HAUTEUR RESTE BORNÉE malgré les colonnes (max-height + défilement),
   c'est le second garde-fou demandé par Jean : sur un écran bas — un portable
   posé en 1366 × 768, ou une fenêtre réduite — même quatre colonnes de dix
   noms dépassent, et un menu qui déborde ne se referme pas, il se tronque.

   ⚠ LARGEUR PLAFONNÉE À LA FENÊTRE (min() avec 100vw) : le panneau est centré
   sous son onglet par translateX(-50%). Sans ce plafond, un panneau plus large
   que l'écran déborderait des DEUX côtés et une barre de défilement horizontale
   apparaîtrait sur toute la page.
   ============================================================ */
/* ⚠ NE JAMAIS POSER `display` DANS CETTE RÈGLE. C'est `.sub-menu{display:none}`
   qui tient le panneau fermé, et cette règle-ci vient après : y écrire
   `display:grid` laissait le mégamenu OUVERT EN PERMANENCE sur toutes les pages
   du site, par-dessus le bandeau de tête (constaté à l'image le 01/08). La mise
   en grille est donc déclarée plus bas, avec l'ouverture. */
/* ⚠ LE PANNEAU SE REMPLIT PAR COLONNE, PAS PAR LIGNE (01/08, demande de Jean :
   « ils sont triés par ordre alphabétique, mais par ligne, alors que je les veux
   par colonne »). Une grille place ses éléments ligne par ligne : les quatre
   premiers apostolats se retrouvaient côte à côte sur la première ligne, et
   l'alphabet se lisait en zigzag.

   `grid-auto-flow:column` renverse le sens de remplissage, mais il faut alors
   dire COMBIEN de lignes tient une colonne — sans quoi la grille n'en fait
   qu'une et aligne tout à l'horizontale. Ce nombre ne se calcule pas en CSS : il
   vient de public-layout.php, qui compte les entrées et divise par quatre, dans
   la variable `--mega-rows`. Le repli à 10 ne sert que si le gabarit changeait
   sans que cette feuille le sache.

   `grid-template-columns` DOIT disparaître : une piste de colonnes déclarée
   reprend la main sur le flux et l'on retomberait en remplissage par ligne. Les
   colonnes sont donc créées à la demande, toutes de même largeur. */
.sub-menu--mega{
  left:50%;transform:translateX(-50%);
  width:max-content;max-width:min(940px, calc(100vw - 28px));
  grid-auto-flow:column;
  grid-template-rows:repeat(var(--mega-rows,10),auto);
  grid-auto-columns:minmax(190px,1fr);
  gap:0 6px;padding:10px 12px;
  max-height:min(70vh,560px);overflow-y:auto;
  border-radius:0 0 10px 10px}
/* Ouverture : les mêmes déclencheurs que pour un sous-menu ordinaire, mais en
   grille au lieu d'un bloc. */
.has-sub:hover > .sub-menu--mega,
.has-sub:focus-within > .sub-menu--mega{display:grid}
.sub-menu--mega a{
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:9px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Le trait de séparation du DERNIER élément de chaque colonne n'a plus de sens
   une fois la liste répartie : on le laisse partout, il tient lieu de réglure
   et aide l'œil à suivre une ligne. Seule la toute dernière entrée le perd. */
.sub-menu--mega li:last-child a{border-bottom:none}
/* Le survol ne décale plus le texte : sur plusieurs colonnes, un décalage de
   6 px fait tressauter la colonne entière au passage de la souris. */
.sub-menu--mega a:hover{padding-left:12px;background:rgba(79,111,156,.34)}
/* Ascenseur discret, aux couleurs du panneau. */
.sub-menu--mega{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent}
.sub-menu--mega::-webkit-scrollbar{width:8px}
.sub-menu--mega::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}

/* Dans le tiroir mobile, le panneau redevient une colonne (la largeur ne permet
   rien d'autre), mais garde sa hauteur bornée : sans cela, ouvrir « Apostolats »
   sur un téléphone repousse toutes les autres entrées du menu hors de l'écran. */
@media(max-width:880px){
  /* ⚠ LE REMPLISSAGE PAR COLONNE EST DÉFAIT ICI, et il faut défaire les DEUX
     déclarations : le flux, sinon les entrées repartiraient en colonnes dans un
     tiroir qui n'en a qu'une, et la piste de lignes, sinon le panneau garderait
     une hauteur découpée en `--mega-rows` rangées. */
  .sub-menu--mega{
    position:static;transform:none;width:100%;max-width:none;
    grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:1fr;padding:4px 0;border-radius:0;
    max-height:46vh}
  /* Sur mobile, ni :hover ni :focus-within ne pilotent le sous-menu (le tap
     rend le hover collant) : seule .open l'ouvre, comme pour les autres. */
  .has-sub:hover > .sub-menu--mega,
  .has-sub:focus-within > .sub-menu--mega{display:none}
  .has-sub.open > .sub-menu--mega{display:grid}
}

/* ============================================================
   RETOUCHES DU 01/08 — constatées à l'image sur /test.
   ============================================================ */

/* La bande sombre (.band) d'icrss.org appelait une photographie qui n'existe
   pas ici (assets/img/masthead.jpg) : chaque page qui l'emploie demandait donc
   un fichier absent, pour rien. Elle garde son dégradé bleu marine, et la
   photographie éventuelle se passe en style en ligne, comme pour .citation. */
.band{background:linear-gradient(rgba(20,28,48,.90),rgba(20,28,48,.94));background-size:cover;background-position:center}

/* Formulaire d'inscription à l'infolettre, présent dans le contenu importé de
   plusieurs apostolats (classes Mailchimp `mc-field-group`). Le thème Joomla
   l'habillait ; il est reparti, et les champs se retrouvaient nus, larges de
   150 pixels et sans étiquette lisible. */
.mc-field-group{display:flex;flex-direction:column;gap:5px;margin-bottom:1rem;max-width:420px}
.mc-field-group label{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--navy)}
.mc-field-group input{
  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}
.mc-field-group input:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(79,111,156,.10)}
/* Le bouton d'envoi de ces formulaires n'a aucune classe : on le prend par son
   type, dans le contexte du formulaire, pour ne pas habiller tous les boutons
   du site au passage. */
.mc-field-group + input[type=submit],
form input[type=submit].button,
.apo-body form input[type=submit]{
  display:inline-block;padding:11px 28px;border:none;border-radius:8px;color:#fff;
  text-transform:uppercase;letter-spacing:1.4px;font-size:13.5px;font-weight:600;
  font-family:var(--sans);cursor:pointer;
  background-image:linear-gradient(0deg,var(--navy) 0%,#5f81ac 100%);
  box-shadow:0 4px 14px rgba(29,37,64,.18);transition:background-image .3s ease}
.apo-body form input[type=submit]:hover{
  background-image:linear-gradient(-180deg,var(--navy-dark) 0%,var(--bleu) 100%)}

/* ─── LE CADRE D'INSCRIPTION À L'INFOLETTRE (01/08, demande de Jean) ──────────
   « Pour Port-Marly, il faut que tu fasses un petit cadre plus joli et plus
   petit pour s'abonner à la newsletter. Si ça peut tenir sur une ligne sur PC,
   c'est encore mieux. »

   Il occupait une demi-page pour trois champs : trois étiquettes empilées, trois
   champs sur toute la largeur de la colonne, un bouton centré, et aucun cadre
   pour tenir l'ensemble — le formulaire flottait entre les fiches des chanoines
   et les documents.

   ⚠ TOUT SE FAIT À L'AFFICHAGE, le contenu n'est pas touché : c'est un bloc
   Mailchimp importé de l'ancien site, que le rédacteur retrouve tel quel dans le
   page builder. D'où deux contorsions, qui ne sont pas des maladresses :

   · LES `!important` SONT INDISPENSABLES. Le contenu porte des styles EN LIGNE
     (`width:30%` et `text-align:right` sur chaque étiquette, `width:70%` sur
     chaque champ, `text-align:center` sur le bouton). Un style en ligne ne se
     bat par aucune feuille, quelle que soit sa spécificité — seul `!important`
     l'emporte. Sans eux, les étiquettes garderaient leur tiers de largeur et le
     rang ne pourrait pas se former.

   · LA COLONNE EST ÉLARGIE PAR `:has()`. Le bloc vit dans une colonne de quatre
     douzièmes, où trois champs et un bouton ne tiendront jamais sur une ligne.
     `:has()` est la seule façon d'atteindre le parent depuis l'enfant qui le
     caractérise. Un navigateur qui ne le connaît pas ignore ces deux règles-là
     et retrouve le formulaire compact dans sa colonne d'origine, sans cadre :
     c'est moins joli, mais ce n'est pas cassé.

   Le formulaire est UNIQUE sur le site (mesuré le 01/08 : une page sur les 39,
   celle de Port-Marly). La règle est néanmoins écrite pour le motif et non pour
   cette page-là, afin qu'un second apostolat qui collerait le même bloc soit
   habillé sans qu'on ait à y revenir. */
.apo-body .pf-row > [class*="pf-col-"]:has(#mc_embed_signup){flex-basis:100%;max-width:100%}
/* Le cadre est CENTRÉ dans sa rangée (01/08, second retour de Jean : « la petite
   section s'abonner à la newsletter devrait être centrée »). Il est plus étroit
   que la colonne qui le porte, désormais pleine largeur : sans marges
   automatiques, il restait collé à gauche. */
.apo-body .sppb-addon:has(#mc_embed_signup){
  border:1px solid #dde4ee;border-radius:14px;background:#fff;
  padding:18px 22px 20px;box-shadow:0 3px 14px rgba(20,28,48,.06);
  max-width:820px;margin-left:auto;margin-right:auto}
.apo-body .sppb-addon:has(#mc_embed_signup) .sppb-addon-title{
  font-size:19px;margin-bottom:.85rem}
/* Les champs et le bouton sur un seul rang, chacun prenant sa part. Le rang se
   replie de lui-même quand la largeur manque : c'est le même code sur téléphone,
   sans media query à tenir à jour. */
#mc_embed_signup_scroll{display:flex;flex-wrap:wrap;gap:.7rem .8rem;align-items:flex-end}
#mc_embed_signup .mc-field-group{
  flex:1 1 175px;margin-bottom:0;max-width:none;gap:4px}
#mc_embed_signup .mc-field-group label{
  width:auto !important;text-align:left !important;font-size:13px}
#mc_embed_signup .mc-field-group input{width:100% !important;padding:9px 12px;font-size:14.5px}
/* Le bouton ne s'étire pas : il garde sa taille et se pose au bout du rang, à
   hauteur des champs. */
#mc_embed_signup_scroll > .clear:has(input[type=submit]){
  flex:0 0 auto;text-align:left !important;margin:0}
#mc_embed_signup .clear input[type=submit]{padding:10px 22px}
/* La zone de réponse de Mailchimp est vide tant qu'il n'y a ni erreur ni
   confirmation. Sans cette ligne, elle occuperait une case du rang et y
   creuserait un trou ; à pleine largeur, elle ne se voit que lorsqu'elle parle.
   ⚠ ET `order` EST INDISPENSABLE, constaté à l'image : dans le contenu, cette
   zone est écrite AVANT le bouton. À pleine largeur mais à sa place, elle
   renvoyait donc le bouton à la ligne suivante — les trois champs étaient bien
   sur un rang, mais « S'inscrire » se retrouvait tout seul en dessous. En la
   faisant passer en dernier, le bouton remonte au bout du rang. */
#mc_embed_signup #mce-responses{flex:1 0 100%;order:1;margin:0;padding:0}

/* Les titres du contenu importé des apostolats (« Vos chanoines », « Dernières
   homélies »…) : ils étaient dimensionnés par le thème. */
.apo-body h2,.apo-body h3{margin-bottom:.8rem}
.apo-body p{margin-bottom:1rem}
.apo-body ul,.apo-body ol{margin:0 0 1rem 1.4rem}

/* Vignettes des documents (feuilles de semaine, calendriers) du contenu
   importé : elles s'affichaient sans cadre ni repère. */
.apo-body .news img,.apo-body .custom-dimensions img{
  border-radius:6px;box-shadow:0 4px 14px rgba(29,37,64,.14)}
.apo-body .clear{clear:both}

/* ============================================================
   VOILE DU MENU MOBILE — c'est lui qui referme le tiroir.
   ------------------------------------------------------------
   Demande de Jean, 01/08 : « une fois qu'on a ouvert le menu latéral, on ne
   peut plus revenir sur le site ». Le tiroir est en `position:fixed` : il
   recouvrait le bouton même qui l'avait ouvert, et il ne restait donc aucun
   geste pour en sortir.

   ⚠ `pointer-events:none` TANT QUE LE MENU EST FERMÉ. Sans cela, ce voile
   invisible couvrirait la page entière et avalerait tous les clics du site.
   ⚠ Il ne vit que sous 880 px : sur grand écran il n'y a pas de tiroir, et un
   voile qui traîne y ferait le même dégât.
   ============================================================ */
.nav-scrim{display:none}
@media(max-width:880px){
  .nav-scrim{
    display:block;position:fixed;inset:0;z-index:49;
    background:rgba(20,28,48,.55);
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  /* Le bouton doit rester ATTEIGNABLE au-dessus du tiroir : c'est lui qui
     devient la croix de fermeture (les trois barres pivotent). Sans cette
     élévation, le tiroir, positionné, se peint par-dessus et la croix ne
     répond pas — le défaut d'origine. */
  .nav-burger{position:relative;z-index:2}
  /* Le corps de page ne défile plus derrière le menu ouvert : sinon un
     glissement du doigt à côté du tiroir fait filer la page sous le menu. */
  body.nav-open{overflow:hidden}
}

/* #############################################################################
   RETOURS DE JEAN DU 01/08 (soir) — images des articles, barre du haut,
   tiroir mobile, marges sur téléphone.
   ############################################################################# */

/* ============================================================
   IMAGES DES ARTICLES — habillage du texte, taille, ombre, légende.
   ------------------------------------------------------------
   ⚠ CE QUI S'ÉTAIT PASSÉ. Le contenu hérité illustre ses textes avec
   `<figure class="article left small">`, `right`, `full`, `no-shadow`,
   `circle-shadow`… Ces classes n'étaient stylées NULLE PART chez nous : c'est
   `justitia-custom.css`, la feuille du thème Joomla, qui portait leurs largeurs,
   leurs flottants et leur ombre. En la retirant le 01/08, toutes les images des
   articles sont passées en PLEINE LARGEUR, sans ombre et sans habillage — le
   blason de « Qui sommes-nous », qui occupait 20 %, mangeait tout l'écran.

   Les règles ci-dessous reprennent les MÊMES proportions que l'ancien thème
   (33 % par défaut, 20 % en `small`, 50 % en `large`, 75 % en `x-large`,
   100 % en `full`), pour que les pages déjà écrites retrouvent exactement leur
   mise en page. L'ombre est celle du site (`0 0 10px rgba(0,0,0,.3)` avec des
   coins de 5 px) : c'est déjà la valeur que porte `.prose img`, icrss l'ayant
   lui-même reprise d'ici.

   ⚠ LA LARGEUR EST POSÉE SUR LA `figure`, PAS SUR L'IMAGE. L'ancien thème la
   posait sur l'image et laissait la figure à 100 %, ce qui obligeait à
   positionner la légende en absolu par-dessus la photo. La légende peut ainsi
   se ranger sous l'image, comme partout ailleurs sur le site.
   ============================================================ */
/* ⚠ COLLISION DE NOMS : `.news` DÉSIGNE DEUX CHOSES (mesuré le 01/08).
   La page d'accueil a `.news{display:grid;grid-template-columns:repeat(3,1fr)}`
   pour sa rangée de trois actualités ; et l'ancien site illustrait ses pages
   avec `<figure class="news center custom-dimensions">`. Une figure héritée
   devenait donc une GRILLE DE TROIS COLONNES, et son unique enfant tombait dans
   la première : sur Port-Marly, la vignette d'un document mesurait 86 px de
   large dans une colonne de 341 px — (341 − 2 × 26) / 3, au pixel près.
   Le défaut est muet : la largeur de 33 % déclarée ici s'appliquait bien à la
   figure, seul son CONTENU se rétrécissait. D'où `display:block`, qui rend à
   ces figures leur nature de bloc. */
.page-content figure.article, .apo-body figure.article, .prose figure.article,
.page-content figure.news,    .apo-body figure.news,    .prose figure.news{
  display:block;width:33%;max-width:100%;margin:.2rem 0 1.1rem;position:relative}
/* ⚠ L'OMBRE SUIT LA SILHOUETTE, ELLE NE DESSINE PLUS DE CADRE (01/08, demande de
   Jean : « certaines images sont faites pour ne pas avoir de fond […] ces
   choses-là ne devraient pas avoir un cadre qui ressort à cause de l'ombre.
   S'il peut y avoir de l'ombre sans cela, c'est le mieux »).

   Une `box-shadow` se dessine autour de la BOÎTE. Sur un logo détouré, elle
   trace donc un rectangle net là où l'image est transparente : c'est le cadre
   que Jean voit autour de l'écu de « Qui sommes-nous ? ». `drop-shadow` est un
   filtre : il lit le canal alpha et épouse la forme réelle — l'écu porte alors
   son ombre le long de ses contours, et le fond reste le fond.

   Le flou est passé de 10 à 5 : celui d'un filtre est un écart-type, il porte
   environ deux fois plus loin qu'un flou de box-shadow à valeur égale. */
.page-content figure.article img, .apo-body figure.article img, .prose figure.article img,
.page-content figure.news img,    .apo-body figure.news img,    .prose figure.news img{
  width:100%;height:auto;display:block;margin:0;
  border-radius:5px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.30))}

/* Tailles héritées. `custom-dimensions` laisse l'image à sa taille naturelle. */
.page-content figure.small, .apo-body figure.small, .prose figure.small{width:20%}
.page-content figure.large, .apo-body figure.large, .prose figure.large{width:50%}
.page-content figure.x-large, .apo-body figure.x-large, .prose figure.x-large{width:75%}
.page-content figure.full, .apo-body figure.full, .prose figure.full{width:100%}
.page-content figure.custom-dimensions, .apo-body figure.custom-dimensions,
.prose figure.custom-dimensions{width:auto}

/* Habillage du texte. Les marges sont dissymétriques à dessein : du côté du
   texte il faut de l'air, du côté de la marge il n'en faut pas. */
.page-content figure.left, .apo-body figure.left, .prose figure.left,
.page-content iframe.left, .apo-body iframe.left{float:left;margin:.2rem 1.6rem 1rem 0}
.page-content figure.right, .apo-body figure.right, .prose figure.right,
.page-content iframe.right, .apo-body iframe.right{float:right;margin:.2rem 0 1rem 1.6rem}
.page-content figure.center, .apo-body figure.center, .prose figure.center{
  float:none;margin-left:auto;margin-right:auto}
/* Un flottant doit être refermé, sinon l'image déborde sous le titre suivant
   ou sous le pied de page (le défaut constaté le 30/07 sur ?page=vocation). */
.page-content::after, .apo-body::after{content:"";display:block;clear:both}
.page-content h2, .page-content h3, .apo-body h2, .apo-body h3{clear:both}

/* ============================================================
   DOCUMENTS INTÉGRÉS — feuille dominicale, tract des activités.
   ------------------------------------------------------------
   Demande de Jean (01/08) : « quand un document papier ou une feuille est
   intégré, il faut lui attribuer une hauteur minimale suffisante ; sur la page
   de Port-Marly, les documents intégrés manquent de hauteur et apparaissent
   tout petits. »

   CE QUE C'EST : une vignette cliquable qui ouvre le PDF, écrite par l'ancien
   site « <figure class="news center custom-dimensions" style="width:184px">
   <a href="…pdf"><img><figcaption>Consulter</figcaption></a></figure> ».
   Trois largeurs en dur (184 px, 283 px), héritées du jour où chaque vignette a
   été posée, DANS une colonne de trois douzièmes : un tract A4 tombait à
   quelques centimètres de haut.

   ⚠ POURQUOI `:has(a[href$=".pdf"])` ET NON `figure.news`. Cette classe sert
   aussi aux illustrations ordinaires des articles, qui doivent garder les 33 %
   et la hauteur libre posés plus haut. Ce qui distingue un DOCUMENT, c'est
   qu'on clique dessus pour ouvrir un PDF : c'est cela qu'on vise, et non une
   classe qui ne dit rien de la nature du bloc.

   ⚠ POURQUOI CE BLOC EST ICI, TOUT EN BAS. Les règles d'images des articles
   (« IMAGES DES ARTICLES », plus haut) déclarent `width`, `height` et
   `border-radius` avec la MÊME spécificité. Posé plus haut — c'est ce que
   j'avais fait d'abord — ce bloc était intégralement écrasé par elles, et la
   vignette restait petite : une correction qui ne corrige rien, et qui ne se
   voit qu'à l'image.

   ⚠ LE `!important` SUR LA LARGEUR est le seul moyen de passer devant un
   attribut `style`. Les largeurs en dur sont retirées des contenus par
   tools/fix-apo-pages.php, mais la règle ne doit pas dépendre de ce nettoyage :
   une vignette recollée demain avec sa taille d'origine retomberait sinon dans
   le même trou.

   `object-fit:cover` ancré EN HAUT : une feuille dominicale se reconnaît à son
   en-tête, jamais à son pied de page. La hauteur est celle de la carte Maps,
   pour qu'une rangée qui mêle les deux s'aligne. */
.apo-body figure.news:has(a[href$=".pdf"]),
.page-content figure.news:has(a[href$=".pdf"]){
  display:block;width:100% !important;max-width:100%;margin:0;text-align:left}
.apo-body figure.news:has(a[href$=".pdf"]) a,
.page-content figure.news:has(a[href$=".pdf"]) a{display:block;text-decoration:none}
/* ⚠ LE DOCUMENT GARDE SES PROPORTIONS (01/08, second retour de Jean : « est-ce
   que le cadre avec l'ombre portée qui encadre la feuille d'horaires pourrait
   s'ajuster à sa taille, à la hauteur et à la largeur ? »).
   La hauteur fixe de 340 px et `object-fit:cover` RECADRAIENT le document : un
   A4 y perdait son pied de page, et la boîte ne suivait plus la feuille. La
   largeur commande désormais, la hauteur suit : le cadre épouse le document, et
   il est entier. La demande du matin (« les documents manquent de hauteur »)
   reste satisfaite — c'est la pleine largeur de la colonne qui la donnait, non
   la hauteur imposée. */
.apo-body figure.news:has(a[href$=".pdf"]) img,
.page-content figure.news:has(a[href$=".pdf"]) img{
  display:block;width:100%;height:auto;object-fit:initial;
  border-radius:15px;box-shadow:0 0 10px 0 rgba(0,0,0,.3);transition:transform .25s ease}
.apo-body figure.news:has(a[href$=".pdf"]) a:hover img{transform:scale(1.02)}
/* ⚠ « CONSULTER » EST RETIRÉ (01/08, demande de Jean : « la légende Consulter
   doit être supprimée »). C'est une légende du contenu hérité, que l'on masque à
   l'affichage plutôt que de la retirer des pages : le rédacteur la retrouve dans
   le page builder, et rien ne se perd. Le document reste cliquable — la légende
   est DANS le lien qui entoure déjà la vignette, ce n'est pas elle qui ouvre le
   PDF. */
.apo-body figure.news:has(a[href$=".pdf"]) figcaption,
.page-content figure.news:has(a[href$=".pdf"]) figcaption{display:none}

/* Variantes d'ombre héritées.
   ⚠ `no-shadow` NE MORDAIT PAS, et c'est ce qui a fait naître la demande de Jean
   sur l'écu de « Qui sommes-nous ? » : son contenu porte bien la classe, mais
   `.page-content .no-shadow img` pèse (0,2,1) là où `.page-content figure.article
   img` pèse (0,2,2) — le sélecteur le plus spécifique gagnait, et l'ombre
   restait. La figure est donc nommée dans le sélecteur pour peser autant, et,
   venant après dans la feuille, l'emporter. `filter:none` est indispensable
   depuis que l'ombre est un filtre : annuler la seule box-shadow ne suffirait
   plus. */
.page-content figure.no-shadow img, .apo-body figure.no-shadow img, .prose figure.no-shadow img,
.page-content .no-shadow img, .apo-body .no-shadow img, .prose .no-shadow img{
  box-shadow:none;filter:none}
/* ⚠ `circle-shadow` NE PORTE PLUS D'OMBRE, malgré son nom (01/08, application de
   la règle donnée par Jean : « si l'ombre oblige à voir ce cadre, on laisse
   tomber l'ombre »).

   Les DEUX images du site qui portent cette classe — le logo de l'Œuvre
   salésienne sur la page des écoles, celui de la Société du Sacré-Cœur — sont
   des dessins posés sur une PASTILLE BLANCHE OPAQUE. Mesuré dans les fichiers :
   seuls leurs coins sont transparents (21 % de l'image), le disque, lui, est
   plein (#FFFFFF et #FEFEFF). Même une ombre qui épouse la forme y souligne donc
   un disque qui n'appartient pas au dessin.

   ⚠ CE DISQUE NE PEUT PAS SE CORRIGER ICI : il est DANS l'image. Sur le fond
   très clair du site il se remarque à peine une fois l'ombre partie, mais le
   remède véritable est de détourer ces deux fichiers.
   Le sélecteur nomme la figure pour peser autant que « figure.article img », qui
   pose l'ombre : sans cela il ne mordrait pas, comme `no-shadow` avant lui. */
.page-content figure.circle-shadow img, .apo-body figure.circle-shadow img,
.prose figure.circle-shadow img,
.page-content .circle-shadow img, .apo-body .circle-shadow img, .prose .circle-shadow img{
  border-radius:50%;box-shadow:none;filter:none}
.page-content .full-radius img, .apo-body .full-radius img{border-radius:50%}

/* Légende : sous l'image, en italique gris, comme partout ailleurs sur le site.
   ⚠ L'ancien thème la posait EN ABSOLU par-dessus le haut de la photo, sur un
   dégradé noir, et la faisait apparaître au survol quand l'image était un lien.
   Au doigt il n'y a pas de survol : la légende y était donc invisible. Elle est
   désormais toujours lue, par tout le monde. */
.page-content figure figcaption, .apo-body figure figcaption, .prose figure figcaption{
  position:static;width:auto;height:auto;
  background:none;padding:0;margin-top:.5rem;border-radius:0;
  color:var(--gris);font-size:14px;font-style:italic;line-height:1.45;
  text-align:center;text-shadow:none;font-weight:400;opacity:1}

/* Sur téléphone, plus d'habillage : une image flottée à 33 % de 390 px ne
   laisse que quelques mots par ligne à côté d'elle. Tout passe en pleine
   largeur, dans l'ordre de lecture. */
@media(max-width:700px){
  .page-content figure.article, .apo-body figure.article, .prose figure.article,
  .page-content figure.news, .apo-body figure.news, .prose figure.news,
  .page-content figure.small, .apo-body figure.small, .prose figure.small,
  .page-content figure.large, .apo-body figure.large, .prose figure.large,
  .page-content figure.x-large, .apo-body figure.x-large, .prose figure.x-large{
    width:100%;float:none;margin:1.1rem 0}
  .page-content figure.circle-shadow, .apo-body figure.circle-shadow,
  .page-content figure.full-radius, .apo-body figure.full-radius{
    width:60%;margin-left:auto;margin-right:auto}
}

/* ============================================================
   BARRE DU HAUT — elle ne doit jamais devenir invisible.
   ------------------------------------------------------------
   ⚠ LE DÉFAUT SIGNALÉ PAR JEAN (« la barre n'est pas figée », « sur les pages
   d'apostolat elle n'existe plus ») : la barre est bien en position fixe, mais
   elle est TRANSPARENTE tant que `--navbg` vaut 0, et son contenu est BLANC.
   Au-dessus d'une photographie sombre on la voit ; au-dessus du fond clair des
   pages, elle disparaît purement et simplement. Or `--navbg` n'est posée que
   par le JavaScript, au défilement : si celui-ci ne s'exécute pas, la valeur de
   repli s'applique — et elle valait 0, c'est-à-dire l'état INVISIBLE.
   La valeur de repli est désormais 1 : sans JavaScript, la barre est pleine et
   lisible. Le JavaScript, lui, continue de la rendre transparente en tête de
   page puis de la remplir au défilement.
   ============================================================ */
.mainnav{background:rgba(29,37,64,calc(var(--navbg,1)))}

/* Le titre du bandeau doit passer SOUS la barre fixe, bandeau de l'ordo compris.
   Le retrait valait 90 px en dur : avec la bande de l'ordo (une trentaine de
   pixels) le titre venait chevaucher le menu dès que la fenêtre était basse. */
.masthead-center{padding-top:calc(var(--announce-h,0px) + 96px)}

/* ============================================================
   TIROIR DE MENU SUR TÉLÉPHONE — hamburger et icônes plus sobres.
   ------------------------------------------------------------
   Retours de Jean : le bouton et la croix sont trop gros, les réseaux sociaux
   prennent trop de place, et l'écart au-dessus d'eux est trop grand — il y
   avait DEUX séparateurs de suite, celui de la recherche et le leur.
   ============================================================ */
.nav-burger{padding:8px;gap:4px}
.nav-burger span{width:22px}
@media(max-width:880px){
  /* Le pivot en croix suit la nouvelle géométrie : deux barres de 2 px espacées
     de 4 px, soit 6 px entre leurs centres. Une valeur laissée à 7 px
     décalerait la croix d'un pixel et elle ne se refermerait pas net. */
  body.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* Un seul filet de séparation dans le tiroir : celui de la recherche. Les
     réseaux sociaux se contentent d'un écart. */
  .nav-social{border-top:none;margin-top:14px;padding-top:0;gap:6px}
  .nav-social a{width:34px;height:34px}
  .nav-social svg{width:17px;height:17px}
}

/* ============================================================
   MARGES SUR TÉLÉPHONE — les pages autonomes n'en avaient aucune.
   ------------------------------------------------------------
   ⚠ `<main class="page-body">` est un simple emballage, sans retrait : ce sont
   les conteneurs qu'il abrite qui portent le leur. La page de l'ordo pose le
   sien (`.ordo-pub`, largeur bornée et centrée) mais SANS retrait horizontal —
   l'ancien thème le lui fournissait par son `.container` Bootstrap. Résultat :
   le texte d'introduction et l'encadré du jour collaient aux deux bords
   (retour de Jean). On le lui rend ici, sans toucher à `ordo.php`, qu'une autre
   session est en train de modifier.

   IL LUI MANQUAIT AUSSI LA RESPIRATION VERTICALE (retour de Jean le 01/08 :
   « ce texte tout en haut n'a aucune marge, c'est pas beau »). Même cause : une
   page ordinaire la reçoit de `.page-content` (56 px en tête, 72 en pied), et
   l'ordo n'écrit pas dedans. Sa phrase d'introduction touchait donc le bas du
   bandeau de titre. On reprend ici les valeurs exactes de `.page-content` :
   deux pages du même site ne doivent pas commencer à deux hauteurs
   différentes. */
.page-body > .ordo-pub{padding:56px 24px 72px}
/* L'introduction est un contenu de page builder posé au-dessus de la tuile du
   jour : sans marge basse elle collait aussi à l'encadré qui la suit. */
.ordo-pub-intro{margin-bottom:2rem}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .page-content{padding-left:18px;padding-right:18px}
  .apo-body{padding-left:18px;padding-right:18px}
  .page-body > .ordo-pub{padding-left:18px;padding-right:18px}
}

/* ============================================================
   RANGÉE DE LIENS D'UN APOSTOLAT (« Site internet », « Donner », Facebook…)
   ------------------------------------------------------------
   Retour de Jean : « les icônes prennent beaucoup trop de place sur mobile ».
   Elles sont alignées à droite par un style en ligne venu du page builder, et
   la grille héritée sort de son conteneur de 15 px de chaque côté
   (`.pf-row{margin:0 -15px}`, hérité de Bootstrap) : sur un écran étroit, le
   dernier libellé passait donc sous le bord droit de l'écran.
   ============================================================ */
/* La rangée ne sort plus du conteneur : c'est `.apo-body` et `.page-content`
   qui portent déjà le retrait, la gouttière négative n'a plus lieu d'être aux
   bords. L'écart ENTRE deux colonnes, lui, ne bouge pas (chaque colonne garde
   son propre retrait de 15 px). */
.apo-body > .pf-section > .pf-row,
.page-content > .pf-section > .pf-row{margin-left:0;margin-right:0}

@media(max-width:700px){
  /* Sur téléphone, ces liens redeviennent une liste ordinaire, alignée à
     GAUCHE comme le reste du texte : collés à droite et sur une seule ligne,
     ils débordaient. Le style en ligne du page builder impose
     `justify-content:flex-end`, d'où le !important — c'est le seul moyen de
     passer devant un attribut `style`. */
  .apo-body .pfb-links{justify-content:flex-start !important;gap:.35rem 1.1rem}
  .pfb-link-ico{font-size:18px}
  .pfb-link-lbl{font-size:.9rem}
}

/* Entre le tiroir mobile (880 px) et le grand écran, la barre est à l'étroit :
   le logo horizontal de la Province prend 184 px et les six onglets en
   Marcellus espacé ne tiennent plus — « Contact » passait à la ligne vers
   1000 px (constaté à l'image le 01/08). Un cran de plus resserre les onglets
   avant que cela n'arrive. */
@media(max-width:1120px){
  .nav-links a,.nav-links span.nav-parent-label{padding:9px 7px;font-size:14px;letter-spacing:.6px}
  body:not(.home) .nav-logo img{height:48px;transform:translateY(6px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BANDE DE L'ORDO S'EFFACE AU DÉFILEMENT (01/08/2026)

   Demande de Jean : « la petite bande tout en haut qui marque la fête du jour,
   il ne faut pas qu'elle soit figée quand on descend. C'est seulement la barre
   de menu qui doit être figée. »

   ⚠ PREMIÈRE TENTATIVE ÉCARTÉE, et il faut dire pourquoi. Faire entrer la bande
     dans le flux et passer la barre de menu en « sticky » marchait, mais cassait
     le dessin du site : la barre n'était alors plus SUPERPOSÉE à l'image du
     bandeau, elle passait au-dessus, et son texte blanc tombait sur le fond
     blanc de la page. Illisible. Constaté à l'image, pas deviné.

   La barre reste donc fixe et transparente sur l'image, comme voulu. C'est la
   BANDE qui se retire vers le haut dès qu'on descend, et la barre prend sa
   place. Le glissement est porté par le CSS, une seule classe posée en JS
   décide du moment (voir public-layout.php).
   ═══════════════════════════════════════════════════════════════════════════ */
body.has-announce .ordo-band,
body.has-announce .ordo-band ~ .mainnav { transition: transform .28s ease, top .28s ease; }
/* Retirée vers le haut, et non masquée : « display:none » ferait sauter la barre
   d'un coup, et rendrait le retour en haut de page brutal. */
body.ordo-away .ordo-band { transform: translateY(-100%); }
body.ordo-away .mainnav   { top: 0; }
@media (prefers-reduced-motion: reduce) {
  body.has-announce .ordo-band,
  body.has-announce .ordo-band ~ .mainnav { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CITATION DE DOM GUÉRANGER : PHOTO MOINS ESTOMPÉE (01/08/2026)

   Jean : « l'image en dégradé sous la citation est un peu trop estompée. Sur
   mobile, elle ne monte pas assez haut, cela crée un grand écart, donc beaucoup
   de blanc, et c'est dommage. »

   DEUX CAUSES DISTINCTES, et il fallait les séparer :

     1. Le VOILE était à 70 % : la photo n'était plus qu'une trame. Il descend à
        52 %, assez pour que le bleu marine du texte reste lisible sur les
        parties claires de la photo (c'est ce voile, et lui seul, qui garantit
        la lisibilité) mais assez peu pour qu'on voie l'église.

     2. Sur TÉLÉPHONE, la bande gardait le padding de l'écran large alors que la
        citation y tient sur trois ou quatre lignes : la photo n'avait presque
        pas de hauteur où se déployer, d'où l'impression de blanc. On lui donne
        une hauteur minimale et on remonte le cadrage, la photo étant calée par
        le bas (background-position 50% 100%).
   ═══════════════════════════════════════════════════════════════════════════ */
.citation::before { background: rgba(246,248,251,.52); }

@media (max-width: 700px) {
  .citation {
    padding: 52px 0;
    min-height: 300px;
    display: flex;
    align-items: center;
    /* 50% 82% et non 100% : sur un cadre étroit, caler tout en bas ne montrait
       que le sol. On remonte pour retrouver l'autel. */
    background-position: 50% 82%;
  }
  .citation blockquote { width: 100%; }
}