/*
Theme Name: L'Heure de la Prière
Theme URI: https://heuredelapriere.com
Author: L'Heure de la Prière
Description: Thème sur mesure du ministère L'Heure de la Prière. Les pages sont faites de blocs natifs, modifiables dans l'éditeur.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heure-de-la-priere
*/

/* ── Jetons (couleurs prélevées sur le logo et la bannière de la chaîne) ── */
:root {
  --soleil: #FBA328;
  --lueur: #FFE9B8;
  --blanc: #FFFFFF;
  --encre: #111111;
  --encre-douce: #555555;
  --gris-clair: #EFEFEF;
  --creme: #FFF8E7;
  --peche: #F6E0CB;
  --texte-clair: #FFFFFF;
  --texte-clair-doux: rgba(255, 255, 255, .8);
  --filet: rgba(0, 0, 0, .14);
  --aube: linear-gradient(#1B0704 0%, #2E0B04 30%, #6A2208 60%, #C4621A 86%, #F2A03B 100%);
  --titre: "Montserrat", sans-serif;
  --corps: "Poppins", sans-serif;
  --marge: clamp(20px, 5vw, 72px);
  --section: clamp(48px, 5vw, 88px);
  --rayon: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font: 400 18px/1.6 var(--corps);
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
/* WordPress espace automatiquement les blocs voisins : l'espacement est coupé dans theme.json (blockGap) et, en filet,
   ici à spécificité nulle pour ne jamais écraser les marges des composants. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
/* Les conteneurs des blocs Bouton s'effacent : le lien se place comme le bouton de la maquette. */
.wp-block-buttons:not(.actions, .temoignages__suite), .wp-block-button.btn { display: contents; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, blockquote, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; hyphens: none; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6vw, 52px); }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* ── Boutons et liens ── */
.btn > .wp-block-button__link, .btn:not(.wp-block-button) {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; /* le CSS du bloc Bouton étire le lien sur toute la largeur */
  min-height: 46px; padding: 10px 22px;
  font: 600 16px/1.2 var(--titre);
  color: var(--encre); background: var(--soleil);
  border: 2px solid var(--soleil); border-radius: 999px; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn > .wp-block-button__link:hover, .btn:not(.wp-block-button):hover { transform: translateY(-2px); background: var(--lueur); border-color: var(--lueur); }
.btn--grand > .wp-block-button__link, .btn--grand:not(.wp-block-button) { min-height: 58px; padding: 14px 32px; font-size: 17px; }
.btn--ligne > .wp-block-button__link, .btn--ligne:not(.wp-block-button) { background: transparent; color: inherit; border-color: currentColor; }
.btn--ligne > .wp-block-button__link:hover, .btn--ligne:not(.wp-block-button):hover { background: var(--soleil); border-color: var(--soleil); color: var(--encre); }
/* Bouton YouTube : couleurs du site, logo YouTube d'origine */
.btn--youtube > .wp-block-button__link, .btn--youtube:not(.wp-block-button) { gap: 12px; }
.btn--youtube > .wp-block-button__link::before { content: ""; flex: none; width: 30px; aspect-ratio: 28 / 20; background: url(assets/icones/youtube.svg) center / contain no-repeat; }
a.lien, .lien a { font: 600 16px var(--titre); border-bottom: 2px solid var(--soleil); padding-bottom: 3px; transition: border-color .18s ease; }
a.lien:hover, .lien a:hover { border-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.lecture { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--soleil); transition: transform .2s ease; }
.lecture::before { content: ""; border-left: 24px solid var(--encre); border-block: 15px solid transparent; margin-left: 7px; }

/* ── En-tête sur fond blanc ── */
/* L'en-tête reste en haut de l'écran : c'est la balise <header> de la partie de modèle qui colle, sous la barre d'administration. */
.wp-site-blocks > header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20; }
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--marge);
  background: var(--blanc); color: var(--encre);
  box-shadow: 0 1px 0 var(--filet);
}
.marque { display: flex; align-items: center; gap: 12px; white-space: nowrap; font: 700 20px/1.1 var(--titre); letter-spacing: -.03em; }
.marque img { border-radius: 50%; }
.marque .wp-block-site-title { font: inherit; letter-spacing: inherit; }
.marque .wp-block-site-title a { color: inherit; text-decoration: none; }
.wp-block-navigation.menu { font-size: 16px; }
.wp-block-navigation.menu .wp-block-navigation__container { gap: clamp(18px, 2.4vw, 36px); }
.wp-block-navigation.menu a { white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .18s ease, color .18s ease; }
/* Ordinateur : pastille orange au survol, soulignement orange sous la page en cours */
@media (min-width: 901px) {
  .wp-block-navigation.menu .wp-block-navigation__container { gap: clamp(2px, .6vw, 10px); }
  .wp-block-navigation.menu a { position: relative; padding: 8px 14px; border: 0; border-radius: 999px; transition: background-color .2s ease; }
  .wp-block-navigation.menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--soleil); transform: scaleX(0); transition: transform .25s ease; }
  .wp-block-navigation.menu a:hover { background: var(--soleil); }
  .wp-block-navigation.menu a[aria-current]::after { transform: none; }
}
.wp-block-navigation.menu a[aria-current] { border-color: var(--soleil); font-weight: 600; }
.entete .btn > .wp-block-button__link, .entete .btn:not(.wp-block-button) { white-space: nowrap; }
/* Écrans moyens : le logo seul laisse la place aux cinq entrées du menu sur une ligne */
@media (min-width: 901px) and (max-width: 1280px) {
  .marque .wp-block-site-title { display: none; }
  .wp-block-navigation.menu { font-size: 15px; }
  .wp-block-navigation.menu .wp-block-navigation__container { gap: 2px; }
  .wp-block-navigation.menu a { padding-inline: 11px; }
  .wp-block-navigation.menu a::after { left: 11px; right: 11px; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .entete { gap: 12px; }
  .wp-block-navigation.menu { font-size: 14px; }
  .wp-block-navigation.menu a { padding-inline: 8px; }
  .wp-block-navigation.menu a::after { left: 8px; right: 8px; }
}

/* ── Hero : texte à gauche, fondatrice à droite, lever de soleil ── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 52%); align-items: center; min-height: clamp(560px, 82vh, 800px);
  padding: clamp(48px, 6vw, 90px) var(--marge) 0;
  color: var(--texte-clair);
  background: var(--aube);
}
.hero__texte { position: relative; z-index: 4; align-self: center; padding-bottom: clamp(150px, 17vw, 240px); }
.hero h1 { font-size: clamp(38px, 5vw, 78px); line-height: 1; }
.hero__verset { max-width: 26em; margin: 28px 0 36px; font: italic 500 clamp(18px, 1.6vw, 23px)/1.4 var(--titre); color: var(--texte-clair); }
.hero__verset span { display: block; margin-top: 8px; font: 400 16px/1.3 var(--corps); color: var(--texte-clair-doux); }
.hero .btn--ligne > .wp-block-button__link:hover, .hero .btn--ligne:not(.wp-block-button):hover { background: var(--texte-clair); border-color: var(--texte-clair); color: var(--encre); }
.hero__note { margin-top: 26px; font-size: 15px; color: var(--texte-clair-doux); }
/* Halo blanc : un disque clair aux bords fondus dans l'orange du soleil. Une photo sur fond blanc s'y fond sans détourage. */
.hero__visuel { position: absolute; z-index: 2; right: clamp(16px, 5vw, 96px); top: 50%; height: 84%; aspect-ratio: 1; transform: translateY(-54%); }
.hero__visuel::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #FFEA36 0, #FBA328 62%, rgba(251, 163, 40, .55) 76%, rgba(240, 128, 43, .18) 90%, rgba(240, 128, 43, 0) 100%);
}
.hero__halo {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #fff;
  -webkit-mask: radial-gradient(closest-side, #000 86%, transparent 100%);
  mask: radial-gradient(closest-side, #000 86%, transparent 100%);
}
/* La photo remplit le disque ; son fond clair se fond dans le bord du halo. */
.hero__halo .wp-block-image, .hero__halo img { width: 100%; height: 100%; }
.hero__halo img { object-fit: cover; object-position: 50% 0; }
.hero__legende {
  position: absolute; z-index: 5; left: -6%; bottom: 12%;
  padding: 12px 18px; background: var(--blanc); color: var(--encre-douce);
  font-size: 14px; line-height: 1.35; border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
}
.hero__legende strong { display: block; font: 700 16px var(--titre); letter-spacing: -.02em; color: var(--encre); }
/* Collines et croix, puis vague blanche, au bas des sections sur fond de lever de soleil */
.hero::before, .bandeau::before { content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: clamp(160px, 21vw, 300px); background: url(assets/dessins/collines.svg) center bottom / 100% 100% no-repeat; pointer-events: none; }
.hero::after, .bandeau::after { content: ""; position: absolute; z-index: 3; inset: auto 0 -1px 0; height: clamp(60px, 8vw, 120px); background: url(assets/dessins/premier-plan.svg) center bottom / 100% 100% no-repeat; pointer-events: none; }

/* ── Pourquoi ce ministère ── */
.pourquoi { background: var(--blanc); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 100px); align-items: center; padding: clamp(40px, 5vw, 72px) var(--marge) var(--section); }
.pourquoi h2 { font-size: clamp(32px, 4.2vw, 62px); }
.pourquoi p { max-width: 30em; margin-top: 26px; font-size: clamp(18px, 1.5vw, 21px); color: var(--encre-douce); }
.coches { list-style: none; display: grid; }
.coches li { display: flex; align-items: center; gap: 16px; padding: 18px 0; font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--titre); letter-spacing: -.02em; border-bottom: 1px solid var(--filet); }
.coches li:first-child { border-top: 1px solid var(--filet); }
.coches li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gris-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9 15.500l4 4 8-9' fill='none' stroke='%23111111' stroke-width='2.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── Notre mission : blanc pur, phrase en grand, cartes ── */
.mission { padding: var(--section) var(--marge); text-align: center; color: var(--encre); background: var(--creme); }
.mission__intitule { display: inline-block; margin-bottom: 34px; padding: 12px 34px; font: 700 clamp(21px, 2vw, 30px) var(--titre); letter-spacing: -.01em; color: var(--encre); border: 1.5px solid rgba(0, 0, 0, .25); border-radius: 999px; transition: background-color .25s ease, border-color .25s ease; }
.mission__intitule:hover { background: var(--soleil); border-color: var(--soleil); }
.mission__phrase { max-width: 14em; margin-inline: auto; font-size: clamp(36px, 5vw, 78px); line-height: 1.04; }
.mission__cartes { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); margin: clamp(56px, 6vw, 90px) 0 0; padding: 0; text-align: left; }
.mission__carte { display: flex; flex-direction: column; padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px) clamp(24px, 2.4vw, 34px); background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .45); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.mission__carte:hover { transform: translateY(-6px); border-color: rgba(0, 0, 0, .3); box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .5); }
.mission__illustration { aspect-ratio: 4 / 3; margin-bottom: clamp(20px, 2vw, 28px); background: var(--creme); border-radius: 16px; overflow: hidden; }
.mission__illustration .wp-block-image { width: 100%; height: 100%; }
.mission__illustration img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mission__carte:hover .mission__illustration img { transform: scale(1.06); }
.mission__carte h3 { font-size: clamp(20px, 1.6vw, 26px); margin-bottom: 12px; }
.mission__carte > p { flex: 1; font-size: 16px; color: var(--encre-douce); }
/* Verset de chaque action, calé en bas de la carte */
.mission__verset { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--filet); font: italic 500 15px/1.5 var(--titre); color: var(--encre); }
.mission__verset cite { display: block; margin-top: 6px; font: 400 14px var(--corps); font-style: normal; color: var(--encre-douce); }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .anime .mission .mission__phrase { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .anime .mission.est-visible .mission__phrase { opacity: 1; transform: none; }
  .anime .mission .mission__carte { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease; }
  .anime .mission.est-visible .mission__carte { opacity: 1; transform: none; }
  .anime .mission.est-visible .mission__carte:nth-child(1) { transition-delay: .3s, .3s, 0s, 0s; }
  .anime .mission.est-visible .mission__carte:nth-child(2) { transition-delay: .45s, .45s, 0s, 0s; }
  .anime .mission.est-visible .mission__carte:nth-child(3) { transition-delay: .6s, .6s, 0s, 0s; }
  .anime .mission.est-visible .mission__carte:nth-child(4) { transition-delay: .75s, .75s, 0s, 0s; }
  .anime .mission .mission__illustration img { opacity: 0; transform: scale(1.2); transition: opacity .6s ease, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
  .anime .mission.est-visible .mission__illustration img { opacity: 1; transform: none; }
  .anime .mission.est-visible .mission__carte:nth-child(1) .mission__illustration img { transition-delay: .6s; }
  .anime .mission.est-visible .mission__carte:nth-child(2) .mission__illustration img { transition-delay: .75s; }
  .anime .mission.est-visible .mission__carte:nth-child(3) .mission__illustration img { transition-delay: .9s; }
  .anime .mission.est-visible .mission__carte:nth-child(4) .mission__illustration img { transition-delay: 1.05s; }
  /* Une fois apparues, les cartes sont mises en avant à tour de rôle : la carte se soulève, son bord s'allume et sa photo avance. Le survol met le cycle en pause. */
  .anime .mission.est-visible .mission__carte { animation: mission-tour 12s ease-in-out 1.8s infinite; }
  .anime .mission.est-visible .mission__carte:nth-child(2) { animation-delay: 4.8s; }
  .anime .mission.est-visible .mission__carte:nth-child(3) { animation-delay: 7.8s; }
  .anime .mission.est-visible .mission__carte:nth-child(4) { animation-delay: 10.8s; }
  .anime .mission.est-visible .mission__illustration img { animation: mission-zoom 12s ease-in-out 1.8s infinite; }
  .anime .mission.est-visible .mission__carte:nth-child(2) .mission__illustration img { animation-delay: 4.8s; }
  .anime .mission.est-visible .mission__carte:nth-child(3) .mission__illustration img { animation-delay: 7.8s; }
  .anime .mission.est-visible .mission__carte:nth-child(4) .mission__illustration img { animation-delay: 10.8s; }
  .anime .mission .mission__cartes:hover .mission__carte, .anime .mission .mission__cartes:hover img { animation-play-state: paused; }
}
@media (max-width: 900px) { .mission__cartes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mission__cartes { grid-template-columns: 1fr; } }

/* ── Votre place ici : photo ronde dans une forme organique orange, grand titre ── */
.place { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; padding: var(--section) var(--marge); background: var(--blanc); }
.place__visuel { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; }
.place__visuel::before { content: ""; position: absolute; inset: 0; background: #6A2208; border-radius: 47% 53% 41% 59% / 56% 41% 59% 44%; }
.place__photo { position: absolute; inset: 5% 6% 7% 5%; width: 89%; height: 88%; overflow: hidden; border-radius: 52% 48% 55% 45% / 47% 56% 44% 53%; }
.place__photo img { width: 100%; height: 100%; object-fit: cover; }
.place__texte h2 { font-size: clamp(38px, 4.4vw, 72px); line-height: 1.05; }
.place__texte > p { max-width: 30em; margin-top: 24px; font-size: clamp(18px, 1.4vw, 20px); color: var(--encre-douce); }
.place__texte .place__amorce { margin: 32px 0 12px; font: 600 17px var(--titre); color: var(--encre); }
.points { list-style: none; display: grid; gap: 4px; max-width: 30em; margin: 0 0 36px; padding: 0; }
.points li { display: flex; align-items: center; gap: 18px; padding: 12px 0; font: 600 clamp(18px, 1.5vw, 21px)/1.25 var(--titre); letter-spacing: -.02em; }
.points li::before { content: ""; flex: none; width: 48px; height: 48px; background: var(--creme) url(assets/icones/paix.svg) center / 23px no-repeat; border: 1.5px solid var(--soleil); border-radius: 50%; transition: background-color .3s ease, transform .3s ease; }
.points li:nth-child(2)::before { background-image: url(assets/icones/priere.svg); }
.points li:nth-child(3)::before { background-image: url(assets/icones/croissance.svg); }
.points li:hover::before { background-color: var(--soleil); transform: rotate(-8deg) scale(1.06); }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .place__visuel::before { animation: respirer 14s ease-in-out infinite alternate; }
}
@keyframes respirer {
  50% { border-radius: 58% 42% 52% 48% / 44% 57% 43% 56%; transform: rotate(4deg); }
  100% { border-radius: 42% 58% 46% 54% / 53% 45% 55% 47%; transform: rotate(-3deg); }
}

/* ── Témoignages : titre centré, carrousel, navigation à gauche et invitation à droite ── */
.temoignages { padding: var(--section) var(--marge); background: var(--creme); }
.temoignages__tete { max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.temoignages__tete h2 { font-size: clamp(34px, 4vw, 64px); line-height: 1.06; }
.temoignages__tete p { max-width: 36em; margin: 22px auto 0; font-size: clamp(18px, 1.4vw, 20px); color: var(--encre-douce); }
.temoignages__bas { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(20px, 2.4vw, 32px); }
.temoignages__navigation { display: grid; gap: 22px; justify-items: start; }
.temoignages__invitation { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 2.6vw, 36px); background: var(--blanc); border: 1.5px solid var(--soleil); border-radius: 28px; }
.temoignages__invitation h3 { font-size: clamp(21px, 1.8vw, 27px); margin-bottom: 8px; }
.temoignages__invitation p { color: var(--encre-douce); }
.temoignages__invitation .btn > .wp-block-button__link, .temoignages__invitation .btn:not(.wp-block-button) { flex: none; }
.temoignages__invitation .temoignages__validation { display: flex; gap: 10px; align-items: start; margin-top: 14px; font-size: 14px; }
.temoignages__validation::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.400 9.400 8 11 4.600-1.600 8-6 8-11V5l-8-3Zm-1.500 14-4-4 1.400-1.400 2.600 2.600 5.600-5.600L17.500 9l-7 7Z' fill='%23111111'/%3E%3C/svg%3E") center / contain no-repeat; }
.temoignages__liste li { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(28px, 3vw, 40px); background: var(--blanc); border: 1px solid var(--filet); border-radius: 24px; box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .45); transition: transform .3s ease, box-shadow .3s ease; }
.temoignages__liste li:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -38px rgba(0, 0, 0, .5); }
.temoignages__avatar { display: grid; place-items: center; width: 60px; height: 60px; color: var(--encre); background: var(--blanc); border: 1.5px solid var(--soleil); border-radius: 50%; }
.temoignages__avatar::before { content: ""; width: 30px; height: 30px; background: currentColor; -webkit-mask: url(assets/icones/personne.svg) center / contain no-repeat; mask: url(assets/icones/personne.svg) center / contain no-repeat; }
.temoignages__avatar--couple::before { -webkit-mask-image: url(assets/icones/personnes.svg); mask-image: url(assets/icones/personnes.svg); }
.temoignages__liste blockquote { font: italic 500 clamp(17px, 1.3vw, 19px)/1.55 var(--titre); color: var(--encre); }
.temoignages__auteur { padding-top: 18px; border-top: 1px solid var(--filet); font-size: 15px; color: var(--encre-douce); }
.temoignages__auteur b { display: block; font: 700 17px var(--titre); color: var(--encre); }
/* En attendant trois vrais témoignages : l'invitation seule, centrée */
.temoignages__attente { max-width: 980px; margin: 0 auto; }

/* Carrousel : trois témoignages visibles, il avance d'une carte à la fois, sans doublon */
.carrousel, .temoignages__liste--grille { --ecart: clamp(16px, 2vw, 28px); }
.carrousel__fenetre { overflow: hidden; margin: -12px -6px 0; padding: 12px 6px 0; }
.temoignages__liste { list-style: none; display: flex; gap: var(--ecart); margin: 0; padding: 0 0 28px; }
.carrousel__piste.glisse { transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.temoignages__liste li { flex: 0 0 calc((100% - 2 * var(--ecart)) / 3); }
.carrousel__commandes { display: flex; align-items: center; gap: 28px; }
.carrousel__points { display: flex; gap: 10px; }
.carrousel__points button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .18); cursor: pointer; transition: width .3s ease, background .3s ease; }
.carrousel__points button.est-actif { width: 32px; background: var(--soleil); }
.carrousel__fleches { display: flex; gap: 12px; }
.carrousel__bouton { display: grid; place-items: center; width: 52px; height: 52px; font: 600 20px var(--titre); color: var(--encre); background: var(--blanc); border: 1.5px solid var(--filet); border-radius: 50%; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.carrousel__bouton:hover { background: var(--soleil); border-color: var(--soleil); }
@media (max-width: 900px) {
  .temoignages__bas { grid-template-columns: 1fr; }
  .temoignages__invitation { flex-direction: column; align-items: start; }
  .carrousel__fenetre { margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); }
  .temoignages__liste li { flex-basis: min(85vw, 360px); scroll-snap-align: start; }
  .carrousel__commandes { display: none; }
}

/* ── Enseignements (articles) ── */
.enseignements { padding: var(--section) var(--marge); background: var(--blanc); }
.tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.tete > div:first-child { flex: 1 1 320px; }
.tete__texte p { max-width: 40em; margin-top: 12px; color: var(--encre-douce); }
div.enseignements__grille:not(.wp-block-query), .enseignements__grille > .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.article-carte { display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: start; gap: 12px; }
.article-carte__image { grid-area: 1 / 1; position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 16 / 9; background: #222222; margin-bottom: 8px; }
.article-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.article-carte:hover .article-carte__image img { transform: scale(1.05); }
.article-carte__image a { display: block; height: 100%; }
/* Durée de la vidéo, posée sur la miniature (champ de l'article) */
.article-carte__duree { grid-area: 1 / 1; align-self: end; z-index: 1; margin: 0 0 22px 14px; padding: 4px 12px; font-size: 14px; background: rgba(0, 0, 0, .78); color: var(--texte-clair); border-radius: 999px; }
.article-carte__duree:empty, .article-carte__ref:empty { display: none; }
.article-carte__image em, .une__image em { position: absolute; left: 14px; bottom: 14px; padding: 4px 12px; font-style: normal; font-size: 14px; background: rgba(0, 0, 0, .78); color: var(--texte-clair); border-radius: 999px; }
.article-carte__ref { font: 600 15px var(--titre); color: var(--encre); }
.article-carte h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; }
.article-carte h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.article-carte .wp-block-post-excerpt { font-size: 16px; color: var(--encre-douce); }
.article-carte .wp-block-post-excerpt__excerpt { margin: 0; }
.article-carte .btn > .wp-block-button__link, .article-carte .btn:not(.wp-block-button) { margin-top: 8px; }
/* Carte d'article : le bouton reste en bas, quelle que soit la longueur du texte */
.article-carte--texte { display: flex; flex-direction: column; align-items: flex-start; }
.article-carte--texte .btn > .wp-block-button__link, .article-carte--texte .btn:not(.wp-block-button) { margin-top: auto; }
.article-carte[hidden], .wp-block-post[hidden] { display: none; }
/* Vidéo seule : la miniature est un bouton qui lance le lecteur dans la carte, sans quitter le site */
button.article-carte__image { padding: 0; border: 0; cursor: pointer; }
iframe.article-carte__image { border: 0; }
.article-carte__image .lecture { position: absolute; inset: 0; width: 64px; height: 64px; margin: auto; }
.article-carte__image .lecture::before { border-left-width: 18px; border-block-width: 11px; margin-left: 5px; }
.article-carte:hover .article-carte__image .lecture { transform: scale(1.1); }

/* ── Ce qu'ils disent des enseignements (commentaires YouTube) ── */
.avis { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--filet); }
.avis h3 { font-size: clamp(22px, 2vw, 30px); margin-bottom: clamp(20px, 2.4vw, 32px); }
.avis__liste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; }
.avis__item { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(22px, 2.2vw, 30px); background: var(--creme); border-radius: 20px; }
.avis__citation { font: italic 500 17px/1.55 var(--titre); color: var(--encre); }
.avis__auteur { position: relative; padding-left: 44px; font-size: 14px; color: var(--encre-douce); }
.avis__auteur::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; aspect-ratio: 28 / 20; translate: 0 -50%; background: url(assets/icones/youtube.svg) center / contain no-repeat; }
.avis__auteur strong { display: block; font: 700 15px var(--titre); color: var(--encre); }
@media (max-width: 900px) { .avis__liste { grid-template-columns: 1fr; } }

/* ── Demande de prière ── */
.demande {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center;
  margin: var(--section) var(--marge); padding: clamp(40px, 6vw, 96px);
  border-radius: 32px; color: var(--texte-clair);
  background: radial-gradient(90% 120% at 12% 115%, #E0802B 0%, #8A3410 28%, #4E1101 55%, #1B0704 100%);
}
.demande h1 { font-size: clamp(30px, 3.6vw, 52px); }
.demande__texte p { max-width: 26em; margin-top: 16px; color: var(--texte-clair-doux); }
.demande__texte .demande__accroche { margin-top: 26px; font: italic 500 clamp(19px, 1.7vw, 24px)/1.4 var(--titre); color: var(--texte-clair); }
.article__corps blockquote cite, .article__corps blockquote span { display: block; margin-top: 12px; font: 400 16px var(--corps); letter-spacing: 0; opacity: .85; }
.formulaire { display: grid; gap: 8px; padding: clamp(24px, 3vw, 44px); background: var(--creme); color: var(--encre); border-radius: var(--rayon); }
.formulaire label { font: 600 15px var(--titre); margin-top: 10px; }
.formulaire label small { font: 400 14px var(--corps); color: var(--encre-douce); }
.demande__texte .demande__confidentiel {
  position: relative; margin-top: 28px; padding: 16px 20px 16px 60px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 16px; color: var(--texte-clair);
}
.demande__confidentiel::before { content: ""; position: absolute; left: 20px; top: 17px; width: 26px; height: 26px; background: var(--soleil); -webkit-mask: url(assets/icones/cadenas.svg) center / contain no-repeat; mask: url(assets/icones/cadenas.svg) center / contain no-repeat; }
.demande__confidentiel strong { color: var(--soleil); font-weight: 600; }
.formulaire__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire__duo > div { display: grid; gap: 8px; }
.formulaire__aide { margin-top: 14px; padding: 12px 16px; font: 400 14px/1.5 var(--corps); color: var(--encre-douce); background: var(--lueur); border-radius: 12px; }
.formulaire__aide strong { display: block; color: var(--encre); font-weight: 600; }
/* Champ piège anti-spam : invisible pour les humains, rempli par les robots */
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire textarea, .formulaire select {
  width: 100%; padding: 13px 16px; font: 17px var(--corps); color: var(--encre);
  background: var(--blanc); border: 1.5px solid #D9C6AC; border-radius: 12px;
}
.formulaire textarea { resize: vertical; }
/* Message de confirmation : il remplace les champs une fois le formulaire envoyé */
.formulaire__merci { padding: 22px 24px; color: var(--encre-douce); background: var(--blanc); border: 1.5px solid var(--soleil); border-radius: 16px; }
.formulaire__merci strong { display: block; margin-bottom: 6px; font: 700 clamp(20px, 1.7vw, 24px)/1.2 var(--titre); letter-spacing: -.02em; color: var(--encre); }
.formulaire.est-envoye > :not(.formulaire__merci) { display: none; }
.formulaire .case { display: flex; gap: 12px; align-items: start; font: 400 15px/1.5 var(--corps); color: var(--encre-douce); margin-bottom: 12px; }
.formulaire .case input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--encre); }

/* ── Soutien au ministère ── */
.soutien { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1100px; margin: 0 auto var(--section); padding: 18px 18px 18px 30px; background: var(--creme); border-radius: 999px; }
.soutien__texte { position: relative; padding-left: 42px; color: var(--encre-douce); }
.soutien__texte::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; translate: 0 -50%; background: var(--soleil); -webkit-mask: url(assets/icones/coeur.svg) center / contain no-repeat; mask: url(assets/icones/coeur.svg) center / contain no-repeat; }
.soutien strong { color: var(--encre); font-weight: 600; }
.soutien .btn > .wp-block-button__link, .soutien .btn:not(.wp-block-button) { flex: none; }

/* ── Page Posez votre pierre ── */
/* Section 2 : le texte à gauche, la maison de pierres à droite */
.batir { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: var(--section) max(var(--marge), calc(50% - 620px)); }
.batir__texte p { max-width: 31em; margin-top: 22px; font-size: clamp(18px, 1.4vw, 20px); color: var(--encre-douce); }
.batir__texte .batir__place { font: 600 clamp(19px, 1.6vw, 23px)/1.35 var(--titre); letter-spacing: -.02em; color: var(--encre); }
/* La maison : un toit, puis trois rangs de pierres en léger relief qui se soulèvent au survol */
.pierres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 520px); margin-inline: auto; }
/* Le toit : un paragraphe modifiable posé sur le dessin du toit */
.pierres__toit { --i: 7; display: flex; align-items: flex-end; justify-content: center; width: 112%; aspect-ratio: 520 / 122; margin: 0 -6% -2px; padding-bottom: 4.2%; font: 600 clamp(15px, 2.2vw, 24px)/1 var(--titre); color: var(--lueur); background: url(assets/dessins/toit.svg) center / 100% 100% no-repeat; }
.pierres__rang { display: flex; gap: 12px; }
.pierre { flex: 1 1 0; display: grid; place-items: center; min-height: clamp(64px, 7vw, 104px); padding: 0 8px; text-align: center; font: 600 clamp(15px, 1.25vw, 18px) var(--titre); color: var(--encre); border-radius: 18px; box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .13), 0 14px 22px -16px rgba(0, 0, 0, .5); transition: transform .3s ease; }
.pierre:hover { transform: translateY(-5px); }
.pierre--brun { background: #6A2208; color: var(--lueur); }
.pierre--soleil { background: var(--soleil); }
.pierre--lueur { background: var(--lueur); }
.pierre--peche { background: var(--peche); }
.pierre--libre { background: var(--blanc); border: 2px dashed var(--soleil); box-shadow: none; }
/* Ordre de pose des pierres (de bas en haut) */
.pierre--rang-0 { --i: 0; } .pierre--rang-1 { --i: 1; } .pierre--rang-2 { --i: 2; } .pierre--rang-3 { --i: 3; }
.pierre--rang-4 { --i: 4; } .pierre--rang-5 { --i: 5; } .pierre--rang-6 { --i: 6; }
@media (prefers-reduced-motion: no-preference) {
  .pierre--libre { animation: attente 2.4s ease-in-out infinite; }
}
/* Les pierres se posent une à une, de bas en haut, puis le toit, quand la section arrive à l'écran */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .anime .batir.revele:not(.est-visible) :is(.pierre, .pierres__toit) { opacity: 0; }
  .anime .batir.est-visible :is(.pierre, .pierres__toit) { animation: poser .6s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * .15s) backwards; }
  .anime .batir.est-visible .pierre--libre { animation: poser .6s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * .15s) backwards, attente 2.4s ease-in-out infinite; }
}
@keyframes attente { 50% { background: var(--creme); } }
@keyframes poser { from { opacity: 0; transform: translateY(-56px) rotate(-3deg); } }
.raisons cite, .pierre__fin cite, .verset-seul cite { display: block; margin-top: 10px; font: 400 15px var(--corps); font-style: normal; color: var(--encre-douce); }
.raisons { padding: var(--section) var(--marge); background: var(--creme); }
.raisons h2, .facons h2 { text-align: center; }
.raisons__liste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
/* La couleur principale par petites touches : un liseré orange en haut de chaque carte */
.raisons__item { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); background: var(--blanc); border-top: 6px solid var(--soleil); border-radius: 22px; box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .45); }
.raisons h3 { font-size: clamp(20px, 1.7vw, 24px); }
.raisons__item > p { margin: 14px 0 24px; color: var(--encre-douce); }
.raisons__item .wp-block-quote { margin-top: auto; padding: 18px 20px; background: var(--lueur); border-radius: 14px; font: italic 500 16px/1.5 var(--titre); color: var(--encre); }
.facons { padding: var(--section) var(--marge); background: var(--blanc); }
.facons__liste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
.facons__item { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px) clamp(24px, 2.6vw, 34px); border: 1.5px solid var(--gris-clair); border-radius: 22px; }
/* Un dessin par façon d'agir, en haut de la carte (bible ouverte, poignée de main, téléphone) */
.facons__image { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.facons__image .wp-block-image { width: 100%; height: 100%; }
.facons__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.facons__item:hover .facons__image img { transform: scale(1.05); }
.facons h3 { margin-top: 20px; font-size: clamp(20px, 1.7vw, 24px); }
.facons__item p { margin: 12px 0 26px; color: var(--encre-douce); }
.facons__item .btn > .wp-block-button__link, .facons__item .btn:not(.wp-block-button) { margin-top: auto; }
.boutique { padding: var(--section) var(--marge); background: var(--creme); text-align: center; }
.boutique__tete p { max-width: 34em; margin: 16px auto 0; color: var(--encre-douce); }
.boutique__produits { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto clamp(36px, 4vw, 56px); padding: 0; text-align: left; }
.produit { display: flex; flex-direction: column; padding: 14px 14px 24px; background: var(--blanc); border-radius: 22px; }
.produit__visuel { aspect-ratio: 1; margin-bottom: 18px; overflow: hidden; background: var(--gris-clair); border-radius: 14px; }
.produit__visuel .wp-block-image { width: 100%; height: 100%; }
.produit__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.produit:hover .produit__visuel img { transform: scale(1.05); }
.produit .produit__article { margin: 0 6px 4px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-douce); }
.produit h3 { padding: 0 6px; font-size: 18px; line-height: 1.3; text-wrap: pretty; }
.produit > p:not(.produit__article) { margin: 8px 6px 18px; font-size: 15px; color: var(--encre-douce); }
.produit .btn > .wp-block-button__link, .produit .btn:not(.wp-block-button) { margin: auto 6px 0; align-self: flex-start; }
.boutique__note { margin: 16px 0 0; font-size: 14px; color: var(--encre-douce); }
.pierre__fin, .verset-seul { padding: var(--section) var(--marge); text-align: center; }
.pierre__fin blockquote, .verset-seul blockquote { max-width: 24em; margin: 0 auto; font: italic 500 clamp(22px, 2.4vw, 34px)/1.4 var(--titre); color: var(--encre); }
@media (max-width: 900px) {
  .raisons__liste, .facons__liste, .batir { grid-template-columns: 1fr; }
  .boutique__produits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .boutique__produits { grid-template-columns: 1fr; } }

/* ── Page Nos contenus : barre des trois choix (vidéos, enseignements, articles) ── */
.choix { margin-bottom: clamp(32px, 4vw, 52px); }
.choix h2 { margin-bottom: clamp(22px, 2.4vw, 32px); }
.choix__barre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: var(--creme); border-radius: 28px; }
.choix__onglet { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 20px 10px 12px; font: 400 14px/1.4 var(--corps); color: var(--encre-douce); text-align: left; border-radius: 22px; cursor: pointer; transition: background .25s ease, box-shadow .25s ease; }
.choix__onglet:hover { background: rgba(255, 255, 255, .6); }
.choix__onglet[aria-pressed="true"] { background: var(--blanc); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .5); }
.choix__onglet::before { content: ""; flex: none; width: 48px; height: 48px; background: var(--blanc) url(assets/icones/lecture.svg) center / 22px no-repeat; border-radius: 50%; transition: background-color .25s ease, transform .25s ease; }
.choix__onglet--livre::before { background-image: url(assets/icones/livre.svg); }
.choix__onglet--article::before { background-image: url(assets/icones/article.svg); }
.choix__onglet:hover::before { transform: scale(1.06); }
.choix__onglet[aria-pressed="true"]::before { background-color: var(--soleil); }
.choix__texte strong { display: block; font: 700 clamp(17px, 1.4vw, 20px)/1.2 var(--titre); letter-spacing: -.02em; color: var(--encre); }
@media (max-width: 900px) {
  .choix__barre { grid-template-columns: 1fr; border-radius: 24px; }
  .choix__onglet { min-height: 64px; border-radius: 18px; }
}

/* ── Bouton flottant : suivre la chaîne YouTube, sur toutes les pages sauf les pages légales ── */
.flottant > .wp-block-button__link { position: fixed; z-index: 15; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }
/* Téléphone et tablette : un simple rond avec le logo, pour ne pas couvrir le contenu */
@media (max-width: 900px) {
  .flottant > .wp-block-button__link { width: 56px; min-height: 56px; padding: 0; gap: 0; font-size: 0; }
}

/* ── Pied de page ── */
.pied { background: var(--peche); color: var(--encre); padding: clamp(56px, 6vw, 90px) var(--marge) 0; font-size: 16px; }
.pied__grille { display: grid; grid-template-columns: 1.5fr .8fr 1.3fr 1.2fr; gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.pied h2 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 18px; }
.pied__nav { display: grid; gap: 11px; align-content: start; }
.pied__menu .wp-block-navigation__container, .pied__liste .wp-block-post-template { flex-direction: column; align-items: flex-start; gap: 11px; margin: 0; padding: 0; list-style: none; }
.pied__liste .wp-block-post-template { display: grid; }
.pied__liste .wp-block-post-title { font: inherit; letter-spacing: 0; }
.pied__nav a { color: var(--encre-douce); transition: color .18s ease; }
.pied__nav a:hover { color: var(--encre); }
.pied__nav .pied__tous { margin-top: 4px; }
.pied__nav .pied__tous a { color: var(--encre); font-weight: 600; }
.pied__marque > p:not(.pied__soutien), .pied__priere p { margin: 18px 0 22px; max-width: 26em; color: var(--encre-douce); }
.pied__marque { display: flex; flex-direction: column; align-items: flex-start; }
.pied__soutien { margin-top: 16px; font: 600 15px var(--titre); color: var(--encre); }
.pied__soutien a { display: inline-flex; gap: 8px; align-items: center; }
.pied__soutien a::before { content: ""; width: 20px; height: 20px; background: var(--soleil); -webkit-mask: url(assets/icones/coeur.svg) center / contain no-repeat; mask: url(assets/icones/coeur.svg) center / contain no-repeat; }
.pied__soutien a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied__priere { padding: 26px; background: var(--creme); border-radius: var(--rayon); align-self: start; }
.pied__priere p { margin-top: 0; }
.pied__verset { padding: 26px 0; border-top: 1px solid var(--filet); text-align: center; font: italic 500 clamp(17px, 1.5vw, 21px) var(--titre); color: var(--encre); }
.pied__verset span { font: 400 15px var(--corps); margin-left: 10px; color: var(--encre-douce); }
.pied__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 20px 0 26px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--encre-douce); }
.pied__bas a { margin-left: 22px; }
.pied__bas a:hover { color: var(--encre); text-decoration: underline; }

/* ── Page À propos ── */
.ouverture { padding: clamp(48px, 7vw, 110px) var(--marge) clamp(32px, 4vw, 56px); }
.ouverture h1 { font-size: clamp(38px, 6vw, 96px); line-height: 1; max-width: 12em; }
.ouverture p { max-width: 33em; margin-top: 32px; font-size: clamp(18px, 1.5vw, 22px); color: var(--encre-douce); }
/* Haut de page aux couleurs du hero de l'accueil, sans photo ni soleil (À propos, Nos contenus, Témoignages) */
.bandeau { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 5vw, 72px) var(--marge) clamp(190px, 23.6vw, 340px); text-align: center; color: var(--texte-clair); background: var(--aube); }
.bandeau > * { position: relative; z-index: 4; }
.bandeau .mission__intitule { color: var(--texte-clair); border-color: rgba(255, 255, 255, .55); }
.bandeau .mission__intitule:hover { color: var(--encre); border-color: var(--soleil); }
.bandeau h1 { max-width: 11em; margin-inline: auto; font-size: clamp(38px, 6vw, 96px); line-height: 1; }
/* Paragraphe « simple » : WordPress lui donne la seule classe wp-block-paragraph (une classe ajoutée dans l’éditeur crée un espace). */
.bandeau > p:not([class*=" "]), .bandeau > .bandeau__accent { max-width: 34em; margin: 32px auto 0; font-size: clamp(18px, 1.5vw, 22px); color: var(--texte-clair-doux); text-wrap: pretty; }
.bandeau > p:not([class*=" "]) + p { margin-top: 14px; font-weight: 600; color: var(--texte-clair); }
.bandeau .hero__verset { max-width: 30em; margin: 26px auto 0; }
.bandeau .actions { justify-content: center; margin-top: 34px; }
.ap-personne .place__texte h2 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; }
.place__texte > .ap-role { margin: 0 0 12px; font: 600 16px var(--titre); color: var(--encre); }
.ap-etiquette { position: absolute; right: -2%; bottom: 9%; padding: 12px 18px; font-size: 14px; line-height: 1.35; color: var(--encre-douce); background: var(--blanc); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .4); }
.ap-etiquette strong { display: block; font: 700 16px var(--titre); letter-spacing: -.02em; color: var(--encre); }
.ap-personne--inverse .place__visuel::before { background: var(--peche); }
/* Jean : bande beige sur toute la largeur, contenu centré */
.ap-personne--inverse { grid-template-columns: minmax(0, 1fr) minmax(260px, 460px); gap: clamp(40px, 6.6vw, 96px); padding-inline: max(var(--marge), calc(50% - 600px)); background: var(--creme); }
.ap-personne--inverse .place__texte > p:not(.ap-role) { max-width: 36em; }
.ap-personne--inverse .ap-etiquette { right: auto; left: -2%; }
/* L'unité : les deux portraits dans un rond à gauche, le texte et le verset à droite */
.ap-unite { overflow: hidden; display: grid; grid-template-columns: minmax(280px, 500px) minmax(0, 1fr); gap: clamp(40px, 6.6vw, 96px); align-items: center; padding: var(--section) max(var(--marge), calc(50% - 600px)); }
.ap-unite__texte > p { max-width: 36em; margin-top: 16px; color: var(--encre-douce); }
.ap-unite__texte > .ap-unite__accroche { margin-top: 24px; font: 600 clamp(20px, 1.7vw, 25px)/1.35 var(--titre); letter-spacing: -.02em; color: var(--encre); }
.ap-unite__cercle { position: relative; width: 100%; aspect-ratio: 1; }
/* Les deux portraits réunis dans un même rond, séparés par un filet blanc */
.ap-unite__duo { position: absolute; inset: 14%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: hidden; background: var(--blanc); border: 10px solid var(--blanc); border-radius: 50%; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .5); }
.ap-unite__duo .wp-block-image { height: 100%; min-height: 0; }
.ap-unite__duo img { width: 100%; height: 100%; object-fit: cover; }
.ap-anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-anneau text { font: 600 17px var(--titre); text-transform: uppercase; fill: var(--encre); pointer-events: none; }
/* Chaque mot de l'anneau est une zone sensible (posée par app.js) : survolé ou touché, il passe sur fond orange et l'anneau s'arrête */
.ap-fruit { fill: none; stroke: transparent; stroke-width: 28; stroke-linecap: round; pointer-events: stroke; cursor: pointer; outline: none; transition: stroke .2s ease; }
.ap-fruit.est-actif { stroke: var(--soleil); }
.est-en-pause .ap-anneau { animation-play-state: paused; }
/* La notification qui explique le mot : toujours au même endroit, en bas des photos, sans cacher ni les mots ni les visages */
.ap-bulle { position: absolute; z-index: 3; left: 50%; bottom: 17%; translate: -50% 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; width: min(310px, 70%); padding: 16px 18px; color: var(--blanc); background: var(--encre); border-radius: 18px; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s .3s; }
.ap-bulle.est-ouverte { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ap-bulle i { width: 12px; height: 12px; margin-top: 4px; background: var(--soleil); border-radius: 50%; }
.ap-bulle small { display: block; margin-bottom: 5px; font: 600 12px var(--titre); letter-spacing: .06em; text-transform: uppercase; color: var(--soleil); }
.ap-bulle b { display: block; font: 700 18px/1.2 var(--titre); letter-spacing: -.01em; }
.ap-bulle span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .84); }
.ap-unite__verset { max-width: 34em; margin-top: 32px; padding: clamp(20px, 2.2vw, 30px); font: italic 500 clamp(18px, 1.5vw, 21px)/1.5 var(--titre); color: var(--encre); background: var(--creme); border-radius: 20px; }
.ap-unite__verset strong { display: block; margin-bottom: 10px; font: 600 14px var(--titre); font-style: normal; color: var(--encre-douce); }
/* La liste des fruits reste le contenu modifiable ; app.js en tire l'anneau, puis la masque. */
.ap-fruits { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fruits.est-pret .ap-fruits { display: none; }
.ap-unite__verset cite { display: block; margin-top: 12px; font: 400 15px var(--corps); font-style: normal; color: var(--encre-douce); }
@media (min-width: 901px) {
  .ap-personne--inverse .place__visuel { order: 2; }
}
@media (max-width: 900px) {
  .ap-personne--inverse, .ap-unite { grid-template-columns: 1fr; }
  .ap-unite__cercle { width: min(100%, 420px); margin-inline: auto; }
  .ap-bulle { bottom: 20%; gap: 10px; padding: 12px 14px; }
  .ap-bulle span { font-size: 14px; }
  .ap-etiquette, .ap-personne--inverse .ap-etiquette { left: auto; right: -6%; }
}
.appel { padding: var(--section) var(--marge); text-align: center; }
.appel h2 { max-width: 14em; margin-inline: auto; }
.appel p { max-width: 30em; margin: 26px auto 36px; color: var(--encre-douce); text-wrap: balance; }
.appel .actions { justify-content: center; }
/* Titre en vague : les mots restent entiers à la ligne, chaque lettre peut bouger seule */
.vague__mot { display: inline-block; white-space: nowrap; }
.vague__mot span { display: inline-block; white-space: pre; }

/* ── Page d'un enseignement (article) ── */
.article { padding: clamp(40px, 6vw, 90px) var(--marge) 0; }
.article__tete, .article__corps { max-width: 760px; margin-inline: auto; }
/* Pages d'un enseignement et d'un article : le titre a la même largeur que la vidéo ou la grande image */
.single-post .article__tete { max-width: 1100px; }
.article__image { width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; margin: clamp(32px, 4vw, 56px) auto; object-fit: cover; border-radius: 28px; }
.article__ref { font: 600 17px var(--titre); color: var(--encre); margin-bottom: 14px; }
.article h1 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; }
.article__meta { margin-top: 20px; color: var(--encre-douce); }
.article__video { position: relative; display: block; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; margin: clamp(32px, 4vw, 56px) auto; padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: #111111; cursor: pointer; }
.article__video img { width: 100%; height: 100%; object-fit: cover; }
.article__video .lecture { position: absolute; inset: 0; margin: auto; }
.article__video:hover .lecture { transform: scale(1.1); }
.article__corps > * + * { margin-top: 22px; }
.article__corps h2 { font-size: clamp(24px, 2.4vw, 34px); margin-top: 48px; }
.article__corps blockquote { padding-left: 24px; border-left: 4px solid var(--soleil); font: italic 500 clamp(19px, 1.8vw, 24px)/1.45 var(--titre); letter-spacing: -.01em; color: var(--encre); }
.article__avertissement { padding: 12px 16px; font-size: 15px; background: var(--gris-clair); border-radius: 12px; color: var(--encre-douce); }
.article__retour { margin-bottom: 28px; font: 600 15px var(--titre); }
.article__retour a { color: var(--encre-douce); transition: color .18s ease; }
.article__retour a:hover { color: var(--encre); }
/* Pages légales : même gabarit de lecture, avec des listes */
/* Deux colonnes sous la vidéo, sur sa largeur : le texte à la largeur idéale de lecture, et une colonne qui reste visible pendant qu'on lit */
.article__colonnes { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 320px); justify-content: space-between; align-items: start; gap: clamp(32px, 5vw, 60px); max-width: 1100px; margin: 0 auto var(--section); }
.article__colonnes .article__corps { max-width: none; margin: 0; font-size: clamp(18px, 1.3vw, 19px); line-height: 1.75; }
.article__cote { position: sticky; top: 104px; display: grid; gap: 16px; }
.article__carte { display: block; padding: 24px; background: var(--creme); border-radius: var(--rayon); }
.article__carte h2 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; }
.article__carte p { margin: 10px 0 18px; font-size: 16px; color: var(--encre-douce); }
.article__carte--suivant a { display: block; }
.article__carte--suivant { background: var(--blanc); border: 1.5px solid var(--gris-clair); transition: border-color .2s ease; }
.article__carte--suivant:hover { border-color: var(--soleil); }
.article__carte--suivant .post-navigation-link__label { display: block; margin-bottom: 12px; font: 600 14px var(--titre); color: var(--encre-douce); }
.article__carte--suivant .post-navigation-link__title { font: 700 17px/1.3 var(--titre); letter-spacing: -.02em; }
.article__partage > .wp-block-button__link { gap: 10px; width: 100%; }
.article__partage > .wp-block-button__link::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url(assets/icones/partage.svg) center / contain no-repeat; mask: url(assets/icones/partage.svg) center / contain no-repeat; }
@media (max-width: 900px) {
  .article__colonnes { grid-template-columns: 1fr; }
  .article__cote { position: static; }
}
.article__corps:last-child { padding-bottom: var(--section); }
.article__tete + .article__corps { margin-top: clamp(32px, 4vw, 56px); }
.article__corps ul { padding-left: 22px; }
.article__corps li + li { margin-top: 10px; }

/* ── Pages internes : étapes numérotées ── */
.ouverture .actions { margin-top: 36px; }
.etapes { padding: var(--section) var(--marge); background: var(--creme); }
.etapes h2, .faq h2 { text-align: center; }
.etapes__liste { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
.etapes__item { counter-increment: etape; padding: clamp(24px, 2.6vw, 36px); background: var(--blanc); border-radius: 22px; }
.etapes__item::before { content: counter(etape); display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; font: 700 20px var(--titre); background: var(--creme); border: 1.5px solid var(--soleil); border-radius: 50%; }
.etapes h3 { font-size: clamp(20px, 1.7vw, 24px); }
.etapes__item p { margin-top: 12px; color: var(--encre-douce); }
/* Étapes illustrées (page Témoignages) : un dessin dans un panneau beige en haut de chaque carte, à la place du numéro */
.etapes--dessins .etapes__item { padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px) clamp(24px, 2.6vw, 34px); box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .45); }
.etapes--dessins .etapes__item::before { content: none; }
.etapes__dessin { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 22px; padding: 9%; background: var(--creme); border-radius: 16px; overflow: hidden; }
.etapes__dessin .wp-block-image { width: 100%; height: 100%; min-height: 0; }
.etapes__dessin img { width: 100%; height: 100%; min-height: 0; object-fit: contain; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.etapes--dessins .etapes__item:hover .etapes__dessin img { transform: scale(1.06); }
.etapes__numero { display: block; margin-bottom: 6px; font: 600 14px var(--titre); color: var(--encre-douce); }

/* ── Pages internes : questions fréquentes ── */
.faq { padding: var(--section) var(--marge); }
.faq__liste { max-width: 860px; margin: clamp(32px, 4vw, 56px) auto 0; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq details:first-child { border-top: 1px solid var(--filet); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--titre); letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; font: 400 26px/1 var(--corps); background: var(--creme); border: 1.5px solid var(--soleil); border-radius: 50%; transition: transform .25s ease, background .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--soleil); }
.faq details p { max-width: 44em; padding: 0 60px 26px 0; color: var(--encre-douce); }

/* ── Page Nos contenus : contenu à la une ── */
.une { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin: clamp(24px, 3vw, 48px) var(--marge) 0; padding: clamp(16px, 1.8vw, 26px); background: var(--creme); border-radius: 32px; }
.une__visuel { position: relative; }
.une__image { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 22px; aspect-ratio: 16 / 9; background: #222222; cursor: pointer; }
.une__image .lecture { position: absolute; inset: 0; width: 96px; height: 96px; margin: auto; }
.une:hover .une__image .lecture { transform: scale(1.1); }
.une__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.une:hover .une__image img { transform: scale(1.04); }
.une__texte { display: grid; justify-items: start; gap: 14px; padding: 12px clamp(8px, 2vw, 32px) 12px 0; }
/* Étiquette « À la une » : posée à cheval sur le coin de la vidéo, pour y amener le regard */
.une__etiquette { position: absolute; z-index: 2; top: -18px; left: clamp(14px, 2vw, 28px); display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; font: 700 clamp(15px, 1.3vw, 18px) var(--titre); letter-spacing: -.01em; color: var(--encre); background: var(--soleil); border-radius: 999px; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55); }
.une__etiquette i { width: 10px; height: 10px; background: var(--blanc); border-radius: 50%; }
.une__sur { font: 600 15px var(--titre); color: var(--encre-douce); }
/* Bouton de lecture : petit triangle devant le texte */
.btn--lecture > .wp-block-button__link::before, .btn--lecture:not(.wp-block-button)::before { content: ""; margin-right: 12px; border-left: 13px solid currentColor; border-block: 8px solid transparent; }
.une h2 { font-size: clamp(28px, 3vw, 46px); line-height: 1.08; }
.une .btn > .wp-block-button__link, .une .btn:not(.wp-block-button) { margin-top: 10px; }

/* ── Page Contact : texte à gauche, formulaire à droite ── */
.contact { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 100px); align-items: start; padding: var(--section) var(--marge); }
.contact { padding-top: clamp(16px, 2vw, 32px); }
.contact__voies { display: grid; gap: 14px; }
.contact__voie { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 90px; padding: 20px 22px 20px 88px; font-size: 16px; color: var(--encre-douce); border: 1.5px solid var(--gris-clair); border-radius: 20px; transition: border-color .2s ease, transform .2s ease; }
.contact__voie a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.contact__voie:has(a):hover { border-color: var(--soleil); transform: translateY(-2px); }
.contact__voie::before { content: ""; position: absolute; left: 22px; top: 50%; width: 48px; height: 48px; translate: 0 -50%; background: var(--creme) url(assets/icones/priere.svg) center / 23px no-repeat; border: 1.5px solid var(--soleil); border-radius: 50%; }
.contact__voie--personne::before { background-image: url(assets/icones/personne.svg); }
.contact__voie--youtube::before { background-image: url(assets/icones/youtube.svg); background-size: 27px; }
.contact__voie--enveloppe::before { background-image: url(assets/icones/enveloppe.svg); }
.contact__voie strong { display: block; font: 700 18px var(--titre); letter-spacing: -.02em; color: var(--encre); }

/* ── Page Témoignages : filtres par thème et grille ── */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(28px, 3vw, 44px); }
.filtres button { min-height: 44px; padding: 8px 20px; font: 600 15px var(--titre); color: var(--encre); background: var(--blanc); border: 1.5px solid var(--filet); border-radius: 999px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.filtres button:hover, .filtres button[aria-pressed="true"] { background: var(--soleil); border-color: var(--soleil); }
.temoignages__liste--grille { display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 0; }
.temoignages__liste li[hidden] { display: none; }
.temoignages__suite { margin-top: clamp(28px, 3vw, 44px); text-align: center; }
.temoignages__suite [hidden] { display: none; }

/* ── Animations (grand écran uniquement, coupées si l'utilisateur préfère moins de mouvement) ── */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero__texte > * { animation: monter .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__texte > :nth-child(2) { animation-delay: .15s; }
  .hero__texte > :nth-child(3) { animation-delay: .3s; }
  .hero__texte > :nth-child(4) { animation-delay: .45s; }
  .hero__legende { animation: monter 1.2s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .anime :is(.apparait, .apparait-zoom) { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .anime :is(.apparait, .apparait-zoom).est-visible { opacity: 1; transform: none; }
  /* Carte qui grandit en apparaissant */
  .anime .apparait-zoom { transform: translateY(24px) scale(.94); }
  /* Éléments d'une liste qui arrivent l'un après l'autre */
  .anime .cascade > * { opacity: 0; transform: translateX(32px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .anime .cascade.est-visible > * { opacity: 1; transform: none; }
  .anime .cascade.est-visible > :nth-child(2) { transition-delay: .12s; }
  .anime .cascade.est-visible > :nth-child(3) { transition-delay: .24s; }
  .anime .cascade.est-visible > :nth-child(4) { transition-delay: .36s; }
  /* Témoignages : les cartes montent l'une après l'autre, les icônes surgissent, l'encart arrive de la droite */
  .anime .carrousel__fenetre .temoignages__liste li { opacity: 0; transform: translateY(44px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
  .anime .carrousel__fenetre.est-visible .temoignages__liste li { opacity: 1; transform: none; }
  .anime .carrousel__fenetre.est-visible .temoignages__liste li:hover { transform: translateY(-6px); }
  .anime .carrousel__fenetre.est-visible .temoignages__liste li:nth-child(2) { transition-delay: .15s, .15s, 0s; }
  .anime .carrousel__fenetre.est-visible .temoignages__liste li:nth-child(3) { transition-delay: .3s, .3s, 0s; }
  .anime .carrousel__fenetre .temoignages__avatar { transform: scale(0) rotate(-30deg); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .55s; }
  .anime .carrousel__fenetre.est-visible .temoignages__avatar { transform: none; }
  .anime .temoignages__invitation.apparait-zoom:not(.est-visible) { transform: translateX(64px); }
  .temoignages__invitation .btn > .wp-block-button__link, .temoignages__invitation .btn:not(.wp-block-button) { animation: appel 2.8s ease-out 1.5s infinite; }
  /* À la une : le rond de lecture rayonne et le point de l'étiquette clignote, pour attirer l'œil sur la vidéo */
  .une__image .lecture { animation: appel 2.4s ease-out 1s infinite; }
  .une__etiquette i { animation: clignoter 1.6s ease-in-out infinite; }
  /* Formulaire de prière qui glisse depuis la droite */
  .anime .demande .formulaire { opacity: 0; transform: translateX(48px); transition: opacity .9s ease .25s, transform 1s cubic-bezier(.2, .7, .2, 1) .25s; }
  .anime .demande.est-visible .formulaire { opacity: 1; transform: none; }
  .anime .wp-block-post:nth-child(2) .article-carte { transition-delay: .12s; }
  .anime .wp-block-post:nth-child(3) .article-carte { transition-delay: .24s; }
  /* Page À propos : formes qui respirent, étiquettes qui flottent, anneau du verset qui tourne, ligne qui se trace */
  .bandeau > * { animation: monter .9s cubic-bezier(.2, .7, .2, 1) both; }
  .bandeau > h1 { animation-delay: .12s; }
  .bandeau > p:not([class*=" "]) { animation-delay: .24s; }
  .bandeau > p:not([class*=" "]) + p, .bandeau > .hero__verset { animation-delay: .36s; }
  .ap-etiquette { animation: flotter 5s ease-in-out infinite; }
  .ap-personne--inverse .ap-etiquette { animation-delay: -2.5s; }
}
@keyframes clignoter { 50% { opacity: .25; } }
@keyframes appel { 0% { box-shadow: 0 0 0 0 rgba(251, 163, 40, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(251, 163, 40, 0); } }
/* L'anneau du fruit de l'Esprit tourne sur tous les écrans (mobile et tablette compris) : immobile, les mots du bas resteraient à l'envers. */
@media (prefers-reduced-motion: no-preference) {
  .ap-anneau { animation: tourner 60s linear infinite; }
  .ap-bulle.est-ouverte i { animation: appel 2s ease-out infinite; }
}
@keyframes mission-tour { 0%, 30%, 100% { translate: 0 0; border-color: var(--filet); box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .45); } 6%, 22% { translate: 0 -12px; border-color: var(--soleil); box-shadow: 0 0 0 2px var(--soleil), 0 36px 60px -34px rgba(0, 0, 0, .55); } }
@keyframes mission-zoom { 0%, 30%, 100% { scale: 1; } 6%, 22% { scale: 1.12; } }
/* La vague parcourt le titre de gauche à droite, puis recommence après une courte pause. Les lettres soulevées prennent l'orange du site. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .vague__mot span { animation: vague 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
}
@keyframes vague { 0%, 28%, 100% { transform: none; color: inherit; } 14% { transform: translateY(-.34em); color: var(--soleil); } }
@keyframes flotter { 50% { transform: translateY(-10px); } }
@keyframes tourner { to { transform: rotate(360deg); } }
@keyframes monter { from { transform: translateY(26px); opacity: 0; } }

/* ── Mobile ── */
@media (max-width: 900px) {
  .entete { flex-wrap: wrap; gap: 10px 14px; }
  .marque { margin-right: auto; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .marque { font-size: 17px; }
  .marque img { width: 44px; height: 44px; }
  .entete .btn > .wp-block-button__link { padding: 8px 14px; font-size: 14px; min-height: 44px; white-space: nowrap; }
  .hero, .pourquoi, .place, .demande { grid-template-columns: 1fr; }
  .place__visuel { width: min(82%, 380px); }
  .hero__texte { padding-bottom: 8px; }
  .hero { min-height: 0; }
  .hero__visuel { position: relative; right: auto; top: auto; transform: none; height: auto; width: min(82%, 380px); margin: 56px auto 40px; }
  .hero__legende { left: -8%; bottom: 8%; }
  div.enseignements__grille:not(.wp-block-query), .enseignements__grille > .wp-block-post-template { grid-template-columns: 1fr; }
  .tete { flex-direction: column; align-items: start; }
  .demande { margin-inline: 12px; padding: 32px 20px; border-radius: 24px; }
  .formulaire__duo { grid-template-columns: 1fr; gap: 0; }
  .soutien { flex-direction: column; align-items: flex-start; margin-inline: 12px; padding: 24px; border-radius: 24px; }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__verset span { display: block; margin: 6px 0 0; }
  .pied__bas a { margin: 0 18px 0 0; }
  .etapes__liste, .une, .contact, .temoignages__liste--grille { grid-template-columns: 1fr; }
  .une { margin-inline: 12px; border-radius: 24px; }
  .une__texte { padding: 0 8px 12px; }
  .faq details p { padding-right: 0; }
}
@media (max-width: 420px) {
  .marque .wp-block-site-title { display: none; }
  .entete .btn > .wp-block-button__link { padding: 8px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ══ Propre à WordPress ══ */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Menu sur téléphone et tablette : le bouton « Menu » du bloc Navigation ouvre le menu en plein écran.
   Le CSS du bloc est imprimé après cette feuille : d'où les sélecteurs qualifiés, et !important pour le fond du panneau. */
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open,
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close {
  align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  font: 600 15px var(--titre); color: var(--encre); background: none; border: 1.5px solid var(--filet); border-radius: 999px; cursor: pointer;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close { display: inline-flex; top: 14px; right: var(--marge); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open::before {
  content: ""; width: 18px; height: 14px;
  background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open { padding: 14px var(--marge) 32px; background-color: var(--blanc) !important; color: var(--encre) !important; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 72px; align-items: stretch; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item { align-items: stretch; width: 100%; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 4px; font-size: 17px; background: none; border: 0; border-bottom: 1px solid var(--filet); border-radius: 0; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after { content: none; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current] { color: var(--encre); font-weight: 600; }

/* Nos contenus : un panneau par onglet. Sans script, le panneau des vidéos reste affiché. */
.contenus__panneau--enseignements, .contenus__panneau--articles { display: none; }
.contenus.est-pret .contenus__panneau { display: none; }
.contenus.est-pret .contenus__panneau.est-actif { display: block; }
.temoignages__suite.wp-block-buttons { display: flex; justify-content: center; }
.temoignages__suite[hidden] { display: none; }
.boucle__vide { padding: clamp(24px, 3vw, 40px); text-align: center; color: var(--encre-douce); background: var(--creme); border-radius: var(--rayon); }

/* Formulaires (Contact Form 7) : mêmes champs que la maquette */
.formulaire { position: relative; }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .case { margin-top: 10px; }
.formulaire .case .wpcf7-list-item { display: block; margin: 0; }
.formulaire .case label { display: flex; gap: 12px; align-items: start; margin: 0; font: inherit; color: inherit; }
.formulaire .wpcf7-not-valid { border-color: #A3260F; }
.formulaire .wpcf7-not-valid-tip { margin-top: 6px; font: 600 14px/1.4 var(--corps); color: #A3260F; }
.wpcf7 form.formulaire .wpcf7-response-output { margin: 8px 0 0; padding: 14px 18px; font-size: 15px; color: var(--encre); background: var(--blanc); border: 1.5px solid #A3260F; border-radius: 12px; }
/* Message de confirmation : il remplace les champs une fois le formulaire envoyé */
.wpcf7 form.formulaire.sent .wpcf7-response-output { margin: 0; padding: 22px 24px; font: 600 clamp(18px, 1.5vw, 21px)/1.4 var(--titre); letter-spacing: -.01em; border-color: var(--soleil); border-radius: 16px; }
.wpcf7 form.formulaire.sent > :not(.wpcf7-response-output) { display: none; }

/* Dans une grille, un enfant ne s'élargit pas au-delà de sa colonne (miniatures des vidéos, toit de la maison de pierres). */
:where(.enseignements__grille, .wp-block-post-template, .demande, .batir, .contact, .une, .place, .pourquoi) > * { min-width: 0; }
/* Les champs enveloppés par Contact Form 7 ne gardent pas l'espace de la ligne de base sous eux. */
.formulaire :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) { display: block; }
.pied__soutien { display: flex; }
/* Pas de carte « À lire ensuite » quand il n'y a pas de publication suivante */
.article__carte--suivant:not(:has(a)) { display: none; }
/* Dans le pied de page, le message d'attente des enseignements est un simple texte */
.pied__liste .boucle__vide { padding: 0; text-align: left; background: none; border-radius: 0; }