@charset "UTF-8";
/* =========================================================
   Chemins d'Éveil - Chemins de Joie
   Harmonisation "soleil / terre" (couleurs uniquement)
   ========================================================= */
/* --------- Palette --------- */ :root {
  --fond-clair: #F6F4F0;
  --fond-clair-2: #EFECE6;
  --texte: #3A2A20;
  --texte-secondaire: #5E514D;
  --accent: #C8741C; /* soleil */
  --accent-fonce: #A3472A; /* rouge-brun */
  --or: #D4A373; /* doré doux */
  --brun: #8B5E3B; /* brun terreux */
  --panneau: #5A2E18; /* cacao profond */
  --panneau-2: #8B5E3B; /* intro */
  --trait: rgba(196, 154, 108, .35);
  --trait-fort: rgba(196, 154, 108, .65);
  --sable-1: rgba(255, 255, 255, 1.00);
  --sable-2: rgba(242, 215, 181, 1.00);
  --sable-3: rgba(235, 219, 198, 1.00);
}
/* --------- Base --------- */
html, body {
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--texte);
}
.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
body {
  background:
    linear-gradient(180deg, var(--fond-clair) 0%, var(--fond-clair-2) 100%), url("../gif_png/fond-etoile.png") repeat;
  background-size: contain;
  background-position: center;
}
/* Alternative WebP */
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEAAkA4JZQAA3AA/vuUAAA=")) {
  body {
    background:
      linear-gradient(180deg, var(--fond-clair) 0%, var(--fond-clair-2) 100%), url("../images-webp/fond-etoile.webp") repeat;
    background-size: contain;
    background-position: center;
  }
}
/* --------- Header / Footer --------- */
header {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #E7E9EB;
  z-index: 10;
}
header .navbar {
  margin-top: 0;
  padding-top: 0.4rem;
}
footer {
  background-color: #C3D8FF;
  text-align: center;
  font-size: 0.9rem;
  color: #545454;
  position: relative;
  z-index: 1;
  width: 100%;
  bottom: 0;
}
/* --------- Entête --------- */
#entete {
  position: relative;
  padding: 2.5rem 1rem 0.5rem;
  overflow: hidden;
}
#entete::before {
  content: "";
  position: absolute;
  top: 54%;
  left: 55px;
  transform: translateY(-50%);
  width: clamp(110px, 12vw, 145px);
  height: clamp(110px, 12vw, 145px);
  background-image: url("../images-webp/croix-de-lumiere-cacao.webp"), url("../gif_png/croix-de-lumiere-cacao.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}
#entete .titre-centre {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
#entete .chemins-eveil, .titre-centre .chemins-eveil {
  font-family: soleil, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.35rem;
  font-weight: bold;
  margin: 0;
  color: var(--panneau);
}
#entete .sous-titre-site, .titre-centre .sous-titre-site {
  font-family: soleil, sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  margin-top: 0.8rem;
  line-height: 1.4;
  color: var(--panneau);
}
#entete hr {
  margin: 1rem auto 0.5rem;
  max-width: 60%;
  border: none;
  height: 1px;
  background: var(--trait-fort);
}
.titre-centre {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tiret-1 {
  color: transparent;
}
/* zone cliquable */
#zone-1 {
  position: absolute;
  left: 0;
  top: calc(54% - (clamp(110px, 12vw, 145px) / 2));
  width: calc(55px + clamp(110px, 12vw, 145px) + 25px);
  height: clamp(110px, 12vw, 145px);
  display: block;
  z-index: 15;
}
/* Bandeau dégradé */
.degrade {
  background-image: -webkit-linear-gradient(263deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  background-image: -moz-linear-gradient(263deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  background-image: -o-linear-gradient(263deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  background-image: linear-gradient(187deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
}
/* --------- NAV --------- */
/* Nav global (hors navbar Bootstrap) */
nav:not(.navbar) {
  overflow-x: auto;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
  z-index: 2;
}
/* La navbar Bootstrap ne doit pas hériter du nav global */
header nav.navbar {
  overflow-x: visible;
  display: block;
}
#modifiable {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  z-index: 1;
}
.telephone {
  width: 100%;
  margin: 0;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: var(--texte);
  background-image: -webkit-linear-gradient(295deg, rgba(110, 118, 232, 1.00) 0%, rgba(255, 255, 255, 1.00) 48.72%, rgba(119, 126, 233, 1.00) 97.13%);
  background-image: -moz-linear-gradient(295deg, rgba(110, 118, 232, 1.00) 0%, rgba(255, 255, 255, 1.00) 48.72%, rgba(119, 126, 233, 1.00) 97.13%);
  background-image: -o-linear-gradient(295deg, rgba(110, 118, 232, 1.00) 0%, rgba(255, 255, 255, 1.00) 48.72%, rgba(119, 126, 233, 1.00) 97.13%);
  background-image: linear-gradient(155deg, rgba(110, 118, 232, 1.00) 0%, rgba(255, 255, 255, 1.00) 48.72%, rgba(119, 126, 233, 1.00) 97.13%);
}
/* --------- Titres --------- */
h1, h2, h3, h4, h5, h6 {
  font-family: soleil, sans-serif;
  color: var(--brun);
}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.30rem;
}
h3 {
  font-size: 1.12rem;
}
h4 {
  font-size: 0.9rem;
}
h5 {
  font-size: 0.75rem;
}
h6 {
  font-size: 0.688rem;
}
/* --------- Liens --------- */
a:link {
  color: var(--panneau);
}
a:hover {
  color: var(--accent);
  text-decoration: underline;
}
a:visited {
  color: var(--panneau);
  text-decoration: underline;
  font-size: medium;
}
a.type1 {
  color: var(--panneau);
}
a.type1:hover, a.type1:focus {
  color: var(--accent-fonce);
}
/* Liens intégrés (inline) */
p a.type2, .text-justify a.type2, li a.type2 {
  color: var(--panneau);
  text-decoration: underline;
  text-decoration-color: var(--trait-fort);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
p a.type2:hover, p a.type2:focus {
  color: var(--accent-fonce);
  text-decoration-color: var(--accent-fonce);
  text-decoration-thickness: 2px;
}
p a.type2:focus-visible {
  outline: 2px solid rgba(90, 46, 24, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Tags / Thèmatiques */
a.type-thematiques, a.type-thematiques0 {
  display: inline-flex;
  align-items: center;
  background: var(--panneau);
  color: var(--fond-clair);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: .32rem .7rem;
  margin: 0 .45rem .45rem .45rem;
  border: 1px solid var(--trait);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
a.type-thematiques:hover, a.type-thematiques:focus {
  color: var(--accent);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transform: translateY(-1px);
  text-decoration: none;
}
a.type-thematiques0 {
  background: var(--fond-clair);
  color: var(--panneau);
  font-weight: 600;
  border: 1px solid var(--trait);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(90, 46, 24, .12);
}
a.type-intro {
  color: var(--fond-clair);
  background: rgba(255, 255, 255, .06);
  padding: .2rem .45rem;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background .15s ease, color .15s ease;
}
a.type-intro:hover, a.type-intro:focus {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  text-decoration-thickness: 1px;
}
.lien-pastille {
  display: inline-block;
  padding: 6px 14px;
  background-color: #F8F5F0; /* blanc cassé */
  color: #8B5E3B; /* brun terreux */
  border-radius: 18px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.lien-pastille:hover {
  background-color: #D4A373; /* doré doux */
  color: #5E514D; /* gris taupe */
  text-decoration: none;
  transform: translateY(-1px);
}
/* Url et listes */
.url {
  word-wrap: break-word;
}
.liste-tirets {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.liste-tirets li {
  position: relative;
  padding-left: 1.1em; /* place pour le tiret */
  margin: .25rem 0;
}
.liste-tirets li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
}
.ul {
  margin-left: -1rem;
  list-style-type: square;
}
.ul1 {
  list-style-type: none;
  padding-left: 1.5rem;
}
.ul2 {
  list-style-type: circle;
  padding-left: 1.5rem;
}
.ul3 {
  list-style-type: none;
  padding-left: 0.2rem;
  margin-left: 0.2rem;
  border-left: thin solid var(--panneau);
}
.ul4 {
  list-style-type: none;
  padding-left: 0.5rem;
  border-left: thin solid var(--panneau);
}
.ol1 {
  padding-left: 2rem;
}
.ol3 {
  list-style: upper-alpha;
}
.ol4 {
  list-style: upper-roman;
}
.li3:before {
  content: '- ';
}
.li0 {
  list-style-type: none;
}
.picto-blanc {
  color: #FFFFFF;
  opacity: 0.9;
}
/* Mise en page */
.sommet {
  width: 100%;
  text-align: center;
  margin-top: 2rem;
}
.titre {
  margin-top: 3%;
  margin-bottom: 1rem;
}
.volet-titre {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}
.unitisme {
  letter-spacing: 0.1rem;
  font-weight: 600;
  line-height: 2rem;
  font-size: 0.9rem;
}
/* Liens bas */
.liens-bas {
  max-width: 580px;
  margin-left: 0;
  margin-right: 0;
}
h3.liens-bas {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
  margin-left: 0.25rem;
}
.liens-bas li {
  margin: 0.45rem 0;
}
.liens-bas a {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--trait);
  background: rgba(248, 245, 240, 0.55);
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.liens-bas a:hover, .liens-bas a:focus {
  background: rgba(248, 245, 240, 0.95);
  border-left-color: var(--trait-fort);
  transform: translateX(2px);
  text-decoration: none;
}
.liens-bas a:focus-visible {
  outline: 2px solid var(--trait-fort);
  outline-offset: 2px;
}
.liens-bas a::before {
  content: "›";
  margin-right: 0.45rem;
  opacity: 0.7;
}
/* Variante locale : repère après audio */
.liens-bas.liens-bas--repere {
  max-width: 580px;
  margin: 1.6rem auto 2.2rem;
  padding: 0.65rem 0.9rem;
  background: rgba(248, 245, 240, 0.35);
  border-left: 2px solid var(--trait);
  border-radius: 6px;
  opacity: 0.9;
}
/* Le lien reprend exactement le comportement d'un lien-bas */
.liens-bas.liens-bas--repere a {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: rgba(248, 245, 240, 0.55);
  border-left: 3px solid var(--trait);
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
/* Hover / focus identique aux liens-bas */
.liens-bas.liens-bas--repere a:hover, .liens-bas.liens-bas--repere a:focus {
  background: rgba(248, 245, 240, 0.95);
  border-left-color: var(--trait-fort);
  transform: translateX(2px);
  text-decoration: none;
}
.liens-bas.liens-bas--repere a:focus-visible {
  outline: 2px solid var(--trait-fort);
  outline-offset: 2px;
}
/* Chevron conservé */
.liens-bas.liens-bas--repere a::before {
  content: "›";
  margin-right: 0.45rem;
  opacity: 0.7;
}
/* =========================================
   Liseré fin — liens bas & repères
   ========================================= */
.liens-bas {
  border-left: 2px solid rgba(196, 154, 108, .45);
  padding-left: .9rem;
  margin-left: .2rem;
}
.liens-bas--repere {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.liens-bas--repere .small {
  color: var(--panneau);
  line-height: 1.4;
}
ul.liens-bas {
  list-style: none;
  padding-left: .9rem;
}
ul.liens-bas li {
  margin-left: 0;
}
/* Carte dédiée au bloc audio (n'impacte pas .liens-bas) */
.encadre-audio {
  max-width: 720px;
  margin: 1rem auto 0.8rem;
  padding: 1.2rem 1.2rem 1.1rem;
  background: rgba(248, 245, 240, 0.65);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(90, 46, 24, 0.10);
}
/* Titre au-dessus du player */
.encadre-audio .titre-audio {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.8rem;
}
/* Audio : largeur contrôlée, centrée */
.encadre-audio audio {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: 0.6rem auto 0.3rem;
}
.meditation-label {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.8rem;
}
.retour-accueil {
  display: inline-block;
  padding: .55rem 1rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: rgba(248, 245, 240, .65);
  text-decoration: none;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.retour-accueil:hover, .retour-accueil:focus {
  background: rgba(248, 245, 240, .95);
  border-color: var(--trait-fort);
  transform: translateY(-1px);
  color: var(--accent-fonce);
  text-decoration: none;
}
/* Thèmatiques */
.bloc-theme {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
  text-align: center;
}
.lettrine-thematique {
  color: var(--accent-fonce);
  font-size: 1.4rem;
  font-weight: 400;
}
.contenu-theme {
  display: none;
  margin-top: 0.8rem;
}
/* PDF */
.pdf-link {
  white-space: nowrap;
}
.pdf-link img {
  vertical-align: middle;
}
/* Encadrés */
.accueil {
  background: var(--panneau);
  color: var(--fond-clair);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.h1accueil {
  font-size: 1.1rem;
  line-height: 1.7rem;
  color: var(--fond-clair);
  text-align: justify;
}
.encadre-accueil {
  transition: box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  will-change: box-shadow;
  padding-top: 1.9rem;
  padding-bottom: 1.5rem;
}
.encadre-accueil:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.fond-intro {
  background: var(--panneau-2);
  color: var(--fond-clair);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.fond-intro p, .fond-intro em {
  color: var(--fond-clair);
  line-height: 1.65;
  text-align: justify;
}
.lettrine-encadre {
  font-size: 1.3rem;
  font-weight: 200;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}
.lettrine {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--accent-fonce);
  letter-spacing: 0.5px;
}
.lettrine-capitale {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-fonce);
  letter-spacing: 0.5px;
}
.apostrophe {
  font-size: 1.3rem;
}
.lettrine-theme {
  font-size: 1rem;
  font-weight: 300;
  color: var(--accent-fonce);
  letter-spacing: 0.5px;
}
.theme {
  position: relative;
  height: auto;
}
.themes {
  font-style: italic;
  position: absolute;
  bottom: 0;
  padding-top: 1rem;
}
.acces-themes {
  background-color: #FFFFFF;
  padding: 0.5rem;
  background: #FFFFFF;
  border-radius: 10px;
  border: 2px ridge var(--accent-fonce);
  -webkit-box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
  box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
}
.encadre-texte {
  position: relative;
  height: 30rem;
  padding: 1rem;
  padding-bottom: 3.2rem;
  border: 1.5px ridge var(--panneau);
  margin: 0.5rem;
  margin-bottom: 2.5rem;
  border-radius: 10px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
  box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
}
.encadre-racines {
  height: 30rem;
  padding: 1rem;
  padding-bottom: 0.1rem;
  border: 2px ridge var(--accent-fonce);
  margin: 0.5rem;
  margin-bottom: 2.5rem;
  border-radius: 10px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
  box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
}
.encadre-page {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 1.6rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(90, 46, 24, .08);
}
.encadre-thematiques {
  padding: 1rem;
  padding-bottom: 0.1rem;
  border: 1.5px ridge var(--panneau);
  margin: 0.5rem;
  border-radius: 10px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
  box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
}
.row-thematiques {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.box-thematiques {
  flex: 1;
  flex-basis: 20%;
  min-width: 20%;
  padding: 20px;
  background-color: #FFFFFF;
  text-align: left;
}
.theme-haut {
  padding-top: 3rem;
}
/* Sommaire citations */
.sommaire-sections {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  text-align: center;
  margin-top: 1rem;
}
.sommaire-sections a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background-color: var(--accent-fonce);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.sommaire-sections a:hover {
  background-color: var(--panneau);
}
/* Encadré haut page */
.encadre-haut-page {
  padding: 1rem;
  padding-bottom: 0.1rem;
  border: 1.5px ridge var(--panneau);
  margin: 0.5rem;
  border-radius: 10px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
  box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
}
/* Encadre acces */
.encadre-acces {
  background: rgba(248, 245, 240, .72);
  border: 1px solid rgba(196, 154, 108, .18);
  border-top: 3px solid rgba(196, 154, 108, .35);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(196, 154, 108, .15), 0 8px 20px rgba(0, 0, 0, .06), inset 0 0 25px rgba(196, 154, 108, .08);
}
.encadre-acces h3 {
  border-bottom: 1px solid rgba(196, 154, 108, .22);
  display: inline-block;
  padding-bottom: .25rem;
}
.encadre-acces ul a.type1 {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(196, 154, 108, .12);
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.encadre-acces ul a.type1:hover, .encadre-acces ul a.type1:focus {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(196, 154, 108, .35);
  transform: translateY(-1px);
  text-decoration: none;
}
.liste-themes li {
  margin: 0.35rem 0;
}
/* Boutons / liens ovales */
.btn-retour {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  color: rgba(139, 94, 59, 0.8);
  border: 1px solid rgba(139, 94, 59, 0.35);
  border-radius: 4px;
}
.btn-retour:hover {
  background: rgba(139, 94, 59, 0.08);
  color: rgba(139, 94, 59, 1);
}
.toggle-titre, .liste-themes a {
  display: inline-block;
  background: #ffffff;
  color: var(--texte-secondaire);
  padding: .32rem .75rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(196, 154, 108, .18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.toggle-titre:hover, .toggle-titre:focus, .liste-themes a:hover, .liste-themes a:focus {
  background: rgba(248, 245, 240, .95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(196, 154, 108, .28);
  transform: translateY(-1px);
  text-decoration: none;
}
.toggle-titre {
  width: 150px;
}
.toggle-titre[aria-expanded="true"] {
  background: rgba(248, 245, 240, .98);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08), inset 0 0 0 2px rgba(196, 154, 108, .32);
  transform: translateY(-1px);
}
.toggle-titre[aria-expanded="true"]::after {
  content: "\00a0\00a0—";
  opacity: .55;
}
.hr-intro {
  width: 60px;
  height: 1px;
  margin: 1.2rem auto;
  border: none;
  background: var(--trait-fort);
}
.separateur-spirituel {
  display: block;
  text-align: center; /* centre le symbole */
  font-size: 1.2rem;
  color: rgba(139, 94, 59, .60);
  margin: 2rem auto 2.2rem; /* centre le bloc + espace */
  line-height: 1;
}
/* Photo à droite dans les encadrés (bibliographie, etc.) */
.theme .photo-right {
  float: right;
  margin: 0.2rem 0 0.6rem 1rem; /* respiration à gauche de l'image */
  padding-left: 0 !important; /* neutralise pl-3 si ça gêne */
}
.theme .photo-right img {
  display: block; /* évite les petits décalages inline */
}
.encadre-page iframe {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  background: #fff;
}
/* Images / photos */
.photo-ligne {
  clear: none;
  padding-top: 2%;
  padding-bottom: 2%;
}
.photo-left {
  padding-top: 3%;
  float: left;
}
.photo-left-portrait {
  float: left;
}
.photo-right {
  float: right;
}
.photo-left2 {
  padding-top: 1%;
  float: left;
  padding-left: 3rem;
  padding-right: 3rem;
}
.encadre-pdf {
  padding-top: 1rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1.2px ridge var(--panneau);
  border-radius: 10px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
  box-shadow: 0px 7px 21px rgba(0, 0, 0, .10);
}
.numeros {
  text-align: center;
}
/* Player */
.player {
  padding: 0.9rem 1.5rem;
  color: #FFFFFF;
  background-color: var(--panneau);
  font-size: 1rem;
  border-radius: 1rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* + */
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.indice {
  vertical-align: super;
  font-size: 0.7rem;
  font-weight: bolder;
}
/* Lisere / traits */
.lisere {
  border-left: thin solid var(--panneau);
}
.lisere-soft {
  border-left: 3px solid rgba(196, 154, 108, .50);
  padding-left: 1rem;
  margin-left: .15rem;
  background: rgba(248, 245, 240, .35);
  border-radius: 10px;
  padding-top: .35rem;
  padding-bottom: .35rem;
}
hr {
  width: 50%;
  background-color: var(--trait-fort);
  height: 0.02rem;
  border: none;
}
.hr-court {
  margin-left: 40%;
  margin-right: 40%;
  width: auto;
  background-color: var(--trait-fort);
  height: 1px;
  border: none;
}
.saint-bonnet {
  float: right;
}
.auteur {
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(139, 94, 59, 0.75); /* brun terreux adouci */
}
.chapitre {
  font-size: 1.3rem;
  font-weight: 500;
}
/* wrapper */
.wrapper {
  padding-right: -1rem;
  padding-left: -1rem;
}
img, embed, object, video {
  letter-spacing: normal;
}
/* =========================================
   iFrames – règles générales
   ========================================= */
/* Images et objets en pleine largeur */
iframe img.full, object.full, .main img, .main object {
  width: 100%;
}
/* iFrames plein format (vidéos, booking, etc.) */
.full-paysage iframe, .full-portrait iframe, .booking iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Conteneurs ratio */
.full-paysage {
  position: relative;
  padding-bottom: 60%;
  padding-top: 1.5rem;
  height: 0;
}
.full-portrait {
  position: relative;
  padding-bottom: 100%;
  padding-top: 1.5rem;
  height: 0;
}
.responsive-iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 3rem;
  height: 0;
  overflow: hidden;
}
.responsive-iframe-container iframe, .vresponsive-iframe-container object, .vresponsive-iframe-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.small-container {
  scroll-behavior: auto;
}
/* =========================================
   Apparence iframe dans les pages (général)
   ========================================= */
.encadre-page iframe {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  background: #fff;
}
/* =========================================
   PDF embarqués — exception contrôlée
   ========================================= */
/* Conteneur PDF : pas de ratio forcé */
.encadre-page .full-portrait {
  position: relative;
  height: auto;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
/* iFrame PDF : hauteur réelle et lisible */
.encadre-page .full-portrait iframe {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 900px;
  border: none;
  display: block;
}
/* --------- Bootstrap (couleurs uniquement) --------- */
.navbar-custom .nav-item.active .nav-link, .navbar .nav-item:hover .nav-link, .dropdown-menu .dropdown-item:hover {
  background-color: transparent;
}
.dropdown-menu {
  background-image: -webkit-linear-gradient(263deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  background-image: -moz-linear-gradient(263deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  background-image: -o-linear-gradient(263deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  background-image: linear-gradient(187deg, rgba(255, 255, 255, 1.00) 55.87%, rgba(110, 118, 232, 1.00) 100%);
  color: var(--panneau);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  background-color: #AFB4F8;
  color: var(--panneau);
}
.navbar .navbar-nav .nav-link, .dropdown-menu, .nav-tabs:active {
  color: var(--panneau);
}
.navbar-nav > li {
  padding-right: 0rem;
}
/* texte dropdown */
.dropdown-menu > li > a {
  color: var(--panneau);
  font-size: 1rem;
}
.dual-collapse2 {
  color: var(--panneau);
  background-color: transparent;
}
.navbar-custom .nav-item.active .nav-link, .navbar .nav-item:hover .nav-link, .dropdown-menu .dropdown-item:hover {
  color: var(--panneau);
  font-size: 1rem;
}
/* liens nav */
.navbar-default .navbar-nav > li > a {
  color: var(--panneau);
  font-size: 1rem;
}
.navbar .navbar-nav .nav-link:focus {
  color: var(--panneau);
}
/* accents hover */
.navbar-custom .nav-item.active .nav-link, .navbar .nav-item:hover .nav-link, .dropdown-menu .dropdown-item:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
  color: var(--accent-fonce);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: var(--accent-fonce);
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: var(--accent-fonce);
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: var(--panneau);
  background-color: transparent;
}
/* ==============================
   Focus NAV (hamburger / mobile)
   ============================== */
/* Supprime le gros halo/ombre Bootstrap */
.navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link:active, .navbar .navbar-nav .nav-link:focus-visible {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}
/* Focus visible */
.navbar .navbar-nav .nav-link:focus-visible {
  color: var(--accent-fonce);
  border-radius: 6px;
  outline: 2px solid var(--trait-fort);
  outline-offset: 2px;
}
.navbar .navbar-nav .nav-link:hover {
  color: var(--accent-fonce);
}
/* ==============================
   Hamburger : cadre gris foncé
   ============================== */
.navbar-toggler {
  border: 1px solid rgba(60, 45, 35, .45); /* gris brun foncé */
  box-shadow: none;
}
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: rgba(60, 45, 35, .65);
}
/* Focus liens nav : discret et lisible */
.navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link:focus-visible {
  outline: none;
  box-shadow: none;
  background-color: transparent;
  color: var(--accent-fonce);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
/* --------- Padding / margin --------- */
.padding-top10 {
  padding-top: 0.625rem;
  height: 100%;
}
.padding-top20 {
  padding-top: 1.25rem;
  height: 100%;
}
.padding-top40 {
  padding-top: 2.50rem;
  height: 100%;
}
.padding-top60 {
  padding-top: 3.75rem;
  height: 100%;
}
.padding-top80 {
  padding-top: 5rem;
  height: 100%;
}
.padding-top110 {
  padding-top: 6.875rem;
  height: 100%;
}
.padding-top120 {
  padding-top: 7.5rem;
  height: 100%;
}
.padding-top130 {
  padding-top: 8.125rem;
  height: 100%;
}
.padding-bottom20 {
  padding-bottom: 1.25rem;
  height: 100%;
}
.padding-bottom40 {
  padding-bottom: 2.50rem;
  height: 100%;
}
.padding-bottom80 {
  padding-bottom: 5rem;
  height: 100%;
}
.padding-bottom120 {
  padding-bottom: 7.5rem;
  height: 100%;
}
.margin-top20 {
  margin-top: 1.25rem;
}
.margin-top40 {
  margin-top: 2.50rem;
}
.margin-top60 {
  margin-top: 3.75px;
}
/* ===== Page avec Pdf : image à  gauche + PDF sur toute la largeur ===== */
.theme .photo-left {
  float: left;
  margin: 0.2rem 1rem 0.6rem 0; /* respiration à  droite + en bas */
}
/* 2) Le paragraphe "Télécharger/lire le PDF" doit revenir sous le bloc flottant */
.theme p.text-right {
  clear: both; /* Reprend la largeur complète */
}
/* 3) Le label "Thème : ..." doit rester en bas mais sans casser la largeur */
.theme .themes {
  left: 1rem;
  right: 1rem;
  width: auto;
}
/* =========================================================
   MEDIA QUERIES (fusion + ordre)
   ========================================================= */
/* 2 colonnes desktop */
@media (min-width: 992px) {
  .liste-themes {
    column-count: 2;
    column-gap: 2rem;
    text-align: left;
  }
  .liste-themes li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  .liste-themes a.type1 {
    width: 100%;
  }
}
/* Desktop intermédiaire */
@media (min-width: 900px) and (max-width: 1200px) {
  #entete::before {
    left: 28px;
    width: 100px;
    height: 100px;
  }
  #zone-1 {
    top: calc(54% - (100px / 2));
    width: calc(28px + 100px + 25px);
    height: 100px;
  }
}
/* <=1050 */
@media (max-width: 1050px) {
  #telephone {
    font-size: 0.75rem;
  }
  .navbar-toggler {
    position: relative;
    z-index: 20;
  }
  .nav-link {
    font-size: 0.9rem;
  }
  h1 {
    font-size: 1.3rem;
  }
  h2 {
    font-size: 1.1rem;
  }
  h3 {
    font-size: 1rem;
  }
  h4 {
    font-size: 0.813rem;
  }
  h5 {
    font-size: 0.75rem;
  }
  h6 {
    font-size: 0.688rem;
  }
  .encadre-racines {
    height: 37rem;
  }
}
/* iPad/tablettes : 1 seul bloc */
@media (min-width: 768px) and (max-width: 1024px) {
  .navbar .navbar-nav.nav-tabs .nav-link {
    padding: .25rem .40rem;
  }
  #entete::before {
    left: 30px;
    width: 90px;
    height: 90px;
    opacity: 0.95;
    top: 40%;
  }
  #zone-1 {
    top: calc(40% - (90px / 2));
    width: calc(30px + 90px + 20px);
    height: 90px;
  }
}
/* <= 768px (garder ce qui n'entre pas en conflit avec le bloc hamburger ci-dessous) */
@media (max-width: 768px) {
  .navbar-nav .nav-link {
    font-size: 0.8rem;
  }
  .encadre-page .full-portrait iframe {
    height: 75vh;
    min-height: 500px;
  }
}
/* <=650 : fusion */
@media (max-width: 650px) {
  .chemins-eveil {
    letter-spacing: 0.2rem;
    font-style: normal;
    padding-top: 0.7rem;
    padding-left: 1rem;
    font-size: 1rem;
  }
  .titre {
    margin-top: 8%;
  }
  .row-thematiques {
    flex-direction: column;
    gap: 10px;
  }
  .box-thematiques {
    flex-basis: 100%;
    min-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  .theme-haut {
    padding-top: 0;
  }
  .tiret {
    visibility: hidden;
  }
  .encadre-texte {
    height: auto;
  }
  .encadre-racines {
    height: auto;
  }
  .saint-bonnet {
    float: none;
  }
  .photo-left2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .photo-ligne {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Photos (droite ou gauche) : centrées au-dessus du texte */
  .theme .photo-right, .theme .photo-left {
    float: none !important;
    clear: both;
    display: block;
    text-align: center;
    margin: 0 auto 1rem;
    padding-left: 0 !important; /* neutralise pl-3 */
    padding-right: 0 !important;
  }
  .theme .photo-right img, .theme .photo-left img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }
}
/* <=600 */
@media (max-width: 600px) {
  footer {
    font-size: 0.8rem;
  }
}
/* <=576 */
@media (max-width: 576px) {
  .encadre-acces {
    box-shadow: 0 0 0 1px rgba(196, 154, 108, .12), 0 6px 14px rgba(0, 0, 0, .05), inset 0 0 18px rgba(196, 154, 108, .06);
  }
  .dropdown-menu .dropdown-item {
    font-size: 0.95rem;
    padding: 6px 12px;
  }
}
/* <=480 */
@media (max-width: 480px) {
  #entete::before {
    left: 22px;
    width: 70px;
    height: 70px;
  }
  #zone-1 {
    top: calc(35% - 35px);
    width: calc(22px + 70px + 15px);
    height: 70px;
  }
  #entete .titre-centre {
    max-width: 92%;
  }
  .texte-long {
    text-align: left;
  }
}
/* switch big/small */
@media (max-width: 738px) {
  .big-container {
    display: none;
  }
}
@media (min-width: 738px) {
  .small-container {
    display: none;
  }
}
/* =========================================================
   HAMBURGER / NAV MOBILE — version consolidée (<= 767.98px)
   ========================================================= */
@media (max-width: 767.98px) {
  header, #entete, header .bandeau {
    position: relative;
  }
  header nav.navbar {
    position: relative;
    padding: .25rem 4.2rem 1.1rem 0;
    align-items: flex-start;
  }
  header nav.navbar .navbar-toggler {
    position: absolute;
    top: .35rem;
    right: .75rem;
    z-index: 40;
    margin: 0;
  }
  .navbar-collapse.collapse {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
  }
  .navbar-collapse.collapse.show {
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
  }
  header .navbar-collapse {
    margin-top: .35rem;
  }
  header .navbar-nav {
    padding-left: 0;
    margin-left: 0;
  }
  header .navbar-nav.nav-tabs {
    padding-left: 1rem;
  }
  header .navbar-nav.nav-tabs .nav-link {
    font-size: 0.9rem;
    padding: .55rem .9rem .55rem .6rem;
  }
  #entete::before {
    top: 35%;
    left: 25px;
    width: 80px;
    height: 80px;
    opacity: 0.95;
  }
  #zone-1 {
    top: calc(35% - 40px);
    width: calc(25px + 80px + 15px);
    height: 80px;
  }
  .toggle-titre {
    font-size: 1.1rem;
  }
  .fond-intro p, .fond-intro em {
    text-align: left;
  }
  .h1accueil {
    text-align: left;
  }
}