/* Project overrides, loaded after the generated rue221.css. */

/* Header text stays white, including the link for the current page. */
.r221-siteheader-navLink[aria-current="page"],
.r221-mobilesiteheader-navItem[aria-current="page"],
.r221-siteheader-compactActions .r221-siteheader-searchAction {
  color: var(--color-white);
}

/* Contact bubble: a single round button with the message icon. */
.r221-contactbubble-root {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.r221-contactbubble-message {
  inline-size: var(--bubble-button-size);
  block-size: var(--bubble-button-size);
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--contact-bubble-shadow);
}

/* A bit bigger than the design (36px desktop, 44px mobile), icon scaled to match. */
.r221-contactbubble-root {
  --bubble-button-size: 48px;
}

.r221-contactbubble-message > img {
  inline-size: 24px;
  block-size: 24px;
}

@media (max-width: 767px) {
  .r221-contactbubble-root {
    --bubble-button-size: 52px;
  }
}

/* Wider content area than the design default (--layout-content-width, 1012px).
   Shared by the home, rubrique and contact pages so their side margins match. */
:root {
  --site-content-max-width: 1280px;
}

.r221-homepage-main {
  max-inline-size: var(--site-content-max-width);
}

@media (min-width: 768px) {
  .r221-rubricpage-main,
  .r221-contactpage-main {
    inline-size: min(var(--site-content-max-width), calc(100% - 2 * var(--layout-desktop-gutter)));
  }
}

/* "Se connecter" is a link to the sign-in page: keep the button look. */
.r221-siteheader-accountAction,
.r221-mobilesiteheader-accountAction {
  text-decoration: none;
}

/* "Se déconnecter" posts a form: the form must not affect the header layout. */
.r221-siteheader-logoutForm {
  display: contents;
}

button.r221-siteheader-accountAction,
button.r221-mobilesiteheader-accountAction {
  cursor: pointer;
}

/* Header search pop-up (templates/shared/search_dialog.html). */
.r221-searchdialog-root {
  inline-size: min(640px, calc(100% - 2 * var(--space-16)));
  max-inline-size: none;
  max-block-size: calc(100dvh - 2 * var(--space-40));
  margin: var(--space-80) auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  color: var(--color-text);
  background: var(--color-white);
  box-shadow: 0 10px 30px rgb(0 19 49 / 18%);
  font-family: var(--font-body);
}

.r221-searchdialog-root::backdrop {
  background: rgb(5 37 76 / 45%);
}

.r221-searchdialog-panel {
  display: flex;
  flex-direction: column;
  max-block-size: inherit;
}

.r221-searchdialog-form {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-block-end: 1px solid var(--color-border);
}

.r221-searchdialog-icon {
  display: flex;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.r221-searchdialog-icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.r221-searchdialog-input {
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-8) 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 18px;
}

.r221-searchdialog-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.r221-searchdialog-close {
  flex: none;
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: var(--type-utility-size);
}

.r221-searchdialog-close:hover,
.r221-searchdialog-close:focus-visible {
  background: var(--color-surface-subtle);
}

.r221-searchdialog-results {
  margin: 0;
  padding: var(--space-8);
  overflow-y: auto;
  list-style: none;
}

.r221-searchdialog-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-control);
  color: inherit;
  text-decoration: none;
}

.r221-searchdialog-option[aria-selected="true"] .r221-searchdialog-link {
  background: var(--color-surface-subtle);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.r221-searchdialog-media {
  flex: none;
  inline-size: 56px;
  block-size: 40px;
  overflow: hidden;
  border-radius: var(--radius-badge);
  background: var(--color-popular-action);
}

.r221-searchdialog-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.r221-searchdialog-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.r221-searchdialog-title {
  overflow: hidden;
  font-size: var(--type-card-title-size);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.r221-searchdialog-meta {
  color: var(--color-muted);
  font-size: var(--type-timestamp-size);
  opacity: 0.75;
}

.r221-searchdialog-status {
  margin: 0;
  padding: 0 var(--space-16);
  color: var(--color-muted);
  font-size: var(--type-utility-size);
}

.r221-searchdialog-status:not(:empty) {
  padding-block: var(--space-12);
}

/* The suggestion count is only for screen readers once results are shown. */
.r221-searchdialog-results:not([hidden]) + .r221-searchdialog-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  padding: 0;
}

@media (max-width: 767px) {
  .r221-searchdialog-root {
    inline-size: 100%;
    max-block-size: 100dvh;
    margin: 0 0 auto;
    border-radius: 0;
  }
}