/* ═══════════════════════════════════════════════════════════════════
   LIÈGE INSIDE — releve-skin.css
   Direction artistique « Relevé » (REL.2026)
   Chargé APRÈS site.css / menu.css — surimprime sans supprimer.

   Deux thèmes :
     [data-theme="light"]  → PAPIER (défaut, posé par chrome.php)
     :root (sans attribut) → NUIT   (sélectionné via le bouton thème)
   ═══════════════════════════════════════════════════════════════════ */

/* Polices (Archivo + IBM Plex Mono) chargées via le <link> de lib/chrome.php
   (font_url par défaut) — pas d'@import ici pour éviter un chargement bloquant. */


/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --rel-paper:      #ECEDEA;
  --rel-paper-dim:  #DCDDD9;
  --rel-ink:        #15171A;
  --rel-ink-soft:   #7A7D76;
  --rel-rule:       #C8CAC4;
  --rel-accent:     #FF4D00;
  --rel-display:    'Archivo', sans-serif;
  --rel-mono:       'IBM Plex Mono', monospace;
}


/* ═══════════════════════════════════════════════════════════════════
   2. PALETTES
   --rel-line-strong : filets majeurs (cadres, en-têtes)
   --rel-line-soft   : filets internes (séparateurs)
   Les couleurs de texte (--text-*) basculent par thème ; l'orange reste
   constant dans les deux.
   ═══════════════════════════════════════════════════════════════════ */

/* ── NUIT (défaut quand data-theme n'est pas "light") ── */
:root {
  --bg:             #18181B;
  --surface:        var(--bg);   /* fond uniforme : cartes = page */
  --surface-2:      var(--bg);
  --rel-plan:       var(--bg);   /* pas de plan contrasté */
  --card-hover-bg:  #242428;     /* survol : un cran plus clair */

  --rel-line-strong: rgba(236, 237, 234, 0.32);
  --rel-line-soft:   rgba(236, 237, 234, 0.12);
  --border:          rgba(236, 237, 234, 0.14);
  --border-warm:     rgba(236, 237, 234, 0.24);

  --ochre:          var(--rel-accent);
  --ochre-dim:      #FF6A2B;
  --ochre-faint:    rgba(255, 77, 0, 0.10);
  --ochre-hover:    rgba(255, 77, 0, 0.18);
  --accent:         var(--rel-accent);
  --accent-soft:    rgba(255, 77, 0, 0.14);
  --accent-ink:     #18181B;
  --crystal:        #9A9D96;

  --text-primary:   #ECEDEA;
  --text-secondary: #B2B4AE;
  --text-muted:     #7C7E77;

  --card-grad-strong: rgba(24, 24, 27, 0.94);
  --card-grad-mid:    rgba(24, 24, 27, 0.64);
  --card-grad-soft:   rgba(24, 24, 27, 0.26);
  --card-grad-faint:  rgba(24, 24, 27, 0.06);

  --img-filter:            brightness(0.92) saturate(0.82);
  --img-filter-hover:      brightness(1.04) saturate(0.98);
  --img-filter-hero:       brightness(0.92) saturate(0.80);
  --img-filter-card:       brightness(0.90) saturate(0.82);
  --img-filter-card-hover: brightness(1.04) saturate(0.96);

  --photo-saturate:   0.85;
  --photo-sepia:      0;
  --photo-brightness: 0.92;
  --card-shadow:      none;
  --card-hover-border: var(--rel-line-strong);

  --hero-photo-sat:    0.82;
  --hero-photo-sep:    0;
  --hero-photo-bright: 0.92;

  --serif-display:  var(--rel-display);
  --serif-body:     var(--rel-display);   /* corps en Archivo 400 — tout est Archivo + IBM Plex Mono */
  --mono:           var(--rel-mono);
}

/* ── PAPIER (thème par défaut posé par chrome.php) ── */
[data-theme="light"] {
  --bg:             var(--rel-paper);
  --surface:        var(--bg);   /* fond uniforme : cartes = page */
  --surface-2:      var(--bg);
  --rel-plan:       var(--bg);   /* pas de plan contrasté */
  --card-hover-bg:  #F5F5F3;     /* survol : un cran plus clair */

  --rel-line-strong: var(--rel-ink);
  --rel-line-soft:   var(--rel-rule);
  --border:          rgba(21, 23, 26, 0.16);
  --border-warm:     rgba(21, 23, 26, 0.26);

  --ochre:          var(--rel-accent);
  --ochre-dim:      #CC3D00;
  --ochre-faint:    rgba(255, 77, 0, 0.07);
  --ochre-hover:    rgba(255, 77, 0, 0.12);
  --accent:         var(--rel-accent);
  --accent-soft:    rgba(255, 77, 0, 0.07);
  --accent-ink:     var(--rel-paper);
  --crystal:        var(--rel-ink-soft);

  --text-primary:   var(--rel-ink);
  --text-secondary: #2C2F2C;
  --text-muted:     var(--rel-ink-soft);

  --card-grad-strong: rgba(236, 237, 234, 0.93);
  --card-grad-mid:    rgba(236, 237, 234, 0.64);
  --card-grad-soft:   rgba(236, 237, 234, 0.26);
  --card-grad-faint:  rgba(236, 237, 234, 0.06);

  --img-filter:            brightness(0.86) saturate(0.70);
  --img-filter-hover:      brightness(1.00) saturate(0.92);
  --img-filter-hero:       brightness(0.82) saturate(0.66);
  --img-filter-card:       brightness(0.84) saturate(0.70);
  --img-filter-card-hover: brightness(1.00) saturate(0.90);

  --photo-saturate:   0.70;
  --photo-sepia:      0;
  --photo-brightness: 0.86;
  --card-shadow:      none;
  --card-hover-border: var(--rel-line-strong);

  --hero-photo-sat:    0.66;
  --hero-photo-sep:    0;
  --hero-photo-bright: 0.84;
}


/* ═══════════════════════════════════════════════════════════════════
   3. BASE
   ═══════════════════════════════════════════════════════════════════ */

/* Règle absolue du relevé : aucun arrondi (exceptions ré-autorisées
   localement avec une spécificité supérieure, ex. le réticule). */
* { border-radius: 0 !important; }

:focus-visible {
  outline: 2px solid var(--rel-accent);
  outline-offset: 2px;
}

/* Largeur contenue et centrée, mais fond uniforme : pas de cadre de zone,
   pas de plan contrasté — la structure vient des filets de la planche. */
html { background: var(--bg); }
body {
  font-family: var(--rel-mono);
  max-width: 1440px;
  margin-inline: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   4. HEADER — barre fine, logo mono + REL.2026
   ═══════════════════════════════════════════════════════════════════ */
header {
  background: var(--bg);
  /* Padding-x exposé en variable, lu par header::after dans site.css pour
     que la ligne du bas s'arrête à la même verticale que la ligne du haut
     (pas de débordement gauche/droite). */
  --header-pad-x: 48px;
  padding: 16px var(--header-pad-x) 14px;
}
/* Réactive le ::after défini dans site.css mais avec la teinte du skin :
   couleur identique à `.header-rule` (la ligne du haut) → cohérence. */
header::after { display: block; background: var(--rel-line-soft); }

/* Logo réduit en étiquette mono ; le gros titre vit dans le hero. */
header h1,
.site-title {
  font-family: var(--rel-mono);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-primary);
}
header h1 span,
.site-title span { color: inherit; font-style: normal; }
header h1::after,
.site-title::after {
  content: ' · REL.2026';
  color: var(--rel-accent);
  font-weight: 500;
}

.header-rule { background: var(--rel-line-soft); height: 1px; margin-bottom: 10px; }

.header-meta { gap: 16px; }

.header-museum {
  font-family: var(--rel-mono);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  font-variant: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#header-subtitle,
.header-stats {
  font-family: var(--rel-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.10em;
}

/* Fil d'Ariane court dans le header (page lieu) — collé à droite. */
.header-trail {
  margin-left: auto;
  font-family: var(--rel-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-trail a { color: var(--text-muted); text-decoration: none; }
.header-trail a:hover { color: var(--rel-accent); }
.header-trail-sep { color: var(--rel-line-strong); }
.header-trail-id { color: var(--rel-accent); }

#lang-btn, #theme-btn {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--rel-line-strong);
  padding: 4px 12px;
}
#lang-btn:hover, #theme-btn:hover {
  border-color: var(--rel-accent);
  color: var(--rel-accent);
  background: transparent;
}
/* Le bouton thème porte une icône (pas du texte) : on cale sa hauteur sur
   celle des autres en réduisant le SVG, sinon il déborde de 3px. */
#theme-btn svg { width: 11px; height: 11px; }
/* Burger : barres ocre (cohérent avec la touche relevé) — la version
   par défaut dans menu.css est déjà ocre, ce skin la reconduit pour
   éviter une retombée à --text-primary via cascade ancienne. */
#li-burger span { background: var(--rel-accent); }
#li-burger:hover span,
#li-burger:focus-visible span { background: var(--ochre-dim); }


/* ═══════════════════════════════════════════════════════════════════
   5. HERO HOME (#rel-hero)
   Titre géant + cartouche de métadonnées + bandeau spécimen.
   ═══════════════════════════════════════════════════════════════════ */
#rel-hero {
  background: var(--bg);
  padding: 36px 48px 0;
  /* Zoom du défilé panoramique : 1 = un pano pile sur la largeur du cadre ;
     <1 dézoome (on voit un peu plus loin que 360°, raccord continu) ; >1
     zoome. Posé ici pour que le pano ET la règle azimutale en héritent. */
  --hero-zoom: 0.8;
  /* Période d'un tour complet (360°) et phase de départ : 0.875 tour →
     au chargement, le bord gauche du cadre tombe sur 315° (= −45°), donc
     le pano démarre centré (pas de 0° collé au bord). */
  --hero-pan-period: 80s;
  --hero-pan-phase: 0.875;
}

.rel-hero-top {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 22px;
}

.rel-hero-title {
  font-family: var(--rel-display);
  font-weight: 800;
  font-size: clamp(46px, 9.5vw, 124px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* Colonne droite : meta (mono) en haut, nom du spécimen (accent) en bas,
   aligné sur la base du grand titre « LIÈGE INSIDE ». */
.rel-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  text-align: right;
}

.rel-hero-meta {
  font-family: var(--rel-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: right;
  padding-top: 10px;
  flex-shrink: 0;
  /* Exactement 2 lignes : nowrap empêche les libellés seo longs de wrap,
     le <br> seul commande le passage à la ligne (phrase / spécimen). */
  white-space: nowrap;
}
.rel-hero-meta-em { color: var(--text-secondary); }

/* Nom du spécimen tiré au hasard — gros titre accent, cliquable. */
.rel-hero-spec {
  display: block;
  text-decoration: none;
  text-align: right;
  min-width: 0;
  /* Remonte le bloc de 7px pour aligner sa base sur le bas optique de
     « LIÈGE INSIDE » (justify-content: space-between le colle en bas). */
  margin-bottom: 7px;
  /* Largeur plafonnée, découplée de la ligne meta (nowrap, large) : le nom
     se replie sur 2 lignes plus tôt, sans coller au titre « LIÈGE INSIDE ».
     Le plancher suit le plus long mot insécable (« Philharmonique » ≈ 50vw
     du font) pour qu'aucun nom ne déborde de la boîte ; les noms moyens
     (« Gare des Guillemins ») passent quand même à 2 lignes. */
  max-width: clamp(340px, 50vw, 640px);
}
.rel-hero-spec-name {
  display: block;
  font-family: var(--rel-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--rel-accent);
}
.rel-hero-spec-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--rel-display);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 21px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--rel-accent);
}
.rel-hero-spec:hover .rel-hero-spec-name,
.rel-hero-spec:hover .rel-hero-spec-sub { color: var(--rel-accent-dim, #FF6A2B); }

/* Bandeau spécimen — cadre instrument cliquable */
.rel-hero-frame {
  display: block;
  position: relative;
  --rel-hero-h: clamp(190px, 30vw, 360px);
  height: var(--rel-hero-h);
  border: 1px solid var(--rel-line-strong);
  overflow: hidden;
  background: var(--surface-2);
  text-decoration: none;
}
/* Défilé panoramique : trois panneaux identiques côte à côte, chacun = un
   pano complet large de --hero-zoom × la largeur du cadre. La piste
   translate d'exactement un panneau (-1/3) puis reboucle : le panneau
   sorti à gauche « revient » par la droite (copies identiques → raccord
   360°|0° continu, jamais besoin d'une 4e copie).
   Départ CENTRÉ par déphasage : l'animation-delay négatif démarre la
   boucle à --hero-pan-phase tour, donc la vue s'ouvre sur un −x° (pano
   centré) sans décaler la piste ni ajouter de panneau. */
.rel-hero-pan {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  width: calc(var(--hero-zoom) * 300%);
  /* Position de repli (reduced-motion / anim coupée) = même vue centrée. */
  transform: translate3d(calc(var(--hero-pan-phase) * -100% / 3), 0, 0);
  animation: rel-hero-pan var(--hero-pan-period) linear infinite;
  animation-delay: calc(var(--hero-pan-period) * -1 * var(--hero-pan-phase));
  will-change: transform;
}
.rel-hero-slide {
  flex: 0 0 calc(100% / 3);
  height: 100%;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;                 /* mobile : remplit le cadre */
}
@media (min-width: 701px) {
  .rel-hero-slide {
    background-image: var(--hero-img-hd);
    background-size: 100% auto;           /* desktop : un pano plein panneau, haut/bas rognés */
  }
}
/* Mobile : le cadre est plus haut que 2:1 → on fige sur une seule image
   plein cadre (pas de couture possible, et plus sobre pour la batterie). */
@media (max-width: 700px) {
  .rel-hero-pan { width: 100%; transform: none; animation: none; }
  .rel-hero-slide { flex-basis: 100%; }
  .rel-hero-slide:not(:first-child) { display: none; }
}
@keyframes rel-hero-pan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / 3), 0, 0); }
}
/* Au survol/focus : le défilé se fige pour laisser observer le lieu.
   Aucune réaction de luminosité/couleur — le hero reste rayonnant. */
.rel-hero-frame:hover .rel-hero-pan,
.rel-hero-frame:focus-visible .rel-hero-pan { animation-play-state: paused; }

/* Prise en main par la RÈGLE (et non le pano, qui reste un lien cliquable).
   Le JS ajoute .rel-hero-grab à la règle quand il reprend le défilé
   (desktop, mouvement autorisé) : on attrape la règle comme un cadran et on
   tourne — le pano suit, synchrone, 1:1 (la graduation reste sous le doigt).
   pointer-events: auto réactive la règle (neutre par défaut) ; touch-action
   pan-y laisse passer le scroll vertical, on ne capte que l'horizontale ;
   user-select coupe la sélection des libellés au drag. */
.rel-hero-ruler.rel-hero-grab {
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.rel-hero-ruler.rel-hero-grab.is-grabbing { cursor: grabbing; }

/* Repères de coin (⌐) accent */
.rel-hero-frame::before,
.rel-hero-frame::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 4;
  pointer-events: none;
}
.rel-hero-frame::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--rel-accent);
  border-left: 1px solid var(--rel-accent);
}
.rel-hero-frame::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--rel-accent);
  border-right: 1px solid var(--rel-accent);
}

/* Instruments de relevé en surimpression — MASQUÉS par défaut (hero épuré),
   révélés seulement au survol/focus du bandeau ou pendant le scrub de la
   règle : l'outillage de mesure n'apparaît que quand on observe. */
.rel-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(to right,  transparent 0 79px, rgba(201,212,204,0.55) 79px 80px),
    repeating-linear-gradient(to bottom, transparent 0 79px, rgba(201,212,204,0.55) 79px 80px);
  transition: opacity 0.25s ease;
}
/* Réticule central : cercle + croix orange */
.rel-hero-reticle {
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.rel-hero-reticle::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--rel-accent);
  border-radius: 50% !important;
  opacity: 0.9;
}
.rel-hero-reticle::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background:
    linear-gradient(var(--rel-accent), var(--rel-accent)) center / 1px 100% no-repeat,
    linear-gradient(var(--rel-accent), var(--rel-accent)) center / 100% 1px no-repeat;
}
/* Révélation : survol/focus du bandeau, OU prise en main de la règle. */
.rel-hero-frame:hover .rel-hero-grid,
.rel-hero-frame:focus-visible .rel-hero-grid,
#rel-hero:has(.rel-hero-ruler.is-grabbing) .rel-hero-grid { opacity: 0.40; }
.rel-hero-frame:hover .rel-hero-reticle,
.rel-hero-frame:focus-visible .rel-hero-reticle,
#rel-hero:has(.rel-hero-ruler.is-grabbing) .rel-hero-reticle { opacity: 1; }

/* Azimut live : dans le cartouche (bout de ligne, aligné à droite), mis à
   jour en continu par JS = azimut réel au centre du pano.
   font-variant-numeric tabulaire pour que les chiffres ne « tremblent » pas. */
.rel-hero-az {
  margin-left: auto;
  color: var(--rel-accent);
  font-variant-numeric: tabular-nums;
}
.rel-hero-cta {
  position: absolute;
  right: 16px; bottom: 12px;
  z-index: 4;
  font-family: var(--rel-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 5px 12px;
  opacity: 0;
  transition: opacity 0.2s;
}
.rel-hero-frame:hover .rel-hero-cta,
.rel-hero-frame:focus-visible .rel-hero-cta { opacity: 1; }

/* Cartouche de métadonnées sous le bandeau */
.rel-hero-cartouche {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 9px 0;
  border-top: 1px solid var(--rel-line-strong);
  border-bottom: 1px solid var(--rel-line-strong);
  font-family: var(--rel-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rel-hero-cartouche span:first-child { color: var(--rel-accent); }


/* ═══════════════════════════════════════════════════════════════════
   5bis. TOUCHE MECANORMA — règle azimutale + croix de calage
   Deux annotations porteuses d'information vraie, jamais d'ornement :
   - la règle mappe la largeur du bandeau équirectangulaire sur 0→360° ;
   - la croix de calage (registration mark) marque les jonctions de
     sections, en remplacement du soulignement accent.
   ═══════════════════════════════════════════════════════════════════ */

/* Règle azimutale, SOLIDAIRE du défilé du pano : trois cellules identiques
   (chacune = 360° = un panneau = --hero-zoom × largeur du cadre) sur une
   piste qui translate d'un pas (-1/3) en 80s, exactement comme le pano.
   Le degré sous un point de l'écran = l'azimut réellement affiché juste
   au-dessus → vraie info, pas un ornement. Ticks majeurs tous les 45°
   (8/cellule), mineurs tous les 5° (72/cellule). */
.rel-hero-ruler {
  position: relative;
  overflow: hidden;
  height: 26px;
  margin-top: 5px;
  font-family: var(--rel-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  pointer-events: none;
}
.rel-hero-ruler-track {
  display: flex;
  width: calc(var(--hero-zoom) * 300%);
  height: 100%;
  /* Même phase de départ que le pano → règle calée et centrée pareil. */
  transform: translate3d(calc(var(--hero-pan-phase) * -100% / 3), 0, 0);
  animation: rel-hero-pan var(--hero-pan-period) linear infinite;
  animation-delay: calc(var(--hero-pan-period) * -1 * var(--hero-pan-phase));
  will-change: transform;
}
.rel-hero-ruler-cell {
  position: relative;
  flex: 0 0 calc(100% / 3);
  height: 100%;
  background:
    repeating-linear-gradient(to right,
      var(--rel-line-strong) 0 1px, transparent 1px calc(100% / 8))
      top left / 100% 11px no-repeat,
    repeating-linear-gradient(to right,
      var(--rel-line-soft) 0 1px, transparent 1px calc(100% / 72))
      top left / 100% 6px no-repeat;
}
.rel-hero-ruler-cell i {
  position: absolute;
  top: 13px;
  font-style: normal;
  /* Libellés centrés sous leur tick majeur : la vue démarre sur un −x°
     (le 0° n'est pas collé au bord), le pano reste centré. */
  transform: translateX(-50%);
}
.rel-hero-ruler-cell i:nth-child(1) { left: 0; }
.rel-hero-ruler-cell i:nth-child(2) { left: 25%; }
.rel-hero-ruler-cell i:nth-child(3) { left: 50%; }
.rel-hero-ruler-cell i:nth-child(4) { left: 75%; }
/* Survol du bandeau : la règle se fige en même temps que le pano. */
#rel-hero:has(.rel-hero-frame:hover) .rel-hero-ruler-track,
#rel-hero:has(.rel-hero-frame:focus-visible) .rel-hero-ruler-track {
  animation-play-state: paused;
}

/* Croix de calage ⊕ : croix accent pleine boîte + anneau encre 1px.
   Posée devant les libellés de section (home, lieu, info). */
/* Conteneurs de libellé : croix + texte centrés verticalement, espacés de 9px. */
.rel-index-head h2,
#grid-section-label,
.info-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rel-index-head h2::before,
#grid-section-label::before,
.info-section-label::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background:
    radial-gradient(circle at center,
      transparent 3.5px, var(--rel-line-strong) 3.5px 4.5px, transparent 4.5px),
    linear-gradient(var(--rel-accent), var(--rel-accent)) center / 1px 100% no-repeat,
    linear-gradient(var(--rel-accent), var(--rel-accent)) center / 100% 1px no-repeat;
}


/* ═══════════════════════════════════════════════════════════════════
   5ter. ÉTAT 404 — « FICHE MANQUANTE »
   Cadre de fiche absente (coins orange + tampon NON RÉPERTORIÉ), suivi
   de la planche des lieux (réutilise .lieu-card / main#grid). Rendu par
   lib/notfound.php depuis lieu.php et guide.php.
   ═══════════════════════════════════════════════════════════════════ */
#rel-404 { padding: 40px 48px 4px; }

.rel-404-frame {
  position: relative;
  border: 1px solid var(--rel-line-strong);
  padding: 40px 44px 34px;
}
/* Repères de coin (⌐) accent — haut-gauche + bas-droite. */
.rel-404-frame::before,
.rel-404-frame::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
}
.rel-404-frame::before {
  top: 9px; left: 9px;
  border-top: 1px solid var(--rel-accent);
  border-left: 1px solid var(--rel-accent);
}
.rel-404-frame::after {
  bottom: 9px; right: 9px;
  border-bottom: 1px solid var(--rel-accent);
  border-right: 1px solid var(--rel-accent);
}

/* Tampon « NON RÉPERTORIÉ » — double filet orange, légèrement tourné. */
.rel-404-stamp {
  position: absolute;
  top: 24px; right: 28px;
  transform: rotate(-4deg);
  font-family: var(--rel-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--rel-accent);
  border: 1.5px solid var(--rel-accent);
  outline: 1px solid var(--rel-accent);
  outline-offset: 3px;
  padding: 7px 13px;
  opacity: 0.9;
}

.rel-404-meta {
  font-family: var(--rel-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rel-accent);
  margin-bottom: 14px;
}
.rel-404-title {
  font-family: var(--rel-display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.rel-404-desc {
  font-family: var(--serif-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 22px;
}
.rel-404-ref {
  font-family: var(--rel-mono);
  font-size: 12px;
  color: var(--rel-accent);
}
.rel-404-link {
  display: inline-block;
  font-family: var(--rel-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--rel-line-strong);
  padding: 9px 18px;
  text-decoration: none;
}
.rel-404-link:hover {
  border-color: var(--rel-accent);
  color: var(--rel-accent);
}

@media (max-width: 700px) {
  #rel-404 { padding: 24px 20px 4px; }
  .rel-404-frame { padding: 28px 22px 24px; }
  .rel-404-stamp {
    position: static;
    display: inline-block;
    transform: rotate(-3deg);
    margin-bottom: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   6. INDEX HOME — en-tête de grille + cartes lieux
   ═══════════════════════════════════════════════════════════════════ */

.rel-index-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rel-line-strong);
  margin-bottom: 6px;
}
.rel-index-head h2 {
  font-family: var(--rel-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.rel-index-count {
  font-family: var(--rel-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Outils de l'index : tri + compteur, alignés à droite de l'en-tête. */
.rel-index-tools {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.rel-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rel-sort[hidden] { display: none; }
.rel-sort-label {
  font-family: var(--rel-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rel-sort-btn {
  font-family: var(--rel-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--rel-line-strong);
  border-radius: 0;
  padding: 4px 9px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.rel-sort-btn:hover {
  color: var(--text-primary);
  border-color: var(--rel-accent);
}
.rel-sort-btn.is-active {
  color: var(--bg);
  background: var(--rel-accent);
  border-color: var(--rel-accent);
}

.lieu-card {
  background: var(--surface);
  border: 1px solid var(--rel-line-strong);
  min-height: 0;
  padding: 16px;                  /* l'image et le texte flottent dans la carte */
  transition: background 0.18s;
}
.lieu-card:hover {
  background: var(--card-hover-bg);
  transform: none;
  box-shadow: none;
}

/* En-tête de carte : identifiant + badge catégorie (pas de filet, juste un espace) */
.lieu-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  margin-bottom: 12px;
  border-bottom: none;
  font-family: var(--rel-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

/* Le corps reprend l'aplomb de l'image (plus de padding latéral propre) */
.lieu-card-body { padding: 14px 0 0; }
.rel-id { color: var(--rel-accent); }
.rel-cat {
  color: var(--text-muted);
  border: 1px solid var(--rel-line-soft);
  padding: 1px 6px;
  text-transform: uppercase;
}

/* Photo : repères de coin + label pano */
.lieu-card-bg { position: relative; }
.lieu-card-bg::before,
.lieu-card-bg::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  z-index: 2;
  pointer-events: none;
}
.lieu-card-bg::before {
  top: 7px; left: 7px;
  border-top: 1px solid var(--rel-accent);
  border-left: 1px solid var(--rel-accent);
}
.lieu-card-bg::after {
  bottom: 7px; right: 7px;
  border-bottom: 1px solid var(--rel-accent);
  border-right: 1px solid var(--rel-accent);
}
.rel-pano-label {
  position: absolute;
  left: 9px; bottom: 8px;
  z-index: 2;
  font-family: var(--rel-mono);
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rel-accent);
  text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}

.lieu-card-name {
  font-family: var(--rel-display);
  font-size: 21px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.lieu-card-title {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rel-line-soft);
}
.lieu-card-desc {
  font-family: var(--serif-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.70;
}

/* Tableau de données du relevé (remplace l'ancien footer) */
.rel-data {
  margin-top: auto;
  border-top: 1px solid var(--rel-line-strong);
}
.rel-data-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rel-line-soft);
  font-family: var(--rel-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.rel-data-row:last-child { border-bottom: none; }
.rel-data-row dt {
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.rel-data-row dd {
  margin: 0;
  color: var(--text-primary);
  text-align: right;
}
.rel-data-row dd.rel-incl {
  color: var(--rel-accent);
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════
   7. PAGE LIEU — hero + grille d'œuvres (style relevé, structure inchangée)
   ═══════════════════════════════════════════════════════════════════ */

/* Fil d'Ariane : retour à gauche · fil d'Ariane à droite */
#rel-breadcrumb {
  background: var(--bg);
  border-bottom: 1px solid var(--rel-line-soft);
  padding: 12px 48px;
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#rel-breadcrumb a { color: var(--text-muted); text-decoration: none; }
#rel-breadcrumb a:hover { color: var(--rel-accent); }
.rel-bc-back::before { content: '← '; }
.rel-bc-trail { display: inline-flex; align-items: center; gap: 8px; }
.rel-bc-sep { color: var(--rel-line-strong); }
.rel-bc-id { color: var(--rel-accent); }

/* Hero en bloc : étiquette, puis [titre | stats], puis description. */
#lieu-hero {
  display: block;
  min-height: 0;
  padding: 26px 48px 12px;
  background: var(--bg);
  border-bottom: none;
}
#lieu-hero-content {
  display: block;
  padding: 0;
  overflow: visible;
  min-width: 0;
}
#lieu-hero-label { margin-bottom: 10px; }
.lieu-hero-headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.lieu-hero-titleblock { min-width: 0; }

/* 3e stat « IA » — identifiant en accent au lieu d'un chiffre */
.rel-stat-ia { color: var(--rel-accent) !important; }
#lieu-hero-bg {
  border: 1px solid var(--rel-line-strong);
  position: relative;
  overflow: visible;
}
#lieu-hero-bg::before,
#lieu-hero-bg::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  z-index: 3;
  pointer-events: none;
}
#lieu-hero-bg::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--rel-accent);
  border-left: 1px solid var(--rel-accent);
}
#lieu-hero-bg::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--rel-accent);
  border-right: 1px solid var(--rel-accent);
}
#lieu-hero-content::before { display: none; }

#lieu-hero-label {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--rel-accent);
}
#lieu-hero-name {
  font-family: var(--rel-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 0.94;
  color: var(--text-primary);
  margin-bottom: 8px;
}
#lieu-hero-title {
  font-family: var(--rel-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
#lieu-hero-desc {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 760px;
  margin-top: 18px;
}

/* Stats en regard du titre : empilées (chiffre / label), alignées à droite */
#lieu-hero-stats {
  display: flex;
  gap: 40px;
  margin: 4px 0 0;
  padding: 0;
  border-top: none;
  flex-shrink: 0;
}
.lieu-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.lieu-hero-stat-num {
  font-family: var(--rel-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}
.lieu-hero-stat-label {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#back-btn,
.lieu-hero-link {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--rel-line-soft);
  padding: 5px 14px;
}
#back-btn:hover,
.lieu-hero-link:hover {
  background: transparent;
  border-color: var(--rel-accent);
  color: var(--rel-accent);
}

#grid-section-label {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rel-line-strong);
}
/* L'accroche accent est remplacée par la croix de calage (cf. 5bis). */
#grid-section-label::after { display: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--rel-line-strong);
  padding: 16px;                  /* image encadrée dans la carte */
  transition: background 0.18s;
}
.card:hover {
  background: var(--card-hover-bg);
  transform: none;
  box-shadow: none;
}
.card-body { padding: 14px 0 0; }
.card-bg { position: relative; }
.card-bg::before,
.card-bg::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  z-index: 2;
  pointer-events: none;
}
.card-bg::before {
  top: 6px; left: 6px;
  border-top: 1px solid var(--rel-accent);
  border-left: 1px solid var(--rel-accent);
}
.card-bg::after {
  bottom: 6px; right: 6px;
  border-bottom: 1px solid var(--rel-accent);
  border-right: 1px solid var(--rel-accent);
}
.card-meta {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rel-accent);
}
.card-titre {
  font-family: var(--rel-display);
  font-size: 17px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.card-artiste {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rel-line-soft);
}
.card-desc {
  font-family: var(--serif-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.60;
}
.card-desc-prefix { font-style: normal; color: var(--rel-accent); }
.card-footer-stats {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--rel-line-soft);
}
.card-voix-icon { color: var(--text-muted); }
.card-voix-icon:hover,
.card-voix-icon.playing { color: var(--rel-accent); }
@keyframes voix-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.25); }
}


/* ═══════════════════════════════════════════════════════════════════
   8. TAGS ET ŒUVRES LIÉES
   ═══════════════════════════════════════════════════════════════════ */
#relations-section {
  background: var(--surface);
  border-top: 1px solid var(--rel-line-strong);
  border-bottom: 1px solid var(--rel-line-strong);
}
[data-theme="light"] #relations-section { background: var(--surface); }
.relations-titre {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lieu-tag {
  font-family: var(--rel-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--rel-line-soft);
  background: transparent;
  padding: 3px 8px;
}
.lieu-tag:hover {
  border-color: var(--rel-accent);
  color: var(--rel-accent);
  background: transparent;
}
.lieu-tag.active {
  background: var(--rel-accent);
  border-color: var(--rel-accent);
  color: #18181B;
}
.oeuvre-liee-card {
  border: 1px solid var(--rel-line-soft);
  background: transparent;
}
.oeuvre-liee-card:hover {
  border-color: var(--rel-accent);
  background: var(--accent-soft);
}
.oeuvre-liee-titre { font-family: var(--serif-body); font-size: 12px; color: var(--text-primary); }
.oeuvre-liee-artiste { font-family: var(--rel-mono); font-size: 9px; color: var(--text-muted); }
.oeuvre-liee-lieu {
  font-family: var(--rel-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rel-accent);
}


/* ═══════════════════════════════════════════════════════════════════
   9. CONTEXT, DISCLAIMER, FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.context { background: var(--surface); border-top: 1px solid var(--rel-line-strong); }
.context::before { display: none; }
.context-text {
  font-family: var(--serif-body);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.80;
}
.context-text strong { color: var(--text-primary); }

.disclaimer {
  background: var(--surface);
  border-top: 1px solid var(--rel-line-soft);
  font-family: var(--rel-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}
.disclaimer strong { color: var(--text-primary); }
.disclaimer a { color: var(--text-muted); text-decoration: none; }
.disclaimer a:hover { color: var(--rel-accent); text-decoration: underline; }

footer {
  background: var(--bg);
  border-top: 1px solid var(--rel-line-soft);
  font-family: var(--rel-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

#error-msg { font-family: var(--rel-mono); color: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════════════
   10. SKELETONS + LIEN FILTRE
   ═══════════════════════════════════════════════════════════════════ */
.card-skeleton { background: var(--surface); border: 1px solid var(--rel-line-soft); }

#filter-link {
  font-family: var(--rel-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--rel-line-strong) !important;
  padding: 4px 12px !important;
  text-decoration: none;
}
#filter-link:hover {
  color: var(--rel-accent) !important;
  border-color: var(--rel-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   11. PLANCHE D'INVENTAIRE — grilles 3 colonnes, filets partagés
   Les cartes se touchent : chaque carte garde son filet 1px et un
   margin négatif top/left fond les filets adjacents en une seule ligne.
   ═══════════════════════════════════════════════════════════════════ */

/* — Home — */
main#grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.rel-index-head {
  margin-bottom: 0;   /* la cartouche du hero ferme déjà le haut : pas de filet redondant */
}
main#grid .lieu-card {
  margin: -1px 0 0 -1px;   /* fond les filets entre cartes voisines */
}

/* — Page lieu (grille des œuvres) — */
#grid-section {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 16px;
}
/* Label « N panoramas » : on retire le border-bottom hérité de site.css
   qui s'étendait sur toute la largeur de la grille (grid-column: 1/-1) —
   gênant quand il y a moins de 3 cartes (ligne sans rien en dessous). */
#grid-section-label {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 6px;
}
#grid-section .card {
  margin: -1px 0 0 -1px;
}


/* ═══════════════════════════════════════════════════════════════════
   11bis. LIGNES HORIZONTALES PLEINE LARGEUR — alignées sur le header
   Les borders full-width des sections de pied de page débordaient sur
   les côtés ; on les remplace par un trait pseudo, inset comme la ligne
   du header (var(--page-pad-x), même valeur que --header-pad-x).
   ═══════════════════════════════════════════════════════════════════ */
:root { --page-pad-x: 48px; }

.context,
.disclaimer,
footer,
#lieu-hero-links,
#relations-section {
  position: relative;
  border-top: none;
  border-bottom: none;
}
.context::before,
.disclaimer::before,
footer::before,
#lieu-hero-links::before,
#relations-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--page-pad-x);
  right: var(--page-pad-x);
  height: 1px;
  background: var(--rel-line-soft);
  pointer-events: none;
}
#relations-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--page-pad-x);
  right: var(--page-pad-x);
  height: 1px;
  background: var(--rel-line-soft);
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  main#grid,
  #grid-section { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  #rel-hero { padding: 24px 20px 0; }
  .rel-hero-top { flex-direction: column; gap: 14px; }
  .rel-hero-right { align-items: flex-start; text-align: left; gap: 10px; }
  .rel-hero-meta { text-align: left; padding-top: 0; white-space: normal; }
  .rel-hero-spec { text-align: left; }
  .rel-hero-cartouche { gap: 6px 18px; font-size: 9px; }
  /* Mobile : pano figé (cover) → règle figée aussi, et graduations mineures
     à 10° (36 périodes) pour éviter la bouillie. */
  .rel-hero-ruler { font-size: 8px; }
  .rel-hero-ruler-track { transform: none; animation: none; }
  .rel-hero-ruler-cell {
    background:
      repeating-linear-gradient(to right,
        var(--rel-line-strong) 0 1px, transparent 1px calc(100% / 8))
        top left / 100% 11px no-repeat,
      repeating-linear-gradient(to right,
        var(--rel-line-soft) 0 1px, transparent 1px calc(100% / 36))
        top left / 100% 6px no-repeat;
  }
  #rel-breadcrumb { padding: 10px 20px; }
  #lieu-hero { padding: 20px 20px; }
  .lieu-hero-headrow { flex-direction: column; gap: 18px; }
  #lieu-hero-stats { gap: 28px; }
}

@media (max-width: 600px) {
  :root { --page-pad-x: 16px; }
  header { padding: 14px 16px 12px; }
  #lieu-hero-name { font-size: 32px; }
  body { border-inline: none; }       /* le document occupe tout l'écran */
  main#grid,
  #grid-section { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   13. ACCESSIBILITÉ — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lieu-card-bg img,
  .card-bg img,
  .rel-hero-pan,
  .rel-hero-ruler-track,
  #lieu-hero-bg,
  .card,
  .lieu-card,
  .rel-hero-frame,
  .card-voix-icon {
    transition: none !important;
    animation: none !important;
  }
}