/*
Theme Name: Happy Flower Blocks
Theme URI: https://happyflower.app
Author: Horizon Factory
Description: Gutenberg block theme for the Happy Flower flower-rescue landing site. Content is native blocks, fully client-editable in the Site Editor. Elementor-free.
Version: 0.27.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: happyflower-blocks
*/

/* ============================================================
   Layout primitives — consistent rhythm (the "better margins")
   ============================================================ */
:root{
  --hf-content: 1164px;   /* centered container, matching the reference */
  --hf-edge: 24px;        /* min side gutter on small screens */
  --hf-section: clamp(56px, 6vw, 80px);
  --hf-radius: 24px;
}

/* Centered content container — full-bleed backgrounds, content capped at 1164px. */
.hf-pad{
  padding-left:max(var(--hf-edge), calc((100% - var(--hf-content)) / 2));
  padding-right:max(var(--hf-edge), calc((100% - var(--hf-content)) / 2));
}

/* Vertical rhythm — every section breathes the same. */
.hf-section{ padding-top:var(--hf-section); padding-bottom:var(--hf-section); }

/* Section headings — uppercase Archivo, consistent spacing handled inline. */
.hf-h2{ letter-spacing:.01em; }

img{ max-width:100%; height:auto; }

/* ============================================================
   Header
   ============================================================ */
/* Sticky header: the sticky must sit on the template-part wrapper (the inner
   .hf-header would only stick within the header's own height). */
header.wp-block-template-part{ position:sticky; top:0; z-index:100; }
.hf-header{ box-shadow:0 1px 0 rgba(0,0,0,.06); }
.hf-logo-tile img{ border-radius:11px; box-sizing:border-box; }  /* real logo has its green tile baked in */
.hf-wordmark{ margin:0; letter-spacing:-.01em; white-space:nowrap; }
.hf-wordmark a{ color:inherit; text-decoration:none; }
.hf-logo-tile a{ display:inline-flex; }   /* logo links home */
.hf-actions{ gap:14px !important; }
.hf-dl .wp-block-button__link{ white-space:nowrap; }

/* Main navigation (matches reference: Barlow 600 16px, uppercase, #434343) */
/* ---- Core Navigation block (wp:navigation, class .hf-nav) ---- */
.hf-nav{ flex:1 1 auto; }
.hf-nav .wp-block-navigation__container{ gap:4px; align-items:center; justify-content:center; }

/* Principal (top-level) items */
.hf-nav .wp-block-navigation-item__content{
  position:relative;
  font-family:var(--wp--preset--font-family--heading);
  font-size:16px; font-weight:600; text-transform:uppercase; color:#434343;
  text-decoration:none; white-space:nowrap; padding:9px 11px; border-radius:8px;
  transition:background .15s, color .15s;
}
.hf-nav .wp-block-navigation__submenu-icon{ color:currentColor; padding:0; }
/* underline accent under the principal item (top level only) */
.hf-nav > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before,
.hf-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before{
  content:""; position:absolute; left:11px; right:11px; bottom:5px; height:3px;
  background:var(--wp--preset--color--green-dark); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
/* hover / open: green chip + underline on the principal item */
.hf-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.hf-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content{
  background:var(--wp--preset--color--mint); color:#1a1a1a;
}
.hf-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before,
.hf-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::before{
  transform:scaleX(1);
}

/* Dropdown panel */
.hf-nav .wp-block-navigation__submenu-container{
  min-width:230px; background:#fff; border:1px solid #eef1ee; border-radius:14px;
  box-shadow:0 14px 38px rgba(47,74,58,.14); padding:10px; top:calc(100% + 6px); left:0;
}
.hf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--body); font-size:15px; font-weight:500;
  text-transform:none; color:#3a3a3a; padding:9px 14px; border-radius:8px; width:100%;
}
.hf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before{ display:none; }
.hf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:var(--wp--preset--color--green); color:#fff;
}

.hf-lang{ margin:0; font-size:14px; color:#434343; white-space:nowrap; font-weight:600; }
.hf-dl .wp-block-button__link{ padding-top:13px; padding-bottom:13px; }
.bb-burger{ display:none; }

/* ============================================================
   Hero
   ============================================================ */
.hf-hero{ gap:0 !important; margin-top:0 !important; min-height:clamp(620px, 82vh, 880px); }
main.wp-block-group{ margin-top:0 !important; }
main.wp-block-group > :first-child{ margin-top:0 !important; }
/* kill the root block-gap between the sticky header and the hero */
header.wp-block-template-part + main{ margin-top:0 !important; }
.hf-hero .hf-hero-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,7vw,104px) clamp(32px,4vw,60px) clamp(56px,7vw,104px) clamp(24px,5vw,88px);
}
.hf-hero-title{ margin:0; }
.hf-hl{ color:var(--wp--preset--color--mint); }
.hf-hero .hf-hero-img{ align-self:stretch; }
.hf-hero .hf-hero-img .hf-fill,
.hf-hero .hf-hero-img figure{ height:100%; margin:0; }
.hf-hero .hf-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Mobile: drop the fixed tall height + %-basis (which becomes a height when the
   columns stack) so the hero sizes to its content and the photo sits below. */
@media (max-width:781px){
  .hf-hero{ min-height:0 !important; }
  .hf-hero > .wp-block-column{ flex-basis:auto !important; }
  .hf-hero .hf-hero-text{ justify-content:flex-start; padding:clamp(40px,8vw,64px) clamp(22px,6vw,34px); }
  .hf-hero .hf-hero-img img{ height:auto; aspect-ratio:4/3; max-height:62vh; }
}

/* Light pill button (on the dark hero) */
.hf-btn-light .wp-block-button__link{
  background:#fff !important; color:var(--wp--preset--color--green-dark) !important;
  font-weight:700;
}
.hf-btn-light .wp-block-button__link:hover{ background:var(--wp--preset--color--mint) !important; color:var(--wp--preset--color--green-dark) !important; }

/* Soft sage button (team "Voir plus") */
.hf-btn-soft{ flex:1 1 auto; }
.hf-btn-soft .wp-block-button__link{
  background:var(--wp--preset--color--sage) !important; color:var(--wp--preset--color--green-dark) !important;
  font-weight:600; width:100%; text-align:center; padding:11px 18px;
}
.hf-btn-soft .wp-block-button__link:hover{ background:var(--wp--preset--color--green) !important; color:#fff !important; }

/* ============================================================
   Carousel — Swiper (loop, autoplay) styled to match the design
   ============================================================ */
.hf-swiper{ width:100%; }
.hf-swiper .swiper-slide{ height:auto; display:flex; box-sizing:border-box; }
.hf-swiper .swiper-slide > *{ width:100%; }
/* We render our own controls bar (below), so hide Swiper's built-ins. */
.hf-swiper .swiper-button-next,
.hf-swiper .swiper-button-prev,
.hf-swiper > .swiper-pagination{ display:none; }

.bb-controls{ position:relative; display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px; }
/* Our dots carry the .swiper-pagination class for Swiper; cancel its absolute,
   full-width positioning so prev/dots/next stay centered as a group. */
.bb-controls .swiper-pagination{ position:static !important; width:auto !important; left:auto !important; transform:none !important; flex:0 0 auto; }
.bb-dots{ display:flex; gap:8px; }
.bb-dot{
  width:9px; height:9px; padding:0; border:none; cursor:pointer; border-radius:50%;
  background:#c6d2c7; transition:background .15s, transform .15s;
}
.bb-dot.is-active{ background:var(--wp--preset--color--green); transform:scale(1.3); }
.bb-arrow{
  width:42px; height:42px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid #c6d2c7; background:#fff; color:var(--wp--preset--color--green-dark);
  font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.bb-arrow:hover{ background:var(--wp--preset--color--green); color:#fff; border-color:transparent; }

/* ============================================================
   Partner logo marquee (continuous scroll)
   ============================================================ */
.hf-marquee{
  overflow:hidden; background:transparent; padding:32px 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.hf-marquee-track{
  display:flex; align-items:center; gap:64px; width:max-content;
  background:#F7F8F6;  /* page cream — gives mix-blend-mode:multiply an opaque backdrop so white-bg logos blend in */
  animation:hf-marquee 32s linear infinite;
}
.hf-marquee:hover .hf-marquee-track{ animation-play-state:paused; }
/* Partner logo images */
.hf-logo-img{
  flex:0 0 auto; height:86px; width:auto; object-fit:contain;
  opacity:.85; transition:opacity .2s; mix-blend-mode:multiply;  /* blends white-bg JPEG into the cream */
}
.hf-logo-img[src*="the-bench"]{ height:112px; }    /* The Bench bigger */
.hf-logo-img[src*="agglo"]{ height:64px; }         /* Paris-Saclay smaller */
.hf-marquee:hover .hf-logo-img{ opacity:1; }
/* (text fallback, unused now) */
.hf-logo{
  flex:0 0 auto; white-space:nowrap; font-family:var(--wp--preset--font-family--heading);
  font-weight:700; font-size:20px; letter-spacing:.01em; color:#9aa79c;
  text-transform:uppercase; opacity:.85; transition:color .2s;
}
@keyframes hf-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .hf-marquee-track{ animation:none; } }

/* ============================================================
   Notre promesse — fixed 2 columns (1 green / 1 white)
   ============================================================ */
.hf-promesse-cols{ gap:28px !important; align-items:stretch; margin-top:72px !important; }
.hf-promesse-col{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:20px; box-sizing:border-box;
  padding:clamp(54px,5vw,68px) clamp(28px,3vw,46px) clamp(28px,3vw,46px);
}
.hf-col-white{ border:1px solid #e7ebe7; }
/* icon disc — centered, straddling the top edge (half into the card) */
.hf-col-icon{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  margin:0 !important;
}
.hf-col-icon img{
  width:78px !important; height:78px !important;
  background:var(--wp--preset--color--sage); border-radius:50%;
  border:4px solid #fff;
  padding:16px; box-sizing:border-box;
  box-shadow:0 8px 20px rgba(47,74,58,.14);
}
/* eyebrow */
.hf-eyebrow{
  margin:0 0 14px; font-family:var(--wp--preset--font-family--heading);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.hf-col-green .hf-eyebrow{ color:#9fd3b4; }
.hf-col-white .hf-eyebrow{ color:var(--wp--preset--color--green); }
/* heading (sentence case, large) */
.hf-promesse-h{ margin:0 0 16px; font-size:clamp(23px,2.3vw,30px); line-height:1.18; font-weight:700; }
/* Reserve equal heading height side-by-side so body/note/button rows line up. */
@media (min-width:782px){ .hf-promesse-h{ min-height:3.6em; } }
.hf-col-green .hf-promesse-h{ color:#fff; }
.hf-col-white .hf-promesse-h{ color:#1a1a1a; }
/* body + italic note */
.hf-promesse-body{ margin:0 0 16px; font-size:16px; line-height:1.6; }
.hf-col-green .hf-promesse-body{ color:#e7eee8; }
.hf-col-white .hf-promesse-body{ color:#5b5b5b; }
.hf-promesse-note{ margin-bottom:44px !important; font-size:15px; line-height:1.55; font-style:italic; }
.hf-col-green .hf-promesse-note{ color:#bcd3c4; }
.hf-col-white .hf-promesse-note{ color:#8a978c; }
/* pin the button to the bottom so both columns align */
.hf-promesse-col .wp-block-buttons{ margin-top:auto; }
@media (max-width:781px){ .hf-promesse-cols{ gap:18px !important; } }

/* ============================================================
   Nos univers — category card (arch image + body)
   ============================================================ */
/* Full-bleed gapless image band (matches reference: 3-up, spaceBetween 0, 3:4 sharp) */
.hf-band-section{ padding-top:var(--hf-section); padding-bottom:var(--hf-section); }
/* Inset the band so its content edge lines up with the title (same container). */
.hf-band{
  box-sizing:border-box; width:100%;
  max-width:calc(var(--hf-content) + 2 * var(--hf-edge));
  margin-inline:auto;
  padding-inline:var(--hf-edge);
}
/* Static 3-up (no carousel) */
.hf-solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.hf-solutions-grid > *{ margin:0 !important; }
.hf-solution-slide{ display:flex; }
.hf-solution-slide > .hf-cat{ flex:1; }
@media (max-width:1023px){ .hf-solutions-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .hf-solutions-grid{ grid-template-columns:1fr; } }
.hf-cat{ position:relative; height:100%; overflow:hidden; background:#fff; }
.hf-cat-img{ margin:0; }
.hf-cat-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:0; }

/* Idle: title sits in the white band below the image — a touch taller. */
.hf-cat-tag{ margin:0 !important; padding:22px 24px 28px; color:#080808; }

/* Hover: white panel slides up over the whole card
   (reference: translateY(100%) -> 0 over .5s ease-in-out).
   Disposition (space-between): title top-left, Découvrir centered in the
   middle, description at the bottom — exactly like the original. */
.hf-cat-overlay{
  position:absolute; inset:0; margin:0 !important; background:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,3.2vw,40px);
  transform:translateY(100%); transition:transform .5s ease-in-out;
}
.hf-cat:hover .hf-cat-overlay,
.hf-cat:focus-within .hf-cat-overlay{ transform:translateY(0); }
.hf-ov-title{ margin:0; color:#080808; text-align:left; }
.hf-cat-overlay .wp-block-buttons{ align-self:center; margin:0; }   /* button centered, middle */
.hf-cat-desc{ margin:0; color:#434343; text-align:left; }            /* bottom */
@media (prefers-reduced-motion:reduce){ .hf-cat-overlay{ transition:none; } }

/* ============================================================
   Team card
   ============================================================ */
.hf-team{
  background:#fff; border:1px solid #e7ebe7; border-radius:var(--hf-radius);
  padding:24px; height:100%; box-sizing:border-box;
  box-shadow:0 6px 22px rgba(47,74,58,.06);
  display:flex; flex-direction:column;
}
.hf-team:hover{ box-shadow:0 14px 34px rgba(47,74,58,.12); }
.hf-team-head h3{ margin:0; line-height:1.2; }
.hf-avatar img{ border-radius:50%; }
.hf-team-bio{ flex:1 1 auto; }
.hf-team-foot{ margin-top:auto; }
.hf-li{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0a66c2; color:#fff; text-decoration:none; transition:opacity .15s;
}
.hf-li:hover{ opacity:.85; }

/* ============================================================
   Testimonial — wide, airy block (photo left · quote right)
   ============================================================ */
/* fade the peeking neighbour cards into the background (no hard cut) */
.hf-c-team{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hf-tm{
  display:flex; flex-direction:column;
  background:#fff; border-radius:24px; box-sizing:border-box; height:100%;
  padding:clamp(30px,3.2vw,52px);
  box-shadow:0 6px 22px rgba(47,74,58,.06);
}
.hf-tm-quote{ margin:0 0 28px !important; font-size:clamp(17px,1.5vw,20px); line-height:1.65; color:#3a3a3a; }
/* identity row — small round avatar + name */
.hf-tm-meta{ gap:16px !important; align-items:center; margin-top:auto; }
.hf-tm-photo{ margin:0 !important; flex:0 0 auto; }
.hf-tm-photo img{ width:64px !important; height:64px !important; border-radius:50%; object-fit:cover; display:block; }
.hf-tm-id{ min-width:0; }
.hf-tm-name{ margin:0 !important; font-weight:700; font-size:16px; line-height:1.45; color:#1a1a1a; }
.hf-tm-prog{ margin:0 !important; font-weight:500; font-size:15px; line-height:1.45; color:#6f7d72; }
@media (max-width:781px){ .hf-tm{ padding:clamp(24px,6vw,34px); } }

/* ============================================================
   Event card — dark-green frame, white inner
   ============================================================ */
.hf-event{
  background:var(--wp--preset--color--green); border-radius:22px;
  padding:7px; height:100%; box-sizing:border-box;
}
.hf-event-inner{
  background:#fff; border-radius:14px; padding:26px 22px; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column;
}
/* reserve equal heights so image / date / button line up across cards */
.hf-event-inner h3{ margin:0; line-height:1.25; min-height:2.5em; }
.hf-evt-sub{ min-height:2.9em; }
.hf-loc{ min-height:0; }
.hf-event-inner .hf-time{ margin-top:7px !important; }   /* date sits tight under the place */
.hf-event-inner .hf-btn-soft{ margin-top:auto !important; padding-top:24px; }  /* clear gap above the button */
.hf-dash.wp-block-separator{
  border:none; border-top:2px dashed #d4dcd5; margin:18px 0; width:100%; opacity:1;
}
.hf-event-img img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }
.hf-meta{ margin:6px 0 0; font-size:15px; color:#3a3a3a; display:flex; align-items:flex-start; gap:9px; }
.hf-meta::before{ content:""; flex:0 0 auto; width:17px; height:17px; margin-top:1px; background-size:contain; background-repeat:no-repeat; background-position:center; }
.hf-loc::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2339745A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s7-6.4%207-11a7%207%200%201%200-14%200c0%204.6%207%2011%207%2011z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E"); }
.hf-time::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2339745A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5v4.7l3%201.8%27%2F%3E%3C%2Fsvg%3E"); }

/* ============================================================
   Footer
   ============================================================ */
.hf-footer a{ text-decoration:none; transition:opacity .15s; }
.hf-footer a:hover{ opacity:.8; text-decoration:underline; }
/* whole footer centered */
.hf-footer .hf-foot-cols{ max-width:none; text-align:center; }
.hf-footer .hf-foot-cols > .wp-block-column{ flex:1; }
.hf-footer .hf-foot-bottom{ justify-content:center; text-align:center; }
.hf-footer .hf-foot-bottom .has-text-align-right{ text-align:center; }
.hf-socials{ justify-content:center; }
.hf-foot-brand .hf-logo-tile img{ border-radius:12px; }
/* center the socials + copyright block (override the vertical group's right-align) */
.hf-footer .hf-foot-bottom > .wp-block-group{ align-items:center; }
.hf-socials{ display:flex; gap:12px; justify-content:center; }
.hf-socials a{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff; transition:background .15s;
}
.hf-socials a:hover{ background:rgba(255,255,255,.24); }
.hf-legal{ row-gap:6px; }
.hf-legal a{ text-decoration:none; }
.hf-legal a:hover{ text-decoration:underline; }
@media (max-width:781px){
  .hf-foot-bottom{ gap:24px; justify-content:center; }
  .hf-socials{ justify-content:center; }
}

/* ============================================================
   Mobile menu (burger + drawer) — green palette
   ============================================================ */
.bb-burger{ width:30px; height:22px; padding:0; border:none; background:none; cursor:pointer; flex-direction:column; justify-content:space-between; }
.bb-burger span{ display:block; height:3px; border-radius:2px; background:var(--wp--preset--color--green-dark); transition:transform .25s, opacity .2s; }
body.bb-nav-open .bb-burger span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
body.bb-nav-open .bb-burger span:nth-child(2){ opacity:0; }
body.bb-nav-open .bb-burger span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.bb-drawer{
  position:fixed; top:0; left:0; z-index:200; width:320px; max-width:82vw; height:100%;
  background:var(--wp--preset--color--green-dark);
  transform:translateX(-100%); transition:transform .3s ease;
  display:flex; flex-direction:column; gap:6px; padding:88px 40px 40px;
}
.bb-drawer a{ color:#fff; text-decoration:none; font-size:20px; font-weight:600; padding:10px 0; text-transform:uppercase; letter-spacing:.02em; }
.bb-drawer a:hover{ opacity:.8; }
.bb-drawer-close{ position:absolute; top:24px; right:28px; width:40px; height:40px; border:none; background:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.bb-overlay{ position:fixed; inset:0; z-index:150; background:rgba(20,30,24,.5); opacity:0; visibility:hidden; transition:opacity .3s; }
body.bb-nav-open .bb-drawer{ transform:translateX(0); }
body.bb-nav-open .bb-overlay{ opacity:1; visibility:visible; }

@media (max-width:600px){
  .hf-actions .hf-lang{ display:none; }
}

/* Collapse the main navigation to the hamburger overlay below 900px — the
   inline menu + language + CTA button don't fit on tablet otherwise.
   (Core Navigation hardcodes this at 600px; we raise it.) */
@media (max-width:899.98px){
  .hf-nav .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex !important; }
  .hf-nav .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; }
}

/* ============================================================
   Back-to-top + cookie banner — green palette
   ============================================================ */
.bb-top{
  position:fixed; right:22px; bottom:22px; z-index:120; width:46px; height:46px; border-radius:50%;
  cursor:pointer; border:none; background:var(--wp--preset--color--green); color:#fff; font-size:22px;
  box-shadow:0 6px 18px rgba(47,74,58,.35);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s;
}
.bb-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.bb-top:hover{ background:var(--wp--preset--color--green-dark); }

.bb-cookie{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:300;
  width:min(680px,calc(100% - 32px)); background:#fff; border:1px solid #e1e7e1; border-radius:14px;
  box-shadow:0 12px 40px rgba(47,74,58,.18); padding:18px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; transition:transform .3s ease;
}
.bb-cookie.is-visible{ transform:translate(-50%,0); }
.bb-cookie p{ margin:0; flex:1 1 280px; font-size:.95rem; color:#3a3a3a; }
.bb-cookie a{ color:var(--wp--preset--color--green); }
.bb-cookie-actions{ display:flex; gap:10px; }
.bb-cookie button{ border-radius:999px; padding:10px 22px; cursor:pointer; font-weight:600; font-size:.9rem; }
.bb-cookie-refuse{ background:none; border:1px solid #c6d2c7; color:var(--wp--preset--color--green-dark); }
.bb-cookie-accept{ background:var(--wp--preset--color--green); border:none; color:#fff; }

.wp-block-button__link{ transition:opacity .15s, background .15s, color .15s; }

/* ============================================================
   Fleuristes page — ghost (outline) button on the hero
   ============================================================ */
.hf-btn-ghost .wp-block-button__link,
.hf-btn-light .hf-btn-ghost .wp-block-button__link{
  background:transparent !important; color:#fff !important;
  border:2px solid rgba(255,255,255,.7); font-weight:700;
  /* match the filled button's box exactly: it has 17px/32px padding + no
     border; subtract the 2px border here so both render the same size */
  padding:15px 30px; border-radius:16px;
}
.hf-btn-ghost .wp-block-button__link:hover{
  background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:#fff;
}
/* hero with two buttons: let them sit side by side and wrap on small screens */
.hf-hero .hf-btn-light{ gap:14px; flex-wrap:wrap; }

/* Centered section CTA (green pill) */
.hf-cta-center{ margin-top:48px !important; }
.hf-cta-center .wp-block-button__link{
  padding:14px 30px; font-weight:700; border-radius:999px;
  color:#fff !important;
}
.hf-cta-center .wp-block-button__link:hover{
  background:var(--wp--preset--color--green-dark) !important;
}

/* ============================================================
   Fleuristes — "Le principe" (3 steps, à la happyflower.app)
   ============================================================ */
.hf-principe{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hf-principe > *{ margin:0 !important; }
.hf-step{
  position:relative; box-sizing:border-box; height:100%;
  background:#fff; border:1px solid #e7ebe7; border-radius:18px;
  padding:34px 30px 36px;
  box-shadow:0 6px 22px rgba(47,74,58,.05); transition:box-shadow .2s, transform .2s;
}
.hf-step:hover{ box-shadow:0 14px 34px rgba(47,74,58,.12); transform:translateY(-3px); }
/* decorative arrow, top-right (matches the reference cards) */
.hf-step::after{
  content:"→"; position:absolute; top:30px; right:30px;
  font-size:20px; color:#bcc7bd; transition:color .2s, transform .2s;
}
.hf-step:hover::after{ color:var(--wp--preset--color--green); transform:translateX(4px); }
.hf-step-eyebrow{
  margin:0 0 22px; padding-right:34px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#8a978c;
}
.hf-step-title{ margin:0 0 14px; font-size:22px; font-weight:700; line-height:1.22; color:#1a1a1a; }
.hf-step-body{ margin:0; font-size:16px; line-height:1.6; color:#5b5b5b; }
@media (max-width:900px){ .hf-principe{ grid-template-columns:1fr; } }

/* ============================================================
   Fleuristes — "Nos offres" pricing cards
   ============================================================ */
.hf-offres{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.hf-offres > *{ margin:0 !important; }
.hf-offre{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:#fff; border:2px solid var(--wp--preset--color--green);
  border-radius:20px; box-shadow:0 6px 22px rgba(47,74,58,.06);
  transition:box-shadow .2s, transform .2s;
}
.hf-offre:hover{ box-shadow:0 16px 38px rgba(47,74,58,.14); transform:translateY(-3px); }
.hf-offre-body{ flex:1 1 auto; padding:30px 30px 26px; }
.hf-offre-eyebrow{
  margin:0 0 10px; font-family:var(--wp--preset--font-family--heading);
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#1a1a1a;
}
.hf-offre-price{ margin:0 !important; gap:10px !important; align-items:baseline; }
.hf-offre-amount{
  margin:0 !important; font-family:var(--wp--preset--font-family--heading);
  font-size:38px; font-weight:800; line-height:1; color:#1a1a1a;
}
.hf-offre-unit{ margin:0 !important; font-size:15px; font-weight:600; color:#8a978c; letter-spacing:.04em; }
.hf-offre-rule.wp-block-separator{
  border:none; border-top:1px solid #e3e8e3; margin:20px 0; width:100%; opacity:1;
}
.hf-offre-text{ margin:0 0 14px; font-size:15px; line-height:1.6; color:#5b5b5b; }
.hf-offre-text:last-child{ margin-bottom:0; }
/* green footer bar with the link */
.hf-offre-foot{ margin:0 !important; }
.hf-offre-foot .wp-block-button{ width:100%; }
.hf-offre-foot .wp-block-button__link{
  display:block; width:100%; text-align:center; border-radius:0;
  background:var(--wp--preset--color--green) !important; color:#fff !important;
  font-weight:600; font-size:15px; padding:16px 18px;
}
.hf-offre-foot .wp-block-button__link:hover{ background:var(--wp--preset--color--green-dark) !important; }
@media (max-width:900px){ .hf-offres{ grid-template-columns:1fr; } }

/* ============================================================
   Fleuristes — partner mosaic
   ============================================================ */
.hf-mosaic{
  display:grid; gap:12px;
  grid-template-columns:0.75fr 1fr 1fr 1.3fr 1.05fr 0.95fr;
  grid-template-rows:repeat(5,145px);
  grid-template-areas:
    "a b b e f g"
    "a b b e f g"
    "a b b e f g"
    "c d d e i h"
    "c d d e i h";
}
.hf-mosaic > *{ margin:0 !important; }
.hf-mosaic .hf-mz{ margin:0; overflow:hidden; border-radius:10px; background:#eef1ee; }
.hf-mosaic .hf-mz img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hf-mosaic .hf-mz:hover img{ transform:scale(1.05); }
.hf-mz-a{ grid-area:a; } .hf-mz-b{ grid-area:b; } .hf-mz-c{ grid-area:c; }
.hf-mz-d{ grid-area:d; } .hf-mz-e{ grid-area:e; } .hf-mz-f{ grid-area:f; }
.hf-mz-g{ grid-area:g; } .hf-mz-h{ grid-area:h; } .hf-mz-i{ grid-area:i; }
@media (max-width:900px){
  .hf-mosaic{
    grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:150px;
    grid-template-areas:
      "b b" "a e" "f e" "c d" "i g" "h h";
  }
}
@media (max-width:520px){
  .hf-mosaic{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:200px;
    grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h" "i"; }
}

/* ============================================================
   Page hero banner (image + overlay + title) — e.g. Témoignages
   ============================================================ */
.hf-page-hero{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:clamp(260px,34vw,420px); overflow:hidden; margin-top:0 !important;
}
.hf-page-hero .hf-page-hero-img{ position:absolute; inset:0; margin:0 !important; height:100%; width:100%; }
.hf-page-hero .hf-page-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hf-page-hero::after{ content:""; position:absolute; inset:0; background:rgba(20,40,28,.45); z-index:1; }
.hf-page-hero .hf-page-hero-title{ position:relative; z-index:2; margin:0; text-align:center; }

/* ============================================================
   Testimonials grid (static 3-up of .hf-tm cards)
   ============================================================ */
.hf-tm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; align-items:stretch; }
.hf-tm-grid > *{ margin:0 !important; }
@media (max-width:680px){ .hf-tm-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Stats band (green, flower watermark) — e.g. Notre Mission
   ============================================================ */
/* full-width green band (title sits on white above it) */
.hf-stats{ position:relative; overflow:hidden; }
.hf-stats::before{
  content:""; position:absolute; right:-40px; bottom:-90px;
  width:min(430px,40%); aspect-ratio:1; pointer-events:none; opacity:.08;
  background:url("assets/icons/bloom-mark.svg") center/contain no-repeat;
}
.hf-stats-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hf-stats-lead p{ color:#eaf1ec; font-size:16px; line-height:1.65; }
.hf-stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hf-stats-grid > *{ margin:0 !important; }
.hf-stat{ background:rgba(255,255,255,.12); border-radius:16px; padding:26px 24px; }
.hf-stat-num{ margin:0 !important; font-family:var(--wp--preset--font-family--heading); font-size:clamp(30px,3.4vw,44px); font-weight:800; line-height:1; color:#fff; }
.hf-stat-label{ margin:8px 0 0 !important; color:#cfe0d4; font-size:15px; }
@media (max-width:860px){ .hf-stats-inner{ grid-template-columns:1fr; } }

/* ============================================================
   Team grid — cream cards on a green band (Équipe & Associés)
   ============================================================ */
.hf-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.hf-team-grid > *{ margin:0 !important; }
.hf-team-card{ position:relative; height:100%; box-sizing:border-box; background:#f4f1e9; border-radius:18px; padding:22px; }
.hf-team-photo{ margin:0 0 18px !important; }
.hf-team-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:block; }
.hf-team-name{ margin:0 !important; font-family:var(--wp--preset--font-family--heading); font-weight:700; font-size:19px; text-transform:uppercase; color:#1a1a1a; }
.hf-team-role{ margin:6px 0 0 !important; padding-right:34px; font-style:italic; color:#5b5b5b; font-size:15px; }
.hf-team-li{ position:absolute; bottom:22px; right:22px; line-height:0; color:var(--wp--preset--color--green) !important; transition:color .15s, transform .15s; }
.hf-team-li:hover{ color:var(--wp--preset--color--green-dark) !important; transform:translateY(-1px); }
@media (max-width:900px){ .hf-team-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .hf-team-grid{ grid-template-columns:1fr; } }

/* Tab selector (Événements programmés / passés) */
.hf-tabs-wrap{ text-align:center; }
.hf-tabs-nav{ display:inline-flex; gap:4px; background:#eef1ee; border-radius:999px; padding:5px; margin:0 0 40px; }
.hf-tabs-nav button{ border:none; background:none; cursor:pointer; padding:11px 24px; border-radius:999px; font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:15px; color:#5b5b5b; transition:background .15s, color .15s; }
.hf-tabs-nav button:hover{ color:var(--wp--preset--color--green-dark); }
.hf-tabs-nav button.is-active{ background:var(--wp--preset--color--green); color:#fff; }
.hf-tab-panel{ display:none; }
.hf-tab-panel.is-active{ display:block; }
.hf-tab-empty{ color:#5b5b5b; font-size:16px; }

/* Static events grid (3-up of .hf-event cards) — Événements page */
.hf-events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.hf-events-grid > *{ margin:0 !important; }
@media (max-width:900px){ .hf-events-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* ============================================================
   Blog — posts grid (Query Loop)
   ============================================================ */
.hf-blog .wp-block-post-template{ gap:28px !important; }
.hf-blog li.wp-block-post{ background:#fff; border:1px solid #e7ebe7; border-radius:16px; overflow:hidden; box-shadow:0 6px 22px rgba(47,74,58,.05); display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.hf-blog li.wp-block-post:hover{ box-shadow:0 14px 34px rgba(47,74,58,.12); transform:translateY(-3px); }
.hf-blog .wp-block-post-featured-image{ margin:0 !important; }
.hf-blog .wp-block-post-featured-image img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.hf-blog .wp-block-post-date{ margin:18px 22px 0 !important; font-size:13px; color:#8a978c; text-transform:uppercase; letter-spacing:.07em; }
.hf-blog .wp-block-post-title{ margin:8px 22px 0 !important; font-size:20px; line-height:1.25; }
.hf-blog .wp-block-post-title a{ color:#1a1a1a; text-decoration:none; }
.hf-blog .wp-block-post-title a:hover{ color:var(--wp--preset--color--green); }
.hf-blog .wp-block-post-excerpt{ margin:10px 22px 24px !important; color:#5b5b5b; font-size:15px; }
.hf-blog .wp-block-post-excerpt__more-link{ color:var(--wp--preset--color--green); font-weight:600; }

/* ============================================================
   Single article (blog post)
   ============================================================ */
.hf-article-date{ margin:0 !important; }
.hf-article .wp-block-post-content p{ font-size:17px; line-height:1.75; color:#3a3a3a; margin:0 0 20px; }
.hf-article .wp-block-post-content h2{ font-size:26px; font-weight:700; margin:38px 0 14px; }
.hf-article .wp-block-post-content h3{ font-size:21px; font-weight:700; margin:28px 0 10px; }
.hf-article .wp-block-post-content a{ color:var(--wp--preset--color--green); }
.hf-article .wp-block-post-content img{ border-radius:14px; }
.hf-article-back a{ color:var(--wp--preset--color--green); font-weight:600; text-decoration:none; }
.hf-article-back a:hover{ color:var(--wp--preset--color--green-dark); }

/* ============================================================
   Language switcher — custom dropdown (matches the nav dropdowns)
   ============================================================ */
.hf-lang{ position:relative; margin:0 !important; padding:0; list-style:none;
  font-family:var(--wp--preset--font-family--heading); }
.hf-lang li{ list-style:none; margin:0; }
.hf-lang a{ text-decoration:none; }
.hf-lang img{ height:13px; width:auto; border-radius:2px; display:inline-block; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.hf-lang li:not(.current-lang) > a img{ margin-right:8px; }
/* trigger = the current language */
.hf-lang .current-lang > a{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-size:15px; font-weight:600; color:#434343; padding:7px 6px; line-height:1;
}
.hf-lang .current-lang > a:hover{ color:var(--wp--preset--color--green); }
.hf-lang .current-lang > a::after{
  content:""; width:11px; height:11px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23434343%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; transition:transform .2s ease;
}
.hf-lang:hover .current-lang > a::after,
.hf-lang:focus-within .current-lang > a::after{ transform:rotate(180deg); }
/* dropdown panel = the other language(s) */
.hf-lang li:not(.current-lang){
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:#fff; border:1px solid #eef1ee; border-radius:12px;
  box-shadow:0 14px 38px rgba(47,74,58,.14); padding:6px; z-index:130;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.hf-lang:hover li:not(.current-lang),
.hf-lang:focus-within li:not(.current-lang){
  opacity:1; visibility:visible; transform:translateY(0);
}
.hf-lang li:not(.current-lang) > a{
  display:block; padding:9px 14px; border-radius:8px; white-space:nowrap;
  font-family:var(--wp--preset--font-family--body);
  font-size:15px; font-weight:500; color:#3a3a3a;
}
.hf-lang li:not(.current-lang) > a:hover{
  background:var(--wp--preset--color--green); color:#fff;
}