/* ==========================================================================
   CoopBelsud — feuille de style commune
   Charte reprise de l'index (templatemo « Conquer » + mega-menu) :
   ardoise #383E4C / #40475A / #49505F, bleu #1686C1, orange #FF7F00,
   brique #D35400, vert #178A27, bordeaux #852406, or #f39c12, gris #F2F2F2,
   police Open Sans.
   ========================================================================== */

:root {
  --ardoise: #383E4C;
  --ardoise-2: #40475A;
  --ardoise-3: #49505F;
  --ardoise-4: #2f3542;
  --ardoise-5: #262628;
  --filet: #646d7c;

  --bleu: #1686C1;
  --bleu-clair: #31B0D5;
  --bleu-doux: #8FC6E8;
  --orange: #FF7F00;
  --orange-fonce: #E73E01;
  --brique: #D35400;
  --vert: #178A27;
  --vert-clair: #449D44;
  --bordeaux: #852406;
  --or: #f39c12;
  --jaune: #FFD37A;

  --sable: #f6f5f1;
  --terre: #b5502e;
  --ocre: #d9a430;
  --brun: #221808;

  --papier: #FFFFFF;
  --papier-2: #FAFAF9;
  --gris: #F2F2F2;
  --ligne: #DADADA;
  --texte: #111111;
  --texte-2: #191919;
  --texte-doux: #666666;

  --ombre: 0 12px 30px -14px rgba(56, 62, 76, .4);
  --rayon: 6px;
  --largeur: 1140px;
  --police: "Open Sans", Helvetica, Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-clair); }
h1, h2, h3, h4 { font-family: var(--police); line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: 20px; font-weight: 700; color: var(--texte-doux); }
h3 { font-size: 17px; font-weight: 700; color: var(--ardoise); }
p { margin: 0 0 1em; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }
.centre { text-align: center; }
.justifie { text-align: justify; }
.discret { color: var(--texte-doux); font-size: .85em; }
[hidden] { display: none !important; }
section[id], article[id], div[id], details[id], nav[id], h2[id], h3[id] { scroll-margin-top: 140px; } /* ancres visibles sous le menu fixe */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--bleu-clair); outline-offset: 2px; }

/* ---------- bandeau supérieur ---------- */
.entete { position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.bandeau {
  background: var(--ardoise);
  color: #fff;
  font-size: 13px;
}
.bandeau .conteneur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 24px; padding-top: 9px; padding-bottom: 9px; text-align: center;
}
.bandeau a { color: #fff; }
.bandeau .marque { font-weight: 700; letter-spacing: .03em; }
.bandeau .maj { font-size: 11px; color: #C9CDD3; }
.bandeau .maj b { color: #ffff00; font-weight: 400; }
.bandeau .merci { color: #ffff00; }
.bandeau .don { color: #FFA500; font-weight: 600; }
.bandeau .don:hover { color: #FFD37A; }

/* ---------- mega-menu (repris de l'index) ---------- */
.menu-principal { background: var(--ardoise-2); }
.mega-menu {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1400px;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.mega-menu > li { position: relative; }
.mega-menu > li > a, .mega-menu > li > button {
  display: block; padding: 12px 14px; color: #fff; font: inherit;
  font-size: 13px; text-transform: uppercase; white-space: nowrap;
  background: none; border: 0; cursor: pointer; text-decoration: none;
}
.mega-menu > li > a:hover, .mega-menu > li > button:hover,
.mega-menu > li.ouvert > button, .mega-menu > li.actif > a, .mega-menu > li.actif > button {
  background: var(--ardoise-3);
}
.mega-menu > li.actif > a, .mega-menu > li.actif > button { box-shadow: inset 0 -3px 0 var(--bleu); }
.mega-menu .caret { font-size: 10px; margin-left: 3px; }
.mega-menu .nouveau {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 3px;
  background: var(--orange); color: #fff; font-size: 9px; line-height: 15px; vertical-align: 1px;
}
.sous-menu {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: 100%; left: 0; min-width: 280px; max-width: 360px;
  background: var(--ardoise-4); box-shadow: 0 8px 20px rgba(0,0,0,.35);
  display: none; z-index: 999; max-height: 70vh; overflow-y: auto;
}
.mega-menu > li:last-child .sous-menu, .mega-menu > li:nth-last-child(2) .sous-menu { left: auto; right: 0; }
.mega-menu > li.ouvert .sous-menu { display: block; }
.sous-menu a { display: block; padding: 8px 18px; color: #eee; font-size: 13px; text-decoration: none; }
.sous-menu a:hover, .sous-menu a:focus { background: var(--ardoise-2); color: #fff; }
.sous-menu a.externe::after { content: " ↗"; font-size: 10px; color: #9aa0ab; }
.sous-menu .separateur { border-top: 1px solid #4c5364; margin: 6px 0; }
.sous-menu a.avec-sous-titre small { display: block; font-size: 11px; color: #aab0bb; font-style: italic; margin-top: 1px; }
.sous-menu a.avec-sous-titre:hover small { color: #dfe2e8; }
.bouton-menu {
  display: none; margin: 0 auto; padding: 10px 16px; background: #333; color: #fff;
  border: 1px solid #666; border-radius: 4px; font: inherit; font-size: 14px; cursor: pointer;
}
.bouton-menu .barres { display: inline-block; width: 22px; vertical-align: middle; margin-right: 8px; }
.bouton-menu .barres span { display: block; height: 3px; background: #fff; margin: 4px 0; border-radius: 1px; }

@media (min-width: 1000px) {
  .mega-menu > li:hover .sous-menu { display: block; }
}
@media (max-width: 999px) {
  .menu-principal { padding: 8px 0; text-align: center; }
  .bouton-menu { display: inline-block; }
  .mega-menu { display: none; flex-direction: column; text-align: left; margin-top: 8px; }
  .menu-principal.ouvert .mega-menu { display: flex; }
  .mega-menu > li > a, .mega-menu > li > button { width: 100%; text-align: left; padding: 12px 20px; }
  .sous-menu { position: static; box-shadow: none; background: #383E4C; max-width: none; max-height: none; }
  .entete { position: relative; }
}

/* ---------- boutons ---------- */
.btn {
  display: inline-block; border: 0; border-radius: 5px; padding: 8px 20px;
  color: #fff !important; font: inherit; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  transition: background .3s ease; text-decoration: none; line-height: 1.4;
}
.btn-bleu { background: var(--bleu); }       .btn-bleu:hover { background: var(--bleu-clair); }
.btn-orange { background: var(--orange); }   .btn-orange:hover { background: var(--orange-fonce); }
.btn-vert { background: var(--vert); }       .btn-vert:hover { background: var(--vert-clair); }
.btn-bordeaux { background: var(--bordeaux); } .btn-bordeaux:hover { background: #C9302C; }
.btn-ardoise { background: var(--ardoise); } .btn-ardoise:hover { background: var(--ardoise-3); }
.btn-clair { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.5); }
.btn-clair:hover { background: rgba(255,255,255,.3); }
.btn-petit { font-size: 12px; padding: 5px 12px; }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.boutons.centre { justify-content: center; }

/* ---------- en-tête de l'accueil ---------- */
.accueil-tete { background: #fff; padding: 12px 0 10px; text-align: center; }
.accueil-tete .banniere { width: 100%; max-width: 1100px; display: block; margin: 0 auto; }

/* bandeau d'accueil « Arc-en-ciel » (06/10/2026) : titre en texte, rubans en SVG, insigne Da mihi animas */
.bandeau-accueil { position: relative; overflow: hidden; text-align: left; background: #fff; min-height: clamp(230px, 22vw, 310px);
  padding: 22px 0; display: flex; align-items: center; }
.bandeau-accueil .rubans { position: absolute; right: -4%; top: -10%; width: 72%; height: 125%; }
.bandeau-accueil .texte { position: relative; z-index: 2; padding-left: 3%; max-width: 58%; }
.bandeau-accueil .logo { display: block; width: auto; height: clamp(46px, 3.5vw + 18px, 70px); margin: 0 0 8px; }
.bandeau-accueil .sur { text-transform: uppercase; letter-spacing: .16em; font-size: clamp(.68rem, .5vw + .5rem, .9rem); font-weight: 700; color: var(--bleu); margin: 0 0 8px; }
.bandeau-accueil h1 { margin: 0; line-height: 1.08; font-weight: 800; letter-spacing: -.01em; color: var(--ardoise); font-size: clamp(1.5rem, 2.6vw + .4rem, 3.3rem); }
.bandeau-accueil h1 span { display: block; font-weight: 300; font-size: .62em; letter-spacing: .02em; margin-top: 6px; }
.bandeau-accueil .devise { font-style: italic; margin: 10px 0 0; font-size: clamp(.95rem, .8vw + .6rem, 1.3rem); color: var(--ardoise-3, #49505F); }
.bandeau-accueil .piliers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.bandeau-accueil .piliers li { margin: 0; padding: 6px 14px; border-radius: 30px; font-size: .82rem; font-weight: 700; color: #fff; }
.bandeau-accueil .p-jeunes { background: #1686C1; } .bandeau-accueil .p-fragiles { background: #e08e0b; }
.bandeau-accueil .p-eglise { background: #178A27; } .bandeau-accueil .p-monde { background: #D35400; }
/* portrait arc-en-ciel de Don Bosco en hexagone, sans contour, ombre portée douce (19/10/2026)
   — remplace l'insigne « Da mihi animas » sur l'accueil (.hexa-db) et dans le bandeau des pages intérieures (.hexa-portrait), sauf « Nos racines » */
.hexa-db, .hexa-portrait { filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)) drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.hexa-db img, .hexa-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.bandeau-accueil .hexa-db { position: absolute; z-index: 2; right: 9%; top: 50%; transform: translateY(-50%); height: 60%; aspect-ratio: .866; }
.page-tete.arc .hexa-portrait { flex: 0 0 auto; height: 180px; aspect-ratio: .866; margin-right: 6%; }
@media (max-width: 760px) { .bandeau-accueil .hexa-db, .page-tete.arc .hexa-portrait { display: none; } }
.bandeau-accueil .insigne { position: absolute; z-index: 2; right: 9%; top: 50%; transform: translateY(-50%); width: 15%; height: auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)); }
@media (max-width: 760px) {
  .bandeau-accueil { min-height: 0; padding: 28px 0 26px; }
  .bandeau-accueil .texte { max-width: 100%; padding: 0 4px; }
  .bandeau-accueil .rubans { width: 120%; right: -40%; opacity: .3; }
  .bandeau-accueil .insigne { display: none; }
}
.salut { color: var(--texte-doux); margin: 18px auto 0; max-width: 860px; font-size: 15px; }
.salut strong { color: var(--ardoise); }
.etrenne { text-align: center; padding: 26px 16px 34px; }
.etrenne .verset { color: var(--or); font-size: 20px; font-weight: 700; font-style: italic; margin: 0 0 4px; }
.etrenne .sous { color: var(--or); font-weight: 700; font-style: italic; margin: 0 0 12px; }

/* ---------- en-tête des pages intérieures ---------- */
.page-tete {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(22,134,193,.35), transparent 60%),
    linear-gradient(160deg, var(--ardoise) 0%, var(--ardoise-2) 55%, var(--ardoise-5) 100%);
  padding: 46px 0 40px;
}
.page-tete .conteneur { display: flex; align-items: center; gap: 36px; }
.page-tete .texte { flex: 1 1 60%; min-width: 0; }
.page-tete .figure { flex: 0 0 34%; max-width: 34%; }
.page-tete .figure img {
  width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); padding: 10px; box-shadow: 0 20px 45px -18px rgba(0,0,0,.55);
}
/* image verticale (affiche) dans l'en-tête : hauteur limitée, centrée */
.page-tete .figure.portrait { text-align: center; }
.page-tete .figure.portrait img { width: auto; max-width: 100%; height: auto; max-height: 380px; }
/* image détourée (logo, insigne) dans l'en-tête : sans cadre */
.page-tete .figure.insigne { text-align: center; }
.page-tete .figure.insigne img {
  width: auto; max-width: 100%; max-height: 300px; border: 0; background: none; padding: 0; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
.soleil { font-size: 1.8rem; color: var(--bleu); filter: drop-shadow(0 0 14px rgba(22,134,193,.55)); }
.surtitre { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--bleu-doux); margin: 0 0 10px; }
.page-tete h1 { font-size: clamp(1.7rem, 2.6vw + .9rem, 2.7rem); font-weight: 700; margin: 0 0 12px; color: #fff; }
.page-tete .chapeau { color: #C9CDD3; font-size: 1.04rem; margin: 0; max-width: 760px; }
.page-tete .chapeau b, .page-tete .chapeau strong { color: var(--jaune); font-weight: 600; }
.couture {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background-image: radial-gradient(circle at 10px 7px, var(--papier) 3.5px, transparent 3.6px);
  background-size: 28px 14px; background-position: 14px 0;
}
.fil-ariane { font-size: .82rem; color: #C9CDD3; margin-bottom: 14px; }
.fil-ariane a { color: #C9CDD3; }
.fil-ariane a:hover { color: #fff; }

/* ---------- bandeau « Arc-en-ciel » des pages intérieures (19/10/2026) — classe .arc posée par site.js ---------- */
.page-tete.arc { background: #fff; color: var(--ardoise); padding: 0; border-bottom: 1px solid #e6e8ec; }
.page-tete.arc .rubans { position: absolute; z-index: 0; right: -4%; top: -10%; width: 66%; height: 125%; pointer-events: none; }
.page-tete.arc .conteneur { position: relative; z-index: 2; overflow: hidden; padding-top: 24px; padding-bottom: 28px; min-height: 250px; }
.page-tete.arc .conteneur > :not(.rubans) { position: relative; z-index: 1; }
.page-tete.arc .figure, .page-tete.arc .soleil, .page-tete.arc .couture { display: none; }
.page-tete.arc .ligne-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.page-tete.arc .ligne-logo img { height: 46px; width: auto; flex: none; }
.page-tete.arc .fil-ariane { margin: 0; color: #6b7280; }
.page-tete.arc .fil-ariane a { color: var(--bleu); }
.page-tete.arc .fil-ariane a:hover { color: var(--brique); }
.page-tete.arc .surtitre { color: var(--bleu); font-weight: 700; letter-spacing: .16em; }
.page-tete.arc h1 { color: var(--ardoise); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.7rem, 2.6vw + .7rem, 2.9rem); margin: 0 0 10px; }
.page-tete.arc .chapeau { color: var(--ardoise-3, #49505F); font-size: 1.05rem; max-width: 680px; }
.page-tete.arc .chapeau a { color: var(--brique) !important; }
.page-tete.arc .chapeau b, .page-tete.arc .chapeau strong { color: var(--brique); }
.page-tete.arc .aide-pdf a { color: var(--brique) !important; }
.page-tete.arc .piliers { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.page-tete.arc .piliers li { margin: 0; padding: 4px 12px; border-radius: 30px; font-size: .74rem; font-weight: 700; color: #fff; }
.page-tete.arc .p-jeunes { background: #1686C1; } .page-tete.arc .p-fragiles { background: #e08e0b; }
.page-tete.arc .p-eglise { background: #178A27; } .page-tete.arc .p-monde { background: #D35400; }
.page-tete.arc .insigne-arc { flex: 0 0 auto; margin-right: 6%; }
.page-tete.arc .insigne-arc img { height: 200px; width: auto; display: block; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
/* pages « Nos racines » : la photo de la personne, cadre très fin, sans logo ni insigne (19/10/2026) */
.page-tete.arc.racine .figure { display: block; flex: 0 0 auto; max-width: none; margin-right: 8%; }
.page-tete.arc.racine .figure img { width: auto; height: 240px; max-width: 320px; object-fit: cover; padding: 0; background: #fff;
  border: 1px solid #c9ced6; border-radius: 4px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
.page-tete.arc.racine .fil-ariane { margin-bottom: 12px; }
.page-tete.arc.racine .texte { max-width: 640px; }
.page-tete.arc.compacte .conteneur { min-height: 0; padding-top: 18px; padding-bottom: 22px; }
.page-tete.arc.compacte .rubans { width: 45%; top: -40%; height: 190%; }
/* zone de recherche et chiffres de la page Archives, sur fond blanc */
.page-tete.arc .recherche input { background: #fff; color: var(--ardoise); border: 1px solid #b9c0ca; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.page-tete.arc .recherche input:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
.page-tete.arc .recherche input::placeholder { color: #8a919c; }
.page-tete.arc .compteur, .page-tete.arc .chiffres div { color: #6b7280; }
.page-tete.arc .chiffres b { color: var(--ardoise); }
@media (max-width: 760px) {
  .page-tete.arc .rubans { width: 110%; right: -45%; opacity: .25; }
  .page-tete.arc .insigne-arc { display: none; }
  .page-tete.arc .conteneur { min-height: 0; }
}
@media (max-width: 760px) {
  .page-tete .conteneur { flex-direction: column; align-items: stretch; }
  .page-tete .figure { max-width: 100%; flex-basis: auto; }
}

/* ---------- sections ---------- */
.section { padding: 56px 0; }
.section.grise { background: var(--gris); }
.section.papier { background: var(--papier-2); }
.titre-section {
  color: var(--texte-doux); font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); font-weight: 400;
  text-transform: uppercase; margin: 0 0 8px; letter-spacing: .02em;
}
.titre-section + .sous-titre { color: var(--texte-doux); margin: 0 0 30px; }
.filet { border: 0; border-top: 1px solid var(--ligne); margin: 0 0 40px; }
.exergue { text-align: right; font-style: italic; color: var(--texte-2); max-width: 860px; margin: 0 0 30px auto; }
.exergue b { font-style: normal; }
.exergue .auteur, .citation .auteur { display: block; font-size: 12px; font-style: normal; color: var(--texte-doux); margin-top: 6px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
/* page « Nous contacter » (formulaire-contact.html, 19/10/2026) */
.deux-colonnes.formulaire-contact { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.cadre-formulaire { background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; box-shadow: 0 10px 26px -18px rgba(0,0,0,.35); overflow: hidden; }
.cadre-formulaire iframe { display: block; width: 100%; border: 0; }
.encadre-info { background: var(--gris); border-radius: 8px; padding: 18px 22px; margin: 0 0 18px; border-top: 3px solid var(--bleu); }
.encadre-info h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ardoise); }
.encadre-info p { margin: 0 0 10px; font-size: .95rem; }
.encadre-info p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .deux-colonnes.formulaire-contact { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; gap: 10px; } }
.texte-courant p { text-align: justify; }

/* ---------- pages de lecture (anciens mini-sites réécrits) ---------- */
.colonne-lecture { max-width: var(--largeur); margin: 0 auto; } /* même largeur que l'accueil */
.colonne-lecture p { text-align: justify; line-height: 1.85; margin-bottom: 1.3em; }
/* la classe .centre l'emporte sur le texte justifié (images d'ouverture, mentions centrées) — 06/10/2026 */
.colonne-lecture .centre, .texte-courant .centre { text-align: center; }
.colonne-lecture h2 { color: var(--vert); font-size: 1.35rem; margin: 2.2em 0 .8em; }
.accroche {
  text-align: center !important; font-weight: 700; color: var(--vert); font-size: 1.08rem;
  text-transform: uppercase; letter-spacing: .02em; margin: 2em 0 !important;
}
.accroche.douce { text-transform: none; font-style: italic; font-weight: 600; color: var(--ardoise); }
/* encadré centré sur toute la largeur (page Jean Thibaut, « Un dernier mot ») */
.encadre.citation-centree { text-align: center; border-left: 0; border-top: 3px solid var(--vert); border-bottom: 3px solid var(--vert);
  border-radius: 6px; max-width: none; padding: 26px 30px; font-size: 1.12rem; line-height: 1.7; }
.encadre.citation-centree p, .encadre.citation-centree .signature { text-align: center !important; }
/* citation sur toute la largeur de la page, centrée (page Jean Thibaut) */
.accroche.citation-pleine { font-size: clamp(1.1rem, .6vw + .95rem, 1.35rem); line-height: 1.6; max-width: none; margin: .6em 0 .4em !important; }
.encadre {
  border-left: 4px solid var(--vert); background: var(--gris); padding: 20px 26px; margin: 2em 0;
  font-style: italic; border-radius: 0 6px 6px 0;
}
.encadre p:last-child { margin-bottom: 0; }
.signature { text-align: right !important; font-style: italic; }
.fiches-texte { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.fiche-texte {
  background: var(--gris); border-radius: 6px; padding: 24px 26px; display: flex; flex-direction: column;
  border-top: 4px solid var(--bleu);
}
.fiche-texte h3 { color: var(--ardoise); font-size: 1.05rem; margin-bottom: 6px; }
.fiche-texte .source { font-size: 13px; color: var(--texte-doux); margin-bottom: 10px; }
.fiche-texte blockquote { margin: 0 0 14px; font-style: italic; line-height: 1.8; color: var(--texte-2); flex: 1; }
.fiche-texte .pied { margin-top: auto; }
.fiche-texte.priere { border-top-color: var(--vert); }
.colonne-lecture h3 { color: var(--ardoise); font-size: 1.12rem; margin: 1.8em 0 .6em; }
.colonne-lecture h4 { color: var(--brique); font-size: 1rem; margin: 1.6em 0 .5em; }
.colonne-lecture blockquote:not(.encadre) {
  margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ligne); font-style: italic; color: var(--texte-2);
}
.colonne-lecture ul { margin: 0 0 1.3em; padding-left: 1.4em; }
.colonne-lecture li { margin: .3em 0; line-height: 1.7; }
.colonne-lecture .media-bloc { max-width: 760px; margin: 1.5em auto; }
.colonne-lecture p.centre img { border-radius: 4px; max-height: 420px; width: auto; }
/* sommaire de page */
.sommaire { background: var(--gris); border-radius: 6px; padding: 18px 24px; margin: 0 0 2em; }
.sommaire p { margin: 0 0 8px !important; font-weight: 700; color: var(--ardoise); text-align: left !important; }
.sommaire ol { margin: 0; padding-left: 1.3em; columns: 2 280px; column-gap: 30px; }
.sommaire li { margin: 3px 0; break-inside: avoid; }
/* lien de fin de chapitre qui remonte au sommaire de la section */
.colonne-lecture p.retour-sommaire { text-align: right; margin: 1.5em 0 0; font-size: 14px; font-weight: 600; }
.retour-sommaire a { color: var(--bleu); text-decoration: none; }
.retour-sommaire a:hover { text-decoration: underline; }
/* galerie d'images */
.galerie { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 1.5em 0; }
.galerie a, .galerie figure { display: block; margin: 0; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--gris); border-radius: 4px; display: block; transition: transform .2s; }
.galerie a:hover img { transform: scale(1.03); }
.galerie.paysage img { aspect-ratio: 4 / 3; }
.galerie.carree img { aspect-ratio: 1; }
.galerie figcaption { font-size: 13px; font-weight: 600; text-align: center; margin-top: 6px; color: var(--ardoise); }
.galerie img { cursor: zoom-in; }
.galerie figure:hover img { transform: scale(1.03); }

/* titres des cadres « À la une » : un \n dans data/actualites.js (t:"…\n…") passe à la ligne */
.vignette h3, .vignette p, [data-rendu="zoomweb"] h2, [data-rendu="zoomweb"] p { white-space: pre-line; }

/* organisation.html : cadre « Pousses nouvelles » (projets en émergence) */
.fiche-texte.pousses { border-top: 4px solid var(--vert); }
.fiche-texte .sous-titre-fiche { margin: -4px 0 10px !important; font-size: 13px; font-style: italic; color: var(--vert); text-align: left !important; }
/* cadre pleine largeur « Espace Dominique Savio », sous la grille des Centres, même style que les cadres du dessus */
.fiches-texte.eds-ligne { grid-template-columns: 1fr; margin-top: 20px; }
.fiche-texte .eds-titre img { display: block; width: 100%; max-width: 260px; height: auto; }

/* annonce d'un week-end sous « À la une » (index.html) */
.annonce-we { max-width: 1024px; margin: 46px auto 0; text-align: center; }
.annonce-we img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); }
.annonce-we .annonce-intro { font-size: clamp(1.05rem, .6vw + .9rem, 1.3rem); font-style: italic; color: var(--ardoise); max-width: 820px; margin: 0 auto 22px; line-height: 1.55; }
.annonce-we .annonce-accueil { font-size: 1.05rem; font-weight: 600; color: var(--ardoise); max-width: 820px; margin: 22px auto 18px; }
.annonce-enfants { max-width: 820px; margin: 0 auto; background: #1f4d2b; color: #fff; border-radius: 10px; padding: 18px 24px; box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .5); }
.annonce-enfants .titre { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 1.15rem; color: #f3d27a; margin: 0 0 6px; }
.annonce-enfants p { margin: 0; color: #fff; }
.annonce-we.compacte { max-width: 760px; margin-top: 0; }
.annonce-we.compacte .annonce-intro { font-size: 1.05rem; margin-bottom: 16px; }
.annonce-we.compacte .annonce-accueil { font-size: .98rem; margin: 16px auto 14px; }
.annonce-we.compacte .annonce-enfants { padding: 14px 20px; font-size: .95rem; }
.annonce-we.compacte .annonce-enfants .titre { font-size: 1rem; }
/* annonce temporaire « nouveau site » sous le menu (config.js : annonceNouveauSite) */
.annonce-site { background: #fff7e6; border-bottom: 1px solid #f3d9a8; color: var(--ardoise); font-size: 14px; }
.annonce-site .conteneur { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.annonce-site p { margin: 0; flex: 1; line-height: 1.45; }
.annonce-site b { color: var(--brique); }
.annonce-site-icone { font-size: 20px; }
.annonce-site .btn { white-space: nowrap; }
.annonce-site-fermer { background: none; border: 0; font-size: 22px; line-height: 1; color: #8a6d3b; cursor: pointer; padding: 4px 6px; }
.annonce-site-fermer:hover { color: var(--brique); }
@media (max-width: 760px) { .annonce-site .conteneur { flex-wrap: wrap; } .annonce-site-icone { display: none; } }
@media print { .annonce-site { display: none !important; } }
/* ligne défilante (accueil) */
.defilant { display: block; overflow: hidden; white-space: nowrap; background: #fff; color: #1e2129; text-decoration: none; font-weight: 400; font-size: 13.5px; line-height: 1.3; padding: 4px 0; border-bottom: 1px solid #e3e5ea; }
.defilant:hover { color: #1e2129; }
.defilant-piste { display: inline-flex; animation: defiler 38s linear infinite; }
.defilant-piste span { padding-right: 90px; }
.defilant:hover .defilant-piste { animation-play-state: paused; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .defilant { white-space: normal; text-align: center; padding: 9px 16px; }
  .defilant-piste { animation: none; display: inline; }
  .defilant-piste span + span { display: none; }
  .defilant-piste span { padding: 0; }
}
/* petit bandeau Lourdes 2028 (accueil) */
.bandeau-lourdes { background: #1f3b5c; color: #fff; font-size: 14px; text-align: center; padding: 8px 0; line-height: 1.5; }
.bandeau-lourdes b { color: #f3d27a; text-transform: uppercase; letter-spacing: .05em; }
.bandeau-lourdes .reserve { display: inline-block; margin-left: 10px; font-weight: 700; color: #a8e6a1; }
/* ligne du temps horizontale (francois-de-sales.html) : chaque date mène au passage, .retour-frise y ramène */
.ligne-temps { margin: 2em 0 2.5em; background: var(--gris); border-radius: 8px; padding: 18px 18px 12px; scroll-margin-top: 140px; }
.ligne-temps-titre { margin: 0 0 6px !important; font-weight: 700; color: var(--ardoise); }
.ligne-temps-titre span { font-weight: 400; color: var(--texte-doux); font-size: 14px; }
.ligne-temps-defile { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.ligne-temps ol { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; min-width: max-content; position: relative; }
.ligne-temps ol::before { content: ""; position: absolute; left: 0; right: 0; top: 41px; height: 4px; background: #c9ccd3; border-radius: 2px; }
.ligne-temps ol > li { width: 118px; flex: none; margin: 0 !important; position: relative; }
.ligne-temps ol > li a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; padding: 0 6px; color: var(--ardoise); }
.ligne-temps ol > li b { font-size: 15px; height: 26px; line-height: 26px; white-space: nowrap; }
.ligne-temps ol > li a::before { content: ""; order: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--c); box-sizing: border-box; margin: 6px 0 8px; position: relative; z-index: 1; transition: transform .15s; }
.ligne-temps ol > li span { order: 2; font-size: 12.5px; line-height: 1.3; color: var(--texte-doux); }
.ligne-temps ol > li b { order: 0; color: var(--c); }
.ligne-temps ol > li a:hover::before, .ligne-temps ol > li a:focus-visible::before { transform: scale(1.35); background: var(--c); }
.ligne-temps ol > li a:hover span { color: var(--ardoise); }
.ligne-temps .p1 { --c: var(--bleu); } .ligne-temps .p2 { --c: var(--vert); } .ligne-temps .p3 { --c: var(--brique); } .ligne-temps .p4 { --c: var(--or); }
.ligne-temps-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0 !important; padding: 0 !important; font-size: 12.5px; color: var(--texte-doux); }
.ligne-temps-legende li { margin: 0 !important; display: flex; align-items: center; gap: 6px; }
.ligne-temps-legende li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ligne-temps ol > li.vu a::before { background: var(--c); transform: scale(1.35); }
.ligne-temps ol > li.vu span { color: var(--ardoise); font-weight: 600; }
p[id^="t1"] { scroll-margin-top: 140px; }
p.retour-frise { text-align: right; margin: .4em 0 1.4em !important; font-size: 13px; font-weight: 600; }
.retour-frise a { color: var(--bleu); text-decoration: none; }
.retour-frise a:hover { text-decoration: underline; }

/* visionneuse d'images (site.js, visionneuseImages) */
.visionneuse-images { position: fixed; inset: 0; z-index: 100001; background: rgba(20, 22, 28, .92); display: flex; align-items: center; justify-content: center; padding: 50px 64px; }
.visionneuse-images[hidden] { display: none; }
.visionneuse-images figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.visionneuse-images img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 4px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); background: #fff; }
.visionneuse-images figcaption { color: #fff; text-align: center; margin-top: 12px; font-size: 14px; }
.visionneuse-images .legende { margin: 0; font-weight: 600; }
.visionneuse-images .compteur { display: block; opacity: .7; font-size: 12px; margin-top: 2px; }
.visionneuse-images button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 30px; line-height: 1; cursor: pointer; }
.visionneuse-images button:hover, .visionneuse-images button:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.visionneuse-images .fermer { top: 14px; right: 14px; }
.visionneuse-images .prec { left: 10px; top: 50%; transform: translateY(-50%); }
.visionneuse-images .suiv { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .visionneuse-images { padding: 56px 8px 70px; }
  .visionneuse-images .prec, .visionneuse-images .suiv { top: auto; bottom: 12px; transform: none; }
  .visionneuse-images .prec { left: calc(50% - 56px); }
  .visionneuse-images .suiv { right: calc(50% - 56px); }
}
/* grille de vidéos */
.videos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 1.5em 0; }
.videos .media-bloc { margin: 0 !important; max-width: none !important; }
.videos h4 { margin: 0 0 8px !important; font-size: .95rem; color: var(--ardoise) !important; }
/* fiches illustrées (image en tête de fiche) */
.fiche-texte > img:first-child {
  width: calc(100% + 52px); max-width: none; margin: -24px -26px 16px; aspect-ratio: 16 / 9; object-fit: contain; background: #e6e8ec; display: block;
}
.colonne-lecture .fiche-texte h3 { margin: 0 0 8px; }
.colonne-lecture .fiche-texte p { text-align: left; margin-bottom: .8em; }
.fiche-texte .pied .lien-doc { margin: 0; }
/* jours d'un parcours (Semaine sainte…) : image à gauche, texte à droite */
.jour { display: grid; grid-template-columns: 5fr 7fr; gap: 36px; align-items: start; margin: 2.5em 0 0; padding-top: 2.5em; border-top: 1px solid var(--ligne); }
.jour:first-of-type { border-top: 0; padding-top: 0; }
.jour > figure { margin: 0; position: sticky; top: 100px; }
.jour > figure img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 6px; display: block; }
.etiquette {
  display: inline-block; background: var(--vert); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 3px;
}
.colonne-lecture .jour h2 { margin: .5em 0 .8em; }
.colonne-lecture .jour h3 { margin: .5em 0 .6em; }
a.fiche-texte { color: inherit; text-decoration: none; transition: box-shadow .2s; }
a.fiche-texte:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
a.fiche-texte:hover h3 { color: var(--bleu); }
@media (max-width: 860px) { .jour { grid-template-columns: 1fr; gap: 16px; } .jour > figure { position: static; } }
/* textes dépliables (recueils de textes : Toussaint…) */
.depliant { border-bottom: 1px solid var(--ligne); margin: 1.5em 0 2em; }
.depliant details { border-top: 1px solid var(--ligne); }
.depliant summary { cursor: pointer; list-style: none; padding: 16px 44px 16px 0; position: relative; }
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::after { content: "+"; position: absolute; right: 8px; top: 10px; font-size: 26px; font-weight: 300; color: var(--vert); }
.depliant details[open] > summary::after { content: "−"; }
.depliant summary b { display: block; color: var(--ardoise); font-size: 1.08rem; }
.depliant summary:hover b { color: var(--bleu); }
.depliant summary span { display: block; color: var(--texte-doux); font-size: 14px; font-style: italic; margin-top: 4px; }
.depliant .contenu { padding: 0 0 18px; }
.depliant .contenu h4:first-child { margin-top: 0; }
/* petite image à gauche d'un texte (anciennes vignettes) */
.illustree { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: start; margin: 1.2em 0; }
.illustree > img { width: 100%; border-radius: 4px; }
@media (max-width: 600px) { .illustree { grid-template-columns: 1fr; } .illustree > img { max-width: 170px; } }
/* lecteur externe intégré (Fil musical CoopBels☼ng) : garde sa propre présentation */
.lecteur-cadre { display: block; width: 100%; max-width: 920px; height: 520px; margin: 1.5em auto; border: 0; border-radius: 12px; background: #f6f5f1; }
.lecteur-cadre.grand { height: 640px; }
@media (max-width: 600px) { .lecteur-cadre, .lecteur-cadre.grand { height: 560px; } }
/* liste de morceaux audio */
.liste-audio { list-style: none; padding: 0 !important; display: grid; gap: 10px 30px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.liste-audio li { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; }
.liste-audio span { font-weight: 600; color: var(--ardoise); font-size: 14px; }
.liste-audio audio { width: 100%; height: 36px; }
/* encadré « à télécharger » */
.lien-doc { display: inline-block; margin: 4px 0 1.3em; font-weight: 600; }
.lien-doc::before { content: "⬇ "; color: var(--orange); }

/* ---------- cartes (testimonial-content / feature-content) ---------- */
.grille { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grille.trois { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.carte {
  background: var(--gris); display: flex; flex-direction: column; text-align: center;
  border-radius: 2px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte > img, .carte > a > img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--gris); display: block; }
.carte .corps { padding: 18px 16px 22px; display: flex; flex-direction: column; flex: 1; }
.carte h2 { margin-top: 4px; }
.carte p { text-align: justify; font-size: 15px; color: var(--texte-2); }
.carte .pied { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- bandes de couleur (blog-content1/2/3) ---------- */
.bande { color: #fff; padding: 34px 36px; margin: 36px 0; border-radius: 2px; }
.bande h2, .bande h3 { color: #fff; }
.bande p { color: #fff; text-align: justify; }
.bande a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
.bande a:hover { text-decoration-color: #fff; }
.bande .grand { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); font-weight: 400; margin: 0 0 18px; color: #fff; }
.bande-brique { background: var(--brique); }
.bande-bleue { background: var(--bleu); }
.bande-verte { background: var(--vert); }
.bande-ciel { background: var(--bleu-clair); }
.bande .petit { font-size: 14px; opacity: .95; }
.liste-fleches { list-style: none; padding: 0; margin: 0 0 1em; }
.liste-fleches li { padding: 6px 0 6px 18px; position: relative; }
.liste-fleches li::before { content: "|"; position: absolute; left: 2px; opacity: .7; }
.liste-fleches a::after { content: " ►"; font-size: .8em; }
.bande .liste-fleches a { text-decoration: none; }
.flottant-droite { float: right; width: min(340px, 45%); margin: 0 0 16px 24px; border-radius: 2px; }
@media (max-width: 640px) { .flottant-droite { float: none; width: 100%; margin: 0 0 16px; } .bande { padding: 26px 20px; } }

/* ---------- grandes citations sur image (parallaxe) ---------- */
.parallaxe {
  background-size: cover; background-position: center; background-attachment: fixed;
  position: relative; color: #fff; text-align: center; padding: 90px 16px;
}
.parallaxe::before { content: ""; position: absolute; inset: 0; background: rgba(38, 38, 40, .35); }
.parallaxe > * { position: relative; }
.parallaxe blockquote {
  margin: 0 auto; max-width: 900px; font-size: clamp(1.4rem, 2.2vw + .8rem, 2.4rem);
  text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,.6); line-height: 1.25;
}
.parallaxe .auteur { display: block; font-size: 13px; margin-top: 10px; text-transform: none; letter-spacing: .05em; }
.parallaxe.prieres { background-image: url("../img/bg-2.jpg"); }
.parallaxe.crayons { background-image: url("../img/bg-11.jpg"); }
.parallaxe.lumiere { background-image: url("../img/bg-3.jpg"); }
@media (max-width: 1024px) { .parallaxe { background-attachment: scroll; } }

.citation {
  font-style: italic; text-align: center; color: var(--texte-2);
  max-width: 820px; margin: 36px auto; font-size: 1.08rem;
}
.citation b { font-style: italic; }

/* ---------- Farnières ---------- */
.farn-carte {
  background: var(--sable); border-radius: 14px; padding: 34px 36px; text-align: center; margin: 30px 0;
}
.farn-visuel { display: block; width: 100%; max-width: 760px; margin: 0 auto 24px; border-radius: 10px; box-shadow: var(--ombre); }
.farn-surtitre { color: var(--terre); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; }
.farn-titre { font-size: 24px; font-weight: 800; color: var(--brun); margin: 0 0 14px; }
.farn-titre span { color: var(--ocre); }
.farn-texte { color: #4a3c2c; font-size: 15px; line-height: 1.7; text-align: justify; max-width: 820px; margin: 0 auto 24px; }
.farn-btn {
  display: inline-block; background: var(--brun); color: var(--sable) !important; font-weight: 700; font-size: 14px;
  padding: 13px 28px; border-radius: 999px; transition: background .15s ease;
}
.farn-btn:hover { background: var(--terre); }
.edition { background: #fff; border: 1px solid var(--ligne); border-radius: 10px; padding: 28px; margin: 0 0 28px; }
.edition h2 { color: var(--ardoise); }
.edition .date { color: var(--terre); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.liste-docs { list-style: none; margin: 0 0 1em; padding: 0; }
.liste-docs li { padding: 5px 0; }
.liste-docs a::before { content: "■ "; color: var(--orange); }
.media-bloc { margin: 18px 0; }
.media-bloc video, .media-bloc iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; border: 0; border-radius: 4px; display: block; }
.media-bloc audio { width: 100%; }
.media-bloc .legende { font-size: 14px; color: var(--texte-doux); margin-top: 6px; }

/* ---------- lecteur YouTube ---------- */
.yt-section { background: var(--ardoise); color: #fff; }
.yt-section .titre-section { color: #fff; }
.yt-section .sous-titre { color: #C9CDD3; }
.yt-section .sous-titre a { color: var(--jaune); }
.yt-lecteur { max-width: 960px; margin: 0 auto; }
.yt-onglets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.yt-section .puce { background: transparent; color: #fff; border-color: var(--filet); }
.yt-section .puce:hover { border-color: #fff; }
.yt-section .puce.actif { background: var(--bordeaux); border-color: var(--bordeaux); }
.yt-lecteur .media-bloc iframe { box-shadow: 0 20px 45px -18px rgba(0,0,0,.6); }
.yt-lecteur .boutons { margin-top: 18px; }
.yt-avis {
  background: #fff8e1; border-left: 5px solid #d68c00; border-radius: 6px;
  padding: 18px 22px; margin: 0 0 26px; color: var(--texte-2); text-align: justify;
}
.yt-avis p { margin: 0 0 10px; font-size: 15px; }
.yt-avis p:last-child { margin-bottom: 0; }
.yt-avis .yt-avis-titre { color: #a35a00; font-weight: 700; font-size: 1.1em; margin-bottom: 12px; }

/* ---------- frise (listes d'éditions, d'archives) ---------- */
.frise { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--ligne); }
.frise li { position: relative; padding: 8px 0 12px 22px; }
.frise li::before {
  content: ""; position: absolute; left: -8px; top: 15px; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bleu);
}
.frise .annee { font-weight: 800; color: var(--ardoise); margin-right: 10px; }
.frise .theme { color: var(--texte-2); }
.frise .complements { font-size: 13px; margin-top: 2px; }
.frise .complements a { margin-right: 14px; }

/* ---------- vignettes « à la une » ---------- */
.une { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.une a.vignette {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ligne); border-radius: 8px;
  overflow: hidden; color: var(--texte); transition: transform .2s, box-shadow .2s;
}
.une a.vignette:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.une .image { aspect-ratio: 16 / 9; background: var(--gris) center / contain no-repeat; }
.une .corps { padding: 14px 16px 18px; }
.une .tag { font-size: 11px; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: .08em; }
.une .sous-tag { display: block; font-size: 12px; font-style: italic; color: var(--ardoise); opacity: .8; margin-top: 2px; }
.une h3 { margin: 4px 0 6px; font-size: 16px; }
.une p { font-size: 14px; color: var(--texte-doux); margin: 0; }

/* ---------- tuiles de rubriques ---------- */
.tuiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tuile {
  display: block; padding: 18px; border-radius: 6px; color: #fff !important; min-height: 110px;
  background: var(--ardoise); transition: background .2s, transform .2s;
}
.tuile:hover { background: var(--ardoise-3); transform: translateY(-2px); }
.tuile b { display: block; font-size: 16px; margin-bottom: 4px; }
.tuile span { font-size: 13px; color: #C9CDD3; }
.tuile.bleu { background: var(--bleu); } .tuile.bleu:hover { background: var(--bleu-clair); }
.tuile.orange { background: var(--brique); } .tuile.orange:hover { background: var(--orange-fonce); }
.tuile.vert { background: var(--vert); } .tuile.vert:hover { background: var(--vert-clair); }
.tuile.bordeaux { background: var(--bordeaux); } .tuile.bordeaux:hover { background: #a53a17; }
.tuile.bleu span, .tuile.orange span, .tuile.vert span, .tuile.bordeaux span { color: rgba(255,255,255,.85); }

/* ---------- listes de liens (index, contact) ---------- */
.colonnes-liens { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bloc-liens { background: var(--gris); padding: 22px 24px; border-radius: 4px; }
.bloc-liens h2 { font-size: 16px; text-transform: uppercase; color: var(--ardoise); border-bottom: 2px solid var(--bleu); padding-bottom: 8px; }
.bloc-liens ul { list-style: none; margin: 0; padding: 0; }
.bloc-liens li { padding: 4px 0; font-size: 15px; }
.bloc-liens li li { padding-left: 14px; font-size: 14px; }
.bloc-liens a { color: var(--texte-2); }
.bloc-liens a:hover { color: var(--bleu); }
.bloc-liens a::before { content: "| "; color: var(--texte-doux); }

/* ---------- Utopie 21 ---------- */
.numeros { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.numero {
  display: block; position: relative; background: #fff; border: 1px solid var(--ligne); border-top: 5px solid var(--bleu);
  border-radius: 4px; padding: 14px 14px 12px; color: var(--texte) !important; transition: transform .15s, box-shadow .15s;
}
.numero:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.numero .n { font-size: 22px; font-weight: 800; color: var(--ardoise); display: block; }
.numero .d { font-size: 13px; color: var(--texte-doux); }
.numero .note { display: block; font-size: 11px; color: var(--bordeaux); margin-top: 4px; }
.numero .type { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; color: #fff; background: var(--bordeaux); border-radius: 3px; padding: 1px 5px; }
.numero .type.web { background: var(--vert); }
.numero.dernier { border-top-color: var(--orange); background: #fffaf3; }

/* ---------- Archives ---------- */
.recherche { display: flex; gap: 10px; max-width: 560px; margin-top: 18px; }
.recherche input {
  flex: 1; font: inherit; font-size: .95rem; padding: 12px 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
}
.recherche input::placeholder { color: #B7BCC4; }
.compteur { font-size: .8rem; color: #C9CDD3; margin-top: 10px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.chiffres div { font-size: 12px; color: #C9CDD3; text-transform: uppercase; letter-spacing: .08em; }
.chiffres b { display: block; font-size: 24px; color: #fff; letter-spacing: 0; }

.onglets {
  position: sticky; top: 0; z-index: 20; background: var(--papier);
  border-bottom: 1px solid var(--ligne);
}
.onglets .conteneur { display: flex; gap: 4px; overflow-x: auto; padding-top: 10px; scrollbar-width: thin; }
.onglets button {
  font: inherit; font-weight: 600; font-size: .82rem; white-space: nowrap; cursor: pointer;
  background: var(--gris); color: var(--texte-doux); border: 1px solid var(--ligne); border-bottom: 0;
  padding: 10px 14px 12px; border-radius: 8px 8px 0 0; transform: translateY(1px);
}
.onglets button:hover { color: var(--ardoise); }
.onglets button.actif { background: var(--papier); color: var(--ardoise); box-shadow: 0 -6px 14px -10px rgba(0,0,0,.25); }
.onglets button.actif::after { content: ""; display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--bleu); }
.onglets .nb { font-weight: 400; color: var(--texte-doux); margin-left: 4px; font-size: .75rem; }
@media (min-width: 1000px) { .page-archives .onglets { top: 0; } }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 22px 0 6px; }
.filtres span { font-size: 13px; color: var(--texte-doux); margin-right: 4px; }
.puce {
  font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ligne); background: #fff; color: var(--texte-2);
}
.puce.actif { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }

.collection { margin: 34px 0 10px; }
.collection-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.collection-tete h2 { color: var(--ardoise); font-size: 1.3rem; margin: 0; }
.collection-tete p { margin: 2px 0 14px; color: var(--texte-doux); font-size: .9rem; width: 100%; }
.collection-tete .voir { font-size: 13px; font-weight: 600; background: none; border: 0; color: var(--bleu); cursor: pointer; padding: 0; font-family: inherit; }
.annee-titre { font-size: 13px; font-weight: 700; color: var(--terre); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 8px; }

.fiches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
a.fiche {
  display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--ligne);
  border-left: 4px solid var(--bleu); border-radius: 0 8px 8px 0; padding: 12px 14px; color: var(--texte) !important;
  transition: box-shadow .15s, transform .15s;
}
a.fiche:hover { box-shadow: var(--ombre); transform: translateY(-1px); }
.fiche .an {
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #fff; background: var(--ardoise);
  border-radius: 4px; padding: 2px 6px; margin-top: 2px; min-width: 44px; text-align: center;
}
.fiche .an.vide { background: var(--ligne); color: var(--texte-doux); }
.fiche .t { font-weight: 600; font-size: 15px; line-height: 1.35; display: block; }
.fiche .d { font-size: 13px; color: var(--texte-doux); display: block; margin-top: 2px; }
.badge { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 3px; padding: 1px 6px; margin: 4px 4px 0 0; text-transform: uppercase; letter-spacing: .04em; }
.badge.flash { background: #fde9d9; color: var(--brique); }
.note-flash { display: block; margin-top: 4px; font-size: .85rem; color: var(--brique); }
.note-flash .badge { margin: 0 2px; vertical-align: 1px; }
.badge.absent { background: #f6d5cf; color: var(--bordeaux); }
.badge.format { background: var(--gris); color: var(--texte-doux); }
.col-farnieres a.fiche { border-left-color: var(--terre); }
.col-utopie a.fiche { border-left-color: var(--bordeaux); }
.col-semaine a.fiche { border-left-color: var(--vert); }
.col-voeux a.fiche { border-left-color: var(--or); }
.col-liturgie a.fiche { border-left-color: var(--bleu-clair); }
.col-racines a.fiche { border-left-color: var(--brique); }
.col-medias a.fiche { border-left-color: var(--orange); }
.col-site a.fiche { border-left-color: var(--texte-doux); }

ul.doclist { list-style: none; margin: 0; padding: 0; }
li.doc {
  background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--bleu);
  border-radius: 0 10px 10px 0; margin: 0 0 10px; padding: 12px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.doc-main { flex: 1 1 320px; min-width: 0; }
.doc-title { font-weight: 600; margin: 0; }
.doc-meta { font-size: 13px; color: var(--texte-doux); }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.langs a { display: inline-block; margin: 2px 8px 2px 0; font-size: 13px; font-weight: 600; }
.vide-msg { padding: 40px 0; text-align: center; color: var(--texte-doux); }

/* ---------- visionneuse PDF ---------- */
.voile { position: fixed; inset: 0; background: rgba(20, 22, 28, .75); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px; }
.voile.ouvert { display: flex; }
.visionneuse { background: #fff; width: min(1000px, 100%); height: min(88vh, 1100px); display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.visionneuse-barre { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ardoise); color: #fff; }
.visionneuse-barre h3 { color: #fff; margin: 0; flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visionneuse iframe { flex: 1; width: 100%; border: 0; }
.visionneuse .secours { font-size: 13px; padding: 8px 14px; background: var(--gris); }

/* ---------- pied de page ---------- */
.pied-citation { background: var(--bleu-clair); color: #fff; text-align: center; padding: 34px 16px; }
.pied-citation .qui { font-weight: 700; display: block; margin-bottom: 10px; }
.pied-citation q { font-style: italic; font-size: 1.15rem; quotes: "« " " »"; }
.pied-page { background: var(--ardoise); color: #C9CDD3; padding: 44px 0 20px; font-size: 14px; }
.pied-page h2 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.pied-page a { color: #fff; }
.pied-page a:hover { color: var(--bleu-doux); }
.pied-page .colonnes { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pied-page ul { list-style: none; margin: 0; padding: 0; }
.pied-page li { padding: 3px 0; }
.pied-page .copy { border-top: 1px solid #4c5364; margin-top: 30px; padding-top: 16px; text-align: center; font-size: 12px; }
.pied-page .devise { font-style: italic; color: #fff; }

.haut-de-page {
  position: fixed; right: 24px; bottom: 80px; width: 42px; height: 42px; border-radius: 50%; /* au-dessus du bouton « Rechercher » */
  background: var(--ardoise) url("../img/top.png") center / 38px no-repeat; border: 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 900; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.haut-de-page.visible { opacity: 1; pointer-events: auto; }

/* ---------- impression ---------- */
@media print {
  .entete, .pied-page, .pied-citation, .haut-de-page, .onglets, .filtres { display: none !important; }
  .page-tete { background: none; color: #000; }
  .page-tete h1, .page-tete .chapeau { color: #000; }
  a { color: #000; }
}

/* page INDEX : boutons Imprimer / PDF et version imprimable (toujours à jour, générée depuis le menu) */
.boutons-index { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.aide-pdf { font-size: 13px; opacity: .8; margin: 0; }
.entete-impression { display: none; }
.bloc-utopie ul { columns: 4 170px; column-gap: 24px; }
.bloc-utopie li { break-inside: avoid; }
.index-documents { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.index-documents .meta-doc { font-size: 13px; color: var(--texte-doux); }
@media print {
  @page { margin: 12mm; }
  body.page-index main > .page-tete, body.page-index .bandeau, body.page-index #changePreferences,
  body.page-index [class*="---nb"], body.page-index [class*="---pc"], #gsFloatBtn, #gsOverlay { display: none !important; }
  body.page-index .section { padding: 0; }
  body.page-index .entete-impression { display: block; font-size: 10pt; border-bottom: 1.5pt solid #000; padding-bottom: 4pt; margin: 0 0 8pt; }
  body.page-index .colonnes-liens { display: block; columns: 3; column-gap: 8mm; }
  body.page-index .bloc-liens { background: none; padding: 0; margin: 0 0 6pt; break-inside: avoid; }
  body.page-index .bloc-liens h2 { font-size: 9.5pt; border-bottom-width: 1pt; padding-bottom: 2pt; margin: 0 0 3pt; color: #000; }
  body.page-index .bloc-liens li { font-size: 8.5pt; padding: 1pt 0; line-height: 1.25; }
  body.page-index .bloc-liens a::before { content: "• "; }
  body.page-index .titre-section { font-size: 11pt; margin: 8pt 0 4pt !important; break-before: page; }
  body.page-index .titre-section + .discret { font-size: 8.5pt; margin: 0 0 6pt; }
  body.page-index .bloc-utopie ul { columns: 5; }
  body.page-index .index-documents .bloc-liens { break-inside: auto; }
  body.page-index .index-documents .bloc-liens h2 { break-after: avoid; }
  body.page-index .index-documents li { break-inside: avoid; }
  body.page-index .meta-doc { font-size: 7.5pt; color: #444; }
  body.page-index .aide-pdf, body.page-index .boutons-index { display: none; }
}

/* paroles de chant en colonnes : une strophe ne se coupe pas */
.paroles p { break-inside: avoid; }