/* mateogodet.com : « Pour comparer », le jeu du juste prix (page tarifs uniquement)
   Trois questions à cartes, Matéo en animateur, l'addition chez un freelance, puis la carte « Et avec moi ? ».
   Le jeu reste caché tant que assets/js/jeu-prix.js ne l'a pas préparé : sans JavaScript, le comparatif s'affiche ouvert. */

.jp-sans-jeu { display: none; }
/* Chaque texte du jeu a une version longue et une version courte : la courte ne sert que sur téléphone */
.jp-c { display: none; }
@media (min-width: 601px) { .jp-parole__detail:has(> .jp-l:empty) { display: none; } }
.no-js .jp-si-jeu { display: none; }
.no-js .jp-sans-jeu { display: inline; }

.jp-scene {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--rayon); color: var(--blanc);
  padding: clamp(1.1rem, 3.4vw, 2.6rem);
  background:
    radial-gradient(70% 60% at 8% 0%, rgba(180, 250, 30, .15), transparent 62%),
    radial-gradient(55% 45% at 100% 100%, rgba(180, 250, 30, .07), transparent 70%),
    var(--nuit);
  display: none; grid-template-columns: minmax(0, 1fr) 18.5rem;
  grid-template-areas: "haut haut" "anim anim" "zone addition" "actions addition";
  grid-template-rows: auto auto auto 1fr;
  gap: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.5rem, 3vw, 2.75rem);
}
.jp-scene.jp-pret { display: grid; }
.jp-scene :focus-visible { outline-color: var(--citron); }
.jp-confettis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
.jp-surtitre { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--citron); }
.jp-haut { grid-area: haut; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.jp-progression { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: .92rem; color: var(--sur-nuit-doux); }
.jp-pastilles { display: flex; gap: .4rem; }
.jp-pastilles i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--bulle); border: 2px solid rgba(255, 255, 255, .28); color: var(--nuit); transition: background-color .3s, border-color .3s, transform .3s; }
.jp-pastilles i svg { width: .85rem; height: .85rem; }
.jp-pastilles i.jp-en-cours { border-color: var(--citron); transform: scale(1.12); }
.jp-pastilles i.jp-juste { background: var(--citron); border-color: var(--citron); }
.jp-pastilles i.jp-faux { background: rgba(255, 255, 255, .16); border-color: transparent; color: var(--blanc); }

/* L'animateur : la tête dépasse de la bulle citron */
.jp-animateur { grid-area: anim; display: flex; align-items: flex-end; gap: clamp(.85rem, 2.4vw, 1.6rem); }
.jp-animateur__photo { position: relative; z-index: 0; flex: none; width: clamp(5.6rem, 12vw, 9.25rem); aspect-ratio: 50 / 61; }
.jp-animateur__photo::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: 280%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(180, 250, 30, .1) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 70%); mask: radial-gradient(closest-side, #000 22%, transparent 70%);
  pointer-events: none;
}
.jp-animateur__fond { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: var(--bulle); background: var(--citron); }
.jp-animateur__detoure {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1V.5902A.5 .4098 0 0 1 .5 1H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1V.5902A.5 .4098 0 0 1 .5 1H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.jp-animateur__detoure img { position: absolute; bottom: 0; left: -20.3%; width: 148%; max-width: none; height: auto; transform-origin: 50% 100%; }
.jp-animateur.jp-reagit .jp-animateur__detoure img { animation: jp-hop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes jp-hop { 30% { transform: translateY(-7%) rotate(-3deg); } 60% { transform: translateY(1%) rotate(1.5deg); } }

.jp-parole {
  position: relative; flex: 1 1 auto; min-width: 0; max-width: 46rem; margin-bottom: clamp(.35rem, 1.4vw, 1.1rem);
  padding: clamp(.95rem, 2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.65rem);
  background: var(--blanc); color: var(--nuit); border-radius: 1.6rem 1.6rem 1.6rem .35rem;
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .55);
}
.jp-parole__etiquette { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--citron-fonce); }
.jp-parole__principal { margin-top: .3rem; font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.2rem, 2.25vw, 1.8rem); line-height: 1.12; color: var(--nuit); text-wrap: balance; }
.jp-parole__detail { margin-top: .45rem; font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--texte); }
.jp-parole__detail:empty { display: none; }

/* Zone de jeu, addition, boutons */
.jp-zone { grid-area: zone; min-width: 0; }
.jp-addition { grid-area: addition; align-self: start; min-width: 0; }
.jp-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; align-self: start; min-height: 3.1rem; }
.jp-btn-grand { min-height: 3.6rem; padding-inline: 2rem; font-size: 1.1rem; }
.jp-lien-volet { padding: .4rem 0; border: 0; background: none; color: var(--blanc); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--citron); text-underline-offset: 4px; }

/* Le paquet de l'accueil */
.jp-paquet { position: relative; display: grid; place-items: center; height: clamp(12rem, 24vw, 16.5rem); }
.jp-dos {
  position: absolute; width: clamp(7.5rem, 14vw, 10rem); aspect-ratio: 4 / 5; border-radius: 1.1rem; display: grid; place-items: center; color: var(--citron);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 8px, transparent 8px 16px), linear-gradient(160deg, #0F4B4E, #0A3A3C);
  box-shadow: inset 0 0 0 2px rgba(180, 250, 30, .6), inset 0 0 0 7px var(--nuit-clair), inset 0 0 0 8px rgba(180, 250, 30, .22), 0 18px 34px -16px rgba(0, 0, 0, .7);
  transform: translateX(var(--tx)) rotate(var(--rot));
}
.jp-dos svg { width: 58%; height: auto; }
.jp-paquet .jp-dos:nth-child(1) { --tx: -42%; --rot: -11deg; --d: 0s; }
.jp-paquet .jp-dos:nth-child(2) { --tx: 0%; --rot: 0deg; --d: -.9s; z-index: 1; }
.jp-paquet .jp-dos:nth-child(3) { --tx: 42%; --rot: 11deg; --d: -1.8s; }
@keyframes jp-flotter { 50% { transform: translateX(var(--tx)) rotate(var(--rot)) translateY(-8px); } }
@keyframes jp-rayons { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Les cartes réponses : la réponse devant, le résultat derrière */
.jp-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.55rem, 1.8vw, 1.25rem); perspective: 1100px; max-width: 44rem; }
.jp-carte { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .45s, transform .45s; }
.jp-carte:disabled { cursor: default; }
.jp-carte:focus-visible { outline: none; }
.jp-carte__corps {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(calc(var(--flip, 0deg) + var(--ry, 0deg)));
  transition: transform .22s ease-out;
}
.jp-carte:not(:disabled):hover .jp-carte__corps { --lift: -6px; }
.jp-carte--retournee .jp-carte__corps { --flip: 180deg; transition: transform .85s cubic-bezier(.3, 1.3, .45, 1); }
.jp-carte__face {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .35rem; padding: 1rem .7rem;
  border-radius: 1.1rem; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.jp-carte__avant { background: linear-gradient(160deg, #0F4B4E, #0A3A3C); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 16px 30px -14px rgba(0, 0, 0, .65); transition: box-shadow .2s; }
.jp-carte__avant::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .2), transparent 46%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.jp-carte:not(:disabled):hover .jp-carte__avant { box-shadow: inset 0 0 0 2px var(--citron), 0 22px 38px -16px rgba(0, 0, 0, .7); }
.jp-carte:not(:disabled):hover .jp-carte__avant::after { opacity: 1; }
.jp-carte:focus-visible .jp-carte__avant { box-shadow: inset 0 0 0 3px var(--citron), 0 0 0 4px rgba(180, 250, 30, .35); }
.jp-carte__dos { transform: rotateY(180deg); background: var(--blanc); color: var(--nuit); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .65); }
.jp-carte--juste .jp-carte__dos { background: var(--citron); }
.jp-carte__lettre { position: absolute; top: .65rem; left: .65rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--bulle); background: var(--citron); color: var(--nuit); font-family: var(--f-titre); font-weight: 900; font-size: 1rem; line-height: 1; }
.jp-carte__valeur { font-family: var(--f-titre); font-weight: 900; font-size: clamp(1.05rem, 2.3vw, 1.8rem); line-height: 1.05; color: var(--blanc); text-wrap: balance; }
.jp-carte__unite { font-size: .8rem; font-weight: 600; color: var(--sur-nuit-doux); }
.jp-carte__icone { display: grid; place-items: center; width: clamp(2.2rem, 4vw, 2.9rem); height: clamp(2.2rem, 4vw, 2.9rem); border-radius: var(--bulle); background: var(--nuit); color: var(--citron); margin-bottom: .2rem; }
.jp-carte--faux .jp-carte__icone { background: var(--brume); color: var(--nuit); }
.jp-carte__icone svg { width: 55%; height: 55%; }
.jp-carte__verdict { font-family: var(--f-titre); font-weight: 900; font-size: clamp(.98rem, 1.9vw, 1.45rem); line-height: 1.05; text-wrap: balance; }
.jp-carte__vraie { font-size: clamp(.76rem, 1.2vw, .9rem); font-weight: 700; line-height: 1.3; }
.jp-carte__petit { font-size: .78rem; font-weight: 600; color: var(--texte-doux); }
.jp-carte--juste .jp-carte__petit { color: var(--nuit); }
.jp-carte--eteinte { opacity: .32; transform: scale(.95); }
@keyframes jp-distribuer { from { opacity: 0; transform: translate3d(calc((1 - var(--i)) * 45%), -60%, 0) rotate(calc((var(--i) - 1) * 16deg)) scale(.7); } }

/* L'addition : un ticket qui se remplit */
.jp-ticket-ombre { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.jp-ticket {
  position: relative; background: var(--blanc); color: var(--nuit); border-radius: .9rem .9rem 0 0; font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
.jp-ticket__tete { margin: 0; padding: .85rem 1rem; text-align: center; background: var(--trait); border-radius: .9rem .9rem 0 0; font-weight: 800; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.3; }
.jp-ticket__corps { padding: .9rem clamp(1rem, 2vw, 1.25rem) 2.1rem; }
.jp-ticket__sous { text-align: center; font-size: .82rem; font-weight: 600; color: var(--texte-doux); }
.jp-lignes { list-style: none; margin: .85rem 0 0; padding: .9rem 0 0; border-top: 2px dashed var(--trait); display: grid; gap: .75rem; }
.jp-ligne { display: grid; gap: .05rem; border-radius: .4rem; }
.jp-ligne__haut { display: flex; align-items: baseline; gap: .4rem; }
.jp-ligne__nom { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.jp-ligne__points { flex: 1 1 .75rem; min-width: .75rem; border-bottom: 2px dotted #B5C7C4; transform: translateY(-.3em); }
.jp-ligne__prix { flex: none; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.jp-ligne__detail { font-size: .78rem; color: var(--texte-doux); line-height: 1.35; }
.jp-ligne--attente .jp-ligne__prix { color: #B5C7C4; }
.jp-ligne--attente .jp-ligne__detail { visibility: hidden; }
.jp-ticket__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .15rem .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 2px dashed var(--trait); }
.jp-ticket__total > span { font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.jp-ticket__total b { font-family: var(--f-titre); font-weight: 900; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.1; white-space: nowrap; }
.jp-ticket__total b small { margin-left: .25rem; font-family: var(--f-texte); font-size: .75rem; font-weight: 700; }
.jp-ticket__total--attente b { color: #B5C7C4; }
.jp-ticket__pied { margin-top: .75rem; font-size: .78rem; color: var(--texte-doux); line-height: 1.4; }
@keyframes jp-tampon { 0% { background: var(--citron); box-shadow: 0 0 0 6px var(--citron); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }

/* La grande carte « Et avec moi ? » */
.jp-finale { display: grid; gap: 1.25rem; justify-items: start; perspective: 1200px; }
.jp-grande { position: relative; display: block; width: min(100%, 27rem); aspect-ratio: 16 / 10; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jp-grande:disabled { cursor: default; }
.jp-grande:focus-visible { outline: none; }
.jp-grande .jp-carte__corps { transform: rotateY(var(--flip, 0deg)) scale(var(--zoom, 1)); transition: transform .25s ease-out; }
.jp-grande:not(:disabled):hover .jp-carte__corps { --zoom: 1.02; }
.jp-grande.jp-carte--retournee .jp-carte__corps { --flip: 180deg; transition: transform 1s cubic-bezier(.3, 1.25, .45, 1); }
.jp-grande .jp-carte__face { padding: 1.25rem 1.5rem; gap: .5rem; border-radius: 1.35rem; }
.jp-grande .jp-carte__avant {
  color: var(--citron);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 8px, transparent 8px 16px), linear-gradient(160deg, #0F4B4E, #0A3A3C);
  box-shadow: inset 0 0 0 2px rgba(180, 250, 30, .7), inset 0 0 0 8px var(--nuit-clair), inset 0 0 0 9px rgba(180, 250, 30, .25), 0 24px 44px -18px rgba(0, 0, 0, .75);
}
.jp-grande .jp-carte__avant svg { width: 4.5rem; height: auto; }
.jp-grande:focus-visible .jp-carte__avant { box-shadow: inset 0 0 0 3px var(--citron), 0 0 0 5px rgba(180, 250, 30, .4); }
.jp-grande .jp-carte__dos { background: var(--citron); color: var(--nuit); }
.jp-grande__titre { font-family: var(--f-titre); font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1; color: var(--blanc); }
.jp-grande__invite { font-size: .9rem; font-weight: 600; color: var(--sur-nuit-doux); }
.jp-grande__formule { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.jp-grande__prix { font-family: var(--f-titre); font-weight: 900; font-size: clamp(3rem, 7vw, 4.6rem); line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-grande__an { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.jp-grande__annee { font-size: .9rem; font-weight: 700; margin-top: -.2rem; }
.jp-grande__compris { font-size: .85rem; font-weight: 600; max-width: 30ch; line-height: 1.35; }
@keyframes jp-distribuer-une { from { opacity: 0; transform: translateY(-40%) rotate(-8deg) scale(.75); } }
@keyframes jp-appel { 50% { box-shadow: inset 0 0 0 2px var(--citron), inset 0 0 0 8px var(--nuit-clair), inset 0 0 0 9px rgba(180, 250, 30, .4), 0 0 0 12px rgba(180, 250, 30, .14), 0 24px 44px -18px rgba(0, 0, 0, .75); } }

/* Après la carte : l'écart et la comparaison sur la même règle */
.jp-ecart {
  margin: 0; padding: .85rem 1.35rem; border-radius: 1.5rem 1.5rem 1.5rem .3rem;
  background: var(--citron); color: var(--nuit); font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.2;
}
.jp-ecart small { display: block; margin-top: .2rem; font-family: var(--f-texte); font-size: .9rem; font-weight: 600; }
.jp-fondateur { font-size: .95rem; color: var(--sur-nuit-doux); }
.jp-regle { width: 100%; display: grid; gap: 1.05rem; padding: clamp(1rem, 2.4vw, 1.5rem); background: var(--abysse); border-radius: 1rem; }
.jp-rang { display: grid; gap: .5rem; }
.jp-rang__tete { display: flex; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; flex-wrap: wrap; }
.jp-rang__nom { font-weight: 600; font-size: .95rem; color: var(--sur-nuit-doux); }
.jp-rang__val { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.1; color: var(--blanc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-rang__val small { margin-left: .3rem; font-family: var(--f-texte); font-size: .75rem; font-weight: 700; color: var(--sur-nuit-doux); }
.jp-rang--moi .jp-rang__nom, .jp-rang--moi .jp-rang__val { color: var(--citron); font-weight: 700; }
.jp-piste { position: relative; height: 1.4rem; border-radius: .5rem; background: rgba(255, 255, 255, .07); }
.jp-barre { position: absolute; top: 0; bottom: 0; left: 0; border-radius: .5rem; transform-origin: left center; transform: scaleX(0); }
.jp-regle.jp-visible .jp-barre { transform: none; }
.jp-barre--plage { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .6) 0 6px, rgba(255, 255, 255, .3) 6px 12px); box-shadow: inset 3px 0 0 var(--blanc), inset -3px 0 0 var(--blanc); }
.jp-barre--citron { background: var(--citron); }
.jp-graduations { position: relative; height: 1.2rem; margin-top: -.35rem; font-size: .74rem; color: var(--sur-nuit-doux); font-variant-numeric: tabular-nums; }
.jp-graduations span { position: absolute; top: .3rem; transform: translateX(-50%); white-space: nowrap; line-height: 1; }
.jp-graduations span:first-child { transform: none; }

/* Animations, seulement si le visiteur ne les a pas réduites */
@media (prefers-reduced-motion: no-preference) {
  .jp-paquet .jp-dos { animation: jp-flotter 3.6s ease-in-out infinite; animation-delay: var(--d); }
  .jp-animateur__photo::before { animation: jp-rayons 46s linear infinite; }
  .jp-cartes .jp-carte { animation: jp-distribuer .7s cubic-bezier(.2, .9, .3, 1.12) backwards; animation-delay: calc(var(--i) * 110ms); }
  .jp-ligne.jp-inscrite, .jp-ticket__total.jp-inscrite { animation: jp-tampon 1.1s ease-out; }
  .jp-grande { animation: jp-distribuer-une .8s cubic-bezier(.2, .9, .3, 1.12) backwards; }
  .jp-grande:not(.jp-carte--retournee) .jp-carte__avant { animation: jp-appel 1.9s ease-in-out infinite 1s; }
  .jp-regle .jp-barre { transition: transform 1s cubic-bezier(.22, .9, .24, 1); }
  .jp-regle .jp-rang:nth-child(2) .jp-barre { transition-delay: .15s; }
  .jp-regle .jp-rang:nth-child(3) .jp-barre { transition-delay: .45s; }
  .jp-monte { animation: jp-monter .55s cubic-bezier(.2, .8, .2, 1) backwards; }
  .jp-parole.jp-parle { animation: jp-parler .45s cubic-bezier(.3, 1.4, .5, 1); }
}
@keyframes jp-monter { from { opacity: 0; transform: translateY(14px); } }
@keyframes jp-parler { from { opacity: .2; transform: scale(.94) translateY(6px); } }

/* Le comparatif complet, sous le jeu */
.jp-volet { margin-top: 1.5rem; }
.jp-volet > summary { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.05rem; color: var(--nuit); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--citron-fonce); text-underline-offset: 4px; }
.jp-volet > summary::-webkit-details-marker { display: none; }
.jp-volet > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.jp-volet[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.jp-volet__corps { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.jp-comparatif { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--trait); border-radius: 1rem; overflow: hidden; font-variant-numeric: tabular-nums; }
.jp-comparatif th, .jp-comparatif td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.jp-comparatif thead th { background: var(--nuit); color: var(--blanc); font-size: .92rem; font-weight: 700; line-height: 1.3; }
.jp-comparatif thead th small { display: block; font-weight: 600; font-size: .78rem; opacity: .85; }
.jp-comparatif thead th.jp-phare { background: var(--citron); color: var(--nuit); }
.jp-comparatif tbody th { font-weight: 600; color: var(--nuit); }
.jp-comparatif tbody th small { display: block; max-width: 44ch; margin-top: .2rem; font-size: .8rem; font-weight: 500; line-height: 1.4; color: var(--texte-doux); }
.jp-comparatif tbody th small a { color: var(--texte-doux); text-underline-offset: 3px; }
.jp-comparatif td { font-weight: 600; color: var(--nuit); white-space: nowrap; }
.jp-comparatif td.jp-phare { background: #F6FDE6; font-weight: 700; }
.jp-comparatif td.jp-doux { color: var(--texte-doux); font-weight: 500; }
.jp-comparatif td small { display: block; margin-top: .15rem; font-family: var(--f-texte); font-size: .8rem; font-weight: 600; color: var(--texte-doux); }
.jp-comparatif__total th, .jp-comparatif__total td { border-bottom: 0; font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; }

/* Tablette et téléphone */
@media (max-width: 900px) {
  .jp-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "haut" "anim" "zone" "actions" "addition"; grid-template-rows: auto; }
  .jp-addition { max-width: 26rem; width: 100%; }
  .jp-actions:empty { display: none; }
}
@media (max-width: 720px) {
  .jp-comparatif, .jp-comparatif tbody, .jp-comparatif tr, .jp-comparatif th, .jp-comparatif td { display: block; }
  .jp-comparatif thead { display: none; }
  .jp-comparatif tr { padding: .8rem 1rem; border-bottom: 1px solid var(--trait); }
  .jp-comparatif tr:last-child { border-bottom: 0; }
  .jp-comparatif tbody th { padding: 0 0 .35rem; border: 0; }
  .jp-comparatif td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border: 0; white-space: normal; text-align: right; }
  .jp-comparatif td::before { content: attr(data-label); text-align: left; font-family: var(--f-texte); font-weight: 500; font-size: .9rem; color: var(--texte-doux); }
  .jp-comparatif td.jp-phare { background: none; }
  .jp-comparatif td.jp-phare::before { color: var(--citron-fonce); font-weight: 700; }
  .jp-comparatif__total { background: #F6FDE6; }
  .jp-comparatif tbody th small { margin-bottom: .2rem; }
}
@media (max-width: 600px) {
  .jp-l { display: none; }
  .jp-c { display: inline; }
  .jp-parole__detail:has(> .jp-c:empty) { display: none; }
  .jp-scene {
    padding: 1rem; gap: 1rem .9rem; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "photo haut" "parole parole" "zone zone" "actions actions" "addition addition";
  }
  .jp-animateur { display: contents; }
  .jp-animateur__photo { grid-area: photo; width: 4.6rem; align-self: end; }
  .jp-animateur__photo::before { width: 230%; }
  .jp-haut { grid-area: haut; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; align-self: center; }
  .jp-progression { font-size: .85rem; gap: .6rem; }
  .jp-parole { grid-area: parole; max-width: none; margin: 0; padding: .8rem 1rem .85rem; border-radius: .35rem 1.3rem 1.3rem 1.3rem; }
  .jp-parole__etiquette { font-size: .7rem; letter-spacing: .12em; }
  .jp-parole__principal { margin-top: .2rem; font-size: 1.12rem; line-height: 1.15; }
  .jp-parole__detail { margin-top: .3rem; font-size: .92rem; line-height: 1.45; }
  .jp-carte__vraie { display: none; }
  .jp-ecart { padding: .75rem 1.1rem; font-size: 1.12rem; }
  .jp-ecart small { font-size: .85rem; line-height: 1.4; }
  .jp-fondateur { font-size: .9rem; }
  .jp-regle { padding: .9rem; gap: .9rem; }
  .jp-rang__tete { flex-wrap: nowrap; }
  .jp-rang__nom { font-size: .88rem; }
  .jp-rang__val { font-size: 1.02rem; }
  .jp-grande__compris { font-size: .8rem; }
  .jp-grande__annee { font-size: .82rem; }
  .jp-cartes { gap: .5rem; }
  .jp-carte { aspect-ratio: 3 / 4; }
  .jp-carte__face { padding: 2.6rem .4rem .8rem; }
  .jp-carte__dos { padding: .6rem .35rem; gap: .25rem; }
  .jp-carte__dos .jp-carte__petit { display: none; }
  .jp-carte--faux .jp-carte__dos .jp-carte__petit { display: block; }
  .jp-carte__icone { width: 1.9rem; height: 1.9rem; margin-bottom: 0; }
  .jp-carte__verdict { font-size: .92rem; }
  .jp-carte__vraie { font-size: .7rem; }
  .jp-carte__lettre { top: .5rem; left: .5rem; width: 1.75rem; height: 1.75rem; font-size: .92rem; }
  .jp-carte__unite { font-size: .72rem; }
  .jp-paquet { height: 10.5rem; }
  .jp-dos { width: 6.6rem; }
  .jp-grande { aspect-ratio: 4 / 3; }
  .jp-actions .btn { flex: 1 1 auto; }
}