/* Page « Qui sommes-nous » (06/10/2026) : présentation animée de l'agence.
   Photos chargées depuis la base par js/qui-sommes-nous.js (défilés, événements,
   mannequins publiés). Toutes les animations s'arrêtent si l'appareil demande
   moins de mouvement (prefers-reduced-motion). */

.qsn { overflow-x: clip; }

/* ---------- 1. Ouverture ---------- */
.qsn-ouverture {
  position: relative;
  min-height: min(82vh, 780px);
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(4rem, 10vh, 7rem);
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, var(--noir-doux) 0%, var(--noir) 70%);
}
.qsn-diaporama { position: absolute; inset: 0; }
.qsn-diaporama img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.8s ease;
  will-change: opacity, transform;
}
.qsn-diaporama img.actif { opacity: 1; animation: qsn-zoom 9s linear forwards; }
@keyframes qsn-zoom {
  from { transform: scale(1.12) translate3d(0, 0, 0); }
  to   { transform: scale(1) translate3d(-1.5%, -1%, 0); }
}
.qsn-voile {
  position: absolute; inset: 0;
  background:
    /* voile clair (charte claire, 18/10/2026) : texte foncé lisible sur la photo */
    linear-gradient(180deg, rgba(246,245,243,0.55) 0%, rgba(246,245,243,0.2) 35%, rgba(246,245,243,0.88) 80%, var(--fond) 100%),
    linear-gradient(90deg, rgba(246,245,243,0.85) 0%, rgba(246,245,243,0) 65%);
}
.qsn-ouverture-texte { position: relative; z-index: 1; }
.qsn-ouverture h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 6.2rem);
  line-height: 0.98;
  color: var(--titre-clair);
  margin: 0.6rem 0 1.4rem;
  max-width: 14ch;
}
.qsn-ouverture h1 em { display: block; font-style: italic; color: var(--bordeaux-clair); }
.qsn-devise {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
  font-family: var(--texte);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(0.82rem, 2.4vw, 1.05rem);
  color: var(--titre-clair);
  margin: 0 0 1rem;
}
.qsn-mot, .qsn-point { display: inline-block; opacity: 0; transform: translateY(0.9em); animation: qsn-monte 0.9s var(--transition-douce) forwards; }
.qsn-point { color: var(--bordeaux-clair); }
.qsn-mot:nth-child(1) { animation-delay: 0.6s; }
.qsn-point:nth-child(2) { animation-delay: 0.9s; }
.qsn-mot:nth-child(3) { animation-delay: 1.1s; }
.qsn-point:nth-child(4) { animation-delay: 1.4s; }
.qsn-mot:nth-child(5) { animation-delay: 1.6s; }
.qsn-sous-titre { color: var(--texte-corps); font-size: 1.05rem; margin: 0; }
.qsn-apparait { opacity: 0; animation: qsn-monte 1.1s var(--transition-douce) forwards; }
.qsn-d1 { animation-delay: 0.2s; }
.qsn-d3 { animation-delay: 2s; }
@keyframes qsn-monte { from { opacity: 0; transform: translateY(0.9em); } to { opacity: 1; transform: none; } }

.qsn-defiler {
  position: absolute; z-index: 1; left: 50%; bottom: 1.4rem;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1px solid rgba(255,255,255,0.45); border-radius: 14px;
}
.qsn-defiler span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--bordeaux-clair);
  animation: qsn-molette 1.8s ease-in-out infinite;
}
@keyframes qsn-molette { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- 2. Histoire ---------- */
.qsn-histoire-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.qsn-portrait { margin: 0; position: relative; }
.qsn-portrait::before {
  content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem;
  border: 1px solid var(--bordeaux); z-index: 0;
}
.qsn-portrait img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--noir-doux); }
.qsn-portrait figcaption { position: relative; z-index: 1; margin-top: 1.8rem; font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--titre-clair); }
.qsn-portrait:not(.avec-photo) { display: none; }
.qsn-histoire-grille:has(.qsn-portrait:not(.avec-photo)) { grid-template-columns: 1fr; max-width: 52rem; }
.qsn-histoire-texte p { color: var(--texte-corps); line-height: 1.8; }
.qsn-citation {
  margin: 2.2rem 0 0; padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--bordeaux-clair);
}
.qsn-citation p { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.35; color: var(--titre-clair); margin: 0 0 0.8rem; }
.qsn-citation footer { color: var(--texte-doux); font-size: 0.98rem; }

/* ---------- 3. Pôles ---------- */
.qsn-poles-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--gris-clair); border: 1px solid var(--gris-clair); }
.qsn-pole { background: var(--anthracite); padding: 2.2rem 1.6rem 2.4rem; position: relative; overflow: hidden; transition: background 0.5s ease; }
.qsn-pole::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--bordeaux-clair); transition: width 0.7s var(--transition-douce); }
.qsn-pole:hover { background: var(--noir-doux); }
.qsn-pole:hover::after, .qsn-pole.visible::after { width: 100%; }
.qsn-pole.visible::after { transition-delay: 0.4s; }
.qsn-pole-num { display: block; font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--bordeaux-clair); margin-bottom: 1.2rem; }
.qsn-pole h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 500; color: var(--titre-clair); margin: 0 0 0.6rem; }
.qsn-pole p { margin: 0; color: var(--texte-corps); }

/* ---------- 4. Bandeau de visages ---------- */
.qsn-visages { padding: 3.5rem 0 2.5rem; overflow: hidden; }
.qsn-visages-piste { display: flex; gap: 0.8rem; width: max-content; animation: qsn-defile 60s linear infinite; }
.qsn-visages:hover .qsn-visages-piste { animation-play-state: paused; }
.qsn-visages-piste a { flex: 0 0 auto; display: block; overflow: hidden; }
.qsn-visages-piste img {
  display: block; width: clamp(150px, 22vw, 230px); aspect-ratio: 3 / 4; object-fit: cover;
  filter: grayscale(0.9) contrast(1.05); transition: filter 0.6s ease, transform 0.8s var(--transition-douce);
}
.qsn-visages-piste a:hover img, .qsn-visages-piste a:focus-visible img { filter: none; transform: scale(1.05); }
@keyframes qsn-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.qsn-visages-lien { text-align: center; margin: 1.6rem var(--marge) 0; }
.qsn-visages-lien a { color: var(--bordeaux-clair); text-decoration: none; letter-spacing: 0.08em; }
.qsn-visages-lien a:hover { text-decoration: underline; }

/* ---------- 5. Débutants ---------- */
.qsn-sous-titre-bloc { font-family: var(--texte); font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--texte-doux); margin: 0 0 1.2rem; }
.qsn-criteres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 4rem; }
.qsn-critere { border: 1px solid var(--gris-clair); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.qsn-critere-qui { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; color: var(--bordeaux-clair); }
.qsn-critere strong { font-family: var(--display); font-weight: 500; font-size: 2.3rem; line-height: 1.1; color: var(--titre-clair); }
.qsn-critere span:last-child { color: var(--texte-corps); }

.qsn-etapes { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 50rem; }
/* Ligne verticale qui se remplit au fil du défilement (--qsn-progres, 0 à 1, posée par le JS) */
.qsn-etapes::before, .qsn-etapes::after { content: ""; position: absolute; left: 1.4rem; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--gris-clair); }
.qsn-etapes::after { background: var(--bordeaux-clair); transform-origin: top; transform: scaleY(var(--qsn-progres, 1)); }
.qsn-etape { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 1.4rem; padding-bottom: 2.6rem; }
.qsn-etape:last-child { padding-bottom: 0; }
.qsn-etape-num {
  position: relative; z-index: 1; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.4rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--rouge-ma2m);
  transition: background 0.6s ease;
}
.qsn-etape.visible .qsn-etape-num { background: var(--rouge-ma2m); color: var(--sur-rouge); }
.qsn-etape h3 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; color: var(--titre-clair); margin: 0.3rem 0 0.5rem; }
.qsn-etape p { margin: 0; color: var(--texte-corps); line-height: 1.75; }
.qsn-etape strong { color: var(--titre-clair); font-weight: 500; }

.qsn-actions, .qsn-devise, .qsn-visages-lien { max-width: none; }
.qsn-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin: 3rem 0 0; }
.qsn-note { max-width: 46rem; margin: 2.4rem auto 0; text-align: center; color: var(--texte-doux); }

/* ---------- 6. Déjà mannequin ---------- */
.qsn-atouts, .qsn-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 2rem; }
.qsn-atouts li { position: relative; padding-top: 1.2rem; border-top: 1px solid var(--bordeaux); }
.qsn-atouts h3, .qsn-services h3 { font-family: var(--display); font-weight: 500; font-size: 1.45rem; color: var(--titre-clair); margin: 0 0 0.5rem; }
.qsn-atouts p, .qsn-services p { margin: 0; color: var(--texte-corps); }

/* ---------- 7. Marques ---------- */
.qsn-marques { position: relative; overflow: hidden; }
.qsn-marques-fond { position: absolute; inset: -12% 0; }
.qsn-marques-fond img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(1);
  transform: translate3d(0, var(--qsn-decalage, 0px), 0); will-change: transform;
}
.qsn-marques-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noir) 0%, rgba(6,5,4,0.6) 30%, rgba(6,5,4,0.6) 70%, var(--noir) 100%); }
.qsn-marques-contenu { position: relative; z-index: 1; }
.qsn-services { counter-reset: qsn-service; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.qsn-services li { counter-increment: qsn-service; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.6rem; padding: 1.4rem 0; border-bottom: 1px solid var(--gris-clair); }
.qsn-services li::before { content: counter(qsn-service, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--display); font-size: 1.1rem; color: var(--bordeaux-clair); padding-top: 0.3rem; }

/* ---------- 8. Réalisations ---------- */
.qsn-evenements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.qsn-evenement-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--noir-doux), var(--noir)); margin-bottom: 1.2rem; }
.qsn-evenement-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.qsn-evenement-photo img.actif { opacity: 1; animation: qsn-zoom 9s linear forwards; }
.qsn-evenement h3 { font-family: var(--display); font-weight: 500; font-size: 1.8rem; color: var(--titre-clair); margin: 0 0 0.4rem; }
.qsn-evenement p { margin: 0; color: var(--texte-corps); }
.qsn-partenaires { margin-top: 3.4rem; text-align: center; }
.qsn-partenaires-titre { display: block; text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.8rem; color: var(--texte-doux); margin-bottom: 1rem; }
.qsn-partenaires ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem; }
.qsn-partenaires li { font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--titre-clair); }

/* ---------- 9. Valeurs ---------- */
.qsn-valeurs-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.qsn-valeurs-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--gris-clair); }
.qsn-valeurs-liste strong { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.05; color: var(--titre-clair); transition: color 0.4s ease; }
.qsn-valeurs-liste li:hover strong { color: var(--bordeaux-clair); }
.qsn-valeurs-liste span { color: var(--texte-corps); font-size: 1.05rem; }

/* ---------- 10. Contact ---------- */
.qsn-contact-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; color: var(--texte-corps); }
.qsn-contact-liste a { color: var(--titre-clair); text-decoration: none; border-bottom: 1px solid var(--bordeaux); }
.qsn-contact-liste a:hover { color: var(--bordeaux-clair); }
.qsn-contact .qsn-actions { margin-top: 2rem; }

/* ---------- Écrans moyens et téléphones ---------- */
@media (max-width: 980px) {
  .qsn-poles-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qsn-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .qsn-histoire-grille, .qsn-evenements, .qsn-services, .qsn-atouts, .qsn-criteres { grid-template-columns: 1fr; }
  .qsn-portrait { max-width: 22rem; }
  .qsn-criteres { margin-bottom: 3rem; }
  .qsn-poles-grille { grid-template-columns: 1fr; }
  .qsn-ouverture { min-height: 72vh; }
  .qsn-contact-liste { flex-direction: column; align-items: center; }
}

/* ---------- Moins de mouvement demandé par l'appareil ---------- */
@media (prefers-reduced-motion: reduce) {
  .qsn-diaporama img, .qsn-evenement-photo img { transition: none; }
  .qsn-diaporama img.actif, .qsn-evenement-photo img.actif { animation: none; transform: none; }
  .qsn-mot, .qsn-point, .qsn-apparait { animation: none; opacity: 1; transform: none; }
  .qsn-defiler span { animation: none; }
  .qsn-visages-piste { animation: none; flex-wrap: nowrap; overflow-x: auto; width: auto; }
  .qsn-etapes::after { transform: none; }
  .qsn-marques-fond img { transform: none; }
}

/* =====================================================================
   Mise en mouvement (06/10/2026, « on doit sentir les animations »).
   Tout est placé sous .qsn-mouvement, classe posée par le JS seulement si
   l'appareil accepte les animations : sans JS, la page reste lisible et fixe.
   ===================================================================== */

/* Barre de lecture en haut de l'écran */
.qsn-progression {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: linear-gradient(90deg, var(--bordeaux), var(--bordeaux-clair));
  transform-origin: left; transform: scaleX(var(--qsn-lu, 0));
  box-shadow: none;
  pointer-events: none;
}

/* Photos : la nouvelle entre en volet par-dessus la précédente */
.qsn-diaporama img.precedent, .qsn-evenement-photo img.precedent { opacity: 1; z-index: 1; }
.qsn-diaporama img.actif, .qsn-evenement-photo img.actif {
  opacity: 1; z-index: 2;
  animation: qsn-volet 1.5s cubic-bezier(0.77, 0, 0.18, 1) both, qsn-zoom 9s linear both;
}
@keyframes qsn-volet {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.qsn-diaporama img, .qsn-evenement-photo img { transition: none; }

/* Ouverture : parallaxe à la souris, sortie en douceur au défilement */
.qsn-mouvement .qsn-diaporama {
  inset: -40px;
  transform: translate3d(calc(var(--qsn-mx, 0) * -36px), calc(var(--qsn-my, 0) * -24px + var(--qsn-sortie, 0) * 180px), 0);
  transition: transform 0.6s ease-out;
}
.qsn-mouvement .qsn-ouverture-texte {
  transform: translate3d(calc(var(--qsn-mx, 0) * 14px), calc(var(--qsn-sortie, 0) * -120px), 0);
  opacity: calc(1 - var(--qsn-sortie, 0) * 1.6);
  transition: transform 0.6s ease-out;
}
/* Faisceau de lumière qui balaie l'ouverture */
.qsn-mouvement .qsn-voile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.09) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: qsn-balayage 7s ease-in-out 2.4s infinite;
}
@keyframes qsn-balayage { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }

/* Titre d'ouverture lettre par lettre */
.qsn-mouvement .qsn-lettres { opacity: 1; animation: none; }
.qsn-mot-entier { display: inline-block; white-space: nowrap; }
.qsn-mouvement .qsn-lettre {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotate(8deg) scale(0.9);
  filter: blur(6px);
  animation: qsn-lettre 1.1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(0.25s + var(--i) * 0.045s);
}
@keyframes qsn-lettre { to { opacity: 1; transform: none; filter: blur(0); } }

/* Titres de section : mots qui montent derrière un cache */
.qsn-cache { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.qsn-cache > span { display: inline-block; }
.qsn-mouvement .qsn-mots .qsn-cache > span {
  transform: translateY(105%) skewY(6deg);
  transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i) * 0.08s);
}
.qsn-mouvement .qsn-mots.qsn-vu .qsn-cache > span { transform: none; }

/* Photos (portrait, événements) dévoilées en rideau */
.qsn-mouvement .qsn-rideau { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.18, 1); }
.qsn-mouvement .qsn-rideau.qsn-vu { clip-path: inset(0 0 0 0); }
.qsn-mouvement .qsn-portrait img { transform: scale(1.25); transition: transform 2.2s cubic-bezier(0.19, 1, 0.22, 1); }
.qsn-mouvement .qsn-portrait.qsn-vu img { transform: scale(1); }
.qsn-mouvement .qsn-portrait::before { transform: translate(-1.2rem, -1.2rem); opacity: 0; transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1) 0.6s, opacity 1s ease 0.6s; }
.qsn-mouvement .qsn-portrait.qsn-vu::before { transform: none; opacity: 1; }
/* le cadre décoratif dépasse : le rideau ne doit pas le couper */
.qsn-mouvement .qsn-portrait.qsn-rideau.qsn-vu { clip-path: inset(-2rem -2rem -2rem -2rem); }
.qsn-evenement:hover .qsn-evenement-photo { box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); }

/* Pôles : arrivée en bascule, inclinaison 3D sous la souris */
.qsn-mouvement .qsn-poles-grille { perspective: 1000px; background: transparent; border: 0; gap: 1rem; }
.qsn-mouvement .qsn-pole { border: 1px solid var(--gris-clair); }
.qsn-mouvement .qsn-pole.reveal { transform: translateY(80px) rotateX(-35deg); transform-origin: 50% 100%; transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), background 0.5s ease, box-shadow 0.5s ease; }
.qsn-mouvement .qsn-pole.reveal.visible { transform: rotateX(var(--qsn-rx, 0deg)) rotateY(var(--qsn-ry, 0deg)); }
.qsn-mouvement .qsn-pole.qsn-incline { transition: opacity 0.9s ease, transform 0.25s ease-out, background 0.5s ease, box-shadow 0.5s ease; }
.qsn-mouvement .qsn-pole:hover { box-shadow: 0 30px 60px -25px rgba(0,0,0,0.9); }
.qsn-mouvement .qsn-pole-num { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s ease; }
.qsn-mouvement .qsn-pole:hover .qsn-pole-num { transform: translateX(0.4rem) scale(1.15); color: var(--titre-clair); }
.qsn-mouvement .qsn-pole.reveal-delay-1.visible { transition-delay: 0.12s; }
.qsn-mouvement .qsn-pole.reveal-delay-2.visible { transition-delay: 0.24s; }
.qsn-mouvement .qsn-pole.qsn-incline.visible { transition-delay: 0s; }

/* Grands mots qui glissent au défilement */
.qsn-bandeau-texte { overflow: hidden; padding: 1.4rem 0; border-block: 1px solid var(--gris-clair); }
.qsn-bandeau-piste {
  display: flex; gap: 3rem; width: max-content; white-space: nowrap;
  transform: translate3d(var(--qsn-glisse, 0px), 0, 0);
  will-change: transform;
}
.qsn-bandeau-texte[data-sens="-1"] .qsn-bandeau-piste { margin-left: -100vw; }
.qsn-bandeau-piste span {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(3.2rem, 11vw, 9rem); line-height: 1;
  color: var(--encre); -webkit-text-stroke: 0;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.qsn-bandeau-piste span:nth-child(3n+2) { color: var(--bordeaux-clair); -webkit-text-stroke: 0; }
.qsn-bandeau-piste span::after { content: "·"; margin-left: 3rem; color: var(--bordeaux-clair); -webkit-text-stroke: 0; }

/* Visages : deux rangées en sens contraires */
.qsn-visages-inverse { margin-top: 0.8rem; animation-direction: reverse; animation-duration: 75s; }
.qsn-visages:hover .qsn-visages-inverse { animation-play-state: paused; }

/* Étapes : chaque étape arrive de la droite, le numéro « saute » */
.qsn-mouvement .qsn-etape.reveal { transform: translateX(70px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); }
.qsn-mouvement .qsn-etape.reveal.visible { transform: none; }
.qsn-mouvement .qsn-etape.visible .qsn-etape-num { animation: qsn-saut 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; box-shadow: 0 0 0 0 rgba(213,84,104,0.6); }
@keyframes qsn-saut {
  0% { transform: scale(0.3); box-shadow: 0 0 0 0 rgba(213,84,104,0.7); }
  60% { transform: scale(1.18); box-shadow: 0 0 0 14px rgba(213,84,104,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(213,84,104,0); }
}
.qsn-mouvement .qsn-critere.reveal { transform: translateY(40px) scale(0.94); transition: opacity 0.9s ease, transform 1s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.4s ease; }
.qsn-mouvement .qsn-critere.reveal.visible { transform: none; }
.qsn-critere:hover { border-color: var(--bordeaux-clair); }

/* Atouts et services : arrivées croisées */
.qsn-mouvement .qsn-atouts li.reveal { transform: translateY(50px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); }
.qsn-mouvement .qsn-atouts li.reveal.visible { transform: none; }
.qsn-atouts li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--bordeaux-clair); transition: width 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s; }
.qsn-atouts li.visible::before { width: 100%; }
.qsn-mouvement .qsn-services li.reveal:nth-child(odd) { transform: translateX(-80px); }
.qsn-mouvement .qsn-services li.reveal:nth-child(even) { transform: translateX(80px); }
.qsn-mouvement .qsn-services li.reveal { transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.qsn-mouvement .qsn-services li.reveal.visible { transform: none; }
.qsn-services li:hover { background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent 70%); }

/* Valeurs : chaque mot avance à sa propre vitesse */
.qsn-valeurs-liste li > * { display: inline-block; transform: translate3d(var(--qsn-avance, 0px), 0, 0); transition: transform 0.4s ease-out, color 0.4s ease; }

/* Partenaires : apparition en cascade */
.qsn-mouvement .qsn-partenaires li { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); }
.qsn-mouvement .qsn-partenaires.visible li { opacity: 1; transform: none; }
.qsn-mouvement .qsn-partenaires.visible li:nth-child(2) { transition-delay: 0.12s; }
.qsn-mouvement .qsn-partenaires.visible li:nth-child(3) { transition-delay: 0.24s; }
.qsn-mouvement .qsn-partenaires.visible li:nth-child(4) { transition-delay: 0.36s; }
.qsn-mouvement .qsn-partenaires.visible li:nth-child(5) { transition-delay: 0.48s; }

/* Boutons : légère pulsation du bouton principal */
.qsn-mouvement .qsn-actions .btn--principal { animation: qsn-pulse 3.2s ease-in-out infinite; }
@keyframes qsn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0.06), 0 0 28px rgba(255,255,255,0.12); } }

@media (max-width: 720px) {
  .qsn-mouvement .qsn-services li.reveal:nth-child(odd), .qsn-mouvement .qsn-services li.reveal:nth-child(even) { transform: translateX(-40px); }
  .qsn-mouvement .qsn-etape.reveal { transform: translateX(40px); }
  .qsn-bandeau-piste span::after { margin-left: 1.6rem; }
  .qsn-bandeau-piste { gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .qsn-progression, .qsn-voile::after { display: none; }
  .qsn-diaporama img.actif, .qsn-evenement-photo img.actif { animation: none; clip-path: none; }
  .qsn-bandeau-piste, .qsn-valeurs-liste li > * { transform: none; }
  .qsn-visages-inverse { display: none; }
}