/* ==========================================================================
   Inside Out Mission — Faith Begins Within
   Feuille de style principale
   Desktop de référence : 1792px (conteneur 1350px)
   Breakpoints : 1024px (tablette) · 767px (mobile)
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Variables
   ------------------------------------------------------------------------- */
:root {
  --c-primary: #027893;
  --c-secondary: #8fc9c4;
  --c-teal: #278697;
  --c-teal-2: #298b9d;
  --c-aqua: #79c7c0;
  --c-aqua-2: #66c0b8;
  --c-mint: #bce0cb;
  --c-mint-2: #b2e2c9;
  --c-text: #194a4f;
  --c-nav: #044737;
  --c-accent: #f2f4f8;
  --c-light: #fbfbfb;
  --c-cream: #f4f7f2;
  --c-ink: #131211;
  --c-icon-dark: #0f363f;
  --c-youtube: #db0101;
  --c-support: #1a6a17;

  --ff: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --container: 1350px;
  --container-sm: 1240px;
  --radius: 50px;
  --ls-tight: -0.027em;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-text);
  background: #fff;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

b, strong { font-weight: 600; }

button { font: inherit; cursor: pointer; }

.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;
}

.skip-link {
  position: absolute;
  left: 10px; top: -60px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 50px;
  background: var(--c-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 10px; }

[id] { scroll-margin-top: 20px; }

/* Icônes (sprite SVG inline) */
.icon { width: auto; height: 1em; fill: currentColor; flex: none; }

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.section { padding-left: 10px; padding-right: 10px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.container--sm { max-width: var(--container-sm); }

.card { border-radius: var(--radius); padding: 100px 80px; }

.h-xl {
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  text-transform: capitalize;
}

/* -------------------------------------------------------------------------
   4. Boutons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: 0;
  transition: background-color .3s, color .3s, transform .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn .icon { height: 1em; }

.btn--pill { border-radius: 50px; }
.btn--sm { padding: 12px 24px; }

.btn--white { background: #fff; color: var(--c-primary); }
.btn--white:hover { background: var(--c-accent); }

.btn--support { background: #fff; color: var(--c-support); }
.btn--support:hover { background: var(--c-accent); }

.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-teal); }

.btn--sow {
  padding: 19px;
  background: var(--c-secondary);
  color: var(--c-primary);
}
.btn--sow:hover { background: var(--c-aqua); }

.btn--youtube {
  padding: 20px;
  font-size: 18px;
  font-weight: 500;
  background: var(--c-youtube);
  color: var(--c-accent);
}
.btn--youtube .icon { height: 18px; }
.btn--youtube:hover { background: #b80000; }

.btn--whatsapp {
  padding: 20px;
  font-size: 22px;
  font-weight: 500;
  background: var(--c-primary);
  color: var(--c-nav);
}
.btn--whatsapp .icon { height: 22px; }
.btn--whatsapp:hover { background: var(--c-teal); color: #fff; }

/* -------------------------------------------------------------------------
   5. Header & navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 100;
  padding: 0 10px;
  background: #fff;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 84px;
  padding: 10px 0;
}

.site-logo { display: block; flex: none; width: 270px; padding: 10px; }
.site-logo img { width: 200px; height: 43px; }

.main-nav { padding-top: 18px; }

.menu { display: flex; list-style: none; }
.menu > li { position: relative; }

.menu-link {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--c-nav);
  transition: color .3s;
}
.menu-link:hover,
.menu-link:focus-visible,
.menu-link.is-active,
.has-sub:hover > .menu-link,
.has-sub:focus-within > .menu-link { color: var(--c-primary); }

.menu-caret {
  width: 9px;
  height: 6px;
  margin-left: 11px;
  fill: currentColor;
  transition: transform .3s;
}

.sub-toggle { display: none; }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 167px;
  list-style: none;
  background: var(--c-primary);
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu,
.has-sub.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.sub-menu a {
  display: block;
  padding: 13px 20px 13px 28px;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--c-accent);
  transition: background-color .3s;
}
.sub-menu a:hover,
.sub-menu a:focus-visible { background: var(--c-secondary); outline: none; }
.sub-menu li:first-child a { border-radius: 10px 10px 0 0; }
.sub-menu li:last-child a { border-radius: 0 0 10px 10px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-primary);
}
.nav-toggle .icon { height: 30px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-open { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

/* -------------------------------------------------------------------------
   6. Footer (commun)
   ------------------------------------------------------------------------- */
.footer-water {
  height: 439px;
  border-radius: 50px 50px 0 0;
  background: #fff url("../assets/images/water.jpg") no-repeat center -10px / 104.6% auto;
}

.footer-main { padding: 0 30px; background: var(--c-primary); color: #fff; }
.footer-main .container { display: flex; padding: 30px 0; }
.footer-col { flex: 1 1 0; padding: 10px; }

.footer-verse {
  font-size: 40px;
  font-style: italic;
  line-height: 58px;
}

.footer-col--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.footer-legal {
  max-width: 524px;
  font-size: 17px;
  font-style: italic;
  line-height: 24px;
}

.footer-faith {
  margin-top: 33px;
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: var(--ls-tight);
  color: var(--c-cream);
}
.footer-faith:hover { text-decoration: underline; }

.footer-contact-title {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: var(--ls-tight);
}

.footer-email { margin-top: 6px; font-size: 16px; line-height: 25.6px; }
.footer-email a:hover { text-decoration: underline; }

.footer-bottom {
  padding: 0 30px;
  border-top: 1px solid rgba(235, 254, 246, .08);
  background: var(--c-primary);
  color: #fff;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}

.footer-tagline {
  padding: 23px 10px 10px;
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: var(--ls-tight);
  color: var(--c-cream);
}
.footer-tagline span { color: var(--c-mint-2); }

.footer-meta { display: flex; align-items: center; gap: 20px; padding: 10px; }

.copyright {
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: var(--ls-tight);
}

.socials { display: flex; gap: 5px; list-style: none; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-primary);
  transition: transform .3s, background-color .3s;
}
.socials a:hover { transform: translateY(-2px); background: var(--c-mint); }
.socials .icon { height: 12px; }

/* -------------------------------------------------------------------------
   7. Accueil (index.html)
   ------------------------------------------------------------------------- */
/* 7.1 Titre */
.home-title { min-height: 236px; padding: 64px 40px 72px; }
.home-title h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 100px;
  text-align: center;
  text-transform: capitalize;
  color: var(--c-teal);
}

/* 7.2 Bandeau "Welcome" / "Weekly Encouraging Word" */
.banner .container { display: flex; padding: 10px 0; }

.banner-text {
  display: flex;
  flex-direction: column;
  flex: 0 0 68.69%;
  min-width: 0;
  padding: 80px;
  border-radius: 50px 0 0 50px;
  background: var(--c-teal) url("../assets/images/banner-wave.png") no-repeat right center / contain;
  color: #fff;
}
.banner-text h1,
.banner-text h2 { color: var(--c-aqua); }
.banner-text p { max-width: 714px; margin-top: 13px; }

.banner-photo {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0 50px 50px 0;
  background: var(--c-teal) url("../assets/images/welcome-photo.jpg") no-repeat center / cover;
}

/* 7.3 About */
.about { padding-top: 20px; }
.about .container { padding: 10px 0; }
.about-card { background: rgba(121, 199, 192, .15); }

.about-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 74px; }
.about-head h2 { color: var(--c-teal); }
.about-quote {
  font-size: 26px;
  font-style: italic;
  font-weight: 300;
  line-height: 37px;
}

.about-card .about-p { margin-top: 40px; }
.about-card .about-p--tight { margin-top: 20px; }

.icon-row { display: grid; gap: 20px; margin-top: 40px; list-style: none; }
.icon-row--4 { grid-template-columns: 298fr 278fr 278fr 278fr; }
.icon-row--3 { grid-template-columns: 298fr 284fr 568fr; }

.ibox { display: flex; align-items: center; gap: 14px; }
.ibox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-aqua);
  color: #fff;
}
.ibox-icon .icon { height: 30px; }
.ibox-title {
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  text-transform: capitalize;
}

/* 7.4 What We Do */
.what { padding-top: 100px; }
.what .container { display: flex; gap: 40px; }
.what-left { flex: 0 0 calc((100% - 40px) * .49008); min-width: 0; padding-left: 80px; }
.what-right { flex: 1 1 0; min-width: 0; padding-right: 80px; }

.what-left h2 { margin-top: 41px; color: var(--c-teal); }
.what-intro { margin-top: 54px; }

.wbox h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  text-transform: capitalize;
}
.what-left .wbox { margin-top: 41.5px; }
.wbox--icon { display: flex; align-items: center; gap: 29px; }
.wbox--icon .wbox-text { flex: 1 1 auto; min-width: 0; }
.wbox--icon img { flex: none; width: 82px; height: 82px; }

.what-photo {
  width: 100%;
  margin-top: 41.5px;
  aspect-ratio: 562 / 316;
  object-fit: cover;
  border-radius: 50px;
}

.what-kit { width: 435px; margin: 0 auto; }
.what-right .wbox { margin-top: 20px; }

/* 7.5 Cartes Why / Join / Prayer / Support */
.home-cards { padding-top: 80px; }
.home-cards .container { display: flex; align-items: flex-start; gap: 40px; padding: 10px 0; }
.home-cards .col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }

.card-why { margin-top: 20px; padding-bottom: 120px; background: var(--c-mint); }
.card-why h2,
.card-prayer h2 { color: var(--c-text); }
.card-why p { margin-top: 33px; }

.card-join { margin-top: 40px; background: var(--c-teal-2); color: #fff; }
.card-join h2 { color: var(--c-mint); }
.card-join .join-text { margin-top: 33px; }
.card-join .join-text strong { color: #fff; }

.divider { height: 1px; margin: 41.5px 0 22px; background: #fff; }
.divider--2 { margin: 22px 0 0; }

.info-list { list-style: none; }
.info-list li {
  display: flex;
  align-items: flex-start;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-mint);
}
.info-list .info-icon { display: flex; justify-content: center; flex: none; width: 25px; padding-top: 7px; }
.info-list .icon { height: 20px; }
.info-list .info-text { padding-left: 5px; }

.card-join .join-wa-text { margin-top: 42px; }

.wa-block {
  display: flex;
  align-items: center;
  width: 67%;
  margin-top: 19.5px;
  padding: 14px;
  border-radius: 50px;
  background: var(--c-secondary);
  color: var(--c-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  transition: background-color .3s, transform .3s;
}
.wa-block:hover { background: var(--c-aqua); transform: translateY(-2px); }
.wa-block .wa-icon { display: flex; justify-content: center; flex: none; width: 45px; }
.wa-block .icon { height: 36px; }
.wa-block span { padding-left: 5px; }

.card-prayer { margin-top: 70px; background: var(--c-aqua); }
.card-prayer .prayer-intro { margin-top: 33px; }
.prayer-quotes { margin-top: 20px; font-style: italic; }
.prayer-quotes strong { color: var(--c-primary); }
.prayer-more { margin-top: 20px; }

.card-support {
  margin-top: 40px;
  color: #fff;
  background-image:
    linear-gradient(237deg, rgba(3, 129, 29, .77) 55%, #053c04 100%),
    url("../assets/images/sow.webp");
  background-repeat: no-repeat;
  background-position: 0 0, 232px -75px;
  background-size: 100% 100%, cover;
}
.card-support h2 { line-height: 47px; color: #fff; }
.card-support p { margin-top: 13px; font-size: 20px; line-height: 35px; }
.card-support .btn { margin-top: 20px; }

/* 7.6 Our Calling */
.calling .container { display: flex; padding: 10px 0; }
.calling-text { flex: 0 0 71.26%; min-width: 0; padding: 40px 80px 0; }
.calling-text h2 { font-weight: 800; color: var(--c-primary); }
.calling-text > p { margin-top: 20px; }

.dot-list { margin-top: 20px; list-style: none; }
.dot-list li { display: flex; align-items: center; line-height: 1.6; }
.dot-list li + li { margin-top: 5px; }
.dot-list .dot { display: flex; justify-content: center; flex: none; width: 18px; color: var(--c-text); }
.dot-list .icon { height: 14px; }
.dot-list .dot-text { padding-left: 5px; }
.dot-list strong { color: var(--c-primary); }

.calling-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
}
.calling-media img { width: 368px; }

/* -------------------------------------------------------------------------
   8. Sow (sow.html)
   ------------------------------------------------------------------------- */
.sow-intro { padding-top: 100px; }
.sow-intro .container { display: flex; gap: 40px; }
.sow-intro-text { flex: 0 0 calc((100% - 40px) * .49008); min-width: 0; padding-left: 80px; }
.sow-intro-media { display: flex; align-items: flex-start; justify-content: center; flex: 1 1 0; min-width: 0; padding-right: 80px; }
.sow-intro-media img { width: 418px; }

.sow-intro h1 { color: var(--c-teal); }
.sow-tagline {
  margin-top: 30px;
  font-size: 29px;
  font-weight: 700;
  line-height: 34.8px;
  text-transform: capitalize;
  color: var(--c-aqua-2);
}
.sow-intro-text p { margin-top: 13px; font-size: 20px; line-height: 35px; }
.sow-intro-text .sow-verse { margin-top: 20px; font-style: italic; }
.sow-verse b { color: var(--c-primary); }

.sow-cards { padding-top: 50px; }
.sow-cards .container,
.giving .container { display: flex; gap: 20px; padding: 10px 0; }
.sow-cards .card,
.giving .card { flex: 1 1 0; min-width: 0; }

.card-gathering { padding: 80px; background: var(--c-primary); color: #fff; }
.card-gathering h2 { color: var(--c-secondary); }
.card-gathering .gathering-intro { margin-top: 40px; color: var(--c-accent); }
.card-gathering .gathering-outro { margin-top: 20px; }

.cross-list { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; list-style: none; }
.cross-list li { display: flex; align-items: center; gap: 12px; }
.cross-list .ci {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-aqua);
}
.cross-list .icon { height: 20px; }
.cross-list span:last-child {
  font-size: 18px;
  letter-spacing: var(--ls-tight);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
}

.card-hopekits { padding: 80px 80px 100px; background: rgba(121, 199, 192, .15); }
.card-hopekits img { width: 394px; margin: 0 auto; }
.card-hopekits h2 { margin-top: 20px; color: var(--c-teal); }
.hopekits-text { margin-top: 40px; }
.hopekits-text b { color: var(--c-primary); }
.hopekits-text ul { margin: 0 0 23px; padding-left: 40px; }
.hopekits-text li { margin-bottom: 4.8px; font-size: 16px; line-height: 1.6; }

.giving .card { background: rgba(121, 199, 192, .15); }
.giving h2 { font-weight: 800; color: var(--c-primary); }

.give-list { margin-top: 20px; list-style: none; }
.give-list li + li { margin-top: 19.5px; }
.give-list li { position: relative; }
.give-list li:not(:last-child) { padding-bottom: 19.5px; }
.give-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-secondary);
}
.give-list a {
  display: block;
  line-height: 1.6;
  color: var(--c-nav);
  transition: color .3s;
}
.give-list a:hover { color: var(--c-primary); }
.give-list b { color: var(--c-primary); }

.card-sow-cta p { margin-top: 20px; }
.card-sow-cta .btn { margin-top: 20px; }

/* -------------------------------------------------------------------------
   9. Word (word.html)
   ------------------------------------------------------------------------- */
.word-banner { padding-top: 90px; }
.word-banner .banner-text { flex-basis: 64.52%; }
.word-banner .banner-text h1 { margin-top: 0; }
.word-banner .banner-text p { margin-top: 15px; }
.word-banner .banner-text p { max-width: 661px; }
.word-banner .banner-text .word-watch { margin-top: 19px; }
.word-banner .btn--youtube { align-self: flex-start; margin-top: 18.5px; }
.word-banner .banner-photo {
  background-image: url("../assets/images/word-photo.jpg");
  background-position: left center;
}

.word-subscribe { padding-top: 20px; }
.word-subscribe .container { padding: 10px 0; }
.subscribe-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 80px;
  border-radius: 50px;
  background: rgba(121, 199, 192, .32);
}
.subscribe-card p {
  max-width: 678px;
  margin: -2px 0 2px;
  font-size: 34px;
  line-height: 40px;
}
.subscribe-card strong { color: var(--c-primary); }

/* -------------------------------------------------------------------------
   10. Your Verse (yourverse.html)
   ------------------------------------------------------------------------- */
.coming-soon { padding-top: 100px; text-align: center; }
.coming-soon h1 { color: var(--c-teal); }
.coming-soon p { margin-top: 20px; font-size: 20px; font-weight: 300; line-height: 35px; }

/* -------------------------------------------------------------------------
   11. Retreat (retreat.html)
   ------------------------------------------------------------------------- */
.retreat-page { color: #000; }

/* 11.1 Hero */
.retreat-hero {
  padding: 70px 10px;
  background: var(--c-primary) url("../assets/images/retreat-hero.jpg") no-repeat center 39.2% / cover;
  color: #fff;
}
.retreat-hero .container { display: flex; }
.hero-col { flex: 1 1 0; min-width: 0; padding: 10px; }
.hero-col--info { display: flex; align-items: center; justify-content: center; }

.retreat-hero h1 {
  letter-spacing: var(--ls-tight);
  font-size: 48px;
  font-weight: 800;
  line-height: 57.6px;
  text-transform: capitalize;
}
.hero-sub { margin-top: 20px; font-size: 26px; line-height: 45.5px; }
.hero-verse { margin-top: -2.5px; }
.retreat-hero .btn { margin-top: 20.5px; }
.hero-note { margin-top: 20px; font-size: 16px; line-height: 28px; }

.hero-facts { list-style: none; }
.hero-facts li { display: flex; align-items: center; }
.hero-facts li + li { margin-top: 13px; }
.hero-facts .fact-icon { display: flex; flex: none; width: 60px; padding-right: 20px; }
.hero-facts .icon { height: 32px; }
.hero-facts .fact-text {
  padding-left: 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 28.8px;
  color: var(--c-light);
}

/* 11.2 Textes génériques */
.retreat-title {
  letter-spacing: var(--ls-tight);
  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
  text-transform: capitalize;
  color: var(--c-primary);
}
.retreat-title--bold { font-weight: 800; }

.rich p + p { margin-top: 33px; }
.rich ul { margin: 33px 0 25px; padding-left: 40px; }
.rich li { margin-bottom: 4.8px; font-size: 16px; line-height: 1.6; }
.rich b,
.rich strong { color: var(--c-primary); }

/* 11.3 About */
.retreat-about { padding-top: 50px; }
.retreat-about .retreat-title { font-weight: 700; }
.retreat-about .rich { margin-top: 20px; color: var(--c-text); }

/* 11.4 Rythm & Fasting */
.retreat-cards { padding: 80px 10px; }
.retreat-cards .container { display: flex; align-items: flex-start; gap: 40px; padding: 10px; }
.retreat-cards .card { flex: 1 1 0; min-width: 0; color: var(--c-text); }
.retreat-cards h2 { color: var(--c-primary); }
.card-rythm { padding-bottom: 120px; background: var(--c-mint); }
.card-fasting { background: var(--c-aqua); }
.retreat-cards .rich { margin-top: 33px; }
.card-rythm .rich ul { margin-top: 0; }
.card-rythm .rich b,
.card-rythm .rich strong { color: inherit; }
.card-fasting .rich p + p { margin-top: 0; }

/* 11.5 Location & Dates */
.retreat-location {
  background: var(--c-teal-2) url("../assets/images/retreat-location.jpg") no-repeat center top / cover;
  color: #fff;
}
.retreat-location .container { display: flex; gap: 50px; padding: 10px 0; }
.location-col { flex: 1 1 0; min-width: 0; padding: 60px 0; }
.location-col h3 {
  letter-spacing: var(--ls-tight);
  margin-bottom: 18.4px;
  font-size: 28px;
  font-weight: 800;
  line-height: 33.6px;
  text-transform: capitalize;
}
.location-col--dates h3 { font-weight: 600; }
.location-col--dates { font-weight: 600; }
.location-col .rich b,
.location-col .rich strong { color: #fff; }
.location-col .rich p + p { margin-top: 0; }

/* 11.6 Cost */
.retreat-cost { padding-top: 60px; }
.retreat-cost .container { padding-bottom: 10px; }
.cost-cols .container { display: flex; padding: 10px 0; }
.cost-col { flex: 1 1 0; min-width: 0; padding: 10px; }
.cost-col--right .rich { margin: -10px 0 -10px -10px; }

/* 11.7 For me */
.retreat-forme { margin-top: 50px; background: var(--c-cream); }
.retreat-forme .container { display: flex; }
.forme-text { flex: 0 0 53.11%; min-width: 0; padding: 60px 0; }
.forme-media { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: 10px; }
.forme-media img { width: 613px; }

.forme-text h2 {
  letter-spacing: var(--ls-tight);
  font-size: 38px;
  font-weight: 600;
  line-height: 45.6px;
  text-transform: capitalize;
  color: var(--c-primary);
}
.forme-text .rich { margin-top: 22.4px; }
.forme-text .rich ul { margin-top: 31px; }
.forme-note { margin-top: 20px; font-size: 16px; line-height: 28px; color: var(--c-primary); }

.btn--register { margin-top: 20px; padding: 12px 24px; }

/* 11.8 Moments (carrousel) */
.moments { padding-top: 10px; padding-bottom: 10px; }
.moments h2 {
  letter-spacing: var(--ls-tight);
  margin-top: 30px;
  font-size: 48px;
  font-weight: 600;
  line-height: 57.6px;
  text-align: center;
  color: var(--c-primary);
}
.moments-intro { margin-top: 10.4px; padding: 0 30px; text-align: center; }
.moments-intro strong { color: var(--c-primary); }

.carousel { position: relative; margin-top: 28.5px; padding-bottom: 16px; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 10px;
  list-style: none;
  transition: transform .6s cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}
.carousel-slide { flex: 0 0 calc((100% - 20px) / 3); min-width: 0; padding: 20px; }
.carousel-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
}

.carousel-arrow {
  position: absolute;
  top: calc(50% - 8px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(238, 238, 238, .9);
  transform: translateY(-50%);
  transition: color .3s;
}
.carousel-arrow:hover { color: var(--c-primary); }
.carousel-arrow svg { width: 14px; height: 25px; }
.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(159, 159, 159, .3);
  transition: background-color .3s, transform .3s;
}
.carousel-dots button[aria-current="true"] { background: var(--c-primary); }

/* 11.9 Looking ahead */
.ahead { margin-top: 50px; background: var(--c-accent); }
.ahead-title { padding: 30px 10px 10px; }
.ahead-title h2 { letter-spacing: var(--ls-tight); color: var(--c-primary); }

.ahead-row { padding: 0 10px 30px; }
.ahead-row .container { display: flex; }
.ahead-media { flex: 0 1 36.13%; min-width: 0; padding: 10px; }
.ahead-media img { width: 270px; }
.ahead-text { flex: 0 1 53.15%; min-width: 0; padding: 10px; }

.ahead-text h3,
.reset-text h3 {
  letter-spacing: var(--ls-tight);
  font-size: 38px;
  font-style: italic;
  font-weight: 800;
  line-height: 45.6px;
  text-transform: capitalize;
  color: var(--c-ink);
}
.ahead-text .rich,
.reset-text .rich { margin-top: 22px; }
.rich a strong { transition: color .3s; }
.rich a:hover strong { color: var(--c-teal); text-decoration: underline; }

.reset { background: var(--c-light); }
.reset .container { display: flex; padding: 10px 0; }
.reset-media { flex: 0 0 558px; min-width: 0; padding: 10px; }
.reset-media img { width: 538px; }
.reset-text { flex: 0 1 830px; min-width: 0; margin-left: -103px; padding-top: 41px; }

/* 11.10 Verset final */
.retreat-quote { margin-top: 50px; }
.retreat-quote .container { padding: 10px 0; text-align: center; color: var(--c-primary); }
.retreat-quote p { font-weight: 600; }
.retreat-quote p + p { margin-top: 33px; }

/* -------------------------------------------------------------------------
   12. Animations d'apparition (progressive enhancement)
   ------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to { opacity: 1; transform: none; }
}
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible { animation: fadeInUp 1s cubic-bezier(.2, .7, .3, 1) both; }

@media print {
  .js [data-reveal] { opacity: 1 !important; animation: none !important; }
  .site-header, .footer-water { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; }
  .js [data-reveal].is-visible { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   13. Responsive — ≤ 1366px (laptop)
   ------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  .card { padding: 80px 60px; }
  .card-why { padding-bottom: 80px; }
  .card-hopekits { padding-bottom: 80px; }
  .footer-water { background-size: cover; background-position: center 0; }
  .banner-text { padding: 70px 60px; }
  .what-left { padding-left: 40px; }
  .what-right { padding-right: 40px; }
  .calling-text { padding: 40px 40px 0; }
  .sow-intro-text { padding-left: 40px; }
  .sow-intro-media { padding-right: 40px; }
  .card-rythm { padding-bottom: 100px; }
  .reset-text { margin-left: 0; padding-left: 20px; }
}

@media (max-width: 1180px) {
  .icon-row--4 { grid-template-columns: repeat(2, 1fr); }
  .icon-row--3 { grid-template-columns: repeat(2, 1fr); }
  .icon-row--3 .ibox:last-child { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   14. Responsive — ≤ 1024px (tablette)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body { font-size: 20px; }
  .h-xl { font-size: 40px; line-height: 1.2; }

  /* Navigation mobile */
  .header-inner { align-items: center; height: auto; min-height: 84px; }
  .site-logo { width: auto; }
  .main-nav { padding-top: 0; }
  .nav-toggle { display: flex; margin: 0; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    background: var(--c-primary);
    box-shadow: 0 20px 40px rgba(2, 120, 147, .18);
    transition: max-height .35s ease;
  }
  .nav-open .menu { max-height: calc(100vh - 84px); overflow-y: auto; }

  .menu > li { position: static; border-top: 1px solid rgba(255, 255, 255, .12); }
  .menu-link { padding: 15px 24px; color: var(--c-accent); }
  .has-sub:hover > .menu-link,
  .has-sub:focus-within > .menu-link { color: var(--c-accent); background: none; }
  .menu-link:hover,
  .menu-link:focus-visible,
  .menu-link.is-active,
  .has-sub > .menu-link:hover { color: #fff; background: var(--c-secondary); }

  .has-sub { display: flex; flex-wrap: wrap; }
  .has-sub > .menu-link { flex: 1 1 auto; }
  .has-sub > .menu-link .menu-caret { display: none; }
  .sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .12);
    background: none;
    color: var(--c-accent);
  }
  .sub-toggle .menu-caret { width: 12px; height: 8px; margin: 0; }
  .has-sub.is-open .sub-toggle .menu-caret { transform: rotate(180deg); }

  .sub-menu {
    position: static;
    flex: 0 0 100%;
    max-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: rgba(0, 0, 0, .12);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .3s ease;
  }
  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu { max-height: 0; }
  .has-sub.is-open > .sub-menu { max-height: 400px; }
  .sub-menu a { padding: 13px 24px 13px 44px; }
  .sub-menu li:first-child a,
  .sub-menu li:last-child a { border-radius: 0; }

  /* Sections */
  .home-title { min-height: 0; padding: 40px 20px; }
  .home-title h1 { font-size: 44px; line-height: 1.3; }

  .card { padding: 60px 40px; }
  .banner-text { padding: 60px 40px; }
  .banner-text p { max-width: none; }

  .about-head { grid-template-columns: 1fr; }
  .about-quote { font-size: 22px; line-height: 1.45; }

  .what { padding-top: 60px; }
  .what .container { gap: 30px; }
  .what-left { flex-basis: calc((100% - 30px) * .49); padding-left: 20px; }
  .what-right { padding-right: 20px; }
  .what-left h2 { margin-top: 0; }
  .what-intro { margin-top: 20px; }
  .what-left .wbox,
  .what-photo { margin-top: 30px; }
  .what-kit { width: min(435px, 100%); }

  .home-cards { padding-top: 60px; }
  .home-cards .container { gap: 20px; }
  .card-prayer { margin-top: 20px; }
  .card-support { background-position: 0 0, 141px 0; }
  .wa-block { width: 100%; }

  .calling-text { flex-basis: 64%; padding: 20px 30px 0 20px; }
  .calling-media img { width: 280px; }

  .footer-water { height: 283px; }
  .footer-verse { font-size: 32px; line-height: 1.45; }

  .sow-intro { padding-top: 60px; }
  .sow-intro .container { gap: 30px; }
  .sow-intro-text { flex-basis: calc((100% - 30px) * .55); padding-left: 20px; }
  .sow-intro-media { padding-right: 20px; }
  .sow-intro-media img { width: 340px; }
  .card-gathering,
  .card-hopekits { padding: 60px 40px; }
  .card-hopekits img { width: min(394px, 100%); }

  .word-banner { padding-top: 40px; }
  .subscribe-card { flex-direction: column; padding: 60px 40px; }
  .subscribe-card p { font-size: 28px; line-height: 1.35; }

  .coming-soon { padding: 60px 20px 0; }

  .retreat-hero { padding: 50px 10px; }
  .hero-sub { font-size: 22px; line-height: 1.5; }
  .retreat-title { font-size: 40px; line-height: 1.2; }
  .retreat-about { padding-top: 40px; }
  .retreat-about .container,
  .retreat-cost .container { padding-left: 10px; padding-right: 10px; }
  .retreat-cards { padding: 50px 10px; }
  .retreat-cards .container { gap: 20px; padding: 0; }
  .card-rythm { padding-bottom: 60px; }
  .retreat-location .container { gap: 30px; padding: 0 10px; }
  .location-col { padding: 50px 0; }
  .location-col h3 { font-size: 24px; line-height: 1.3; }
  .cost-col--right .rich { margin: 0; }
  .retreat-forme .container { gap: 20px; padding: 0 20px; }
  .forme-text { padding: 50px 0; }
  .forme-media img { width: min(420px, 100%); }
  .forme-text h2 { font-size: 34px; }
  .moments h2 { font-size: 40px; line-height: 1.2; }
  .carousel-slide { flex-basis: calc((100% - 10px) / 2); padding: 10px; }
  .ahead-title .container { padding: 0 10px; }
  .ahead-media { flex-basis: 30%; }
  .ahead-media img { width: 220px; }
  .ahead-text { flex: 1 1 0; }
  .reset-media { flex: 0 0 40%; }
  .reset-text { flex: 1 1 0; padding: 20px 10px 20px 20px; }
  .ahead-text h3,
  .reset-text h3 { font-size: 32px; line-height: 1.25; }
}

/* -------------------------------------------------------------------------
   15. Responsive — ≤ 767px (mobile)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Empilement des colonnes */
  .what .container,
  .sow-intro .container,
  .retreat-hero .container,
  .retreat-cards .container,
  .retreat-location .container,
  .cost-cols .container,
  .ahead-row .container,
  .reset .container { flex-direction: column; }
  .calling .container,
  .retreat-forme .container { flex-direction: column-reverse; }
  .sow-intro .container { flex-direction: column-reverse; align-items: center; }
  .what-left,
  .what-right,
  .calling-text,
  .calling-media,
  .sow-intro-text,
  .sow-intro-media,
  .forme-text,
  .forme-media,
  .ahead-media,
  .ahead-text,
  .reset-media,
  .reset-text { flex: none; width: 100%; }
  .what .container { gap: 40px; }
  .what-left,
  .what-right { padding: 0 10px; }
  .retreat-cards .container { align-items: stretch; }
  .retreat-location .container { gap: 0; }
  .location-col { padding: 40px 0 0; }
  .location-col:last-child { padding-bottom: 40px; }
  .retreat-forme .container { gap: 0; }
  .forme-text { padding: 20px 0 50px; }
  .hero-col--info { justify-content: flex-start; }
  .reset-media img { width: min(420px, 100%); }
  .reset-text { padding: 10px 10px 24px; }

  body { font-size: 18px; }
  .h-xl { font-size: 32px; line-height: 1.2; }
  .card { padding: 30px; border-radius: 30px; }

  .site-logo { padding: 10px 0; }
  .site-logo img { width: 170px; height: auto; }

  .home-title { padding: 30px 10px; }
  .home-title h1 { font-size: 34px; }

  .banner .container { flex-direction: column; }
  .banner-text {
    flex: none;
    padding: 30px;
    border-radius: 30px 30px 0 0;
    background-size: cover;
    background-position: 60% center;
  }
  .banner-text p { margin-top: 10px; }
  .banner-photo { flex: none; min-height: 268px; border-radius: 0 0 30px 30px; }
  .word-banner .banner-text { flex: none; }
  .word-banner .banner-photo { min-height: 320px; background-position: center; }

  .about { padding-top: 10px; }
  .icon-row--4,
  .icon-row--3 { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
  .ibox-title { font-size: 20px; }
  .about-card .about-p { margin-top: 30px; }

  .what-right { grid-template-columns: 1fr; }
  .wbox--icon { gap: 16px; }
  .wbox--icon img { width: 64px; height: 64px; }
  .what-photo { border-radius: 30px; }

  .home-cards .container { flex-direction: column; gap: 20px; }
  .home-cards .col { width: 100%; }
  .card-why,
  .card-join,
  .card-prayer,
  .card-support { margin-top: 0; }
  .home-cards .col + .col { margin-top: 0; }
  .card-why p,
  .card-join .join-text,
  .card-prayer .prayer-intro { margin-top: 20px; }
  .divider { margin: 24px 0 20px; }
  .divider--2 { margin: 20px 0 0; }
  .info-list li,
  .wa-block { font-size: 18px; }
  .card-join .join-wa-text { margin-top: 24px; }
  .card-support h2 { line-height: 1.1; }
  .card-support p { font-size: 18px; line-height: 1.7; }

  .calling-text { padding: 10px 10px 0; }
  .dot-list li { align-items: flex-start; font-size: 18px; }
  .dot-list .dot { padding-top: 8px; }
  .calling-media img { width: 240px; }

  .footer-water { height: 200px; background-position: 30% 0; }
  .footer-main { padding: 20px 10px; }
  .footer-main .container { flex-direction: column; padding: 10px 0; }
  .footer-verse { font-size: 26px; line-height: 1.45; }
  .footer-col--right { align-items: flex-start; text-align: left; }
  .footer-legal { font-size: 15px; }
  .footer-faith { margin-top: 20px; }
  .footer-bottom { padding: 0 10px; }
  .footer-bottom .container { flex-direction: column-reverse; align-items: flex-start; padding: 10px 0 20px; }
  .footer-tagline { padding: 10px; }
  .footer-meta { flex-wrap: wrap; gap: 12px; }

  .sow-intro { padding-top: 30px; }
  .sow-intro-text,
  .sow-intro-media { padding: 0 10px; }
  .sow-intro-media img { width: 260px; }
  .sow-tagline { margin-top: 16px; font-size: 24px; line-height: 1.25; }
  .sow-intro-text p { font-size: 18px; line-height: 1.75; }
  .sow-cards { padding-top: 30px; }
  .sow-cards .container,
  .giving .container { flex-direction: column; }
  .card-gathering,
  .card-hopekits { padding: 30px; }
  .card-gathering .gathering-intro,
  .cross-list,
  .hopekits-text { margin-top: 24px; }
  .cross-list { gap: 14px; }
  .give-list a { font-size: 18px; }

  .word-banner { padding-top: 20px; }
  .word-banner .banner-text h1 { margin-top: 0; }
  .btn--youtube { font-size: 16px; padding: 18px 22px; }
  .subscribe-card { padding: 30px; border-radius: 30px; }
  .subscribe-card p { font-size: 24px; }
  .btn--whatsapp { font-size: 18px; padding: 18px 24px; }

  .coming-soon { padding: 40px 10px 0; }
  .coming-soon p { font-size: 18px; }

  .retreat-hero {
    padding: 30px 10px;
    background-image: linear-gradient(rgba(0, 92, 108, .45), rgba(0, 92, 108, .45)), url("../assets/images/retreat-hero.jpg");
    background-position: center, 30% center;
    background-size: cover, cover;
  }
  .retreat-hero h1 { font-size: 38px; line-height: 1.2; }
  .hero-sub { font-size: 22px; line-height: 1.5; }
  .hero-col--info { padding-top: 20px; }
  .hero-facts .fact-icon { width: 46px; padding-right: 12px; }
  .hero-facts .icon { height: 26px; }
  .hero-facts .fact-text { font-size: 16px; line-height: 1.5; }
  .retreat-title { font-size: 32px; }
  .rich p + p { margin-top: 24px; }
  .rich ul { margin: 24px 0 18px; padding-left: 26px; }
  .card-fasting .rich p + p,
  .location-col .rich p + p { margin-top: 0; }
  .retreat-cards { padding: 40px 10px; }
  .retreat-cards .rich { margin-top: 20px; }
  .card-rythm { padding-bottom: 30px; }
  .location-col h3 { font-size: 24px; line-height: 1.3; }
  .retreat-cost { padding-top: 40px; }
  .forme-text h2 { font-size: 28px; line-height: 1.25; }
  .moments h2 { font-size: 30px; }
  .moments-intro { padding: 0 10px; }
  .carousel { margin-top: 20px; padding-bottom: 24px; }
  .carousel-slide { flex-basis: 100%; padding: 6px 26px; }
  .carousel-arrow { color: var(--c-primary); }
  .ahead-title { padding-top: 30px; }
  .ahead-text h3,
  .reset-text h3 { font-size: 28px; }
  .ahead-text,
  .reset-text { padding: 10px 10px 24px; }
  .retreat-quote { margin-top: 30px; }
  .retreat-quote .container { padding: 10px; }
}