@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-variable.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --body-font-size: 1.4em;
  --cassiopeia-color-primary: #f9c72f;
  --cassiopeia-color-link: #fd6219;
  --link-color: #000000;
  --link-color-rgb: 34,79,170;
  --cassiopeia-color-hover: #935009;
  --link-hover-color: #935009;
  --link-hover-color-rgb: 66,64,119;
  --blue: #000000;
}
a.pathway {
  color: #000;
}
.sans {
  margin-bottom: 0;
}
.com-content-article__body a {
  color: #a16507;
}
.com-content-article__body a:hover {
  color: #000000;
}
.lien a {
  color: #000;
}
.container-header {
  z-index: 10;
  background-color: var(--cassiopeia-color-primary);
  background-image: none;
  position: relative;
  box-shadow: inset 0 5px 5px #00000008;
}
.btn-primary {
  background-color: #d9b574;
  border: 1px solid #9f7e42;
  color: #000000;
  max-width: 300px;
  font-size: 1.2em;
  padding: 7px 15px 7px 15px;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #d1b98a;
  border: 1px solid #9f7e42;
  color: #000000;
}
.btn-eric {
  background-color: #ececec;
  border: 1px solid #aca9a3;
  color: #000000;
  width: 100px;
  font-size: 1em;
  padding: 0px;
}
.header {
  color: #000;
  background-color: #dac6a1;
  background-image: none;
}
.container-header .navbar-brand a {
  color: #000;
}
.container-header .mod-menu {
  color: #000;
}
.container-header .mod-menu > li.active::after, .container-header .mod-menu > li:hover::after {
  background: #000;
}
.container-header .metismenu > li > a::after, .container-header .metismenu > li > button::before {
  opacity: 1;
}

body {
  background-color: #e3d9c5;
}
.sidebar-right.card {
  background-color: #eeebe3;
  border: 1px solid #c4b9a3;
  border-radius: 10px;
}
.sidebar-right.no-card {
  background-color: #eeebe3;
  border: 1px solid #c4b9a3;
  border-radius: 15px;
  padding: 15px;
}
.input-group-text {
  margin-right: 1px;
}
.btn.btn-secondary.input-password-toggle {
  margin-right: 1px;
}
.form-check-input[type="checkbox"] {
  border-radius: .25em;
  width: 25px;
  height: 25px;
  margin-right: 0px;
  border: 1px solid #c4b9a3;
}
.btn.btn-primary.w-100 {
  border: 1px solid #a6813f;
}
.btn.btn-primary.margetop {
  padding: 0;
}
.mod-menu.mod-list.nav {
  font-size: 1.4em;
}
.form-control::placeholder {
  color: #000;
  opacity: 1;
}
.form-check-label {
  font-size: 0.8em;
  margin-left: 10px;
}
.mod-login__submit.form-group {
  text-align: center;
  width: 70%;
  margin: auto;
}
.eric-80 {
  width: 80%;
  margin: auto;
  border: 2px solid #000;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
}
.metismenu.mod-menu .metismenu-item {
  font-size: 1em;
  padding: .5em 0.8em;
}
.com-content-article.item-page {
  margin: auto;
  border: 1px solid #c4b9a3;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
}
.main-bottom.card {
  width: 80%;
  margin: auto;
    margin-top: auto;
  border: 1px solid #c4b9a3;
  padding: 0px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.mod-breadcrumbs.breadcrumb.px-3.py-2 {
  width: 50%;
  font-size: 0.8em;
  margin: auto;
  background-color: #e3d9c5;
  float: left;
  margin-left: 7%;
  border-bottom: 1px dashed #000;
}
.mm-collapse.mm-show {
  font-size: 0.8em;
}
h1, .h1 {
  margin-bottom: 24px;
  font-family: var(--bb-font-display);
  font-variant: petite-caps;
  color: #a16507;
  }
h2, .h2 {
  font-family: var(--bb-font-display);
  margin-bottom: 40px;
  color: #a16507;
}
h3, .h3 {
  font-size: 1.1em;
  margin-top: 30px;
  margin-bottom: 20px
  color: #a16507;
}
h4, .h4  {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 0.9em;
  font-weight: normal;
}
.eric {
  font-size: 1.4em;
}
.container-header .container-nav {
  padding-bottom: 0em;
}

.container-header .navbar-toggler {
  color: #fff;
  cursor: pointer;
  border: 3px solid #000;
  background-color: #ede7dc;
}
.mod-breadcrumbs__item.breadcrumb-item.active {
  color: #000;
}
.metismenu.mod-menu .mm-collapse {
  background-color: #e3d9c5;
}
.container-header .metismenu > li.level-1 > ul {
  min-width: 16rem;
}
/*accordion*/
.accordion-button.collapsed {
  background-color: #dfe6f0;
}
.accordion-button {
  font-size: 0.7em;
}
#flush-collapseOne {
  background-color: #dfe6f0;
}
.accordion {
  --accordion-active-bg: #dfe6f0;
}
#accordionFlushExample {
  margin-top: 40px;
}

/*accordion FIN*/
/*Logo Icon Joomla en travaux*/
.logo-icon {
    display: none;
}
.offline-card .header h1 {
   display: none;
}
.offline-card {
  border: 1px solid #0000001a;
  border-radius: 5px;
  width: 100%;
  max-width: 30em;
  margin: 60px auto;
  box-shadow: 0 0 10px #0000000d;
}
/*Logo Icon Joomla en travaux FIN*/
.footer {
  color: #000;
  background-color: #eeebe3;
  background-image: none;
  margin-top: 1em;
}
.fa-2x {
  font-size: 1.6em;
  margin-right: 20px;
  color: #c79e5e;
}
.container-header .navbar-toggler {
  color: #000;
  cursor: pointer;
  border: 1px solid #000;
}
/*Video Resp*/
.video-eric {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	border-radius: 12px!important;
}

.video-eric iframe, .video-eric object, .video-eric embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/*Video Resp FIN*/
.mod-menu.mod-list.nav {
  font-size: 1em;
}
/*Modal Largeur*/
.modal {
  --modal-width: 60%
}
.modal-title {
  font-size: 1.4em;
}
#staticBackdropLabel.modal-title {
  font-size: 1em;
}
.modal-header {
  background-color: #ddc39b;
  padding: 15px;
}
.modal-content {
  height: 90%;
  border: none;
}
.modal-footer {
  background-color: #ddc39b;
}

/*Dropdown Psaumes*/
.dropdown-menu.show {
  text-align: center;
  font-size: 1.4em;
}
.dropdown-menu.show {
  background-color: #f7d38e;
  outline: 10px solid #fff;
    outline-color: rgb(255, 255, 255);
    outline-style: solid;
    outline-width: 10px;
  border: none;
}
#dropdownMenuButton1 {
  width: 160px;
}
.eric-20 {
  --modal-width: 30%;
}
.eric-font-14 {
  font-size: 1.4em;
}
.btn-secondary {
  color: #000;
  background-color: #dfbf84;
  border: 1px solid #bc9c61;
  font-size: 1.3rem;
  padding: 3px 10px 3px 10px;
}
.readmore .btn-secondary {
  padding: 1px 15px 1px 15px;
}
.btn-secondary:hover {
  background-color: #fbe197;
  border: 1px solid #bc9c61;
}
.btn.btn-secondary.input-password-toggle {
  background-color: #fff;
  border: 1px solid #ced4da;
}
.btn:hover {
  background-color: #d1b98a;
  border-color: #ada595;
}
.btn-download {
  color: #000;
  background-color: #95c6ea;
  border: 2px solid #618dbc;
  font-size: 1.3rem;
  padding: 10px 10px 10px 10px;
  margin-bottom: 60px;
}

/*Position Main Top pour Psaumes*/
.main-top.card {
  text-align: center;
  background-color: #e3d9c5;
  border: none;
}
.pagenavigation {
  max-width: 80%;
  margin: auto;
}

#mod-custom131 {
  width: 100%;
}
.readmore {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0px;
}
.margetop {
  margin-top: 50px;
}
.icon-chevron-left {
  color: #fff;
  padding-right: 10px;
}
.icon-chevron-right {
  color: #fff;
  padding-left: 10px;
}
.divider.icon-location.icon-fw {
  color: #906e31;
  padding-right: 10px;
}
.footer .grid-child {
  align-items: flex-start;
}
#mod-custom112 {
  width: 50%;
}
.back-to-top-link {
  color: #693c0c;
  border: 2px solid #5b3411;
  border-radius: 50%;
  }
.com-contact.contact {
  width: 80%;
  margin: auto;
  padding: 20px;
  border: 1px solid #c4b9a3;
  border-radius: 10px;
  background-color: #fff;
}
.com-contact__container {
  display: none;
}
/*Texte envoyer un mail dans le formulaire de contact*/
legend {
  display: none;
}
.footer a:not(.btn):hover {
  color: #755313;
}
.card-body h1 {
  display: none;
}
.card-body h4 {
  color: #a16507;
  font-size: 1.3em;
}
.card-body h3 {
  color: #a16507;
  font-size: 1.3em;
}
.card-header {
  color: #a16507;
  font-size: 1.3em;
  background-color: #eeebe3;
  border: none;
}
.newsflash-title {
  margin-top: 0;
}
.mod-articles-title {
  margin-top: 0;
}
.pagenavigation {
  margin-top: 60px;
}
/*Flexbox Flexbox Flexbox*/
.flex {
display: flex;
gap: 1rem;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
}
.box-01, .box-02, .box-03 {
  margin: 5px;
  box-sizing: border-box;
  flex: 1;
}
/*Fin Flexbox*/

/*Pagination*/
.pagination {
  --pagination-padding-x: .75rem;
  --pagination-padding-y: .375rem;
  --pagination-font-size: 1rem;
  --pagination-color: var(--link-color);
  --pagination-bg: #dfbf84;
  --pagination-border-width: var(--border-width);
  --pagination-border-color: #848586;
  --pagination-border-radius: var(--border-radius);
  --pagination-hover-color: var(--link-hover-color);
  --pagination-hover-bg: #eeebe3;
  --pagination-hover-border-color: var(--border-color);
  --pagination-focus-color: var(--link-hover-color);
  --pagination-focus-bg: #dfbf84;
  --pagination-focus-box-shadow: 0 0 0 .25rem #01015640;
  --pagination-active-color: #000000;
  --pagination-active-bg: #d5750f;
  --pagination-active-border-color: #010156;
  --pagination-disabled-color: #090908;
  --pagination-disabled-bg: #dfbf84;
  --pagination-disabled-border-color: #848586;
  list-style: none;
}
.pagination.ms-0.mb-4 {
  margin-top: 40px;
}
/*Pagination FIN*/
.me-2 {
  display: none;
}

/*Search*/
.awesomplete > input {
  width: 300px;
}
.awesomplete > input {
  max-width: 700px;
}
input#q.js-finder-search-query.form-control {
  width: 30em; 
  margin-top: 0;
  height: 50px;
  font-size: 1em;
}
.com-finder * {
  justify-content: center;
  margin: 5px;
}
.com-finder.finder {
  width: 80%;
  margin: auto;
  border: 2px solid #a6813f;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
}
.result__title-text {
  font-size: 1.2em;
  color: #714c0b;
  margin-left: 0;
}
.pause {
  font-size: 0.8em;
  font-style: italic;
}
.autorisation {
  width: 80%;
  margin: auto;
  margin-top: 20px;
  background-color: #e3d9c5;
  font-size: 0.7em;
  color: #484848;
}
.largeur-80 {
  width: 80%;
}
.texte {
  font-size: 0.8em;
  text-align: center;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #c4b9a3;
  border-radius: 8px;
  max-width: 400px;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;
}
.center {
  text-align: center;
}
.fa-circle-info {
  color: #3c96d7;
}
.info {
margin-top:-23px;
}
/*Google Map*/
.gm-style .place-card-large {
  padding: 9px 4px 9px 11px;
  display: none;
}
/*Focus Menu*/
.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink:focus-visible {
  border: 3px dotted #000;
  padding: 5px;
}
a:focus-visible {
  border: 3px dotted #000;
  padding: 5px;
}
#system-message-container {
  width: 80%;
  margin: auto;
}
.accordion-button.collapsed {
  background-color: #fff;
  padding: 0;
}
.accordion-body {
  background-color: #fff;
}
.error {
  background-image: url("/images/404.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}
.mod-articles-category-title.active {
  color: #a16507;
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--btn-active-color);
  background-color: #a16507;
  border-color: #a16507;
}
/*Collaps NOM Auteur*/
.ital {
  font-style: italic;
  font-size: 0.8em;
  color: #856f45;
  margin-top: 40px;
}
.italique a {
 color: #856f45;
 font-size: 0.8em;
 font-style: italic;
 text-decoration: none;
}
.fond-collapse {
  background-color: #f6f6f6;
}
/*Collaps NOM Auteur fin*/
.btn.btn-sm.btn-secondary.next {
  padding-left: 36px;
}
/*Pour class du module */
.ericmodule .mod-list {
 list-style: square;
 margin-left: 25px;
 color: #a16507;
 padding: 10px;
}
.test h3{
padding-left: 15px;
color: #a16507;
font-size: 1.3em;
}
.mod-articles-link.active {
  color: #a16507;
}
/*Pour class du module FIN */
.readmore .icon-chevron-right {
  display: none;
}
.psaumes {
  font-family: var(--bb-font-display);
  font-size: 2em;
  font-variant: petite-caps;
}
a:not([class]) {
  text-decoration: none;
}
.mod-languages {
  text-align: center;
}
.bb-nowrap { 
  white-space: nowrap;
}

/*Mobile Mobile Mobile Mobile Mobile Mobile Mobile Mobile Mobile Mobile Mobile Mobile*/

@media (max-width: 992px) {

:root {
  --body-font-size: 1.1em;
}
  #mod-custom112 {
  width: 100%;
}
.eric-font-14 {
  font-size: 1.8em;
}
.logo-mobile {
  width: 60%;
  text-align: center;
}

.btn.btn-primary.w-100 {
  font-size: 1em;
}
  .btn-secondary {
  color: #000;
  font-size: 1rem;
}
.eric-80 {
  width: 100%;
  margin: auto;
  border: 2px solid #a6813f;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.com-content-article.item-page {
  width: 100%;
  margin: auto;
  border: 1px solid #c4b9a3;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
}
  .main-bottom.card {
  width: 100%;
  margin: auto;
  margin-top: auto;
  border: 1px solid #c4b9a3;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
}

.mod-breadcrumbs.breadcrumb.px-3.py-2 {
  width: 100%; 
  padding: 0;
  margin: 0;
}
  h1, .h1 {
    margin-bottom: 10px;
  }
h2, .h2 {
  margin-bottom: 10px;
}
.navbar.navbar-expand-lg {
  margin-bottom: auto;
  margin-right: 10px;
}
.navbar-toggler.navbar-toggler-right {
  color: #000;
  padding: 5px 15px 5px 15px;
} 
  .metismenu.mod-menu .metismenu-item {
  font-size: 1.1em;
}
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list {
  width: 300px;
  background-color: #ebe5d9;
  border: 2px solid #000;
}
  .pagenavigation {
  max-width: 100%;
}
  .icon-arrow-up.icon-fw {
  color: #e36c14;
}
  .back-to-top-link:hover, .back-to-top-link:focus {
  color: var(--white,#fff);
  background-color: #fcefbc;
  border-color: #000;
}
  input#q.js-finder-search-query.form-control {
  width: 15em;  
}
  .com-finder.finder {
  width: 100%;
  padding: 0px;
  border-radius: 10px;
}
  .pagination {
  margin-bottom: 0;
  flex-wrap: wrap;
}
  .largeur-80 {
  width: 100%;
}
  .texte {
  font-size: 0.8em;
  margin-bottom: 20px;
}
  #staticBackdropLabel.modal-title {
  font-size: 0.8em;
}
  .modal-dialog.modal-lg.jviewport-width80 {
  width: 94%;
  margin: auto;
    margin-top: auto;
  margin-top: 15px;
}
  .psaumes {
  font-size: 2em;
}
  .com-contact.contact {
  width: 100%;
}
  #mod-custom110 {
  margin-left: 10px;
}
}
/*Mobile*/
@media screen and (max-width: 576px) {
  .box-01, .box-02, .box-03 {
  flex: auto;
}
  .largeur-80 {
  width: 100%;
}
  .texte {
  font-size: 0.8em;
  margin-bottom: 20px;
}
  .eric-20 {
  --modal-width: 60%;
}
  .navbar.navbar-expand-lg {
  margin: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 20px;
}
}
/*Hamburger hauteur*/
@media (width <= 767.98px) {
  .container-header .container-nav .container-search, .container-header .container-nav nav {
    margin-top: 0.8em;
  }
}
/*Hamburger hauteur FIN*/

/*********************************************/
/*Language Switch*/

/*Language switch fIN*/

/*Menu is-hoverable*/
@media (min-width: 992px) {
  .mod-menu.is-hoverable > li:hover > .mm-collapse:not(.mm-show) {
    display: block;
    font-size: 0.8em;
  }
  .mod-menu.is-hoverable > li:hover > .mm-toggler:after {
    transform: rotateX(-180deg);
  }
}
/*Accueil bannière*/
.psb{container-type:inline-size;width:100%;margin:0 0 24px;line-height:normal}
.psb *{box-sizing:border-box}
.psb .psb-inner{position:relative;width:100%;aspect-ratio:3/1;overflow:hidden;background:#1E1812;color:#F5ECD9;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;border-radius:6px}
.psb .psb-glow{position:absolute;left:68cqw;top:-3.5cqw;width:45cqw;height:45cqw;border-radius:50%;background:radial-gradient(circle,rgba(233,162,59,.42) 0%,rgba(233,162,59,.14) 34%,rgba(233,162,59,0) 68%);pointer-events:none}
.psb .psb-trail{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.psb .psb-trail-m{display:none}
.psb .psb-lamp{position:absolute;left:63.33cqw;top:7.33cqw;width:30cqw;height:auto;display:block}
.psb .psb-ember{position:absolute;width:max(3px,.33cqw);height:max(3px,.33cqw);border-radius:50%;background:#F6C66E;opacity:.35}
.psb .psb-e1{left:90.17cqw;top:14.17cqw}
.psb .psb-e2{left:91.17cqw;top:15cqw;animation-delay:1.2s!important}
.psb .psb-e3{left:89.5cqw;top:14.67cqw;background:#FBE3A6;animation-delay:2.5s!important}
.psb .psb-e4{left:91.67cqw;top:13.67cqw;background:#FBE3A6;animation-delay:3.6s!important}
.psb .psb-text{position:absolute;left:7.33cqw;top:0;width:55cqw;height:100%;padding-bottom:1.67cqw;display:flex;flex-direction:column;justify-content:center;gap:1.83cqw}
.psb .psb-kicker{display:flex;align-items:center;gap:1.5cqw}
.psb .psb-label{margin:0;font-family:Cinzel,Georgia,serif;font-weight:500;font-size:max(10px,1.25cqw);letter-spacing:.28em;color:#DFBF84;text-transform:none;font-variant:normal}
.psb .psb-rule{width:4.67cqw;height:1px;background:#DFBF84;opacity:.6}
.psb .psb-rule-l{display:none}
.psb .psb-verse{margin:0;padding:0;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:500;font-style:normal;font-size:4.5cqw;line-height:1.08;letter-spacing:normal;color:#F5ECD9;text-transform:none;font-variant:normal;border:0;background:none}
.psb .psb-verse em{font-style:italic;color:#DFBF84}
.psb .psb-meta{display:flex;align-items:center;gap:1.33cqw;flex-wrap:wrap}
.psb .psb-ref{margin:0;font-family:Cinzel,Georgia,serif;font-weight:500;font-size:max(10px,1.17cqw);letter-spacing:.18em;color:#BFAE8E}
.psb .psb-dot{width:4px;height:4px;border-radius:50%;background:#BFAE8E}
.psb .psb-sub{margin:0;font-style:italic;font-size:max(13px,1.75cqw);color:#D8CBB2}
.psb .psb-flame{transform-box:fill-box;transform-origin:50% 100%}

/* Version mobile / colonne étroite */
@container (max-width:760px){
  .psb .psb-inner{aspect-ratio:auto}
  .psb .psb-glow{left:28cqw;top:-12.13cqw;width:61.33cqw;height:61.33cqw}
  .psb .psb-trail-d{display:none}
  .psb .psb-trail-m{display:block}
  .psb .psb-lamp{left:26cqw;top:5.33cqw;width:36cqw}
  .psb .psb-e1{left:58.13cqw;top:15.73cqw}
  .psb .psb-e2{left:59.73cqw;top:17.07cqw}
  .psb .psb-e3{left:57.33cqw;top:16.53cqw}
  .psb .psb-e4{left:60.53cqw;top:14.93cqw}
  .psb .psb-text{position:relative;left:auto;width:100%;height:auto;padding:34.67cqw 8.53cqw 11cqw;align-items:center;text-align:center;gap:2.67cqw}
  .psb .psb-rule-l{display:block}
  .psb .psb-rule{width:5.33cqw}
  .psb .psb-label{font-size:max(10px,2.27cqw)}
  .psb .psb-verse{font-size:6.67cqw}
  .psb .psb-meta{flex-direction:column;gap:2.67cqw}
  .psb .psb-dot{display:none}
  .psb .psb-ref{font-size:max(10px,2.13cqw)}
  .psb .psb-sub{font-size:max(13px,3.07cqw)}
}

/* Animation (désactivée si l'utilisateur préfère réduire les mouvements) */
@media (prefers-reduced-motion:no-preference){
  .psb .psb-flame{animation:psb-flicker 2.6s ease-in-out infinite}
  .psb .psb-glow{animation:psb-breathe 4.5s ease-in-out infinite}
  .psb .psb-trail path{animation:psb-travel 7s linear infinite}
  .psb .psb-ember{opacity:0;animation:psb-rise 5s ease-out infinite}
}
@keyframes psb-flicker{0%,100%{transform:scale(1,1) skewX(0deg)}25%{transform:scale(.95,1.06) skewX(-2deg)}50%{transform:scale(1.03,.97) skewX(1.5deg)}75%{transform:scale(.98,1.03) skewX(-1deg)}}
@keyframes psb-breathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes psb-travel{to{stroke-dashoffset:-240}}
@keyframes psb-rise{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(1cqw,-12.5cqw);opacity:0}}

/*Bienne-Biel Accueil*/
:root {
  --bb-ivory: #F7F4EE;
  --bb-white: #FFFFFF;
  --bb-sand: #ECE6DA;
  --bb-line: #E3DDD1;
  --bb-ink: #1B2430;
  --bb-text: #3A4250;
  --bb-muted: #5A6270;
  --bb-lake: #1E4E63;
  --bb-lake-dark: #123444;
  --bb-night: #16323F;
  --bb-night-card: #1F4353;
  --bb-night-line: #3C5A67;
  --bb-night-text: #DCE3E6;
  --bb-night-muted: #C9D4D8;
  --bb-gold-text: #5A4A2A;

  --bb-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --bb-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bb-radius: 18px;
  --bb-gutter: clamp(20px, 5vw, 120px);
}

/* --------------------------------------------------------------------------
   Conteneur de l'article
   -------------------------------------------------------------------------- */
.bb-home {
  font-family: var(--bb-font-body);
  color: var(--bb-ink);
  background: var(--bb-ivory);
  font-size: 19px;
  line-height: 1.65;
}
.bb-home *,
.bb-home *::before,
.bb-home *::after { box-sizing: border-box; }

.bb-home h1,
.bb-home h2,
.bb-home h3 {
  font-family: var(--bb-font-display);
  font-weight: 600;
  color: var(--bb-ink);
  margin: 0;
}
.bb-home h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.06; }
.bb-home h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; }
.bb-home h3 { font-size: 26px; line-height: 1.25; }
.bb-home p { margin: 0; color: var(--bb-text); }
.bb-home a { color: var(--bb-lake); }
.bb-home a:hover { color: var(--bb-lake-dark); }

.bb-section {
  padding: clamp(56px, 7vw, 104px) var(--bb-gutter);
}

.bb-kicker {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-lake);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.bb-home .bb-btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #AD5F22;
  border: 2px solid #783F12;
  color: var(--bb-white);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.bb-home .bb-btn:hover { background: #cb854d; border-color: #783f12; color: var(--bb-white); }
.bb-home .bb-btn--ghost { background: transparent; color: var(--bb-lake); }
.bb-home .bb-btn--ghost:hover { background: #CB854D;color: var(--bb-white);}
.bb-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */
.bb-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}
.bb-hero-text { display: flex; flex-direction: column; gap: 28px; }
.bb-lead { font-size: 21px; line-height: 1.55; }
.bb-photo {
  margin: 0;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #E8E2D6 0 14px, #EFEAE0 14px 28px);
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.bb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-photo--has-img { padding: 0; position: relative; }
.bb-photo img { object-position: 45% center; }
.bb-photo-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.bb-home .bb-photo-credit a { color: inherit; text-decoration: underline; }
.bb-home .bb-photo-credit a:hover { color: #FFFFFF; }
.bb-photo-label {
  background: var(--bb-white);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--bb-text);
}

/* --------------------------------------------------------------------------
   Histoire + frise
   -------------------------------------------------------------------------- */
.bb-history {
  background: var(--bb-white);
  border-top: 1px solid var(--bb-line);
  border-bottom: 1px solid var(--bb-line);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
}
.bb-history-text {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bb-history-text .bb-btn { align-self: flex-start; }
.bb-timeline {
  grid-column: 9 / span 4;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--bb-ink);
}
.bb-timeline li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 0;
  border-bottom: 1px solid var(--bb-line);
}
.bb-timeline-year {
  font-family: var(--bb-font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  color: #91511E;
}
.bb-timeline-text { font-size: 17px; line-height: 1.5; color: var(--bb-text); }

/* --------------------------------------------------------------------------
   Faire la paix (bandeau sombre)
   -------------------------------------------------------------------------- */
.bb-peace {
  background: #58371D;
  padding-left: clamp(20px, 15vw, 220px);
  padding-right: clamp(20px, 15vw, 220px);
  display: flex;
  flex-direction: column;
  gap: 40px;
  background-image: linear-gradient(-80deg, #966843, #58371D, #58371D);

}
.bb-home .bb-peace h2,
.bb-home .bb-peace h3 { color: var(--bb-white); }
.bb-home .bb-peace h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; }
.bb-home .bb-peace p { color: #fff; font-size: 20px; }
.bb-home .bb-peace a { color: var(--bb-white); font-weight: 600; }

.bb-quote {
  margin: 0;
  padding: 36px 0;
  border-top: 1px solid #E3D9C5;
  border-bottom: 1px solid #E3D9C5;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bb-home .bb-quote p {
  font-family: var(--bb-font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--bb-white);
}
.bb-ref {
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.bb-peace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.bb-peace-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: 16px;
  background: #845e3f;
}
.bb-home .bb-peace-card p { font-size: 18px; line-height: 1.6; }
.bb-home .bb-peace-card .bb-verse {
  font-family: var(--bb-font-display);
  font-size: 22px;
  line-height: 1.45;
  color: var(--bb-white);
}
.bb-peace-card a { margin-top: auto; }

/* --------------------------------------------------------------------------
   Bible en ligne
   -------------------------------------------------------------------------- */
.bb-bible { display: flex; flex-direction: column; gap: 36px; }
.bb-bible-intro { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.bb-bible-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.bb-home .bb-bible-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  border-radius: var(--bb-radius);
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  text-decoration: none;
  color: var(--bb-ink);
}
.bb-home .bb-bible-card:hover { border-color: var(--bb-lake); color: var(--bb-ink); }
.bb-bible-title { font-family: var(--bb-font-display); font-size: 30px; font-weight: 600; line-height: 1.2; }
.bb-bible-desc { font-size: 18px; line-height: 1.55; color: var(--bb-text); }
.bb-bible-more { margin-top: auto; padding-top: 12px; font-size: 17px; font-weight: 600; color: var(--bb-lake); }
.bb-tip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  border-radius: var(--bb-radius);
  background: var(--bb-sand);
}
.bb-tip .bb-kicker { color: var(--bb-gold-text); }
.bb-home .bb-tip p { color: var(--bb-ink); font-size: 18px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Sans but commercial
   -------------------------------------------------------------------------- */
.bb-note {
  background: #58371D;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-image: linear-gradient(-80deg, #966843, #58371D, #58371D);
}
.bb-home .bb-note h2 { color: var(--bb-white); font-size: 28px; }
.bb-home .bb-note p { color: #FFF; font-size: 18px; line-height: 1.6; max-width: 760px; }
.bb-home .bb-note .bb-credit { font-size: 15px; color: #FFF; }

/* --------------------------------------------------------------------------
   Page « Églises de Bienne » / « Kirchen in Biel »
   -------------------------------------------------------------------------- */
.bb-page-head { display: flex; flex-direction: column; gap: 24px; max-width: 1040px; }
.bb-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bb-home .bb-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
  color: #000;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.bb-home .bb-jump a:hover { border-color: var(--bb-lake); color: var(--bb-lake); }

.bb-church-group { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 24px; }
.bb-church-group:nth-of-type(odd) { background: var(--bb-white); border-top: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line); }
.bb-group-intro { max-width: 820px; }

.bb-church-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bb-church {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  border-radius: var(--bb-radius);
  background: var(--bb-ivory);
  border: 1px solid var(--bb-line);
}
.bb-church-group:nth-of-type(even) .bb-church { background: var(--bb-white); }
.bb-home .bb-church h3 { font-size: 22px; line-height: 1.3; }
.bb-home .bb-church-addr { font-size: 17px; line-height: 1.5; }
.bb-church-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-lang-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bb-sand);
  color: var(--bb-gold-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bb-church-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 6px; }
.bb-home .bb-church-links a { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.bb-church-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bb-home .bb-church-updated { font-size: 15px; color: var(--bb-muted); }

@media (max-width: 1100px) {
  .bb-church-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .bb-church-list,
  .bb-church-notes { grid-template-columns: minmax(0, 1fr); }
  .bb-church { padding: 22px; }
}

/* --------------------------------------------------------------------------
   Page d'accueil et page des églises : responsive (tablette / mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .bb-hero,
  .bb-peace-grid,
  .bb-bible-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-hero {
    gap: 40px;
  }

  .bb-photo {
    height: 300px;
  }

  .bb-history-text,
  .bb-timeline {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .bb-home {
    font-size: 18px;
  }

  .bb-lead {
    font-size: 19px;
  }

  .bb-peace-card,
  .bb-home .bb-bible-card,
  .bb-tip {
    padding: 24px;
  }

  .bb-actions .bb-btn {
    width: 100%;
    justify-content: center;
  }

  .bb-peace {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ==========================================================================
   bienne-biel.ch – pied de page (module Custom Joomla, FR / DE)
   --------------------------------------------------------------------------
   À coller à la fin de :
   media/templates/site/cassiopeia_lafoi/css/user.css
   Polices : Fraunces + Source Sans 3 (déjà déclarées dans user.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zone footer du template Cassiopeia
   -------------------------------------------------------------------------- */
.container-footer {
  background-color: #EEEBE3;
  background-image: none;
  color: #3A4250;
}

.container-footer .grid-child {
  padding-top: 0;
  padding-bottom: 0;
  display: inherit;
}

/* --------------------------------------------------------------------------
   Bloc principal
   -------------------------------------------------------------------------- */
.container-footer .bb-footer {
  width: 100%;
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #3A4250;
}

.container-footer .bb-footer *,
.container-footer .bb-footer *::before,
.container-footer .bb-footer *::after {
  box-sizing: border-box;
}

.container-footer .bb-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding: 56px 0 40px;
}

/* --------------------------------------------------------------------------
   Colonne « À propos »
   -------------------------------------------------------------------------- */
.container-footer .bb-footer-about {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.container-footer .bb-footer-brand {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: #1B2430;
}

.container-footer .bb-footer-verse {
  margin: 8px 0 0;
  padding: 16px 0 0 20px;
  border-left: 3px solid #B8862B;
}

.container-footer .bb-footer-verse p {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.45;
  color: #1B2430;
}

.container-footer .bb-footer-verse cite {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A6270;
}

/* --------------------------------------------------------------------------
   Colonnes de liens
   -------------------------------------------------------------------------- */
.container-footer .bb-footer-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7A5A1E;
}

.container-footer .bb-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-footer .bb-footer-list li {
  margin: 0;
}

.container-footer .bb-footer a {
  color: #000;
  text-decoration: none;
}

.container-footer .bb-footer a:hover,
.container-footer .bb-footer a:focus-visible {
  color: #123444;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.container-footer .bb-footer a:focus-visible {
  outline: 2px solid #1E4E63;
  outline-offset: 2px;
  border-radius: 2px;
}

.container-footer .bb-footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Barre du bas
   -------------------------------------------------------------------------- */
.container-footer .bb-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 8px 24px;
  padding: 20px 0 28px;
  border-top: 1px solid #D6D0C2;
  font-size: 18px;
  color: #5A6270;
}

.container-footer .bb-footer-bottom p {
  margin: 0;
}

.container-footer .bb-footer-bottom a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.container-footer .bb-footer-bottom a:hover {
  color: #123444;
}

.container-footer .bb-footer-legal a {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Tablette
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .container-footer .bb-footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 40px;
    padding: 44px 0 32px;
  }

  .container-footer .bb-footer-about {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .container-footer .bb-footer {
    font-size: 16px;
  }

  .container-footer .bb-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 36px 0 24px;
  }

  .container-footer .bb-footer-brand {
    font-size: 24px;
  }

  .container-footer .bb-footer-verse p {
    font-size: 18px;
  }

  .container-footer .bb-footer-bottom {
    flex-direction: column;
    align-items: center;
    padding-bottom: 32px;
  }

  .container-footer .bb-footer-sep {
    display: none;
  }

  .container-footer .bb-footer-legal a,
  .container-footer .bb-footer-credit {
    display: block;
  }

  .container-footer .bb-footer-credit {
    margin-top: 4px;
  }
}
/* --------------------------------------------------------------------------
   Pied de page : contenu centré sur smartphone (FR et DE)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .container-footer .bb-footer {
    text-align: center;
  }

  .container-footer .bb-footer-verse {
    padding: 0;
    border-left: none;
  }

  .container-footer .bb-footer-verse::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 0 auto 14px;
    background-color: #B8862B;
  }
}
/* Séparateurs du menu du haut : seulement sur grand écran (pas dans le menu hamburger) */
@media (min-width: 992px) {

  .container-header .metismenu.mod-menu .metismenu-item {
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px
  }

  .container-header .metismenu.mod-menu .metismenu-item + .metismenu-item::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 0.8em;
    border-radius: 50%;
    background-color: currentColor;
    pointer-events: none;
  }
}