/* ==========================================================================
   COPRO PERFORMANCE CONSEIL — signature.css
   --------------------------------------------------------------------------
   Calque « Le Relevé ».

   Direction artistique : le cabinet lit un immeuble comme un architecte lit
   un plan. Tout le vocabulaire visuel en découle — tracés techniques,
   cotations, calques d'analyse qui se dessinent, grain d'impression.

   Ce fichier ne modifie AUCUNE règle de style.css : il ajoute une couche.
   Le supprimer rend le site à son état précédent, intact.

   Sommaire
   S1.  Jetons du calque
   S2.  Grain & texture d'impression
   S3.  Séquence d'ouverture
   S4.  Calque d'analyse du hero (cotations, scan, annotations)
   S5.  Fond calque technique (blueprint)
   S6.  Illustrations au trait (dessin progressif)
   S7.  Pile de documents
   S8.  Bandeau défilant
   S9.  Tracé de méthode
   S10. Cartes : relief au pointeur
   S11. Projecteur curseur (sections sombres)
   S12. Compteurs & chiffres
   S13. Boutons magnétiques
   S14. Ajustements responsive & mouvement réduit
   ========================================================================== */

/* ==========================================================================
   S1. JETONS DU CALQUE
   ========================================================================== */

:root {
  /* Trait technique — la couleur du crayon d'architecte */
  --trace: rgba(23, 97, 79, 0.55);
  --trace-soft: rgba(23, 97, 79, 0.18);
  --trace-ghost: rgba(11, 28, 44, 0.07);
  --cote: #B9924F;               /* cotations : laiton */

  --grid-step: 34px;

  /* Durées de tracé */
  --draw: 1600ms;
  --draw-slow: 2400ms;

  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   S2. GRAIN & TEXTURE D'IMPRESSION
   --------------------------------------------------------------------------
   Un voile de grain très léger, posé au-dessus de toute la page. C'est ce
   qui donne la sensation « papier » plutôt que « écran », et qui casse la
   platitude des aplats de couleur.
   ========================================================================== */

.grain {
  position: fixed;
  inset: 0;
  z-index: 300;       /* au-dessus des contenus, sous le lien d'évitement */
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media print {
  .grain { display: none; }
}

/* ==========================================================================
   S3. SÉQUENCE D'OUVERTURE
   --------------------------------------------------------------------------
   Un rideau court (< 1 s) pendant lequel la marque se trace. Il se retire
   de lui-même, et disparaît complètement si le JS est absent ou si
   l'utilisateur a demandé moins d'animations.
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;      /* au-dessus de tout, y compris le lien d'évitement */
  display: grid;
  place-items: center;
  background: var(--ink-900);
  transition: opacity 620ms var(--ease-out), visibility 620ms;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
}

.boot__mark {
  width: 74px;
  height: 74px;
  color: #7FD3B8;
}

.boot__mark [data-boot] {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: boot-draw 820ms var(--ease-draw) forwards;
  animation-delay: calc(var(--i, 0) * 95ms);
}

.boot__label {
  position: absolute;
  bottom: clamp(2rem, 6vh, 4rem);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238, 243, 246, 0.42);
  opacity: 0;
  animation: boot-fade 700ms var(--ease-out) 380ms forwards;
}

@keyframes boot-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes boot-fade {
  to { opacity: 1; }
}

/* ==========================================================================
   S4. CALQUE D'ANALYSE DU HERO
   --------------------------------------------------------------------------
   La photo de l'immeuble reçoit par-dessus un calque de relevé : lignes de
   cotation, repères de niveaux, ligne de scan qui monte, puis annotations
   qui se posent. C'est la promesse du cabinet, jouée littéralement.
   ========================================================================== */

.releve {
  position: relative;
}

/* --- Le calque SVG posé sur la photo ---
   Volontairement sous le voile de révélation de .media (z-index 2) : tant
   que la photo n'est pas découverte, le relevé ne s'affiche pas sur un
   cadre vide. */
.releve__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.releve__layer svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Traits de construction : se dessinent une fois le cadre visible */
.releve__layer [data-trace] {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset var(--draw-slow) var(--ease-draw);
  transition-delay: calc(700ms + var(--i, 0) * 130ms);
}

.releve.is-visible .releve__layer [data-trace] {
  stroke-dashoffset: 0;
}

/* Repères de niveau (petits carrés d'accroche) */
.releve__layer [data-node] {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(1400ms + var(--i, 0) * 130ms);
}

.releve.is-visible .releve__layer [data-node] {
  opacity: 1;
  transform: scale(1);
}

/* --- Ligne de scan : balaie la façade en continu, très lentement --- */
.releve__scan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to top,
    transparent 0%,
    rgba(127, 211, 184, 0.10) 55%,
    rgba(127, 211, 184, 0.28) 92%,
    rgba(255, 255, 255, 0.50) 100%
  );
  mix-blend-mode: screen;
}

.releve.is-visible .releve__scan {
  animation: releve-scan 7s cubic-bezier(0.4, 0, 0.3, 1) 1.1s infinite;
}

@keyframes releve-scan {
  0%   { transform: translateY(100%); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  88%  { transform: translateY(-240%); opacity: 0; }
  100% { transform: translateY(-240%); opacity: 0; }
}

/* --- Annotations posées autour du cadre --- */
.releve__annot {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.72rem 0.42rem 0.55rem;
  background: rgba(251, 250, 247, 0.93);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cote);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-size: 0.72rem;
  font-weight: 560;
  line-height: 1.25;
  color: var(--ink-700);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: calc(1700ms + var(--i, 0) * 220ms);
}

.releve.is-visible .releve__annot {
  opacity: 1;
  transform: none;
}

.releve__annot::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 97, 79, 0.14);
}

.releve__annot span {
  display: block;
  /* 0.62rem donnait 9,9 px — voir style.css § 16 ter. */
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
}

/* Deux annotations, pas plus : le cadre porte déjà la carte flottante.
   Chacune s'aligne sur le point de relevé qui la désigne — --a sur le
   niveau y=172 du calque SVG, --b sur le niveau y=344. */
.releve__annot--a { top: 31%; left: -4.5rem; }
.releve__annot--b { top: 65%; right: -3.5rem; }

/* --- Étiquette d'échelle, en bas du cadre --- */
.releve__scale {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(7, 19, 32, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 2.3s;
}

.releve.is-visible .releve__scale { opacity: 1; }

.releve__scale i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7FD3B8;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* ==========================================================================
   S5. FOND CALQUE TECHNIQUE
   --------------------------------------------------------------------------
   Une trame millimétrée très pâle, qui apparaît par endroits. Elle rappelle
   le papier calque sans jamais gêner la lecture.
   ========================================================================== */

.blueprint {
  position: relative;
  isolation: isolate;
}

.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--trace-ghost) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trace-ghost) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
}

/* Variante sur fond sombre */
.section--ink.blueprint::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ==========================================================================
   S6. ILLUSTRATIONS AU TRAIT
   --------------------------------------------------------------------------
   Jeu d'illustrations dessinées pour ce site — un trait, pas d'aplats, pas
   de banque d'images. Chacune se trace quand elle entre dans le champ, et
   réagit au survol de sa carte.
   ========================================================================== */

.illu {
  position: relative;
  display: block;
  width: 100%;
  color: var(--accent);
}

.illu svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Tracé progressif — la longueur est mesurée en JS et posée sur --len */
.illu [data-draw] {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset var(--draw) var(--ease-draw);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.illu.is-drawn [data-draw] {
  stroke-dashoffset: 0;
}

/* Éléments pleins : apparaissent après le trait */
.illu [data-pop] {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out);
  transition-delay: calc(760ms + var(--i, 0) * 90ms);
}

.illu.is-drawn [data-pop] {
  opacity: 1;
  transform: scale(1);
}

/* Trame de fond propre à l'illustration */
.illu__grid {
  stroke: var(--trace-ghost);
  stroke-width: 1;
}

/* Réaction au survol de la carte parente */
.card:hover .illu [data-live],
.card:focus-within .illu [data-live] {
  animation: illu-live 1.8s var(--ease-in-out) infinite;
}

@keyframes illu-live {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Carte de service : l'illustration occupe le haut de la carte */
.card--illu {
  padding-top: 0;
  overflow: hidden;
}

/* Variante encadrée, pour la colonne collante des pages prestation :
   l'illustration reste sous les yeux pendant toute la lecture du bloc. */
.illu--aside {
  margin-bottom: var(--sp-5);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 90% 100% at 50% 0%, var(--accent-soft) 0%, transparent 72%),
    var(--surface);
}

/* L'illustration file jusqu'aux bords de la carte : on annule la gouttière
   horizontale de .card, qui reste appliquée au reste du contenu. */
.card--illu .illu {
  margin: 0 calc(-1 * clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem)) var(--sp-5);
  padding: var(--sp-6) var(--sp-6) var(--sp-2);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, var(--accent-soft) 0%, transparent 72%);
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   S7. PILE DE DOCUMENTS
   --------------------------------------------------------------------------
   « Ce que nous ouvrons » — les pièces réellement examinées, empilées puis
   déployées à l'entrée dans le champ. Chaque feuille est un vrai document
   de copropriété, nommé.
   ========================================================================== */

.dossier {
  position: relative;
  min-height: clamp(360px, 42vw, 470px);
}

/* Chaque feuille part du centre exact du bloc : la pile est franche au
   départ, l'éventail se lit ensuite comme un geste. */
.dossier__sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 20vw, 230px);
  aspect-ratio: 1 / 1.414;          /* A4 */
  padding: 1.05rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  transition:
    transform 1100ms var(--ease-out),
    box-shadow 400ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* Position déployée. Les décalages sont exprimés en pourcentage de la
   feuille elle-même : l'éventail se resserre tout seul quand la feuille
   rétrécit, sans média-query par palier. `--spread` ne sert qu'à donner
   un dernier tour de vis sur les très petits écrans. */
.dossier.is-open .dossier__sheet {
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--x, 0) * var(--spread, 1) * 1%),
      calc(var(--y, 0) * 1%)
    )
    rotate(calc(var(--r, 0) * var(--spread, 1) * 1deg));
}

.dossier__sheet:hover {
  z-index: 10;
  box-shadow: var(--shadow-lg);
}

.dossier__tag {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.16rem 0.45rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  /* 0.56rem donnait 9,0 px : sous le plancher de lisibilité retenu après
     l'audit de responsivité (voir style.css § 16 ter). */
  font-size: 0.665rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dossier__name {
  font-size: 0.76rem;
  font-weight: 620;
  line-height: 1.3;
  color: var(--ink-800);
  margin-bottom: 0.7rem;
}

/* Lignes décoratives — jamais du texte, jamais lues */
.dossier__lines {
  display: grid;
  gap: 5px;
}

.dossier__lines i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 520ms var(--ease-out);
  transition-delay: calc(600ms + var(--i, 0) * 120ms + var(--j, 0) * 55ms);
}

.dossier.is-open .dossier__lines i { transform: scaleX(1); }

.dossier__lines i:nth-child(3n)   { width: 62%; }
.dossier__lines i:nth-child(4n+2) { width: 84%; }

/* La ligne surlignée : le point relevé par l'analyse */
.dossier__lines i.is-flag {
  height: 5px;
  background: var(--brass);
  opacity: 0.85;
}

/* ==========================================================================
   S8. BANDEAU DÉFILANT
   --------------------------------------------------------------------------
   Une frise continue qui sépare deux respirations du site. Sobre : pas de
   slogan publicitaire, seulement les pièces que le cabinet examine.
   ========================================================================== */

.frise {
  position: relative;
  overflow: hidden;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.frise__track {
  display: flex;
  width: max-content;
  animation: frise-run 46s linear infinite;
}

.frise:hover .frise__track {
  animation-play-state: paused;
}

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

.frise__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 540;
  color: var(--ink-600);
  white-space: nowrap;
}

.frise__item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brass);
  margin-left: 0.7rem;
}

.frise__item svg {
  flex: none;
  color: var(--accent);
  opacity: 0.75;
}

@keyframes frise-run {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   S9. TRACÉ DE MÉTHODE
   --------------------------------------------------------------------------
   Les cinq étapes reliées par un tracé qui se dessine au défilement, avec
   un repère qui progresse dessus. Le fil conducteur, rendu visible.
   ========================================================================== */

.methode-stack {
  position: relative;
}

/* Une gouttière est réservée à gauche pour le rail : la grille interne
   des étapes n'est pas touchée. */
@media (min-width: 861px) {
  .methode-stack { padding-left: 40px; }
}

.trace-methode {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  pointer-events: none;
}

/* Le rail : pointillé, en attente */
.trace-methode::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    var(--trace-soft) 0 6px,
    transparent 6px 14px
  );
  background-size: 2px 14px;
}

/* La part parcourue */
.trace-methode__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--accent-border), var(--accent));
  transition: height 200ms linear;
}

/* Le repère qui progresse */
.trace-methode__head {
  position: absolute;
  left: 50%;
  top: calc(var(--p, 0) * 100%);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent-border);
  opacity: calc(var(--p, 0) * 5);
  transition: top 200ms linear;
}

@media (max-width: 860px) {
  .trace-methode { display: none; }
}

/* ==========================================================================
   S10. CARTES : RELIEF AU POINTEUR
   --------------------------------------------------------------------------
   Une lueur qui suit le curseur et une inclinaison de quelques degrés.
   Assez pour que la carte paraisse physique, jamais assez pour distraire.
   ========================================================================== */

.tilt {
  transition: transform 420ms var(--ease-out);
  will-change: transform;
}

.tilt.is-tilting {
  transition: transform 90ms linear;
  transform:
    perspective(900px)
    rotateX(calc(var(--ty, 0) * -3.2deg))
    rotateY(calc(var(--tx, 0) * 3.2deg))
    translateZ(6px);
}

/* Lueur suiveuse */
.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(23, 97, 79, 0.09),
    transparent 62%
  );
}

.tilt:hover::before,
.tilt:focus-within::before { opacity: 1; }

.tilt > * { position: relative; z-index: 1; }

/* Sur fond sombre, la lueur passe en clair */
.section--ink .tilt::before {
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(127, 211, 184, 0.14),
    transparent 62%
  );
}

/* ==========================================================================
   S11. PROJECTEUR CURSEUR
   --------------------------------------------------------------------------
   Sur la section sombre, un halo suit le curseur et « éclaire » le bloc.
   Effet purement décoratif, coupé au tactile.
   ========================================================================== */

.spotlight { position: relative; isolation: isolate; }

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
  background: radial-gradient(
    620px circle at var(--sx, 50%) var(--sy, 30%),
    rgba(127, 211, 184, 0.09),
    transparent 65%
  );
}

/* Sur fond clair, le halo menthe pensé pour le fond sombre devient invisible :
   on repasse sur le vert de marque, en très faible densité. */
.section--pale.spotlight::after {
  background: radial-gradient(
    620px circle at var(--sx, 50%) var(--sy, 30%),
    rgba(23, 97, 79, 0.07),
    transparent 65%
  );
}

.spotlight.is-lit::after { opacity: 1; }

.spotlight > * { position: relative; z-index: 1; }

@media (hover: none) {
  .spotlight::after { display: none; }
}

/* ==========================================================================
   S12. COMPTEURS & CHIFFRES
   ========================================================================== */

.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tally__cell {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) clamp(1.2rem, 1rem + 1vw, 1.8rem);
  background: var(--surface);
}

.tally__num {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--ink-800);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.55rem;
}

.tally__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

.tally__label strong {
  display: block;
  color: var(--ink-700);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* Variante en ligne de la liste vérifiée, pour poser trois précisions
   courtes sous un visuel plein cadre. */
.check-list--row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4) var(--sp-6);
}

/* Utilitaire d'espacement manquant à l'échelle de style.css */
.mt-8 { margin-top: var(--sp-8); }

/* ==========================================================================
   S13. BOUTONS MAGNÉTIQUES
   ========================================================================== */

.magnet {
  transition: transform 380ms var(--ease-out), background-color var(--t-base),
    color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.magnet.is-pulled {
  transition: transform 110ms linear, background-color var(--t-base),
    color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  transform: translate(calc(var(--mgx, 0) * 1px), calc(var(--mgy, 0) * 1px));
}

/* ==========================================================================
   S14. RESPONSIVE & MOUVEMENT RÉDUIT
   ========================================================================== */

@media (max-width: 1080px) {
  .releve__annot--a { left: 0.6rem; }
  .releve__annot--b { right: 0.6rem; }
  .releve__annot--c { right: 0.6rem; }
}

@media (max-width: 720px) {
  .releve__annot { font-size: 0.66rem; padding: 0.34rem 0.55rem 0.34rem 0.45rem; }
  .releve__annot--b { display: none; }

  /* En dessous de 720 px, l'éventail n'a plus la place de s'ouvrir : les
     feuilles finissent par se recouvrir le nom, et une pile décalée ne
     dégage pas assez de hauteur pour cinq libellés. On abandonne donc la
     mise en scène et on pose les pièces à plat, toutes lisibles. */
  .dossier {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: start;
    min-height: 0;
  }

  .dossier__sheet {
    position: static;
    width: auto;
    opacity: 0;
    transform: translateY(14px);
    transition:
      transform 620ms var(--ease-out),
      opacity 620ms var(--ease-out),
      box-shadow 400ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .dossier.is-open .dossier__sheet {
    opacity: 1;
    transform: none;
  }

  /* La cinquième pièce est seule sur sa ligne : on la recentre au lieu
     de la laisser coller au bord gauche. */
  .dossier__sheet:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--sp-4) / 2);
  }
  .frise__item { padding: 0 1.05rem; font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : tout arrive à l'état final, rien ne bouge.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }

  .releve__layer [data-trace] { stroke-dashoffset: 0; transition: none; }
  .releve__layer [data-node],
  .releve__annot,
  .releve__scale { opacity: 1; transform: none; transition: none; }
  .releve__scan { display: none; }
  .releve__scale i { animation: none; }

  .illu [data-draw] { stroke-dashoffset: 0; transition: none; }
  .illu [data-pop]  { opacity: 1; transform: none; transition: none; }
  .card:hover .illu [data-live] { animation: none; }

  .dossier__sheet   { opacity: 1; transform: none; transition: none; }
  .dossier.is-open .dossier__sheet { transition: none; }
  .dossier__lines i { transform: scaleX(1); transition: none; }

  .frise__track { animation: none; transform: none; }
  .frise { -webkit-mask-image: none; mask-image: none; }

  .trace-methode__progress { transition: none; }

  .tilt.is-tilting  { transform: none; }
  .magnet.is-pulled { transform: none; }
  .spotlight::after { display: none; }
}