/* L'accompagnement personnalisé et sa partie offerte (lot 29, retour de Martin du 15/10/2026 : une fenêtre qui saute aux
   yeux, imposée, beaucoup plus animée, premium qu'on gagne ou qu'on perde), DA v3 « Noir » (dossier/02-DIRECTION-
   ARTISTIQUE.md) : un panneau noir sur la page floutée, un halo bleu, le faisceau en arête haute ; trois temps marqués en
   tête ; une table bleu nuit où les cartes, à deux faces, volent du sabot et se retournent en 3D ; au gain, la remise
   en très grand, des confettis (celebration.js). Seuls transform et opacity bougent (le reste : GSAP, js/). Sous
   prefers-reduced-motion, tout est posé d'emblée, rien ne dépend d'une animation. Jetons : ../assets/tokens.css. */

/* ---- La fenêtre ---- */
dialog.accomp {
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; overflow: auto; background: transparent; color: var(--encre);
}
dialog.accomp::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: accomp-fondu 400ms var(--expo) both; }
dialog.accomp:focus { outline: none; }
.accomp-halo {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(55vmax 38vmax at 50% 30%, rgba(30, 111, 255, 0.22), rgba(30, 111, 255, 0.05) 55%, rgba(30, 111, 255, 0) 72%);
  animation: accomp-halo 1100ms var(--expo) both;
}
.accomp-scene { position: relative; min-height: 100%; display: grid; place-items: center; padding: max(28px, 5vh) 16px; }
.accomp-panneau {
  position: relative; width: min(880px, 100%); overflow: hidden; isolation: isolate;
  padding: clamp(22px, 4vw, 44px); border-radius: var(--rayon-5); border: 1px solid var(--trait-fort);
  background: radial-gradient(120% 70% at 50% 0%, rgba(30, 111, 255, 0.14), rgba(30, 111, 255, 0) 60%), var(--panneau);
  box-shadow: var(--ombre-flottante), var(--lueur);
  animation: accomp-entree 700ms var(--expo) 80ms both;
}
.accomp-panneau::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: var(--faisceau); transform-origin: left center; animation: accomp-faisceau 1100ms var(--expo) 350ms both;
}
.accomp-panneau[data-issue="gagne"] { border-color: rgba(46, 212, 122, 0.4); box-shadow: var(--ombre-flottante), 0 0 60px rgba(46, 212, 122, 0.18), var(--lueur); }

/* ---- Les trois temps ---- */
.accomp-etapes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 26px; padding: 0; list-style: none; }
.accomp-etape { display: flex; align-items: center; gap: 8px; font-size: var(--taille-petit); color: var(--encre-2); }
.accomp-etape-point {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--trait-fort); color: var(--encre);
  transition: background var(--duree-normale) var(--courbe), border-color var(--duree-normale) var(--courbe);
}
.accomp-etape-point .ic { width: 13px; height: 13px; }
.accomp-etape-active { color: var(--encre); font-weight: var(--graisse-moyenne); }
.accomp-etape-active .accomp-etape-point { border-color: var(--bleu); background: var(--bleu); box-shadow: 0 0 0 4px rgba(30, 111, 255, 0.22); animation: accomp-pouls 2.2s ease-in-out 3; }
.accomp-etape-faite { color: var(--encre-2); }
.accomp-etape-faite .accomp-etape-point { border-color: var(--mieux); background: var(--mieux-fond); color: var(--mieux); }

/* ---- Le contenu d'un temps ---- */
.accomp-etiquette {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px; border-radius: var(--rayon-pilule);
  font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); letter-spacing: 0.02em;
  color: var(--bleu-clair); background: var(--bleu-voile, rgba(30, 111, 255, 0.12)); border: 1px solid var(--bleu-trait, rgba(30, 111, 255, 0.35));
  animation: accomp-monte 400ms var(--expo) 250ms both;
}
.accomp-titre, .accomp-resultat-titre {
  margin: 0; max-width: 24ch; font-size: var(--taille-h2); font-weight: var(--graisse-moyenne); line-height: var(--interligne-h2);
  letter-spacing: var(--approche-h2); text-wrap: balance; animation: accomp-monte 500ms var(--expo) 320ms both;
}
.accomp-par { margin: 10px 0 0; font-size: var(--taille-petit); color: var(--bleu-texte); animation: accomp-monte 400ms var(--expo) 380ms both; }
.accomp-message { margin: 14px 0 0; max-width: 62ch; font-size: var(--taille-intro); line-height: 1.55; color: var(--encre-2); animation: accomp-monte 400ms var(--expo) 420ms both; }

/* Les ajustements : une carte chacun, qui monte, et sa coche qui se dessine. */
.reco-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .reco-liste { grid-template-columns: minmax(0, 1fr); } }
.reco-ajustement {
  display: flex; gap: 12px; padding: 16px 16px 16px 14px; border-radius: var(--rayon-3);
  background: var(--voile-1); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
  animation: accomp-monte 520ms var(--expo) both; animation-delay: calc(520ms + var(--i, 0) * 110ms);
  transition: border-color var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe);
}
.reco-ajustement:hover { border-color: var(--trait-fort); background: var(--voile-2); }
.reco-coche { flex: none; color: var(--bleu-texte); padding-top: 1px; }
.reco-coche svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reco-coche circle { stroke: rgba(91, 155, 255, 0.35); stroke-dasharray: 1; stroke-dashoffset: 1; animation: accomp-trace 600ms var(--expo) both; animation-delay: calc(640ms + var(--i, 0) * 110ms); }
.reco-coche path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: accomp-trace 420ms var(--expo) both; animation-delay: calc(900ms + var(--i, 0) * 110ms); }
.reco-ajustement-texte { min-width: 0; }
.reco-ajustement-titre { margin: 0; font-weight: var(--graisse-forte); color: var(--encre); line-height: 1.35; }
.reco-ajustement-detail { margin: 4px 0 0; font-size: var(--taille-petit); color: var(--encre-2); line-height: 1.5; }
.reco-pourquoi { margin: 8px 0 0; font-size: var(--taille-petit); color: var(--encre-2); line-height: 1.5; }
.reco-pourquoi-etiquette { color: var(--bleu-texte); font-weight: var(--graisse-forte); }

.accomp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; animation: accomp-monte 500ms var(--expo) both; animation-delay: calc(700ms + var(--n, 0) * 110ms); }
.accomp-principal { position: relative; min-height: 46px; padding-inline: 22px; font-size: var(--taille-corps); }
.accomp-principal.btn-accent { box-shadow: var(--lueur); }
.accomp-principal.btn-accent:not([aria-disabled="true"]) { animation: accomp-appel 2.6s ease-in-out 2.4s 2; }
/* Les titres reçoivent le focus de la fenêtre (leur nom se lit) : pas d'anneau, Tab mène au geste. */
.accomp-titre:focus, .accomp-resultat-titre:focus { outline: none; }
.accomp .btn { white-space: normal; height: auto; }
.accomp-valide-ok, .accomp-valide-ok[aria-disabled="true"] { opacity: 1; cursor: default; background: var(--mieux); border-color: var(--mieux); color: var(--encre-inverse); box-shadow: 0 0 32px rgba(46, 212, 122, 0.35); animation: accomp-eclot 420ms var(--expo) both; }
.accomp-valide-icone { display: inline-grid; margin-right: 6px; vertical-align: -3px; }
.accomp-erreur { margin: 16px 0 0; font-size: var(--taille-petit); color: var(--attention); }
.accomp-erreur:empty { margin: 0; }
.accomp-plus-tard {
  margin-top: 10px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: var(--taille-petit); color: var(--encre-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.accomp-plus-tard:hover { color: var(--encre); }
.accomp-plus-tard:focus-visible, .accomp .btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--anneau-focus); }

/* L'invitation : un éventail de cartes retournées qui s'ouvre. */
.accomp-eventail { position: relative; height: 124px; margin: 26px 0 6px; }
.accomp-eventail-carte {
  position: absolute; bottom: 0; left: calc(50% - 33px); width: 66px; height: 92px; border-radius: 9px; border: 2px solid #fbfbfa;
  background: repeating-linear-gradient(45deg, var(--bleu) 0 6px, var(--bleu-profond) 6px 12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); transform-origin: 50% 120%;
  transform: translateX(calc((var(--i) - 2) * 22px)) rotate(calc((var(--i) - 2) * 13deg));
  animation: accomp-eventail 800ms var(--expo) both; animation-delay: calc(450ms + var(--i) * 70ms);
}
.accomp-regles { margin: 14px 0 0; max-width: 62ch; font-size: var(--taille-petit); color: var(--encre-2); animation: accomp-monte 400ms var(--expo) 650ms both; }

/* ---- La table ---- */
.accomp-titre-table { margin-bottom: 18px; }
.accomp-table { display: grid; gap: 18px; }
.bj-tapis {
  position: relative; display: grid; gap: 22px; padding: 22px clamp(16px, 3vw, 26px) 26px; min-height: 280px;
  border-radius: var(--rayon-4); border: 1px solid rgba(91, 155, 255, 0.28);
  background: radial-gradient(120% 90% at 50% 0%, rgba(30, 111, 255, 0.25), rgba(30, 111, 255, 0) 60%), linear-gradient(180deg, #0b1730, #050a14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -40px 80px rgba(0, 0, 0, 0.45);
}
.bj-sabot { position: absolute; top: 16px; right: 18px; width: 46px; height: 64px; }
.bj-sabot span {
  position: absolute; inset: 0; border-radius: 7px; border: 2px solid #fbfbfa;
  background: repeating-linear-gradient(45deg, var(--bleu) 0 5px, var(--bleu-profond) 5px 10px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.bj-sabot span:nth-child(2) { transform: translate(-3px, -3px); }
.bj-sabot span:nth-child(3) { transform: translate(-6px, -6px); }
.bj-main-tete { display: flex; align-items: center; gap: 10px; }
.bj-libelle { margin: 0; font-size: var(--taille-petit); color: var(--encre-2); letter-spacing: 0.02em; }
.bj-total {
  min-width: 34px; padding: 2px 10px; border-radius: var(--rayon-pilule); text-align: center;
  font-variant-numeric: tabular-nums; font-weight: var(--graisse-forte); color: var(--encre); background: rgba(255, 255, 255, 0.1);
}
.bj-total-maj { animation: accomp-eclot 360ms var(--expo) both; }
.bj-main[data-depasse="true"] .bj-total { background: var(--moins-fond); color: var(--moins); }
.bj-cartes { display: flex; flex-wrap: wrap; gap: 12px; min-height: 108px; margin-top: 10px; perspective: 900px; }
.bj-carte { position: relative; width: clamp(62px, 9vw, 78px); aspect-ratio: 5 / 7; flex: none; }
.bj-carte-int { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 520ms var(--expo); }
.bj-carte[data-face="verso"] .bj-carte-int { transform: rotateY(180deg); }
.bj-face { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); }
.bj-recto { display: grid; place-items: center; background: linear-gradient(160deg, #ffffff, #eef1f6); color: #10131a; }
.bj-rouge .bj-recto { color: #c8202f; }
.bj-verso { transform: rotateY(180deg); border: 2px solid #fbfbfa; background: repeating-linear-gradient(45deg, var(--bleu) 0 6px, var(--bleu-profond) 6px 12px); }
.bj-coin { position: absolute; top: 6px; left: 7px; display: grid; justify-items: center; line-height: 1; }
.bj-coin-bas { top: auto; left: auto; bottom: 6px; right: 7px; transform: rotate(180deg); }
.bj-rang { font-size: 17px; font-weight: 700; }
.bj-couleur { font-size: 13px; margin-top: 1px; }
.bj-centre { font-size: clamp(26px, 4vw, 34px); line-height: 1; }
.bj-gestes { display: flex; flex-wrap: wrap; gap: 12px; }
.bj-gestes .btn { min-height: 46px; padding-inline: 22px; }

/* ---- Le résultat ---- */
.accomp-resultat { display: grid; justify-items: center; gap: 8px; padding: 10px 0 4px; text-align: center; }
.accomp-resultat .accomp-resultat-titre { max-width: none; font-size: var(--taille-h1); letter-spacing: var(--approche-heros); }
.accomp-resultat-gagne .accomp-resultat-titre { color: var(--mieux); text-shadow: 0 0 36px rgba(46, 212, 122, 0.35); }
.accomp-remise-chiffre {
  margin: 4px 0 0; font-size: var(--taille-chiffre-principal); font-weight: var(--graisse-moyenne); line-height: var(--interligne-chiffre);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--encre); text-shadow: var(--lueur-forte);
  animation: accomp-eclot 700ms var(--expo) 150ms both;
}
.accomp-remise-consolation { margin: 6px 0 0; font-size: var(--taille-petit); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.accomp-remise-mois { margin: 0; font-size: var(--taille-intro); color: var(--encre); }
.accomp-remise-note { margin: 0; font-size: var(--taille-petit); color: var(--encre-2); }
.accomp-resultat .accomp-message { margin-top: 6px; text-align: center; }
.accomp-resultat .accomp-actions { justify-content: center; margin-top: 18px; animation-delay: 600ms; }
.accomp-panneau[data-issue="perdu"] .bj-main[data-qui="joueur"] .bj-carte,
.accomp-panneau[data-issue="egalite"] .bj-main[data-qui="joueur"] .bj-carte { opacity: 0.85; transition: opacity 600ms var(--courbe); }
.celebration-confettis { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }

/* ---- Le bandeau du Résumé ---- */
.accomp-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; padding: 12px 16px;
  border-radius: var(--rayon-3); border: 1px solid var(--bleu-trait, rgba(30, 111, 255, 0.35));
  background: linear-gradient(90deg, rgba(30, 111, 255, 0.14), rgba(30, 111, 255, 0.02)), var(--voile-1);
}
.accomp-bandeau-remise { border-color: rgba(46, 212, 122, 0.35); background: linear-gradient(90deg, var(--mieux-fond), rgba(46, 212, 122, 0.02)), var(--voile-1); }
.accomp-bandeau-point { width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 4px rgba(30, 111, 255, 0.2); animation: accomp-pouls 2.2s ease-in-out 3; }
.accomp-bandeau-remise .accomp-bandeau-point { background: var(--mieux); box-shadow: 0 0 0 4px rgba(46, 212, 122, 0.2); }
.accomp-bandeau-texte { flex: 1 1 280px; margin: 0; font-size: var(--taille-petit); color: var(--encre); }

/* ---- L'écran Offres : la remise gagnée ---- */
.offres-remise-jeu {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 18px; padding: 16px 20px;
  border-radius: var(--rayon-4); border: 1px solid rgba(46, 212, 122, 0.4);
  background: radial-gradient(90% 140% at 0% 50%, rgba(46, 212, 122, 0.16), rgba(46, 212, 122, 0) 65%), var(--panneau);
}
.offres-remise-jeu-chiffre { font-size: var(--taille-chiffre); font-weight: var(--graisse-moyenne); letter-spacing: -0.03em; color: var(--mieux); }
.offres-remise-jeu-texte p { margin: 0; color: var(--encre-2); font-size: var(--taille-petit); }
.offres-remise-jeu-texte .offres-remise-jeu-titre { color: var(--encre); font-size: var(--taille-corps); font-weight: var(--graisse-moyenne); }
.offres-remise-jeu-celebre { box-shadow: 0 0 48px rgba(46, 212, 122, 0.25); animation: accomp-eclot 700ms var(--expo) 200ms both; }
.offres-remise-jeu-celebre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-110%); animation: accomp-reflet 1300ms var(--expo) 700ms both;
}

/* ---- La révélation d'un écran redessiné (celebration.js) ---- */
.revelation-faisceau { display: block; height: 3px; margin-bottom: -3px; border-radius: 2px; background: var(--faisceau); box-shadow: var(--lueur); transform-origin: left center; }
.revelation-hote { position: relative; }
.revelation-lueur { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px rgba(91, 155, 255, 0.65), 0 0 36px rgba(30, 111, 255, 0.35); }

@keyframes accomp-fondu { from { opacity: 0; } }
@keyframes accomp-halo { from { opacity: 0; transform: scale(0.75); } }
@keyframes accomp-entree { from { opacity: 0; transform: translateY(28px) scale(0.965); } }
@keyframes accomp-faisceau { from { transform: scaleX(0); } }
@keyframes accomp-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes accomp-trace { to { stroke-dashoffset: 0; } }
@keyframes accomp-eclot { 0% { opacity: 0; transform: scale(0.82); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes accomp-pouls { 50% { box-shadow: 0 0 0 7px rgba(30, 111, 255, 0.08); } }
@keyframes accomp-appel { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@keyframes accomp-eventail { from { opacity: 0; transform: rotate(0deg) translateY(30px); } }
@keyframes accomp-reflet { to { transform: translateX(110%); } }

@media (max-width: 600px) {
  .accomp-scene { padding: 12px 10px; place-items: start center; }
  .accomp-panneau { border-radius: var(--rayon-4); }
  .accomp-etapes { gap: 6px 14px; margin-bottom: 20px; }
  /* Les noms des étapes passées ou à venir se taisent à l'écran, jamais pour un lecteur d'écran. */
  .accomp-etape-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .accomp-etape-active .accomp-etape-nom { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .bj-sabot { width: 38px; height: 54px; }
}

/* Sans mouvement : la même fenêtre, posée d'emblée (aucune animation, aucune transition). */
@media (prefers-reduced-motion: reduce) {
  dialog.accomp::backdrop, .accomp-halo, .accomp-panneau, .accomp-panneau::before, .accomp-etiquette, .accomp-titre, .accomp-resultat-titre,
  .accomp-par, .accomp-message, .reco-ajustement, .reco-coche circle, .reco-coche path, .accomp-actions, .accomp-principal, .accomp-valide-ok,
  .accomp-eventail-carte, .accomp-regles, .bj-total-maj, .accomp-remise-chiffre, .accomp-bandeau-point,
  .offres-remise-jeu-celebre, .offres-remise-jeu-celebre::after, .accomp-etape-active .accomp-etape-point { animation: none !important; }
  .reco-coche circle, .reco-coche path { stroke-dashoffset: 0; }
  .bj-carte-int, .reco-ajustement, .accomp-etape-point { transition: none !important; }
  .offres-remise-jeu-celebre::after { display: none; }
}
/* Couleurs forcées (contraste élevé de Windows) : l'étape en cours garde sa marque, les cartes leurs couleurs et un bord. */
@media (forced-colors: active) {
  .accomp-plus-tard:focus-visible, .accomp .btn:focus-visible { outline: 2px solid CanvasText; }
  .accomp-etape-active .accomp-etape-point { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .bj-face { forced-color-adjust: none; border: 1px solid CanvasText; }
}