/* ==========================================================================
   POMAR — community.css
   CSS extrait des blocs HTML WordPress le 23 août 2026.
   ========================================================================== */

/* ============================================================
   POMAR — page Community — styles
   Toutes les photos sont des placeholders (voir .pomar-ph),
   à remplacer par de vraies photos une fois disponibles.
   Le bloc "the rhythm" contient le shortcode <div class="pomar-weeks pomar-weeks--empty"><p>The next POMAR weeks are being prepared. Come back soon to discover what life here looks like.</p></div>
   en placeholder — les liens ACF ne sont pas encore créés côté site.
   ============================================================ */

/* Replaces the former inline script that reset Gutenberg flow margins. */
.pomar-page-root > *{
  margin-block-start:0 !important;
}

/* --- placeholder photo component, réutilisé partout sur la page --- */
.pomar-ph{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  width:100%;
  height:100%;
  background:var(--sand-200);
  border-radius:var(--radius-lg);
  color:var(--stone-500);
  text-align:center;
  box-sizing:border-box;
  overflow:hidden;
  object-fit: cover;
}
.pomar-ph img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pomar-ph svg{ width:28px; height:28px; flex:none; opacity:.7; }
.pomar-ph span{
  font:var(--type-small);
  font-size:var(--text-2xs);
  letter-spacing:.03em;
  line-height:1.4;
  max-width:22ch;
}
.pomar-ph--dark{
  background:linear-gradient(135deg,var(--clay-800),var(--clay-900));
  border-color:rgba(250,245,237,.22);
  color:rgba(250,245,237,.55);
}

/* --- boutons pill, traitement Mediaan italique universel du site --- */
.pomar-comm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:54px;
  padding:0 var(--space-6);
  border-radius:var(--radius-pill);
  font-family:var(--font-title);
  font-style:italic;
  font-weight:var(--weight-medium);
  font-size:var(--text-md);
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  box-sizing:border-box;
  white-space:nowrap;
  transition:transform .24s cubic-bezier(.22,.61,.36,1);
}
.pomar-comm-btn:hover{ transform:translateY(-2px); }
.pomar-comm-btn:active{ transform:scale(.98); }
.pomar-comm-btn--solid{ background:var(--sun-400); color:var(--clay-900); }
.pomar-comm-btn--outline{ background:var(--white); color:var(--clay-600); border-color:var(--clay-600); }
.pomar-comm-btn--inverse{ background:var(--sand-050); color:var(--clay-800); }
.pomar-comm-btn--dark{ background:var(--clay-900); color:var(--sun-400); }

.pomar-comm-textlink{
  font:var(--type-small);
  font-size:var(--text-sm);
  text-decoration:none;
  width:fit-content;
}

/* ============ hero ============ */
.pomar-comm-hero{ position:relative; background:var(--clay-900); }
.pomar-comm-hero__bg{ position:absolute; inset:0; overflow:hidden; }
.pomar-comm-hero__bg{ background:linear-gradient(135deg,var(--clay-800),var(--clay-900)); }
.pomar-comm-hero__bg > img{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 45%;
}
.pomar-comm-hero__phcaption{
  position:absolute; top:var(--space-6); left:var(--space-5); z-index:1;
  font:var(--type-small); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(250,245,237,.45);
  max-width:60%;
}
.pomar-comm-hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(36,28,20,.88) 0%,rgba(36,28,20,.62) 48%,rgba(36,28,20,.25) 100%);
}
.pomar-comm-hero__content{
  position:relative;
  z-index:2;
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-9) var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  min-height:440px;
  justify-content:center;
}
.pomar-comm-hero .pomar-comm-hero__eyebrow{ color:var(--sun-400); }
.pomar-comm-hero .pomar-comm-hero__title{
  font:var(--type-hero);
  font-size:var(--text-5xl);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--sand-050);
  max-width:760px;
}
.pomar-comm-hero .pomar-comm-hero__desc{
  font:var(--type-body-lg);
  color:rgba(250,245,237,.88);
  max-width:600px;
}
.pomar-comm-hero__ctas{ display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-3); flex-wrap:wrap; }
.pomar-comm-hero .pomar-comm-hero__link{ color:var(--sand-100); }

/* ============ who lives here ============ */
.pomar-comm-who{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-9) var(--space-5);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--space-8);
  align-items:center;
}
.pomar-comm-who__text{ display:flex; flex-direction:column; gap:var(--space-4); }
.pomar-comm-who .pomar-comm-who__title{ font:var(--type-h2); font-size:var(--text-3xl); color:var(--text-heading); }
.pomar-comm-who .pomar-comm-who__lead{ font:var(--type-body-lg); color:var(--text-body); }
.pomar-comm-who .pomar-comm-who__body{ font:var(--type-body); color:var(--text-body); }
.pomar-comm-who__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.pomar-comm-who__tag{
  display:inline-flex; align-items:center; height:32px; padding:0 var(--space-3);
  border-radius:var(--radius-pill); background:var(--sand-200); color:var(--clay-700);
  font:var(--type-small); font-size:var(--text-xs); letter-spacing:.02em;
}
.pomar-comm-who__gallery{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:170px 170px;
  gap:var(--space-4);
}
.pomar-comm-who__gallery .pomar-ph--big{ grid-row:span 2; }

/* ============ the rhythm / POMAR experience ============ */
.pomar-comm-rhythm{ background:var(--surface-inverse); }
.pomar-comm-rhythm__inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-9) var(--space-5);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-7);
}
.pomar-comm-rhythm__header{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; }
.pomar-comm-rhythm .pomar-comm-rhythm__eyebrow{ color:var(--clay-300); }
.pomar-comm-rhythm .pomar-comm-rhythm__title{ font:var(--type-hero); font-size:var(--text-4xl); color:var(--sand-050); }
.pomar-comm-rhythm .pomar-comm-rhythm__desc{ font:var(--type-body-lg); color:rgba(250,245,237,.78); max-width:620px; }
.pomar-comm-rhythm__widget{
  width:100%;
  max-width:980px;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:0;
  box-sizing:border-box;
  min-height:0;
  display:block;
}
.pomar-comm-rhythm__widget-inner{ width:100%; }
.pomar-comm-rhythm__widget .pomar-weeks--empty{
  margin:0;
  padding:var(--space-6);
  border:1px solid rgba(250,245,237,.18);
  border-radius:var(--radius-lg);
  color:rgba(250,245,237,.78);
  text-align:center;
}
.pomar-comm-rhythm__widget .pomar-weeks--empty p{ margin:0; }

/* ============ voices / reviews (même style que la home) ============ */
.pomar-comm-reviews{ max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--space-5); }
.pomar-comm-reviews__header{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5);
  margin-bottom:var(--space-6);
}
.pomar-comm-reviews__header-text{ display:flex; flex-direction:column; gap:var(--space-3); }
.pomar-comm-reviews .pomar-comm-reviews__title{ font:var(--type-h2); font-size:var(--text-3xl); color:var(--text-heading); }

/* --- Widget Trustindex (avis Google réels) — CSS repris à l'identique de la home,
   scopé par #pomar-reviews-widget (id, bat toute règle injectée par le plugin) --- */
#pomar-reviews-widget .ti-widget,
#pomar-reviews-widget .ti-widget .ti-widget-container *{
  font-family:var(--font-body) !important;
}
#pomar-reviews-widget,
#pomar-reviews-widget .ti-widget,
#pomar-reviews-widget .ti-widget-container,
#pomar-reviews-widget .ti-reviews-container{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
#pomar-reviews-widget .ti-reviews-container{
  overflow:hidden !important;
}
#pomar-reviews-widget .ti-review-item{
  padding:0 var(--space-3) !important;
  box-sizing:border-box !important;
}
#pomar-reviews-widget .ti-widget.ti-goog .ti-review-item .ti-inner{
  background:var(--sand-050) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-xs) !important;
  padding:var(--card-pad) !important;
  height:100% !important;
  box-sizing:border-box !important;
}
#pomar-reviews-widget .ti-review-header{
  margin-bottom:var(--space-3) !important;
}
#pomar-reviews-widget .ti-widget .ti-name{
  font-family:var(--font-display) !important;
  font-weight:var(--weight-semibold) !important;
  font-size:var(--text-sm) !important;
  color:var(--text-heading) !important;
}
#pomar-reviews-widget .ti-date{
  font-size:var(--text-xs) !important;
  color:var(--text-muted) !important;
}
#pomar-reviews-widget .ti-review-text-container{
  font-size:var(--text-md) !important;
  line-height:1.5 !important;
  color:var(--text-body) !important;
}
#pomar-reviews-widget .ti-widget .ti-read-more{
  color:var(--text-link) !important;
  font-family:var(--font-body) !important;
}
#pomar-reviews-widget .ti-next,
#pomar-reviews-widget .ti-prev{
  background:var(--sand-050) !important;
  border:1px solid var(--border-subtle) !important;
  box-shadow:var(--shadow-xs) !important;
}
#pomar-reviews-widget .ti-footer{
  margin-top:var(--space-6) !important;
}
#pomar-reviews-widget .ti-rating-text{
  font-size:var(--text-sm) !important;
  color:var(--text-muted) !important;
}
/* ============ life here, in pictures ============ */
.pomar-comm-gallery{ background:var(--surface-page-alt); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.pomar-comm-gallery__inner{
  max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-6);
}
.pomar-comm-gallery__header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); }
.pomar-comm-gallery__header-text{ display:flex; flex-direction:column; gap:var(--space-3); }
.pomar-comm-gallery .pomar-comm-gallery__title{ font:var(--type-h2); font-size:var(--text-3xl); color:var(--text-heading); }
.pomar-comm-gallery__row1{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-4); height:300px; }
.pomar-comm-gallery__row2{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); height:290px; }
.pomar-comm-gallery__row3{ display:grid; grid-template-columns:1fr 1fr 2fr; gap:var(--space-4); height:300px; }

/* Galerie native Gutenberg : 2|1|1, puis 4 colonnes, puis 1|1|2. */
.pomar-community-gallery.wp-block-gallery{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-flow:row dense;
  grid-auto-rows:290px;
  align-items:stretch !important;
  gap:var(--space-4) !important;
  width:100%;
  margin:0 !important;
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image{
  position:relative;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0;
  margin:0 !important;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--sand-200);
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image:first-child,
.pomar-community-gallery.wp-block-gallery > .wp-block-image:last-child{
  grid-column:span 2;
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image > a{
  display:block;
  width:100%;
  height:100%;
  cursor:zoom-in;
  text-decoration:none;
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:cover !important;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image:hover img{
  transform:scale(1.025);
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image > a:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:-4px;
}
.pomar-community-gallery.wp-block-gallery > .wp-block-image > figcaption{
  display:none;
}

/* Lightbox native, sans dependance externe. */
.pomar-lightbox-is-open{
  overflow:hidden;
}
.pomar-community-lightbox{
  width:min(1120px,calc(100vw - 48px));
  height:min(820px,calc(100vh - 48px));
  max-width:none;
  max-height:none;
  padding:0;
  border:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--clay-900,#2d2117);
  color:var(--sand-050,#fffaf2);
}
.pomar-community-lightbox[open]{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center;
}
.pomar-community-lightbox::backdrop{
  background:rgba(20,13,8,.88);
  backdrop-filter:blur(5px);
}
.pomar-community-lightbox__figure{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:28px 0 20px;
}
.pomar-community-lightbox__image{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
}
.pomar-community-lightbox__caption{
  max-width:760px;
  margin:14px auto 0;
  padding:0 20px;
  color:inherit;
  font:var(--type-small);
  text-align:center;
}
.pomar-community-lightbox__close,
.pomar-community-lightbox__nav{
  display:grid;
  place-items:center;
  border:1px solid rgba(255,250,242,.4);
  border-radius:var(--radius-pill);
  background:rgba(45,33,23,.72);
  color:var(--sand-050,#fffaf2);
  cursor:pointer;
}
.pomar-community-lightbox__close{
  position:absolute;
  z-index:2;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  padding:0 0 4px;
  font-size:32px;
  line-height:1;
}
.pomar-community-lightbox__nav{
  position:relative;
  z-index:2;
  width:44px;
  height:44px;
  margin:auto;
  padding:0;
  font-size:22px;
}
.pomar-community-lightbox__close:hover,
.pomar-community-lightbox__nav:hover{
  background:var(--sand-050,#fffaf2);
  color:var(--clay-900,#2d2117);
}

/* ============ your hosts ============ */
.pomar-comm-hosts{
  max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--space-5);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-8); align-items:center;
}
.pomar-comm-hosts__photo{ height:420px; }
.pomar-comm-hosts__text{ display:flex; flex-direction:column; gap:var(--space-4); }
.pomar-comm-hosts .pomar-comm-hosts__title{ font:var(--type-h2); font-size:var(--text-3xl); color:var(--text-heading); }
.pomar-comm-hosts .pomar-comm-hosts__desc{ font:var(--type-body-lg); color:var(--text-body); }

/* ============ CTA ============ */
.pomar-comm-cta{ background:var(--accent); }
.pomar-comm-cta__inner{
  max-width:var(--container-max); margin:0 auto; padding:var(--space-8) var(--space-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4); text-align:center;
}
.pomar-comm-cta .pomar-comm-cta__title{ font:var(--type-h2); font-size:var(--text-3xl); color:var(--clay-900); }
.pomar-comm-cta .pomar-comm-cta__desc{ font:var(--type-body-lg); color:var(--clay-800); max-width:560px; }
.pomar-comm-cta__ctas{ display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-2); flex-wrap:wrap; justify-content:center; }

/* ================= mobile (≤921px, tablette hérite du mobile) ================= */
@media (max-width: 921px){
  .pomar-comm-hero__bg > img{ object-position:center center; }
  .pomar-comm-hero__content{ padding:var(--space-7) var(--space-4) var(--space-6); min-height:440px; justify-content:flex-end; }
  .pomar-comm-hero__phcaption{ display:none; }
  .pomar-comm-hero .pomar-comm-hero__title{ font-size:36px; line-height:1.04; max-width:none; }
  .pomar-comm-hero .pomar-comm-hero__desc{ max-width:none; }
  .pomar-comm-hero__ctas{ flex-direction:column; align-items:stretch; gap:var(--space-3); }
  .pomar-comm-hero__ctas .pomar-comm-btn{ width:100%; }
  .pomar-comm-hero__link{ text-align:center; }

  .pomar-comm-who{ grid-template-columns:1fr; padding:var(--space-7) var(--space-4); gap:var(--space-4); }
  .pomar-comm-who__gallery{ grid-template-columns:1fr 1fr; grid-template-rows:168px; }
  .pomar-comm-who__gallery .pomar-ph--big{ grid-column:1/-1; grid-row:auto; height:270px; }

  .pomar-comm-rhythm__inner{ padding:var(--space-7) var(--space-4); gap:var(--space-5); }
  .pomar-comm-rhythm .pomar-comm-rhythm__title{ font-size:32px; line-height:1.05; }
  .pomar-comm-rhythm__widget{ padding:0; }

  .pomar-comm-reviews{ padding:var(--space-7) var(--space-4); }
  .pomar-comm-reviews__header{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }

  .pomar-comm-gallery__inner{ padding:var(--space-7) var(--space-4); }
  .pomar-comm-gallery__header{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }
  .pomar-comm-gallery__row1{ grid-template-columns:1fr; height:auto; }
  .pomar-comm-gallery__row1 .pomar-ph{ height:270px; }
  .pomar-comm-gallery__row2{ grid-template-columns:1fr 1fr; height:auto; }
  .pomar-comm-gallery__row2 .pomar-ph{ height:168px; }
  .pomar-comm-gallery__row3{ grid-template-columns:1fr; height:auto; }
  .pomar-comm-gallery__row3 .pomar-ph{ height:270px; }

  .pomar-community-gallery.wp-block-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:168px;
  }
  .pomar-community-gallery.wp-block-gallery > .wp-block-image:first-child,
  .pomar-community-gallery.wp-block-gallery > .wp-block-image:last-child{
    grid-column:1/-1;
  }

  .pomar-community-lightbox{
    width:calc(100vw - 24px);
    height:calc(100vh - 24px);
  }
  .pomar-community-lightbox[open]{
    grid-template-columns:48px minmax(0,1fr) 48px;
  }
  .pomar-community-lightbox__figure{
    padding:64px 0 18px;
  }
  .pomar-community-lightbox__nav{
    width:38px;
    height:38px;
  }

  .pomar-comm-hosts{ grid-template-columns:1fr; padding:var(--space-7) var(--space-4); gap:var(--space-4); }
  .pomar-comm-hosts__photo{ height:270px; }

  .pomar-comm-cta__inner{ padding:var(--space-7) var(--space-4); }
  .pomar-comm-cta__ctas{ flex-direction:column; align-items:stretch; width:100%; }
  .pomar-comm-cta__ctas .pomar-comm-btn{ width:100%; }
}