/* ============================================================================
   « On ne répond pas à toutes les demandes » — node 3288:25781.
   Discours à gauche, jeu de cartes à droite.
   ========================================================================= */


.blocages__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 120px;
}

.blocages__dire {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.blocages__dire h2 {
  inline-size: 521px;
  max-inline-size: 100%;
}

.blocages__lead {
  inline-size: 396px;
  max-inline-size: 100%;
  color: var(--c-ink-2);
}

/* ── Le jeu ────────────────────────────────────────────────────────────── */
.blocages__jeu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-28);
  flex: none;
  /* Un cran vers la gauche (bureau) : les cartes du second plan débordent de
     43 px de chaque côté et collaient au bord droit de la page. */
  margin-inline-end: 80px;
}

/* Toutes les cartes occupent la MÊME cellule de grille : la pile prend la
   hauteur de la plus longue et ne bouge plus. Les empiler en absolu aurait
   laissé la pile sans hauteur propre, et le passage d'une carte à l'autre
   aurait fait sauter la barre de commande. */
.blocages__pile {
  --carte-w: 410px;
  --ecart: 43px;   /* décalage latéral d'une carte du second plan */
  --gite: 3deg;    /* son inclinaison */
  --recul: 0.9;    /* son échelle */
  --duree: 720ms;  /* un changement de carte, de bout en bout */
  --mi: 0.45;      /* l'instant où la carte sortante passe derrière : le sommet
                      de sa course, là où elle change de sens */
  --sortie: calc(var(--carte-w) * 0.2); /* sa course vers l'extérieur : un geste, pas un déménagement */

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: var(--carte-w);
  list-style: none;
}

/* La pile se glisse : main ouverte au survol, fermée pendant la prise. Les
   liens de la carte gardent leur curseur habituel (ils ne déclenchent pas le
   glissement). */
.blocages__pile {
  cursor: grab;
  /* Le geste horizontal appartient à la pile ; le défilement vertical reste
     celui de la page. Sans cela le navigateur peut reprendre la main en plein
     glissement (pointercancel) et la carte reste à mi-course. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.blocages__pile:active {
  cursor: grabbing;
}

.blocages__pile a {
  cursor: pointer;
}

.blocages__pile:focus-visible {
  outline: 2px solid var(--c-brown);
  outline-offset: 16px;
  border-radius: var(--r-lg);
}

.blocage {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  padding: var(--sp-32);
  border-radius: var(--r-lg);
  background: var(--c-brown);
  color: var(--c-cream);
  overflow: clip;
  /* Poses : toute la durée. Teinte : jusqu'au sommet seulement, pour être
     posée quand la carte passe de l'autre côté. `z-index` ne se transitionne
     pas, il bascule : on le fait basculer EXACTEMENT au sommet, quand la carte
     sortante est à l'extérieur de la pile et ne recouvre plus rien. Basculé
     plus tôt, elle disparaissait d'un coup derrière ses voisines, encore au
     centre ; c'était le saut. */
  transition:
    translate var(--duree) var(--e-inout),
    rotate var(--duree) var(--e-inout),
    scale var(--duree) var(--e-inout),
    opacity var(--duree) var(--e-inout),
    background-color var(--duree) var(--e-inout),
    z-index 0s linear calc(var(--duree) * var(--mi));
  will-change: translate, rotate, scale;
}

/* Le contenu reste affiché sur toutes les cartes : celles du fond portent leur
   texte, avec les mêmes couleurs que celle de devant. Une carte vide qui se
   remplit en passant devant se lisait comme un clignotement ; ici c'est la même
   carte, du début à la fin du mouvement, et rien ne change de couleur sauf son
   fond. */

/* ── La carte qui sort ─────────────────────────────────────────────────
   Celle de devant ne glisse pas en ligne droite vers le fond : elle sort de la
   pile sur le côté, comme on écarte la carte du dessus, puis revient se
   ranger derrière. Un seul mouvement continu — en deux temps de courbe, car la
   vitesse horizontale s'annule d'elle-même au sommet, là où elle change de
   sens. `--dir` (+1 vers la droite, -1 vers la gauche) et le point de départ
   `--x0` / `--r0` (non nul quand on la lâche en plein glissement) viennent
   de blocages.js. Pendant l'animation, les poses ne se transitionnent pas :
   l'animation les porte, et la pose finale est déjà posée dessous. */
.blocage[data-sortant] {
  /* Même liste que `.blocage`, poses à durée nulle : réécrire seulement
     `transition-property` décalerait les durées et les retards des autres. */
  transition:
    translate 0s,
    rotate 0s,
    scale 0s,
    opacity var(--duree) var(--e-inout),
    background-color var(--duree) var(--e-inout),
    z-index 0s linear calc(var(--duree) * var(--mi));
  animation:
    blocage-sortie var(--duree) both,
    blocage-fondu var(--duree) both;
}

@keyframes blocage-sortie {
  0% {
    translate: var(--x0, 0px);
    rotate: var(--r0, 0deg);
    scale: 1;
    animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
  }
  45% {
    translate: calc(var(--dir) * var(--sortie));
    rotate: calc(var(--dir) * 3deg);
    scale: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 0.35, 1);
  }
  100% {
    translate: calc(var(--dir) * var(--ecart));
    rotate: calc(var(--dir) * var(--gite));
    scale: var(--recul);
  }
}

/* La sortie est courte : au sommet, la carte recouvre encore l'essentiel de sa
   voisine, et basculer l'une sous l'autre ferait apparaître un texte par-dessus
   l'autre d'un coup. Elle s'estompe donc le temps du passage derrière, puis
   reparaît à sa place du fond : un fondu enchaîné plutôt qu'une coupe. */
@keyframes blocage-fondu {
  0%,
  32% {
    opacity: 1;
  }
  46%,
  54% {
    opacity: 0;
  }
  76%,
  100% {
    opacity: 1;
  }
}

/* Les trois poses. Le second plan s'écarte de part et d'autre, s'incline en
   sens opposés et s'éclaircit : c'est l'éclaircissement, plus que l'échelle,
   qui dit lequel est devant. */
.blocage[data-profondeur="0"] {
  z-index: 3;
  translate: 0;
  rotate: 0deg;
  scale: 1;
}

/* Les deux cartes du fond ont la même teinte, un brun gris (#554f4d) à peine
   plus clair que celle de devant (#2a2423), et gardent les mêmes couleurs de
   texte : seul le fond bouge pendant un changement de carte, sur toute la durée
   du mouvement, sans aucun saut de couleur à masquer. */
.blocage[data-profondeur="1"],
.blocage[data-profondeur="2"] {
  background: #554f4d;
}

.blocage[data-profondeur="1"] {
  z-index: 2;
  translate: calc(-1 * var(--ecart));
  rotate: calc(-1 * var(--gite));
  scale: var(--recul);
}

.blocage[data-profondeur="2"] {
  z-index: 1;
  translate: var(--ecart);
  rotate: var(--gite);
  scale: var(--recul);
}

/* Au-delà de trois cartes, les suivantes attendent derrière, invisibles. */
.blocage:not([data-profondeur="0"]):not([data-profondeur="1"]):not([data-profondeur="2"]) {
  z-index: 0;
  translate: 0;
  rotate: 0deg;
  scale: var(--recul);
  opacity: 0;
  pointer-events: none;
}

/* Le contenu des cartes du fond n'a pas à être lisible ni sélectionnable : il
   est là pour donner de l'épaisseur, pas pour être lu. */
.blocage:not([data-profondeur="0"]) {
  pointer-events: none;
}

.blocage__dire {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.blocage__titre {
  font-family: var(--ff-display);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  font-size: 24px;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-box: trim-both cap alphabetic;
}

.blocage__corps {
  inline-size: min(320px, 100%);
  max-inline-size: 100%;
  font-family: var(--ff-display);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  font-size: var(--fs-md);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  /* « Tertiaire » dans la maquette : 60 % du crème de la carte. */
  opacity: 0.6;
}

.blocage__conseil {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: auto;
  padding: var(--sp-16);
  border-radius: var(--r-sm);
  background: var(--c-brown-light);
  color: var(--c-cream);
  font-family: var(--ff-display);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  font-size: var(--fs-sm);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}

.blocage__conseil-titre {
  color: var(--c-cream-deep);
}

.blocages__pile .blocage__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.blocage__lien {
  color: var(--c-cream);
  text-decoration: none;
  white-space: nowrap;
}

/* ── Barre de commande ─────────────────────────────────────────────────── */
.blocages__barre {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-16) var(--sp-24);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-label);
  text-transform: uppercase;
}

.blocages__commandes {
  display: flex;
  gap: var(--sp-4);
}

.blocages__bouton {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-sm);
  background: var(--c-cream-deep);
  color: var(--c-brown-light);
  cursor: pointer;
  transition: background-color var(--d-micro) var(--e-out);
}

.blocages__bouton:hover,
.blocages__bouton:focus-visible {
  background: var(--c-grey);
}

.blocages__bouton svg {
  inline-size: 10.5px;
  block-size: 16px;
}

.blocages__fleche--suivant {
  rotate: 180deg;
}

/* ── Repli ─────────────────────────────────────────────────────────────── */
@media (max-width: 1179px) {
  .blocages__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-48);
  }

  /* Les largeurs fixes du bureau (521 et 396) débordaient de l'écran : en
     colonne, le discours prend la largeur de la page. */
  .blocages__dire,
  .blocages__dire h2,
  .blocages__lead {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .blocages__jeu {
    align-self: center;
    max-inline-size: 100%;
    margin-inline-end: 0;
  }

  .blocages__pile {
    --carte-w: min(410px, calc(100vw - 2 * var(--gutter) - 2 * var(--ecart)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .blocages__pile {
    --duree: 120ms;
  }

  .blocage {
    will-change: auto;
  }

  .blocage[data-sortant] {
    animation: none;
  }
}

@media (max-width: 640px) {
  .blocages__pile {
    --ecart: 28px;
  }
}