﻿/* ===================================================
   YaHaj — Design System CSS
   Inspiré de l'élégance OomraBooking : whitespace généreux,
   arrondis prononcés, flat design, contraste fort.
   Palette : Emerald YaHaj (pas d'ocre).
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Palette YaHaj */
  --color-deep-ink: #0B0F0E;
  --color-emerald: #047857;
  --color-emerald-hover: #065f46;
  --color-soft-emerald: #ECFDF5;
  --color-sand: #F7F3EA;
  --color-off-white: #FAFAF7;
  --color-slate: #475569;
  --color-slate-light: #94A3B8;
  --color-gold: #D97706;
  --gradient-gold: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  --color-location-blue: #0d6efd;

  /* Couleurs fonctionnelles */
  --color-warning: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-negative: #B91C1C;
  --color-negative-bg: #FEE2E2;
  --color-positive: #047857;
  --color-positive-bg: #D1FAE5;

  /* Typographie */
  --font-base: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rayons */
  --radius-sm: 5px;
  --radius-md: 5px;
  --radius-lg: 5px;
  --radius-xl: 5px;

  /* Ombres — Très douces */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);

  /* Bordures */
  --border-subtle: 1px solid rgba(0, 0, 0, 0.06);

  /* Largeur de la colonne de recherche en plein écran, partagée par la barre, la liste de
     résultats et la surcouche de choix du professionnel, pour qu'elles s'alignent. */
  --search-fullscreen-width: 760px;
}

/* ========= BASE ========= */
html {
  scroll-behavior: smooth;
  overflow-y: auto;
}

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-deep-ink);
  background-color: var(--color-off-white);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.yahaj-search-scroll-locked,
body.yahaj-picker-open {
  overflow: hidden;
}

body:not(.yahaj-search-scroll-locked):not(.yahaj-picker-open):not(.modal-open) {
  overflow-y: auto !important;
}

/* ========= TYPOGRAPHIE ========= */
h1,
.h1 {
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-deep-ink);
}

h2,
.h2 {
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-deep-ink);
}

h3,
.h3 {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-deep-ink);
}

.lead {
  font-size: 1.125rem;
  line-height: 1.7;
  /* color: var(--color-slate);*/
}

/* ========= LIENS ========= */
a {
  color: var(--color-emerald);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-emerald-hover);
}

/* ========= BOUTONS ========= */
.btn {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 5px;
  padding: 0.75rem 1.75rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-emerald);
  color: #fff;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3);
}

.btn-primary:hover {
  background-color: var(--color-emerald-hover);
  color: #fff;
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.45);
}

.btn-outline-secondary {
  border: 2px solid var(--color-emerald);
  color: var(--color-emerald);
  background-color: transparent;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.15);
}

.btn-outline-secondary:hover {
  background-color: var(--color-emerald);
  border-color: var(--color-emerald);
  color: #fff;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35);
}

.btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}

/* ========= LAYOUT ========= */
/* page-shell : padding vertical uniquement, la largeur est gérée par Bootstrap .container */
.page-shell {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ========= NAVBAR ========= */
.site-header {
  background-color: #ffffff;
  /* Ombre diffuse pour la profondeur */
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1050;
/*  padding: 0.6rem 0;*/
  /* Plus de hauteur pour "respirer" */
  transition: all 0.3s ease;
}

.site-preferences-bar {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: #fff;
  padding: 0.25rem 0 0.1rem;
}

.site-header .navbar {
  position: relative;
  z-index: 2;
}

.site-preferences-bar .container-fluid {
  max-width: 1320px;
}

.site-header .navbar-brand {
  margin-right: 2.5rem;
  transition: opacity 0.2s ease;
}

.site-header .navbar-brand:hover {
  opacity: 0.85;
}

.navbar-logo {
  height: 58px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

.btn-close-custom {
  width: 38px;
  height: 38px;
  border: 2px solid var(--color-gold) !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  background: transparent;
  padding: 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-close-custom i {
  font-size: 18px;
  font-weight: bold;
}

.btn-close-custom:hover {
  background-color: var(--color-gold);
  color: #fff;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D97706' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.country-selector {
  line-height: 1;
}

.country-selector-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 28px;
  padding: 0.15rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-deep-ink);
  box-shadow: none;
}

.country-selector-toggle:not([data-bs-toggle]) {
  cursor: default;
}

.country-selector-toggle:hover,
.country-selector-toggle:focus {
  color: var(--color-deep-ink);
  background: transparent;
}

.country-selector-flag {
  width: 18px;
  height: 13px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.country-selector-name {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.country-selector-chevron {
  display: inline-block;
  color: var(--color-gold);
  font-size: 0.72rem;
}

.country-selector-menu {
  min-width: 220px;
  padding: 0.35rem;
  border: var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 1060;
}

.country-selector-form {
  margin: 0;
}

.country-selector-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  border-radius: 6px;
  font-weight: 600;
}

.country-selector-option.active,
.country-selector-option:active {
  background: var(--color-soft-emerald);
  color: var(--color-emerald);
}

.country-select-flag {
  width: 18px;
  height: 13px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.navbar-country-mobile .country-selector-name {
  display: none;
}

.navbar-country-mobile .country-selector-toggle {
  min-height: 34px;
  padding: 0 0.1rem;
}

@media (max-width: 991.98px) {
  .site-preferences-bar {
    display: none;
  }
}

@media (min-width: 992px) {
  .offcanvas-header {
    display: none !important;
  }
}

.site-header .nav-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #1a1a1a !important;
  /* Contraste doux */
  padding: 0.75rem 0.75rem !important;
  border-radius: 8px;
  margin: 0 0.15rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.site-header .navbar-actions {
  flex-shrink: 0;
}

.site-header .nav-link:hover {
  background-color: #f8fafc;
  /* Gris très clair au survol */
  color: var(--color-emerald) !important;
}

/* Animation discrète des icônes SVG */
.site-header .nav-link svg {
  transition: transform 0.2s ease;
  opacity: 0.8;
}

.site-header .nav-link:hover svg {
  transform: translateY(-2px);
  opacity: 1;
}

/* Style des Menus Déroulants (Dropdowns) */
.site-header .dropdown-menu {
  border: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 0.75rem;
  margin-top: 10px;
}

.site-header .dropdown-item {
  border-radius: 6px;
  padding: 0.6rem 1rem;
  font-weight: 500;
}

.site-header .dropdown-item:hover {
  background-color: var(--color-soft-emerald);
  color: var(--color-emerald);
}

.site-header .nav-search {
  max-width: 360px;
}

.site-header .nav-search input {
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  background-color: var(--color-off-white);
  transition: all 0.15s ease;
}

.site-header .nav-search input:focus {
  outline: none;
}

/* ========= HERO SECTION (NEW PREMIUM DESIGN) ========= */
.hero-section {
  background: linear-gradient(135deg, #FAFAF7 0%, #FFFFFF 100%);
  padding: 60px 0 80px 0;
  position: relative;
  overflow: hidden;
}

/* Motif géométrique discret en fond */
.hero-section::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 50%;
  height: 120%;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23047857' stroke-width='1' stroke-opacity='0.06'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3Cpath d='M40 20l20 20-20 20-20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background-color: var(--color-soft-emerald);
  color: var(--color-emerald);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-deep-ink);
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
}

.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  /* color: var(--color-slate);*/
  margin-bottom: 2.5rem;
  max-width: 90%;
}

.hero-search-wrapper {
  max-width: 600px;
  margin-bottom: 20px;
}

/* Preuves de confiance */
.trust-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  /* color: var(--color-slate);*/
}

.proof-item i {
  color: var(--color-emerald);
  font-size: 16px;
}

/* Bloc communautaire */
.hero-community-box {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  max-width: 500px;
}

.hero-community-box h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* ========= HERO SECTION (MOBILE FIRST & PREMIUM) ========= */
.hero-section {
  background: linear-gradient(135deg, #FAFAF7 0%, #FFFFFF 100%);
  padding: 40px 0 60px 0;
  position: relative;
  overflow: visible;
  /* Changé de hidden à visible pour l'autocomplete */
  text-align: center;
  z-index: 10;
  /* Pour passer devant les sections suivantes */
}

/* La bannière porte son propre plan d'empilement : sans ce relèvement, la recherche en plein écran
   qu'elle contient passerait sous la navbar collante. */
.hero-section:has(.is-fullscreen) {
  z-index: 2000 !important;
}

/* Motif géométrique discret en fond */
.hero-section::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 100%;
  height: 120%;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23047857' stroke-width='1' stroke-opacity='0.06'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3Cpath d='M40 20l20 20-20 20-20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 15;
}


.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background-color: rgba(4, 120, 87, 0.05);
  color: var(--color-emerald);
  font-weight: 600;
  font-size: 11px;
  border: 1px solid rgba(4, 120, 87, 0.1);
  border-radius: 50px;
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-deep-ink);
  margin-bottom: 1.25rem;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  /* color: var(--color-slate);*/
  margin-bottom: 2.5rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero-search-wrapper {
  max-width: 100%;
  margin-bottom: 24px;
}

/* Preuves de confiance */
.trust-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
  justify-content: center;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  /*color: var(--color-slate-light);*/
}

.proof-item i {
  color: var(--color-emerald);
  font-size: 14px;
}

/* Bloc communautaire (Encart léger) */
.hero-community-box {
  background-color: transparent;
  border: none;
  border-left: 3px solid var(--color-soft-emerald);
  padding: 8px 0 8px 20px;
  margin: 0 auto;
  text-align: left;
  max-width: 500px;
  position: relative;
  z-index: 2;
}

.hero-community-box h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-deep-ink);
}

.hero-community-box p {
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.hero-community-box .btn-link {
  color: var(--color-emerald);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-community-box .btn-link:hover {
  text-decoration: underline;
}

.home-kaaba-hero {
/*  background:
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #022c22 0%, #064e3b 80%, #022c22 100%);*/
  min-height: 560px;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: visible;
  position: relative;
}

/* Empilement du hero, du fond vers l'avant : motif géométrique (1), illustration
   décorative (2), colonne de contenu (3). Le voile de la recherche est un pseudo-élément
   de cette colonne : sans ce rang supérieur, l'illustration resterait éclairée par-dessus. */
.home-kaaba-hero-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: 1180px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.home-kaaba-hero .hero-badge {
  /*color: #fbbf24;*/
  border: 1px solid rgba(251, 191, 36, 0.3);
  background-color: rgba(251, 191, 36, 0.08);
  backdrop-filter: blur(4px);
  padding: 6px 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.home-kaaba-hero .hero-title {
    font-size: clamp(2.3rem, 5.5vw, 4.4rem);
    max-width: 900px;
    font-weight: 600;
    line-height: 1.15;
    color: #1f2937;
    /*letter-spacing: -0.02em;*/
    background: none;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
}

.home-kaaba-hero .hero-subtitle {
 /* color: rgba(248, 250, 252, 0.88);*/
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin-bottom: 2rem;
  max-width: 780px;
 /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);*/
}

.home-agency-search {
  margin: 0 auto 2rem;
  max-width: 1040px;
  width: 80%;
}

.home-agency-search form,
.home-agency-search .search-autocomplete-wrapper {
  width: 100%;
}

.home-hero-helper {
  align-items: center;
  color: var(--color-slate);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 0.93rem;
  gap: 0.35rem 0.55rem;
  justify-content: center;
  line-height: 1.45;
  margin: 0 auto 1.15rem;
  max-width: min(920px, 100%);
  padding: 0;
}

.home-hero-helper a {
  align-items: center;
  color: var(--color-gold);
  display: inline-flex;
  gap: 0.35rem;
  font-weight: 800;
  transition: all 0.2s ease;
  text-decoration: none;
  border-bottom: 1px dashed rgba(212, 163, 89, 0.65);
  padding-bottom: 0.05rem;
}

.home-hero-helper a:hover {
  color: #b45309;
  border-bottom-style: solid;
}

.home-kaaba-hero .trust-proofs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
  gap: 0.5rem 1.1rem;
  max-width: 100%;
}

.home-kaaba-hero .proof-item {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.45rem;
  letter-spacing: 0;
  line-height: 1.2;
  min-height: auto;
  padding: 0;
  text-transform: none;
  white-space: normal;
}

.home-kaaba-hero .proof-item i.text-gold {
  color: var(--color-gold) !important;
  font-size: 0.82rem;
}

.home-actions-section {
  background: #fafaf7;
  padding: 4.75rem 0;
}

.home-actions-heading {
  margin: 0 auto 3.75rem;
/*  max-width: 780px;*/
  text-align: center;
}

.home-actions-heading h2 {
  color: var(--color-deep-ink);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.12;
  margin: 0.75rem 0 1rem;
}

.home-actions-heading p {
  color: var(--color-slate);
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 0;
}

.home-action-row {
  align-items: center;
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.78fr);
  margin-bottom: 4.5rem;
}

.home-action-row:last-child {
  margin-bottom: 0;
}

.home-action-row-reverse {
  grid-template-columns: minmax(360px, 0.78fr) minmax(0, 0.9fr);
}

.home-action-row-reverse .home-action-media {
  order: 2;
}

.home-action-row-reverse .home-action-copy {
  order: 1;
}

.home-action-media {
  margin-inline: auto;
  max-width: 540px;
  position: relative;
  width: 100%;
}

/* <picture> est inline par défaut : sans cette règle, l'image perd sa largeur de référence. */
.home-action-media picture {
  display: block;
  width: 100%;
}

.home-action-media img {
  aspect-ratio: 16 / 11;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-action-badge {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  bottom: 1.25rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  color: var(--color-deep-ink);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 800;
  gap: 0.65rem;
  left: 1.25rem;
  padding: 0.85rem 1rem;
  position: absolute;
}

.home-action-badge i {
  color: var(--color-gold);
  font-size: 1.1rem;
}

.home-action-copy {
  max-width: 520px;
}

.home-action-kicker {
  align-items: center;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.45rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.home-action-kicker i {
  color: var(--color-gold);
}

.home-action-copy h3 {
  color: var(--color-deep-ink);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 1rem;
}

.home-action-copy p {
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.home-action-copy ul {
  border-left: 3px solid rgba(0, 128, 96, 0.18);
  color: var(--color-deep-ink);
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
}

.home-action-copy li {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

.home-action-copy li:last-child {
  margin-bottom: 0;
}

.home-action-link {
  align-items: center;
  border: 1px solid rgba(0, 128, 96, 0.18);
  border-radius: 999px;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 800;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

.home-action-link:hover {
  background: rgba(0, 128, 96, 0.06);
  color: var(--color-emerald);
}

@media (max-width: 767.98px) {
  .home-kaaba-hero {
    min-height: auto;
    padding: 2.75rem 0 1.75rem;
  }

  .home-kaaba-hero::before {
    background-position: center 38%;
    background-size: 760px auto;
    opacity: 0.05;
  }

  .home-agency-search {
    width: 100%;
  }

  .home-hero-helper {
    display: flex;
    font-size: 0.88rem;
    gap: 0.2rem;
    margin-bottom: 0.85rem;
    max-width: 320px;
    padding: 0;
    text-align: center;
    width: 100%;
  }

  .home-hero-helper a {
    display: inline-flex;
    justify-content: center;
    width: auto;
  }

  .home-kaaba-hero .trust-proofs {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-bottom: 0;
    max-width: 320px;
    width: 100%;
  }

  .home-kaaba-hero .proof-item {
    justify-content: center;
    max-width: 100%;
    text-align: center;
  }

  .home-actions-section {
    padding: 3.25rem 0;
  }

  .home-actions-heading {
    margin-bottom: 2.25rem;
    text-align: left;
  }

  .home-actions-heading h2 {
    font-size: 1.9rem;
  }

  .home-action-row,
  .home-action-row-reverse {
    gap: 1.75rem;
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
  }

  .home-action-row-reverse .home-action-media,
  .home-action-row-reverse .home-action-copy {
    order: initial;
  }

  .home-action-copy {
    max-width: none;
  }

  .home-action-media {
    max-width: 100%;
  }

  .home-action-copy h3 {
    font-size: 1.55rem;
  }

  .home-action-media img {
    aspect-ratio: 4 / 3;
  }

  .home-action-badge {
    bottom: 0.75rem;
    font-size: 0.78rem;
    left: 0.75rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.7rem 0.8rem;
  }
}


/* Section visuelle (Illustration + Mini Card) */
.hero-preview {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-illustration {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

/* <picture> est inline par défaut : sans cette règle, l'image n'a plus de largeur de référence. */
.hero-preview picture {
  display: block;
  width: 100%;
}

.preview-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  width: 260px;
  margin-top: -40px;
  z-index: 10;
  text-align: left;
}

.preview-summary-box {
  background-color: #F8FAFC;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.preview-summary-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
  color: var(--color-emerald);
  letter-spacing: 0.5px;
}

.preview-summary-text {
  font-size: 11px;
  line-height: 1.4;
  /* color: var(--color-slate);*/
  margin: 0;
}

.preview-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
}

.preview-tag-positive {
  background-color: #ECFDF5;
  color: #065F46;
}

.preview-tag-warning {
  background-color: #FFFBEB;
  color: #92400E;
}

/* ========== TABLET & DESKTOP (LARGE SCREENS) ========== */
@media (min-width: 992px) {
  .hero-section {
    padding: 50px 0;
    /*text-align: left;*/
  }

  /* Hero en deux colonnes : le texte s'aligne à gauche, l'illustration occupe la droite.
     Sous 992 px la colonne image disparaît et tout redevient centré. */
  .home-kaaba-hero-content {
    align-items: flex-start !important;
    margin-inline: 0 !important;
    text-align: left !important;
  }

  .home-kaaba-hero .hero-title {
    font-size: clamp(2.4rem, 3.4vw, 3.15rem);
    max-width: 100%;
  }

  .home-kaaba-hero .hero-subtitle {
    max-width: 100%;
  }

  .home-agency-search {
    margin: 0 0 2rem 0 !important;
    width: 100% !important;
  }

  .home-hero-helper {
    justify-content: flex-start;
    margin-inline: 0;
    text-align: left;
  }

  .home-kaaba-hero .trust-proofs {
    justify-content: flex-start !important;
  }

  .hero-community-box {
    margin: 0;
  }

  .hero-preview {
    justify-content: center;
    margin-top: 0;
  }

  /* Ombre portée douce : le hero est sur fond clair, une ombre marquée salirait le crème. */
  .hero-illustration {
    border-radius: 24px;
    box-shadow: 0 22px 45px rgba(1, 25, 18, 0.12) !important;
    filter: none !important;
    max-width: 100% !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .hero-illustration:hover {
    box-shadow: 0 28px 55px rgba(1, 25, 18, 0.16) !important;
    transform: translateY(-6px) scale(1.01);
  }

  .preview-card {
    position: absolute;
    bottom: 20px;
    left: -20px;
    margin-top: 0;
    width: 320px;
  }
}

@media (min-width: 1200px) {
  .preview-card {
    left: -40px;
  }
}

/* ========= GLOBAL SEARCH COMPONENT ========= */
.search-bar {
  display: flex;
  align-items: center;
  /* Centrage vertical crucial */
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
  height: 68px;
  /* Un peu plus haut pour accueillir le label Desktop */
  padding-left: 10px;
}

.search-bar:focus-within {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--color-gold);
  /* Passage en Amber Gold au focus */
}

.search-bar.has-autocomplete {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.search-bar .search-icon-wrapper {
  /*padding-left: 10px;*/
  padding-right: 10px;
  display: flex;
  align-items: center;
  color: var(--color-slate-light);
  border-right: 1px solid var(--color-emerald);
  margin-right: 10px;
}

.search-bar .search-icon-wrapper svg {
  fill: var(--color-slate-light) !important;
  /* Force le gris au lieu du bleu */
}

.search-bar button.btn-search-inner {
  background-color: var(--color-gold) !important;
  border: none !important;
  outline: none !important;
  width: auto;
  height: 46px;
  padding: 0 1.25rem !important;
  margin-right: 8px;
  cursor: pointer;
  border-radius: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
  color: white !important;
  overflow: hidden;
  white-space: nowrap;
}

.search-autocomplete-wrapper.is-typing .btn-search-inner {
  width: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.btn-search-inner .btn-text {
  max-width: 100px;
  opacity: 1;
  margin-right: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.95rem;
}

.search-autocomplete-wrapper.is-typing .btn-search-inner .btn-text {
  max-width: 0;
  opacity: 0;
  margin-right: 0;
}


.search-bar button.btn-search-inner:hover {
  background-color: #b45309 !important;
  /* Orange foncé au survol */
  transform: scale(1.05);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  border: none !important;
  padding: 0 !important;
  font-size: 1.1rem;
  font-weight: 400;
  /* Retour au poids normal */
  outline: none !important;
  background: transparent;
  box-shadow: none !important;
  color: #0f172a;
}

/* On force le placeholder à être fin et discret */
.search-bar input::placeholder {
  font-weight: 400 !important;
  color: #94a3b8 !important;
  font-size: 0.95rem;
}

.search-desktop-label {
    font-size: 14px;
    font-weight: 400;
    /*color: #64748b;*/
    margin-bottom: 2px;
    /* Ajout d'espace pour ne pas être collé */
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    text-align: left !important;
}

.search-autocomplete-wrapper {
  width: 100%;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-gold);
  /* Correspondance avec le focus de la barre */
  border-top: none;
  z-index: 1051;
  max-height: 400px;
  overflow-y: auto;
  clip-path: inset(0 round 0 0 24px 24px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  text-align: left;
}

.btn-clear-search {
  display: none;
  /* Caché par défaut, visible seulement en fullscreen mobile */
  border: none;
  background: transparent;
  padding: 0 15px;
  color: #0d6efd;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Fusion visuelle barre/résultats sur Desktop : suppression de la ligne de séparation */
@media (min-width: 992px) {
  .search-bar.has-autocomplete {
    border-bottom: none !important;
  }

  .autocomplete-results {
    border-top: none !important;
  }
}

/* Version Compacte Navbar Desktop */
.navbar-search-desktop .search-bar {
  height: 46px !important;
  border-radius: 23px !important;
  background-color: #f1f5f9 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.navbar-search-desktop .search-bar:focus-within {
  background-color: #fff !important;
  border-color: var(--color-gold) !important;
  box-shadow: var(--shadow-sm) !important;
}

.navbar-search-desktop .search-bar.has-autocomplete {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: none !important;
  background-color: #fff !important;
}

.navbar-search-desktop .search-desktop-label {
  display: none !important;
}

.navbar-search-desktop .search-icon-wrapper {
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 5px !important;
}

.navbar-search-desktop .search-icon-wrapper i {
  font-size: 18px !important;
}

.navbar-search-desktop .autocomplete-input {
  font-size: 0.95rem !important;
}

.navbar-search-desktop .btn-search-inner {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.navbar-search-desktop .btn-search-inner .btn-text {
  display: none !important;
}

.navbar-search-desktop .btn-search-inner svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* SQUEEZE NAVBAR (992px - 1199px) - Optimisation tablettes larges */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-header .container-fluid {
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .site-preferences-bar .container-fluid {
    max-width: 100% !important;
  }

  .site-header .navbar-brand {
    margin-right: 0.75rem !important;
  }

  .navbar-logo {
    height: 32px !important;
  }

  .offcanvas-body .navbar-nav:first-child {
    margin-left: 0.5rem !important;
    gap: 0.25rem !important;
  }

  .site-header .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  .navbar-search-desktop {
    max-width: 330px !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .navbar-search-desktop .search-bar {
    height: 42px !important;
  }

  .site-header .btn-primary {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

.site-header .btn-primary {
  white-space: nowrap;
}

/* NAVBAR DESKTOP STANDARD (>= 1200px) */
@media (min-width: 1200px) {
  .site-header .container-fluid {
    max-width: 1320px !important;
    /* Alignement avec le reste du site */
  }

  .site-preferences-bar .container-fluid {
    max-width: 1320px !important;
  }
}




@keyframes fadeInBackdrop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ========= RECHERCHE EN PLEIN ÉCRAN =========
   Même rendu sur tous les écrans : chercher un professionnel est une tâche à part entière, qui
   mérite l'écran entier plutôt qu'une liste suspendue sous un champ.
   La barre et les résultats restent contenus dans une colonne centrée : étalés sur toute la largeur
   d'un moniteur, deux mots par ligne se perdraient dans le vide. */
.search-autocomplete-wrapper.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #fff !important;
  z-index: 1060 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.5rem 1rem 0 !important;
}

.search-autocomplete-wrapper.is-fullscreen > * {
  width: 100% !important;
  max-width: var(--search-fullscreen-width) !important;
  margin-inline: auto !important;
}

/* Le bandeau de titre reste hors champ : la barre de recherche se suffit, et son intitulé
   redirait ce que le placeholder annonce déjà. */
.mobile-search-header {
  display: none;
}

.is-fullscreen .mobile-search-header {
  display: none !important;
}

/* Deux surcouches partagent cette présentation : le composant de recherche passé en plein écran,
   et le choix du professionnel à évaluer, qui est déjà sa propre surcouche. Une seule apparence
   pour une seule intention — trouver quelqu'un. */
.is-fullscreen .search-bar,
.review-picker .search-bar {
  border-radius: 0 !important;
  border: none !important;
  padding: 10px 5px !important;
  background: #fff !important;
  height: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
}

/* Le bouton de fermeture, à gauche de la barre : en plein écran, plus rien d'autre ne permet de
   revenir en arrière puisqu'il n'y a plus de « dehors » où cliquer. */
.btn-close-search {
  display: none;
  border: none !important;
  background: transparent !important;
  color: #D97706 !important;
  font-size: 1.6rem;
  padding: 0;
  margin-right: 10px;
  flex-shrink: 0;
  line-height: 1;
}

.is-fullscreen .btn-close-search {
  display: block !important;
}

/* La zone de saisie prend tout le reste de l'espace */
.is-fullscreen .search-input-wrapper,
.review-picker .search-input-wrapper {
  flex: 1 !important;
  border-bottom: 2px solid #10B981 !important;
  padding-bottom: 2px !important;
  margin: 0 5px !important;
  display: flex !important;
}

.is-fullscreen .autocomplete-input,
.review-picker .autocomplete-input {
  width: 100% !important;
  font-size: 1.05rem !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  color: #0f172a !important;
  outline: none !important;
}

.is-fullscreen .autocomplete-input::placeholder,
.review-picker .autocomplete-input::placeholder {
  font-size: 0.95rem !important;
  color: #94a3b8 !important;
}

.is-fullscreen .btn-search-inner {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  margin-left: 5px;
}

/* L'icône de gauche cède la place au bouton de fermeture, et la croix intérieure fait doublon avec
   lui. Le sélecteur nomme la barre pour l'emporter sur les ajustements en petit écran. */
.is-fullscreen .search-bar .search-icon-wrapper,
.is-fullscreen .btn-clear-search,
.review-picker .search-bar .search-icon-wrapper,
.review-picker .btn-clear-search {
  display: none !important;
}

/* Les résultats occupent tout l'espace restant et défilent seuls. */
.is-fullscreen .autocomplete-results,
.review-picker .autocomplete-results {
  position: static !important;
  box-shadow: none !important;
  border: none !important;
  max-height: none !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background: #fff !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

.is-fullscreen .autocomplete-results::before,
.review-picker .autocomplete-results::before {
  display: none !important;
}

.is-fullscreen .autocomplete-item,
.review-picker .autocomplete-item {
  padding: 0.75rem 0.875rem !important;
  border-bottom: 1px solid #f8f9fa !important;
}

/* Le wizard du dépôt d'avis se transforme : sans cela il devient le référent du positionnement
   fixe et retient la surcouche à l'intérieur de son cadre. */
.wizard-step:has(.is-fullscreen) {
  transform: none !important;
  animation: none !important;
}

@media (max-width: 991px) {
  .btn-gold {
    background-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
  }
}


/* Correction Homepage : Annule l'héritage Gold sur le bouton (X) */
/* ========= POPULAR SEARCHES ========= */
.popular-link {
  text-decoration: none;
  color: var(--color-deep-ink);
  transition: all 0.25s ease;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
}

.popular-link:hover {
  background: #f8f9fa;
  color: #0d6efd;
  transform: translateX(5px);
}

.popular-link strong {
  font-weight: 700;
}

.popular-link i {
  font-size: 1.1rem;
  transition: transform 0.25s ease;
}

.popular-link:hover i {
  transform: scale(1.2);
}

@media (max-width: 576px) {
  .popular-link {
    padding: 12px 0;
  }
}

/* Filtres de la page Agences */
.filter-group .form-select {
  border-radius: 20px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s;
  cursor: pointer;
}

.filter-group .form-select:hover {
  border-color: var(--color-emerald);
  background-color: #fff;
}

.filter-group .form-select:focus {
  border-color: var(--color-emerald);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1);
}

.form-check-label {
  font-size: 0.875rem;
  color: #4b5563;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-emerald);
  border-color: var(--color-emerald);
}

/* Pagination */
.btn-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-pagination:hover:not(:disabled) {
  border-color: var(--color-emerald);
  color: var(--color-emerald);
  background-color: #f0fdf4;
}

.btn-pagination:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f9fafb;
}

.pagination-container {
  padding-top: 2rem;
  border-top: 1px solid #f1f5f9;
}

.pagination-info {
  color: #6b7280;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .btn-pagination {
    padding: 0.5rem 0.75rem;
    min-width: 44px;
    height: 44px;
  }
}

.bg-emerald-soft {
  background-color: var(--color-soft-emerald) !important;
}

.bg-off-white {
  background-color: var(--color-off-white) !important;
}

.bg-warning-soft {
  background-color: var(--color-warning-bg) !important;
}

.text-warning-dark {
  color: var(--color-warning) !important;
}

.text-emerald {
  color: var(--color-emerald) !important;
}

.text-location-blue {
  color: var(--color-location-blue) !important;
}

/* Masque très épais (10px) pour avaler l'ombre du bas du search-bar, fusionnant les deux entités */
.autocomplete-results::before {
  content: "";
  position: absolute;
  top: -1px;
  /* Remonté pour masquer la jonction exacte */
  left: 0;
  right: 0;
  height: 2px;
  /* Plus fin, juste pour la transition */
  background: #fff;
  z-index: 1052;
}

.autocomplete-item {
  padding: 8px 15px;
  border-bottom: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.autocomplete-item span {
  line-height: 1.2;
}

.autocomplete-item small {
  line-height: 1.2;
  margin-top: 1px;
}

.autocomplete-item:hover {
  background-color: #f1f3f4;
}

.btn-gold-search {
  background-color: var(--color-gold) !important;
  border: none;
  transition: all 0.2s ease;
  font-size: 14px;
}

.btn-gold-search:hover {
  background-color: var(--color-warning) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  color: #fff !important;
}

.hero-section .search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 1.125rem 1.25rem;
  font-size: 1rem;
  outline: none;
  background: transparent;
  color: var(--color-deep-ink);
}

.hero-section .search-bar input::placeholder {
  color: var(--color-slate-light);
}


/* Responsive : Indépendance totale de la search-bar sur mobile */
@media (max-width: 576px) {
  .search-bar {
    text-align: left !important;
    align-items: center !important;
  }

  .search-bar .search-icon-wrapper {
    padding-right: 0.2rem !important;
    display: flex !important;
  }

  .search-bar .search-input-wrapper {
    align-items: flex-start !important;
    /* Force l'alignement à gauche du label/input */
    text-align: left !important;
    padding-left: 0 !important;
  }

  .search-bar .search-desktop-label {
    display: block !important;
    text-align: left !important;
    font-size: 12px !important;
    margin-bottom: 2px !important;
    width: 100% !important;
  }

  .search-bar input {
    padding: 0.5rem 0 !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    width: 100% !important;
  }

  .search-bar input::placeholder {
    font-size: 0.8rem !important;
  }

  /* Taille des résultats en mobile */
  .autocomplete-item span {
    font-size: 0.9rem !important;
    text-align: left !important;
  }

  .autocomplete-item small {
    font-size: 0.75rem !important;
    text-align: left !important;
  }

  .search-bar button.btn-search-inner {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin-right: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .search-bar button.btn-search-inner .btn-text {
    display: none !important;
  }

  .search-bar button.btn-search-inner svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* Sur un écran étroit, le texte d'invite doit rentrer sans se faire tronquer. */
  .is-fullscreen .search-bar input::placeholder,
  .review-picker .search-bar input::placeholder {
    font-size: 0.75rem !important;
  }
}

/* ========= CARTES ========= */
/* Style OomraBooking : arrondis prononcés, pas de bordure visible, ombre douce */
.content-panel,
.review-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: none;
  transition: box-shadow 0.25s ease;
}

.agency-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.agency-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-emerald-light, #10b981);
}

.agency-card-identity,
.agency-detail-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.agency-detail-identity {
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.agency-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
  color: var(--color-emerald);
  font-weight: 800;
  letter-spacing: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.agency-logo-md {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
}

.agency-logo-lg {
  width: 80px;
  height: 80px;
  font-size: 1.65rem;
  border-radius: 16px;
}

.agency-logo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  z-index: 2;
}

.agency-logo-initials {
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  z-index: 2;
  font-family: "Outfit", "Inter", system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
}

.agency-logo-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: radial-gradient(rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px);
  background-size: 7px 7px;
  pointer-events: none;
  z-index: 1;
}

.page-header-logo-wrapper {
  margin-right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-header-logo-wrapper .agency-logo {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.min-width-0 {
  min-width: 0;
}

@media (max-width: 575.98px) {
  .agency-detail-identity {
    gap: 0.875rem;
    padding: 1rem;
  }

  .agency-logo-lg {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
    border-radius: 12px;
  }
}

.rating-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ========= AGENCY ALERTS ========= */
.critical-alert-strip {
  background: #991b1b;
  color: #fff;
  padding: 0.75rem 0;
}

.critical-alert-strip-inner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.critical-alert-strip-inner i {
  font-size: 1.5rem;
  flex: 0 0 auto;
}

.critical-alert-strip-inner strong,
.critical-alert-strip-inner span {
  display: block;
}

.critical-alert-strip-inner strong {
  font-size: 0.95rem;
}

.critical-alert-strip-inner span {
  font-size: 0.85rem;
  opacity: 0.9;
}

.critical-alert-strip-inner a {
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.agency-alerts-widget,
.agency-alert-banner {
  margin-bottom: 1.5rem;
}

.agency-alerts-widget {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 1.25rem;
}

.agency-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agency-alert-card,
.agency-alert-banner-item {
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  background: #fff;
}

.agency-alert-card.is-critical,
.agency-alert-banner-item.is-critical {
  border-left: 3px solid #dc2626;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.04), #fff 36%);
}

.agency-alert-card.is-warning,
.agency-alert-banner-item.is-warning {
  border-left: 3px solid var(--color-gold);
  background: linear-gradient(90deg, rgba(224, 122, 0, 0.05), #fff 36%);
}

.agency-alert-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.agency-alert-card:hover {
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.agency-alert-card-link {
  border-radius: inherit;
  inset: 0;
  position: absolute;
  z-index: 1;
}

.agency-alert-card :is(.agency-alert-main, .agency-alert-chevron) {
  position: relative;
  z-index: 2;
}

.agency-alert-main {
  display: flex;
  gap: 0.7rem;
  min-width: 0;
}

.agency-alert-icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.agency-alert-chevron {
  color: rgba(15, 23, 42, 0.32);
  font-size: 0.9rem;
  transition: color 0.15s ease, transform 0.15s ease;
}

.agency-alert-card:hover .agency-alert-chevron {
  color: var(--color-emerald);
  transform: translateX(2px);
}

.agency-alert-status {
  color: var(--color-deep-ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

.is-critical .agency-alert-icon {
  color: #b91c1c;
}

.is-warning .agency-alert-icon {
  color: #92400e;
}

.agency-alert-card h3,
.agency-alert-banner-item h2 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}

.agency-alert-description {
  color: var(--color-slate);
  font-size: 0.84rem;
  line-height: 1.4;
}

.agency-alert-card .agency-alert-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agency-alert-description > :last-child {
  margin-bottom: 0;
}

.agency-alert-banner-item .agency-alert-description {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.agency-alert-source {
  color: var(--color-slate);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.agency-alert-source a {
  font-weight: 700;
}

.agency-alert-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.btn-alert-primary,
.btn-alert-secondary {
  align-items: center;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.btn-alert-primary {
  color: var(--color-emerald);
}

.btn-alert-primary:hover {
  color: var(--color-emerald-dark);
  text-decoration: underline;
}

.btn-alert-secondary {
  color: var(--color-slate);
}

.btn-alert-secondary:hover {
  color: var(--color-deep-ink);
  text-decoration: underline;
}

.agency-alert-banner-item {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.agency-alert-banner-item .agency-alert-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ========= ASSISTANT YAHaj ========= */
.yahaj-assistant-panel {
  margin: 0;
}

.yahaj-assistant-shell {
  border: var(--border-subtle);
  border-left: 3px solid var(--color-emerald);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.yahaj-assistant-context {
  align-items: center;
  color: var(--color-emerald);
  display: inline-flex;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
}

.yahaj-assistant-context i {
  color: var(--color-gold);
}

.yahaj-assistant-panel.is-compact .section-header-mobile {
  margin-bottom: 0.75rem !important;
}

.yahaj-assistant-panel.is-compact .yahaj-assistant-shell {
  padding: 0.95rem 1rem;
}

.yahaj-assistant-panel.is-compact .yahaj-assistant-intro {
  align-items: center;
  margin-bottom: 0.75rem;
}

.yahaj-assistant-panel.is-compact .yahaj-assistant-intro p {
  font-size: 0.94rem;
  line-height: 1.45;
}

.yahaj-assistant-panel.is-compact .yahaj-assistant-form textarea {
  min-height: 52px;
  padding-block: 0.7rem;
}

.yahaj-assistant-panel.is-compact .yahaj-assistant-submit {
  min-width: 140px;
}

.yahaj-assistant-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.yahaj-assistant-intro p {
  color: var(--color-slate);
  margin: 0;
  max-width: 760px;
}

.yahaj-assistant-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.yahaj-assistant-prompts button {
  border: 1px solid rgba(4, 120, 87, 0.16);
  border-radius: var(--radius-md);
  background: var(--color-soft-emerald);
  color: var(--color-emerald);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.7rem;
}

.yahaj-assistant-prompts button:hover {
  border-color: rgba(4, 120, 87, 0.3);
  background: #fff;
}

.yahaj-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
}

.yahaj-assistant-form textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-md);
  color: var(--color-deep-ink);
  font: inherit;
  line-height: 1.45;
  padding: 0.85rem 1rem;
}

.yahaj-assistant-form textarea:focus {
  border-color: var(--color-emerald);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
  outline: none;
}

.yahaj-assistant-submit {
  align-items: center;
  align-self: stretch;
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  min-width: 150px;
  white-space: nowrap;
}

.yahaj-assistant-status {
  color: var(--color-slate);
  font-size: 0.9rem;
  min-height: 1.4rem;
  margin-top: 0.75rem;
}

.yahaj-assistant-status[data-tone="danger"] {
  color: var(--color-negative);
  font-weight: 600;
}

.yahaj-assistant-status[data-tone="warning"] {
  color: var(--color-warning);
  font-weight: 600;
}

.yahaj-assistant-results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.yahaj-assistant-answer {
  align-items: flex-start;
  background: var(--color-off-white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-md);
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
}

.yahaj-assistant-answer.is-clarification {
  background: rgba(255, 251, 235, 0.75);
  border-color: rgba(180, 83, 9, 0.16);
}

.yahaj-assistant-answer i {
  color: var(--color-gold);
  margin-top: 0.1rem;
}

.yahaj-assistant-answer p {
  color: var(--color-slate);
  margin: 0;
}

.yahaj-assistant-criteria,
.yahaj-assistant-meta,
.yahaj-assistant-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.yahaj-assistant-criteria span,
.yahaj-assistant-meta span,
.yahaj-assistant-reasons span {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-slate);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
}

.yahaj-assistant-card-quality {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  margin-top: 0.45rem;
  padding: 0.25rem 0.5rem;
  width: fit-content;
}

.yahaj-assistant-card-quality[data-tone="empty"],
.yahaj-assistant-card-quality[data-tone="low"] {
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(180, 83, 9, 0.18);
  color: var(--color-warning);
}

.yahaj-assistant-card-quality[data-tone="medium"] {
  background: rgba(13, 110, 253, 0.06);
  border-color: rgba(13, 110, 253, 0.16);
  color: #0b5ed7;
}

.yahaj-assistant-card-quality[data-tone="high"] {
  background: var(--color-soft-emerald);
  border-color: rgba(4, 120, 87, 0.16);
  color: var(--color-emerald);
}

.yahaj-assistant-meta span[data-tone="empty"],
.yahaj-assistant-meta span[data-tone="low"] {
  border-color: rgba(180, 83, 9, 0.18);
  background: rgba(254, 243, 199, 0.55);
  color: var(--color-warning);
}

.yahaj-assistant-meta span[data-tone="medium"] {
  border-color: rgba(13, 110, 253, 0.16);
  background: rgba(13, 110, 253, 0.06);
  color: #0b5ed7;
}

.yahaj-assistant-meta span[data-tone="high"] {
  border-color: rgba(4, 120, 87, 0.16);
  background: var(--color-soft-emerald);
  color: var(--color-emerald);
}

.yahaj-assistant-agencies {
  display: grid;
  gap: 0.65rem;
}

.yahaj-assistant-comparison {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.75rem;
  overflow: hidden;
  padding: 0.95rem;
}

.yahaj-assistant-comparison-header h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
}

.yahaj-assistant-comparison-profile {
  background: var(--color-soft-emerald);
  border: 1px solid rgba(4, 120, 87, 0.14);
  border-radius: var(--radius-sm);
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 0.45rem;
  padding: 0.25rem 0.55rem;
}

.yahaj-assistant-comparison-header p {
  color: var(--color-slate);
  font-size: 0.9rem;
  margin: 0;
}

.yahaj-assistant-comparison-recommendation {
  background: var(--color-soft-emerald);
  border: 1px solid rgba(4, 120, 87, 0.14);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
}

.yahaj-assistant-comparison-recommendation-header {
  align-items: flex-start;
  display: flex;
  gap: 0.65rem;
}

.yahaj-assistant-comparison-recommendation-header i {
  color: var(--color-emerald);
  font-size: 1.1rem;
  margin-top: 0.1rem;
}

.yahaj-assistant-comparison-recommendation-header strong {
  color: var(--color-deep-ink);
  display: block;
  font-size: 0.95rem;
}

.yahaj-assistant-comparison-recommendation-header span {
  color: var(--color-emerald);
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 0.15rem;
}

.yahaj-assistant-comparison-recommendation p {
  color: var(--color-slate);
  font-size: 0.9rem;
  margin: 0;
}

.yahaj-assistant-compact-list {
  display: grid;
  gap: 0.25rem;
}

.yahaj-assistant-compact-list > strong {
  color: var(--color-deep-ink);
  font-size: 0.82rem;
}

.yahaj-assistant-compact-list ul {
  color: var(--color-slate);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
  padding-left: 1rem;
}

.yahaj-assistant-comparison-table {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(calc(var(--compare-columns) - 1), minmax(110px, 1fr));
  overflow-x: auto;
}

.yahaj-assistant-comparison-cell {
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  color: var(--color-slate);
  font-size: 0.84rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
}

.yahaj-assistant-comparison-cell.is-heading {
  border-top: 0;
  color: var(--color-deep-ink);
  font-weight: 800;
}

.yahaj-assistant-comparison-cell.is-heading a {
  color: var(--color-emerald);
}

.yahaj-assistant-comparison-cell.is-heading span {
  color: var(--color-slate);
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 0.1rem;
}

.yahaj-assistant-comparison-cell.is-label {
  color: var(--color-deep-ink);
  font-weight: 700;
}

.yahaj-assistant-agency {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.9rem 1rem;
}

.yahaj-assistant-agency:hover {
  border-color: rgba(4, 120, 87, 0.18);
  box-shadow: var(--shadow-sm);
}

.yahaj-assistant-agency h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.1rem;
}

.yahaj-assistant-agency-main p {
  color: var(--color-slate);
  margin: 0;
}

.yahaj-assistant-evidence {
  font-size: 0.84rem;
  line-height: 1.45;
  margin-top: 0.55rem !important;
}

.yahaj-assistant-agency-side {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: right;
}

.yahaj-assistant-agency-side strong {
  color: var(--color-emerald);
  font-size: 1.25rem;
  line-height: 1;
}

.yahaj-assistant-agency-side span {
  color: var(--color-slate);
  font-size: 0.75rem;
  font-weight: 600;
}

.yahaj-assistant-agency-side a {
  color: var(--color-emerald);
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 0.45rem;
}

.yahaj-assistant-info {
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
}

.yahaj-assistant-info-heading {
  align-items: center;
  color: var(--color-deep-ink);
  display: flex;
  gap: 0.45rem;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.yahaj-assistant-info-heading i {
  color: var(--color-gold);
}

.yahaj-assistant-info ul {
  color: var(--color-slate);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
  padding-left: 1.1rem;
}

.yahaj-assistant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.yahaj-assistant-actions a {
  align-items: center;
  border: 1px solid rgba(4, 120, 87, 0.18);
  border-radius: var(--radius-md);
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 38px;
  padding: 0.45rem 0.75rem;
}

.yahaj-assistant-actions a i {
  color: var(--color-gold);
  margin-right: 0.35rem;
}

.yahaj-assistant-actions a:hover {
  background: var(--color-soft-emerald);
}

.yahaj-assistant-clarification {
  background: #fff;
  border: 1px dashed rgba(180, 83, 9, 0.28);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem;
}

.yahaj-assistant-clarification > strong {
  color: var(--color-deep-ink);
  font-size: 0.92rem;
}

.yahaj-assistant-clarification p {
  color: var(--color-slate);
  font-size: 0.88rem;
  margin: 0;
}

.yahaj-assistant-suggested {
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  display: grid;
  gap: 0.6rem;
  padding-top: 0.75rem;
}

.yahaj-assistant-suggested > strong {
  color: var(--color-deep-ink);
  font-size: 0.88rem;
}

.yahaj-assistant-suggested .yahaj-assistant-prompts {
  justify-content: flex-start;
}

/* Assistant conversationnel : meme langage visuel que l'autocomplete */
.yahaj-assistant-shell {
  border: 0;
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.yahaj-assistant-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 470px;
  overflow-y: auto;
  padding: 0 0.15rem 0.85rem;
  scroll-behavior: smooth;
}

.yahaj-assistant-starter[hidden] {
  display: none;
}

.yahaj-assistant-starter {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.yahaj-assistant-message {
  display: flex;
  gap: 0.65rem;
  max-width: 100%;
}

.yahaj-assistant-message.is-user {
  justify-content: flex-end;
}

.yahaj-assistant-response-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.yahaj-assistant-avatar {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(4, 120, 87, 0.16);
  border-radius: 50%;
  color: var(--color-emerald);
  display: flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  margin-top: 0.15rem;
  width: 34px;
}

.yahaj-assistant-bubble {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  color: var(--color-slate);
  max-width: min(760px, 100%);
  padding: 0.9rem 1rem;
}

.yahaj-assistant-message.is-user .yahaj-assistant-bubble {
  background: var(--color-soft-emerald);
  border-color: rgba(4, 120, 87, 0.16);
  color: var(--color-deep-ink);
}

.yahaj-assistant-bubble p {
  margin: 0;
}

.yahaj-assistant-context {
  margin-bottom: 0.55rem;
}

.yahaj-assistant-results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.yahaj-assistant-form {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 32px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.55rem;
}

.yahaj-assistant-form:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 12px 34px rgba(217, 119, 6, 0.15);
}

.yahaj-assistant-inputbar {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding-left: 0.3rem;
}

.yahaj-assistant-input-icon {
  align-items: center;
  color: var(--color-emerald);
  display: flex;
  flex: 0 0 28px;
  font-size: 1.25rem;
  justify-content: center;
}

.yahaj-assistant-form textarea,
.yahaj-assistant-panel.is-compact .yahaj-assistant-form textarea {
  border: 0;
  box-shadow: none;
  line-height: 1.45;
  min-height: 68px;
  overflow-y: hidden;
  padding: 0.9rem 0;
  resize: none;
}

.yahaj-assistant-form textarea:focus {
  border: 0;
  box-shadow: none;
}

.yahaj-assistant-submit,
.yahaj-assistant-panel.is-compact .yahaj-assistant-submit {
  align-self: stretch;
  background: var(--gradient-gold);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.22);
  min-width: 142px;
  padding-inline: 1.25rem;
}

.yahaj-assistant-submit:hover {
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
}

.yahaj-assistant-answer {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.hero-section .yahaj-assistant-panel {
  margin-top: 1.6rem;
}

.hero-section .yahaj-assistant-thread {
  max-height: 380px;
}

.hero-section .yahaj-assistant-message.is-assistant .yahaj-assistant-bubble {
  max-width: 100%;
}

.yahaj-assistant-home-intro {
  margin-bottom: 0.75rem;
}

.yahaj-assistant-home-intro p {
  color: var(--color-slate);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 760px;
}

.yahaj-assistant-home-prompts {
  justify-content: flex-start;
  margin-top: 0.85rem;
}

.yahaj-assistant-home-prompts button,
.assistant-conversation-page .yahaj-assistant-prompts button {
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
}

.yahaj-assistant-form,
.yahaj-assistant-panel.is-compact .yahaj-assistant-form {
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  display: block;
  min-height: 64px;
  padding: 0.45rem 4.15rem 0.45rem 3.25rem;
  position: relative;
}

.yahaj-assistant-form:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 18px 42px rgba(217, 119, 6, 0.14);
}

.yahaj-assistant-inputbar {
  display: block;
  min-width: 0;
  padding: 0;
}

.yahaj-assistant-input-icon {
  align-items: center;
  bottom: 1.03rem;
  color: var(--color-emerald);
  display: flex;
  font-size: 1.1rem;
  height: 1.6rem;
  justify-content: center;
  left: 1.05rem;
  position: absolute;
  width: 1.6rem;
}

.yahaj-assistant-form textarea,
.yahaj-assistant-panel.is-compact .yahaj-assistant-form textarea {
  border: 0;
  box-shadow: none;
  color: var(--color-deep-ink);
  font: inherit;
  line-height: 1.45;
  max-height: 180px;
  min-height: 44px;
  overflow-y: auto;
  padding: 0.62rem 0 0.45rem;
  resize: none;
  width: 100%;
}

.yahaj-assistant-form textarea:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.yahaj-assistant-submit,
.yahaj-assistant-panel.is-compact .yahaj-assistant-submit {
  align-items: center;
  background: var(--gradient-gold);
  border: 0;
  border-radius: 50%;
  bottom: 0.58rem;
  box-shadow: 0 9px 22px rgba(217, 119, 6, 0.25);
  color: #fff;
  display: inline-flex;
  height: 2.9rem;
  justify-content: center;
  min-width: 0;
  padding: 0;
  position: absolute;
  right: 0.58rem;
  width: 2.9rem;
}

.yahaj-assistant-submit span {
  display: none;
}

.yahaj-assistant-submit i {
  font-size: 1.25rem;
}

.yahaj-assistant-submit[disabled] {
  opacity: 0.72;
}

.yahaj-assistant-answer {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  display: block;
  padding: 1rem 1.05rem;
}

.yahaj-assistant-answer-content {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.yahaj-assistant-answer-content strong {
  color: var(--color-deep-ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.yahaj-assistant-answer-body {
  color: var(--color-slate);
  display: grid;
  gap: 0.7rem;
}

.yahaj-assistant-answer-body p {
  color: var(--color-slate);
  line-height: 1.75;
  margin: 0;
}

.yahaj-assistant-answer-body ul,
.yahaj-assistant-answer-body ol {
  color: var(--color-slate);
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.2rem;
}

.yahaj-assistant-answer-body li {
  line-height: 1.7;
}

.yahaj-assistant-answer-body a {
  color: var(--color-emerald);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16rem;
  word-break: break-word;
}

.yahaj-assistant-answer-body.is-structured {
  gap: 0.75rem;
}

.yahaj-assistant-answer-intro,
.yahaj-assistant-answer-closing {
  font-size: 0.98rem;
}

.yahaj-assistant-answer-section {
  border-left: 2px solid rgba(4, 120, 87, 0.16);
  display: grid;
  gap: 0.5rem;
  padding: 0.15rem 0 0.15rem 0.9rem;
}

.yahaj-assistant-answer-section h4 {
  color: var(--color-deep-ink);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
}

.yahaj-assistant-answer-section ul {
  margin: 0;
}

.yahaj-assistant-sources-block,
.yahaj-assistant-complements {
  display: grid;
  gap: 0.75rem;
}

.yahaj-assistant-sources-list {
  display: grid;
  gap: 0.75rem;
}

.yahaj-assistant-source-item {
  background: rgba(250, 250, 247, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
}

.yahaj-assistant-source-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.yahaj-assistant-source-title a,
.yahaj-assistant-source-title strong {
  color: var(--color-deep-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.yahaj-assistant-source-type {
  background: rgba(4, 120, 87, 0.08);
  border-radius: 999px;
  color: var(--color-emerald);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
}

.yahaj-assistant-source-heading,
.yahaj-assistant-source-excerpt {
  color: var(--color-slate);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.yahaj-assistant-source-heading {
  color: var(--color-deep-ink);
  font-weight: 600;
}

.yahaj-assistant-source-date {
  color: var(--color-slate-light);
  font-size: 0.78rem;
  font-weight: 600;
}

.yahaj-assistant-thinking {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--color-slate);
  display: inline-flex;
  font-weight: 700;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  width: fit-content;
}

.yahaj-assistant-trustline {
  align-items: center;
  color: var(--color-slate-light);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.yahaj-assistant-trustline i {
  font-style: normal;
}

.yahaj-assistant-evidence-drawer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  margin-top: 0.1rem;
  padding-top: 0.7rem;
}

.yahaj-assistant-evidence-drawer summary {
  color: var(--color-slate);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none;
}

.yahaj-assistant-evidence-drawer summary::-webkit-details-marker {
  display: none;
}

.yahaj-assistant-evidence-drawer summary::after {
  color: var(--color-slate-light);
  content: "˅";
  margin-left: 0.45rem;
}

.yahaj-assistant-evidence-drawer[open] summary::after {
  content: "˄";
}

.yahaj-assistant-evidence-drawer-body {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.9rem;
}

.yahaj-assistant-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.yahaj-assistant-actions-inline a,
.yahaj-assistant-clarification .yahaj-assistant-prompts button,
.yahaj-assistant-suggested .yahaj-assistant-prompts button {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: var(--color-deep-ink);
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 600;
  gap: 0.45rem;
  justify-content: center;
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.yahaj-assistant-actions-inline a:hover,
.yahaj-assistant-clarification .yahaj-assistant-prompts button:hover,
.yahaj-assistant-suggested .yahaj-assistant-prompts button:hover {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(217, 119, 6, 0.22);
  color: var(--color-gold-deep, #b45309);
}

.yahaj-assistant-actions-inline a i,
.yahaj-assistant-clarification .yahaj-assistant-prompts button i,
.yahaj-assistant-suggested .yahaj-assistant-prompts button i {
  color: var(--color-gold);
  font-size: 0.84rem;
}

.yahaj-assistant-clarification {
  border: 0;
  padding: 0;
}

.yahaj-assistant-clarification p {
  color: var(--color-slate);
  font-size: 0.94rem;
  font-weight: 600;
  margin: 0;
}

.yahaj-assistant-suggested > strong {
  color: var(--color-slate);
  font-size: 0.9rem;
  font-weight: 700;
}

.yahaj-thinking-dots {
  display: inline-flex;
  gap: 0.25rem;
}

.yahaj-thinking-dots i {
  animation: yahajThinkingPulse 1s infinite ease-in-out;
  background: var(--color-gold);
  border-radius: 50%;
  display: block;
  height: 0.42rem;
  width: 0.42rem;
}

.yahaj-thinking-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.yahaj-thinking-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes yahajThinkingPulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.yahaj-assistant-reset {
  background: transparent;
  border: 0;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 0.75rem;
  padding: 0;
}

.yahaj-assistant-reset[hidden] {
  display: none;
}

.assistant-page-shell {
  padding-bottom: 2rem;
}

.assistant-page-header {
  margin-bottom: 1.25rem;
}

.assistant-conversation-page {
  background: #fff;
  min-height: calc(100vh - 220px);
  padding: 1.5rem;
}

.assistant-conversation-page .yahaj-assistant-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: min(68vh, 760px);
  padding: 0;
}

.assistant-conversation-page .yahaj-assistant-thread {
  flex: 1;
  max-height: none;
  min-height: 48vh;
  padding: 0 0 1.15rem;
}

.assistant-conversation-page .yahaj-assistant-form {
  bottom: 1rem;
  position: sticky;
  z-index: 5;
}

.assistant-conversation-page .yahaj-assistant-message.is-assistant .yahaj-assistant-bubble {
  max-width: min(760px, 100%);
}

.assistant-conversation-page .yahaj-assistant-results {
  gap: 1rem;
}

.assistant-conversation-page .yahaj-assistant-reset {
  align-self: flex-start;
}

.yahaj-assistant-panel.is-conversation-page {
  position: relative;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell {
  gap: 1.25rem;
  min-height: min(72vh, 820px);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-thread {
  margin: 0 auto;
  max-width: 980px;
  min-height: 58vh;
  overflow-y: auto;
  padding: 0 0 1.4rem;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 40vh;
  padding: 3rem 1rem 1rem;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-message {
  display: block;
  justify-content: center;
  max-width: 100%;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-avatar {
  display: none;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-bubble {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: min(760px, 100%);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-context {
  display: none;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-bubble p {
  color: var(--color-deep-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 36rem;
  text-wrap: balance;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-prompts {
  justify-content: center;
  margin-top: 1rem;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-results {
  gap: 1.4rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message {
  align-items: flex-start;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user {
  gap: 0.85rem;
  justify-content: flex-end;
  margin-bottom: -0.1rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-bubble {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-deep-ink);
  max-width: min(520px, 82%);
  padding: 0.15rem 0;
  text-align: right;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  color: var(--color-gold);
  flex: 0 0 34px;
  height: 34px;
  width: 34px;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar.is-user {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.18);
  color: var(--color-emerald);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar.is-assistant {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.2);
  color: var(--color-gold);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-response-group {
  gap: 0.95rem;
  max-width: 860px;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: min(860px, 100%);
  padding: 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body {
  gap: 0.85rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body p,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body li,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-intro,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-closing {
  font-size: 1.02rem;
  line-height: 1.8;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-section {
  gap: 0.55rem;
  padding-left: 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-section h4 {
  font-size: 0.96rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-trustline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-comparison {
  max-width: min(860px, 100%);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-trustline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-comparison {
  align-self: flex-start;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer {
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 14px;
  margin-left: 0;
  margin-top: 0.1rem;
  max-width: min(860px, 100%);
  padding: 0.8rem 0.95rem;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer-body {
  padding-top: 0.8rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form {
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
  margin: 0 auto;
  max-width: 980px;
  padding: 0.7rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-status {
  margin: 0 auto;
  max-width: 980px;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset {
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}

@media (max-width: 767.98px) {
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-thread {
    min-height: 52vh;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter {
    min-height: 28vh;
    padding-top: 1.75rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter .yahaj-assistant-bubble p {
    font-size: 1.05rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-bubble {
    max-width: 100%;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer {
    margin-left: 0;
    max-width: min(860px, 100%);
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body p,
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body li,
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-intro,
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-closing {
    font-size: 0.97rem;
  }
}

.agency-alert-banner-item .agency-alert-actions {
  justify-content: flex-start;
}

@media (max-width: 575.98px) {
  .critical-alert-strip-inner {
    align-items: flex-start;
  }

  .critical-alert-strip-inner a {
    display: none;
  }

  .agency-alert-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .agency-alert-actions {
    justify-content: flex-start;
  }
}

.rating-number {
  font-weight: 700;
  font-size: 1.375rem;
}

.review-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.review-subject-chip {
  align-items: center;
  background: var(--color-off-white);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-sm);
  color: var(--color-slate);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
}

.review-subject-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-subject-chip > i:first-child {
  color: var(--color-gold);
  flex: 0 0 auto;
}

.rating-high {
  color: var(--color-emerald) !important;
}

.rating-mid {
  color: var(--color-warning) !important;
}

.rating-low {
  color: var(--color-negative) !important;
}

.rating-count {
  /* color: var(--color-slate);*/
  font-size: 0.9375rem;
}

.agency-card-data-note {
  align-items: center;
  color: var(--color-slate);
  display: inline-flex;
  font-size: 0.82rem;
  /*font-weight: 750;*/
  gap: 0.35rem;
  position: relative;
  z-index: 1;
}

.agency-card-data-note i {
  color: var(--color-slate);
  font-size: 0.9rem;
}

.insight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
}

.insight-strength {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
}

.insight-weakness {
  background-color: #fffbeb !important;
  color: #b45309 !important;
}

.summary-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  /* color: var(--color-slate);*/
}

.review-card {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.review-card-public {
  border: 1px solid rgba(16, 34, 52, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  padding: 1.25rem;
}

.review-card-header {
  align-items: flex-start;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 1rem;
}

.review-card-author {
  min-width: 0;
}

.review-card-author-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.review-card-author-line strong {
  color: var(--color-deep-ink);
  font-size: 0.98rem;
  font-weight: 850;
}

.review-card-author-line span,
.review-card-author > span {
  color: var(--color-slate);
  font-size: 0.78rem;
  font-weight: 650;
}

.review-card-title {
  color: var(--color-deep-ink);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
  margin: 0 0 0.65rem;
}

.review-card-comment {
  color: var(--color-deep-ink);
  display: block;
  font-size: 0.9rem;
  line-height: 1.58;
  margin: 0 0 1rem;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.review-card-body {
  min-width: 0;
}

.review-card-quick-points {
  background: #fafaf7;
  border: 1px solid rgba(16, 34, 52, 0.08);
  border-radius: 8px;
  margin-bottom: 0.95rem;
  padding: 0.85rem 0.95rem;
}

.review-card-quick-points > span {
  color: var(--color-slate);
  display: block;
  font-size: 0.76rem;
  font-weight: 850;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.review-card-quick-points ul {
  display: grid;
  gap: 0.38rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.review-card-quick-points li {
  align-items: flex-start;
  color: var(--color-deep-ink);
  display: flex;
  font-size: 0.86rem;
  font-weight: 650;
  gap: 0.45rem;
  line-height: 1.4;
}

.review-card-quick-points li::before {
  color: var(--color-emerald);
  content: "\F26A";
  flex: 0 0 auto;
  font-family: "bootstrap-icons";
  font-size: 0.75rem;
  line-height: 1.55;
}

.review-card-rating {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.review-card-stars {
  display: flex;
  gap: 0.08rem;
  font-size: 0.92rem;
  line-height: 1;
}

.review-card-rating > span {
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
}

.review-card-rating.rating-high,
.review-card-rating.rating-high .review-card-stars {
  color: var(--color-emerald);
}

.review-card-rating.rating-mid,
.review-card-rating.rating-mid .review-card-stars {
  color: var(--color-warning);
}

.review-card-rating.rating-low,
.review-card-rating.rating-low .review-card-stars {
  color: var(--color-negative);
}

.review-card-footer {
  align-items: center;
  border-top: 1px solid rgba(16, 34, 52, 0.08);
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.95rem;
}

.review-card-votes {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.review-card-votes .btn,
.review-card-footer .btn-report {
  align-items: center;
  display: inline-flex;
  font-size: 0.84rem;
  gap: 0.3rem;
}

.review-avatar {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(197, 153, 62, 0.22);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(16, 34, 52, 0.1);
  display: inline-flex;
  flex: 0 0 auto;
  height: 3.05rem;
  justify-content: center;
  overflow: hidden;
  padding: 0.12rem;
  position: relative;
  width: 3.05rem;
}

.review-avatar img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.review-avatar-empty {
  background: #fafaf7;
  color: var(--color-emerald);
  font-size: 1.35rem;
}

.review-avatar-initials {
  background: linear-gradient(135deg, #e9fff6 0%, #fff8e6 100%);
  color: var(--color-emerald);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.review-avatar-summary {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(16, 34, 52, 0.1);
  border-radius: 12px;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.95rem;
}

.review-avatar-summary-copy {
  display: grid;
  gap: 0.12rem;
}

.review-avatar-summary-copy strong {
  color: var(--color-dark);
  font-size: 0.95rem;
}

.review-avatar-summary-copy span {
  color: var(--color-slate);
  font-size: 0.82rem;
}

.review-avatar-summary-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.review-avatar-summary-actions .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.modal-backdrop {
  z-index: 20000 !important;
}

.modal {
  z-index: 20010 !important;
}

.review-avatar-modal {
  z-index: 20010 !important;
}

.review-avatar-modal .modal-dialog {
  max-width: 820px;
}

.review-avatar-modal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.review-avatar-modal .modal-header,
.review-avatar-modal .modal-footer {
  background: #fafaf7;
  border-color: rgba(16, 34, 52, 0.08);
}

.review-avatar-modal-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.review-avatar-modal-choice {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(16, 34, 52, 0.1);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 8rem;
  padding: 0.9rem 0.55rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.review-avatar-modal-choice .review-avatar {
  height: 4.1rem;
  width: 4.1rem;
}

.review-avatar-modal-choice span:last-child {
  color: var(--color-slate);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
}

.review-avatar-modal-choice:hover,
.review-avatar-modal-choice.is-selected {
  border-color: rgba(0, 121, 86, 0.36);
  box-shadow: 0 14px 34px rgba(16, 34, 52, 0.1);
  transform: translateY(-1px);
}

.review-avatar-modal-choice.is-selected {
  background: #f2fffa;
}

.review-avatar-modal-choice.is-selected span:last-child {
  color: var(--color-emerald);
}

/* ========= DECISION PANEL ========= */
.decision-panel {
  background-color: var(--color-sand);
  border: none;
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ========= STRENGTH / WEAKNESS ========= */
.strength-card {
  background-color: var(--color-positive-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  border: none;
}

.weakness-card {
  background-color: var(--color-warning-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  border: none;
}

/* ========= BADGES ========= */
.muted-label {
  /* color: var(--color-slate);*/
  font-size: 13px;
  font-weight: 500;
}

.rating-badge {
  background-color: var(--color-emerald);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.65rem;
  font-size: 1rem;
  line-height: 1;
}

.badge-positive {
  background-color: var(--color-positive-bg) !important;
  color: var(--color-positive) !important;
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
}

.badge-warning {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning) !important;
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
}

.badge-soft {
  background-color: var(--color-off-white);
  /* color: var(--color-slate);*/
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

/* ========= FORMULAIRES ========= */
.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border: 1px solid #D1D5DB;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--color-deep-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-emerald);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1);
  outline: none;
}

.form-label {
  font-weight: 600;
  color: var(--color-deep-ink);
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}

.form-text {
  font-size: 13px;
  /* color: var(--color-slate);*/
}

.form-step {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: var(--border-subtle);
}

.form-step:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* ========= FOOTER ========= */
/* Inspiré OomraBooking : fond très sombre, bien structuré */
.site-footer {
  background-color: var(--color-deep-ink);
  color: #fff;
  padding: 4rem 0 2rem;
  margin-top: 4rem;
}

.site-footer .footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}

.site-footer strong {
  color: #fff;
  font-weight: 700;
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.site-footer strong::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--color-emerald);
  border-radius: 1px;
}

.site-footer a {
  display: block;
  color: var(--color-slate-light);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer p {
  color: var(--color-slate-light);
  font-size: 0.875rem;
}

.site-footer .footer-legal {
  color: var(--color-slate-light);
  font-size: 13px;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
  width: auto;
  margin-top: 1.5rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: all 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ========= UTILITAIRES ========= */
.text-slate {
  color: var(--color-slate) !important;
}

.text-emerald {
  color: var(--color-emerald) !important;
}

.font-64 {
  font-size: 64px !important;
}

.font-48 {
  font-size: 48px !important;
}

.font-40 {
  font-size: 40px !important;
}

.font-32 {
  font-size: 32px !important;
}

.font-24 {
  font-size: 24px !important;
}

.font-22 {
  font-size: 22px !important;
}

.font-20 {
  font-size: 20px !important;
}

.font-14 {
  font-size: 14px !important;
}

.font-12 {
  font-size: 12px !important;
}

@media (max-width: 767.98px) {
  .yahaj-assistant-shell {
    padding: 0;
  }

  .yahaj-assistant-form {
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 24px;
    padding: 0.45rem;
  }

  .yahaj-assistant-submit {
    min-width: 48px;
    padding-inline: 0.9rem;
    width: auto;
  }

  .yahaj-assistant-submit span {
    display: none;
  }

  .yahaj-assistant-prompts button {
    width: auto;
  }

  .yahaj-assistant-thread {
    max-height: 420px;
  }

  .yahaj-assistant-avatar {
    display: none;
  }
}

.font-11 {
  font-size: 11px !important;
}

.text-gold {
  color: var(--color-gold) !important;
}

.bg-gold-light {
  background-color: rgba(217, 119, 6, 0.1);
}

.border-gold {
  border-color: var(--color-gold) !important;
}

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top-width: 3px !important;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========= CAROUSEL MOBILE ========= */
.carousel-wrapper {
  position: relative;
  width: 100%;
}

@media (max-width: 991px) {
  .mobile-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    gap: 0 !important;
    /* On gère le gap via les colonnes */
  }

  .mobile-carousel::-webkit-scrollbar {
    display: none;
  }

  .mobile-carousel .col-md-6,
  .mobile-carousel .col-xl-4 {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center;
    padding: 0 10px;
  }

  .carousel-nav-btn {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s;
  }

  .carousel-nav-btn:hover {
    background: var(--color-gold);
    color: #fff;
  }

  .carousel-nav-btn.prev {
    left: -10px;
  }

  .carousel-nav-btn.next {
    right: -10px;
  }
}

@media (max-width: 576px) {
  .section-header-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }

  .section-header-mobile a {
    align-self: flex-end;
    font-size: 0.9375rem;
  }

  .section-header-mobile h2 {
    font-size: 1.35rem !important;
  }

  .yahaj-assistant-shell {
    padding: 1rem;
  }

  .yahaj-assistant-intro,
  .yahaj-assistant-agency {
    grid-template-columns: 1fr;
  }

  .yahaj-assistant-prompts {
    justify-content: flex-start;
  }

  .yahaj-assistant-submit {
    width: auto;
  }

  .yahaj-assistant-actions a,
  .yahaj-assistant-prompts button {
    justify-content: center;
    width: 100%;
  }

  .yahaj-assistant-agency-side {
    align-items: flex-start;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .carousel-nav-btn {
    display: none !important;
  }
}

/* Breadcrumb Custom */
.breadcrumb-custom {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumb-custom-item {
  display: flex;
  align-items: center;
  color: var(--color-slate-light);
}

.breadcrumb-custom-item a {
  color: var(--color-slate-light);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-custom-item a:hover {
  color: var(--color-emerald);
}

.breadcrumb-custom-item:not(:last-child)::after {
  content: "/";
  margin: 0 0.75rem;
  color: #cbd5e1;
}

.breadcrumb-custom-item.active {
  /* color: var(--color-slate);*/
  pointer-events: none;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.letter-spacing-2 {
  letter-spacing: 0.1em;
}

/* ========= WIZARD STEPPER ========= */
.wizard-stepper-container {
  max-width: 600px;
  margin: 0 auto;
}

.wizard-stepper .stepper-list {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.wizard-stepper .stepper-list::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 15%;
  right: 15%;
  height: 2px;
  background-color: var(--border-subtle);
  z-index: 1;
}

.wizard-stepper .step-item {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
}

.wizard-stepper .step-bubble {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  background-color: #fff;
  border: 2px solid var(--border-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  /* color: var(--color-slate);*/
  transition: all 0.3s ease;
}

.wizard-stepper .step-label {
  font-size: 0.875rem;
  font-weight: 500;
  /* color: var(--color-slate);*/
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}

.wizard-stepper .step-item.active .step-bubble {
  border-color: var(--bs-primary, #0d6efd);
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

.wizard-stepper .step-item.active .step-label {
  color: var(--color-deep-ink);
  font-weight: 600;
}

.wizard-stepper .step-item.completed .step-bubble {
  border-color: #C5993E;
  background-color: #C5993E;
  color: #fff;
}

.wizard-stepper .step-item.completed .step-label {
  color: #C5993E;
}

/* Wizard Transitions */
.wizard-step {
  animation: fadeInStep 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.review-story-textarea {
  min-height: 13rem;
  line-height: 1.7;
}

/* Critères opt-in (étape 2) : cartes cliquables qui ouvrent une note */
.review-criteria-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.review-criteria-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #fff;
  color: var(--color-slate);
  padding: 1rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.review-criteria-chip i {
  font-size: 1.6rem;
  color: #9ca3af;
  transition: color 0.15s ease;
}

/* Emoji de catégorie au-dessus du libellé (miroir de la carte 3 de l'email). */
.review-criteria-chip-emoji {
  font-size: 1.7rem;
  line-height: 1;
}

.review-criteria-chip:hover,
.review-criteria-chip:focus {
  border-color: #d1d5db;
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Fond vert plein : réservé à l'aspect EN COURS de notation (un seul à la fois). */
.review-criteria-chip.is-open {
  color: #fff;
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  box-shadow: 0 6px 18px rgba(0, 121, 86, 0.22);
}

.review-criteria-chip.is-open i {
  color: #fff;
}

/* Aspect sélectionné/noté mais inactif : simple bordure verte + icône verte, fond blanc. */
.review-criteria-chip.active:not(.is-open) {
  background: #fff;
  border-color: var(--color-emerald);
}

.review-criteria-chip.active:not(.is-open) i {
  color: var(--color-emerald);
}

/* Coche ✓ : discrète, en haut à droite, quand l'aspect est noté et son bloc replié. */
.review-criteria-chip-check {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  font-size: 1rem !important;
  color: var(--color-emerald) !important;
  display: none;
}

.review-criteria-chip.is-rated:not(.is-open) .review-criteria-chip-check {
  display: block;
}

/* Libellé de la note sous la pastille : visible quand l'aspect est noté et son bloc fermé. */
.review-criteria-chip-value {
  display: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-emerald);
  margin-top: 0.1rem;
  line-height: 1.2;
}

.review-criteria-chip-value-emoji {
  font-size: 0.8rem;
  margin-right: 0.2rem;
}

.review-criteria-chip.is-rated:not(.is-open) .review-criteria-chip-value {
  display: block;
}

.review-criteria-panels {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.review-criteria-panel {
  position: relative;
  border: 1px solid rgba(0, 121, 86, 0.22);
  border-radius: 0.9rem;
  background: #fafaf7;
  padding: 1rem 1.1rem;
  animation: reviewPanelIn 0.22s ease;
}

/* Bouton "Fermer" : replie le panneau sans supprimer la note. */
.review-criteria-close {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.review-criteria-close:hover {
  background: #f3f4f6;
  color: var(--color-slate);
  border-color: #d1d5db;
}

/* Aspect sélectionné mais non noté : mise en évidence de l'erreur. */
.review-criteria-panel.is-invalid {
  border-color: var(--color-negative);
  border-left-color: var(--color-negative);
  background: var(--color-negative-bg);
}

@keyframes reviewPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.review-criteria-panel-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  padding-right: 2.2rem;
}

/* Le texte occupe toute la largeur ; le bouton "Retirer" passe dessous si ça déborde. */
.review-criteria-panel-head > div {
  flex: 1 1 220px;
  min-width: 0;
}

.review-criteria-panel-head i {
  color: var(--color-gold);
  font-size: 1.3rem;
  margin-top: 0.1rem;
}

.review-criteria-panel-emoji {
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 0.1rem;
}

/* Bouton "Retirer cet aspect" : centré en bas du panneau, visible seulement si noté. */
.review-criteria-remove-wrap {
  display: none;
  justify-content: center;
  margin-top: 0.9rem;
}

.review-criteria-panel.is-rated .review-criteria-remove-wrap {
  display: flex;
}

.review-criteria-remove {
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: #fff;
  color: var(--color-negative);
  border-radius: 0.6rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.review-criteria-remove i {
  color: var(--color-negative);
  font-size: 0.85rem;
  margin-top: 0;
}

.review-criteria-remove:hover {
  background: var(--color-negative-bg);
  border-color: var(--color-negative);
}

.review-criteria-panel-head p {
  color: #6b7280;
  font-size: 0.875rem;
}

.review-criteria-panel-body .form-label {
  font-weight: 600;
  font-size: 0.85rem;
}

/* Regroupe visuellement la recommandation avec l'appréciation globale (gutter réduit) */
.wizard-step .review-recommend-col {
  margin-top: 2rem;
}

/* Recommandation : contrôle segmenté Oui / Peut-être / Non */
.recommend-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recommend-option {
  flex: 1 1 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--color-slate);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.recommend-option i {
  font-size: 1.15rem;
}

.recommend-option:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.recommend-option.is-yes.active {
  border-color: #198754;
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

.recommend-option.is-maybe.active {
  border-color: #C5993E;
  background: rgba(197, 153, 62, 0.12);
  color: #a97e28;
}

.recommend-option.is-no.active {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/* Échelle d'emojis (sélection unique) en remplacement des étoiles */
/* Mobile / tablette : 2 colonnes larges, faciles à toucher. */
.emoji-rating-scale {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.emoji-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.emoji-glyph {
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.emoji-caption {
  font-size: 0.72rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  transition: color 0.15s ease;
}

/* Au repos : les 5 options sont identiques (fond blanc, bordure grise discrète) ;
   seuls les émojis apportent une touche visuelle. */
.emoji-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.emoji-option:hover .emoji-glyph,
.emoji-option.is-hover .emoji-glyph {
  transform: scale(1.1);
}

/* Sélection : la carte choisie passe au vert Yahaj (identité de marque), texte blanc. */
.emoji-option.active {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  box-shadow: 0 4px 12px rgba(0, 121, 86, 0.22);
}

.emoji-option.active .emoji-caption {
  color: #fff;
}

/* Desktop : pastilles de taille fixe, centrées (évite l'étirement sur grands écrans). */
@media (min-width: 769px) {
  .emoji-rating-scale {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
  }

  .emoji-option {
    width: 120px;
    height: 100px;
    justify-content: center;
  }
}

/* Mobile : grille 2 colonnes compacte pour éviter tout débordement horizontal */
@media (max-width: 575.98px) {
  .emoji-rating-scale {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .emoji-option {
    min-width: 0;
    padding: 0.4rem 0.35rem;
  }

  .emoji-glyph {
    font-size: 1.6rem;
  }

  .emoji-caption {
    font-size: 0.68rem;
  }
}

.review-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  padding: 0.4rem 0;
  margin-top: 0.5rem;
  color: var(--color-emerald);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.review-comment-toggle:hover {
  text-decoration: underline;
}

.review-comment-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
}

.review-comment-close {
  border: none;
  background: none;
  padding: 0.15rem 0.35rem;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.4rem;
}

.review-comment-close:hover {
  color: var(--color-negative, #b91c1c);
  background: rgba(185, 28, 28, 0.08);
}

/* Public concerné (profils) */
.review-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.65rem;
}

.review-profile-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  border: 1px solid rgba(0, 121, 86, 0.18);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.85rem 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.review-profile-option i {
  color: var(--color-emerald);
  font-size: 1.15rem;
}

/* Emoji de profil au-dessus du libellé (miroir de la carte 3 de l'email). */
.review-profile-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.review-profile-option:hover {
  border-color: rgba(0, 121, 86, 0.35);
  background: rgba(0, 121, 86, 0.04);
}

.review-profile-option.active {
  border-color: var(--color-emerald);
  background: rgba(0, 121, 86, 0.08);
  box-shadow: 0 4px 14px rgba(0, 121, 86, 0.14);
}

/* Case native masquée : toute la tuile (label) reste cliquable, focus clavier conservé. */
.review-profile-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.review-profile-option:focus-within {
  outline: 2px solid var(--color-emerald);
  outline-offset: 2px;
}

/* Les mêmes tuiles, en lecture : sur une fiche, ces profils rapportent ce que les pèlerins ont
   coché, il n'y a rien à cocher. Le curseur et le survol sont retirés, sans quoi la tuile
   promettrait une action qui n'existe pas.

   La grille s'étire (auto-fit) au lieu de laisser une colonne vide : une fiche affiche seulement
   les profils qui ont reçu des retours, souvent moins que les six du formulaire, et le vide à
   droite déséquilibrerait la section. */
.review-profiles-grid.is-readout {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.review-profiles-grid.is-readout .review-profile-option {
  cursor: default;
}

.review-profiles-grid.is-readout .review-profile-option:hover {
  border-color: rgba(0, 121, 86, 0.18);
  background: #fff;
}

/* Le verdict est ce que le pèlerin vient chercher : il passe avant le chiffre qui le fonde, et
   porte sa couleur pour se lire sans être lu. Poussé en bas de tuile pour rester aligné d'une
   tuile à l'autre, qu'un libellé tienne sur une ligne ou sur deux. */
.profile-fit-verdict {
  margin-top: auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}

.profile-fit-verdict-yes {
  color: var(--color-emerald);
  background: rgba(0, 121, 86, 0.1);
}

/* Les retours vont dans le bon sens mais restent peu nombreux : même couleur, ton plus discret,
   pour ne pas donner à deux témoignages l'assurance qu'ils n'ont pas. */
.profile-fit-verdict-likely {
  color: var(--color-emerald);
  background: rgba(0, 121, 86, 0.05);
}

.profile-fit-verdict-mixed {
  color: var(--color-warning);
  background: rgba(197, 153, 62, 0.12);
}

.review-profile-share {
  padding-top: 0.35rem;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-slate);
}

/* Sur un téléphone, la tuile centrée n'a plus la largeur de tenir deux par ligne : chaque profil
   prend toute la page et quatre d'entre eux se lisent au prix de quatre écrans. En lecture, ils
   deviennent donc des lignes — le profil à gauche, le verdict à droite, ce qui le fonde en
   dessous. L'ordre de lecture ne change pas, la hauteur est divisée par deux.

   Réservé aux fiches : dans le formulaire de dépôt, ces mêmes tuiles sont des cases à cocher, et
   leur taille est ce qui les rend atteignables au doigt. */
@media (max-width: 575.98px) {
  .review-profiles-grid.is-readout {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Corps réduit : à pleine taille, le verdict mangeait la largeur du libellé, et « Une personne à
     mobilité réduite » se repliait sur trois lignes — on retrouvait la hauteur qu'on venait de
     gagner. */
  .review-profiles-grid.is-readout .review-profile-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    text-align: left;
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
  }

  .review-profiles-grid.is-readout .review-profile-emoji {
    font-size: 1.15rem;
  }

  /* La marge automatique ne servait qu'à aligner le verdict en bas des tuiles : en ligne, il se
     cale de lui-même en face du libellé. */
  .review-profiles-grid.is-readout .profile-fit-verdict {
    grid-column: 3;
    margin-top: 0;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
  }

  .review-profiles-grid.is-readout .review-profile-share {
    grid-column: 2 / -1;
    padding-top: 0;
  }
}

.review-validation-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid rgba(0, 121, 86, 0.12);
  border-radius: 0.75rem;
  background: rgba(0, 121, 86, 0.04);
  color: var(--color-slate);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
}

.review-validation-note i {
  color: var(--color-emerald);
  margin-top: 0.1rem;
}

/* Honeypot anti-bot : masqué à l'humain (hors flux visuel) mais présent dans le DOM pour piéger les robots. */
.review-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Footer pour le Wizard */
@media (max-width: 768px) {
  .wizard-navigation {
    /* Suppression du position: fixed causant des bugs sur Safari iOS au clavier */
    position: relative;
    padding: 1.5rem 0 !important;
    background: transparent;
    z-index: 2;
    margin-top: 2rem !important;
  }
}

/* ========= PROFESSIONAL SELECTION WIZARD ========= */
.selected-professional-card {
  transition: all 0.2s ease;
  border-left: 4px solid #198754 !important;
}

.selected-professional-card:hover {
  background-color: #f8f9fa !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selected-professional-card .fw-bold {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .selected-professional-card {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .selected-professional-card > .d-flex {
    align-items: flex-start !important;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .selected-professional-card .professional-icon-check {
    margin-top: 0.2rem;
    flex: 0 0 auto;
  }

  .selected-professional-card .btn {
    align-self: flex-start;
    margin-left: 2.75rem;
    padding-left: 0;
    padding-right: 0;
  }
}

.autocomplete-item {
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.autocomplete-item:hover {
  background-color: #f8f9fa;
}

.search-bar-pill-container input {
  border-radius: 30px;
  padding-left: 3rem;
}

.search-bar-pill-container.has-autocomplete input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* --- Agency Details Page --- */
.agency-decision-panel {
  align-items: stretch;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
  margin-bottom: 2.5rem;
  overflow: hidden;
  padding: 2rem;
}

.agency-decision-main {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}

.agency-decision-kicker,
.agency-summary-label {
  align-items: center;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 0.45rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.agency-decision-kicker i,
.agency-summary-label i {
  color: var(--color-gold);
}

.agency-decision-main h2 {
  color: var(--color-deep-ink);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.agency-decision-main p {
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.35rem;
}

.agency-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.agency-decision-stats {
  background: #fafaf7;
  border: 1px solid #eef2f6;
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1rem;
}

.agency-stat-card {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  padding: 1rem;
}

.agency-stat-value {
  color: var(--color-deep-ink);
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
}

.agency-stat-label {
  color: var(--color-slate);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.45rem;
}

.agency-data-status {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 0.55rem;
  grid-column: 1 / -1;
  justify-content: center;
  padding: 0.75rem;
}

.agency-data-status.is-limited {
  background: #fffbeb;
  color: #b45309;
}

.agency-data-status.is-enough {
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
}

.agency-summary-panel {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  padding: 1.5rem;
}

.agency-info-section {
  width: 100%;
}

.agency-section-heading {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.agency-section-heading > i {
  font-size: 1.45rem;
  line-height: 1.1;
  margin-top: 0.1rem;
}

.agency-section-heading h2 {
  color: var(--color-deep-ink);
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1.18;
  margin: 0;
}

.agency-section-heading p {
  color: var(--color-slate);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0.35rem 0 0;
}

.agency-latest-reviews-heading {
  align-items: center;
}

.agency-latest-reviews-heading > div {
  flex: 1 1 auto;
}

.agency-section-link {
  align-items: center;
  color: var(--color-emerald);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 800;
  gap: 0.4rem;
  text-decoration: none;
}

.agency-section-link:hover {
  color: var(--color-emerald-dark);
}

.agency-latest-reviews-panel {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  padding: 1.5rem;
}

.agency-latest-reviews-featured {
  align-items: stretch;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
}

.agency-latest-review-card .review-card {
  border: 1px solid rgba(16, 34, 52, 0.08);
  box-shadow: none;
  height: 100%;
}

.agency-review-cta {
  background: #fafaf7;
  border: 1px solid rgba(197, 153, 62, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
}

.agency-review-cta-icon,
.agency-latest-reviews-empty-icon {
  align-items: center;
  background: #fff8e6;
  border: 1px solid rgba(197, 153, 62, 0.22);
  border-radius: 50%;
  color: var(--color-gold);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.agency-review-cta-icon {
  margin-bottom: 1rem;
}

.agency-review-cta-icon i,
.agency-latest-reviews-empty-icon i {
  font-size: 1.25rem;
}

.agency-review-cta h3,
.agency-latest-reviews-empty h3 {
  color: var(--color-deep-ink);
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1.25;
  margin: 0 0 0.65rem;
}

.agency-review-cta p,
.agency-latest-reviews-empty p {
  color: var(--color-slate);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

.agency-review-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agency-review-cta-actions .btn {
  justify-content: center;
}

.agency-review-inline-cta {
  align-items: center;
  background: #fafaf7;
  border: 1px solid rgba(16, 34, 52, 0.08);
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: 1rem;
}

.agency-review-inline-cta strong,
.agency-review-inline-cta span {
  display: block;
}

.agency-review-inline-cta strong {
  color: var(--color-deep-ink);
  font-size: 0.98rem;
  font-weight: 850;
  margin-bottom: 0.2rem;
}

.agency-review-inline-cta span {
  color: var(--color-slate);
  font-size: 0.88rem;
}

.agency-latest-reviews-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  text-align: center;
}

.agency-latest-reviews-empty-icon {
  height: 4rem;
  margin-bottom: 1rem;
  width: 4rem;
}

.agency-latest-reviews-empty-icon i {
  font-size: 1.9rem;
}

.agency-latest-reviews-empty p {
  max-width: 34rem;
}

.agency-summary-text {
  color: var(--color-deep-ink);
  font-size: 1.04rem;
  line-height: 1.75;
  margin: 0;
}

/* La réserve sur les données n'est pas un encadré à part : elle qualifie le résumé qui la précède
   et se lit dans sa foulée. Sans fond ni filet, calée sur le même bord que le texte, elle cesse de
   découper le panneau en deux ; la couleur d'alerte suffit à la faire remarquer. */
.agency-summary-limit {
  align-items: flex-start;
  color: var(--color-warning);
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  line-height: 1.55;
  margin-top: 0.9rem;
}

.agency-summary-limit i {
  color: var(--color-gold);
  margin-top: 0.15rem;
}

.agency-checklist-panel {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  padding: 1.5rem;
}

.agency-checklist-lead {
  color: var(--color-slate);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.agency-checklist-grid {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Seul le panneau porte un contour : à l'intérieur, l'icône et la graisse du titre
   suffisent à séparer les points. Encadrer chaque ligne empilerait trois bordures
   pour une phrase. */
.agency-check-item {
  align-items: flex-start;
  color: var(--color-deep-ink);
  display: flex;
  gap: 0.75rem;
}

.agency-check-icon {
  align-items: center;
  background: #fff8e6;
  border-radius: 50%;
  color: var(--color-gold);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.agency-check-icon i {
  font-size: 1.05rem;
}

.agency-check-item strong {
  color: var(--color-deep-ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.agency-check-item span:not(.agency-check-icon) {
  color: var(--color-slate);
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Fiche pro : regroupe identité, contact et garanties en colonnes empilées. */
.agency-decision-facts {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.agency-decision-facts-block h3 {
  align-items: center;
  color: var(--color-deep-ink);
  display: flex;
  font-size: 1rem;
  font-weight: 850;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.agency-guarantee-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agency-guarantee-item {
  align-items: flex-start;
  background: #f2faf5;
  border: 1px solid rgba(16, 133, 87, 0.18);
  border-radius: 8px;
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
}

.agency-guarantee-icon {
  align-items: center;
  background: #e3f5ea;
  border-radius: 50%;
  color: var(--color-emerald);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.agency-guarantee-icon i {
  font-size: 1.05rem;
}

.agency-guarantee-item strong {
  color: var(--color-deep-ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.3;
}

.agency-guarantee-item span {
  color: var(--color-slate);
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 0.2rem;
}

/* Societe donnee pour cessee : les protections restent lisibles mais cessent de rassurer. Le vert
   est la forme meme du rassurement, et il contredirait le bandeau d'avertissement place plus haut. */
.agency-guarantee-grid.is-unconfirmed .agency-guarantee-item {
  background: #f6f7f9;
  border-color: rgba(15, 23, 42, 0.12);
}

.agency-guarantee-grid.is-unconfirmed .agency-guarantee-icon {
  background: #e8eaee;
  color: var(--color-slate);
}

.agency-guarantee-caveat {
  align-items: flex-start;
  color: var(--color-slate);
  display: flex;
  font-size: 0.85rem;
  gap: 0.5rem;
  line-height: 1.5;
  margin: 0.8rem 0 0;
}

.agency-guarantee-caveat i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

/* Vitrine agence : bloc "Identité & contact" (liste sobre). */
.agency-identity-grid {
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agency-identity-item {
  align-items: flex-start;
  display: flex;
  gap: 0.7rem;
  padding: 0.5rem 0;
}

.agency-identity-item > i {
  color: var(--color-gold);
  flex: 0 0 auto;
  font-size: 1.05rem;
  margin-top: 0.15rem;
}

.agency-identity-label {
  color: var(--color-slate);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.agency-identity-value {
  color: var(--color-deep-ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

a.agency-identity-value {
  color: var(--color-emerald);
  text-decoration: none;
}

a.agency-identity-value:hover {
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .agency-guarantee-grid,
  .agency-identity-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Fiche pro (/agency/{slug}/pro) : cover + onglets + sections
   ============================================================ */
/* La fiche pro n'a plus de carte d'identite ni de rangee d'actions propres : le bandeau de
   decision, partage avec la page d'analyse, porte la note et les boutons, et les coordonnees se
   lisent dans la section des informations. Les regles correspondantes ont ete retirees. */

/* Barre d'onglets d'ancrage : collante sous l'en-tete du site. */
.agency-pro-tabs {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid #edf2f7;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem;
  position: sticky;
  top: 0.75rem;
  z-index: 20;
}

.agency-pro-tab {
  align-items: center;
  border-radius: 999px;
  color: var(--color-slate);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.agency-pro-tab:hover {
  background: #f2faf5;
  color: var(--color-emerald);
}

/* Décalage d'ancrage pour ne pas passer sous la barre sticky. */
.agency-pro-section,
.agency-latest-reviews-section[id] {
  scroll-margin-top: 5rem;
}

.agency-pro-description {
  color: var(--color-deep-ink);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}

.trust-summary-panel {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem 3rem;
  border: 1px solid #eef2f6;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-summary-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -6px rgba(0, 0, 0, 0.08);
}

.trust-summary-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.05), transparent);
  pointer-events: none;
}

.trust-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.8125rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.agency-decision-help-panel {
  border-radius: 8px;
  padding: 1.75rem;
}

/* Le texte et les actions occupent la colonne de gauche sur deux lignes, la note tient toute la
   hauteur à droite. Les actions étant une cellule à part, elles peuvent passer après la note
   dès que la grille se replie sur une colonne.

   Chaque ligne n'est déclarée que si son contenu existe : une ligne vide garde sa gouttière et
   creuse un blanc dans le panneau. Le bandeau apparaît sans boutons sur les fiches pro, qui
   portent les leurs. */
.agency-decision-help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
  grid-template-rows: 1fr;
  grid-template-areas: "copy score";
  gap: 1.5rem;
  align-items: stretch;
}

.agency-decision-help-grid.has-actions {
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "copy score"
    "actions score";
}

.agency-decision-help-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agency-decision-help-grid > .agency-decision-actions {
  grid-area: actions;
}

/* Ce qui ressort des avis prend toute la largeur sous le texte et la note. Le sélecteur d'enfant
   direct plus bas est nécessaire : la fiche hébergement place un bloc de même classe dans sa
   colonne de texte pour la distance annoncée. */
.agency-decision-help-grid.has-highlights {
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "copy score"
    "highlights highlights";
}

.agency-decision-help-grid.has-actions.has-highlights {
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "copy score"
    "actions score"
    "highlights highlights";
}

.agency-decision-help-grid > .agency-decision-highlights {
  grid-area: highlights;
  margin-top: 0;
}

.agency-decision-help-grid > .agency-decision-score-card {
  grid-area: score;
}

.agency-decision-help-copy h2 {
  color: var(--color-deep-ink);
  font-size: 1.8rem;
  font-weight: 850;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.agency-decision-help-copy p {
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  max-width: 720px;
}

.agency-decision-score-card {
  background: #fafaf7;
  border: 1px solid rgba(197, 153, 62, 0.18);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* La carte porte déjà un contour : à l'intérieur, la taille de la note et la graisse
   des mots suffisent à hiérarchiser, sans réencadrer chaque bloc. */
.agency-score-main {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.25rem 0;
}

.agency-score-value {
  display: inline-flex;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.agency-score-stars {
  display: flex;
  gap: 0.15rem;
  font-size: 1.25rem;
  line-height: 1;
}

.agency-score-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin-top: 0.6rem;
  padding: 0 0.25rem;
}

.agency-score-verdict {
  color: var(--color-deep-ink);
  font-size: 0.95rem;
  font-weight: 800;
}

.agency-score-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--color-slate);
  font-size: 0.88rem;
  font-weight: 700;
}

.agency-score-stat i {
  color: var(--color-gold);
  font-size: 1rem;
}

.agency-score-stat strong {
  color: var(--color-deep-ink);
  font-weight: 900;
}

/* La réserve sur les données se lit en dernier : elle est poussée au bas de la carte, sous la note
   qu'elle vient nuancer, quand la carte est étirée par la grille. */
.agency-score-note {
  color: #a45d00;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  margin: auto 0 0;
  padding: 1rem 0.25rem 0;
  text-align: left;
}

/* En deux colonnes, la carte est étirée à la hauteur du texte voisin : la note y prend une taille
   à la mesure de la place disponible et se centre au-dessus de la réserve, plutôt que de laisser
   un creux au milieu. La réserve, elle, garde sa taille de note de bas de page. */
@media (min-width: 992px) {
  .agency-score-main {
    gap: 1rem;
    margin-top: auto;
  }

  .agency-score-value {
    font-size: 3.6rem;
  }

  .agency-score-stars {
    font-size: 1.7rem;
    gap: 0.2rem;
  }

  .agency-score-stats {
    gap: 0.4rem 1.5rem;
    margin-top: 0.85rem;
  }

  .agency-score-verdict {
    font-size: 1.2rem;
  }

  .agency-score-stat {
    font-size: 1.05rem;
  }

  .agency-score-stat i {
    font-size: 1.2rem;
  }
}

.agency-decision-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  border-top: 1px solid rgba(16, 34, 52, 0.08);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.agency-decision-highlight {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(16, 34, 52, 0.08);
  border-radius: 8px;
  padding: 1rem;
}

.agency-decision-highlight > i {
  font-size: 1.2rem;
  margin-top: 0.15rem;
}

.agency-decision-highlight.is-strength > i {
  color: var(--color-emerald);
}

.agency-decision-highlight.is-warning > i {
  color: var(--color-gold);
}

.agency-decision-highlight strong {
  color: var(--color-deep-ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 850;
  margin-bottom: 0.35rem;
}

.agency-decision-highlight p {
  color: var(--color-slate);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* Fiche sans aucune information déclarée : l'aveu prend la place des sections vides. */
.empty-profile-panel {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  margin-bottom: 3rem;
}

.empty-profile-panel > i {
  color: var(--color-slate-light);
  font-size: 1.4rem;
  line-height: 1.3;
}

.empty-profile-panel h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.empty-profile-panel p {
  color: var(--color-slate);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/*
  Le fait que le pèlerin doit voir sans le chercher, avant même la note : le trajet jusqu'au lieu de
  prière sur un hébergement, l'identité de la société sur une agence. Les quatre états valent pour
  les deux — établi, mesuré par YaHaj, à vérifier — parce que c'est la même question qui se pose :
  ce que je lis, qui le garantit ?
*/
.trust-fact-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  padding: 1rem 1.15rem;
  margin-top: 1.5rem;
}

.trust-fact-banner > i {
  font-size: 1.35rem;
  line-height: 1.35;
}

.trust-fact-banner strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}

.trust-fact-banner p {
  margin: 0.3rem 0 0;
  color: var(--color-slate);
  font-size: 0.9rem;
  line-height: 1.55;
}

.trust-fact-banner.is-known {
  background: var(--color-positive-bg);
  border-left-color: var(--color-positive);
}

.trust-fact-banner.is-known :is(i, strong) {
  color: var(--color-positive);
}

/* Trajet à pied calculé : c'est le repère le plus proche de ce que le pèlerin vivra, et donc celui
   qui doit se voir en premier. Il porte l'accent de la marque plutôt que le vert de l'engagement,
   qui reste réservé à ce qu'un établissement affirme de lui-même. */
.trust-fact-banner.is-walked {
  background: rgba(13, 110, 253, 0.07);
  border-left-color: var(--color-location-blue);
}

.trust-fact-banner.is-walked :is(i, strong) {
  color: var(--color-location-blue);
}

/* Distance calculée par YaHaj : ni le vert de l'engagement, ni l'ambre de la question ouverte.
   L'information est là et fiable, mais elle n'engage pas l'établissement — l'ardoise le dit sans
   rien réclamer de la part du pèlerin. */
.trust-fact-banner.is-measured {
  background: rgba(71, 85, 105, 0.07);
  border-left-color: var(--color-slate);
}

.trust-fact-banner.is-measured i {
  color: var(--color-slate);
}

.trust-fact-banner.is-measured strong {
  color: var(--color-deep-ink);
}

.trust-fact-banner.is-missing {
  background: var(--color-warning-bg);
  border-left-color: var(--color-warning);
}

.trust-fact-banner.is-missing :is(i, strong) {
  color: var(--color-warning);
}

@media (max-width: 575.98px) {
  .trust-fact-banner strong {
    font-size: 1.05rem;
  }
}

/* Note relevée sur une autre plateforme.

   Volontairement à l'écart de la note YaHaj : encadré plutôt que plein, ardoise plutôt que couleur
   de marque, et sa provenance collée au chiffre. Un pèlerin qui ne lit qu'un bloc doit malgré tout
   savoir que ce n'est pas nous qui avons noté. */
.external-rating-note {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1rem;
  padding: 0.9rem 1.15rem;
  border: 1px dashed rgba(71, 85, 105, 0.35);
  border-radius: var(--radius-md);
  background: rgba(71, 85, 105, 0.04);
}

.external-rating-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.external-rating-score {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-deep-ink);
}

.external-rating-stars {
  color: var(--color-slate);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.external-rating-body strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-deep-ink);
}

.external-rating-body p {
  margin: 0.25rem 0 0;
  color: var(--color-slate);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .external-rating-note {
    align-items: flex-start;
    gap: 0.85rem;
  }

  .external-rating-score {
    font-size: 1.3rem;
  }
}

/* Provenance d'une présentation composée par YaHaj faute d'en avoir reçu une. En retrait, mais
   lisible : c'est ce qui empêche de prendre un constat pour une parole de l'établissement. */
.factual-provenance {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(16, 34, 52, 0.08);
  color: var(--color-slate);
  font-size: 0.82rem;
  line-height: 1.5;
}

.factual-provenance i {
  flex-shrink: 0;
  margin-top: 0.12rem;
}

/* Plan de situation. Le rapport de forme évite que le cadre saute au chargement, et la hauteur
   reste généreuse sur mobile : un plan trop bas ne montre plus le chemin, seulement la façade. */
/* Hauteur fixe plutôt qu'un rapport de forme : sur un grand écran, ce dernier étirerait le plan
   jusqu'à repousser les avis sous la ligne de flottaison, et le brider par une hauteur maximale
   rétrécirait la largeur d'autant. Un plan de quartier n'a pas besoin de plus de hauteur ; il a
   besoin de toute la largeur, parce que c'est là que se lit le chemin. */
.hotel-map-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 420px;
  border: 1px solid rgba(16, 34, 52, 0.12);
  border-radius: 14px;
  background: rgba(16, 34, 52, 0.04);
}

.hotel-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hotel-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

@media (max-width: 575.98px) {
  /* Plus haut que large : sur un écran étroit, un plan bas ne montre plus le chemin, seulement
     la façade et la rue qui la longe. */
  .hotel-map-frame {
    height: 380px;
  }

  .hotel-map-actions .btn {
    flex: 1 1 auto;
  }
}

.agency-profile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  border-top: 1px solid rgba(16, 34, 52, 0.08);
  margin-top: 1.25rem;
  padding-top: 1.1rem;
}

.agency-profile-row > span {
  color: var(--color-slate);
  font-size: 0.82rem;
  font-weight: 800;
}

.agency-profile-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.agency-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid rgba(0, 121, 86, 0.16);
  border-radius: 999px;
  color: var(--color-deep-ink);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 0.7rem;
}

.agency-profile-pill i {
  color: var(--color-emerald);
}

.rating-display {
  line-height: 1;
  letter-spacing: -1px;
}

.dimension-card {
  background: white;
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid #f1f5f9;
  height: 100%;
}

.dimension-label {
  font-size: 0.8125rem;
  font-weight: 600;
  /* color: var(--color-slate);*/
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.5rem;
}

.dimension-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-deep-ink);
}

.dimension-card.is-empty {
  background: #fff;
}

.dimension-card.is-empty .dimension-value {
  color: var(--color-slate);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dimension-card.is-empty .insight-bar-container {
  background: transparent;
  border-top: 1px dashed #dbe3ee;
}

.dimension-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pilgrim-fit-empty {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.pilgrim-fit-empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--color-gold);
  background: rgba(197, 153, 62, 0.1);
}

.pilgrim-fit-empty h3,
.pilgrim-fit-card h3 {
  margin: 0 0 0.45rem;
  color: var(--color-deep-ink);
  font-size: 1rem;
  font-weight: 800;
}

/* L'aspect et sa note sur une même ligne : les séparer obligeait le lecteur à les rapprocher
   lui-même, alors que c'est le couple qui l'intéresse. La note reste calée à droite quelle que
   soit la longueur du libellé. */
.pilgrim-fit-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.pilgrim-fit-head i {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.pilgrim-fit-card .pilgrim-fit-head h3 {
  flex: 1 1 auto;
  margin: 0;
}

.pilgrim-fit-head .pilgrim-fit-score {
  flex: 0 0 auto;
}

.pilgrim-fit-empty p,
.pilgrim-fit-card p {
  margin: 0;
  color: var(--color-slate);
  font-size: 0.95rem;
  line-height: 1.65;
}

.pilgrim-fit-card {
  height: 100%;
  padding: 0.35rem 0.25rem;
}

.pilgrim-fit-score {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fafaf7;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 800;
}

@media (max-width: 576px) {
  .pilgrim-fit-empty {
    flex-direction: column;
  }
}

.border-dashed {
  border-style: dashed !important;
}

.btn-emerald-soft {
  background: var(--color-emerald-soft);
  color: var(--color-emerald);
  border: none;
}

.btn-emerald-soft:hover {
  background: #d1fae5;
  color: #047857;
}

.hotel-focus-panel {
  background-color: #f8fafc;
  border-radius: 1rem;
  padding: 2.5rem;
}

.focus-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
}

.focus-icon {
  font-size: 1.5rem;
  color: var(--color-emerald);
}

@media (max-width: 991.98px) {
  .agency-decision-panel {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .agency-decision-main {
    max-width: none;
  }

  .agency-decision-help-grid,
  .agency-decision-highlights {
    grid-template-columns: 1fr;
  }

  /* Une seule colonne : la note passe avant les boutons, pour décider avant d'agir. */
  .agency-decision-help-grid {
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "score";
  }

  .agency-decision-help-grid.has-actions {
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "score"
      "actions";
  }

  .agency-decision-help-grid.has-highlights {
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "score"
      "highlights";
  }

  /* Et ce qui ressort des avis s'intercale entre les deux : l'écran est trop étroit pour que le
     pèlerin voie la note et les points saillants d'un même coup d'œil, il faut donc qu'il les
     rencontre avant qu'on lui propose d'agir. */
  .agency-decision-help-grid.has-actions.has-highlights {
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "score"
      "highlights"
      "actions";
  }
}

@media (max-width: 767.98px) {
  .agency-decision-panel {
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding: 1.1rem;
  }

  .agency-decision-main h2 {
    font-size: 1.35rem;
  }

  .agency-decision-main p {
    font-size: 0.92rem;
  }

  .agency-decision-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .agency-decision-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.75rem;
  }

  .agency-stat-card {
    padding: 0.85rem;
  }

  .agency-stat-value {
    font-size: 1.3rem;
  }

  .agency-summary-panel,
  .agency-checklist-panel {
    padding: 1.1rem;
  }

  .agency-section-heading {
    gap: 0.6rem;
    margin-bottom: 0.85rem;
  }

  .agency-latest-reviews-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .agency-latest-reviews-heading > div {
    flex: 1 1 calc(100% - 2rem);
  }

  .agency-section-link {
    flex-basis: 100%;
    font-size: 0.84rem;
    margin-left: 1.85rem;
  }

  .agency-section-heading > i {
    font-size: 1.25rem;
  }

  .agency-section-heading h2 {
    font-size: 1.22rem;
  }

  .agency-section-heading p,
  .agency-checklist-lead {
    font-size: 0.9rem;
  }

  .agency-checklist-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .agency-check-icon {
    height: 1.85rem;
    width: 1.85rem;
  }

  .agency-check-item strong {
    font-size: 0.9rem;
  }

  .agency-check-item span:not(.agency-check-icon) {
    font-size: 0.84rem;
  }

  .agency-latest-reviews-panel {
    padding: 1rem;
  }

  .agency-latest-reviews-featured {
    grid-template-columns: 1fr;
  }

  .agency-review-cta {
    padding: 1rem;
  }

  .agency-review-cta h3,
  .agency-latest-reviews-empty h3 {
    font-size: 1.05rem;
  }

  .agency-review-cta p,
  .agency-latest-reviews-empty p {
    font-size: 0.86rem;
  }

  .agency-review-inline-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .agency-review-inline-cta .btn {
    justify-content: center;
    width: 100%;
  }

  .agency-latest-reviews-empty {
    padding: 1.35rem 1rem;
  }

  .review-card-public {
    padding: 1rem;
  }

  .review-card-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .review-card-rating {
    align-items: flex-start;
    grid-column: 2;
  }

  .review-card-title {
    font-size: 0.95rem;
  }

  .review-card-comment {
    font-size: 0.86rem;
  }

  .review-avatar {
    height: 2.5rem;
    width: 2.5rem;
  }

  .review-avatar-summary {
    align-items: flex-start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .review-avatar-summary-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .review-avatar-modal .modal-content {
    border-radius: 0;
    min-height: 100%;
  }

  .review-avatar-modal .modal-body {
    overflow-y: auto;
  }

  .review-avatar-modal .modal-footer {
    bottom: 0;
    position: sticky;
    z-index: 2;
  }

  .review-avatar-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-avatar-modal-choice {
    min-height: 8rem;
    padding: 0.9rem 0.55rem;
  }

  .review-avatar-modal-choice .review-avatar {
    height: 4rem;
    width: 4rem;
  }

  .agency-decision-help-panel {
    padding: 1rem;
  }

  .agency-decision-help-copy h2 {
    font-size: 1.35rem;
  }

  .agency-decision-help-copy p {
    font-size: 0.92rem;
  }

  .agency-score-value {
    font-size: 2.3rem;
  }
}

.focus-content strong {
  display: block;
  font-size: 0.875rem;
  color: var(--color-deep-ink);
  margin-bottom: 0.25rem;
}

.focus-content span {
  font-size: 0.8125rem;
  /* color: var(--color-slate);*/
}

.profile-fit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-deep-ink);
}

.insight-bar-container {
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.75rem;
}

.insight-bar-fill {
  height: 100%;
  border-radius: 4px;
}

/* ========= VOTE ANIMATIONS ========= */
@keyframes vote-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes vote-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.btn-vote {
  transition: all 0.2s ease;
}

.btn-vote i {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-vote:hover i {
  transform: translateY(-2px);
}

.btn-vote.is-voting {
  opacity: 0.5;
  pointer-events: none;
}

.btn-vote.is-voting i {
  animation: vote-pulse 0.8s infinite ease-in-out;
}

.btn-vote.voted-active {
  color: var(--color-emerald) !important;
}

.btn-vote.voted-active i {
  animation: vote-pop 0.4s ease-out;
  transform: scale(1.1);
}

/* ==========================================================================
   CUSTOM COMPONENTS - FILTER TOGGLE
   ========================================================================== */
.yahaj-filter-toggle {
  display: inline-block;
}

.yahaj-filter-pill {
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  background: #ffffff;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  /* Augmenté de 0.2 à 0.4 */
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  min-height: 40px;
}

.yahaj-filter-pill:hover {
  border-color: var(--color-gold);
  background: rgba(212, 175, 55, 0.05);
  color: var(--color-gold);
}

.yahaj-filter-checkbox:checked+.yahaj-filter-pill {
  background: var(--gradient-gold);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
  transform: scale(1.02);
}

.yahaj-filter-pill i {
  font-size: 1.1rem;
  font-weight: bold;
}

.yahaj-filter-pill:active {
  transform: scale(0.95);
}


/* ==========================================================================
   CUSTOM COMPONENTS - YAHAJ SELECT
   ========================================================================== */
.yahaj-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.yahaj-select-trigger {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  /* Style capsule */
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.yahaj-select-trigger:hover {
  border-color: var(--color-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background: #fafafa;
}

.yahaj-select-wrapper.is-open .yahaj-select-trigger {
  border-color: var(--color-gold);
  border-bottom-color: transparent;
  border-radius: 24px 24px 0 0;
  box-shadow: none;
  background: #ffffff;
}

.yahaj-select-chevron {
  transition: transform 0.3s ease;
  color: #94a3b8;
  font-size: 0.8rem;
}

.yahaj-select-wrapper.is-open .yahaj-select-chevron {
  transform: rotate(180deg);
  color: var(--color-gold);
}

.yahaj-select-selected-content {
  font-weight: 500;
  color: var(--color-slate-dark);
  font-size: 0.95rem;
}

.yahaj-select-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Dropdown Menu */
.yahaj-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border: 1.5px solid var(--color-gold);
  border-top: none;
  z-index: 2000;
  overflow: hidden;
  padding: 0.25rem 0.5rem 0.75rem 0.5rem;
  margin-top: -1px;
  /* Overlap pour fusion parfaite */
  animation: slideInDownSelect 0.15s ease-out;
}

.yahaj-select-item {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  color: #475569;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.yahaj-select-item:last-child {
  margin-bottom: 0;
}

.yahaj-select-item:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--color-gold);
}

.yahaj-select-item.is-selected {
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-gold);
  font-weight: 600;
}

@keyframes slideInDownSelect {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   AGENCIES SIDEBAR & TRIGGER
   ========================================================================== */
.btn-filter-trigger {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  color: var(--color-slate);
  transition: all 0.3s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.btn-filter-trigger:hover {
  background: #fafafa;
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.badge-count {
  background: var(--gradient-gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 2px;
}

.text-gold {
  color: var(--color-gold) !important;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.offcanvas {
  background-color: var(--color-off-white);
  z-index: 3000 !important;
}

.offcanvas-backdrop {
  z-index: 2999 !important;
}

/* ==========================================================================
   GLOBAL LOADER - GOLDEN BREATH
   ========================================================================== */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.loader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loader-visual-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo {
  width: 64px;
  height: auto;
  z-index: 2;
  animation: logo-breathe 2s ease-in-out infinite;
}

.loader-text {
  font-weight: 600;
  color: var(--color-emerald);
  letter-spacing: 1px;
  font-size: 1.1rem;
  z-index: 2;
  opacity: 1;
}


.loader-ring {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--color-gold);
  border-right-color: rgba(212, 175, 55, 0.1);
  animation: ring-rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  z-index: 1;
}

.loader-ring::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--color-gold);
  opacity: 0.3;
}

@keyframes logo-breathe {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(212, 175, 55, 0));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
  }
}

@keyframes ring-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loader-overlay.d-none {
  display: none !important;
}

.loader-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   YAHAJ ASSISTANT - FINAL CHAT COMPOSER OVERRIDES
   ========================================================================== */
.hero-section .yahaj-assistant-panel.is-compact {
  margin-top: 1.6rem;
}

.hero-section .yahaj-assistant-panel.is-compact .yahaj-assistant-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.yahaj-assistant-form,
.yahaj-assistant-panel.is-compact .yahaj-assistant-form {
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  min-height: 82px;
  padding: 0.6rem 4.6rem 0.6rem 3.35rem;
}

.yahaj-assistant-form textarea,
.yahaj-assistant-panel.is-compact .yahaj-assistant-form textarea {
  box-sizing: border-box;
  min-height: 58px;
  overflow-y: auto;
}

.yahaj-assistant-submit,
.yahaj-assistant-panel.is-compact .yahaj-assistant-submit {
  border-radius: 50%;
  bottom: 0.56rem;
  height: 2.95rem;
  min-height: 0;
  min-width: 0;
  padding: 0;
  right: 0.56rem;
  width: 2.95rem;
}

.yahaj-assistant-submit span,
.yahaj-assistant-panel.is-compact .yahaj-assistant-submit span {
  display: none;
}

.yahaj-assistant-home-prompts,
.assistant-conversation-page .yahaj-assistant-prompts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  width: 100%;
}

.yahaj-assistant-home-prompts button,
.assistant-conversation-page .yahaj-assistant-prompts button {
  width: auto;
  white-space: normal;
}

.assistant-conversation-page .yahaj-assistant-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.assistant-conversation-page .yahaj-assistant-status {
  margin-top: 0.75rem;
  text-align: center;
}

@media (max-width: 767.98px) {
  .hero-section .yahaj-assistant-panel.is-compact {
    margin-top: 1.25rem;
  }

  .yahaj-assistant-form,
  .yahaj-assistant-panel.is-compact .yahaj-assistant-form {
    border-radius: 28px;
    display: block;
    min-height: 76px;
    padding: 0.52rem 4rem 0.52rem 2.95rem;
  }

  .yahaj-assistant-input-icon {
    bottom: 1rem;
    left: 0.95rem;
  }

  .yahaj-assistant-submit,
  .yahaj-assistant-panel.is-compact .yahaj-assistant-submit {
    bottom: 0.52rem;
    height: 2.75rem;
    min-width: 0;
    right: 0.52rem;
    width: 2.75rem;
  }

  .yahaj-assistant-actions a,
  .yahaj-assistant-prompts button,
  .yahaj-assistant-home-prompts button,
  .assistant-conversation-page .yahaj-assistant-prompts button {
    width: auto;
  }

  .assistant-conversation-page {
    min-height: calc(100vh - 72px);
  }

  .assistant-conversation-page .yahaj-assistant-thread {
    min-height: 48vh;
    padding: 0 0 1rem;
  }
}

/* ==========================================================================
   HOME IA-FIRST HERO
   ========================================================================== */
.hero-section .hero-chat-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.hero-section .hero-chat-content .hero-subtitle {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

.hero-section .hero-chat-content .hero-search-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: min(900px, 100%);
  position: relative;
  width: 100%;
}

.hero-section .hero-chat-content .yahaj-assistant-home-intro p {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

.hero-section .hero-chat-content .yahaj-assistant-form,
.hero-section .hero-chat-content .yahaj-assistant-panel.is-compact .yahaj-assistant-form {
  padding-right: 9.75rem;
}

.hero-section .hero-chat-content .yahaj-assistant-home-prompts {
  justify-content: center;
}

.hero-chat-ornament {
  background-image: url("data:image/svg+xml,%3Csvg width='720' height='170' viewBox='0 0 720 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.34'%3E%3Cpath d='M118 132h484'/%3E%3Cpath d='M265 132V70l95-34 95 34v62'/%3E%3Cpath d='M304 132V86h112v46'/%3E%3Cpath d='M323 86l37-16 37 16'/%3E%3Cpath d='M241 132V93h24M455 132V93h24'/%3E%3Cpath d='M180 132V96M198 132V83M216 132V96'/%3E%3Cpath d='M504 132V96M522 132V83M540 132V96'/%3E%3Cpath d='M92 132c44-28 83-28 126 0M502 132c45-28 84-28 127 0'/%3E%3Ccircle cx='360' cy='54' r='5'/%3E%3C/g%3E%3Cg fill='%23D97706' opacity='.16'%3E%3Ccircle cx='360' cy='54' r='7'/%3E%3Ccircle cx='198' cy='83' r='4'/%3E%3Ccircle cx='522' cy='83' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: clamp(76px, 9vw, 120px);
  margin: 0.35rem auto 0.8rem;
  max-width: 720px;
  opacity: 0.34;
  pointer-events: none;
  width: 100%;
}

.hero-section .hero-chat-content .trust-proofs {
  justify-content: center;
  margin-bottom: 2rem;
}

.hero-section .hero-chat-content .hero-community-box {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.yahaj-assistant-tool {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  bottom: 0.78rem;
  color: var(--color-slate);
  display: inline-flex;
  height: 2.45rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  width: 2.45rem;
}

.yahaj-assistant-tool i {
  font-size: 1.1rem;
}

.yahaj-assistant-tool[disabled] {
  cursor: not-allowed;
  opacity: 0.42;
}

.yahaj-assistant-tool-mic {
  right: 3.9rem;
}

.yahaj-assistant-tool-voice {
  right: 6.25rem;
}

.yahaj-assistant-form,
.yahaj-assistant-panel.is-compact .yahaj-assistant-form {
  padding-right: 9.35rem;
}

@media (max-width: 767.98px) {
  .hero-section .hero-chat-content .yahaj-assistant-form,
  .hero-section .hero-chat-content .yahaj-assistant-panel.is-compact .yahaj-assistant-form,
  .yahaj-assistant-form,
  .yahaj-assistant-panel.is-compact .yahaj-assistant-form {
    padding-right: 8.85rem;
  }

  .yahaj-assistant-tool {
    bottom: 0.67rem;
    height: 2.35rem;
    width: 2.35rem;
  }

  .yahaj-assistant-tool-mic {
    right: 3.55rem;
  }

  .yahaj-assistant-tool-voice {
    right: 5.7rem;
  }

  .hero-chat-ornament {
    height: 74px;
    margin-top: 0.15rem;
  }

  .hero-section .hero-chat-content .hero-community-box {
    text-align: left;
    width: 100%;
  }
}

/* Assistant page final layout: keeps the shared widget calm inside a real page panel. */
.assistant-conversation-page.content-panel {
  min-height: calc(100vh - 230px);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}

.assistant-conversation-page .yahaj-assistant-shell {
  gap: 1.25rem;
  min-height: clamp(34rem, 64vh, 46rem);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-thread {
  margin-inline: auto;
  max-width: 980px;
  min-height: 58vh;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-results {
  gap: 1.65rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant {
  align-items: flex-start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 36px minmax(0, 1fr);
  justify-content: stretch;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
  margin-left: auto;
  max-width: min(680px, 100%);
  width: fit-content;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  font-size: 1.2rem;
  height: auto;
  margin-top: 0.1rem;
  width: auto;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar.is-assistant {
  color: var(--color-gold);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar.is-user {
  color: var(--color-emerald);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-bubble {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--color-deep-ink);
  font-size: 1rem;
  line-height: 1.6;
  max-width: min(560px, 100%);
  padding: 0;
  text-align: left;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-response-group {
  gap: 0.9rem;
  max-width: 100%;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer {
  max-width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body {
  gap: 0.95rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-section {
  border-left: 0 !important;
  display: grid;
  gap: 0.45rem;
  padding: 0 !important;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-section h4 {
  font-size: 0.96rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-section ul {
  padding-left: 1.15rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body p,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body li,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-intro,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-closing {
  font-size: 1rem;
  line-height: 1.7;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-trustline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification {
  max-width: 860px;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  margin-left: 0;
  padding: 0.85rem 1rem;
}

.yahaj-assistant-evidence-drawer summary::after {
  content: "v";
}

.yahaj-assistant-evidence-drawer[open] summary::after {
  content: "^";
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.65rem;
  padding-top: 0.9rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested > strong {
  color: var(--color-slate);
  font-size: 0.86rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested .yahaj-assistant-prompts,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification .yahaj-assistant-prompts {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline a,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested .yahaj-assistant-prompts button,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification .yahaj-assistant-prompts button {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: var(--color-deep-ink);
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 650;
  min-height: 34px;
  padding: 0.42rem 0.72rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline a i,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested .yahaj-assistant-prompts button i,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification .yahaj-assistant-prompts button i {
  color: var(--color-gold);
  font-size: 0.78rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
  display: flex;
  gap: 0;
  margin-inline: auto;
  max-width: 1040px;
  min-height: 72px;
  padding: 0.55rem 4.75rem 0.55rem 3.95rem;
  position: relative;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form:focus-within {
  border-color: rgba(217, 119, 6, 0.34);
  box-shadow: 0 16px 38px rgba(217, 119, 6, 0.12);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-inputbar {
  display: block;
  min-width: 0;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form textarea {
  color: var(--color-deep-ink);
  min-height: 50px;
  padding: 0.35rem 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-input-icon {
  align-items: center;
  border-right: 1px solid rgba(15, 23, 42, 0.12);
  bottom: 1.05rem;
  color: var(--color-emerald);
  display: flex;
  font-size: 1.28rem;
  height: 2.2rem;
  justify-content: center;
  left: 1.05rem;
  padding-right: 0.9rem;
  position: absolute;
  width: 2.45rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-submit {
  bottom: 0.58rem;
  height: 3.25rem;
  right: 0.58rem;
  width: 3.25rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-tool {
  display: none;
}

@media (max-width: 767.98px) {
  .assistant-conversation-page.content-panel {
    padding: 1.15rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-thread {
    min-height: 52vh;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant {
    gap: 0.75rem;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user {
    max-width: 100%;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar {
    font-size: 1.08rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form {
    border-radius: 24px;
    min-height: 68px;
    padding: 0.52rem 4.25rem 0.52rem 3.55rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form textarea {
    min-height: 46px;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-input-icon {
    bottom: 0.95rem;
    font-size: 1.16rem;
    left: 0.95rem;
    padding-right: 0.75rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-submit {
    bottom: 0.56rem;
    height: 2.85rem;
    right: 0.56rem;
    width: 2.85rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-tool {
    bottom: 0.88rem;
  }
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-thread {
  max-width: 100%;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant {
  gap: 0.9rem;
  grid-template-columns: 42px minmax(0, 1fr);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-response-group,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-actions-inline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-trustline,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-suggested,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification {
  max-width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar {
  align-items: center;
  background: #fff !important;
  border: 1px solid currentColor !important;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 1.12rem;
  height: 34px;
  justify-content: center;
  line-height: 1;
  margin-top: 0;
  width: 34px;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar.is-user {
  color: var(--color-emerald);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar.is-assistant {
  color: var(--color-gold);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user {
  max-width: min(680px, 100%);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-bubble {
  background: #FAFAF7 !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 10px;
  box-shadow: none !important;
  padding: 0.6rem 0.8rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body p,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body li,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-intro,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-closing,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-bubble,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-evidence-drawer,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-trustline {
  font-size: 0.875rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body p,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-body li,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-intro,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-answer-closing {
  line-height: 1.65;
}

@media (max-width: 767.98px) {
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-avatar {
    flex-basis: 30px;
    font-size: 1rem;
    height: 30px;
    width: 30px;
  }
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-complements {
  align-self: stretch;
  max-width: 100%;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies > * {
  grid-column: span 4;
  min-width: 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: clamp(19rem, 38vh, 28rem);
  padding: 1.5rem 0 1rem;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0 auto;
  max-width: 48rem;
  text-align: center;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-mark {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 50%;
  color: var(--color-gold);
  display: inline-flex;
  font-size: 1.45rem;
  height: 3.25rem;
  justify-content: center;
  margin-bottom: 0.15rem;
  width: 3.25rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-card h2 {
  color: var(--color-deep-ink);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-context {
  align-items: center;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.45rem;
  letter-spacing: 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-context i {
  color: var(--color-gold);
  font-size: 0.95rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-intro {
  color: var(--color-slate);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.65;
  margin: 0;
  max-width: 40rem;
  text-wrap: balance;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  color: var(--color-deep-ink);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 650;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.65rem 0.95rem;
  white-space: nowrap;
  width: auto;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button i {
  color: var(--color-gold);
  font-size: 0.92rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button:hover {
  border-color: rgba(4, 120, 87, 0.25);
  color: var(--color-emerald);
}

.yahaj-assistant-agency-card {
  min-height: 190px;
  padding: 1.45rem;
  width: 100%;
}

.yahaj-assistant-agency-card .agency-card-identity {
  align-items: center;
}

.yahaj-assistant-agency-card .agency-logo {
  z-index: 2;
}

.yahaj-assistant-agency-card .h5 {
  font-size: 1.05rem;
  line-height: 1.18;
}

.yahaj-assistant-agency-insight {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.yahaj-assistant-agency-score,
.yahaj-assistant-review-count {
  align-items: center;
  background: #FAFAF7;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: var(--color-slate);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 28px;
  padding: 0.25rem 0.6rem;
}

.yahaj-assistant-agency-score {
  color: var(--color-emerald);
}

.yahaj-assistant-agency-card .yahaj-assistant-card-quality {
  margin-top: 0;
}

.yahaj-assistant-agency-card .yahaj-assistant-reasons {
  gap: 0.35rem;
  width: 100%;
}

.yahaj-assistant-agency-card .yahaj-assistant-reasons span {
  border-radius: 999px;
  font-size: 0.74rem;
  padding: 0.22rem 0.55rem;
}

.yahaj-assistant-agency-card .yahaj-assistant-evidence {
  color: var(--color-slate);
  flex-basis: 100%;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.2rem 0 0 !important;
}

@media (max-width: 991.98px) {
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies > * {
    grid-column: span 6;
  }
}

@media (max-width: 575.98px) {
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies > * {
    grid-column: 1 / -1;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter {
    min-height: 28vh;
    padding-top: 1.5rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-mark {
    font-size: 1.25rem;
    height: 2.8rem;
    width: 2.8rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-card h2 {
    font-size: 1.35rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-intro {
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 100%;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts {
    justify-content: flex-start;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button {
    white-space: normal;
  }
}

/* Carte guide : effets de survol/focus (partial _GuideCard). */
.transition-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.transition-hover:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-8px);
}

.guide-card-clickable {
  cursor: pointer;
}

.guide-card-clickable:focus-within {
  outline: 3px solid rgba(0, 130, 93, 0.25);
  outline-offset: 3px;
}

.guide-card-clickable:hover .btn-link,
.guide-card-clickable:focus-within .btn-link {
  color: var(--color-gold) !important;
}

.transition-hover:hover .transition-transform {
  transform: translateX(5px);
}

.guide-card-clickable:focus-within .transition-transform {
  transform: translateX(5px);
}

.object-fit-cover {
  object-fit: cover;
}

/* Corps de contenu d'un guide (HTML riche injecte). */
.guide-content-body {
  color: #2c3e50;
  font-size: 1.15rem;
  line-height: 1.8;
}

.guide-content-body h2 {
  color: #1a1a1a;
  font-weight: 800;
  margin-bottom: 1.2rem;
  margin-top: 2.5rem;
}

.guide-content-body ul {
  margin-bottom: 2rem;
}

.guide-content-body li {
  margin-bottom: 0.5rem;
}

.guide-content-body strong {
  color: #1a1a1a;
}

/* ========= SURCOUCHE DE SÉLECTION DU PROFESSIONNEL À ÉVALUER ========= */
/* Choisir qui l'on évalue est une étape à part entière, pas une parenthèse posée sur la page :
   la surcouche occupe donc l'écran entier, comme la recherche, et sur tous les formats.
   Elle ne réutilise pas le mode plein écran du composant de recherche — elle est elle-même cette
   surcouche — mais partage sa colonne centrée pour que les deux se ressemblent au pixel près. */
.review-picker {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0.5rem 1rem 0;
}

.review-picker.d-none {
  display: none !important;
}

.review-picker-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--search-fullscreen-width);
  margin-inline: auto;
}

.review-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding-top: 0.5rem;
  flex-shrink: 0;
}

.review-picker-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-deep-ink);
  margin: 0;
}

.review-picker-hint {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0.25rem 0 0;
}

.review-picker-close {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  flex-shrink: 0;
}

.review-picker-close:hover {
  color: var(--color-deep-ink);
}

/* La barre garde sa hauteur quoi qu'il arrive : c'est la liste qui absorbe le manque de place,
   et elle seule défile pour n'avoir qu'un ascenseur. La présentation de l'une et de l'autre est
   celle du plein écran, définie plus haut. */
.review-picker .search-autocomplete-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ========= BARRE D'OUTILS D'UNE LISTE D'AVIS =========
   Ce qu'on regarde à gauche, de quoi affiner à droite. Sous « lg », les contrôles basculent
   dans un tiroir : l'offcanvas responsive de Bootstrap assure les deux états avec un seul
   formulaire, il n'y a donc rien à dupliquer. */

.review-toolbar-count {
  color: var(--color-slate);
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.review-toolbar-form > * + * {
  margin-top: 1rem;
}

/* Le site remonte ses tiroirs au-dessus de son voile via `.offcanvas` ; la variante responsive
   ne porte pas cette classe et resterait dessous, jusqu'à ce que le voile intercepte les clics. */
@media (max-width: 991.98px) {
  .review-filters-drawer.offcanvas-lg {
    background-color: var(--color-off-white);
    z-index: 3000;
  }
}

@media (min-width: 992px) {
  .review-toolbar {
    align-items: flex-end;
    border-bottom: 1px solid rgba(16, 34, 52, 0.1);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding-bottom: 1rem;
  }

  .review-toolbar-count {
    margin: 0 0 0.65rem;
  }

  /* En ligne, l'offcanvas redevient un bloc ordinaire : plus de marge intérieure, plus
     d'empilement, et le bouton retrouve sa largeur naturelle. */
  .review-filters-drawer .offcanvas-body {
    padding: 0;
  }

  .review-toolbar-form {
    align-items: flex-end;
    display: flex;
    gap: 0.75rem;
  }

  .review-toolbar-form > * + * {
    margin-top: 0;
  }

  .review-toolbar-field .form-select {
    min-width: 10rem;
  }

  .review-filters-submit {
    width: auto !important;
  }
}
