/* ===================================================
   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&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&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;
}

/* Bootstrap peint le clic, le focus et l'état désactivé avec ses propres variables, plus
   spécifiques que la couleur de fond : sans elles, ces états restent dans son bleu. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-emerald);
  --bs-btn-border-color: var(--color-emerald);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-emerald-hover);
  --bs-btn-hover-border-color: var(--color-emerald-hover);
  --bs-btn-focus-shadow-rgb: 4, 120, 87;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-emerald-hover);
  --bs-btn-active-border-color: var(--color-emerald-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-emerald);
  --bs-btn-disabled-border-color: var(--color-emerald);
  background-color: var(--color-emerald);
  color: #fff;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3);
}

.btn-primary:disabled,
.btn-primary.disabled {
  box-shadow: none;
}

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

/* L'assistant, en doré comme le lien « Demandez à YaHaj » de la page d'accueil. */
.btn-assistant {
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
}

.btn-assistant:hover,
.btn-assistant:focus-visible {
  border-color: var(--color-warning);
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}

.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%);*/
  padding: clamp(4.5rem, 9vw, 8.5rem) 0 0;
  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-hero-title-accent {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.14em;
}

.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);*/
}

/* La recherche et son lien d'aide forment une rangée centrée sous le titre. */
.home-kaaba-hero-search {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: 100%;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 3;
}

.home-agency-search {
  margin: 0 auto 2rem;
  width: 100%;
}

.home-agency-search form,
.home-agency-search .search-autocomplete-wrapper {
  width: 100%;
}

/* Cadre doré de toutes les recherches de page. Sur l'accueil, il porte deux cases : le pays des
   agences, puis la recherche dans ce pays. Ses règles passent par le wrapper de l'autocomplétion
   pour l'emporter sur les habillages de champ propres à une page (agencies.css, chargé après). */
.search-frame {
  align-items: stretch;
  background: var(--color-gold);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(180, 83, 9, 0.14);
  display: flex;
  gap: 4px;
  margin-bottom: 1.25rem;
  padding: 4px;
  width: 100%;
}

.search-frame .home-agency-search,
.search-frame > .search-autocomplete-wrapper {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.search-frame .search-autocomplete-wrapper .search-bar {
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  height: 64px;
}

.search-frame .search-autocomplete-wrapper .search-bar:focus-within {
  box-shadow: none;
}

.search-frame .search-autocomplete-wrapper .search-bar.has-autocomplete {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Jusqu'à 1199 px, la loupe seule suffit : le bouton garde son aria-label « Rechercher ». */
@media (max-width: 1199.98px) {
  .search-frame .search-bar button.btn-search-inner {
    border-radius: 50% !important;
    padding: 0 !important;
    width: 46px;
  }

  .search-frame .btn-search-inner .btn-text {
    display: none;
  }
}

.search-market-segment {
  display: flex;
  flex: 0 0 auto;
}

.search-market-toggle {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 10px;
  color: var(--color-deep-ink);
  display: flex;
  gap: 0.7rem;
  min-height: 64px;
  padding: 0 1.1rem;
  text-align: left;
  width: 100%;
}

button.search-market-toggle:hover {
  background: #fffbeb;
}

button.search-market-toggle:focus-visible {
  outline: 2px solid var(--color-emerald);
  outline-offset: -2px;
}

.search-market-flag {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  height: 20px;
  object-fit: cover;
  width: 28px;
}

.search-market-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.search-market-label {
  color: var(--color-slate);
  font-size: 0.875rem;
}

.search-market-name {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.search-market-chevron {
  color: var(--color-gold);
  font-size: 0.8rem;
  margin-left: 0.25rem;
}

.home-hero-stage {
  position: relative;
}

.home-hero-art {
  display: none;
  pointer-events: none;
}

.home-hero-art img {
  display: block;
  height: auto;
  width: 100%;
}

.home-hero-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
}

.home-hero-paths .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
}

.home-hero-helper {
  color: var(--color-slate);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}

.home-hero-helper a {
  border-bottom: 1px dashed rgba(212, 163, 89, 0.65);
  color: var(--color-gold);
  font-weight: 800;
  padding-bottom: 0.05rem;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.home-hero-helper a:hover {
  border-bottom-style: solid;
  color: #b45309;
}

/* Rang 2, sous la colonne de recherche (rang 3) : au-dessus, le bandeau passerait devant la
   surcouche plein écran de la recherche et en intercepterait le tap, ce qui la refermerait aussitôt.
   Il couvre le motif de fond (rang 1). */
.home-trust-band {
  background: var(--color-sand);
  border-block: 1px solid rgba(217, 119, 6, 0.22);
  margin-top: 2.25rem;
  padding: 1.6rem 0;
  position: relative;
  z-index: 2;
}

.home-trust-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-trust-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.25rem 1rem;
  text-align: center;
}

.home-trust-item + .home-trust-item {
  border-left: 1px solid rgba(217, 119, 6, 0.2);
}

.home-trust-icon {
  align-items: center;
  background: rgba(217, 119, 6, 0.1);
  border-radius: 50%;
  color: var(--color-gold);
  display: inline-flex;
  font-size: 1.2rem;
  height: 2.6rem;
  justify-content: center;
  margin-bottom: 0.25rem;
  width: 2.6rem;
}

.home-trust-title {
  color: var(--color-emerald-hover);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-trust-text {
  color: var(--color-slate);
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 991.98px) {
  .home-trust-list {
    gap: 1.5rem 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-trust-item:nth-child(odd) {
    border-left: 0;
  }
}

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

  .home-kaaba-hero::before {
    background-position: center 38%;
    background-size: 760px auto;
    opacity: 0.05;
  }

  .home-agency-search {
    width: 100%;
  }

  .search-frame {
    flex-direction: column;
  }

  .home-hero-paths .btn {
    flex: 1 1 100%;
  }

  .search-market-toggle {
    min-height: 52px;
  }

  .home-trust-band {
    margin-top: 1.75rem;
    padding: 1.35rem 0;
  }

  .home-trust-item {
    padding: 0 0.5rem;
  }

  .home-trust-title {
    font-size: 0.95rem;
  }

  .home-trust-text {
    font-size: 0.85rem;
  }

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


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

  /* L'illustration passe en fond, calée à droite ; le contenu occupe la moitié gauche,
     restée vide dans le dessin. Le fondu à gauche garde le texte lisible sur écran étroit. */
  .home-kaaba-hero-content {
    max-width: 800px;
  }

  .home-hero-art {
    display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
    margin: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--home-hero-art-width);
    z-index: 2;
  }

  .home-kaaba-hero-search {
    align-items: flex-start;
    margin-inline: 0;
    text-align: left;
  }

  .home-hero-paths {
    justify-content: flex-start;
  }

  /* La scène est au moins aussi haute que l'illustration (ratio 1300 × 876), pour que celle-ci
     ne déborde ni sur la navbar ni sur le bandeau de réassurance. */
  .home-hero-stage {
    --home-hero-art-width: min(46vw, 720px);
    align-items: center;
    display: flex;
    min-height: calc(var(--home-hero-art-width) * 876 / 1300);
  }

  .home-hero-stage > .container {
    width: 100%;
  }

  .home-kaaba-hero {
    padding-bottom: 0;
    padding-top: 1.5rem;
  }

  .home-trust-band {
    margin-top: 1.5rem;
  }

  .hero-community-box {
    margin: 0;
  }

  .preview-card {
    position: absolute;
    bottom: 20px;
    left: -20px;
    margin-top: 0;
    width: 320px;
  }
}

@media (min-width: 1200px) {
  .preview-card {
    left: -40px;
  }
}

/* Entre 992 et 1199 px, le contenu et l'illustration se partagent l'écran sans se chevaucher. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .home-kaaba-hero-content {
    max-width: 620px;
  }

  .home-hero-stage {
    --home-hero-art-width: 45vw;
  }
}

/* ========= 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;
}

/* En-tête commun aux deux surcouches de recherche : la flèche rouge, seule issue, puis le titre.
   Dans le composant, il n'apparaît qu'en plein écran ; hors de lui, la barre reste dans la page. */
.search-overlay-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  /* Aligné sur les bords du champ, que la barre décale de 10 px. */
  padding: 0.5rem 10px 0;
  margin-bottom: 0.375rem;
  flex-shrink: 0;
  text-align: left;
}

.search-fullscreen-head {
  display: none;
}

.is-fullscreen .search-fullscreen-head {
  display: flex !important;
}

/* Rouge pour ne pas la confondre avec le bouton doré de recherche. */
.search-overlay-close {
  border: none;
  background: transparent;
  color: var(--color-negative);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.search-overlay-close:hover,
.search-overlay-close:focus-visible {
  color: #991B1B;
}

.search-overlay-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-deep-ink);
  margin: 0;
  text-align: left;
}

/* Le titre dit déjà ce qu'on cherche : le libellé du champ ne reste que pour les lecteurs d'écran. */
.is-fullscreen .search-bar .search-desktop-label,
.review-picker .search-bar .search-desktop-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !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;
  /* Pas de marge haute : le titre au-dessus fait déjà la séparation. */
  padding: 2px 5px 10px !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;
}

/* 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;
}

/* Ramené à un cercle de 40 px, le bouton n'a plus la place d'écrire « Rechercher ». Le mot y gardait
   pourtant sa largeur et comprimait la loupe jusqu'à la faire disparaître. */
.is-fullscreen .btn-search-inner .btn-text {
  display: none !important;
}

.is-fullscreen .btn-search-inner svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* 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;
}

/* Le logo ou le monogramme, à gauche de chaque proposition. Le pèlerin reconnaît souvent une
   agence à sa marque avant d'en avoir lu le nom : c'est le premier élément de la ligne. */
/* Les autres noms se lisent avant l'adresse : ils distinguent deux fiches homonymes, alors que le
   lieu ne fait que les situer. Une nuance de gris suffit a etablir cet ordre. */
.autocomplete-names {
  color: #52606d;
}

.autocomplete-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.agency-logo-sm {
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* La marge intérieure des grandes tailles laisserait ici une vignette illisible : un logo de
   quelques pixels ne se reconnaît plus, et c'est précisément ce qu'on lui demande. */
.agency-logo-sm img {
  padding: 3px;
}

/* Les avis, à l'autre bout de la ligne. Ils ne paraissent qu'à partir du premier : la colonne
   reste donc vide tant qu'aucun témoignage n'a été publié, et le nom occupe toute la largeur. */
.autocomplete-reviews {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.08);
  color: var(--color-emerald);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

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

.agency-logo.is-monogram {
  background: var(--agency-logo-fallback);
  color: #fff;
  border-color: transparent;
}

.agency-logo.has-image .agency-logo-initials,
.agency-logo.has-image .agency-logo-pattern {
  display: none;
}

/*
  Carte d'une agence dans une liste : accueil, recherche, annuaire, assistant.
  Elle se règle sur sa propre largeur et non sur l'écran : étroite dans une grille de trois colonnes
  comme sur un téléphone, large seule sur sa ligne. Ses couleurs et sa police sont celles de la
  maquette « Version finale », propres à la carte.
  En large, les mesures suivent la maquette de 980 px de contenu, réduites jusqu'aux trois quarts
  sur une carte plus étroite : --u vaut un pixel de la maquette.
*/
/* La palette de la carte, reprise par la fiche de l'agence : on passe de l'une à l'autre sans changer de couleurs. */
.pro-card,
.agency-sheet {
  --pc-green: #0C8A5B;
  --pc-green-strong: #0B7350;
  --pc-green-text: #0B6E49;
  --pc-green-soft: #DDF5EA;
  --pc-green-pastel: #EEF8F2;
  --pc-orange: #F28C28;
  --pc-orange-title: #E2700F;
  --pc-orange-text: #C2570C;
  --pc-orange-pastel: #FFF2E8;
  --pc-orange-line: #FCE3CF;
  --pc-ink: #0F172A;
  --pc-ink-soft: #1E293B;
  --pc-body: #334155;
  --pc-muted: #5B6475;
  --pc-line: #EAEAEA;
  --pc-sand: #F7F5F1;
}

.pro-card {
  --pc-inset: 7px;
  --u: clamp(0.75px, calc(100cqi / 980), 1px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 12px 12px 18px;
  container-type: inline-size;
  background: #fff;
  border: 1px solid #EFEDE8;
  border-radius: 26px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
  color: var(--pc-ink);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

.pro-card a {
  cursor: pointer;
}

.pro-card a:focus-visible {
  outline: 3px solid var(--pc-orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.pro-card :where(p, dl, dd, ul) {
  margin: 0;
}

.pro-card .bi {
  line-height: 1;
}

.pro-card > :not(.pro-card-top) {
  margin-inline: var(--pc-inset);
}

/* ---------- En-tête : la couverture en bandeau, le logo qui la chevauche, puis l'identité ---------- */

.pro-card-top {
  min-width: 0;
}

.pro-card-cover {
  height: clamp(132px, 44cqi, 172px);
  border-radius: 18px;
  background-color: var(--color-sand);
  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.16'%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"),
    linear-gradient(120deg, var(--color-sand) 0%, var(--color-soft-emerald) 100%);
  background-size: 56px 56px, auto;
}

/* La photo de la vitrine recouvre le motif, recadrée sans être déformée. */
.pro-card-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* L'image du site garde la Kaaba, placée aux deux tiers de sa largeur, dans le cadre. */
.pro-card-cover:not(.has-photo) > img,
.agency-sheet-cover:not(.has-photo) > img {
  object-position: 70% center;
}

/* Le cœur se pose sur la couverture. */
.pro-card-fav {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  color: var(--pc-ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.pro-card-fav:hover {
  transform: scale(1.05);
}

.pro-card-fav:focus-visible {
  outline: 3px solid var(--pc-green);
  outline-offset: 2px;
}

.pro-card-fav[aria-pressed="true"] {
  color: #E11D48;
}

.pro-card-head {
  min-width: 0;
}

.pro-card .pro-card-head > .agency-logo {
  position: absolute;
  top: 34px;
  left: 26px;
  width: clamp(92px, 29cqi, 116px);
  height: clamp(98px, 32cqi, 126px);
  border: 1px solid #F0F0EE;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  font-size: 2rem;
}

.pro-card .pro-card-head > .agency-logo img {
  padding: 10%;
}

.pro-card-identity {
  min-width: 0;
  padding: 13px var(--pc-inset) 0;
}

.pro-card-title {
  margin: 0 0 8px;
  color: var(--pc-ink);
  font-family: inherit;
  font-size: clamp(1.35rem, 7cqi, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pro-card-link {
  color: inherit;
  text-decoration: none;
}

.pro-card-link:hover {
  color: var(--pc-green-strong);
}

.pro-card-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 12px;
  color: var(--pc-muted);
  font-size: 1.0625rem;
  font-weight: 500;
}

.pro-card-distance {
  color: var(--pc-ink);
  font-weight: 600;
}

.pro-card .licence-status {
  font-size: 1rem;
}

.pro-card .licence-status-label {
  gap: 9px;
  min-height: 38px;
  padding: 0 0 0 12px;
}

.pro-card .licence-status-info {
  min-width: 34px;
  min-height: 34px;
  margin: 0 2px 0 0;
  padding: 0;
}

.pro-card .licence-status.is-known {
  background: var(--pc-green-soft);
  color: var(--pc-green-text);
}

.pro-card .licence-status.is-known .licence-status-label > .bi {
  color: var(--pc-green);
}

.pro-card-rank-fact {
  margin-top: 14px;
  color: var(--pc-green-text);
}

/* ---------- Notes : YaHaj, puis la plateforme d'ailleurs, puis l'ancienneté ---------- */

.pro-card-reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 24px;
}

.pro-card-review-row {
  --pc-row-inset: 0px;
  --pc-icon: 58px;
  position: relative;
  min-width: 0;
  min-height: var(--pc-icon);
  padding-left: calc(var(--pc-row-inset) + var(--pc-icon) + 12px);
}

.pro-card-reviews:not(:has(> .is-external)) > .is-yahaj {
  grid-column: 1 / -1;
}

.pro-card-review-row.is-external {
  --pc-row-inset: 16px;
  border-left: 1px solid var(--pc-line);
}

.pro-card-source-icon {
  position: absolute;
  top: 0;
  left: var(--pc-row-inset);
  display: grid;
  place-items: center;
  width: var(--pc-icon);
  height: var(--pc-icon);
  border: 1px solid #EDEDED;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  color: var(--pc-muted);
  font-size: 1.5rem;
}

.pro-card-source-icon svg {
  display: block;
  width: 54%;
  height: 54%;
}

.pro-card-source-icon img {
  display: block;
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.pro-card-review-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pro-card-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 5px;
}

.pro-card-rating strong {
  color: var(--pc-ink);
  font-size: 1.4375rem;
  font-weight: 800;
  line-height: 1;
}

.pro-card-rating.is-external strong {
  font-weight: 700;
}

.pro-card-scale {
  color: var(--pc-body);
  font-size: 0.78em;
  font-weight: 400;
}

.pro-card-stars {
  display: inline-flex;
  flex-basis: 100%;
  gap: 2px;
  color: var(--pc-green);
  font-size: 1rem;
}

/* La couleur de la note YaHaj reste celle du site sous 4 ; au-dessus, le vert de la carte. */
.pro-card .pro-card-stars.rating-high {
  color: var(--pc-green) !important;
}

.pro-card-rating.is-external .pro-card-stars {
  color: #3FA77D;
}

.pro-card-source,
.pro-card-checked {
  margin-top: 6px;
  color: var(--pc-muted);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.pro-card-checked {
  margin-top: 2px;
  font-size: 0.8125rem;
}

.pro-card-source-long {
  display: none;
}

.pro-card-count {
  white-space: nowrap;
}

.pro-card-missing {
  color: var(--pc-muted);
  font-size: 0.9375rem;
}

.pro-card-empty-review {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pro-card-review-cta {
  position: relative;
  z-index: 4;
  color: var(--pc-green-text);
  font-size: 0.875rem;
  font-weight: 700;
  text-underline-offset: 2px;
}

/* Gris, jamais une couleur d'alerte : peu d'avis est une limite de YaHaj, pas un défaut de l'agence. */
.pro-card-documentation {
  margin-top: 6px;
  font-size: 0.8125rem;
}

/* L'orange de la maquette, en texte foncé pour rester lisible sur le fond clair. */
.pro-card-review-row.is-tagline {
  grid-column: 1 / -1;
  min-height: 80px;
  padding: 14px 16px;
  border: 1px solid var(--pc-orange-line);
  border-radius: 17px;
  background: var(--pc-orange-pastel);
}

.pro-card-review-row.is-tagline dd {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pro-card-tagline-icon {
  flex: none;
  color: var(--pc-orange);
  font-size: 1.9rem;
}

.pro-card-tagline strong {
  display: block;
  color: var(--pc-orange-text);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pro-card-tagline .pro-card-source {
  display: block;
  margin-top: 3px;
}

/* ---------- Ce que YaHaj sait, sans avis ---------- */

.pro-card-block-title {
  margin: 0 0 6px;
  color: var(--pc-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.pro-card-synthesis {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--pc-sand);
}

.pro-card-synthesis > .bi {
  color: var(--pc-orange);
  font-size: 1.25rem;
  line-height: 1.3;
}

.pro-card-synthesis .pro-card-block-title {
  margin-bottom: 4px;
  color: var(--pc-ink);
  font-size: 0.9375rem;
}

.pro-card-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--pc-body);
  font-size: 0.875rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.pro-card-synthesis.is-summary {
  border: 1px solid var(--pc-green-soft);
  background: var(--pc-green-pastel);
}

.pro-card-synthesis.is-summary > .bi {
  color: var(--pc-green-text);
}

.pro-card-synthesis.is-summary .pro-card-block-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--pc-green-text);
}

.pro-card-summary-source {
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--pc-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.pro-card-profiles-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  color: var(--pc-ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.pro-card-profiles-line > .bi {
  color: var(--pc-green-text);
  font-size: 1.2rem;
}

.pro-card-profiles-line.is-empty {
  color: var(--pc-muted);
  font-weight: 500;
}

.pro-card-profiles-line.is-empty > .bi {
  color: var(--pc-muted);
}

/* ---------- Les quatre cases : profils conseillés, à défaut aspects dont parlent les avis ---------- */

.pro-card-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 3cqi, 12px);
  margin-top: 17px;
  padding: 0;
  list-style: none;
}

.pro-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 84px;
  padding: 10px 4px;
  border: 1px solid #E2F1E8;
  border-radius: 16px;
  background: var(--pc-green-pastel);
  text-align: center;
}

.pro-card-tile-round {
  display: inline-grid;
  flex: none;
  place-items: center;
  color: var(--pc-green);
  font-size: 1.7rem;
}

.pro-card-tile-body {
  min-width: 0;
}

.pro-card-tile-title,
.pro-card-tile-text {
  display: block;
}

.pro-card-tile-title {
  color: var(--pc-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Sur la carte étroite, la case nomme le profil ; le nombre d'avis reste dit aux lecteurs d'écran. */
.pro-card-tile-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Les aspects, aux noms plus longs que ceux des profils : deux par ligne, l'icône à côté du nom. */
.pro-card-tiles.is-axes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pro-card-tiles.is-axes .pro-card-tile {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  text-align: left;
}

.pro-card-tiles.is-axes .pro-card-tile-round {
  font-size: 1.4rem;
}

.pro-card-tiles.is-axes .pro-card-tile-title {
  font-size: 0.875rem;
}

.pro-card-tiles.is-axes .pro-card-tile-text {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  margin-top: 2px;
  color: var(--pc-muted);
  font-size: 0.8125rem;
  white-space: normal;
}

/* ---------- Pour mon profil, votre priorité ---------- */

.pro-card-profile {
  margin-top: 17px;
}

.pro-card-profile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.pro-card-profile-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  font-size: 0.9375rem;
}

.pro-card-profile-list .pro-card-tile-round {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pc-green-soft);
  font-size: 1.1rem;
}

.pro-card-profile-list li > :not(.pro-card-tile-round) {
  grid-column: 2;
}

.pro-card-profile-name {
  color: var(--pc-ink);
  font-weight: 700;
}

.pro-card-profile-state {
  color: var(--pc-muted);
}

.pro-card-profile-signal {
  font-size: 0.875rem;
}

.pro-card-profile-signal.is-strength {
  color: var(--pc-green-text);
}

.pro-card-profile-signal.is-watch {
  color: var(--pc-orange-text);
}

.pro-card-axes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 0.9375rem;
}

.pro-card-block-title + .pro-card-axes {
  margin-top: 0;
}

.pro-card-axis {
  display: contents;
}

.pro-card-axis dt {
  color: var(--pc-muted);
  font-weight: 600;
}

.pro-card-axis dt .bi {
  margin-right: 4px;
  color: var(--pc-green);
}

.pro-card-axis dd {
  color: var(--pc-ink);
}

.pro-card-axis.is-priority dt {
  color: var(--pc-ink);
}

.pro-card-axis-priority {
  display: block;
  color: var(--pc-orange-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.pro-card-vigilance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  color: var(--pc-muted);
  font-size: 0.875rem;
}

/* ---------- Points forts, points à surveiller : repliés sur la carte étroite, en panneaux en large ---------- */

.pro-card-panels {
  display: none;
}

.pro-card-folds {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 17px;
}

.pro-card-panel-list {
  display: grid;
  gap: 10px;
  padding: 0;
  color: var(--pc-body);
  font-size: 1rem;
  line-height: 1.4;
  list-style: none;
}

.pro-card-panel-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pro-card-panel-list .bi {
  flex: none;
  margin-top: 0.05em;
  color: var(--pc-green);
  font-size: 1.2rem;
}

.is-watch .pro-card-panel-list .bi {
  color: var(--pc-orange);
}

.is-checks .pro-card-panel-list .bi {
  color: var(--pc-orange-text);
}

.pro-card-panel-note {
  margin-top: 10px;
  color: var(--pc-muted);
  font-size: 0.8125rem;
}

.pro-card-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pc-green-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pro-card-panel-more:hover {
  text-decoration: underline;
}

.pro-card-fold-group {
  position: relative;
  z-index: 4;
  overflow: hidden;
  border: 1px solid var(--pc-line);
  border-radius: 16px;
  background: #fff;
}

.pro-card-fold + .pro-card-fold {
  border-top: 1px solid var(--pc-line);
}

.pro-card-fold summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 16px;
  color: var(--pc-ink-soft);
  font-size: 1.0625rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.pro-card-fold summary::-webkit-details-marker {
  display: none;
}

.pro-card-fold summary:focus-visible {
  outline: 3px solid var(--pc-orange);
  outline-offset: -3px;
}

.pro-card-fold .pro-card-panel-icon {
  font-size: 1.5rem;
}

.pro-card-fold.is-strength .pro-card-panel-icon {
  color: var(--pc-green);
}

.pro-card-fold.is-watch .pro-card-panel-icon {
  color: var(--pc-orange);
}

.pro-card-fold.is-checks .pro-card-panel-icon {
  color: var(--pc-orange-text);
}

.pro-card-fold-count {
  color: var(--pc-muted);
  font-weight: 500;
}

.pro-card-fold-chevron {
  margin-left: auto;
  color: var(--pc-ink);
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

.pro-card-fold[open] .pro-card-fold-chevron {
  transform: rotate(180deg);
}

.pro-card-fold .pro-card-panel-list,
.pro-card-fold .pro-card-panel-note,
.pro-card-fold .pro-card-panel-more {
  margin-right: 16px;
  margin-left: 54px;
}

.pro-card-fold > :last-child {
  margin-bottom: 16px;
}

.pro-card-fold .pro-card-panel-more {
  margin-top: 10px;
}

.pro-card-fold-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--pc-sand);
  text-decoration: none;
}

.pro-card-why {
  position: relative;
  z-index: 4;
  margin-top: 14px;
  font-size: 0.875rem;
}

.pro-card-why summary {
  color: var(--pc-green-text);
  font-weight: 600;
  cursor: pointer;
}

.pro-card-why ul {
  margin: 6px 0 0;
  padding-left: 1.1rem;
  color: var(--pc-ink);
}

.pro-card-why p {
  margin-top: 6px;
  color: var(--pc-muted);
}

/* ---------- Pied : comparer, voir la fiche ---------- */

.pro-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 19px;
}

/* Les boutons du site (btn-primary, btn-outline-secondary) : la carte n'en règle que la place. */
.pro-card-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--bs-body-font-family);
  white-space: nowrap;
}

.pro-card-foot-link {
  flex: 1 1 auto;
}

.pro-card-foot.is-comparable {
  flex-wrap: wrap;
}

.pro-card-foot.is-comparable .pro-card-foot-link {
  flex: 1 1 200px;
}

.pro-card a.btn:focus-visible {
  outline: 0;
  border-radius: var(--bs-btn-border-radius);
}

/* La vraie case, invisible, couvre le bouton : c'est elle que le clavier et les lecteurs d'écran atteignent. */
.pro-card-compare-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pro-card-compare-button:has(:focus-visible) {
  box-shadow: var(--bs-btn-focus-box-shadow);
}

.pro-card-compare-button {
  position: relative;
  flex: 1 1 200px;
}

.pro-card-compare-added,
.pro-card-compare-done {
  display: none;
}

.pro-card-foot:has(.pro-card-compare-input:checked) .pro-card-compare-button {
  border-color: var(--pc-green);
  background: var(--pc-green-soft);
  color: var(--pc-green-text);
}

.pro-card-foot:has(.pro-card-compare-input:checked) .pro-card-compare-add,
.pro-card-foot:has(.pro-card-compare-input:checked) .pro-card-compare-button-text {
  display: none;
}

.pro-card-foot:has(.pro-card-compare-input:checked) .pro-card-compare-added,
.pro-card-foot:has(.pro-card-compare-input:checked) .pro-card-compare-done {
  display: inline;
}

/* ================= Carte large ================= */

@container (min-width: 620px) {
  .pro-card-top {
    margin: calc(17 * var(--u)) calc(10 * var(--u)) 0;
  }

  .pro-card > :not(.pro-card-top) {
    margin-inline: calc(10 * var(--u));
  }

  /* Le motif s'efface vers la gauche et vers le bas, sous l'en-tête : la carte, conteneur, est un
     contexte d'empilement, et le motif passe derrière son contenu sans passer derrière son fond. */
  .pro-card-cover {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 49%;
    height: calc(288 * var(--u));
    border-radius: 0 25px 0 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 60%, transparent 100%);
    mask-composite: intersect;
  }

  .pro-card-fav {
    top: calc(36 * var(--u));
    right: calc(32 * var(--u));
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    border-radius: 15px;
    font-size: calc(25 * var(--u));
  }

  .pro-card-head {
    display: flex;
    align-items: center;
    gap: calc(22 * var(--u));
    min-height: calc(171 * var(--u));
  }

  .pro-card .pro-card-head > .agency-logo {
    position: static;
    flex: 0 0 calc(168 * var(--u));
    width: calc(168 * var(--u));
    height: calc(171 * var(--u));
    border-radius: 18px;
    font-size: calc(48 * var(--u));
  }

  .pro-card-identity {
    max-width: 52%;
    padding: 0;
  }

  .pro-card-title {
    margin-bottom: calc(12 * var(--u));
    font-size: calc(38 * var(--u));
  }

  .pro-card-location {
    gap: 4px calc(10 * var(--u));
    margin-bottom: calc(14 * var(--u));
    font-size: calc(20 * var(--u));
  }

  .pro-card .licence-status {
    font-size: calc(19 * var(--u));
  }

  .pro-card .licence-status-label {
    gap: calc(11 * var(--u));
    min-height: calc(44 * var(--u));
    padding-left: calc(14 * var(--u));
  }

  .pro-card-reviews {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    column-gap: calc(18 * var(--u));
    margin-top: calc(36 * var(--u));
  }

  .pro-card-reviews:has(> :nth-child(2)) {
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1.3fr);
  }

  .pro-card-reviews:has(> :nth-child(3)) {
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1.3fr) minmax(0, 1.04fr);
  }

  .pro-card-review-row {
    --pc-icon: calc(68 * var(--u));
    padding-left: calc(var(--pc-row-inset) + var(--pc-icon) + 18 * var(--u));
  }

  .pro-card-review-row.is-external {
    --pc-row-inset: calc(18 * var(--u));
  }

  .pro-card-source-icon {
    border-radius: 18px;
  }

  .pro-card-review-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--pc-ink-soft);
    font-size: calc(19 * var(--u));
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
  }

  .pro-card-rating {
    margin-top: calc(8 * var(--u));
  }

  .pro-card-rating strong {
    font-size: calc(32 * var(--u));
  }

  .pro-card-stars {
    flex-basis: auto;
    align-self: center;
    gap: calc(3 * var(--u));
    margin-left: calc(12 * var(--u));
    font-size: calc(21 * var(--u));
  }

  .pro-card-source {
    margin-top: calc(9 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .pro-card-checked {
    font-size: calc(15 * var(--u));
  }

  .pro-card-source-long {
    display: inline;
  }

  .pro-card-source-short {
    display: none;
  }

  .pro-card-missing {
    font-size: calc(18 * var(--u));
  }

  .pro-card-review-cta {
    font-size: calc(16 * var(--u));
  }

  .pro-card-review-row.is-tagline {
    grid-column: auto;
    min-height: calc(104 * var(--u));
    padding: calc(15 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
    border-radius: 18px;
  }

  .pro-card-review-row.is-tagline dd {
    gap: calc(12 * var(--u));
  }

  .pro-card-tagline-icon {
    font-size: calc(34 * var(--u));
  }

  .pro-card-tagline strong {
    font-size: calc(19 * var(--u));
  }

  .pro-card-tagline .pro-card-source {
    margin-top: calc(4 * var(--u));
    font-size: calc(15.5 * var(--u));
  }

  .pro-card-synthesis {
    margin-top: calc(24 * var(--u));
    padding: calc(16 * var(--u)) calc(20 * var(--u));
    border-radius: 18px;
  }

  .pro-card-synthesis .pro-card-block-title {
    font-size: calc(17 * var(--u));
  }

  .pro-card-summary {
    display: block;
    font-size: calc(16 * var(--u));
  }

  .pro-card-synthesis.is-summary .pro-card-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .pro-card-summary-source {
    font-size: calc(13 * var(--u));
  }

  .pro-card-profiles-line {
    margin-top: calc(18 * var(--u));
    font-size: calc(17 * var(--u));
  }

  .pro-card-tiles,
  .pro-card-tiles.is-axes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 1.08fr) minmax(0, 1.24fr);
    gap: calc(15 * var(--u));
    margin-top: calc(33 * var(--u));
  }

  .pro-card-tile,
  .pro-card-tiles.is-axes .pro-card-tile {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(12 * var(--u));
    min-height: calc(90 * var(--u));
    padding: 0 calc(8 * var(--u)) 0 calc(10 * var(--u));
    border: 0;
    border-radius: 17px;
    text-align: left;
  }

  .pro-card-tile-round,
  .pro-card-tiles.is-axes .pro-card-tile-round {
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    border-radius: 50%;
    background: var(--pc-green-soft);
    font-size: calc(28 * var(--u));
  }

  .pro-card-tile-title,
  .pro-card-tiles.is-axes .pro-card-tile-title {
    font-size: calc(17.5 * var(--u));
    font-weight: 700;
  }

  .pro-card-tile-text,
  .pro-card-tiles.is-axes .pro-card-tile-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin-top: calc(5 * var(--u));
    color: var(--pc-muted);
    font-size: calc(14.5 * var(--u));
    white-space: normal;
  }

  .pro-card-profile {
    margin-top: calc(24 * var(--u));
  }

  .pro-card-panels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: calc(17 * var(--u));
    margin-top: calc(19 * var(--u));
  }

  .pro-card-folds {
    display: none;
  }

  .pro-card-panel {
    min-height: calc(207 * var(--u));
    padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
    border-radius: 18px;
    background: var(--pc-sand);
  }

  .pro-card-panel.is-strength {
    background: var(--pc-green-pastel);
  }

  .pro-card-panel.is-watch {
    background: var(--pc-orange-pastel);
  }

  .pro-card-panel-head {
    display: flex;
    align-items: center;
    gap: calc(15 * var(--u));
    margin-bottom: calc(18 * var(--u));
  }

  .pro-card-panel-icon {
    color: var(--pc-orange-text);
    font-size: calc(32 * var(--u));
  }

  .is-strength .pro-card-panel-icon {
    color: var(--pc-green);
    font-size: calc(36 * var(--u));
  }

  .is-watch .pro-card-panel-icon {
    color: var(--pc-orange);
    font-size: calc(40 * var(--u));
  }

  .pro-card-panel-title {
    min-width: 0;
    color: var(--pc-ink);
    font-size: calc(23 * var(--u));
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .is-watch .pro-card-panel-title {
    color: var(--pc-orange-title);
  }

  .pro-card-accent {
    color: var(--pc-green);
  }

  .pro-card-panel-head .pro-card-panel-more {
    gap: calc(8 * var(--u));
    margin-left: auto;
    font-size: calc(17 * var(--u));
  }

  .is-watch .pro-card-panel-more {
    color: var(--pc-ink-soft);
  }

  .pro-card-panel-list {
    gap: calc(14 * var(--u));
    padding-left: 2px;
    font-size: calc(19 * var(--u));
  }

  .pro-card-panel-list li {
    gap: calc(24 * var(--u));
  }

  .pro-card-panel-list .bi {
    font-size: calc(29 * var(--u));
  }

  .pro-card-panel-note {
    margin-top: calc(14 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .pro-card-panel .pro-card-review-cta {
    display: inline-block;
    margin-top: calc(12 * var(--u));
    font-size: calc(17 * var(--u));
  }

  .pro-card-why {
    margin-top: calc(16 * var(--u));
    font-size: calc(16 * var(--u));
  }

  /* Le filet du pied se tient à 17 px des panneaux, même quand la carte s'allonge dans sa ligne. */
  .pro-card-foot {
    gap: calc(15 * var(--u));
    padding-top: calc(36 * var(--u));
    background: linear-gradient(var(--pc-line), var(--pc-line)) no-repeat 0 calc(17 * var(--u)) / 100% 1px;
  }

  .pro-card-foot,
  .pro-card-foot.is-comparable {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .pro-card-foot-link,
  .pro-card-foot.is-comparable .pro-card-foot-link,
  .pro-card-compare-button {
    flex: 0 0 auto;
  }
}

/* Tablette : la même carte, resserrée, sans changer l'ordre. */
@container (min-width: 620px) and (max-width: 880px) {
  .pro-card-reviews:has(> :nth-child(3)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: calc(20 * var(--u));
  }

  .pro-card-reviews:has(> :nth-child(3)) > .is-tagline {
    grid-column: 1 / -1;
  }

  .pro-card-tiles,
  .pro-card-tiles.is-axes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pro-card-panel-title {
    font-size: calc(20 * var(--u));
  }

  .pro-card-panel-head .pro-card-panel-more {
    font-size: calc(15 * var(--u));
  }

  .pro-card-panel-list {
    font-size: calc(17 * var(--u));
  }

  .pro-card-panel-list li {
    gap: calc(16 * var(--u));
  }

  .pro-card-foot.is-comparable .pro-card-foot-link,
  .pro-card-compare-button {
    flex: 1 1 0;
  }
}

/* Téléphones étroits : on resserre sans rien retirer. */
@container (max-width: 370px) {
  .pro-card-reviews {
    column-gap: 10px;
  }

  .pro-card-review-row {
    --pc-icon: 46px;
    padding-left: calc(var(--pc-row-inset) + var(--pc-icon) + 8px);
  }

  .pro-card-review-row.is-external {
    --pc-row-inset: 10px;
  }

  .pro-card-source-icon {
    border-radius: 13px;
  }

  .pro-card-stars {
    font-size: 0.875rem;
  }

  .pro-card-tile-title {
    font-size: 0.84rem;
  }
}

/* Colonne trop étroite pour deux notes côte à côte : on les empile. */
@container (max-width: 320px) {
  .pro-card-reviews {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-card-review-row.is-external {
    --pc-row-inset: 0px;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pro-card,
  .pro-card-fav,
  .pro-card-fold-chevron,
  .pro-card-compare-button {
    transition: none;
  }
}

/*
  Statut de licence : vérifiée ou non vérifiée, et « Société fermée » à la place de la licence quand
  la société a cessé. Chacun un mot, une icône et une couleur, pour que la couleur ne soit jamais le
  seul repère. Le même sur la carte et en tête de l'encart de la fiche.
*/
.licence-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.15rem;
  max-width: 100%;
  border-radius: 999px;
  background: var(--color-sand);
  color: var(--color-slate);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.licence-status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0 0.3rem 0.65rem;
}

.licence-status-info {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  margin: -0.2rem 0 -0.2rem 0;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.licence-status-info:hover,
.licence-status-info[aria-expanded="true"] {
  background: rgba(15, 23, 42, 0.08);
}

.licence-status-info:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 1px;
}

.licence-status.is-known {
  background: var(--color-positive-bg);
  color: var(--color-positive);
}

.licence-status.is-missing {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.licence-status.is-closed {
  background: var(--color-negative-bg);
  color: var(--color-negative);
}

.licence-popover {
  --bs-popover-max-width: 320px;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-header-font-size: 0.95rem;
  --bs-popover-border-color: rgba(15, 23, 42, 0.12);
  box-shadow: var(--shadow-lg);
}

.licence-popover .popover-header {
  font-weight: 700;
  background: var(--color-off-white);
}

.licence-popover .popover-body p {
  margin: 0 0 0.6rem;
  color: var(--color-deep-ink);
  line-height: 1.55;
}

.licence-popover .popover-body a {
  color: var(--color-emerald);
  font-weight: 600;
  text-decoration: none;
}

.licence-popover .popover-body a:hover {
  text-decoration: underline;
}

/* Pastille sans ⓘ : la légende de la page de méthode, où l'explication est écrite à côté. */
.licence-status-label.is-standalone {
  padding-right: 0.7rem;
}

.verification-block + .verification-block {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.verification-block h2 {
  margin-bottom: 0.9rem;
  color: var(--color-deep-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.verification-block p,
.verification-block li {
  color: var(--color-deep-ink);
  line-height: 1.7;
}

.verification-block li + li {
  margin-top: 0.4rem;
}

.verification-block a:not(.btn) {
  color: var(--color-emerald);
  font-weight: 600;
}

.verification-statuses {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.verification-status {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.verification-status dt {
  font-weight: inherit;
}

.verification-status dd {
  margin: 0;
  color: var(--color-deep-ink);
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .verification-status {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

@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 {
  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 {
  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-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;
}

/* Replié par le script seulement : sans lui, l'avis se lit en entier. */
.review-card-comment.is-clamped {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  display: -webkit-box;
  line-clamp: 6;
  overflow: hidden;
}

/* La carte remontée au repli s'arrête sous la barre de navigation fixe. */
.review-card-public {
  scroll-margin-top: 6rem;
}

.review-card-more {
  color: var(--color-emerald);
  font-size: 0.86rem;
  font-weight: 600;
  margin: -0.5rem 0 1rem;
  text-underline-offset: 3px;
}

/* Un avis déplié n'étire pas sa voisine de rangée. */
.agency-latest-reviews-panel > .row {
  align-items: flex-start;
}

.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-footer-actions {
  align-items: center;
  display: flex;
  gap: 1.25rem;
}

.review-card-footer .review-card-permalink {
  color: var(--color-emerald);
  font-weight: 600;
  text-underline-offset: 3px;
}

.review-card-votes .btn,
.review-card-footer .review-card-permalink,
.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;
}

/* La marge sépare du texte, pas d'une bande de couleur : quand la page se termine par une bande
   pleine largeur, elle laisserait une lisière claire entre deux aplats. */
.site-footer.site-footer-flush {
  margin-top: 0;
}

.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-12,
  .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 (étape 3) : chaque question du type évalué est visible, ses visages déjà affichés. */
.review-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.review-criterion-row {
  min-width: 0;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  background: #fff;
  padding: 1rem 1.1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.review-criterion-row.is-rated {
  border-color: rgba(0, 121, 86, 0.45);
  background: #fafaf7;
}

.review-criterion-row.is-invalid {
  border-color: var(--color-negative);
  background: var(--color-negative-bg);
}

/* Flottante (comme la légende Bootstrap) pour rester dans le cadre au lieu de se poser sur sa bordure. */
.review-criterion-question {
  float: left;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-slate);
}

.review-criterion-emoji {
  font-size: 1.35rem;
  line-height: 1;
}

.review-criterion-row .star-rating-custom {
  clear: left;
}

.review-criterion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
}

.review-criterion-clear {
  display: none;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: none;
  padding: 0.4rem 0;
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.review-criterion-row.is-rated .review-criterion-clear {
  display: inline-flex;
}

.review-criterion-clear:hover {
  color: var(--color-slate);
  text-decoration: underline;
}

/* Une question à la fois (JavaScript actif) : seule la question courante est affichée. */
.review-criteria-block.is-quiz .review-criterion-row:not(.is-current) {
  display: none;
}

.review-criteria-block.is-quiz .review-criterion-row {
  padding: 1.5rem 1.25rem;
  animation: fadeInStep 0.3s ease;
}

.review-criteria-block.is-quiz .review-criterion-question {
  justify-content: center;
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.review-criteria-block.is-quiz .review-criterion-emoji {
  font-size: 1.5rem;
}

.review-criteria-block.is-quiz .review-criteria-hint {
  font-size: 0.95rem;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-align: center;
}

.review-criteria-block.is-quiz .emoji-rating-scale {
  justify-content: center;
}

.review-criteria-block.is-quiz .review-criterion-actions {
  justify-content: center;
}

.review-quiz-progress {
  margin-bottom: 1rem;
}

.review-quiz-counter {
  display: block;
  margin-bottom: 0.4rem;
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 600;
}

.review-quiz-bar {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.review-quiz-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--color-emerald);
  transition: width 0.25s ease;
}

.review-quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* 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 */
.emoji-rating-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.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 : 3 grands visages par ligne, les 2 derniers centrés (note globale comme questions). */
@media (max-width: 768px) {
  .emoji-rating-scale {
    justify-content: center;
  }

  .emoji-option {
    flex: 0 0 calc((100% - 2 * 0.6rem) / 3);
    padding: 0.7rem 0.3rem;
  }

  .emoji-glyph {
    font-size: 2.2rem;
  }

  .emoji-caption {
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Très petits écrans : « Recommandé », « Exceptionnel » tiennent sans être coupés. */
@media (max-width: 380px) {
  .emoji-rating-scale {
    gap: 0.4rem;
  }

  .emoji-option {
    flex-basis: calc((100% - 2 * 0.4rem) / 3);
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }

  .emoji-caption {
    font-size: 0.74rem;
  }
}

.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 garde les colonnes du formulaire, vides comprises (auto-fill) : une fiche n'affiche
   que les profils qui ont reçu des retours, souvent un ou deux, et des tuiles étirées pour remplir
   la ligne devenaient des bandeaux pleine largeur pour un seul verdict. */
.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;
}

/* Memes nuances que la liste deroulante : les autres noms avant l'adresse, parce qu'ils
   distinguent deux fiches homonymes quand le lieu ne fait que les situer. */
.selected-professional-names {
  color: #52606d;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.selected-professional-card .text-muted {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.selected-professional-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  color: #198754;
  font-size: 0.8rem;
  font-weight: 600;
}

.selected-professional-logo {
  margin-right: 1rem;
}

/* Plus grande que la vignette d'une liste, parce qu'elle est seule : là où dix lignes imposent de
   compter les pixels, une confirmation peut montrer le logo assez grand pour qu'on le reconnaisse.
   L'image reste bornée par le cadre — « contain » et « overflow: hidden » l'empêchent d'en sortir. */
.selected-professional-card .agency-logo-sm {
  width: 76px;
  height: 76px;
  font-size: 1.15rem;
  border-radius: 12px;
}

.selected-professional-card .agency-logo-sm img {
  padding: 4px;
}

/* Sur un écran étroit, la ligne logo-puis-nom ne laisse au nom qu'une colonne de quelques mots,
   et les raisons sociales longues s'y cassent en quatre. Le logo monte donc au-dessus, centré, et
   la carte se lit d'un bloc. */
@media (max-width: 575.98px) {
  .selected-professional-card {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 0.5rem;
  }

  .selected-professional-card > .d-flex {
    align-items: center !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    text-align: center;
    width: 100%;
  }

  .selected-professional-logo {
    margin-bottom: 0.6rem;
    margin-right: 0;
  }

  .selected-professional-card .btn {
    align-self: flex-end;
    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-experience-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.agency-experience-axis {
  border: 1px solid #e9eef5;
  border-radius: 8px;
  padding: 1rem;
  min-width: 0;
}

.agency-experience-axis-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark, #0f172a);
  margin: 0 0 0.25rem;
}

.agency-experience-axis-count {
  font-weight: 600;
  margin: 0;
}

.agency-experience-axis-detail {
  color: #475569;
  font-size: 0.875rem;
  margin: 0.2rem 0 0;
}

.agency-experience-excerpts {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.agency-experience-excerpt {
  border-top: 1px solid #f1f5f9;
  padding-top: 0.75rem;
}

.agency-experience-tone {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
}

.agency-experience-tone.is-mention {
  background-color: #f1f5f9;
  color: #475569;
}

.agency-experience-subject {
  color: #64748b;
  font-size: 0.8rem;
  margin: 0.4rem 0 0.2rem;
}

.agency-experience-quote {
  font-size: 0.9rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.agency-experience-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  color: #64748b;
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
}

.agency-experience-vigilance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0;
}

.agency-unknown-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
}

.agency-unknown-axes li {
  background: #f1f5f9;
  border-radius: 999px;
  color: #334155;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
}

.agency-unknown-lead {
  color: #475569;
  font-size: 0.875rem;
}

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

/* Plusieurs avis : chaque carte porte déjà son fond, elles se posent sur la page comme dans la liste des avis. */
.agency-latest-reviews-panel.agency-latest-reviews-list {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Côte à côte en mobile : les cartes prennent la hauteur de la plus haute, pieds alignés. */
.agency-latest-reviews-list > .mobile-carousel {
  align-items: stretch;
}

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

.agency-checklist-subtitle {
  color: var(--color-deep-ink);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

.agency-profile-questions {
  border-bottom: 1px solid #e9eef5;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

.agency-profile-questions .agency-checklist-grid {
  margin: 0;
}

.agency-profile-questions-guide {
  color: #166246;
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 1rem;
  text-underline-offset: 4px;
}

.agency-search-context {
  align-items: center;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
}

.agency-search-context-back,
.agency-search-context-edit {
  color: #166246;
  font-size: 0.9rem;
  font-weight: 600;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.agency-search-context-criteria {
  align-items: center;
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.agency-search-context-label {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.agency-search-context-criteria ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.agency-search-context-criteria li {
  background: #f1f5f9;
  border-radius: 999px;
  color: #334155;
  font-size: 0.82rem;
  padding: 0.2rem 0.65rem;
}

/* Barre du comparateur : la même sur la présélection, le catalogue et la fiche. Sans script, elle
   se lit en bas de page ; avec, elle flotte au bas de l'écran tant que la sélection n'est pas vide. */
.compare-bar {
  align-items: center;
  background: #fff;
  border: 1px solid #e1e7e2;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
}

.compare-bar[hidden] {
  display: none;
}

.compare-bar.is-floating {
  bottom: 1rem;
  box-shadow: 0 10px 32px #163f3426;
  left: 50%;
  margin: 0;
  position: fixed;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 2rem));
  z-index: 1030;
}

.compare-bar-body {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.compare-bar-status {
  color: #163f34;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.compare-bar-status.is-warning {
  color: #9a5b00;
}

.compare-bar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.compare-bar-list[hidden] {
  display: none;
}

.compare-bar-list li {
  align-items: center;
  background: #edf3ee;
  border-radius: 999px;
  color: #163f34;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.15rem 0.2rem 0.15rem 0.7rem;
}

.compare-bar-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-bar-remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #61736c;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.6rem;
  justify-content: center;
  padding: 0;
  width: 1.6rem;
}

.compare-bar-remove:hover,
.compare-bar-remove:focus-visible {
  background: #fff;
  color: #163f34;
}

.compare-bar-remove i {
  font-size: 0.7rem;
}

.compare-bar-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.compare-bar-clear {
  color: #61736c;
}

/* La barre flottante ne couvre jamais le bas de la page : celle-ci garde sa hauteur en réserve. */
body.has-compare-bar {
  padding-bottom: 7rem;
}

.agency-compare-action {
  display: flex;
  justify-content: flex-end;
  margin: -0.75rem 0 1.5rem;
}

.agency-compare-toggle {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.agency-compare-toggle[hidden] {
  display: none;
}

.agency-compare-action:has(> .agency-compare-toggle[hidden]) {
  display: none;
}

.agency-compare-toggle[aria-pressed="true"] {
  background: #edf3ee;
  border-color: #166246;
  color: #166246;
}

/* 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;
  line-height: 1;
}

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

/* Une valeur suivie d'une pastille (« Société fermée ») : la pastille sur la même ligne, à côté. */
.agency-identity-value:has(+ .licence-status) {
  display: inline;
  margin-right: 0.5rem;
}

.agency-identity-value + .licence-status {
  vertical-align: middle;
}

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) : 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. */

/* Décalage d'ancrage : une section atteinte par un lien ne colle pas au bord de l'écran. */
.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";
}

/* Avec des points saillants, ils suivent la synthèse à côté de la note, et les boutons passent
   dessous sur toute la largeur : on lit ce qui ressort des avis avant qu'on nous propose d'agir. */
.agency-decision-help-grid.has-actions.has-highlights {
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "copy score"
    "highlights score"
    "actions actions";
}

/* Dans la grille, les points s'empilent sur toute la largeur de leur cellule, sans trait : ils
   prolongent la synthèse au lieu de s'en séparer. */
.agency-decision-help-grid > .agency-decision-highlights {
  grid-area: highlights;
  grid-template-columns: minmax(0, 1fr);
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

@media (min-width: 992px) {
  .agency-decision-help-grid.has-actions.has-highlights {
    row-gap: 1rem;
  }

  .agency-decision-help-grid.has-actions.has-highlights > .agency-decision-help-copy p {
    margin-bottom: 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;
}

/* Sans aucun avis : une phrase centrée dans la carte, en ardoise plutôt qu'en rouge, car ce
   n'est pas une mauvaise note. */
.agency-score-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: auto 0;
  padding: 0.75rem 0.25rem;
  color: var(--color-slate);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.agency-score-empty i {
  color: var(--color-gold);
  font-size: 1.15rem;
}

/* 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 YaHaj s'y centre,
   et la note relevée ailleurs reste collée en bas. */
@media (min-width: 992px) {
  .agency-decision-score-card {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
  }

  .agency-score-group,
  .agency-score-empty {
    grid-row: 2;
  }

  .agency-score-external {
    grid-row: 3;
    align-self: end;
    margin-top: 0;
  }

  .agency-score-main {
    gap: 1rem;
  }

  .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 pro : informations légales et coordonnées sous la présentation, dans « À propos ». */
.agency-about-facts.has-presentation {
  margin-top: 1.6rem;
}

.agency-about-facts > h3 {
  color: var(--color-deep-ink);
  font-size: 1rem;
  font-weight: 850;
  margin: 0 0 0.25rem;
}

.agency-about-facts-subtitle {
  color: var(--color-slate);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}

.agency-about-facts-subtitle:has(+ .agency-verified-note) {
  margin-bottom: 0.35rem;
}

.agency-verified-note {
  align-items: center;
  color: var(--color-emerald);
  display: flex;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}

/* Information que YaHaj n'a pas relevée : signalée en orange, jamais en rouge — le rouge dirait
   que l'agence est en faute, alors qu'on dit seulement ce que YaHaj ne sait pas encore. Même
   gabarit que les cases vertes : seule la teinte change. */
.agency-fact-missing,
.agency-guarantee-item span.agency-fact-missing {
  color: var(--color-warning);
}

.agency-identity-item.is-missing > i {
  color: var(--color-warning);
}

.agency-guarantee-item.is-missing,
.agency-guarantee-grid.is-unconfirmed .agency-guarantee-item.is-missing {
  background: #fffaeb;
  border-color: rgba(180, 83, 9, 0.18);
}

.agency-guarantee-item.is-missing .agency-guarantee-icon,
.agency-guarantee-grid.is-unconfirmed .agency-guarantee-item.is-missing .agency-guarantee-icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Le registre déclare la société fermée : le rouge de la pastille « Société fermée ». */
.agency-guarantee-item.is-negative,
.agency-guarantee-grid.is-unconfirmed .agency-guarantee-item.is-negative {
  background: #fef5f5;
  border-color: rgba(185, 28, 28, 0.18);
}

.agency-guarantee-item.is-negative .agency-guarantee-icon,
.agency-guarantee-grid.is-unconfirmed .agency-guarantee-item.is-negative .agency-guarantee-icon {
  background: var(--color-negative-bg);
  color: var(--color-negative);
}

.agency-guarantee-item.is-negative strong {
  color: var(--color-negative);
}

/* Provenance et sens de « Non renseigné », en pied de la section « À propos ». */
.agency-about-notes {
  border-top: 1px solid rgba(16, 34, 52, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1.2rem;
  padding-top: 0.9rem;
}

.agency-about-notes .factual-provenance {
  border-top: 0;
  margin: 0;
  padding-top: 0;
}

.agency-missing-note {
  align-items: flex-start;
  color: var(--color-slate);
  display: flex;
  font-size: 0.82rem;
  gap: 0.5rem;
  line-height: 1.5;
  margin: 0;
}

.agency-missing-note i {
  color: var(--color-warning);
  flex: 0 0 auto;
  margin-top: 0.12rem;
}

/*
  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;
}

/* Ce bandeau porte ce qu'il faut vérifier avant de payer, et une partie des pèlerins le lisent à
   soixante ans passés, sur un téléphone. L'ardoise sur fond pâle et le petit corps y rendaient le
   texte sautable : il se lit désormais dans l'encre du reste de la page. */
.trust-fact-banner p {
  margin: 0.3rem 0 0;
  color: var(--color-deep-ink);
  font-size: 1rem;
  line-height: 1.6;
}

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

.trust-fact-banner.is-closed {
  background: var(--color-negative-bg);
  border-left-color: var(--color-negative);
}

.trust-fact-banner.is-closed :is(i, strong) {
  color: var(--color-negative);
}

/* Le renvoi à une source officielle, quand la fiche demande au pèlerin d'aller vérifier lui-même.
   Posé sous le texte et non dedans : il se lit après le constat, jamais à sa place. */
.trust-fact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.trust-fact-link:hover {
  text-decoration: underline;
}

.trust-fact-link i {
  font-size: 0.8rem;
}

@media (max-width: 575.98px) {
  .trust-fact-banner strong {
    font-size: 1.05rem;
  }
}

/* Bloc statut d'une agence : le bandeau d'identité, avec le titre de la pastille en tête. Le ⓘ
   reprend la structure de la pastille pour ouvrir la même bulle, sans en garder la forme. */
.agency-trust-status {
  margin-top: 1.25rem;
}

/* Société fermée : son nom en tête du bloc, la pastille rouge à côté, au lieu d'un titre de licence. */
.agency-trust-closed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}

.trust-fact-banner .agency-trust-closed > strong {
  color: var(--color-deep-ink);
}

.agency-trust-closed .licence-status {
  align-self: center;
}

/* En ligne et non en flex : quand le titre passe sur deux lignes, le ⓘ suit le dernier mot au lieu
   de rester seul contre le bord. */
.agency-trust-status-title.licence-status {
  display: block;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

.trust-fact-banner .agency-trust-status-title .licence-status-label {
  display: inline;
  padding: 0;
}

.agency-trust-status-title .licence-status-info {
  vertical-align: middle;
  margin-left: 0.15rem;
}

.trust-fact-banner p.agency-trust-status-line {
  margin: 0.2rem 0 0;
  color: var(--color-slate);
  font-size: 0.95rem;
}

.agency-trust-company {
  color: var(--color-deep-ink);
  font-weight: 700;
}

.agency-trust-status-line + p:not(.agency-trust-status-line) {
  margin-top: 0.6rem;
}

/* Les actions d'une agence occupent la cellule « actions » de la grille, avec sous les boutons le
   dépôt d'un avis, en simple lien : il ne concerne que ceux déjà partis. */
.agency-decision-help-grid > .agency-trust-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.agency-decision-contribute {
  margin: 0;
  color: var(--color-slate);
  font-size: 0.95rem;
}

.agency-decision-contribute a {
  font-weight: 700;
}

/* Boutons et invitation à donner son avis sur une seule ligne, sous la synthèse et la note. */
@media (min-width: 992px) {
  .agency-decision-help-grid > .agency-trust-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .agency-trust-actions .agency-decision-actions {
    width: 100%;
  }
}

/* La note relevée sur une autre plateforme, au bas de la carte de note, juste sous la réserve sur
   les données : petite et grise, pour qu'elle ne se confonde pas avec la note YaHaj au-dessus. */
.agency-score-external {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  padding: 0 0.25rem;
  color: var(--color-slate);
  font-size: 0.8rem;
  line-height: 1.35;
  cursor: help;
}

.agency-score-external-value {
  color: var(--color-deep-ink);
  font-size: 0.95rem;
  font-weight: 800;
}

.agency-score-external-stars {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

/* 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);
}

.agency-profile-pill-count {
  color: var(--color-slate);
  font-weight: 600;
}

.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. En mobile la note est calée à droite ;
   dès que les cartes passent en colonnes, elle suit le libellé, sinon elle s'en éloigne trop. */
.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;
}

@media (min-width: 768px) {
  .pilgrim-fit-card .pilgrim-fit-head h3 {
    flex: 0 1 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 ouvre le bandeau, pour que le pèlerin se fasse une idée dès
     l'arrivée sur la fiche, et passe avant les boutons, pour décider avant d'agir. */
  .agency-decision-help-grid {
    grid-template-rows: auto;
    grid-template-areas:
      "score"
      "copy";
  }

  .agency-decision-help-grid.has-actions {
    grid-template-rows: auto;
    grid-template-areas:
      "score"
      "copy"
      "actions";
  }

  .agency-decision-help-grid.has-highlights {
    grid-template-rows: auto;
    grid-template-areas:
      "score"
      "copy"
      "highlights";
  }

  .agency-decision-help-grid.has-highlights > .agency-decision-help-copy p {
    margin-bottom: 0;
  }

  /* En tête du bandeau, la note se pose sans cadre, un trait la séparant de la question. */
  .agency-decision-help-grid > .agency-decision-score-card {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(16, 34, 52, 0.08);
    border-radius: 0;
    padding: 0 0 1.25rem;
  }
  /* Et ce qui ressort des avis s'intercale avant les boutons : il faut que le pèlerin le
     rencontre avant qu'on lui propose d'agir. */
  .agency-decision-help-grid.has-actions.has-highlights {
    grid-template-rows: auto;
    grid-template-areas:
      "score"
      "copy"
      "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: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo {
  width: 84px;
  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: 120px;
  height: 120px;
  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;
}

/* Même loader, réduit pour tenir dans la zone de résultats d'une recherche. */
.autocomplete-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
}

.autocomplete-loader-visual {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.autocomplete-loader .loader-ring {
  width: 72px;
  height: 72px;
}

.autocomplete-loader .loader-logo {
  width: 48px;
}

.autocomplete-loader .loader-text {
  font-size: 0.95rem;
}

.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 {
  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: 0;
  padding: 0.4rem 3.6rem 0.4rem 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%;
}

/* Une ligne de texte (1.45em) centrée dans un champ de 2.5rem : la marge verticale est le reste,
   partagé en deux. Le bouton et l'icône sont calés sur le bas de cette première ligne et y restent
   quand le champ grandit vers le haut. */
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form textarea {
  color: var(--color-deep-ink);
  min-height: 2.5rem;
  padding: calc((2.5rem - 1.45em) / 2) 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: 0.775rem;
  color: var(--color-emerald);
  display: flex;
  font-size: 1.15rem;
  height: 1.75rem;
  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.4rem;
  height: 2.5rem;
  right: 0.45rem;
  width: 2.5rem;
}

.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;
    padding: 0.35rem 3.3rem 0.35rem 3.55rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form textarea {
    min-height: 2.4rem;
    padding: calc((2.4rem - 1.45em) / 2) 0;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-input-icon {
    bottom: 0.75rem;
    font-size: 1.05rem;
    height: 1.6rem;
    left: 0.95rem;
    padding-right: 0.75rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-submit {
    bottom: 0.35rem;
    height: 2.4rem;
    right: 0.4rem;
    width: 2.4rem;
  }

  .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 h1 {
  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 h1 {
    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;
  scroll-margin-top: 6rem;
}

.guide-key-answer {
  background: var(--color-soft-emerald);
  border-left: 4px solid var(--color-emerald);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}

.guide-key-answer-title,
.guide-toc-title {
  color: var(--color-emerald);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.guide-key-answer-text {
  color: var(--color-deep-ink);
  font-size: 1.1rem;
  line-height: 1.7;
}

.guide-toc {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}

.guide-toc-list {
  padding-left: 1.25rem;
}

.guide-toc-list li {
  margin-bottom: 0.35rem;
}

.guide-toc-list a {
  color: var(--color-slate);
  text-decoration: none;
}

.guide-toc-list a:hover,
.guide-toc-list a:focus-visible {
  color: var(--color-emerald);
  text-decoration: underline;
}

/* Page d'entrée des guides : une section par pilier. */
.guide-hub-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.guide-hub-nav-link {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  color: var(--color-deep-ink);
  display: inline-block;
  font-weight: 600;
  padding: 0.45rem 1rem;
  text-decoration: none;
}

.guide-hub-nav-link:hover,
.guide-hub-nav-link:focus-visible {
  border-color: var(--color-emerald);
  color: var(--color-emerald);
}

.guide-hub-section {
  scroll-margin-top: 6rem;
}

.guide-hub-section + .guide-hub-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 3rem;
  padding-top: 3rem;
}

.guide-hub-main-media {
  min-height: 220px;
}

.guide-hub-main-label {
  color: var(--color-emerald);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-faq-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.25rem 0;
}

.guide-faq-answer {
  color: var(--color-slate);
  line-height: 1.7;
  white-space: pre-line;
}

.guide-sources-list li {
  margin-bottom: 0.4rem;
}

.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-hint {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0.25rem 0 0;
}

/* 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;
  }
}

/* Page Assistant : la page entière défile, comme une page ordinaire, sans barre de défilement
   intérieure. La page occupe au moins la hauteur de l'écran, pour que la saisie se pose en bas
   d'une conversation courte ; la saisie reste ensuite collée au bas de l'écran. Aucun niveau
   entre <body> et la saisie ne doit couper le débordement (overflow), sinon elle ne colle plus. */
body.assistant-fullscreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* La règle générale du site (overflow-x: hidden et overflow-y: auto !important sur body) fait de
   body un conteneur de défilement qui ne défile jamais : la saisie et l'en-tête collent alors à
   body au lieu de l'écran. Ici, body laisse défiler l'écran et rogne la largeur avec clip, qui ne
   crée pas de conteneur. Les états où le site verrouille le défilement restent intacts. */
body.assistant-fullscreen:not(.yahaj-search-scroll-locked):not(.yahaj-picker-open):not(.modal-open) {
  overflow-x: visible !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.assistant-fullscreen > main,
body.assistant-fullscreen .assistant-page-shell,
body.assistant-fullscreen .assistant-conversation-page.content-panel,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page,
body.assistant-fullscreen .assistant-conversation-page .yahaj-assistant-shell {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 0;
}

body.assistant-fullscreen .assistant-page-shell {
  padding-bottom: 0;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-thread {
  flex: 1 0 auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-status {
  flex: 0 0 auto;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form {
  bottom: 0.75rem;
  position: sticky;
  z-index: 6;
}

/* La conversation passe sous la saisie collée : un fondu au-dessus et un fond plein au-dessous
   l'effacent. Les deux bandes restent hors de la saisie, sinon elles en couvriraient le fond. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form::before,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form::after {
  content: "";
  left: -1rem;
  pointer-events: none;
  position: absolute;
  right: -1rem;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form::before {
  background: linear-gradient(to bottom, rgba(250, 250, 247, 0), var(--color-off-white));
  bottom: 100%;
  height: 1.5rem;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form::after {
  background: var(--color-off-white);
  height: 1rem;
  top: 100%;
}

/* La page se pose sur le fond de la marque : seuls la saisie, les réponses et les tuiles portent
   une surface blanche. */
body.assistant-fullscreen .assistant-conversation-page.content-panel,
body.assistant-fullscreen .assistant-conversation-page.content-panel:hover {
  background: transparent;
  box-shadow: none;
}

/* Avant la première question, l'accueil et la saisie se regroupent au centre de l'écran. Le
   script masque l'accueil dès qu'une conversation s'affiche ; la saisie retrouve alors le bas de
   l'écran. Un navigateur sans :has() garde la saisie en bas dans les deux cas. Le centrage passe
   par des marges automatiques, qui tombent à zéro quand la place manque, là où
   justify-content: center rognerait le haut de l'accueil. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell:has([data-yahaj-assistant-starter]:not([hidden])) .yahaj-assistant-form::before,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell:has([data-yahaj-assistant-starter]:not([hidden])) .yahaj-assistant-form::after {
  display: none;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell:has([data-yahaj-assistant-starter]:not([hidden])) .yahaj-assistant-thread {
  flex: 0 1 auto;
  margin-top: auto;
  min-height: 0;
  padding-bottom: 0;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell:has([data-yahaj-assistant-starter]:not([hidden])) .yahaj-assistant-status {
  margin-bottom: auto;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell:has([data-yahaj-assistant-starter]:not([hidden])) .yahaj-assistant-starter {
  min-height: 0;
  padding: 0;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-shell:has([data-yahaj-assistant-starter]:not([hidden])) .yahaj-assistant-form {
  max-width: 58rem;
  width: 100%;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-card {
  max-width: 58rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-mark {
  border-color: rgba(4, 120, 87, 0.22);
  color: var(--color-emerald);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-card h1 {
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  text-wrap: balance;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-scope {
  align-items: center;
  background: var(--color-soft-emerald);
  border-radius: 999px;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.4;
  margin: 0;
  padding: 0.45rem 0.9rem;
  text-align: left;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-scope i {
  flex: 0 0 auto;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.6rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button {
  align-content: start;
  align-items: start;
  border-radius: 16px;
  column-gap: 0.7rem;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  min-height: 0;
  padding: 0.85rem 0.9rem;
  row-gap: 0.15rem;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: normal;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button:hover,
.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button:focus-visible {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button i {
  align-items: center;
  background: var(--color-soft-emerald);
  border-radius: 12px;
  color: var(--color-emerald);
  display: inline-flex;
  font-size: 1.05rem;
  grid-row: span 2;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompt-label {
  color: var(--color-deep-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompt-description {
  color: var(--color-slate);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-card h1 {
    font-size: 1.4rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-scope {
    border-radius: 14px;
    font-size: 0.8rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts {
    gap: 0.5rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button {
    align-items: center;
    column-gap: 0.55rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: 0.65rem 0.7rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button i {
    font-size: 0.95rem;
    grid-row: auto;
    height: 2rem;
    width: 2rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompt-label {
    font-size: 0.84rem;
  }

  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompt-description {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button:hover,
  .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-starter-prompts button:focus-visible {
    transform: none;
  }
}

/* Sur le fond beige de la page assistant, aucun texte gris : tout se lit en noir. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page :is(
  .yahaj-assistant-starter-intro,
  .yahaj-assistant-starter-prompt-description,
  .yahaj-assistant-bubble,
  .yahaj-assistant-answer p,
  .yahaj-assistant-answer-body,
  .yahaj-assistant-answer-body p,
  .yahaj-assistant-answer-body ul,
  .yahaj-assistant-answer-body ol,
  .yahaj-assistant-clarification p,
  .yahaj-assistant-suggested > strong,
  .yahaj-assistant-trustline,
  .yahaj-assistant-thinking,
  .yahaj-assistant-status,
  .yahaj-assistant-evidence-drawer summary,
  .yahaj-assistant-source-heading,
  .yahaj-assistant-source-excerpt,
  .yahaj-assistant-source-date,
  .yahaj-assistant-info ul,
  .yahaj-assistant-compact-list ul,
  .yahaj-assistant-criteria span,
  .yahaj-assistant-meta span,
  .yahaj-assistant-reasons span,
  .yahaj-assistant-comparison-header p,
  .yahaj-assistant-comparison-recommendation p,
  .yahaj-assistant-comparison-cell,
  .yahaj-assistant-comparison-cell.is-heading span,
  .yahaj-assistant-agency-main p,
  .yahaj-assistant-agency-side span,
  .yahaj-assistant-agency-score,
  .yahaj-assistant-review-count,
  .yahaj-assistant-evidence
) {
  color: var(--color-deep-ink);
}

/* Le texte d'invite reste un ton sous le texte saisi, sans quoi on le prendrait pour une saisie. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form textarea::placeholder {
  color: #334155;
  opacity: 1;
}

/* En ligne, la zone de saisie réserve sous elle la place des jambages et se cale en haut de sa
   rangée : le texte d'invite paraît alors au-dessus du centre. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form textarea {
  display: block;
}

/* Les suggestions d'une clarification se posent sur le fond de la page, comme la réponse. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-clarification {
  background: transparent;
  border: 0;
  padding: 0;
}

/* « Nouvelle conversation » se cale en haut à droite, sur le bord de la conversation, et reste
   visible sous l'en-tête du site, lui aussi collé : le script mesure la hauteur de l'en-tête dans
   --yahaj-header-offset. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset {
  align-items: center;
  position: sticky;
  top: calc(var(--yahaj-header-offset, 4.5rem) + 0.75rem);
  z-index: 6;
  background: #fff;
  border: 1px solid rgba(4, 120, 87, 0.25);
  border-radius: 999px;
  color: var(--color-emerald);
  gap: 0.4rem;
  margin: 0 max(0px, calc((100% - 980px) / 2)) 0 auto;
  max-width: none;
  padding: 0.4rem 0.85rem;
  width: auto;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset:hover,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset:focus-visible {
  background: var(--color-soft-emerald);
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset[hidden] {
  display: none;
}

/* Sur un écran étroit, un bouton qui flotte couvrirait le texte de la réponse : il reste en tête. */
@media (max-width: 767.98px) {
  body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-reset {
    margin-bottom: 0.75rem;
    position: static;
  }
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-status:empty {
  margin: 0;
  min-height: 0;
}

/* Les sources d'une réponse restent ouvertes, posées sur le fond, chaque passage séparé du
   suivant par un trait. */
.yahaj-assistant-sources-section {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
  width: 100%;
}

.yahaj-assistant-sources-section .yahaj-assistant-source-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 0.85rem;
}

.yahaj-assistant-sources-section .yahaj-assistant-source-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.yahaj-assistant-panel.is-conversation-page .yahaj-assistant-sources-section {
  align-self: flex-start;
  max-width: min(860px, 100%);
}

/* Les suggestions passent à la ligne au lieu de défiler de côté, où leur texte était coupé. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page :is(
  .yahaj-assistant-actions-inline,
  .yahaj-assistant-suggested .yahaj-assistant-prompts,
  .yahaj-assistant-clarification .yahaj-assistant-prompts
) {
  flex-wrap: wrap;
  overflow: visible;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page :is(
  .yahaj-assistant-actions-inline a,
  .yahaj-assistant-suggested .yahaj-assistant-prompts button,
  .yahaj-assistant-clarification .yahaj-assistant-prompts button
) {
  text-align: left;
  white-space: normal;
}

@media (max-width: 575.98px) {
  body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page :is(
    .yahaj-assistant-actions-inline a,
    .yahaj-assistant-suggested .yahaj-assistant-prompts button,
    .yahaj-assistant-clarification .yahaj-assistant-prompts button
  ) {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Sur un téléphone, l'étincelle décorative prendrait la largeur dont le texte d'invite a besoin
   pour tenir sur une ligne. */
@media (max-width: 575.98px) {
  body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-input-icon {
    display: none;
  }

  body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-form {
    padding-left: 1.1rem;
  }
}

/* L'icône se pose au-dessus de chaque message : à droite pour le pèlerin, dont la question se range
   à droite à la largeur de son texte ; à gauche pour YaHaj, dont la réponse occupe toute la largeur. */
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user,
body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0;
  margin-left: 0;
  max-width: 100%;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user {
  align-self: flex-end;
  margin-left: auto;
  max-width: min(680px, 100%);
  width: fit-content;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message .yahaj-assistant-avatar {
  flex: 0 0 auto;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-avatar {
  align-self: flex-end;
  order: -1;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant .yahaj-assistant-avatar {
  align-self: flex-start;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-user .yahaj-assistant-bubble {
  background: #fff !important;
  border: 1px solid #d9d6cf !important;
  border-radius: 12px;
  box-shadow: none !important;
  max-width: none;
  padding: 0.75rem 1rem;
  text-align: right;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-message.is-assistant > .yahaj-assistant-response-group {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}

body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-sources-section {
  max-width: 100%;
}

/* Sur mobile, les cartes d'agence défilent de côté ; la suivante dépasse pour montrer qu'il y en a
   d'autres. */
@media (max-width: 767.98px) {
  body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.6rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  body.assistant-fullscreen .yahaj-assistant-panel.is-conversation-page .yahaj-assistant-agencies > * {
    flex: 0 0 85%;
    min-width: 0;
    scroll-snap-align: start;
  }
}


/* =====================================================================================
   Fiche d'une agence : un en-tête commun, quatre rubriques à leur propre adresse.
   Palette et police de la carte. Textes de 16 px au moins, cibles de 44 px au moins,
   et rien qui ne se lise qu'à sa couleur : chaque état a son icône ou son mot.
   ===================================================================================== */

.agency-sheet {
  color: var(--pc-ink);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

.agency-sheet :where(p, dl, dd, ul, ol, h1, h2, h3) {
  margin: 0;
}

.agency-sheet :where(ul, ol) {
  list-style: none;
  padding: 0;
}

.agency-sheet .bi {
  line-height: 1;
}

.agency-sheet a:not(.btn) {
  color: var(--pc-green-text);
  font-weight: 600;
  text-underline-offset: 3px;
}

.agency-sheet :is(a, button, select, summary):focus-visible {
  outline: 3px solid var(--pc-orange);
  outline-offset: 2px;
  border-radius: 8px;
}

.agency-sheet-muted {
  color: var(--pc-muted);
  font-size: 1rem;
}

/* ---------- En-tête ---------- */

.agency-sheet .agency-search-context {
  margin-bottom: 1rem;
}

.agency-sheet-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #EFEDE8;
  border-radius: 26px 26px 0 0;
}

/* La photo ou le motif occupe la droite et s'efface vers le texte, qui reste sur fond blanc. */
.agency-sheet-cover {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(58%, 720px);
  background-color: var(--color-sand);
  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.16'%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"),
    linear-gradient(120deg, var(--color-sand) 0%, var(--color-soft-emerald) 100%);
  background-size: 56px 56px, auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}

.agency-sheet-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agency-sheet-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  color: var(--pc-muted);
  font-size: 1rem;
}

.agency-sheet-breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
  color: var(--pc-muted);
}

.agency-sheet-breadcrumb a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pc-muted);
  font-weight: 500;
}

.agency-sheet-breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.agency-sheet-fav {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  color: var(--pc-ink);
  font-size: 1.35rem;
  cursor: pointer;
}

.agency-sheet-fav[aria-pressed="true"] {
  color: #E11D48;
}

.agency-sheet-identity {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  max-width: 640px;
}

.agency-sheet-identity > .agency-logo {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border: 1px solid #F0F0EE;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  font-size: 2.25rem;
}

.agency-sheet-identity > .agency-logo img {
  padding: 10%;
}

.agency-sheet-identity-text {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  min-width: 0;
}

.agency-sheet-title {
  color: var(--pc-ink);
  font-family: inherit;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.agency-sheet-location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pc-muted);
  font-size: 1.0625rem;
  font-weight: 500;
}

.agency-sheet-location .bi {
  color: #2563EB;
}

.agency-sheet .licence-status {
  font-size: 1rem;
}

.agency-sheet .licence-status-label {
  min-height: 40px;
}

.agency-sheet .licence-status-info {
  min-width: 44px;
  min-height: 44px;
}

.agency-sheet .licence-status.is-known {
  background: var(--pc-green-soft);
  color: var(--pc-green-text);
}

.agency-sheet-tagline {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 640px;
  color: var(--pc-body);
  font-size: 1rem;
}

.agency-sheet-tagline-icon {
  color: var(--pc-orange);
  font-size: 1.25rem;
}

/* Les notes : celle de YaHaj, puis celle relevée ailleurs, séparées d'un filet. */
.agency-sheet-ratings {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem 0;
  max-width: 900px;
  padding: 1rem 0 0;
}

.agency-sheet-ratings.is-external-first {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.agency-sheet-rating {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  padding-right: 2rem;
}

.agency-sheet-rating + .agency-sheet-rating {
  padding-left: 2rem;
  border-left: 1px solid var(--pc-line);
}

.agency-sheet-ratings.is-external-first .agency-sheet-rating.is-external {
  padding-left: 0;
  padding-right: 2rem;
  border-left: 0;
}

.agency-sheet-ratings.is-external-first .agency-sheet-rating.is-yahaj {
  padding-left: 2rem;
  border-left: 1px solid var(--pc-line);
}

.agency-sheet-rating-body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.agency-sheet-rating-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid var(--pc-line);
  border-radius: 50%;
  background: #fff;
  color: var(--pc-muted);
  font-size: 1.5rem;
}

.agency-sheet-rating-icon :is(img, svg) {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.agency-sheet-rating-label {
  color: var(--pc-ink);
  font-size: 1rem;
  font-weight: 600;
}

.agency-sheet-rating-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.agency-sheet-rating-value strong {
  color: var(--pc-ink);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.agency-sheet-scale {
  color: var(--pc-muted);
  font-size: 1.1rem;
  font-weight: 600;
}

.agency-sheet-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--pc-green);
  font-size: 1.15rem;
}

.agency-sheet-stars.is-external {
  color: var(--pc-muted);
}

.agency-sheet-rating .agency-sheet-muted {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.agency-sheet-rating .agency-sheet-muted a:not(.btn) {
  color: var(--pc-muted);
  font-weight: 500;
}

.agency-sheet-missing {
  color: var(--pc-muted);
  font-weight: 600;
}

.agency-sheet-review-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Les actions, à la taille des boutons du site. */
.agency-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.agency-sheet-action.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding-inline: 1.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.agency-sheet-actions .agency-sheet-action {
  flex: 1 1 14rem;
}

.agency-sheet-action.is-contact {
  border: 2px solid var(--pc-orange);
  color: var(--pc-orange-text);
  background: #fff;
}

.agency-sheet-action.is-contact:hover {
  border-color: var(--pc-orange-text);
  color: var(--pc-orange-text);
  background: var(--pc-orange-pastel);
}

.agency-sheet-action[aria-pressed="true"] {
  border-color: var(--pc-green);
  color: var(--pc-green-text);
  background: var(--pc-green-pastel);
}

/* Les rubriques : un trait sous celle qu'on lit, et son nom en gras. Elles défilent sur un écran étroit. */
.agency-sheet-tabs {
  position: relative;
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid #EFEDE8;
  border-top: 0;
  border-radius: 0 0 26px 26px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.agency-sheet-tabs ul {
  display: flex;
  min-width: max-content;
  padding: 0 1rem;
}

.agency-sheet-tabs li {
  flex: 1 0 auto;
}

.agency-sheet-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.25rem;
  border-bottom: 3px solid transparent;
  color: var(--pc-body) !important;
  font-size: 1.0625rem;
  font-weight: 500 !important;
  text-decoration: none;
  white-space: nowrap;
}

.agency-sheet-tab:hover {
  color: var(--pc-green-text) !important;
}

.agency-sheet-tab.is-active {
  border-bottom-color: var(--pc-green);
  color: var(--pc-green-text) !important;
  font-weight: 800 !important;
}

/* ---------- Corps des rubriques ---------- */

.agency-sheet-body {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 3rem;
}

.agency-sheet-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #EFEDE8;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.05);
}

.agency-sheet-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.agency-sheet-card-head > div {
  flex: 1 1 16rem;
  min-width: 0;
}

.agency-sheet-head-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.6rem;
}

.agency-sheet-head-icon.is-gold {
  color: #EAB308;
  background: #FEF9C3;
}

.agency-sheet-head-icon.is-green {
  color: var(--pc-green);
  background: var(--pc-green-soft);
}

.agency-sheet-head-icon.is-orange {
  color: var(--pc-orange);
  background: var(--pc-orange-pastel);
}

.agency-sheet-card-title,
.agency-sheet-section-title {
  color: var(--pc-ink);
  font-family: inherit;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.agency-sheet-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.agency-sheet-section-title .bi {
  color: var(--pc-green);
}

.agency-sheet-card-subtitle,
.agency-sheet-section-subtitle {
  color: var(--pc-muted);
  font-size: 1rem;
}

.agency-sheet-section-subtitle {
  margin-bottom: 1rem;
}

.agency-sheet-subtitle {
  margin: 1rem 0 0.75rem;
  color: var(--pc-ink);
  font-size: 1.125rem;
  font-weight: 800;
}

.agency-sheet-head-action {
  margin-left: auto;
}

.agency-sheet-summary-text {
  color: var(--pc-body);
  font-size: 1.125rem;
  line-height: 1.65;
}

.agency-sheet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--pc-green-soft);
  color: var(--pc-green-text);
  font-size: 0.9375rem;
  font-weight: 700;
}

.agency-sheet-card-head > .agency-sheet-badge {
  margin-left: auto;
}

.agency-sheet-more {
  margin-top: 0.75rem;
}

.agency-sheet-more a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.agency-sheet-note,
.agency-sheet-empty {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--pc-muted);
  font-size: 1rem;
}

/* Points forts et points à surveiller. */
.agency-sheet-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}

.agency-sheet-points-panel {
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
}

.agency-sheet-points-panel.is-strength {
  background: var(--pc-green-pastel);
}

.agency-sheet-points-panel.is-watch {
  background: var(--pc-orange-pastel);
}

.agency-sheet-points-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
}

.agency-sheet-points-panel.is-strength .agency-sheet-points-title {
  color: var(--pc-green-text);
}

.agency-sheet-points-panel.is-watch .agency-sheet-points-title {
  color: var(--pc-orange-text);
}

.agency-sheet-points-panel ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.85rem 1.25rem;
}

.agency-sheet-points-panel li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--pc-body);
  font-size: 1rem;
  line-height: 1.45;
}

.agency-sheet-points-panel li .bi {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  font-size: 1.25rem;
}

.agency-sheet-points-panel.is-strength li .bi {
  color: var(--pc-green);
}

.agency-sheet-points-panel.is-watch li .bi {
  color: var(--pc-orange);
}

.agency-sheet-points-note,
.agency-sheet-points-empty {
  margin-top: 1rem;
  color: var(--pc-muted);
  font-size: 1rem;
}

/* Profils de pèlerins. */
.agency-sheet-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}

.agency-sheet-profile {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  border-radius: 18px;
  background: var(--pc-green-pastel);
  text-align: center;
}

.agency-sheet-profile-icon {
  color: var(--pc-green);
  font-size: 2.25rem;
}

.agency-sheet-profile-label {
  color: var(--pc-ink);
  font-size: 1.0625rem;
  font-weight: 800;
}

.agency-sheet-profile-basis {
  color: var(--pc-body);
  font-size: 1rem;
}

/* En résumé. */
.agency-sheet-recap {
  background: #FFFBF3;
  border-color: #F6E7CC;
}

.agency-sheet-recap-list {
  display: grid;
  gap: 1rem;
}

.agency-sheet-recap-list dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pc-ink);
  font-size: 1rem;
  font-weight: 800;
}

.agency-sheet-recap-list dd {
  margin-top: 0.25rem;
  color: var(--pc-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------- Profil décisionnel ---------- */

.agency-sheet-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.agency-sheet-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem;
  border-radius: 18px;
}

.agency-sheet-highlight.is-positive {
  background: var(--pc-green-pastel);
}

.agency-sheet-highlight.is-watch {
  background: var(--pc-orange-pastel);
}

.agency-sheet-highlight.is-neutral {
  background: var(--pc-sand);
}

.agency-sheet-highlight-icon {
  flex: 0 0 auto;
  font-size: 2rem;
}

.agency-sheet-highlight.is-positive .agency-sheet-highlight-icon {
  color: var(--pc-green);
}

.agency-sheet-highlight.is-watch .agency-sheet-highlight-icon {
  color: var(--pc-orange);
}

.agency-sheet-highlight.is-neutral .agency-sheet-highlight-icon {
  color: var(--pc-muted);
}

.agency-sheet-highlight-kicker {
  color: var(--pc-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.agency-sheet-highlight-title {
  margin: 0.15rem 0 0.35rem;
  color: var(--pc-ink);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
}

.agency-sheet-highlight.is-positive .agency-sheet-highlight-title {
  color: var(--pc-green-text);
}

.agency-sheet-highlight.is-watch .agency-sheet-highlight-title {
  color: var(--pc-orange-text);
}

.agency-sheet-highlight-text {
  color: var(--pc-body);
  font-size: 1rem;
  line-height: 1.5;
}

.agency-sheet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
  color: var(--pc-muted);
  font-size: 1rem;
}

.agency-sheet-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.agency-sheet-swatch {
  width: 28px;
  height: 10px;
  border-radius: 999px;
}

.agency-sheet-swatch.is-favorable,
.agency-sheet-bar > .is-favorable {
  background: var(--pc-green);
}

/* Le défavorable se distingue aussi par ses rayures : la couleur n'est pas seule à le dire. */
.agency-sheet-swatch.is-unfavorable,
.agency-sheet-bar > .is-unfavorable {
  background: repeating-linear-gradient(135deg, var(--pc-orange) 0 6px, #F6A65B 6px 10px);
}

.agency-sheet-criteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: start;
  gap: 1rem;
}

.agency-sheet-excerpts-toggle > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--pc-green-text);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.agency-sheet-excerpts-toggle > summary::-webkit-details-marker {
  display: none;
}

.agency-sheet-excerpts-toggle > summary::before {
  content: "\F282";
  font-family: "bootstrap-icons";
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.agency-sheet-excerpts-toggle[open] > summary::before {
  transform: rotate(180deg);
}

.agency-sheet-excerpts-toggle > summary:focus-visible {
  outline: 3px solid var(--pc-green);
  outline-offset: 2px;
  border-radius: 6px;
}

.agency-sheet-criterion {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: 16px;
}

.agency-sheet-criterion.is-priority {
  border-color: var(--pc-green);
  box-shadow: 0 0 0 1px var(--pc-green) inset;
}

.agency-sheet-criterion.is-vigilance {
  background: var(--pc-orange-pastel);
  border-color: var(--pc-orange-line);
}

.agency-sheet-criterion-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--pc-green-pastel);
  color: var(--pc-green);
  font-size: 1.4rem;
}

.agency-sheet-criterion.is-undocumented .agency-sheet-criterion-icon {
  background: var(--pc-sand);
  color: var(--pc-muted);
}

.agency-sheet-criterion.is-vigilance .agency-sheet-criterion-icon {
  background: #fff;
  color: var(--pc-orange);
}

.agency-sheet-criterion-body {
  display: grid;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.agency-sheet-criterion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.agency-sheet-criterion-title {
  color: var(--pc-ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
}

.agency-sheet-criterion-count {
  margin-left: auto;
  color: var(--pc-ink);
  font-size: 1rem;
  font-weight: 700;
}

.agency-sheet-criterion.is-undocumented .agency-sheet-criterion-count {
  color: var(--pc-muted);
  font-weight: 600;
}

.agency-sheet-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #E9EDF2;
}

.agency-sheet-criterion-detail {
  color: var(--pc-body);
  font-size: 1rem;
  line-height: 1.5;
}

.agency-sheet-excerpts {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.agency-sheet-excerpt {
  display: grid;
  gap: 0.3rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--pc-line);
}

.agency-sheet-excerpt.is-strength {
  border-left-color: var(--pc-green);
}

.agency-sheet-excerpt.is-watch {
  border-left-color: var(--pc-orange);
}

.agency-sheet-excerpt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  color: var(--pc-muted);
  font-size: 0.9375rem;
}

.agency-sheet-excerpt-tone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pc-ink);
  font-weight: 700;
}

.agency-sheet-excerpt.is-strength .agency-sheet-excerpt-tone {
  color: var(--pc-green-text);
}

.agency-sheet-excerpt.is-watch .agency-sheet-excerpt-tone {
  color: var(--pc-orange-text);
}

.agency-sheet-excerpt-quote {
  margin: 0;
  color: var(--pc-body);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
}

.agency-sheet-excerpt-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
  color: var(--pc-muted);
  font-size: 0.9375rem;
}

.agency-sheet-excerpt-source a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
}

.agency-sheet-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
}

.agency-sheet-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  color: var(--pc-body);
  font-size: 1rem;
  line-height: 1.5;
}

.agency-sheet-check .bi {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--pc-green);
  font-size: 1.25rem;
}

.agency-sheet-check strong {
  display: block;
  color: var(--pc-ink);
}

.agency-sheet .pilgrim-fit-card p {
  font-size: 1rem;
}

/* ---------- Avis et expériences ---------- */

.agency-sheet-chips {
  display: grid;
  gap: 0.75rem;
}

.agency-sheet-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.agency-sheet-chips-label {
  color: var(--pc-muted);
  font-size: 1rem;
  font-weight: 600;
}

.agency-sheet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  background: #F1F4F7;
  color: var(--pc-ink) !important;
  font-size: 1rem;
  font-weight: 600 !important;
  text-decoration: none;
}

.agency-sheet-chip:hover {
  border-color: var(--pc-green);
}

.agency-sheet-chip.is-active {
  border-color: var(--pc-green);
  background: var(--pc-green);
  color: #fff !important;
}

.agency-sheet-chip-count {
  font-weight: 500;
}

.agency-sheet-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.agency-sheet-sort-count {
  margin-right: auto;
  color: var(--pc-muted);
  font-size: 1rem;
  font-weight: 600;
}

.agency-sheet-sort .form-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.agency-sheet-sort .form-select {
  width: auto;
  min-height: 48px;
  font-size: 1rem;
}

.agency-sheet-review-list {
  display: grid;
  gap: 1rem;
}

.agency-sheet .review-card-public {
  padding: 1.5rem;
  border-color: var(--pc-line);
  border-radius: 18px;
  box-shadow: none;
}

.agency-sheet .review-card-author-line strong {
  font-size: 1.0625rem;
}

.agency-sheet .review-card-author-line span,
.agency-sheet .review-card-author > span {
  font-size: 0.9375rem;
}

.agency-sheet .review-card-title {
  font-size: 1.125rem;
}

.agency-sheet .review-card-comment,
.agency-sheet .review-card-quick-points li {
  font-size: 1rem;
}

.agency-sheet .review-card-stars {
  font-size: 1.05rem;
}

.agency-sheet .review-card-rating > span {
  font-size: 1.5rem;
}

.agency-sheet .review-subject-chip {
  font-size: 0.9375rem;
}

.agency-sheet .review-card-votes .btn,
.agency-sheet .review-card-footer .review-card-permalink,
.agency-sheet .review-card-footer .btn-report {
  min-height: 44px;
  font-size: 1rem;
}

.agency-sheet .review-card-votes .btn-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 44px;
}

.agency-sheet .review-card-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -0.75rem 0 0.5rem;
  font-size: 1rem;
}

.agency-sheet .agency-card-data-note,
.agency-sheet .agency-verified-note {
  font-size: 0.9375rem;
}

.agency-sheet-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.agency-sheet-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  color: var(--pc-body);
  text-align: center;
}

.agency-sheet-empty-state > .bi {
  color: var(--pc-orange);
  font-size: 2.5rem;
}

.agency-sheet-empty-title {
  color: var(--pc-ink);
  font-size: 1.25rem;
  font-weight: 800;
}

/* ---------- Infos légales ---------- */

.agency-sheet-licence {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
}

.agency-sheet-licence.is-verified {
  background: var(--pc-green-pastel);
}

.agency-sheet-licence.is-unverified {
  background: var(--pc-sand);
}

.agency-sheet-licence.is-closed {
  background: #FEF2F2;
}

.agency-sheet-licence-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.6rem;
  color: #fff;
}

.agency-sheet-licence.is-verified .agency-sheet-licence-icon {
  background: var(--pc-green);
}

.agency-sheet-licence.is-unverified .agency-sheet-licence-icon {
  background: var(--pc-muted);
}

.agency-sheet-licence.is-closed .agency-sheet-licence-icon {
  background: #B91C1C;
}

.agency-sheet-licence-body {
  display: grid;
  gap: 0.6rem;
  flex: 1 1 20rem;
  min-width: 0;
}

.agency-sheet-licence-title {
  color: var(--pc-ink);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
}

.agency-sheet-licence.is-verified .agency-sheet-licence-title {
  color: var(--pc-green-text);
}

.agency-sheet-licence.is-closed .agency-sheet-licence-title {
  color: #991B1B;
}

.agency-sheet-licence-facts {
  display: grid;
  gap: 0.35rem;
}

.agency-sheet-licence-facts > div {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: 0.75rem;
  font-size: 1rem;
}

.agency-sheet-licence-facts dt {
  color: var(--pc-muted);
  font-weight: 500;
}

.agency-sheet-licence-facts dd {
  color: var(--pc-ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.agency-sheet-licence-text {
  color: var(--pc-body);
  font-size: 1rem;
  line-height: 1.55;
}

.agency-sheet-about .agency-pro-description {
  font-size: 1rem;
}

.agency-sheet-identity-grid {
  scroll-margin-top: 6rem;
}

.agency-sheet .agency-identity-grid {
  gap: 0.85rem;
}

.agency-sheet .agency-identity-item {
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
}

.agency-sheet .agency-identity-item > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 10px;
  background: var(--pc-green-pastel);
  color: var(--pc-green);
}

.agency-sheet .agency-identity-label {
  color: var(--pc-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.agency-sheet .agency-identity-value {
  color: var(--pc-ink);
  font-size: 1rem;
  font-weight: 700;
}

.agency-sheet a.agency-identity-value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pc-green-text);
}

.agency-sheet .agency-guarantee-item {
  padding: 1.25rem;
  background: var(--pc-green-pastel);
  border-color: transparent;
  border-radius: 16px;
}

.agency-sheet .agency-guarantee-icon {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--pc-green);
  color: #fff;
}

.agency-sheet .agency-guarantee-item strong {
  font-size: 1.0625rem;
}

.agency-sheet .agency-guarantee-item div > span,
.agency-sheet .agency-guarantee-caveat {
  font-size: 1rem;
}

.agency-sheet .agency-guarantee-item.is-missing {
  background: var(--pc-sand);
}

.agency-sheet .agency-guarantee-item.is-missing .agency-guarantee-icon {
  background: #E2E8F0;
  color: var(--pc-muted);
}

.agency-sheet-info-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--pc-orange-line);
  border-radius: 18px;
  background: var(--pc-orange-pastel);
  color: var(--pc-body);
  font-size: 1rem;
}

.agency-sheet-info-box > .bi {
  color: var(--pc-orange);
  font-size: 1.5rem;
}

.agency-sheet-info-box > div {
  display: grid;
  gap: 0.4rem;
}

.agency-sheet-info-box a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 767.98px) {
  .agency-sheet-hero {
    padding: 0.75rem 1rem 1.25rem;
    border-radius: 20px 20px 0 0;
  }

  .agency-sheet-cover {
    width: 70%;
    opacity: 0.6;
  }

  .agency-sheet-fav {
    top: 0.75rem;
    right: 0.75rem;
  }

  .agency-sheet-identity {
    align-items: flex-start;
    gap: 0.9rem;
  }

  .agency-sheet-identity > .agency-logo {
    width: 88px;
    height: 88px;
    font-size: 1.6rem;
  }

  .agency-sheet-ratings {
    flex-wrap: wrap;
  }

  .agency-sheet-rating,
  .agency-sheet-rating + .agency-sheet-rating,
  .agency-sheet-ratings.is-external-first .agency-sheet-rating.is-external,
  .agency-sheet-ratings.is-external-first .agency-sheet-rating.is-yahaj {
    flex: 1 1 100%;
    padding: 0;
    border: 0;
  }

  .agency-sheet-rating + .agency-sheet-rating {
    padding-top: 1rem;
    border-top: 1px solid var(--pc-line);
  }

  .agency-sheet-actions .agency-sheet-action {
    flex-basis: 100%;
  }

  .agency-sheet-tabs {
    border-radius: 0 0 20px 20px;
  }

  .agency-sheet-tabs {
    overflow-x: visible;
  }

  .agency-sheet-tabs ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 0 0.25rem;
  }

  .agency-sheet-tab {
    min-height: 52px;
    padding: 0 0.5rem;
    font-size: 1rem;
    text-align: center;
    white-space: normal;
  }

  .agency-sheet-card {
    padding: 1.15rem;
    border-radius: 18px;
  }

  .agency-sheet-head-action {
    width: 100%;
    margin-left: 0;
  }

  .agency-sheet .agency-identity-grid,
  .agency-sheet .agency-guarantee-grid {
    grid-template-columns: 1fr;
  }

  .agency-sheet-licence-facts > div {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .agency-sheet .review-card-public {
    padding: 1.1rem;
  }

  .agency-sheet .review-card-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .agency-sheet .review-card-rating {
    grid-column: auto;
    align-items: flex-end;
  }

  .agency-sheet .review-card-footer {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  .agency-sheet .review-card-votes,
  .agency-sheet .review-card-footer-actions {
    gap: 0.5rem;
  }

  .agency-sheet .review-card-permalink {
    white-space: nowrap;
  }

  .agency-sheet-sort-count,
  .agency-sheet-sort .form-label {
    flex-basis: 100%;
  }

  .agency-sheet-sort .form-select {
    flex: 1 1 8rem;
    min-width: 0;
  }
}