.salons-brand-swap .site-header__logo-img {
  transition: opacity 0.3s ease;
}

.harmony-row__swatches img { border: 2px solid transparent; }
.harmony-row__swatches img:hover { border-color: var(--red); }

/* ==========================================================================
   Écran 1 — La Suite : vidéo emblématique en fond, texte centré, trois accès.
   ========================================================================== */

.la-suite-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: var(--u12) var(--u6);
  background: var(--black);
  overflow: hidden;
  text-align: center;
}

@supports not (height: 100svh) {
  .la-suite-hero { min-height: calc(100vh - var(--header-h)); }
}

.la-suite-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--black);
}

.la-suite-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.62),
    rgb(0 0 0 / 0.38) 42%,
    rgb(0 0 0 / 0.42) 62%,
    rgb(0 0 0 / 0.68)
  );
}

.la-suite-hero__inner {
  position: relative;
  z-index: 1;                     /* au-dessus du voile ::after */
  width: 100%;
  max-width: 1280px;
}

.la-suite-line {
  display: block;
  text-wrap: balance;
}

.la-suite-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.la-suite-hero__title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin: var(--u4) auto 0;
  background: var(--red);
}

.la-suite-hero__lead {
  margin: var(--u6) auto 0;
  max-width: 65ch;
  font-size: clamp(1rem, 2vw, 1.75rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--white);
}

.la-suite-hero__lead strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Accès rapides — les mêmes trois pastilles ferment chaque écran La Suite.
   space-between plutôt qu'une gouttière fixe : à 1180px de large, trois
   pastilles de 252px laissent exactement les 212px d'écart de la maquette, et
   l'écart se resserre tout seul quand la fenêtre rétrécit.
   -------------------------------------------------------------------------- */
.la-suite-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--u3);
  width: 100%;
  max-width: 1180px;
  margin: var(--u6) auto 0;
}

.la-suite-actions__link {
  display: flex;
  flex: 0 1 252px;
  align-items: center;
  justify-content: center;
  min-height: 63px;
  padding: var(--u1) var(--u3);
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: var(--radius-btn);
  font-size: clamp(0.9375rem, 1.3vw, 1.1875rem);
  line-height: 1.25;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
  cursor: var(--cursor-pointer);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.la-suite-actions__link:hover,
.la-suite-actions__link:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.la-suite-actions--hero {
  max-width: 1275px;
  margin-top: var(--u12);
}

.la-suite-actions--hero .la-suite-actions__link {
  flex-basis: 325px;
  min-height: 76px;
  font-size: clamp(0.9375rem, 1.35vw, 1.25rem);
}

@media (max-width: 1070px) {
  .la-suite-actions--hero {
    justify-content: center;
  }
}

@media (max-width: 851px) {
  .la-suite-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .la-suite-hero {
    padding: var(--u8) var(--u3);
  }
  .la-suite-actions,
  .la-suite-actions--hero {
    margin-top: var(--u8);
  }
  .la-suite-actions__link {
    flex-basis: 100%;
    min-height: 64px;
  }
}

/* ==========================================================================
   Écran 2 — photo des fondateurs à gauche, adresse au visiteur à droite.
   ========================================================================== */

.la-suite-split {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: clamp(var(--u4), 4.3vw, 62px);
  align-items: center;
  padding: var(--u3) var(--u3) var(--u4);
  background: var(--black);
}

.la-suite-split .la-suite-actions {
  grid-column: 1 / -1;
}

.la-suite-split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 48px;
}

.la-suite-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.la-suite-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin-top: var(--u8);
  background: var(--red);
}

.la-suite-lead {
  margin-top: calc(var(--u8) + var(--u2));
  max-width: 38ch;
  font-size: clamp(1rem, 2vw, 1.75rem);
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--white);
}

.la-suite-lead + .la-suite-lead {
  margin-top: var(--u4);
}

@media (max-width: 899px) {
  .la-suite-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u6);
    padding: var(--u6) var(--u3) var(--u8);
  }
  .la-suite-split__media img {
    border-radius: 32px;
  }
  .la-suite-title::after,
  .la-suite-lead {
    margin-top: var(--u6);
  }
}

/* ==========================================================================
   Écran 3 — le lieu : texte à gauche, mosaïque de quatre détails à droite.
   ========================================================================== */

.la-suite-place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50vw);
  gap: var(--u8);
  align-items: center;
  padding: var(--u6) var(--u4) var(--u8);
  background: var(--black);
}

.la-suite-place .la-suite-actions {
  grid-column: 1 / -1;
}

.la-suite-place .la-suite-lead {
  line-height: 1.45;
  max-width: none;
}

.la-suite-place__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.place-tile {
  position: relative;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: var(--cursor-pointer);
}

.place-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.place-tile__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--u2);
  padding: var(--u2);
  overflow-y: auto;
  background: rgb(0 0 0 / 0.68);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.place-tile__text p {
  margin: 0;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  line-height: 1.6;
  color: var(--white);
}

.place-tile:hover .place-tile__text,
.place-tile:focus .place-tile__text,
.place-tile:focus-within .place-tile__text {
  opacity: 1;
}

.place-tile:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (hover: none) {
  .place-tile__text {
    opacity: 1;
  }
}

@media (max-width: 899px) {
  .la-suite-place {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u6);
    padding: var(--u8) var(--u3);
  }
}

/* ==========================================================================
   Écran 4 — les avis en vidéo. Référence : maquette « LA SUITE 4 » (1440px).
   ========================================================================== */

.la-suite-avis {
  padding: var(--u6) var(--u4) var(--u8);
  background: var(--black);
}

.la-suite-title--sm {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.la-suite-avis__lead {
  max-width: 1210px;
  margin-top: var(--u6);
  line-height: 1.45;
}

.la-suite-avis__wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  max-width: 1274px;
  margin: var(--u8) auto 0;
  padding: 0;
  list-style: none;
}

.avis-tile__video {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--black-elegant);
}

.la-suite-avis__cta {
  display: flex;
  width: min(328px, 100%);
  min-height: 82px;
  margin: var(--u12) auto 0;
}

@media (max-width: 899px) {
  .la-suite-avis {
    padding: var(--u8) var(--u3);
  }
  .la-suite-avis__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--u2);
    margin-top: var(--u6);
  }
  .la-suite-avis__cta {
    margin-top: var(--u8);
    min-height: 64px;
  }
}

.avis-tile {
  position: relative;
  margin: 0;
}

/* Pastille de lecture, centrée sur l'affiche. */
.avis-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: opacity var(--ease);
}

.avis-tile__play::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  transition: background var(--ease);
}

.avis-tile__play svg {
  position: relative;
  transform: translateX(2px);   
}

.avis-tile__play:hover::before {
  background: rgb(0 0 0 / 0.6);
}

.avis-tile.is-playing .avis-tile__play {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Écran 5 — tarifs. Référence : maquette « LA SUITE 5 » (1440px).
   ========================================================================== */

.la-suite-tarifs {
  padding: var(--u8) var(--u4) var(--u12);
  background: var(--black);
}

.la-suite-tarifs__title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  text-align: center;
}

.la-suite-tarifs__title::after {
  display: none;
}

.la-suite-tarifs__card {
  width: min(914px, 100%);
  margin: var(--u8) auto 0;
  padding: var(--u2) var(--u4) var(--u8);
  border-radius: 28px;
  background: var(--black-elegant);
}

.la-suite-tarifs .tabs__list {
  justify-content: center;
  gap: 56px;   /* écart des deux onglets sur la maquette */
  margin: 0 0 var(--u8);
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}

.la-suite-tarifs .tabs__btn {
  min-width: 208px;
  min-height: 48px;
  padding: var(--u1) var(--u3);
  border-bottom: 0;
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.la-suite-tarifs .tabs__btn.is-active {
  background: var(--red);
  color: var(--white);
}

.la-suite-tarifs .tabs__btn:hover {
  color: var(--beige);
  border-bottom-color: transparent;
}

.la-suite-tarifs .tabs__btn.is-active:hover {
  color: var(--white);
}

.tarif-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.tarif-list__item + .tarif-list__item {
  margin-top: var(--u4);
}

.tarif-list__service {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--white);
}

.tarif-list__detail {
  margin-top: 4px;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  line-height: 1.35;
  color: var(--muted);
}

.tarif-list__price {
  margin-top: 4px;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.35;
  color: var(--white);
}

.tarif-cadeau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--u4);
  align-items: center;
  text-align: center;
}

.tarif-cadeau__rideau {
  width: 100%;
  aspect-ratio: 436 / 1111;
  object-fit: cover;
  border-radius: 8px;
}

.tarif-cadeau__motif {
  width: 56px;
  height: auto;
  margin-inline: auto;
}

.tarif-cadeau__lead {
  margin: var(--u3) 0 var(--u4);
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  color: var(--white);
}

.tarif-cadeau__visuel {
  width: 100%;
  height: auto;
  margin-top: var(--u4);
  border-radius: 8px;
}

@media (max-width: 899px) {
  .la-suite-tarifs {
    padding: var(--u8) var(--u3);
  }
  .la-suite-tarifs__card {
    padding: var(--u2) var(--u3) var(--u6);
    border-radius: 20px;
  }
  .la-suite-tarifs .tabs__list {
    gap: var(--u2);
  }
  .la-suite-tarifs .tabs__btn {
    flex: 1;
    min-width: 0;
  }
  .tarif-cadeau {
    grid-template-columns: minmax(0, 1fr);
  }
  .tarif-cadeau__rideau {
    display: none;
  }
}

/* ==========================================================================
   Catégories et sous-catégories des grilles tarifaires (Limoges)
   ========================================================================== */

.tarif-notice {
  margin: 0 0 var(--u6);
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  font-style: italic;
  color: var(--beige);
  text-align: center;
}

.tarif-category {
  margin-top: var(--u8);
}

.tarif-category:first-of-type {
  margin-top: var(--u4);
}

.tarif-category__title {
  position: relative;
  margin: 0 0 var(--u4);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 400;
  color: var(--beige);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarif-category__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--u2) auto 0;
  background: var(--red);
}

.tarif-subcategory {
  margin-top: var(--u6);
}

.tarif-subcategory__title {
  margin: 0 0 var(--u3);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 600;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Écrans affiliés — références : maquettes « adresses connivence.png » et
   « contacts affiliés et franchisés.png » (1440px), pptx
   1c-salons-section-affiliés.pptx.
   ========================================================================== */

.affilies-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--u3);
  margin: 0;
  font-size: var(--surtitre-taille);
  font-weight: var(--surtitre-graisse);
  letter-spacing: var(--surtitre-lettrage);
  text-transform: uppercase;
  color: var(--red);
}

.affilies-eyebrow::before {
  content: "";
  flex: none;
  width: 50px;
  height: 3px;
  background: var(--red);
}

.affilies-titre {
  margin: var(--u4) 0 0;
  font-family: var(--font-sans);
  font-weight: var(--titre-graisse);
  line-height: 1.16;
  letter-spacing: var(--titre-lettrage);
  text-transform: uppercase;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Écran 1 — texte à gauche, carte de France à droite.
   -------------------------------------------------------------------------- */

.affilies-carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50.8%);
  align-items: center;
  background: var(--black);
}

.affilies-carte__contenu {
  padding: var(--u16) clamp(var(--u4), 4vw, 72px) var(--u16) clamp(var(--u3), 2.2vw, 31px);
}

.affilies-carte__titre {
  font-size: clamp(1.75rem, 3.1vw, 2.75rem);
  max-width: 20ch;
}

.affilies-carte__texte {
  margin: var(--u8) 0 0;
  /* Quatre lignes sur la maquette, ~34 signes chacune. */
  max-width: 40ch;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--white);
}

.affilies-carte__media {
  align-self: stretch;
  min-height: 100%;
  padding: var(--u3);
}

.affilies-carte__map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 620px;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--black-elegant);
}

.affilies-carte .leaflet-tile-pane {
  filter: invert(1) grayscale(1) brightness(0.82) contrast(1.18);
}

.affilies-carte .leaflet-marker-icon {
  filter: drop-shadow(0 0 6px rgb(255 153 51 / 0.55));
}

.affilies-carte .leaflet-popup-content-wrapper,
.affilies-carte .leaflet-popup-tip {
  background: var(--black);
  color: var(--white);
  border: 1px solid rgb(255 255 255 / 0.15);
}

.affilies-carte .leaflet-popup-content-wrapper {
  border-radius: 12px;
}

.affilies-carte .leaflet-popup-content {
  margin: var(--u2);
  font-size: 0.875rem;
  line-height: 1.6;
}

.affilies-carte .popup-nom {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--beige);
}

.affilies-carte .popup-adresse {
  display: block;
  color: rgb(255 255 255 / 0.8);
}

.affilies-carte .popup-tel {
  display: inline-block;
  margin-top: 6px;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.affilies-carte .leaflet-popup-close-button {
  color: rgb(255 255 255 / 0.6);
}

.affilies-carte .leaflet-popup-close-button:hover {
  color: var(--white);
}

.affilies-carte .leaflet-control-attribution {
  background: rgb(0 0 0 / 0.6);
  color: var(--muted);
  font-size: 0.6875rem;
}

.affilies-carte .leaflet-control-attribution a {
  color: var(--beige);
}

.affilies-carte__repli {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 620px;
  border-radius: var(--radius-media);
  object-fit: cover;
}

@media (max-width: 899px) {
  .affilies-carte {
    grid-template-columns: minmax(0, 1fr);
  }
  .affilies-carte__contenu {
    padding: var(--u12) var(--u3) var(--u8);
  }
  .affilies-carte__titre,
  .affilies-carte__texte {
    max-width: none;
  }
  .affilies-carte__map,
  .affilies-carte__repli {
    height: 76vw;
    min-height: 360px;
    max-height: 560px;
  }
}

/* --------------------------------------------------------------------------
   Écran 2 — recherche, carrousel de fiches, mention légale.
   -------------------------------------------------------------------------- */

.affilies-liste {
  padding: var(--u12) 0 var(--u8);
  background: var(--black);
}

.affilies-liste__titre {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
}

.affilies-liste__recherche {
  display: flex;
  justify-content: center;
  margin-top: var(--u8);
}

.affilies-recherche__input {
  width: min(354px, 100%);
  padding: var(--u2) var(--u3);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 0.9375rem;
  text-align: center;
}

.affilies-recherche__input::placeholder {
  color: var(--muted);
}

.affilies-recherche__input:focus-visible {
  outline: none;
  border-color: var(--white);
  box-shadow: var(--focus-ring);
}

.affilies-carrousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--u2);
  margin-top: var(--u8);
}

.affilies-carrousel__piste {
  display: flex;
  flex: 1;
  gap: var(--u3);
  margin: 0;
  padding: 0 0 var(--u2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.affilies-carrousel__piste::-webkit-scrollbar { display: none; }

.affilies-carrousel__fleche {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: var(--black-elegant);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
  transition: border-color var(--ease), color var(--ease);
}

.affilies-carrousel__fleche[hidden],
.affilie-fiche[hidden] {
  display: none;
}

.affilies-carrousel__fleche--next {
  border-color: var(--red);
  color: var(--red);
}

.affilies-carrousel__fleche:hover,
.affilies-carrousel__fleche:focus-visible {
  border-color: var(--white);
  color: var(--white);
}

.affilies-carrousel__fleche[disabled] {
  opacity: 0.35;
  cursor: var(--cursor-default);
}

.affilie-fiche {
  /* position:relative n'habille rien ici — il ferme une fuite. Chaque fiche
     contient un <span class="visually-hidden"> dans son bouton d'appel, et
     .visually-hidden est en position:absolute. Sans bloc conteneur sur la
     fiche, ces spans se rattachaient au premier ancêtre positionné, qui est
     .affilies-carrousel — SITUÉ HORS de la piste défilante. Un absolu dont le
     bloc conteneur est en dehors du conteneur de défilement n'est pas rogné
     par lui : les vingt spans se posaient donc à leur position statique, soit
     jusqu'à ~6300px vers la droite, et étendaient d'autant la zone de
     défilement de la page. D'où le grand défilement horizontal, invisible à
     l'inspection puisque les coupables mesurent 1px et sont masqués.
     Rattachés à leur fiche, ils rentrent dans la piste, qui les rogne. */
  position: relative;
  flex: 0 0 min(294px, 78vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--u4) var(--u3) var(--u3);
  background: var(--surface);
  border-radius: var(--radius-media);
}

.affilie-fiche__ville {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.affilie-fiche__ville span {
  font-weight: 400;
  opacity: 0.75;
}

.affilie-fiche__nom {
  margin: var(--u2) 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white);
}

.affilie-fiche__adresse,
.affilie-fiche__tel {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--beige);
}

.affilie-fiche__adresse {
  margin-top: var(--u3);
}

.affilie-fiche__tel a {
  text-decoration: none;
}

.affilie-fiche__tel a:hover,
.affilie-fiche__tel a:focus-visible {
  text-decoration: underline;
}

/* L'écart minimal entre le contenu et le bouton ne peut pas venir du bouton :
   sa marge haute vaut « auto », c'est elle qui le plaque au bas de la fiche. Il
   vient donc du dernier paragraphe — le téléphone quand la fiche en porte un,
   l'adresse sinon. « p:last-of-type » désigne exactement l'un ou l'autre. */
.affilie-fiche p:last-of-type {
  margin-bottom: var(--u4);
}

.affilie-fiche__cta {
  /* Le bouton se plaque au bas de la fiche. La piste étire toutes les fiches à
     la même hauteur, mais pas leur contenu — une adresse tient sur une ou deux
     lignes, le numéro manque à plusieurs entrées du carnet — et le bouton
     suivait ce contenu : la rangée était en dents de scie.
     La règle « :first-of-type » qui figeait cette marge à u4 datait du temps où
     une fiche pouvait porter deux boutons. Le gabarit n'en pose plus qu'un
     (if/else de salons-affilies.php), donc elle s'appliquait TOUJOURS et ne
     faisait plus qu'annuler le « margin-top: auto » au-dessus d'elle. */
  margin-top: auto;
  /* Composition reprise de .btn (components.css) : libellé et flèche centrés
     sur la même médiane. En bloc avec « text-align: center », la flèche restait
     posée sur la ligne de base du libellé, donc visiblement trop basse.
     Le <span class="visually-hidden"> est en position:absolute — il n'est pas
     un élément flex, et la gouttière ne joue qu'entre le libellé et l'icône. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--u2) var(--u3);
  border-radius: var(--radius-btn);
  background: var(--red);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  cursor: var(--cursor-pointer);
  transition: background var(--ease);
}

/* Même garde que .retour svg et .contact-direct svg : base.css impose
   « height: auto » à toute icône, donc une flèche rétrécie par le flex
   perdrait aussi sa hauteur. flex:none la fige à ses 14px. */
.affilie-fiche__cta svg {
  flex: none;
}

.affilie-fiche__cta:hover,
.affilie-fiche__cta:focus-visible {
  background: var(--red-hover);
}

.affilies-liste__vide {
  margin: var(--u6) 0 0;
  text-align: center;
  color: var(--muted);
}

.affilies-liste__mention {
  max-width: 74ch;
  margin: var(--u12) auto 0;
  padding-top: var(--u8);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: clamp(1rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .affilies-liste {
    padding: var(--u8) 0;
  }
  .affilies-carrousel__fleche {
    display: none;   
  }
  .affilies-liste__mention {
    margin-top: var(--u8);
    padding-top: var(--u6);
  }
}

/* ==========================================================================
   Marque Connivence — Limoges et Affiliés.
   Ces deux pages reprennent les compositions de La Suite (le pptx Limoges le
   demande explicitement), mais elles relèvent de la marque Connivence : la
   charte y impose une autre typographie et d'autres formes.
   · Titres : TITRE 1 de la charte — Circe gras, CAPITALES — et non la
   didone en bas de casse propre à La Suite (planche « hiérarchie typos »).
   · Formes : le système de mise en page Connivence est rectangulaire
   (planches « écran » et « composants et boutons ») ; les arrondis de
   10 et 28px relevés sur les maquettes La Suite n'y ont pas cours.
   · Boutons : libellés en capitales, icône à droite (règle 03).
   ========================================================================== */

/* --- Titres ------------------------------------------------------------- */

.brand-connivence .la-suite-hero__title,
.brand-connivence .la-suite-title {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.brand-connivence .la-suite-hero__title {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
}

.brand-connivence .la-suite-title {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
}

.brand-connivence .la-suite-hero__title::after {
  width: min(320px, 60%);
  height: 3px;
  margin-top: var(--u4);
}

.brand-connivence .la-suite-title::after {
  width: min(320px, 60%);
  margin-top: var(--u6);
}

.brand-connivence .la-suite-hero__lead,
.brand-connivence .la-suite-lead {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.01em;
  line-height: 1.65;
}

/* --- Formes et boutons --------------------------------------------------- */

.brand-connivence .la-suite-tarifs__card,
.brand-connivence .tarif-cadeau__rideau,
.brand-connivence .tarif-cadeau__visuel,
.brand-connivence .affilies-recherche__input,
.brand-connivence .btn {
  border-radius: 0;
}

/* --- Carnet d'adresses --------------------------------------------------- */

.affilie-fiche__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.affilie-fiche__cta svg {
  flex: none;
}