/* ==========================================================
   WeddingPart – components.css
   Boutons · Cards · Badges · Forms · Hero · Sections · Outils
   · Étapes · Tarifs · CTA · Partenaires · Testimonials
   ========================================================== */

/* ==========================================================
   BOUTONS
   Spécificité renforcée : a.btn, button.btn bat a:not(.wp-element-button)
   généré par Gutenberg/theme.json (spécificité 0,1,1)
   ========================================================== */

/* Base commune — spécificité 0,2,1 via a.btn / button.btn */
a.btn,
button.btn,
input[type="submit"].btn,
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full) !important;
  padding: .7rem 1.5rem;
  cursor: pointer;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
  text-decoration: none !important;
  box-sizing: border-box;
}
a.btn:active, button.btn:active, .btn:active { transform: translateY(1px) !important; }

/* Focus visible WCAG 2.4.7 — toujours present sur clavier.
   Outline en dehors du bouton pour ne pas etre coupe par le border-radius. */
a.btn:focus-visible,
button.btn:focus-visible,
input[type="submit"].btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--wp-brand) !important;
  outline-offset: 3px !important;
}

/* Tailles
   Note : --sm a un padding réduit (utile en barres/footer compactes). Sur mobile,
   on garantit un min-height 44px via la règle media plus bas pour respecter
   les tap targets WCAG 2.5.5. */
a.btn.btn--xs, button.btn.btn--xs, .btn--xs  { font-size: var(--text-xs);   padding: .4rem .9rem;  }
a.btn.btn--sm, button.btn.btn--sm, .btn--sm  { font-size: var(--text-xs);   padding: .5rem 1.1rem; }
a.btn.btn--lg, button.btn.btn--lg, .btn--lg  { font-size: var(--text-base); padding: .9rem 2rem;   }
a.btn.btn--xl, button.btn.btn--xl, .btn--xl  { font-size: var(--text-lg);   padding: 1.1rem 2.5rem; }

/* Mobile tap target — les boutons --xs/--sm ont une hauteur trop courte
   en padding pur. min-height 44px (WCAG 2.5.5) garantit la zone tactile
   sans toucher au look desktop. */
@media (max-width: 768px) {
  a.btn.btn--xs, button.btn.btn--xs, .btn--xs,
  a.btn.btn--sm, button.btn.btn--sm, .btn--sm {
    min-height: var(--tap-target, 44px);
  }
}

/* Primaire — rose brand */
a.btn.btn--primary,
button.btn.btn--primary,
.btn--primary {
  background-color: var(--wp-brand) !important;
  color: #fff !important;
  border-color: var(--wp-brand) !important;
  box-shadow: var(--shadow-brand);
}
a.btn.btn--primary:hover,
button.btn.btn--primary:hover,
.btn--primary:hover {
  background-color: var(--wp-brand-dark) !important;
  border-color: var(--wp-brand-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(181,99,122,.32);
}

/* Gold */
a.btn.btn--gold,
button.btn.btn--gold,
.btn--gold {
  background-color: var(--wp-gold-dark) !important;
  color: #fff !important;
  border-color: var(--wp-gold-dark) !important;
  box-shadow: var(--shadow-gold);
}
a.btn.btn--gold:hover,
button.btn.btn--gold:hover,
.btn--gold:hover {
  background-color: #6E583A !important;
  border-color: var(--wp-gold-dark) !important;
  transform: translateY(-2px);
}

/* Ghost (contour rose) */
a.btn.btn--ghost,
button.btn.btn--ghost,
.btn--ghost {
  background-color: transparent !important;
  color: var(--wp-brand) !important;
  border-color: var(--wp-brand-border) !important;
}
a.btn.btn--ghost:hover,
button.btn.btn--ghost:hover,
.btn--ghost:hover {
  background-color: var(--wp-brand-soft) !important;
  transform: translateY(-1px);
}

/* Ghost sombre (sur fond coloré) */
a.btn.btn--ghost-light,
button.btn.btn--ghost-light,
.btn--ghost-light {
  background-color: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  backdrop-filter: blur(6px);
}
a.btn.btn--ghost-light:hover,
.btn--ghost-light:hover {
  background-color: rgba(255,255,255,.25) !important;
  transform: translateY(-1px);
}

/* Outline neutre */
a.btn.btn--outline,
button.btn.btn--outline,
.btn--outline {
  background-color: transparent !important;
  color: var(--wp-ink) !important;
  border-color: var(--wp-line-strong) !important;
}
a.btn.btn--outline:hover,
.btn--outline:hover {
  background-color: var(--wp-surface-2) !important;
  border-color: var(--wp-muted) !important;
}

/* White (sur fond sombre/brand) */
a.btn.btn--white,
button.btn.btn--white,
.btn--white {
  background-color: #fff !important;
  color: var(--wp-brand) !important;
  border-color: #fff !important;
  box-shadow: var(--shadow-md);
}
a.btn.btn--white:hover,
.btn--white:hover {
  background-color: var(--wp-brand-light) !important;
  color: var(--wp-brand-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Icon uniquement */
a.btn.btn--icon,
.btn--icon {
  padding: .65rem !important;
  border-radius: var(--radius-full) !important;
  aspect-ratio: 1;
}

/* Icon uniquement */
.btn--icon {
  padding: .65rem;
  border-radius: var(--radius-full);
  aspect-ratio: 1;
}

/* ==========================================================
   BADGES / EYEBROW LABELS
   ========================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--wp-brand-dark);
  background: var(--wp-brand-soft);
  border: 1px solid var(--wp-brand-border);
  border-radius: var(--radius-full);
  padding: .3rem .9rem;
}
.eyebrow--gold {
  color: var(--wp-gold-dark);
  background: var(--wp-gold-light);
  border-color: var(--wp-gold-border);
}
.eyebrow--sage {
  color: var(--wp-sage-dark);
  background: var(--wp-sage-light);
  border-color: var(--wp-sage-border);
}
.eyebrow--dark {
  color: var(--wp-ink);
  background: rgba(29,24,25,.06);
  border-color: rgba(29,24,25,.10);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: .2rem .7rem;
  background: var(--wp-brand-light);
  color: var(--wp-brand-dark);
}
.badge--gold  { background: var(--wp-gold-light); color: var(--wp-gold-dark); }
.badge--sage  { background: var(--wp-sage-light); color: var(--wp-sage-dark); }
.badge--free  { background: #E8F5E9; color: #2E7D32; }
.badge--new   { background: var(--wp-brand); color: #fff; }

/* ==========================================================
   SECTION HEAD (titre de section centré ou gauche)
   ========================================================== */
.section-head {
  margin-bottom: var(--space-12);
}
.section-head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head .eyebrow { margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p {
  font-size: var(--text-lg);
  color: var(--wp-soft);
  max-width: 60ch;
  line-height: 1.75;
}

/* ==========================================================
   CARDS — base
   ========================================================== */
.card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--duration-lg) var(--ease),
              box-shadow var(--duration-lg) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card__body   { padding: var(--space-6); }
.card__thumb  { aspect-ratio: 16/9; overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card__thumb img { transform: scale(1.04); }
.card__title  { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card__lead   { font-size: var(--text-sm); color: var(--wp-soft); line-height: 1.65; }
.card__meta   { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--wp-muted); }
.card__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--wp-line); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ==========================================================
   TOOL CARDS — outils interactifs
   ========================================================== */
.tool-card {
  position: relative;
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: transform var(--duration-lg) var(--ease),
              box-shadow var(--duration-lg) var(--ease),
              border-color var(--duration) var(--ease);
  overflow: hidden;
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--wp-brand-soft) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-lg) var(--ease);
  pointer-events: none;
}
.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--wp-brand-border);
}
.tool-card:hover::before { opacity: 1; }

.tool-card__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--wp-brand-soft);
  border: 1px solid var(--wp-brand-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--wp-brand);
}
.tool-card__icon svg { width: 28px; height: 28px; }

.tool-card__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
}

.tool-card__content { flex: 1; }
.tool-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--wp-ink);
}
.tool-card__desc {
  font-size: var(--text-sm);
  color: var(--wp-soft);
  line-height: 1.7;
}

.tool-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tool-card__feat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--wp-soft);
}
.tool-card__feat::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wp-brand-soft);
  border: 1.5px solid var(--wp-brand-border);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23B5637A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

.tool-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--wp-brand);
  text-decoration: none;
  transition: gap var(--duration) var(--ease);
  margin-top: auto;
}
.tool-card__link:hover { gap: var(--space-3); }
.tool-card__link svg { width: 16px; height: 16px; }

/* ==========================================================
   TRUST BAR
   ========================================================== */
.trust-bar {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--wp-line);
  border-bottom: 1px solid var(--wp-line);
  background: var(--wp-surface);
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--wp-soft);
}
.trust-item__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--wp-brand-soft);
  border: 1px solid var(--wp-brand-border);
  display: grid;
  place-items: center;
  color: var(--wp-brand);
  flex-shrink: 0;
}
.trust-item__icon svg { width: 18px; height: 18px; }
.trust-item__num {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--wp-ink);
  display: block;
  line-height: 1;
}

/* ==========================================================
   STEPS — "Comment ça marche"
   ========================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
}
/* Trait reliant les étapes (desktop) */
.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.66% + 28px);
  right: calc(16.66% + 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--wp-brand-border), var(--wp-gold-border), var(--wp-brand-border));
}
@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-6);
}
.step-card__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wp-surface);
  border: 2px solid var(--wp-brand-border);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--wp-brand);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.step-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.step-card__desc {
  font-size: var(--text-sm);
  color: var(--wp-soft);
  line-height: 1.7;
}

/* ==========================================================
   PRICING — teaser
   ========================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  gap: var(--space-6);
  justify-content: center;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: minmax(0, 480px); }
}

.pricing-card {
  background: var(--wp-surface);
  border: 1.5px solid var(--wp-line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-lg) var(--ease), box-shadow var(--duration-lg) var(--ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pricing-card--featured {
  background: linear-gradient(145deg, #fff 0%, var(--wp-brand-light) 100%);
  border-color: var(--wp-brand-border);
  box-shadow: var(--shadow-brand);
}
.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,99,122,.12), transparent 70%);
  pointer-events: none;
}

.pricing-card__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.pricing-card--featured .pricing-card__label { color: var(--wp-brand); }

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.pricing-card__amount {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--wp-ink);
  line-height: 1;
}
.pricing-card__period {
  font-size: var(--text-sm);
  color: var(--wp-muted);
}

.pricing-card__desc {
  font-size: var(--text-sm);
  color: var(--wp-soft);
  line-height: 1.7;
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.pricing-feat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--wp-soft);
}
.pricing-feat svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--wp-sage); }
.pricing-feat--off { color: var(--wp-muted); text-decoration: line-through; }
.pricing-feat--off svg { color: var(--wp-muted); }

/* CTA groupe (deux boutons dans la même carte) */
.pricing-card__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-card__cta-alt {
  font-size: var(--text-sm) !important;
  padding: .85rem 1.25rem !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   PARTNER CARDS
   ========================================================== */
.partner-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-lg) var(--ease), box-shadow var(--duration-lg) var(--ease);
}
.partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partner-card__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--wp-surface-2); }
.partner-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.partner-card:hover .partner-card__thumb img { transform: scale(1.05); }
.partner-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.partner-card__cat { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp-brand); }
.partner-card__name { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 600; color: var(--wp-ink); margin: 0; }
.partner-card__location { font-size: var(--text-xs); color: var(--wp-muted); display: flex; align-items: center; gap: 4px; }
.partner-card__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--wp-line); display: flex; align-items: center; justify-content: space-between; }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonial-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--wp-brand-light);
  pointer-events: none;
}
.testimonial-card__quote {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--wp-ink);
  line-height: 1.6;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--wp-brand-light);
  border: 2px solid var(--wp-brand-border);
}
.testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__name { font-weight: 700; font-size: var(--text-sm); color: var(--wp-ink); display: block; }
.testimonial-card__role { font-size: var(--text-xs); color: var(--wp-muted); }

/* Étoiles */
.stars {
  display: flex;
  gap: 3px;
  color: var(--wp-gold);
}
.stars svg { width: 14px; height: 14px; }

/* ==========================================================
   CTA BANNER
   ========================================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--wp-brand) 0%, var(--wp-brand-dark) 100%);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.cta-banner::before,
.cta-banner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.cta-banner::before { width: 400px; height: 400px; top: -150px; left: -100px; }
.cta-banner::after  { width: 300px; height: 300px; bottom: -120px; right: -80px; }

.cta-banner__eyebrow { margin-bottom: var(--space-4); }
.cta-banner h2 { color: #fff; font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); margin-bottom: var(--space-4); }
.cta-banner p { color: rgba(255,255,255,.82); font-size: var(--text-lg); margin-bottom: var(--space-8); max-width: 50ch; margin-inline: auto; }
.cta-banner__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }

/* ==========================================================
   FORMULAIRES
   ========================================================== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--wp-ink);
}
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--wp-line-strong);
  border-radius: var(--radius-md);
  background: var(--wp-surface);
  color: var(--wp-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--wp-brand);
  box-shadow: 0 0 0 4px var(--wp-brand-soft);
}
.form-textarea, textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--wp-muted); }

/* Search bar hero */
.search-hero {
  display: flex;
  gap: var(--space-3);
  background: var(--wp-surface);
  border: 1.5px solid var(--wp-line);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  box-shadow: var(--shadow-md);
  max-width: 560px;
}
.search-hero input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--text-base);
  padding: 0;
  min-height: auto;
  box-shadow: none;
}
.search-hero input:focus { box-shadow: none; border: 0; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  overflow: hidden;
}

/* Ornements décoratifs */
.hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,99,122,.10) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -150px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,124,.09) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  /* NB : la mise en grille mobile des blocs flottants est définie en bas de
     fichier (après les règles de base .hero__float), pour gagner dans la cascade. */
}

.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__title {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: var(--space-6);
}
.hero__lead {
  font-size: var(--text-lg);
  color: var(--wp-soft);
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: var(--space-8);
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--wp-muted);
  font-weight: 500;
}
.hero__trust-item svg { width: 16px; height: 16px; color: var(--wp-sage); }

/* Visual côté droit */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
}
.hero__ring--1 {
  width: 420px; height: 420px;
  border-color: rgba(181,99,122,.14);
  animation: ring-pulse 8s ease-in-out 2;
}
.hero__ring--2 {
  width: 320px; height: 320px;
  border-color: rgba(201,168,124,.18);
  animation: ring-pulse 8s ease-in-out 2 .8s;
}
.hero__ring--3 {
  width: 220px; height: 220px;
  border-color: rgba(181,99,122,.22);
  animation: ring-pulse 8s ease-in-out 2 1.6s;
}
/* Anneaux et bulles du haut de l'accueil : 2 tours puis repos (audit du 03/11/2026, lot 3 : en boucle, ils
   occupaient le téléphone sans arrêt). Chaque tour finit sur la position de départ : l'arrêt ne se voit pas. */
@media (prefers-reduced-motion: reduce) {
  .hero__ring, .hero__float { animation: none !important; }
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: .7; }
}

.hero__mockup {
  position: relative;
  z-index: 1;
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  width: 340px;
}
.hero__mockup-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--wp-line);
}
.hero__mockup-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.hero__mockup-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  background: var(--wp-surface-2);
}
.hero__mockup-row--brand { background: var(--wp-brand-soft); border: 1px solid var(--wp-brand-border); }
.hero__mockup-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wp-brand-light);
  flex-shrink: 0;
}
.hero__mockup-line {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--wp-line);
  flex: 1;
}
.hero__mockup-line--sm { flex: .6; }
.hero__mockup-badge {
  padding: .25rem .6rem;
  border-radius: var(--radius-full);
  background: var(--wp-sage-light);
  color: var(--wp-sage-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* Floating cards autour du mockup */
.hero__float {
  position: absolute;
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  z-index: 2;
  white-space: nowrap;
}
.hero__float svg { width: 18px; height: 18px; color: var(--wp-brand); flex-shrink: 0; }
.hero__float--1 {
  top: 10%; left: -20px;
  animation: float-1 5s ease-in-out 2;
}
.hero__float--2 {
  bottom: 15%; right: -20px;
  animation: float-2 5s ease-in-out 2 .8s;
}
/* Nouvelle carte flottante : Photos album QR (haut-droite) */
.hero__float--3 {
  top: 6%; right: -22px;
  animation: float-1 5.6s ease-in-out 2 .4s;
}
.hero__float--3 svg { color: var(--wp-sage-dark, #5C7C62); }
/* Nouvelle carte flottante : Budget (bas-gauche, decale) */
.hero__float--4 {
  bottom: 8%; left: -30px;
  animation: float-2 5.4s ease-in-out 2 1.2s;
}
.hero__float--4 svg { color: var(--wp-gold-dark, #A88458); }
/* Masquage progressif sur petits ecrans : evite la surcharge visuelle */
/* Masquages desktop bornés (n'affectent PAS la grille mobile ≤900px) */
@media (min-width: 901px) and (max-width: 980px) {
  .hero__float--3 { display: none; }
}
@keyframes float-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ==========================================================
   PAGE STANDARD
   ========================================================== */
.page-header {
  padding-block: var(--space-12);
  background: linear-gradient(180deg, var(--wp-surface) 0%, var(--wp-surface-3) 100%);
  border-bottom: 1px solid var(--wp-line);
}
.page-header__eyebrow { margin-bottom: var(--space-4); }
.page-header h1 { margin-bottom: var(--space-4); }
.page-header p { font-size: var(--text-lg); color: var(--wp-soft); max-width: 60ch; }

.page__content {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--wp-soft);
}
.page__content h2, .page__content h3 { color: var(--wp-ink); margin-top: var(--space-10); }

/* ==========================================================
   NAVIGATION PAGINATION
   ========================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}
.page-numbers {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--wp-soft);
  border: 1px solid var(--wp-line);
  transition: all var(--duration) var(--ease);
}
.page-numbers:hover { background: var(--wp-brand-soft); border-color: var(--wp-brand-border); color: var(--wp-brand); }
.page-numbers.current { background: var(--wp-brand); border-color: var(--wp-brand); color: #fff; }

/* ==========================================================
   SEARCH FORM WP
   ========================================================== */
.search-form {
  display: flex;
  gap: var(--space-2);
}
.search-form .search-field {
  flex: 1;
  border: 1.5px solid var(--wp-line-strong);
  border-radius: var(--radius-full);
  padding: .65rem 1.2rem;
  font-size: var(--text-sm);
  background: var(--wp-surface);
}
.search-form .search-field:focus {
  outline: none;
  border-color: var(--wp-brand);
  box-shadow: 0 0 0 3px var(--wp-brand-soft);
}
.search-form .search-submit {
  background: var(--wp-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: .65rem 1.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.search-form .search-submit:hover { background: var(--wp-brand-dark); transform: translateY(-1px); }

/* ==========================================================
   TOOLS CATEGORY — sections de la home (3 groupes)
   ========================================================== */
.tools-category {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}
.tools-category:last-of-type { margin-bottom: 0; }

.tools-category__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  font-weight: 600;
  color: var(--wp-ink);
  margin: 0 0 var(--space-6);
  letter-spacing: -.005em;
}
.tools-category__bar {
  width: 32px; height: 3px;
  border-radius: 2px;
  background: var(--wp-brand);
  flex-shrink: 0;
}
.tools-category:nth-of-type(2n) .tools-category__bar { background: var(--wp-gold); }
.tools-category:nth-of-type(3n) .tools-category__bar { background: var(--wp-sage); }

.tools-category__grid { margin-bottom: 0; }

/* ==========================================================
   FIX — Couleur de texte des boutons Gutenberg avec fond foncé
   ----------------------------------------------------------
   .entry-content a { color: brand } écrasait le texte des
   boutons (`.wp-block-button__link.has-brand-background-color`)
   en rose → rose-sur-rose illisible. On force le texte blanc
   sur TOUTE la famille de couleurs sombres de la palette
   (brand, brand-dk, ink, sage, gold). Spécificité élevée
   (0,2,1) pour battre `.entry-content a`.
   ========================================================== */
.wp-block-button__link.has-brand-background-color,
.wp-block-button__link.has-brand-dk-background-color,
.wp-block-button__link.has-ink-background-color,
.wp-block-button__link.has-sage-background-color,
.wp-block-button__link.has-gold-background-color,
a.wp-block-button__link.has-brand-background-color,
a.wp-block-button__link.has-brand-dk-background-color,
a.wp-block-button__link.has-ink-background-color,
a.wp-block-button__link.has-sage-background-color,
a.wp-block-button__link.has-gold-background-color {
  color: #fff !important;
  text-decoration: none !important;
}
.wp-block-button__link.has-brand-background-color:hover,
.wp-block-button__link.has-brand-dk-background-color:hover,
a.wp-block-button__link.has-brand-background-color:hover,
a.wp-block-button__link.has-brand-dk-background-color:hover {
  background-color: var(--wp-brand-dark) !important;
  color: #fff !important;
}

/* Boutons Gutenberg SANS background (style ghost/outline) : texte rose
   brand, soulignement supprimé. */
.wp-block-button__link:not(.has-background):not(.is-style-outline),
a.wp-block-button__link:not(.has-background):not(.is-style-outline) {
  color: var(--wp-brand) !important;
  text-decoration: none !important;
}

/* ==========================================================
   FIX — Boutons Gutenberg qui utilisent vivid-cyan-blue
   ----------------------------------------------------------
   theme.json a defaultPalette:false donc cette couleur n'est
   pas exposée dans l'éditeur, mais d'anciens contenus la
   gardent en dur. On remappe vers la palette rose Brand pour
   éviter les CTA cyan dépareillés sur les landings d'outils.
   ========================================================== */
.wp-block-button .wp-block-button__link.has-vivid-cyan-blue-background-color,
.wp-block-button__link.has-vivid-cyan-blue-background-color,
a.wp-block-button__link.has-vivid-cyan-blue-background-color {
  background-color: var(--wp-brand) !important;
  color: #fff !important;
  border-color: var(--wp-brand) !important;
  box-shadow: var(--shadow-brand);
}
.wp-block-button .wp-block-button__link.has-vivid-cyan-blue-background-color:hover,
.wp-block-button__link.has-vivid-cyan-blue-background-color:hover,
a.wp-block-button__link.has-vivid-cyan-blue-background-color:hover {
  background-color: var(--wp-brand-dark) !important;
  border-color: var(--wp-brand-dark) !important;
  transform: translateY(-1px);
}
.wp-block-button__link.has-vivid-cyan-blue-color {
  color: var(--wp-brand) !important;
}

/* Skin générique de tous les wp-block-button : style "pill brand"
   par défaut (cohérent avec .btn--primary). */
.entry-content .wp-block-button .wp-block-button__link {
  border-radius: var(--radius-full, 9999px);
  padding: .7rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background-color var(--duration) var(--ease);
}

/* CTA en pied de la section outils */
.tools-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-top: var(--space-8);
  border-top: 1px dashed var(--wp-line);
}

/* ==========================================================
   MOBILE-FIRST — finition accueil & global (2026-06-03)
   ========================================================== */
@media (max-width: 640px) {

  /* ── Trust bar : 2 KPI par ligne (2×2), chaque item en colonne centrée ── */
  .trust-bar { padding: var(--space-5) 0; }
  .trust-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-3);
    align-items: start;
  }
  .trust-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.4;
  }
  .trust-item__icon { width: 36px; height: 36px; }
  .trust-item__num { font-size: var(--text-lg); }

  /* ── Respiration un peu plus compacte sur petits écrans ── */
  .section:not(.section--sm) { padding-block: var(--space-12); }
  .section-head { margin-bottom: var(--space-8); }

  /* ── Groupes d'actions : CTA pleine largeur, empilés (gros tap targets) ── */
  .hero__actions,
  .cta-banner__actions,
  .tools-cta,
  .single-cta__actions,
  .faqp-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero__actions > .btn,
  .cta-banner__actions > .btn,
  .tools-cta > .btn,
  .single-cta__actions > .btn,
  .faqp-cta__actions > .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Padding interne des cartes réduit → plus de largeur utile au contenu */
  .pricing-card { padding: var(--space-6); }
  .cta-banner   { padding: var(--space-8) var(--space-5); }
  .step-card    { padding: var(--space-4) var(--space-2); }
}

/* Très petits écrans : la trust bar repasse en 1 colonne si vraiment étroit */
@media (max-width: 340px) {
  .trust-bar__inner { grid-template-columns: 1fr; }
}

/* ==========================================================
   HERO — bulles d'outils supplémentaires + gouttière + version mobile
   ========================================================== */
/* Positions des 2 nouvelles cartes flottantes (milieu gauche / droite) */
.hero__float--5 {
  top: 44%; left: -34px;
  animation: float-1 5.2s ease-in-out 2 1s;
}
.hero__float--5 svg { color: var(--wp-brand); }
.hero__float--6 {
  top: 40%; right: -30px;
  animation: float-2 5.8s ease-in-out 2 .6s;
}
.hero__float--6 svg { color: var(--wp-sage-dark, #5C7C62); }

/* Les 2 extras : masqués seulement dans la bande 901–1024px
   (visibles sur desktop large ET dans la grille mobile ≤900px). */
@media (min-width: 901px) and (max-width: 1024px) {
  .hero__float--5, .hero__float--6 { display: none; }
}

/* GOUTTIÈRE : quand le viewport approche la largeur du container, les cartes
   flottantes (positionnées en absolu) ne doivent plus coller / être coupées
   aux bords → on les rentre. Sans effet en mobile (elles passent en grille). */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero__float--1, .hero__float--4, .hero__float--5 { left: 8px; }
  .hero__float--2, .hero__float--3, .hero__float--6 { right: 8px; }
}

/* ==========================================================
   HERO MOBILE — on GARDE la scène complète (mockup + liste + cartes
   flottantes), juste mise à l'échelle pour tenir dans l'écran.
   Bloc en fin de fichier = gagne dans la cascade sur les règles de base.
   ========================================================== */
@media (max-width: 900px) {
  /* La scène reste visible et centrée (le mockup n'est PAS masqué). */
  .hero__visual {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-8);
  }
  .hero__ring, .hero__mockup { display: block !important; }
}

/* Sur téléphone : on réduit la scène pour qu'elle tienne joliment,
   sans rogner le mockup ni faire fuir les cartes hors de l'écran. */
@media (max-width: 600px) {
  .hero__mockup { width: min(300px, 82vw); padding: var(--space-5); }
  .hero__float {
    font-size: 10.5px;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .hero__float svg { width: 15px; height: 15px; }
  .hero__float strong { font-size: .85rem !important; }
  /* Cartes rentrées dans l'écran (petite gouttière) tout en restant « collées »
     élégamment au mockup, comme sur desktop. */
  .hero__float--1, .hero__float--4, .hero__float--5 { left: 0; }
  .hero__float--2, .hero__float--3, .hero__float--6 { right: 0; }
}

@media (max-width: 380px) {
  .hero__mockup { width: min(260px, 80vw); }
}

/* ---------- Avis de couples (audit du 03/11/2026, lot 4 ; inc/temoignages.php) : bloc vide tant qu'il n'y en a pas ---------- */
.wp-avis__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.wp-avis__card { margin: 0; }
.wp-avis__card blockquote { margin: 0; }
.wp-avis__card blockquote p { margin: 0 0 .6em; }
.wp-avis__card blockquote p:last-child { margin-bottom: 0; }
.wp-avis__card .testimonial-card__role { display: block; }
.wp-avis__mention { max-width: 720px; margin: var(--space-6) auto 0; text-align: center; font-size: var(--text-xs); color: var(--wp-muted); }