/* Composants neutres partagés par tous les clients (ADR-006), tokens-only.
   Layers `tokens` < `blocks` < `brand` : brand.css surcharge sans `!important`.
   Print + reduced-motion vivent UNLAYERED en queue de fichier pour battre `@layer brand`. */
@layer tokens, blocks, brand;

@layer blocks {
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  line-height: 1.6;
  color: var(--color-text);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.visually-hidden {
  position: absolute;
  width: 1px; /* allow-naked-px: clip a11y (rect), pas une dimension tokenisable */
  height: 1px; /* allow-naked-px: clip a11y */
  margin: -1px; /* allow-naked-px: clip a11y */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  z-index: 1000;
}

.skip-link:focus-visible {
  top: 0;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}
:focus:not(:focus-visible) {
  outline: none;
}
.btn:focus-visible,
button[type="submit"]:focus-visible {
  /* Outline transparent : repeint par le mode contraste forcé. L'anneau réel est le
     double box-shadow deux tons, lisible sur un bouton à fond sombre comme clair. */
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
  box-shadow:
    0 0 0 var(--focus-ring-width) var(--color-white),
    0 0 0 calc(var(--focus-ring-width) * 2) var(--color-primary-dark);
}
summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}

header {
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: 1rem 2rem;
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-text);
}

.logo img {
  max-height: var(--size-logo-height);
}

/* Un thème repeint les barres via `--nav-toggle-bar`, jamais par `background` sur
   `.nav-toggle-icon` : @layer brand écraserait le `transparent` de l'état ouvert
   (la croix rendrait un astérisque). */
.nav-toggle {
  --nav-toggle-bar: var(--color-text);
  display: none;
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem;
  cursor: pointer;
  width: var(--size-control);
  height: var(--size-control);
  position: relative;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  background: var(--nav-toggle-bar);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: transform var(--motion-duration-base) var(--motion-ease-standard),
              opacity var(--motion-duration-base) var(--motion-ease-standard);
}

.nav-toggle-icon {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  left: 0;
  transform: none;
}

.nav-toggle-icon::before {
  top: -0.375rem;
}

.nav-toggle-icon::after {
  top: 0.375rem;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

nav[role="navigation"] ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

nav[role="navigation"] ul li {
  position: relative;
}

nav[role="navigation"] ul li a {
  color: var(--color-text);
  padding: 0.5rem 0;
  display: block;
}

nav[role="navigation"] ul li a:hover,
nav[role="navigation"] ul li a[aria-current="page"] {
  color: var(--color-primary);
}

nav[role="navigation"] ul ul {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  padding: 0.5rem 0;
  min-width: 12.5rem;
  flex-direction: column;
  gap: 0;
  z-index: 100;
}

nav[role="navigation"] ul li:hover > ul,
nav[role="navigation"] ul li:focus-within > ul {
  display: flex;
}

nav[role="navigation"] ul ul a {
  padding: 0.4rem 1rem;
}

/* —— Bandeau d'alerte + CTA d'en-tête (header-default) */
.site-alert {
  --alert-bg: var(--color-bg-subtle);
  --alert-accent: var(--color-primary);
  background: var(--alert-bg);
  border-block-end: var(--border-width) solid var(--color-border);
  padding-block: 0.5rem;
  padding-inline: var(--container-padding);
}

.site-alert__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-inline-start: var(--border-width-accent) solid var(--alert-accent);
  padding-inline-start: 0.75rem;
}

.site-alert__body {
  flex: 1;
  font-size: var(--font-size-sm);
}

/* Souligné : sur fond coloré, la couleur seule ne distingue pas le lien. */
.site-alert__body a {
  text-decoration: underline;
}

/* Croix seule : l'intitulé accessible vit dans l'aria-label posé par le snippet. */
.site-alert__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  background: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  color: var(--color-text);
  cursor: pointer;
}

.site-alert__close svg {
  display: block;
}

.site-alert__close:hover {
  border-color: var(--alert-accent);
  color: var(--alert-accent);
}

.site-alert__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--alert-accent);
  outline-offset: var(--focus-ring-offset);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.header-cta {
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

/* —— Pied de page socle (ADR-029). Scopé `footer.footer-core` (classe posée par
   footer-default.php) : un thème qui remplace le footer n'hérite de rien.
   `.footer-social__link--<reseau>` est émis dans le HTML mais volontairement non
   stylé ici : hook réservé aux thèmes. Les `--footer-*` sont des variables de
   composant (pas des tokens), point d'entrée des thèmes. */
footer.footer-core {
  --footer-bg: var(--color-bg-subtle);
  --footer-border-color: var(--color-border);
  --footer-title-color: var(--color-text-muted);
  --footer-link-color: var(--color-text);
  --footer-link-hover-color: var(--color-primary);
  --footer-bottom-color: var(--color-text-muted);

  background: var(--footer-bg);
  border-block-start: var(--border-width) solid var(--footer-border-color);
  padding-block: 2.5rem;
  padding-inline: var(--container-padding);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}

.footer-contact p + p {
  margin-block-start: 0.75em;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem;
}

.footer-nav__col {
  min-width: 0;
}

.footer-nav__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--footer-title-color);
  margin-block-end: 0.75rem;
}

.footer-nav__list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.footer-nav__item a {
  color: var(--footer-link-color);
}

.footer-nav__item a:hover,
.footer-nav__item a:focus-visible {
  color: var(--footer-link-hover-color);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  /* `--color-border` et non `--footer-border-color` : filet interne au footer,
     conservé par un thème qui retire le filet supérieur. */
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-start: 1.5rem;
  font-size: var(--font-size-sm);
  color: var(--footer-bottom-color);
}

.footer-copyright {
  margin-inline-end: auto;
}

.footer-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.footer-social__item a {
  color: var(--color-text-muted);
}

.footer-social__item a:hover,
.footer-social__item a:focus-visible {
  color: var(--color-primary);
}

main {
  margin: 0 auto;
  padding-block: 2rem;
}

.error-page,
.article,
.event {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-padding);
}

h1 { font-size: var(--font-size-h1); margin-bottom: 1rem; }
h2 { font-size: var(--font-size-h2); margin-bottom: 0.75rem; }
h3 { font-size: var(--font-size-h3); margin-bottom: 0.5rem; }

/* Espacement orthogonal au fond : un fond ne change jamais le padding (BUILDER.md). */
.layout-section {
  background-color: var(--section-bg, transparent);
  padding-block: var(--space-section-standard);
  color: var(--section-text, inherit);
}

/* Pages builder et page article portent tout leur rythme vertical (padding de
   section réglable par l'éditeur) : `main` n'en ajoute aucun, sinon un liseré non
   réglable s'intercale sous le menu. Pas `:first-child` : le <h1> visually-hidden
   précède la 1ʳᵉ section. Un `main { padding-block }` en @layer brand l'emporte
   par ordre de couche (ADR-006). */
main:has(.layout-section),
main:has(.article-page) {
  padding-block: 0;
}

.section-light {
  --section-bg: var(--color-bg-subtle);
  --section-text: var(--color-text);
}

.section-accent {
  --section-bg: var(--color-primary);
  --section-text: var(--color-white);
}

.section-accent a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.section-accent a:hover,
.section-accent a:focus-visible {
  text-decoration: none;
  background-color: var(--color-overlay-light);
  border-radius: var(--radius);
  padding-inline: 0.15em;
  margin-inline: -0.15em;
}

.section-dark {
  --section-bg: var(--section-dark-bg);
  --section-text: var(--section-dark-text);
}
.section-dark a {
  color: var(--section-dark-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* `--color-overlay-on-dark` = voile posé SUR la bande sombre (clair sur quasi-noir,
   assombri sur bande colorée) : le thème l'arbitre contre sa bande sans faire passer
   `--section-dark-link` sous 4.5:1. Le repli évite un `background-color` invalide. */
.section-dark a:hover,
.section-dark a:focus-visible {
  text-decoration: none;
  background-color: var(--color-overlay-on-dark, color-mix(in srgb, var(--color-white) 10%, transparent));
  border-radius: var(--radius);
  padding-inline: 0.15em;
  margin-inline: -0.15em;
}

/* Largeur du contenu (BUILDER.md), orthogonale au fond et à l'espacement. */
.section-full > .layout-container {
  max-width: none;
  padding-inline: 0;
}

/* Fond bord à bord, contenu aligné sur celui d'une section Standard voisine : on
   reproduit la marge (100% - container-max) / 2 qu'elle laisse au-delà de
   `--container-max` ; `max()` la ramène à 0 en dessous. */
.section-full-padded > .layout-container {
  max-width: none;
  padding-inline: calc(max(0%, (100% - var(--container-max)) / 2) + var(--container-padding));
}

/* Déclarées APRÈS `.layout-section` à spécificité égale : l'ordre source les fait gagner. */
.section-spacing-none {
  padding-block: 0;
}
.section-spacing-compact {
  padding-block: var(--space-section-compact);
}
/* Redondant avec le défaut : rend le choix « Standard » persistant au Panel (fields/layout-settings). */
.section-spacing-standard {
  padding-block: var(--space-section-standard);
}
.section-spacing-airy {
  padding-block: var(--space-section-airy);
}
/* BUILDER.md « Espacement asymétrique » */
.section-spacing-attached {
  padding-block-start: 0;
  padding-block-end: var(--space-section-standard);
}
/* Miroir : ne pas cumuler avec `-attached` sur la rangée voisine (écart retiré des deux côtés). */
.section-spacing-attached-bottom {
  padding-block-start: var(--space-section-standard);
  padding-block-end: 0;
}

.layout-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.layout-row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.layout-column {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 768px) { /* allow-naked-px: breakpoint, var() illégal en media query */
  .layout-column {
    grid-column: span var(--span, 12);
  }
}

.layout-column > .block + .block {
  margin-block-start: var(--space-block);
}

/* Rendu par layout-section.php pour un utilisateur Panel connecté seulement (BUILDER.md). */
.block-placeholder {
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-block);
}

/* —— Bloc Hero. `--color-scrim` : token OPTIONNEL, défaut au point de peinture,
   qu'un thème teinte via `.hero { --color-scrim: … }`. */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: var(--size-hero-min, 60vh);
  padding-block: var(--space-section-airy);
  padding-inline: var(--container-padding);
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-scrim, color-mix(in srgb, var(--color-black) 42%, transparent));
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.hero--media {
  color: var(--color-white);
}

.hero__surtitre {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero__title {
  margin: 0;
  /* `--font-size-display` n'existe que chez les clients qui le tunent : sans
     fallback le hero casse silencieusement ailleurs. */
  font-size: var(--font-size-display, clamp(2rem, 4vw + 1rem, 3.5rem));
  line-height: 1.05;
  text-wrap: balance;
}

.hero__subtitle {
  margin-block-start: var(--space-block);
  max-width: 42rem;
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

.hero__subtitle > :first-child { margin-block-start: 0; }
.hero__subtitle > :last-child { margin-block-end: 0; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-block);
}

.hero--media .hero__cta.btn--secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}
.hero--media .hero__cta.btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-text);
}

/* `svh` tient compte de la barre d'URL mobile. `--size-header` : token OPTIONNEL —
   un client dont le header occupe le flux et qui allowliste `hero` DOIT le définir,
   sinon un hero « plein » déborde d'une hauteur de header. */
.hero--full {
  min-height: calc(100svh - var(--size-header, 0px)); /* allow-naked-px: fallback du token optionnel — calc() exige une unité, aucun token « longueur zéro » n'existe */
}

/* Chevron décoratif (aria-hidden côté snippet) ; le bloc reduced-motion global le fige. */
.hero__scroll {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-end: var(--space-block);
  margin-inline: auto;
  width: 1.25rem;
  height: 1.25rem;
  border-inline-end: var(--border-width-strong) solid var(--color-primary);
  border-block-end: var(--border-width-strong) solid var(--color-primary);
  animation: hero-scroll-cue 1.8s var(--motion-ease-standard) infinite;
}
.hero--media .hero__scroll {
  border-color: var(--color-white);
}
@keyframes hero-scroll-cue {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(0.35rem) rotate(45deg); }
}

.block-heading + .block-text {
  margin-block-start: 0.5rem;
}

.block-text {
  line-height: 1.7;
}

.block-text p + p {
  margin-block-start: 1em;
}

.block-text ul,
.block-text ol {
  padding-inline-start: 1.5em;
  margin-block: 0.75em;
}

.block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.block-image figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-start: 0.5rem;
}

/* La grille vit sur le `<ul>`, pas sur `.block-gallery` dont l'unique enfant est le `<figure>`. */
.block-gallery__figure {
  margin: 0;
}

.block-gallery__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-gallery-min), 1fr));
  gap: 0.75rem;
}

.block-gallery img {
  width: 100%;
  height: var(--gallery-thumb-height);
  object-fit: cover;
  border-radius: var(--radius);
}

/* Déclencheurs de la lightbox socle (assets/shared/js/lightbox.js) ; sans JS le lien ouvre l'image. */
.block-gallery__link,
.block-image__link {
  display: block;
  cursor: zoom-in;
}

.block-gallery__link img {
  transition: opacity 0.15s ease;
}

.block-gallery__link:hover img,
.block-image__link:hover img {
  opacity: 0.9;
}

.block-gallery__link:focus-visible,
.block-image__link:focus-visible {
  outline: 2px solid var(--color-text); /* allow-naked-px: anneau de focus a11y, largeur non tokenisée (cf. .lightbox__nav) */
  outline-offset: 2px; /* allow-naked-px: décalage de l'anneau de focus */
}

/* —— Bloc Série d'images (gated : `agency.core.serie-images.enabled`).
   Flex et non grid auto-fill : une rangée incomplète doit occuper toute la largeur.
   `--serie-images-per-row` est injecté en inline par serie-images.php (défaut 6) ;
   `flex-grow: 0` : une dernière rangée partielle garde le gabarit des rangées complètes. */
.block-serie-images__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.block-serie-images__item {
  flex: 0 1 calc((100% - (var(--serie-images-per-row, 6) - 1) * 0.75rem) / var(--serie-images-per-row, 6));
}

.block-serie-images__item img {
  width: 100%;
  height: var(--gallery-thumb-height);
  object-fit: contain;
  border-radius: var(--radius);
}

.block-serie-images__caption {
  margin-block-start: 0.375rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Découpe : `--cutout-mask` (thumb de l'image, posé en inline par le snippet)
   masque un aplat par-dessus l'image, effacé au survol. */
.block-serie-images__frame {
  position: relative;
}

.block-serie-images__cutout {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  /* Même `contain` que l'`object-fit` de l'image : masque et photo doivent coïncider pixel à pixel. */
  -webkit-mask: var(--cutout-mask) center / contain no-repeat;
  mask: var(--cutout-mask) center / contain no-repeat;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.block-serie-images__item:hover .block-serie-images__cutout,
.block-serie-images__item:focus-within .block-serie-images__cutout {
  opacity: 0;
}

/* Tactile : sans hover, la silhouette cacherait l'image définitivement. */
@media (hover: none) {
  .block-serie-images__cutout {
    display: none;
  }
}

/* —— Bloc Slider. Scroll-snap utilisable sans JS ; `.block-slider__controls` est
   injecté par le script inline du snippet. `--slider-control-bg` : token OPTIONNEL,
   défaut au point de peinture. */
.block-slider {
  position: relative;
  margin-block: var(--space-block);
}

.block-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin; /* affordance de défilement conservée sans JS */
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius);
}

.block-slider__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* `cover` : le snippet impose 16/9 à l'image ; sans recadrage un portrait est étiré. */
.block-slider__slide img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* `--slider-caption-scrim` : token OPTIONNEL qui doit ASSOMBRIR — pas de repli sur
   `--color-overlay-on-dark`, qui éclaircit (texte blanc invisible sur photo claire). */
.block-slider__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  /* En mode plein, `picture` est en absolute et passerait au-dessus. */
  z-index: 1;
  padding-block: calc(var(--space-block) * 2) var(--space-block);
  padding-inline: var(--container-padding);
  background: linear-gradient(
    to top,
    var(--slider-caption-scrim, color-mix(in srgb, var(--color-black) 72%, transparent)),
    transparent
  );
  color: var(--color-white);
}

.block-slider__caption-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.block-slider__surtitre {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.block-slider__title {
  margin: 0;
  font-size: var(--font-size-h3);
  color: inherit;
}

.block-slider__subtitle {
  margin-block-start: var(--space-xs);
  max-width: 42rem;
  font-size: var(--font-size-base);
}

.block-slider__cta {
  margin-block-start: var(--space-block);
}

/* —— Bloc Map (OpenStreetMap). Les tuiles ne sont pas teintables (raster OSM). */
.block-map {
  margin-block: var(--space-block);
}

.block-map__frame {
  aspect-ratio: 16 / 9;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.block-map__frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

/* L'adresse en texte est l'équivalent accessible de la carte : toujours dans le
   DOM ; `masquer_adresse` la passe en `.visually-hidden`, jamais en `display: none`. */
.block-map__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: var(--space-xs);
}

.block-map__caption--muted {
  margin-block-start: 0;
}

.block-map__address {
  margin: 0;
  white-space: pre-line;
}

/* Variante `hauteur: plein`, miroir de `.hero--full` : la section porte le rythme vertical (cf. `main:has()`). */
.block-slider--full {
  margin-block: 0;
}

/* Le wrapper de layout-section ne porte pas `--full` : sa marge survivrait (collapse)
   et glisserait un liseré sous le header. Sans `:has()` : liseré, jamais de casse. */
.block.block-slider:has(> .block-slider--full) {
  margin-block: 0;
}

/* `--slider-full-offset` est MESURÉ par le script inline du snippet : un token
   constant ignore la hauteur réelle du header mobile. Sans JS, repli sur `--size-header`. */
.block-slider--full .block-slider__slide {
  min-block-size: calc(100svh - var(--slider-full-offset, var(--size-header, 0px))); /* allow-naked-px: fallback du token optionnel — calc() exige une unité, cf. .hero--full */
}

/* Dans le flux, le `<picture>` du snippet `image` imposerait sa hauteur intrinsèque
   et rendrait `min-block-size` inopérant : sorti du flux. */
.block-slider--full .block-slider__slide picture {
  position: absolute;
  inset: 0;
}

.block-slider--full .block-slider__slide img {
  block-size: 100%;
}

.block-slider--full .block-slider__track {
  border-radius: 0;
}

/* Même `--color-scrim` que `.hero__media::after` : un thème teinte les deux d'une ligne. */
.block-slider--full .block-slider__caption {
  inset: 0;
  display: grid;
  align-content: center;
  padding-block: var(--space-section-airy);
  background: var(--color-scrim, color-mix(in srgb, var(--color-black) 42%, transparent));
}

.block-slider--full .block-slider__title {
  font-size: var(--font-size-display, clamp(2rem, 4vw + 1rem, 3.5rem));
  line-height: 1.05;
  text-wrap: balance;
}

.block-slider--full .block-slider__subtitle {
  margin-block-start: var(--space-block);
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

.block-slider__controls {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-block);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  /* La bande transparente capterait le pointeur au-dessus de la piste (balayage
     tactile, CTA de légende) ; seuls les enfants réarment `pointer-events`. */
  pointer-events: none;
}

.block-slider__controls > * {
  pointer-events: auto;
}

.block-slider__arrow {
  display: grid;
  place-items: center;
  width: var(--size-control);
  height: var(--size-control);
  border: 0;
  border-radius: 50%;
  background: var(--slider-control-bg, color-mix(in srgb, var(--color-black) 55%, transparent));
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
}

.block-slider__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.block-slider__sep {
  align-self: center;
  inline-size: var(--border-width-strong);
  block-size: var(--size-control);
  background: color-mix(in srgb, var(--color-white) 45%, transparent);
  border-radius: var(--radius-pill);
  /* Décoratif : ne capte pas le pointeur (balayage tactile). */
  pointer-events: none;
}

/* Cible tactile (WCAG 2.5.8) plus large que la pastille visible de 0.6rem. */
.block-slider__dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.block-slider__dot::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: var(--border-width-strong) solid var(--color-white);
  background: none;
  transition: background var(--motion-duration-base) var(--motion-ease-standard);
}

.block-slider__dot[aria-current="true"]::before {
  background: var(--color-white);
}

.block-slider__pause {
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--slider-control-bg, color-mix(in srgb, var(--color-black) 55%, transparent));
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.block-slider__arrow:hover,
.block-slider__pause:hover {
  background: var(--color-primary);
}

.block-slider__dot:hover::before {
  background: var(--color-white);
}

/* Anneau blanc : les contrôles flottent sur une photo sombre. */
.block-slider__arrow:focus-visible,
.block-slider__dot:focus-visible,
.block-slider__pause:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-white);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 var(--focus-ring-spread) var(--color-focus-ring);
}

.video-embed iframe,
.video-embed video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}

.video-embed video {
  object-fit: contain;
  background: var(--color-bg-subtle);
}

.video-embed--free-ratio video {
  aspect-ratio: auto;
}

/* —— Bloc Audio (agency-core/snippets/blocks/audio.php) */
.audio-embed {
  margin-block: var(--space-block);
}

.audio-embed--soundcloud iframe,
.audio-embed--spotify iframe {
  width: 100%;
  height: var(--size-audio-player);
  border: 0;
  border-radius: var(--radius);
  display: block;
}

.audio-embed--link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-block);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.audio-embed--link a:hover,
.audio-embed--link a:focus-visible {
  text-decoration: none;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.audio-embed figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-xs);
}

.block-list ul,
.block-list ol {
  padding-inline-start: 1.5em;
  margin-block: 0.75em;
  line-height: 1.7;
}

.block-list li + li {
  margin-block-start: 0.25em;
}

.block-list--columns ul,
.block-list--columns ol {
  column-width: 11rem;
  column-gap: 2rem;
  list-style: none;
  padding-inline-start: 0;
}

.block-list--columns li {
  break-inside: avoid;
}

.block-line hr {
  border: none;
  border-block-start: var(--border-width) solid var(--color-border);
  margin-block: 1.5rem;
}

/* —— Bloc Tableau */
.block-table__scroll {
  margin-block: var(--space-block, 1.5rem);
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.block-table {
  /* `--table-header-bg` : token OPTIONNEL, défaut au point de peinture. */
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.block-table caption {
  padding: 0.75rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: start;
  caption-side: bottom;
}

.block-table thead {
  background: var(--table-header-bg, var(--color-bg-subtle));
}

.block-table th,
.block-table td {
  padding: 0.6rem 0.9rem;
  border-block-end: var(--border-width) solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.block-table th {
  font-weight: 600;
}

.block-table tbody tr:last-child th,
.block-table tbody tr:last-child td {
  border-block-end: none;
}

/* —— Bloc Code */
.block-code {
  margin-block: var(--space-block, 1.5rem);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background: var(--color-bg-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  tab-size: 2;
}

.block-code code {
  font-family: inherit;
}

/* —— Bloc Citation. Scopé `figure.block-quote` et non `.block-quote` : le wrapper
   de layout-section porte déjà `.block-quote`, un sélecteur nu peindrait le panneau deux fois. */
figure.block-quote {
  --quote-accent: var(--color-primary);
  position: relative;
  margin-block: var(--space-block, 1.5rem);
  padding: var(--space-block) var(--space-block) var(--space-block) calc(var(--space-block) + 1.5rem);
  background: var(--color-bg-subtle);
  /* Filet complet en plus de l'accent : le panneau reste visible chez un client où `bg-subtle` == `bg`. */
  border: var(--border-width) solid var(--color-border);
  border-inline-start: var(--border-width-accent) solid var(--quote-accent);
  border-radius: var(--radius);
}

figure.block-quote::before {
  content: "\201C" / "";
  position: absolute;
  inset-block-start: 0.05em;
  inset-inline-start: 0.5rem;
  color: var(--quote-accent);
  font-family: var(--font-family-display, inherit);
  font-size: 4rem;
  line-height: 1;
  opacity: 0.2;
  pointer-events: none;
}

.block-quote__body {
  position: relative;
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.5;
  font-style: italic;
}

.block-quote__cite {
  margin-block-start: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.block-quote__cite::before {
  content: "— ";
}

/* —— Bloc Tuiles (cards), partagé avec `children-list` en mode grille. */
.block-cards {
  /* `--card-accent` : token OPTIONNEL non déclaré ici : les `.block-cards__*`
     réutilisées hors `.block-cards` (children-list mode liste) résolvent quand
     même le défaut au point de peinture. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-block);
  margin-block: var(--space-block);
}

.block-cards__item {
  background: var(--color-surface, var(--color-bg));
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);  overflow: hidden;
}

.block-cards__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.block-cards__link:hover {
  text-decoration: none;
}
.block-cards__item:has(.block-cards__link:hover) {
  border-color: var(--card-accent, var(--color-primary));
}

.block-cards__figure {
  margin: 0;
}

.block-cards__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.block-cards__body {
  padding: 1rem;
}

.block-cards__badge {
  display: inline-block;
  margin-block-end: 0.5rem;
  padding: 0.2rem 0.6rem;
  background: var(--card-accent, var(--color-primary));
  color: var(--color-white);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.block-cards__title {
  font-size: var(--font-size-lg);
  margin: 0;
}

.block-cards__desc {
  margin-block-start: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Scopé `.children-list-zone` : le bloc `cards` manuel partage les classes et
   doit afficher titres et descriptions en entier. */
.children-list-zone .block-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.children-list-zone .block-cards__title,
.children-list-zone .block-cards__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.children-list-empty {
  margin-block: var(--space-block);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
/* —— Bloc Panneau de liens (link-panel) */
.link-panel {
  margin-block: var(--space-block);
  border-radius: var(--radius-lg);
  background: var(--link-panel-bg, var(--color-secondary));
  color: var(--link-panel-fg, var(--color-text));
}
.link-panel--bleu {
  --link-panel-bg: var(--color-secondary);
  --link-panel-fg: var(--color-text);
}
.link-panel--lavande {
  --link-panel-bg: var(--color-bg-subtle);
  --link-panel-fg: var(--color-text);
}
.link-panel--sombre {
  --link-panel-bg: var(--section-dark-bg);
  --link-panel-fg: var(--section-dark-text);
}
.link-panel__inner {
  padding: var(--space-section) var(--space-block);
}
.link-panel__title {
  margin: 0;
}
.link-panel__intro {
  margin-block: 0.5rem 0;
  max-width: 60ch;
}
.link-panel__list {
  list-style: none;
  margin-block: var(--space-block) 0;
  margin-inline: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.link-panel__link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.75rem;
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-lg);
}
.link-panel__label {
  font-weight: var(--font-weight-semibold);
}
.link-panel__label::before {
  content: "→";
  margin-inline-end: 0.5rem;
}
a.link-panel__link:hover .link-panel__label,
a.link-panel__link:focus-visible .link-panel__label {
  text-decoration: underline;
}
.link-panel__desc {
  font-size: var(--font-size-sm);
}

/* —— Bloc Bande de logos (logo-row) */
.logo-row {
  margin-block: var(--space-section);
}
.logo-row__title {
  text-align: center;
  margin-block-end: var(--space-block);
}
.logo-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-section);
}
.logo-row__link {
  display: flex;
}
.logo-row__item img {
  max-height: 3.5rem;
  width: auto;
  object-fit: contain;
}
.logo-row__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 3.5rem;
  padding-inline: 0.5rem;
  background: var(--color-bg-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.logo-row--fondre-fonds-blancs .logo-row__item img {
  mix-blend-mode: darken;
}

.logo-row--align-gauche .logo-row__list {
  justify-content: flex-start;
}
.logo-row--align-centre .logo-row__list {
  justify-content: center;
}
.logo-row--align-droite .logo-row__list {
  justify-content: flex-end;
}
.logo-row--align-justifie .logo-row__list {
  justify-content: space-between;
}

/* Défilement continu : piste dupliquée (2 `<ul>`), translatée de 0 à -50%.
   `clip` et non `hidden` : `hidden` ferait de la section un conteneur de défilement,
   qu'un focus sur un logo hors-champ désynchroniserait via scrollIntoView. */
.logo-row--defilement {
  overflow: clip;
}
/* Le `transform` animé ouvre une stacking context qui borne le `mix-blend-mode`
   des logos : la piste doit être peinte de la couleur réelle du fond pour que le
   blend opère. Piège : une section qui définit `--section-bg` sans être peinte de
   cette couleur doit aussi neutraliser la variable. */
.logo-row--fondre-fonds-blancs.logo-row--defilement .logo-row__track {
  background-color: var(--section-bg, var(--color-bg));
}
.logo-row--defilement .logo-row__track {
  display: flex;
  width: max-content;
  animation: logo-row-scroll var(--logo-row-scroll-duration, 32s) linear infinite;
}
/* Insuffisant seul pour WCAG 2.2.2 (rien au tactile) : le repli reduced-motion
   dédié en fin de fichier arrête la boucle. */
.logo-row--defilement .logo-row__track:hover,
.logo-row--defilement .logo-row__track:focus-within {
  animation-play-state: paused;
}
.logo-row--defilement .logo-row__list {
  flex-wrap: nowrap;
  gap: var(--space-section);
  padding-inline: var(--space-section) 0;
}
@keyframes logo-row-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* —— Bloc Encadré (callout) */
.callout {
  --callout-accent: var(--color-primary);
  border-inline-start: var(--border-width-accent) solid var(--callout-accent);
  background: var(--color-bg-subtle);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-block: var(--space-block, 1.5rem);
}

.callout--info { --callout-accent: var(--color-secondary, var(--color-primary)); }
.callout--tarif { --callout-accent: var(--color-primary-dark); }
.callout--important {
  --callout-accent: var(--color-danger);
  background: var(--color-warning-bg);
}
.callout--astuce {
  --callout-accent: var(--color-warning);
  background: var(--color-warning-bg);
}
.callout--succes {
  --callout-accent: var(--color-success, var(--color-primary));
  background: var(--color-success-bg, var(--color-bg-subtle));
}

.callout__title {
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.callout__body > :first-child { margin-block-start: 0; }
.callout__body > :last-child { margin-block-end: 0; }
.callout__body p + p { margin-block-start: 0.75em; }

/* —— Bloc Comparatif (BUILDER.md §7.1). Polarité posée par le snippet via
   `--color-danger`/`--color-success`, universels chez les 4 clients. Ne pas poser
   `overflow: hidden` sur `.comparison__side` : l'illustration déborde par construction.
   `--comparison-image-*` : géométrie par instance ; `inset-end` vit sur `.comparison__side`
   pour être partagée avec le texte (une custom property n'hérite pas entre frères). */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}
/* Breakpoint dédié, plus haut que les 768px du site : deux colonnes illustrées se resserrent plus vite. */
@media (max-width: 899.98px) { /* allow-naked-px: breakpoint, var() illégal en media query */
  .comparison {
    grid-template-columns: 1fr;
  }
}
.comparison__side {
  position: relative;
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
}
.comparison__side--negatif { --comparison-accent: var(--color-danger); }
.comparison__side--positif { --comparison-accent: var(--color-success); }
.comparison__header {
  background: var(--comparison-accent, var(--color-primary));
  color: var(--color-white);
  padding: var(--space-xs) var(--space-block);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
}
.comparison__title {
  margin: 0;
  font-weight: var(--font-weight-semibold, 700);
}
.comparison__points {
  padding: var(--space-block);
}
.comparison__points ul,
.comparison__points ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.comparison__points li {
  position: relative;
  padding-inline-start: 1.5em;
}
.comparison__points li::before {
  content: "–";
  position: absolute;
  inset-inline-start: 0;
  color: var(--comparison-accent, var(--color-primary));
  font-weight: 700;
}
.comparison__side--positif .comparison__points li::before {
  content: "+";
}
.comparison__image {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--comparison-image-block-start, 0);
  inset-block-end: var(--comparison-image-block-end, auto);
  inset-inline-end: var(--comparison-image-inset-end, var(--space-block));
  width: var(--comparison-image-width, 9rem); /* allow-naked-px: gabarit décoratif par défaut, aucun token dédié (même logique que .reservation-cta__img) */
  margin: 0;
  transform: var(--comparison-image-transform, translateY(-50%));
}
.comparison__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* —— États désactivés */
.btn:disabled,
.btn[aria-disabled="true"],
button:disabled,
button[type="submit"]:disabled, /* spécificité > `button[type="submit"]`, sinon le fond primary l'emporte */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-disabled-bg, var(--color-bg-subtle));
  color: var(--color-disabled-text, var(--color-text-muted));
  border-color: var(--color-disabled-bg, var(--color-border));
  cursor: not-allowed;
}

/* —— Bloc Accordéon (details/summary natif) */
.accordion {
  /* `--accordion-accent` / `--accordion-header-bg` : tokens OPTIONNELS, défaut au point de peinture. */
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: var(--space-block, 1.5rem);
}

.accordion__item + .accordion__item {
  border-block-start: var(--border-width) solid var(--color-border);
}

.accordion__title {
  cursor: pointer;
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  background: var(--accordion-header-bg, var(--color-bg-subtle));
}

.accordion__title:hover {
  color: var(--accordion-accent, var(--color-primary));
}

.accordion__body {
  padding: 0.5rem 1.25rem 1.25rem;
}

.accordion__body > :first-child { margin-block-start: 0; }
.accordion__body > :last-child { margin-block-end: 0; }
.accordion__body p + p { margin-block-start: 0.75em; }

/* KirbyText : rend aux listes l'indentation que le reset global retire. */
.accordion__body ul,
.accordion__body ol {
  padding-inline-start: 1.5em;
  margin-block: 0.75em;
}

/* —— Pastilles de filtre : base partagée par section-filter (ADR-030),
   children-filter (ADR-031) et language-selector. Roots sans `.block-*` (réservés
   aux wrappers de layout-section). Accent actif via tokens locaux distincts
   (`--<root>-active[-text]`), défaut au point de peinture. */
/* Pas `.language-selector` : son snippet l'enveloppe déjà dans une `.layout-section`
   dont le padding porte le rythme. */
.section-filter,
.children-filter {
  margin-block: var(--space-block, 1.5rem);
}

.section-filter__list,
.children-filter__list,
.language-selector__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-filter__pill,
.children-filter__pill,
.language-selector__pill {
  display: inline-block;
  border: var(--border-width-strong, var(--border-width)) solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.1rem;
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
}

/* `[aria-current]` APRÈS `:hover` : à spécificité égale, l'ordre source garde la pastille active pleine au survol. */
.section-filter__pill:hover,
.section-filter__pill:focus-visible {
  color: var(--section-filter-active, var(--color-primary));
  border-color: var(--section-filter-active, var(--color-primary));
}

.section-filter__pill[aria-current="true"] {
  background: var(--section-filter-active, var(--color-primary));
  border-color: var(--section-filter-active, var(--color-primary));
  color: var(--section-filter-active-text, var(--color-white));
}

.children-filter__pill:hover,
.children-filter__pill:focus-visible {
  color: var(--children-filter-active, var(--color-primary));
  border-color: var(--children-filter-active, var(--color-primary));
}

.children-filter__pill[aria-current="true"] {
  background: var(--children-filter-active, var(--color-primary));
  border-color: var(--children-filter-active, var(--color-primary));
  color: var(--children-filter-active-text, var(--color-white));
}

.language-selector__pill:hover,
.language-selector__pill:focus-visible {
  color: var(--language-selector-active, var(--color-primary));
  border-color: var(--language-selector-active, var(--color-primary));
}

.language-selector__pill[aria-current="page"] {
  background: var(--language-selector-active, var(--color-primary));
  border-color: var(--language-selector-active, var(--color-primary));
  color: var(--language-selector-active-text, var(--color-white));
}

/* —— Bloc Onglets (tabs). Root `.tabs`, pas `.block-tabs` (wrapper de layout-section).
   `data-mode="tabs"` est posé par le JS de blocks/tabs.php à partir de 768px ; sans
   lui, sections empilées. `--tabs-accent` : token OPTIONNEL, défaut au point de peinture. */
.tabs {
  margin-block: var(--space-block, 1.5rem);
}
.tabs__panel[hidden],
.tabs__label[hidden] { display: none; }
.tabs__label {
  font-size: var(--font-size-lg);
  margin-block: 0 0.5rem;
}
.tabs__panel > :first-child { margin-block-start: 0; }
.tabs__panel > :last-child { margin-block-end: 0; }
.tabs__panel p + p { margin-block-start: 0.75em; }

.tabs:not([data-mode]) .tabs__section + .tabs__section {
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: var(--border-width) solid var(--color-border);
}

.tabs__tablist {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  overflow-x: auto;
  border-block-end: var(--border-width) solid var(--color-border);
  margin-block-end: 1.25rem;
}
.tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.75rem 1.1rem;
  min-height: 48px; /* allow-naked-px: cible tactile ≥48px (WCAG 2.5.5), non tokenisée */
  white-space: nowrap;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text-muted);
  box-shadow: inset 0 calc(-1 * var(--border-width-accent)) 0 transparent;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
/* Survol neutre, pas l'accent : un onglet survolé resterait indistinguable de l'actif. */
.tabs__tab:hover {
  color: var(--color-text);
}
/* Actif = couleur + graisse + soulignement, jamais la couleur seule (WCAG). */
.tabs__tab[aria-selected="true"] {
  color: var(--tabs-accent, var(--color-primary));
  font-weight: 600;
  box-shadow: inset 0 calc(-1 * var(--border-width-accent)) 0
    var(--tabs-accent, var(--color-primary));
}

/* —— Bloc Étapes (steps) */
.steps {
  /* `--steps-accent` : token OPTIONNEL, défaut au point de peinture. */
  list-style: none;
  counter-reset: steps-counter;
  display: grid;
  gap: 1.25rem;
  padding: 0;
  margin-block: var(--space-block, 1.5rem);
}

.steps__step {
  position: relative;
}

.steps--numbered {
  padding-inline-start: 2.75rem;
}

.steps--numbered .steps__step {
  counter-increment: steps-counter;
}

.steps--numbered .steps__step::before {
  content: counter(steps-counter);
  position: absolute;
  inset-inline-start: -2.75rem;
  inset-block-start: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--steps-accent, var(--color-primary));
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.steps__title {
  font-weight: 600;
  margin-block-end: 0.25rem;
}

.steps__body > :first-child { margin-block-start: 0; }
.steps__body > :last-child { margin-block-end: 0; }

.block-button {
  margin-block: 1rem;
}
.block-button--start { text-align: start; }
.block-button--center { text-align: center; }
.block-button--end { text-align: end; }

.btn,
button[type="submit"] {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  cursor: pointer;
  text-decoration: none;
  border: var(--border-width-strong) solid var(--color-primary);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary,
button[type="submit"] {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover,
button[type="submit"]:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Bloc `children-list` en mode liste (le mode grille émet `.block-cards`).
   `auto-fit` : une liste d'une carte s'étire sur toute la largeur, voulu ici (cf. `auto-fill` plus bas).
   `min(100%, …)` : sans lui une carte plus large que le viewport déborde avant la @media 1fr. */
.children-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-card-min)), 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.event-card {
  background: var(--color-surface, var(--color-bg));
  border: var(--border-width) solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--radius);}

.event-card time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.event-card-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}

.event-card-time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.event-card-description {
  margin-top: var(--space-xs);
}

.event-location,
.event-time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.event-details {
  background: var(--color-bg-subtle);
  padding: 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.event-details p {
  margin-bottom: 0.5rem;
}

.event-full {
  padding: 1rem;
  background: var(--color-warning-bg);
  border: var(--border-width) solid var(--color-warning);
  border-radius: var(--radius);
  margin-top: 2rem;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-full {
  background: var(--color-danger);
  color: var(--color-white);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1rem;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.subpages {
  margin-top: 2rem;
}

.subpages ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.subpages li a {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--color-surface, var(--color-bg));
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}

.subpages li a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-card {
  background: var(--color-surface, var(--color-bg));
  border: var(--border-width) solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--radius);}

.page-card h2 {
  font-size: var(--font-size-lg);
  margin: 0;
}

/* `auto-fill` et non `auto-fit` : un listing filtré à un résultat garde le gabarit
   d'une carte au lieu de s'étirer en bannière. */
.children-list:has(.article-card) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--size-card-min)), 1fr));
  gap: 2rem;
}

/* Même correctif `auto-fill` que les cartes d'article. */
.children-list:has(.event-card) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--size-card-min)), 1fr));
}

.article-card {
  background: var(--color-surface, var(--color-bg));
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);  overflow: hidden;
}

.article-card img {
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
}

.article-card h2,
.article-card time {
  padding: 0 1rem;
}

.article-card h2 {
  font-size: var(--font-size-lg);
  padding-top: 1rem;
}

.article-card time {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding-bottom: 1rem;
}

/* —— Page article (snippet socle `page-article`). Même `--color-scrim` que le hero
   et le slider plein. Distinct des `.article__*` du thème secomprendre. */
.article-page {
  display: flex;
  flex-direction: column;
}

.article-cover {
  --article-cover-min: auto;
  position: relative;
  display: grid;
  /* Ancré en bas, pas centré comme le hero : le sujet d'une couverture vit au milieu du cadre. */
  align-content: end;
  min-height: var(--article-cover-min);
  padding-block: var(--space-section-standard);
  padding-inline: var(--container-padding);
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.article-cover--media {
  --article-cover-min: min(58vh, 32rem);
  padding-block-start: var(--space-section-airy);
  color: var(--color-white);
}

.article-cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.article-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-cover__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-scrim, color-mix(in srgb, var(--color-black) 42%, transparent));
}

.article-cover__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.article-cover__back {
  display: inline-block;
  margin-block-end: var(--space-block);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
}

.article-cover__back:hover,
.article-cover__back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.article-cover__title {
  margin: 0;
  font-size: var(--font-size-h1);
  line-height: 1.1;
  text-wrap: balance;
  color: inherit;
}

.article-cover__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-block);
  margin-block-start: var(--space-block);
}

.article-cover__meta .tags {
  margin-block: 0;
}

.article-cover__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.85;
}

/* Sur photo, la puce claire du socle perd tout contraste : contour translucide. */
.article-cover--media .tag {
  background: var(--color-overlay-light);
  border: var(--border-width) solid color-mix(in srgb, var(--color-white) 55%, transparent);
  color: var(--color-white);
}

.article-cover--media a.tag:hover,
.article-cover--media a.tag:focus-visible {
  background: var(--color-white);
  color: var(--color-text);
}

.article__body {
  width: 100%;
  max-width: min(100%, 44rem);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: var(--space-section-standard);
}

/* Filet sur le conteneur, pas sur chaque lien : un article sans précédent n'a
   qu'un lien, et un filet sur lui ne barrerait que la moitié droite. */
.article-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-block);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: var(--space-block) var(--space-section-standard);
  border-block-start: var(--border-width-strong) solid var(--color-border);
}

.article-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-text);
}

/* Sans précédent, « Suivant » reste à droite. */
.article-pager__link--next {
  grid-column: 2;
  text-align: end;
}

.article-pager__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.article-pager__title {
  font-size: var(--font-size-lg);
  line-height: 1.3;
}

.article-pager__link:hover .article-pager__title,
.article-pager__link:focus-visible .article-pager__title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article-related {
  background: var(--color-bg-subtle);
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-section-standard);
  padding-inline: var(--container-padding);
}

.article-related__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.article-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-block);
  margin-block-end: var(--space-block);
}

.article-related__head h2 {
  margin: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--border-width) solid var(--color-border);
}

.pagination ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.pagination .active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.event-form form {
  max-width: 37.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--color-surface, var(--color-white));
  color: var(--color-text);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-family: inherit;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--color-text-muted);
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--color-primary);
}

textarea {
  min-height: 7.5rem;
  resize: vertical;
}

label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

/* DreamForm rend `<input><label>` nus : la règle `label` ci-dessus les passe en
   `display: block`, donc SOUS la case. Le `<div>` commun est le seul repère stable
   sans classe ; en flex, le libellé revient à côté quel que soit son `display`. Composant partagé : ADR-006. */
.block-form div:has(> input[type="checkbox"]),
.block-form div:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* —— Bloc Formulaire (bridge DreamForm) : rythme et grille ici, l'apparence reste au
   thème. DreamForm pose `grid-template-columns` en style inline, d'où `[style*=…]` et `!important`. */
.block-form form > div + div {
  margin-block-start: var(--space-block);
}
/* Conteneur de requête : l'empilement dépend de la largeur du FORMULAIRE (288px dans
   une colonne 1/2 à 768px), pas du viewport. Jamais `contain: layout` (il ferait de
   `.block-form` le bloc conteneur du honeypot `position: absolute` de DreamForm) ni
   `container-type: size` (contiendrait la hauteur) ; `inline-size` n'établit pas de
   bloc conteneur sur les trois moteurs — figé par tests/Unit/Core/BlockFormContainerTest.php. */
.block-form {
  container-type: inline-size;
}

/* La grille DreamForm a DOUZE pistes : un `gap` uniforme coûte onze fois sa valeur
   (2rem ⇒ 352px, plus qu'une colonne de 288px), d'où le plafond en %.
   `minmax(0, …)` : le min-content d'un `<input>` (~160px) réimposerait sa largeur. */
.block-form form [style*="grid-template-columns"] {
  column-gap: min(var(--grid-gap), 4%);
  row-gap: var(--grid-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* `min-width: auto` de l'item : l'`<input>` réimposerait sa largeur intrinsèque. */
.block-form form [style*="grid-template-columns"] > * {
  min-inline-size: 0;
}

/* Sous ~28rem de formulaire, prénom/nom à 138px sont illisibles. */
@container (max-width: 28rem) {
  .block-form form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* —— Champ `section` DreamForm (`Agency\Bridge\Dreamform\Fields\SectionField`, sans valeur) */
.dreamform-section {
  padding-block-end: var(--space-xs);
  border-block-end: var(--border-width) solid var(--color-border);
}

.dreamform-section__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.block-form form > div + div:has(.dreamform-section) {
  margin-block-start: var(--space-section);
}

/* —— Erreurs DreamForm : `aria-invalid` posé par les snippets de champ, message dans
   `[data-error]`. DreamForm émet aussi `aria-invalid=""` sur un champ fautif, d'où
   `:not([aria-invalid="false"])` plutôt que `="true"`. */
input[aria-invalid]:not([aria-invalid="false"]),
textarea[aria-invalid]:not([aria-invalid="false"]),
select[aria-invalid]:not([aria-invalid="false"]) {
  border-color: var(--color-danger);
}
input[aria-invalid]:not([aria-invalid="false"]):focus-visible,
textarea[aria-invalid]:not([aria-invalid="false"]):focus-visible,
select[aria-invalid]:not([aria-invalid="false"]):focus-visible {
  outline-color: var(--color-danger);
  border-color: var(--color-danger);
}

/* DreamForm peut rendre un `[data-error]` vide (`hideEmptyErrors` off). */
[data-error]:not(:empty) {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.error-page {
  text-align: center;
  padding: 6rem 2rem;
}

.error-code {
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.15;
  margin-bottom: 0.5rem;
}

.error-page h1 {
  font-size: var(--font-size-h1);
  margin-bottom: 1rem;
}

.error-message {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-bottom: 2rem;
}

@media (max-width: 767.98px) { /* allow-naked-px: breakpoint, var() illégal en media query */
  /* Le header mobile tient sur une rangée [logo] … [CTA] [burger] : aux valeurs
     bureau elle réclame 367px pour 311px disponibles à 375px de large. */
  header {
    padding-inline: 1rem;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .logo {
    margin-inline-end: auto;
  }

  .header-actions {
    order: 2;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .header-cta {
    padding-inline: 0.75rem;
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }

  .nav-toggle {
    display: block;
    order: 3;
    flex: 0 0 auto;
  }

  nav[role="navigation"] {
    display: none;
    width: 100%;
    order: 4;
  }

  /* Bornée et défilable : un long menu à sous-menus dépasse l'écran dans un header sticky. */
  nav[role="navigation"].nav-open {
    display: block;
    max-block-size: 65svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block-start: var(--space-xs);
    padding-block-end: var(--space-xs);
  }

  nav[role="navigation"] ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Liste indentée plutôt que calque : son aplat dessinait un rectangle dans le panneau. */
  nav[role="navigation"] ul ul {
    position: static;
    border: none;
    background: none;
    min-width: 0;
    padding: 0;
    padding-inline-start: 1rem;
    display: flex;
  }

  main {
    padding-block: 1rem;
  }

  .children-list {
    grid-template-columns: 1fr;
  }

  .article-pager {
    grid-template-columns: 1fr;
  }

  .article-pager__link--next {
    grid-column: 1;
  }

  /* `!important` : neutralise le `grid-template-columns` inline de DreamForm. */
  .block-form form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .block-form button[type="submit"] {
    width: 100%;
  }

  .error-code {
    font-size: 5rem;
  }

  .error-page {
    padding: 3rem 1rem;
  }

  h1 { font-size: var(--font-size-h2); }
  h2 { font-size: var(--font-size-h3); }
}

html { scroll-behavior: smooth; }
} /* end @layer blocks */

/* Overrides responsive de tokens, dans `@layer tokens` : brand.css les surcharge
   par `@layer brand { @media … { :root { … } } }`. */
@layer tokens {
  @media (max-width: 767.98px) { /* allow-naked-px: breakpoint, var() illégal en media query */
    :root {
      --grid-gap: 1.5rem;
      --container-padding: 1rem;
      /* `--space-section` (consommé par des thèmes) reste volontairement inchangé. */
      --space-section-standard: 2rem;
      --space-section-airy: 3rem;
    }
  }
}

/* —— Print + reduced-motion, UNLAYERED : un `header { display: flex }` en
   @layer brand ne doit pas battre `@media print`. */
@media print {
  .layout-row {
    display: block;
  }

  .layout-column {
    width: 100% !important;
    margin-block-end: 1rem;
  }

  .layout-section {
    background: none !important;
    color: var(--color-black) !important;
    padding-block: 0.5rem;
  }

  .block-video,
  .video-embed {
    display: none;
  }

  .block-image img {
    break-inside: avoid;
    max-height: 25rem;
    object-fit: contain;
  }

  header, footer, nav {
    display: none;
  }
}

/* —— Lightbox socle (assets/shared/js/lightbox.js) : markup construit par le JS,
   fermée via l'attribut `hidden`. */
.has-lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-block, 1.5rem);
  background: color-mix(in srgb, var(--color-text) 92%, transparent);
  animation: lightbox-fade 0.2s ease;
}

.lightbox[hidden] {
  display: none;
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  max-height: 100%;
}

.lightbox__img {
  display: block;
  max-width: min(92vw, 1400px); /* allow-naked-px: plafond de largeur d'image, pas de token « longueur max » */
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox__caption {
  color: var(--color-surface, #fff); /* allow-naked-px: fallback #fff du token optionnel (texte sur scrim sombre) */
  font-size: var(--font-size-sm);
  text-align: center;
  max-width: 60ch;
}

.lightbox__counter {
  position: absolute;
  inset-block-start: var(--space-block, 1.5rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--color-surface, #fff); /* allow-naked-px: fallback #fff du token optionnel (compteur sur scrim sombre) */
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

/* Cibles ≥ 44px (WCAG 2.5.5), fond translucide lisible sur toute image. */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; /* allow-naked-px: cible tactile ≥44px (WCAG 2.5.5), non tokenisée */
  min-height: 44px; /* allow-naked-px: cible tactile ≥44px (WCAG 2.5.5) */
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 999px); /* allow-naked-px: fallback pilule du token optionnel */
  background: color-mix(in srgb, var(--color-surface, #fff) 18%, transparent); /* allow-naked-px: fallback #fff du token optionnel */
  color: var(--color-surface, #fff); /* allow-naked-px: fallback #fff du token optionnel */
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  background: color-mix(in srgb, var(--color-surface, #fff) 32%, transparent); /* allow-naked-px: fallback #fff du token optionnel */
  outline: 2px solid var(--color-surface, #fff); /* allow-naked-px: anneau de focus a11y + fallback #fff */
  outline-offset: 2px; /* allow-naked-px: décalage de l'anneau de focus */
}

.lightbox__close[hidden],
.lightbox__nav[hidden] {
  display: none;
}

.lightbox__close {
  inset-block-start: var(--space-block, 1.5rem);
  inset-inline-end: var(--space-block, 1.5rem);
}

.lightbox__nav {
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
}

.lightbox__nav--prev { inset-inline-start: var(--space-block, 1.5rem); }
.lightbox__nav--next { inset-inline-end: var(--space-block, 1.5rem); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Repli dédié `logo-row` : la règle générique écrase `animation-duration` mais pas
   `animation-iteration-count` — une boucle `infinite` tournerait à vide (jitter).
   On coupe net et on retire le fond de piste du blend : plus de stacking context à compenser. */
@media (prefers-reduced-motion: reduce) {
  .logo-row--defilement {
    overflow: visible;
  }
  .logo-row--defilement .logo-row__track {
    animation: none;
    width: auto;
  }
  .logo-row--fondre-fonds-blancs.logo-row--defilement .logo-row__track {
    background-color: transparent;
  }
  .logo-row--defilement .logo-row__list[inert] {
    display: none;
  }
  .logo-row--defilement .logo-row__list {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 0;
  }
}