/* Cartes de la section « Les questions que vous vous posez » : une petite scène animée par situation.
   Chargé sur l'accueil seulement, après riova.css. Les animations jouent quand la carte est à l'écran (js/situations.js). */

/* La rangée défile seulement de côté : sans overflow-y, l'iPhone la laisse bouger un peu à la verticale,
   et le geste du pouce reste pris dans la rangée au lieu de faire descendre la page. */
.carrousel__piste { align-items: stretch; overflow-y: hidden; touch-action: pan-x pan-y; }
.situation { color: var(--texte); overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-user-drag: none; }

/* Sur un écran tactile, pas d'effet de survol : la carte ne se soulève pas sous le pouce. */
@media (hover: none) {
  .situation:hover { transform: none; box-shadow: none; }
}

.situation__visuel.a { padding: 0; display: block; }
.a svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.a__haut { position: absolute; z-index: 2; left: 20px; top: 18px; right: 20px; pointer-events: none; }
.a__haut .puce { position: static; display: flex; margin-bottom: 6px; }
.a__bas { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 14px; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 650; pointer-events: none; }
.a__num { font-size: 44px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.a__lab { font-size: 13px; font-weight: 600; line-height: 1.25; display: block; }
.a svg * { transform-box: fill-box; }
.pause, .pause * { animation-play-state: paused !important; }

/* A1 : nouveaux parents. L'enfant grandit, le soleil passe, les années défilent. */
.sa-parents .situation__visuel { background: var(--cuivre-pale); color: #6d4426; }
.sa-parents .a__num { color: var(--cuivre-fonce); }
.a1-enfant { transform-origin: 50% 100%; animation: a1-grandit 7s var(--douce) infinite; }
@keyframes a1-grandit { 0% { transform: scale(0.42); } 78%, 100% { transform: scale(1); } }
.a1-soleil { animation: a1-soleil 7s linear infinite; }
@keyframes a1-soleil { 0% { transform: translate(-40px, 44px); } 50% { transform: translate(14px, -12px); } 100% { transform: translate(68px, 44px); } }
.a1-fenetre { animation: a1-fenetre 7s steps(1) infinite; }
@keyframes a1-fenetre { 0%, 18%, 82%, 100% { fill: #eab58e; } 19%, 81% { fill: #fbe8d8; } }

/* A2 : premiers propriétaires. Un parapluie rétrécit, l'autre reste. */
.sa-maison { background: var(--noir); color: var(--blanc); border-color: transparent; }
.sa-maison .situation__visuel { background: transparent; }
.sa-maison .puce { color: var(--cuivre-clair); }
.sa-maison .a__lab { color: rgba(255,255,255,.72); }
.sa-maison .situation__texte p { color: inherit; opacity: .78; }
.sa-maison .lien { color: var(--cuivre-clair); }
.a svg .a2-fleau { transform-box: view-box; transform-origin: 170px 100px; animation: a2-fleau 3.4s ease-in-out infinite alternate; }
@keyframes a2-fleau { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.a2-gauche { animation: a2-gauche 3.4s ease-in-out infinite alternate; }
@keyframes a2-gauche { from { transform: translateY(10.6px); } to { transform: translateY(-10.6px); } }
.a2-droite { animation: a2-droite 3.4s ease-in-out infinite alternate; }
@keyframes a2-droite { from { transform: translateY(-10.6px); } to { transform: translateY(10.6px); } }

/* A3 : travailleurs autonomes. La batterie se vide. */
.sa-autonome { background: linear-gradient(180deg, #e2a77d 0%, #c98a5e 100%); color: #1a1310; border-color: transparent; }
.sa-autonome .situation__visuel { background: transparent; }
.sa-autonome .puce, .sa-autonome .a__bas { color: #3f2715; }
.sa-autonome .situation__texte p { color: inherit; opacity: .78; }
.a3-cell { fill: #1a1310; }
.a3-cell--3 { animation: a3-c3 8s var(--douce) infinite; }
.a3-cell--2 { animation: a3-c2 8s var(--douce) infinite; }
.a3-cell--1 { animation: a3-c1 8s var(--douce) infinite; }
@keyframes a3-c3 { 0%, 12% { opacity: 1; } 18%, 90% { opacity: .1; } 96%, 100% { opacity: 1; } }
@keyframes a3-c2 { 0%, 32% { opacity: 1; } 38%, 90% { opacity: .1; } 96%, 100% { opacity: 1; } }
@keyframes a3-c1 { 0%, 52% { opacity: 1; } 58%, 90% { opacity: .1; } 96%, 100% { opacity: 1; } }
.a3-coque { animation: a3-alerte 8s linear infinite; }
@keyframes a3-alerte { 0%, 58%, 90%, 100% { opacity: 1; } 62%, 70%, 78%, 86% { opacity: .3; } 66%, 74%, 82% { opacity: 1; } }

/* A4 : entreprise. La part de l'associé se détache. */
.sa-entreprise { background: var(--sauge-pale); border-color: transparent; }
.sa-entreprise .situation__visuel { background: transparent; color: #1f3a2c; }
.sa-entreprise .puce { color: var(--sauge-fonce); }
.sa-entreprise .situation__texte p { color: #47584d; }
.sa-entreprise .lien { color: var(--sauge-fonce); }
.a4-part { animation: a4-part 5.5s var(--douce) infinite; }
@keyframes a4-part { 0%, 14%, 92%, 100% { transform: translate(0, 0); opacity: 1; } 38%, 72% { transform: translate(44px, -8px); opacity: .55; } }
.a4-q { transform-origin: 50% 50%; animation: a4-q 5.5s var(--ressort) infinite; }
@keyframes a4-q { 0%, 24%, 80%, 100% { transform: scale(0); opacity: 0; } 40%, 68% { transform: scale(1); opacity: 1; } }

/* A5 : entrepreneurs incorporés. Les pièces dorment, le réveil sonne, elles se mettent au travail. */
.sa-societe .situation__visuel { background: #17181a; color: var(--blanc); }
.sa-societe .puce { color: var(--cuivre-clair); }
.sa-societe .a__lab { color: rgba(255,255,255,.76); }

.a5b-piece { animation: a5b-saut 8s var(--douce) infinite; }
.a5b-piece--2 { animation-delay: .12s; }
.a5b-piece--3 { animation-delay: .24s; }
@keyframes a5b-saut { 0%, 52% { transform: translateY(0); } 57% { transform: translateY(-26px); } 62% { transform: translateY(0); } 67% { transform: translateY(-18px); } 72% { transform: translateY(0); } 77% { transform: translateY(-12px); } 82%, 100% { transform: translateY(0); } }
.a5b-dort { animation: a5b-dort 8s steps(1) infinite; }
@keyframes a5b-dort { 0%, 51%, 96%, 100% { opacity: 1; } 52%, 95% { opacity: 0; } }
.a5b-eveil { animation: a5b-eveil 8s steps(1) infinite; }
@keyframes a5b-eveil { 0%, 51%, 96%, 100% { opacity: 0; } 52%, 95% { opacity: 1; } }
.a5b-z { font-family: var(--police); font-weight: 700; fill: #eab58e; animation: a5b-z 8s ease-in-out infinite; }
@keyframes a5b-z { 0%, 44% { opacity: 1; transform: translateY(0); } 50%, 96% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(0); } }
.a svg .a5b-reveil { transform-box: fill-box; transform-origin: 50% 50%; animation: a5b-sonne 8s linear infinite; }
@keyframes a5b-sonne { 0%, 45%, 58%, 100% { transform: rotate(0); } 46%, 48%, 50%, 52%, 54%, 56% { transform: rotate(-10deg); } 47%, 49%, 51%, 53%, 55%, 57% { transform: rotate(10deg); } }
.a5b-txt { position: relative; display: block; height: 18px; font-size: 13px; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,.76); }
.a5b-txt span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.a5b-txt span:first-child { animation: a5b-dort 8s steps(1) infinite; }
.a5b-txt span:last-child { color: var(--cuivre-clair); animation: a5b-eveil 8s steps(1) infinite; }

/* A6 : préretraités. Le soleil se lève sur la mer, l'âge monte. */
.sa-retraite { background: var(--gris); border-color: transparent; }
.sa-retraite .situation__visuel { background: transparent; color: var(--texte); }
.sa-retraite .situation__texte p { color: var(--texte-2); }
.a6-soleil { animation: a6-soleil 7s var(--douce) infinite; }
@keyframes a6-soleil { 0% { transform: translate(0, 62px); } 70%, 100% { transform: translate(0, 0); } }
.a6-vague { animation: a6-vague 5s linear infinite; }
.a6-vague--2 { animation-duration: 8s; animation-direction: reverse; }
@keyframes a6-vague { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.a6-bateau { animation: a6-bateau 3.4s ease-in-out infinite alternate; }
@keyframes a6-bateau { from { transform: translate(0, 0) rotate(-3deg); } to { transform: translate(14px, -3px) rotate(3deg); } }

/* A7 : retraités. Trois pots se vident, l'un après l'autre. */
.sa-decaissement .situation__visuel { background: var(--sauge-fonce); color: var(--blanc); }
.sa-decaissement .puce { color: #cfe6d7; }
.sa-decaissement .a__lab { color: rgba(255,255,255,.82); }
.a7-eau { transform-origin: 50% 100%; animation: a7-vide 9s var(--douce) infinite; animation-delay: var(--r); fill: #93c4a9; }
@keyframes a7-vide { 0% { transform: scaleY(1); } 28%, 86% { transform: scaleY(0.04); } 96%, 100% { transform: scaleY(1); } }
.a7-goutte { animation: a7-goutte 9s linear infinite; animation-delay: var(--r); opacity: 0; fill: #cfe6d7; }
@keyframes a7-goutte { 0% { opacity: 1; transform: translateY(0); } 3% { opacity: 1; transform: translateY(14px); opacity: 0; } 4%, 100% { opacity: 0; } }
@media (max-width: 700px) { .a7-bas { font-size: 11px; } }
.a7-bas { justify-content: space-around; text-align: center; font-size: 12px; color: #dcebe2; }
.a7-bas span { flex: 1; }
.a7-bas b { display: block; font-size: 15px; color: #fff; }

@media (max-width: 700px) { .a__num { font-size: 40px; } }

@media (prefers-reduced-motion: reduce) {
  .situation__visuel.a *, .situation__visuel.a { animation: none !important; }
  .a5b-eveil, .a5b-txt span:last-child { opacity: 0; }
}