/* ==========================================================================
   YOUSSEF LABS — DESIGN SYSTEM  (2/3)
   Composants réutilisables : boutons, cartes, verre dépoli, navigation,
   pied de page, formulaires, modale, notifications.

   Chaque composant est autonome et ne dépend que des jetons du fichier 1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SURFACES EN VERRE
   -------------------------------------------------------------------------- */

.glass {
  position: relative;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-md);
}

/* Reflet diagonal : donne l'épaisseur du verre sans surcharger le rendu. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}

/* Repli propre si backdrop-filter n'est pas supporté (vieux navigateurs). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background-color: var(--color-surface);
  }
}

/* --------------------------------------------------------------------------
   2. BOUTONS
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-color: var(--color-text);
  --btn-border: var(--color-border-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8125rem var(--space-6);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Bouton principal jaune — texte noir, comme imposé par la charte. */
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-color: var(--color-on-accent);
  --btn-border: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
  --btn-bg: #ffe533;
  --btn-border: #ffe533;
}

/* Bouton secondaire — verre discret. */
.btn--ghost {
  --btn-bg: var(--color-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-border: #3c3c3c;
}

/* Bouton tertiaire — sans cadre, pour les actions de faible poids. */
.btn--quiet {
  --btn-border: transparent;
  padding-inline: var(--space-4);
  color: var(--color-text-muted);
}

.btn--quiet:hover {
  color: var(--color-text);
  --btn-bg: var(--color-soft-hover);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: 1rem var(--space-8);
  font-size: var(--text-md);
}

.btn--block {
  width: 100%;
}

/* La flèche avance légèrement au survol : micro-interaction, pas de gadget. */
.btn__arrow {
  transition: transform var(--duration) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   3. BADGES & STATUTS
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* `display: inline-flex` l'emporte sinon sur l'attribut `hidden`. */
.badge[hidden] {
  display: none;
}

.badge--accent {
  border-color: var(--accent-24);
  background-color: var(--accent-06);
  color: var(--color-accent);
}

/* Pastille de statut projet : la couleur ET la forme portent l'information. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.35);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--status-color, var(--status-soon));
  flex: none;
}

.status--online {
  --status-color: var(--status-online);
  color: var(--status-online);
  border-color: rgba(52, 209, 125, 0.28);
}

/* Halo pulsé uniquement sur « en ligne » : le seul état qui appelle l'œil. */
.status--online .status__dot {
  box-shadow: 0 0 0 0 rgba(52, 209, 125, 0.55);
  animation: pulse-dot 2.6s var(--ease-out) infinite;
}

.status--progress {
  --status-color: var(--status-progress);
  color: var(--status-progress);
  border-color: rgba(255, 159, 28, 0.28);
}

.status--soon {
  --status-color: var(--status-soon);
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 209, 125, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(52, 209, 125, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 209, 125, 0);
  }
}

/* --------------------------------------------------------------------------
   4. CARTES
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

/* Halo qui suit le curseur (coordonnées fournies par main.js). */
.card--interactive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--pointer-x, 50%) var(--pointer-y, 0%),
    var(--accent-06),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}

.card--interactive:hover,
.card--interactive:focus-visible {
  border-color: var(--color-border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card--interactive:hover::after,
.card--interactive:focus-visible::after {
  opacity: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-2);
  color: var(--color-accent);
  font-size: var(--text-lg);
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Lien couvrant : toute la carte devient cliquable, un seul élément focusable. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

/* --------------------------------------------------------------------------
   5. EN-TÊTE & NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out), backdrop-filter var(--duration) var(--ease-out);
}

/* Le verre n'apparaît qu'une fois la page défilée (classe posée par main.js). */
.site-header.is-scrolled {
  background-color: var(--glass-bg-strong);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand__logo {
  width: 176px;
  height: auto;
  transition: filter var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.brand__logo--light {
  display: none;
}

[data-theme="light"] .brand__logo--dark {
  display: none;
}

[data-theme="light"] .brand__logo--light {
  display: block;
}

.brand__logo--footer {
  width: 205px;
}

.brand:hover .brand__logo {
  filter: drop-shadow(0 0 12px var(--accent-45));
  transform: translateY(-1px);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--duration) var(--ease-out);
}

.nav__link:hover {
  color: var(--color-text);
}

/* Soulignement de la page courante : fin, jaune, sous le texte. */
.nav__link[aria-current="page"] {
  color: var(--color-text);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}

.theme-toggle:hover {
  border-color: var(--accent-45);
  transform: translateY(-1px);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__moon,
[data-theme="light"] .theme-toggle__sun {
  display: none;
}

[data-theme="light"] .theme-toggle__moon {
  display: block;
}

/* Bouton hamburger (mobile uniquement). */
.nav-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.nav-toggle .icon {
  width: 20px;
  height: 20px;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* Panneau de navigation mobile. */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
}

.mobile-nav.is-open {
  display: flex;
  animation: slide-down var(--duration) var(--ease-out);
}

.mobile-nav__link {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: background-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] {
  background-color: var(--color-soft-hover);
  color: var(--color-text);
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .nav,
  .site-header__actions .btn {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }
}

/* --------------------------------------------------------------------------
   6. PIED DE PAGE
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--section-gap);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-footer-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: var(--space-10);
  padding-block: var(--space-16) var(--space-10);
}

.site-footer__about {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 34ch;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}

.footer-col__link {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  transition: color var(--duration) var(--ease-out);
}

.footer-col__link:hover {
  color: var(--color-accent);
}

.privacy-options { padding: 0; text-align: left; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   7. FORMULAIRES
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* `display: flex` l'emporte sinon sur l'attribut `hidden`. */
.field[hidden] {
  display: none;
}

.field__label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.input,
.textarea {
  width: 100%;
  padding: 0.875rem var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-input);
  color: var(--color-text);
  font-size: var(--text-md);
  transition: border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-placeholder);
}

.input:hover,
.textarea:hover {
  border-color: var(--color-border-strong);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-45);
  background-color: var(--color-input-focus);
  box-shadow: 0 0 0 4px var(--accent-12);
}

.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: var(--leading-normal);
}

/* Message d'erreur : dit ce qui ne va pas, pas « oups ». */
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: #ff6b6b;
}

.field.has-error .field__error {
  display: flex;
}

.field.has-error .input,
.field.has-error .textarea {
  border-color: rgba(255, 107, 107, 0.6);
}

/* Sélecteur en cartes (réseau social, style rédactionnel). */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.choice {
  position: relative;
}

/* La vraie radio reste dans le DOM (clavier + lecteurs d'écran), invisible. */
.choice__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.02);
  transition: border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  pointer-events: none;
}

.choice__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-base);
}

.choice__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.choice__input:hover + .choice__body {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.choice__input:checked + .choice__body {
  border-color: var(--color-accent);
  background-color: var(--accent-06);
}

.choice__input:checked + .choice__body .choice__title {
  color: var(--color-accent);
}

.choice__input:focus-visible + .choice__body {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8. BARRE DE PROGRESSION
   -------------------------------------------------------------------------- */

.progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), #75b5ff);
  transition: width 400ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   9. MODALE PLEIN ÉCRAN
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background-color: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out), visibility var(--duration) var(--ease-out);
  overflow-y: auto;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__panel {
  width: min(560px, 100%);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  text-align: center;
  transform: translateY(18px) scale(0.98);
  transition: transform var(--duration-slow) var(--ease-out);
}

.modal.is-open .modal__panel {
  transform: none;
}

/* Deux vues successives dans le même panneau : analyse, puis message. */
.modal__view {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.modal__view.is-active {
  display: flex;
  animation: fade-in var(--duration-slow) var(--ease-out);
}

.modal__title {
  font-size: var(--text-xl);
  font-weight: 600;
}

.modal__text {
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-align: left;
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.modal__legal {
  font-size: var(--text-xs);
  color: #6a6a6a;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Anneau d'analyse : un seul élément animé, très peu coûteux. */
.scanner {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}

.scanner__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}

.scanner__ring--slow {
  inset: 12px;
  border-color: transparent;
  border-bottom-color: var(--accent-45);
  animation-duration: 1.9s;
  animation-direction: reverse;
}

.scanner__emoji {
  font-size: 1.75rem;
  animation: bob 2.4s var(--ease-in-out) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
}

/* --------------------------------------------------------------------------
   10. NOTIFICATION ÉPHÉMÈRE (retour de copie)
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-8) + 3.5rem);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
  font-size: var(--text-base);
  font-weight: 500;
  transform: translate(-50%, 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out),
    visibility var(--duration) var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.toast .icon {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   11. MESSAGES INTER-PAGES (flash)
   -------------------------------------------------------------------------- */

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-8);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background-color: var(--color-surface);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.alert .icon {
  flex: none;
  margin-top: 0.15em;
}

.alert--success {
  border-left-color: var(--status-online);
}

.alert--success .icon {
  color: var(--status-online);
}

.alert--error {
  border-left-color: #ff6b6b;
}

.alert--error .icon {
  color: #ff6b6b;
}

.alert--info {
  border-left-color: var(--color-accent);
}

.alert--info .icon {
  color: var(--color-accent);
}

/* Quatrième couleur de statut : l'échec. Les trois autres vivent en 4. */
.status--error {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.35);
}

.status--error .status__dot {
  background-color: #ff6b6b;
}

/* Les listes déroulantes reprennent l'aspect des champs texte. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

select.input option {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Encart publicitaire
   --------------------------------------------------------------------------
   Volontairement discret et cadré : une annonce doit se distinguer du contenu
   du laboratoire, faute de quoi elle trompe le lecteur — et les règles
   d'AdSense l'interdisent.

   `min-height` réserve la place avant que la régie ne réponde : sans elle, le
   texte sous l'encart saute au moment où l'annonce arrive. C'est ce
   déplacement que mesure le Cumulative Layout Shift, l'un des trois signaux
   de performance que Google prend en compte pour le classement. */
.ad {
  margin: var(--space-12) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.ad__label {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad__unit {
  display: block;
  min-height: 100px;
}

@media (min-width: 768px) {
  .ad__unit {
    min-height: 250px;
  }
}