/* Mosaïque des fonctions (section #fonctions)
   Une tuile = une fonction de l’app, montrée par une mini-démo en HTML/CSS.
   Couleurs du thème « seance » (mobile/src/theme.ts). Tout est préfixé .mosaique- ou #fonctions. */

#fonctions{
  --m-canvas:#110D0E;--m-surface:#1B1618;--m-raised:#241E21;--m-warm:#2E2230;
  --m-accent:#A23BE0;--m-accent-light:#C77DF2;--m-star:#F5B65C;--m-ink:#F7F2F0;--m-muted:#A99FA2;
  --m-hair:rgba(255,255,255,.08);--m-hair-fort:rgba(255,255,255,.14);
  --m-doux:cubic-bezier(.16,1,.3,1);
  padding:clamp(96px,14vh,150px) clamp(20px,4vw,48px) 40px;text-align:center;color:var(--m-ink)
}

/* En-tête de section */
#fonctions .mosaique-titre{font:400 clamp(52px,7.4vw,110px)/.9 "League Gothic",sans-serif;text-transform:uppercase;letter-spacing:.005em}
#fonctions .mosaique-titre span{color:var(--m-accent)}
#fonctions .mosaique-chapo{max-width:40ch;margin:18px auto 0;font-size:18px;line-height:1.55;color:#d8ccd1}
#fonctions .mosaique-bouton{display:inline-flex;align-items:center;justify-content:center;height:52px;margin-top:24px;padding:0 24px;border-radius:26px;background:var(--m-accent);color:#fff;font:800 16px/1 "Nunito Sans",system-ui,sans-serif;text-decoration:none;transition:background .2s,transform .2s var(--m-doux)}
#fonctions .mosaique-bouton:hover{background:#8F2DCC}
#fonctions .mosaique-bouton:active{transform:scale(.97)}
.mosaique-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Grille éditoriale : 4 colonnes, 4 rangées, rien de vide */
.mosaique-grille{
  display:grid;gap:16px;max-width:1360px;margin:56px auto 0;text-align:left;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:
    "envie envie esprit dejavu"
    "tend  tend  esprit dejavu"
    "duel  ou    ou     pyrio"
    "duel  deux  import pyrio";
}
.mosaique-envie{grid-area:envie}
.mosaique-esprit{grid-area:esprit}
.mosaique-dejavu{grid-area:dejavu}
.mosaique-tendances{grid-area:tend}
.mosaique-duel{grid-area:duel}
.mosaique-ou-regarder{grid-area:ou}
.mosaique-pyrio{grid-area:pyrio}
.mosaique-deux{grid-area:deux}
.mosaique-import{grid-area:import}

.mosaique-tuile{display:flex;flex-direction:column;min-width:0;padding:10px 10px 24px;border-radius:24px;background:var(--m-surface);box-shadow:inset 0 0 0 1px var(--m-hair)}
.mosaique-scene{position:relative;height:250px;border-radius:16px;background:var(--m-canvas);overflow:hidden;container-type:inline-size;font-family:"Nunito Sans",system-ui,sans-serif;color:var(--m-ink);line-height:1.3}
.mosaique-haute .mosaique-scene{flex:1;height:auto;min-height:300px}
.mosaique-texte{padding:18px 12px 0}
.mosaique-texte h3{font:400 34px/.95 "League Gothic",sans-serif;text-transform:uppercase;letter-spacing:.005em}
.mosaique-texte p{margin-top:8px;max-width:44ch;font-size:15px;line-height:1.5;color:#d8ccd1}
.mosaique-scene img{display:block;max-width:none}
.mosaique-scene svg{display:block}

/* Les animations ne tournent que si la tuile est visible */
.mosaique-tuile:not(.mosaique-joue) .mosaique-scene *{animation-play-state:paused!important}

/* ---------- 1. Décris ton envie ---------- */
.mosaique-envie .mosaique-scene{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:0 20px}
.mosaique-champ{display:flex;align-items:center;gap:10px;width:100%;max-width:470px;height:60px;padding:0 10px 0 16px;border-radius:30px;background:var(--m-surface);box-shadow:inset 0 0 0 2px var(--m-accent)}
.mosaique-champ-retour{width:20px;height:20px;flex:none;color:var(--m-ink)}
.mosaique-champ-texte{position:relative;flex:1;min-width:0;height:28px;overflow:hidden;font:700 18px/28px "Nunito Sans",sans-serif;white-space:nowrap}
.mosaique-champ-ecrit,.mosaique-curseur{display:inline-block;vertical-align:top}
.mosaique-champ-texte>*{transition:transform .12s linear}
.mosaique-champ-vide{position:absolute;left:0;top:0;color:var(--m-muted);transition:opacity .2s}
.mosaique-envie.mosaique-ecrit .mosaique-champ-vide{opacity:0}
.mosaique-curseur{width:2px;height:22px;margin:3px 0 0 2px;background:var(--m-accent-light);animation:mosaique-clignote 1s steps(1) infinite}
@keyframes mosaique-clignote{50%{opacity:0}}
.mosaique-lecture{flex:none;height:26px;padding:0 10px;border-radius:13px;background:var(--m-accent);color:#fff;font:800 11px/26px "Nunito Sans",sans-serif;letter-spacing:.8px;text-transform:uppercase;opacity:0;transform:scale(.7);transition:opacity .25s,transform .35s var(--m-doux)}
.mosaique-envie.mosaique-lu .mosaique-lecture{opacity:1;transform:none}
.mosaique-issue{position:relative;width:100%;max-width:470px;height:64px}
.mosaique-issue>div{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .45s var(--m-doux)}
.mosaique-issue-film{gap:14px;padding:0 6px}
.mosaique-issue-film img{width:40px;height:60px;border-radius:6px;object-fit:cover}
.mosaique-issue-film span{flex:1;display:flex;align-items:center;gap:8px;font:800 17px "Nunito Sans",sans-serif}
.mosaique-issue-film em{font:800 13px/1 "Nunito Sans",sans-serif;font-style:normal;padding:5px 9px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--m-hair-fort)}
.mosaique-issue-film svg{width:22px;height:22px;color:var(--m-accent-light)}
.mosaique-issue-envie{justify-content:center;gap:10px;height:52px;margin:6px auto 0;border-radius:26px;background:var(--m-accent);color:#fff;font:800 16px "Nunito Sans",sans-serif}
.mosaique-issue-envie svg{width:20px;height:20px}
.mosaique-envie.mosaique-lu[data-lecture="film"] .mosaique-issue-film,
.mosaique-envie.mosaique-lu[data-lecture="envie"] .mosaique-issue-envie{opacity:1;transform:none}
@container (max-width:380px){
  .mosaique-champ-retour{display:none}
  .mosaique-champ{padding-left:18px}
  .mosaique-champ-texte{font-size:15px}
}

/* ---------- 2. Dans l’esprit de… ---------- */
.mosaique-esprit .mosaique-scene{display:flex;flex-direction:column;padding:14px 16px 16px;gap:12px}
.mosaique-depart{display:flex;align-items:center;gap:10px}
.mosaique-depart img{width:28px;height:42px;border-radius:5px;object-fit:cover}
.mosaique-depart small{display:block;font:600 12px "Nunito Sans",sans-serif;color:var(--m-muted)}
.mosaique-depart b{display:block;font:800 15px "Nunito Sans",sans-serif}
.mosaique-pile{position:relative;flex:1;min-height:0}
.mosaique-carte{position:absolute;top:4%;left:50%;height:92%;aspect-ratio:2/3;translate:-50% 0;border-radius:14px;overflow:hidden;box-shadow:0 18px 34px -16px #000,0 0 0 1px var(--m-hair-fort)}
.mosaique-carte img{width:100%;height:100%;object-fit:cover}
.mosaique-carte::after{content:"Garder";position:absolute;right:10px;top:12px;padding:5px 10px;border-radius:12px;background:var(--m-accent);color:#fff;font:800 12px "Nunito Sans",sans-serif;opacity:0;animation:inherit;animation-name:mosaique-tampon}
.mosaique-carte-a{animation:mosaique-pile 8s var(--m-doux) infinite}
.mosaique-carte-b{animation:mosaique-pile 8s var(--m-doux) -4s infinite}
@keyframes mosaique-pile{
  0%,36%{transform:none;opacity:1;z-index:2}
  48%{transform:translateX(120%) rotate(14deg);opacity:0;z-index:2}
  49%{transform:translateY(5%) scale(.9);opacity:0;z-index:1}
  60%,86%{transform:translateY(5%) scale(.9);opacity:.45;z-index:1}
  98%,100%{transform:none;opacity:1;z-index:1}
}
@keyframes mosaique-tampon{0%,28%{opacity:0}34%,44%{opacity:1}49%,100%{opacity:0}}
.mosaique-fiches{position:relative;height:96px;text-align:center}
.mosaique-fiche{position:absolute;inset:0}
.mosaique-fiche b{display:block;font:400 26px/1 "League Gothic",sans-serif;text-transform:uppercase}
.mosaique-fiche small{display:block;margin-top:4px;font:600 12px "Nunito Sans",sans-serif;color:var(--m-muted)}
.mosaique-fiche p{display:flex;justify-content:center;gap:6px;margin-top:8px;font:500 13px/1.35 "Nunito Sans",sans-serif;color:var(--m-muted)}
.mosaique-fiche p svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--m-accent-light)}
.mosaique-fiche strong{color:var(--m-ink);font-weight:800}
.mosaique-fiche-a{animation:mosaique-fiche 8s ease infinite}
.mosaique-fiche-b{animation:mosaique-fiche 8s ease -4s infinite}
@keyframes mosaique-fiche{0%,40%{opacity:1;transform:none}46%,92%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* ---------- 5. Déjà vu ---------- */
.mosaique-dejavu .mosaique-scene{display:flex;flex-direction:column;align-items:center;padding:20px 16px 0}
.mosaique-dejavu-titre{display:flex;align-items:center;gap:6px;color:var(--m-star);font:400 22px/1 "League Gothic",sans-serif;text-transform:uppercase;letter-spacing:.06em;animation:mosaique-dejavu-titre 5s ease infinite}
.mosaique-dejavu-titre svg{width:16px;height:16px}
@keyframes mosaique-dejavu-titre{0%,8%{opacity:.35}18%,82%{opacity:1}96%,100%{opacity:.35}}
.mosaique-etoiles{display:flex;gap:10px;margin-top:14px}
.mosaique-etoiles span{position:relative;width:30px;height:30px}
.mosaique-etoiles svg{position:absolute;inset:0;width:30px;height:30px;fill:#3A3034}
.mosaique-etoiles .mosaique-plein{fill:var(--m-star);opacity:0}
.mosaique-etoiles span:nth-child(1) .mosaique-plein{animation:mosaique-etoile-1 5s ease infinite}
.mosaique-etoiles span:nth-child(2) .mosaique-plein{animation:mosaique-etoile-2 5s ease infinite}
.mosaique-etoiles span:nth-child(3) .mosaique-plein{animation:mosaique-etoile-3 5s ease infinite}
@keyframes mosaique-etoile-1{0%,22%{opacity:0;transform:scale(.6)}27%{opacity:1;transform:scale(1.15)}30%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes mosaique-etoile-2{0%,40%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.15)}48%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes mosaique-etoile-3{0%,58%{opacity:0;transform:scale(.6)}63%{opacity:1;transform:scale(1.15)}66%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
.mosaique-monte{position:relative;flex:1;width:100%;min-height:0}
.mosaique-monte-carte{position:absolute;left:50%;bottom:-6%;height:76%;aspect-ratio:2/3;translate:-50% 0;border-radius:14px;overflow:hidden;box-shadow:0 18px 34px -16px #000;animation:mosaique-monte 5s cubic-bezier(.4,0,.2,1) infinite}
.mosaique-monte-carte img{width:100%;height:100%;object-fit:cover}
.mosaique-monte-carte::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 3px var(--m-star);opacity:0;animation:inherit;animation-name:mosaique-bord}
@keyframes mosaique-monte{0%,10%{transform:none}27%{transform:translateY(-7%)}45%{transform:translateY(-14%)}63%,80%{transform:translateY(-21%)}94%,100%{transform:none}}
@keyframes mosaique-bord{0%,14%{opacity:0}24%,82%{opacity:1}92%,100%{opacity:0}}
.mosaique-doigt{position:absolute;left:50%;bottom:16%;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:rgba(247,242,240,.22);box-shadow:0 0 0 2px rgba(247,242,240,.55);animation:mosaique-doigt 5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mosaique-doigt{
  0%,6%{opacity:0;transform:scale(.7)}
  10%{opacity:1;transform:none}
  27%{transform:translateY(-120%)}
  45%{transform:translateY(-240%)}
  63%,72%{opacity:1;transform:translateY(-360%)}
  80%,100%{opacity:0;transform:translateY(-360%)}
}

/* ---------- 3. Tendances / Nouveautés / Au cinéma ---------- */
.mosaique-tendances .mosaique-scene{display:flex;flex-direction:column;gap:16px;padding:18px 0 18px 18px}
.mosaique-puces{display:flex;gap:8px}
.mosaique-puce{position:relative;height:36px;padding:0 15px;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--m-hair-fort);font:800 14px/36px "Nunito Sans",sans-serif;white-space:nowrap;isolation:isolate}
.mosaique-puce::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:18px;background:var(--m-accent);opacity:0;transform:scale(.85);transition:opacity .3s,transform .4s var(--m-doux)}
.mosaique-puce.mosaique-on::before{opacity:1;transform:none}
.mosaique-rangees{position:relative;flex:1;min-height:0}
.mosaique-rangee{position:absolute;inset:0;display:flex;gap:10px;opacity:0;transform:translateX(24px);transition:opacity .45s,transform .6s var(--m-doux)}
.mosaique-rangee.mosaique-on{opacity:1;transform:none}
.mosaique-rangee.mosaique-sort{opacity:0;transform:translateX(-24px)}
.mosaique-rangee figure{position:relative;flex:none;height:100%;aspect-ratio:2/3}
.mosaique-rangee img{width:100%;height:100%;border-radius:10px;object-fit:cover}
.mosaique-rangee b{position:absolute;left:6px;top:6px;min-width:26px;height:26px;border-radius:7px;background:var(--m-accent);color:#fff;font:800 14px/26px "Nunito Sans",sans-serif;text-align:center}
@container (max-width:380px){
  .mosaique-puces{gap:6px}
  .mosaique-puce{padding:0 11px;font-size:13px}
}

/* ---------- 4. Le duel ---------- */
.mosaique-duel .mosaique-scene{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 14px}
.mosaique-duel-tete{text-align:center;margin-bottom:6px}
.mosaique-tour{display:block;font:800 12px "Nunito Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--m-accent-light);transition:opacity .25s}
.mosaique-tour.mosaique-change{opacity:0}
.mosaique-duel-tete b{display:block;margin-top:4px;font:400 30px/1 "League Gothic",sans-serif;text-transform:uppercase}
.mosaique-duel-film{position:relative;display:flex;align-items:center;gap:14px;padding:10px;border-radius:18px;background:var(--m-surface);box-shadow:inset 0 0 0 1px var(--m-hair-fort)}
.mosaique-duel-film img{width:clamp(64px,26cqw,92px);aspect-ratio:2/3;border-radius:10px;object-fit:cover;flex:none}
.mosaique-duel-film b{display:block;font:400 26px/1 "League Gothic",sans-serif;text-transform:uppercase}
.mosaique-duel-film small{display:block;margin-top:5px;font:600 13px "Nunito Sans",sans-serif;color:var(--m-muted)}
.mosaique-duel-reste::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 2.5px var(--m-accent);opacity:0;transition:opacity .25s}
.mosaique-duel-reste{transition:transform .35s var(--m-doux)}
.mosaique-duel.mosaique-choisi .mosaique-duel-reste{transform:scale(1.03)}
.mosaique-duel.mosaique-choisi .mosaique-duel-reste::after{opacity:1}
.mosaique-ou{text-align:center;font:400 24px/1 "League Gothic",sans-serif;text-transform:uppercase;color:var(--m-accent)}
.mosaique-duel-bas{display:grid}
.mosaique-duel-bas>.mosaique-duel-film{grid-area:1/1;opacity:0;transform:translateX(40px);transition:opacity .35s,transform .5s var(--m-doux)}
.mosaique-duel-bas>.mosaique-on{opacity:1;transform:none}
.mosaique-duel-bas>.mosaique-sort{opacity:0;transform:translateY(16px) scale(.94)}

/* ---------- 6. Tu regardes où ? ---------- */
.mosaique-ou-regarder .mosaique-scene{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:18px}
.mosaique-pays{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:340px;height:46px;padding:4px;border-radius:23px;background:var(--m-surface);box-shadow:inset 0 0 0 1px var(--m-hair-fort)}
.mosaique-pays i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:19px;background:var(--m-accent);transition:transform .45s var(--m-doux)}
.mosaique-pays span{position:relative;display:grid;place-items:center;font:800 14px "Nunito Sans",sans-serif;transition:opacity .3s}
.mosaique-pays span:last-child{opacity:.55}
.mosaique-ou-regarder.mosaique-belgique .mosaique-pays i{transform:translateX(100%)}
.mosaique-ou-regarder.mosaique-belgique .mosaique-pays span:first-of-type{opacity:.55}
.mosaique-ou-regarder.mosaique-belgique .mosaique-pays span:last-child{opacity:1}
.mosaique-plateformes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mosaique-plateformes span{position:relative;display:grid;place-items:center;height:64px;padding:0 6px;border-radius:14px;background:var(--m-raised);font:800 14px/1.15 "Nunito Sans",sans-serif;text-align:center}
.mosaique-plateformes span::before{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(162,59,224,.16);box-shadow:inset 0 0 0 2px var(--m-accent);opacity:0;transition:opacity .25s}
.mosaique-plateformes i{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--m-accent);color:#fff;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--m-doux)}
.mosaique-plateformes i svg{width:12px;height:12px}
.mosaique-plateformes span.mosaique-on::before,.mosaique-plateformes span.mosaique-on i{opacity:1;transform:none}
@container (max-width:520px){
  .mosaique-pays{max-width:none}
  .mosaique-plateformes{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .mosaique-plateformes span{grid-column:span 2;height:52px;font-size:13px}
  .mosaique-plateformes span:nth-child(4){grid-column:2/span 2}
}

/* ---------- 7. Pyrio choisit pour toi ---------- */
.mosaique-pyrio .mosaique-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 14px;text-align:center}
.mosaique-pyrio-tete{width:96px;height:96px;object-fit:contain}
.mosaique-pyrio-titre{margin-top:8px;font:400 30px/1 "League Gothic",sans-serif;text-transform:uppercase}
.mosaique-pyrio-sous{margin-top:8px;max-width:30ch;font:500 14px/1.4 "Nunito Sans",sans-serif;color:var(--m-muted)}
.mosaique-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:330px;margin-top:26px;margin-bottom:12px}
.mosaique-cachee{perspective:700px;animation:mosaique-autres 6s ease infinite}
.mosaique-cachee>div{position:relative;aspect-ratio:2/3;transform-style:preserve-3d}
.mosaique-dos,.mosaique-face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mosaique-dos{display:grid;place-items:center;background:#3A2150;box-shadow:inset 0 0 0 1.5px rgba(199,125,242,.55);color:var(--m-accent-light);font:400 44px/1 "League Gothic",sans-serif}
.mosaique-face{width:100%;height:100%;object-fit:cover;transform:rotateY(180deg)}
.mosaique-cachee.mosaique-tourne{animation:none;z-index:1}
.mosaique-tourne>div{animation:mosaique-retourne 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mosaique-retourne{
  0%,14%{transform:none}
  22%{transform:translateY(-10%) scale(1.06)}
  36%,80%{transform:translateY(-6%) scale(1.22) rotateY(180deg)}
  94%,100%{transform:rotateY(360deg)}
}
@keyframes mosaique-autres{0%,22%{opacity:1}34%,80%{opacity:.35}92%,100%{opacity:1}}

/* ---------- 8. La séance à deux ---------- */
.mosaique-deux .mosaique-scene{display:flex;justify-content:center;gap:16px;padding:16px 14px}
.mosaique-joueur{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:130px}
.mosaique-qui{display:flex;align-items:center;gap:7px;font:800 13px "Nunito Sans",sans-serif}
.mosaique-qui i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--m-warm);color:var(--m-accent-light);font:800 11px/1 "Nunito Sans",sans-serif;font-style:normal}
.mosaique-joueur-2 .mosaique-qui i{background:var(--m-raised);color:var(--m-ink)}
.mosaique-mini{position:relative;flex:1;min-height:0;width:100%}
.mosaique-mini img{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:2/3;translate:-50% 0;border-radius:10px;object-fit:cover;transition:opacity .4s,transform .5s var(--m-doux)}
.mosaique-mini-b{opacity:0;transform:scale(.9)}
.mosaique-avis{position:relative;width:100%;height:26px}
.mosaique-avis em{position:absolute;left:50%;top:0;translate:-50% 0;height:26px;padding:0 12px;border-radius:13px;font:800 12px/26px "Nunito Sans",sans-serif;font-style:normal;white-space:nowrap;opacity:0;transform:scale(.6);transition:opacity .2s,transform .35s var(--m-doux)}
.mosaique-garde{background:var(--m-accent);color:#fff}
.mosaique-passe{background:var(--m-raised);color:var(--m-muted)}
.mosaique-match{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:10px 18px;border-radius:22px;background:var(--m-ink);color:var(--m-canvas);font:400 26px/1 "League Gothic",sans-serif;text-transform:uppercase;white-space:nowrap;box-shadow:0 14px 30px -10px #000;opacity:0;transform:scale(.6);transition:opacity .25s,transform .45s var(--m-doux)}
/* Étapes : 1 tu gardes, 2 Sam passe, 3 film suivant, 4 tu gardes, 5 Sam garde : match */
.mosaique-deux[data-etape="1"] .mosaique-joueur:first-child .mosaique-garde,
.mosaique-deux[data-etape="2"] .mosaique-joueur:first-child .mosaique-garde,
.mosaique-deux[data-etape="2"] .mosaique-joueur-2 .mosaique-passe,
.mosaique-deux[data-etape="4"] .mosaique-joueur:first-child .mosaique-garde,
.mosaique-deux[data-etape="5"] .mosaique-garde{opacity:1;transform:none}
.mosaique-deux[data-etape="3"] .mosaique-mini-a,.mosaique-deux[data-etape="4"] .mosaique-mini-a,.mosaique-deux[data-etape="5"] .mosaique-mini-a{opacity:0;transform:translateY(-14px) scale(.94)}
.mosaique-deux[data-etape="3"] .mosaique-mini-b,.mosaique-deux[data-etape="4"] .mosaique-mini-b,.mosaique-deux[data-etape="5"] .mosaique-mini-b{opacity:1;transform:none}
.mosaique-deux[data-etape="5"] .mosaique-mini-b{box-shadow:0 0 0 3px var(--m-accent)}
.mosaique-deux[data-etape="5"] .mosaique-match{opacity:1;transform:none}

/* ---------- 9. Importer tes notes ---------- */
.mosaique-import .mosaique-scene{display:flex;flex-direction:column;gap:12px;padding:16px 14px}
.mosaique-sources{display:flex;gap:6px}
.mosaique-sources span{position:relative;flex:1;height:34px;border-radius:17px;box-shadow:inset 0 0 0 1.5px var(--m-hair-fort);font:800 12.5px/34px "Nunito Sans",sans-serif;text-align:center;white-space:nowrap;isolation:isolate}
.mosaique-sources span::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:17px;background:var(--m-warm);box-shadow:inset 0 0 0 1.5px var(--m-accent);opacity:0;transition:opacity .3s}
.mosaique-sources span.mosaique-on::before{opacity:1}
.mosaique-notes{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.mosaique-notes li{display:flex;align-items:center;gap:10px;height:50px;padding:0 10px 0 4px;border-radius:12px;background:var(--m-surface);opacity:0;transform:translateX(-18px);transition:opacity .35s,transform .5s var(--m-doux)}
.mosaique-notes li.mosaique-on{opacity:1;transform:none}
.mosaique-notes img{width:28px;height:42px;border-radius:5px;object-fit:cover;flex:none}
.mosaique-notes b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 13px "Nunito Sans",sans-serif}
.mosaique-note{display:flex;gap:1px;flex:none}
.mosaique-note svg{width:13px;height:13px;fill:var(--m-star)}
.mosaique-sur10{display:none;flex:none;font:800 13px "Nunito Sans",sans-serif;font-style:normal;color:var(--m-star)}
.mosaique-import[data-source="tmdb"] .mosaique-note{display:none}
.mosaique-import[data-source="tmdb"] .mosaique-sur10{display:block}

/* ---------- Responsive ---------- */
@media (max-width:1099px){
  .mosaique-grille{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "envie envie"
      "esprit dejavu"
      "tend tend"
      "duel pyrio"
      "ou ou"
      "deux import";
  }
  .mosaique-haute .mosaique-scene{flex:none;height:470px}
}
@media (max-width:639px){
  .mosaique-grille{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:14px;margin-top:44px}
  .mosaique-tuile{grid-area:auto}
  .mosaique-haute .mosaique-scene{height:440px}
  .mosaique-ou-regarder .mosaique-scene{height:auto;min-height:250px}
  .mosaique-texte h3{font-size:32px}
}

/* ---------- Mouvement réduit : une image fixe et parlante par tuile ---------- */
@media (prefers-reduced-motion:reduce){
  #fonctions .mosaique-scene *,#fonctions .mosaique-scene *::before,#fonctions .mosaique-scene *::after{animation:none!important;transition:none!important}
  .mosaique-carte-b,.mosaique-fiche-b{opacity:0}
  .mosaique-dejavu-titre{opacity:1}
  .mosaique-etoiles span:nth-child(-n+2) .mosaique-plein{opacity:1}
  .mosaique-monte-carte{transform:translateY(-14%)}
  .mosaique-monte-carte::after{opacity:1}
  .mosaique-doigt{display:none}
  .mosaique-tourne>div{transform:translateY(-6%) scale(1.22) rotateY(180deg)}
  .mosaique-cachee:not(.mosaique-tourne){opacity:.35}
}