/* Joy B2B · Résultats (préfixe rs- pour ce qui est créé ici, les classes de la page validée restent) · l'artefact
   « Trois clients, trente réponses » v22, validé par Joy le 29/09/2026, porté sur le socle v013.
   Le socle (assets/site.css) porte les jetons, le cadre, les titres à son échelle, le souffle des blocs, le fond voile,
   les entrées (.reveal.attend / .joue), le mot qui s'explique (.def .bulle), le premier échange, le rail, le pied,
   l'impression générale. Cette feuille garde ce qui n'appartient qu'à la page : le seuil et ses trois preuves, les
   trente réponses, les trois cas (la carte, le mur, les marques, les sept campagnes, la voix, le tiroir et ses figures).
   Les mouvements propres de la page restent sous .rs-anime, posée par le script quand rien ne réduit les animations. */

/* ---- les jetons de la page ---- */
[data-page="resultats"]{--surligne:rgba(30,184,63,.24);--voile-leger:#EFF3EC;--vert-moyen:#4E9A63}

/* ---- les règles globales de la feuille v012 dont la page dépendait, scopées ----
   p{margin:0 0 1em;max-width:58ch} : à force nulle, pour que toutes les classes de la page la dépassent comme dans la v012 */
:where([data-page="resultats"] main p){margin:0 0 1em;max-width:var(--mesure)}
/* body 17,5 px / 1.6 (v012) : le socle donne 17 px / 1.55 à .page, comme sur les autres pages (rapport, § 3) */
/* a:hover{text-decoration-thickness:2px} ne servait à aucun lien visible de la page (les preuves ne sont pas soulignées) */
/* strong,b{font-weight:600} (v012) : à force nulle, les chiffres en Fraunces (.c10-chiffre b, .t-compteur b…) gardent leur 400 */
:where([data-page="resultats"] main) b,:where([data-page="resultats"] main) strong{font-weight:600}
/* le surtitre de la v22 : aligné en haut, son point descendu de .4rem (la page le posait sur tout .surtitre) */
[data-page="resultats"] .surtitre{align-items:flex-start}
[data-page="resultats"] .surtitre::before{margin-top:.4rem}
/* .insec : le mot tenu d'un bloc, l'équivalent du .nw du socle */
[data-page="resultats"] .insec{white-space:nowrap}
/* repos visible : tout se lit dès le chargement, le mouvement ne fait qu'accompagner (la v22 posait
   .reveal{opacity:1;transform:translateY(10px)} .reveal.in{transform:none} ; convention du socle : .attend / .joue) */
[data-page="resultats"] .reveal.attend{opacity:1;transform:translateY(10px)}

/* ---- le seuil : le H1 en deux temps, droits tous les deux ; puis les trois preuves, qui mènent chacune à son client ----
   La taille du H1 vient du socle (--t-h1, .page .seuil h1.large{max-width:24ch}) ; la v22 donnait clamp(1.85rem,4.3vw,3.35rem),
   lh 1.08, max-width 22em (rapport, § 3). Le souffle du seuil vient du socle (la v22 : padding-bottom clamp(2.6rem,6vw,4rem)). */
[data-page="resultats"] .seuil h1 .l{display:block}
[data-page="resultats"] .seuil .sous{max-width:44em;margin-top:1.3rem}
[data-page="resultats"] .preuves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.2rem);margin-top:clamp(2.2rem,5vw,3.2rem)}
[data-page="resultats"] .preuve{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center;padding-top:1.15rem;border-top:1px solid var(--voile-fonce);color:var(--encre);text-decoration:none;transition:border-color .3s var(--douce)}
[data-page="resultats"] .preuve:hover{border-top-color:var(--eclat)}
[data-page="resultats"] .preuve::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--eclat);transform-origin:left center;transform:scaleX(0);opacity:0}
[data-page="resultats"] .p-n{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,4.8vw,3.7rem);line-height:1;letter-spacing:-.035em;color:var(--porteur);font-variant-numeric:lining-nums}
[data-page="resultats"] .p-t{font:500 .95rem/1.38 var(--sans);color:var(--encre)}
[data-page="resultats"] .p-c{grid-column:1 / -1;display:flex;justify-content:space-between;gap:.6rem;margin-top:.7rem;font-size:.8rem;line-height:1.45;color:var(--gris)}
[data-page="resultats"] .p-c i{font-style:normal;color:var(--porteur);transition:transform .3s var(--douce)}
[data-page="resultats"] .preuve:hover .p-c i{transform:translateY(2px)}
/* au seuil, aucun mot seul en dernière ligne */
[data-page="resultats"] .preuve .p-t,[data-page="resultats"] .preuve .p-c{text-wrap:pretty}
/* le filet d'éclat se trace sur les trois preuves, une fois, dans l'ordre de lecture. Fonction : l'œil traverse les trois clients avant de descendre */
@keyframes rs-filet{0%{transform:scaleX(0);opacity:1}45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.rs-anime .preuves.trace .preuve::before{animation:rs-filet 1.9s var(--douce) forwards;animation-delay:calc(.25s + var(--k) * .3s)}
@media (max-width:760px){
  [data-page="resultats"] .preuves{grid-template-columns:1fr;gap:0}
  [data-page="resultats"] .preuve{grid-template-columns:4.6rem minmax(0,1fr);align-items:end;padding:1rem 0 1.05rem}
  [data-page="resultats"] .p-n{font-size:2.6rem}
  [data-page="resultats"] .p-c{grid-column:2;margin-top:.3rem}
}

/* ---- les réponses : le seul bloc voile de la page (le fond vient du socle, .bloc.voile) ---- */
[data-page="resultats"] .rep-tete h2{max-width:none}
[data-page="resultats"] .rep-tete h2 .ib{display:inline-block}
[data-page="resultats"] .rep-tete p{max-width:46em}
.rep-note{margin:clamp(1.6rem,3.4vw,2.2rem) 0 0;font-size:.86rem;line-height:1.45;color:var(--gris-voile);max-width:none}
.rep-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.8rem;align-items:stretch}
.rep{position:relative;display:flex;flex-direction:column;gap:0;min-width:0;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:.9rem;padding:1.35rem 1.4rem 1.15rem}
.rep[hidden]{display:none}
.rep-de{border-bottom:1px solid var(--voile);padding-bottom:.8rem;margin-bottom:.95rem}
.rep-de b{display:block;font:600 .84rem/1.35 var(--sans);color:var(--porteur)}
.rep-de span{display:block;margin-top:.12rem;font:500 .76rem/1.4 var(--sans);color:var(--gris)}
/* la lettre : Plex, lisible sur trente textes ; la salutation et la signature en gris, le corps en encre */
.rep .rep-texte{margin:0;font:400 .97rem/1.58 var(--sans);color:var(--encre);overflow-wrap:anywhere}
.rep-texte p{margin:0 0 .62rem}
.rep-texte p:last-child{margin-bottom:0}
.rep-salut,.rep-signe{color:var(--gris)}
.rep-signe + .rep-signe{margin-top:-.3rem}
.rep-liste{list-style:none;margin:0 0 .62rem;padding:0}
.rep-liste li{position:relative;padding-left:1.05em;margin-bottom:.15rem}
.rep-liste li::before{content:"\2013";position:absolute;left:0;color:var(--gris)}
/* le point-virgule d'un verbatim (réponse 23), dessiné par la feuille : le crible du constructeur refuse le signe dans le texte */
.rs-pv::before{content:" ;"}
.rep-pj{display:inline-flex!important;align-items:center;gap:.45rem;padding:.32rem .65rem .32rem .5rem;border:1px solid var(--voile-fonce);border-radius:.5rem;background:var(--ombre);font:500 .8rem/1.3 var(--sans);color:var(--encre)}
.rep-pj svg{width:1rem;height:1rem;fill:none;stroke:var(--gris);stroke-width:1.6;stroke-linecap:round;flex:none}
/* les noms masqués : une pastille douce, comme le geste de masquer à la main un nom sur une vraie lettre */
.masque{display:inline-block;width:var(--w,3.5em);height:.9em;margin:0 .06em;border-radius:.45em;background:rgba(21,48,29,.14);vertical-align:-.08em}
.rep-salut .masque,.rep-signe .masque{background:rgba(21,48,29,.1)}
/* la demande, surlignée. Fonction : le lecteur voit ce que chacun a demandé, dans ses mots, avant de tout lire */
mark.demande{color:inherit;padding:0 .06em;border-radius:.16em;background-color:transparent;background-image:linear-gradient(to bottom,transparent 30%,var(--surligne) 30%,var(--surligne) 94%,transparent 94%);background-repeat:no-repeat;background-size:100% 100%}
.rep-quoi{margin:auto 0 0;padding-top:1.15rem;display:flex;align-items:center;gap:.55rem;font:500 .8rem/1.4 var(--sans);color:var(--porteur)}
.rep-quoi::before{content:"";flex:none;width:1.05rem;height:.5rem;border-radius:.2rem;background:var(--surligne)}
/* l'arrivée : chaque réponse monte d'un cran quand elle entre dans l'écran, puis la demande se surligne, de gauche à droite */
.rs-anime .rep{transform:translateY(14px);transition:transform .7s var(--douce);transition-delay:calc(var(--k) * 90ms)}
.rs-anime .rep.vu{transform:none}
.rs-anime .rep mark.demande{background-size:0% 100%;transition:background-size 1.25s var(--douce);transition-delay:calc(.35s + var(--k) * 90ms)}
.rs-anime .rep.vu mark.demande{background-size:100% 100%}
.rep-pied{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.5rem}
.rep-pied .btn{gap:.9rem}
.rep-pied [hidden]{display:none!important}
.rep-reduire{background:none;border:0;padding:.4rem 0;font:500 .92rem var(--sans);color:var(--porteur);text-decoration:underline;text-decoration-color:var(--eclat);text-underline-offset:3px;cursor:pointer}
.rep-compte{margin:0;font-size:.9rem;color:var(--gris-voile)}
@media (max-width:1180px){.rep{padding:1.25rem 1.1rem 1.1rem}}
@media (max-width:899px){.rep-grille{grid-template-columns:1fr;max-width:38rem}.rep{padding:1.3rem 1.3rem 1.1rem}}
@media (max-width:720px){.rep-grille{grid-template-columns:1fr}.rep{padding:1.2rem 1.15rem 1.05rem}.rep-pied .btn{width:100%;justify-content:space-between}}
@media (max-width:760px){.rep-reduire{min-height:44px}}
/* les trente réponses : la petite légende tient sur une ligne ; sa taille suit la largeur de la carte (Joy, 28/09).
   La plus longue fait 19,9 fois la taille du texte, plus l'amorce d'éclat (1,6 rem) */
@supports (width:1cqi){
  .rep{container-type:inline-size}
  /* 29/09 au soir : jamais sous 12 px ; quand la carte se resserre, la légende passe sur deux lignes */
  .rep-quoi{font-size:max(.75rem,min(.8rem,calc((100cqi - 1.6rem) / 21.6)));text-wrap:balance}
}

/* ---- les trois clients ---- */
[data-page="resultats"] .cas{position:relative;scroll-margin-top:84px}
/* le filet qui relie : la preuve cliquée au seuil se retrace sur le cas où l'on arrive. Fonction : savoir où l'on a atterri */
[data-page="resultats"] .cas::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--eclat);transform-origin:left center;transform:scaleX(0);opacity:0;pointer-events:none}
.rs-anime .cas.arrive::before{animation:rs-filet 1.9s var(--douce) forwards}
[data-page="resultats"] .cas h3 .l{display:block}
[data-page="resultats"] .cas .citation{margin:1.5rem 0 0;padding-top:1.2rem;border-top:1px solid var(--voile)}
[data-page="resultats"] .cas .citation blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.14rem,1.75vw,1.32rem);line-height:1.42;color:var(--encre)}
[data-page="resultats"] .citation figcaption{margin-top:.75rem;font-size:.86rem;line-height:1.45;color:var(--gris)}
[data-page="resultats"] .citation figcaption b{display:block;color:var(--encre);font-weight:600}

/* ---- le bloc des cas (v12 puis v13, l'essentiel retenu le 29/09). Une échelle de texte relevée pour tout le bloc : le texte
   courant à 17 px, les légendes à 14 ou 15 px, plus aucune capitale espacée à l'intérieur des cas. ----
   Le H2 de tête vient du socle (--t-h2 ; la v22 : clamp(2rem,4.3vw,3.15rem), lh 1.05, ls -.022em, rapport § 3). */
.idee-tete{max-width:46rem}
[data-page="resultats"] .idee-tete h2{margin:0}
.idee-chapo{margin:1.05rem 0 0;font:400 clamp(1.05rem,1.55vw,1.22rem)/1.55 var(--sans);color:var(--encre);max-width:40em}
[data-page="resultats"] .idee .cas{border-top:1px solid var(--voile-fonce);padding:clamp(2.4rem,5vw,3.5rem) 0 clamp(2.8rem,6vw,4.6rem)}
[data-page="resultats"] .idee .cas:first-of-type{margin-top:clamp(2rem,4.4vw,3.2rem)}
/* le H3 de chaque cas vient du socle (--t-h3 ; la v22 : clamp(1.9rem,3.2vw,2.55rem), lh 1.06, ls -.024em, rapport § 3) */
[data-page="resultats"] .idee .cas h3{margin:0;max-width:none}
[data-page="resultats"] .idee .cas .citation{margin:0;padding:0;border:0}
[data-page="resultats"] .idee .cas .citation figcaption{font-size:.9375rem}

/* ---- pièces communes des cas ---- */
.c12-tete{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .7rem;margin:0 0 1.05rem;max-width:none}
.c12-num{display:inline-grid;place-items:center;min-width:2rem;height:2rem;padding:0 .45rem;border-radius:999px;border:1px solid var(--voile-fonce);font:600 .8125rem/1 var(--sans);color:var(--porteur);font-variant-numeric:tabular-nums}
.c12-nom{font:600 1rem/1.3 var(--sans);color:var(--encre)}
.c12-duree{font:400 1rem/1.3 var(--sans);color:var(--gris)}
.c12-duree::before{content:"·";margin-right:.7rem;color:var(--gris)}
@media (max-width:640px){
  .c12-tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .65rem;align-items:center}
  .c12-num{grid-row:1 / span 2}
  .c12-duree::before{display:none}
}
.c12-kicker{margin:0;font:600 .875rem/1.4 var(--sans);color:var(--porteur);max-width:none}
.c12-kicker-2{margin-top:1.15rem}
.c12-image{margin:0}
.c12-image img{display:block;width:100%;height:auto}
.c12-temps-t{margin:0;font:500 1.25rem/1.25 var(--serif);color:var(--porteur);letter-spacing:-.01em;max-width:none}
.c12-temps-x{margin:.45rem 0 0;font:400 1.0625rem/1.6 var(--sans);color:var(--encre);max-width:34em}
.t-source{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:.9rem 0 0;font-size:.875rem;line-height:1.5;color:var(--gris);max-width:none}
/* une source qui porte des mots qui s'expliquent se lit en ligne : la mise en flex des autres sources en ferait des blocs */
.t-source.t-src-mots{display:block}

/* ---- l'essentiel : une carte par client, l'image, le titre, le chiffre, une phrase, la preuve en bref. La voix en une ligne.
   Le reste dans un seul tiroir. Fonction : la page la plus courte, chaque cas se lit d'un regard, le détail attend qu'on le demande. */
[data-page="resultats"] .idee-10 .cas{border-top:0;padding:clamp(1.2rem,2.6vw,1.8rem) 0 clamp(1rem,2.4vw,1.6rem)}
.c10-carte{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.4rem,4vw,3.4rem);align-items:center;padding:clamp(1.4rem,4vw,3rem);background:var(--voile-leger);border-radius:1.6rem}
/* les images des trois cas, un peu plus petites (Joy, 29/09) */
.c10-image img{max-width:23rem;margin:0 auto}
.c10-ess{min-width:0}
.c10-chiffre{margin:1.3rem 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem 1rem;max-width:none}
.c10-chiffre b{font:400 clamp(3.4rem,6.2vw,5rem)/.9 var(--serif);letter-spacing:-.045em;color:var(--porteur);font-variant-numeric:lining-nums}
.c10-chiffre span{font:400 clamp(1.1rem,1.6vw,1.3rem)/1.3 var(--serif);color:var(--encre);max-width:13em}
.c10-phrase{margin:.95rem 0 0;font:400 1.0625rem/1.6 var(--sans);color:var(--encre);max-width:32em}
.c10-bref{margin-top:1.3rem}
.c10-carte .c12-demandes li{background:var(--blanc)}
.c10-carte .cx-coches{border-top-color:var(--voile-fonce)}
.c10-carte .cx-coches li{border-bottom-color:var(--voile-fonce)}
.c10-voix{margin:clamp(1.3rem,3vw,1.9rem) clamp(0rem,3vw,2rem) 0}
.c10-voix .citation{margin:0}
[data-page="resultats"] .c10-voix .citation blockquote{margin:0;font:400 clamp(1.15rem,1.8vw,1.4rem)/1.45 var(--serif);color:var(--encre);max-width:40em}
[data-page="resultats"] .idee-10 .c10 .cx-tiroir{margin:clamp(1.1rem,2.6vw,1.6rem) clamp(0rem,3vw,2rem) 0}
.c10-temps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.6vw,2rem);margin:.4rem 0 clamp(1.6rem,3.4vw,2.2rem)}
@media (max-width:860px){
  .c10-carte{grid-template-columns:1fr;gap:1.2rem}
  .c10-image img{max-width:15rem}
  .c10-temps{grid-template-columns:1fr}
}
/* le titre de la carte du Droit Pour Moi, coupé en miroir dès qu'il passe sur deux lignes */
.h3-miroir.coupe .demi{display:block}

/* ---- la carte du Droit Pour Moi : une bande sous le texte, sur toute la largeur de la carte ----
   Fonction : donner aux noms la place d'un mur, au premier cas que le prospect rencontre. */
.c10-bande{grid-column:1 / -1;min-width:0;margin-top:clamp(.4rem,1.6vw,1rem);padding-top:clamp(1.2rem,2.6vw,1.8rem);border-top:1px solid var(--voile-fonce)}
.lm{min-width:0}
.lm-leg{margin:.85rem 0 0;font:400 .9375rem/1.5 var(--sans);color:var(--gris);max-width:none}
.lm-leg b{font-weight:600;color:var(--porteur)}
.lm-s{font-weight:600;color:var(--porteur)}
/* le mur : les 70 noms à la même taille, en gras ceux qui ont signé, puis les 188 autres */
.lm-noms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font:400 clamp(1.06rem,1.35vw,1.19rem)/1.95 var(--serif);color:var(--encre)}
.lm-noms li{white-space:nowrap}
/* aucun point en fin de ligne : le script marque le dernier nom de chaque ligne (.fl) ; les points restent muets pour
   les lecteurs d'écran */
.lm-noms li:not(:last-child)::after{content:"·" / "";margin:0 .55rem;color:#9DB4A3;font-weight:400}
/* le point reste en place, invisible : la ligne garde sa longueur, rien ne se recompose */
.lm-noms li.fl::after{visibility:hidden}
.lm-noms .lm-fin{font:500 .9375rem/2.1 var(--sans);color:var(--gris)}
.lm-plus{display:inline-flex;align-items:center;min-height:44px;margin-top:.55rem;padding:.5rem 1.05rem;border:1px solid var(--voile-fonce);border-radius:999px;background:var(--blanc);font:500 .9375rem/1.2 var(--sans);color:var(--porteur);cursor:pointer}
.lm-plus:hover{border-color:var(--porteur)}
.lm-plus:focus-visible{outline:2px solid var(--porteur);outline-offset:3px}
.lm-plus[hidden]{display:none!important}
@media (max-width:640px){
  .lm-mur:not(.ouvert) .lm-noms{max-height:calc(1.95em * 9);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
}
.rs-anime .lm-mur:not(.vu) .lm-noms li{opacity:0;transform:translateY(5px)}
.rs-anime .lm-mur .lm-noms li{transition:opacity .45s var(--douce),transform .45s var(--douce);transition-delay:calc(.1s + var(--i,74) * 16ms)}

/* ---- les marques de Comelli, et ce qu'elles demandent ---- */
.cx-marques{list-style:none;margin:.8rem 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.15rem 1.3rem;font:400 clamp(1.45rem,2.4vw,1.95rem)/1.25 var(--serif);letter-spacing:-.015em;color:var(--porteur)}
.cx-marques li{white-space:nowrap}
.c12-marques .cx-marques{margin:.55rem 0 0}
/* les quinze marques intéressées, à la manière du mur : même taille, un point entre elles */
.c10-bref .cx-marques{gap:0;margin:.5rem 0 0;font:400 clamp(1.06rem,1.35vw,1.19rem)/1.95 var(--serif);letter-spacing:0;color:var(--encre)}
.c10-bref .cx-marques li:not(:last-child)::after{content:"·" / "";margin:0 .55rem;color:#9DB4A3;font-weight:400}
.c10-bref .cx-marques li.fl::after{visibility:hidden}
.c12-demandes{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.c12-demandes li{font:500 .9375rem/1 var(--sans);color:var(--porteur);background:var(--voile-leger);border-radius:999px;padding:.6rem .95rem}
.rs-anime .c12-marques:not(.vu) .cx-marques li{opacity:0;transform:translateY(8px)}
.rs-anime .c12-marques .cx-marques li{transition:opacity .55s var(--douce),transform .55s var(--douce);transition-delay:calc(.15s + var(--i) * 100ms)}
.rs-anime .c12-marques.c10-bref .cx-marques li{transition-delay:calc(.1s + var(--i) * 40ms)}

/* ---- les sept campagnes de Paradox ---- */
.s-pts{display:flex;flex-wrap:wrap;gap:.45rem;min-height:2rem;margin:.8rem 0 .15rem}
.s-pts i{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--porteur);color:var(--papier);font:600 .8rem/1 var(--sans);font-style:normal;font-variant-numeric:tabular-nums}
.s-pts i.s-cours{box-shadow:0 0 0 2px var(--blanc),0 0 0 4px var(--eclat)}
.cx-sept{display:flex;align-items:flex-end;gap:.8rem 1.4rem;flex-wrap:wrap;margin:1.05rem 0 .2rem}
.cx-sept-g{display:flex;flex-direction:column;gap:.4rem}
.cx-sept-g .s-pts{margin:0;min-height:0}
.cx-sept-seule{padding-left:1.4rem;border-left:2px solid var(--porteur)}
.cx-sept-l{font:500 .78rem/1.3 var(--sans);color:var(--gris)}
.cx-coches{list-style:none;margin:1.1rem 0 0;padding:0;border-top:1px solid var(--voile)}
.cx-coches li{position:relative;padding:.72rem 0 .72rem 2.35rem;border-bottom:1px solid var(--voile);font:400 .98rem/1.4 var(--sans);color:var(--encre)}
.cx-coches li::before{content:"";position:absolute;left:0;top:50%;width:1.5rem;height:1.5rem;margin-top:-.75rem;border-radius:50%;border:1.5px solid var(--porteur);box-sizing:border-box}
.cx-coches li::after{content:"";position:absolute;left:.54rem;top:50%;width:.36rem;height:.66rem;margin-top:-.44rem;border:solid var(--porteur);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.c12-sept .cx-sept{margin:0 0 .2rem}
.c12-sept .cx-sept-l{font-size:.875rem}
.c12-sept .cx-coches li{font-size:1.0625rem}
.rs-anime .c12-sept:not(.vu) .s-pts i{opacity:0;transform:scale(.55)}
.rs-anime .c12-sept .s-pts i{transition:opacity .4s var(--douce),transform .4s var(--douce);transition-delay:calc(.25s + var(--j) * .16s)}
.rs-anime .c12-sept:not(.vu) .cx-coches li::after{transform:rotate(45deg) scale(0)}
.rs-anime .c12-sept .cx-coches li::after{transition:transform .35s var(--douce);transition-delay:calc(1.45s + var(--i) * .25s)}
@media (max-width:640px){.cx-sept-seule{padding-left:1rem}}

/* ---- les tiroirs : un aperçu de ce qu'ils gardent ----
   Fonction : dire, avant d'ouvrir, ce que l'on va trouver (une courbe, un marché, des barres) */
.cx-tiroir{margin-top:clamp(1.6rem,3.4vw,2.3rem);border-top:1px solid var(--voile-fonce);border-bottom:1px solid var(--voile-fonce)}
.cx-tiroir summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1.1rem;align-items:center;padding:1.05rem 0;min-height:44px;border-radius:.4rem}
.cx-tiroir summary::-webkit-details-marker{display:none}
.cx-tiroir summary::marker{content:""}
.c12-apercu{grid-column:1;grid-row:1 / span 2;align-self:center;width:4.4rem;height:auto;padding:.45rem .5rem;border-radius:.6rem;background:var(--voile-leger);box-sizing:content-box}
.cx-tir-titre{grid-column:2;font:400 clamp(1.35rem,2.3vw,1.8rem)/1.15 var(--serif);letter-spacing:-.015em;color:var(--encre)}
.cx-tir-sous{grid-column:2;margin-top:.3rem;font:400 .9375rem/1.4 var(--sans);color:var(--gris)}
.cx-plus{grid-column:3;grid-row:1 / span 2;position:relative;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--voile-fonce);transition:border-color .3s var(--douce),background .3s var(--douce)}
.cx-plus::before,.cx-plus::after{content:"";position:absolute;left:50%;top:50%;width:1rem;height:1.5px;margin:-.75px 0 0 -.5rem;background:var(--porteur);transition:transform .35s var(--douce)}
.cx-plus::after{transform:rotate(90deg)}
.cx-tiroir[open] .cx-plus::after{transform:rotate(0deg)}
.cx-tiroir summary:hover .cx-plus{border-color:var(--porteur)}
.cx-tiroir[open] .cx-plus{background:var(--voile-leger)}
.cx-tiroir summary:focus-visible{outline:2px solid var(--porteur);outline-offset:4px}
.cx-tir-corps{padding:.3rem 0 clamp(1.4rem,3vw,2rem)}
.rs-anime .cx-tiroir[open] .cx-tir-corps{animation:rs-ouvre .45s var(--douce)}
@keyframes rs-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.c12-apercu .ap-l{fill:none;stroke:var(--porteur);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c12-apercu .ap-a{fill:rgba(24,73,40,.12)}
.c12-apercu .ap-p{fill:var(--porteur)}
.c12-apercu .ap-v{fill:none;stroke:#9DB4A3;stroke-width:1}
.c12-apercu .ap-v2{fill:var(--porteur)}
.c12-apercu .ap-m{stroke:var(--gris);stroke-width:1.2;stroke-dasharray:2 2}

/* ---- la première année, qui se trace ----
   La ligne avance d'un pas régulier, chaque point s'allume à son passage, le compteur lit la courbe, le dernier trimestre
   se souligne à la fin. Sous « réduire les animations », tout est là d'emblée. */
.t-courbe{margin:0;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);padding:clamp(1.15rem,3vw,1.9rem) clamp(1rem,3vw,2rem) clamp(1rem,2.4vw,1.5rem)}
.t-courbe-tete{display:flex;flex-direction:column;gap:.35rem;margin:0 0 .4rem}
.t-courbe-titre{font:500 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--serif);color:var(--encre);letter-spacing:-.012em;text-wrap:balance}
.t-plot{position:relative}
.t-plot svg{display:block;width:100%;height:auto;overflow:visible}
.t-bande-b{fill:rgba(30,184,63,.09)}
.t-etiq-bande text{text-anchor:middle}
.t-etiq-bande .n{font-family:var(--serif);font-size:22px;font-weight:400;fill:var(--encre)}
.t-etiq-bande.fort .n{fill:var(--porteur);font-weight:500}
.t-etiq-bande .l{font-family:var(--sans);font-size:11px;font-weight:500;fill:var(--gris)}
.t-grille{stroke:var(--voile);stroke-width:1;shape-rendering:crispEdges}
.t-grille.base{stroke:var(--voile-fonce)}
.t-axe-y{font-family:var(--sans);font-size:12px;font-weight:500;fill:var(--gris);text-anchor:end;font-variant-numeric:tabular-nums}
.t-axe-x{font-family:var(--sans);font-size:12px;font-weight:500;fill:var(--gris);text-anchor:middle}
.t-aire{fill:rgba(24,73,40,.08)}
.t-ligne{fill:none;stroke:var(--porteur);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.t-pt{fill:var(--porteur);stroke:var(--blanc);stroke-width:2}
.t-point.t-fin .t-pt{fill:var(--eclat)}
.t-cible{fill:transparent}
.t-point{outline:none;cursor:default}
.t-point:focus-visible .t-pt,.t-point.actif .t-pt{stroke:var(--eclat);stroke-width:3}
.t-lab-pt{font:600 14px/1 var(--sans);fill:var(--encre);text-anchor:middle;font-variant-numeric:tabular-nums}
.t-lab-pt.t-lab-fort{font:400 22px/1 var(--serif);fill:var(--porteur)}
.t-bulle{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 14px));background:var(--encre);color:var(--papier);border-radius:.55rem;padding:.45rem .7rem .5rem;font:500 .78rem/1.3 var(--sans);white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px rgba(21,48,29,.2);z-index:2}
.t-bulle b{display:block;font:600 1.02rem/1.15 var(--sans)}
.c12-courbe{margin:clamp(1.2rem,2.6vw,1.7rem) 0 0}
.t-compteur{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .75rem;margin:.55rem 0 .35rem;max-width:none}
.t-compteur b{font:400 clamp(2.6rem,5vw,3.5rem)/1 var(--serif);letter-spacing:-.03em;color:var(--porteur);font-variant-numeric:tabular-nums lining-nums;min-width:2.1ch}
.t-compteur>span{font:500 1rem/1.4 var(--sans);color:var(--encre)}
.t-mois{font-variant-numeric:tabular-nums}
.rs-anime .c12-courbe .t-ligne{stroke-dasharray:var(--len,none);transition:stroke-dashoffset var(--D,2.6s) linear .15s}
.rs-anime .c12-courbe:not(.vu) .t-ligne{stroke-dashoffset:var(--len,0)}
.rs-anime .c12-courbe .t-aire{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path var(--D,2.6s) linear .15s}
.rs-anime .c12-courbe:not(.vu) .t-aire{opacity:1;clip-path:inset(0 100% 0 0)}
.rs-anime .c12-courbe .t-point{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.7,.5,1),opacity .2s linear;transition-delay:calc(.15s + var(--t,0) * var(--D,2.6s))}
.rs-anime .c12-courbe:not(.vu) .t-point{opacity:0;transform:scale(.2)}
.rs-anime .c12-courbe .t-lab-pt{transition:opacity .45s var(--douce),transform .45s var(--douce);transition-delay:calc(.3s + var(--t,0) * var(--D,2.6s))}
.rs-anime .c12-courbe:not(.vu) .t-lab-pt{opacity:0;transform:translateY(6px)}
.rs-anime .c12-courbe :is(.t-bande-b,.t-etiq-bande){transition:opacity .7s var(--douce);transition-delay:calc(.15s + var(--D,2.6s) * .78)}
.rs-anime .c12-courbe:not(.vu) :is(.t-bande-b,.t-etiq-bande){opacity:0}

/* ---- ce que pèse une opportunité : la raison, sans le détail de la grille ---- */
.op{margin-top:clamp(1.4rem,3vw,2rem);padding:clamp(1.15rem,3vw,1.8rem) clamp(1rem,3vw,2rem);background:var(--voile-leger);border-radius:var(--rayon)}
.op-titre{margin:.45rem 0 0;font:500 clamp(1.3rem,2.3vw,1.7rem)/1.2 var(--serif);color:var(--encre);letter-spacing:-.012em;max-width:none;text-wrap:balance}
.op-sous{margin:.45rem 0 0;font:400 1.0625rem/1.5 var(--sans);color:var(--encre);max-width:none}
.op-chaine{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2.2rem}
.op-chaine li{position:relative;padding:.85rem 1rem;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:.8rem}
.op-chaine li+li::before{content:"+";position:absolute;left:-1.62rem;top:50%;transform:translateY(-50%);font:400 1.5rem/1 var(--serif);color:var(--porteur)}
.op-chaine b{display:block;font:600 1.0625rem/1.3 var(--sans);color:var(--encre)}
.rs-anime .op:not(.vu) .op-chaine li{opacity:0;transform:translateY(10px)}
.rs-anime .op .op-chaine li{transition:opacity .5s var(--douce),transform .5s var(--douce);transition-delay:calc(.2s + var(--i) * .22s)}
@media (max-width:860px){
  .op-chaine{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-chaine li:nth-child(3)::before{left:50%;top:-.52rem;transform:translate(-50%,-50%)}
}
/* au téléphone : la somme se lit comme une phrase, sur deux lignes, plutôt que quatre cartes empilées. Le signe + reste collé
   à ce qu'il ajoute. */
@media (max-width:560px){
  .op-chaine.op-court{display:block;margin-top:.9rem;font:600 1.0625rem/1.95 var(--sans);color:var(--encre)}
  .op-chaine.op-court li{display:inline-block;padding:0;background:none;border:0;border-radius:0;white-space:nowrap}
  .op-chaine.op-court li+li::before{content:"+";position:static;display:inline;margin:0 .45rem 0 .4rem;transform:none;font:400 1.35rem/1 var(--serif);color:var(--porteur)}
  .op-chaine.op-court b{display:inline;font-size:inherit}
}

/* ---- Comelli : le marché, puis les réponses face au marché ----
   Fonction : une marque sur cinq qualifiée, dans le titre ; et une comparaison qui concorde de haut en bas, des réponses face
   à des réponses, pour 100 personnes contactées (Joy, 29/09 : « sinon la comparaison est tronquée »). */
.cm-marche{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem clamp(1.4rem,3.6vw,3rem);row-gap:1.1rem;align-items:center;padding:clamp(1.1rem,2.6vw,1.6rem);background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon)}
.cm-marche-titre{margin:.5rem 0 0;font:400 clamp(1.3rem,2.2vw,1.65rem)/1.2 var(--serif);color:var(--encre);letter-spacing:-.012em;max-width:none}
.cm-marche-titre b{font-weight:500;color:var(--porteur)}
.cm-marche-titre .l{display:block}
.cm-marche-sous{margin:.55rem 0 0;font:400 1.0625rem/1.5 var(--sans);color:var(--encre);max-width:30em}
.cm13 .cm-marche-tete{grid-column:1;grid-row:1}
.cm13 .cm-vis{grid-column:2;grid-row:1;min-width:0}
.cm13 .cm-source{grid-column:1 / -1;margin:0}
@media (max-width:980px){
  .cm13{grid-template-columns:1fr}
  .cm13 .cm-marche-tete,.cm13 .cm-vis{grid-column:auto;grid-row:auto}
}
/* face au marché : cette campagne et la moyenne du marché, la même unité, la même échelle de 0 à 15 % */
.cm-f2-titre{margin:0;font:500 1.25rem/1.25 var(--serif);color:var(--encre);letter-spacing:-.01em;max-width:none}
.cm-f2-unite{margin:.3rem 0 0;font:400 .9375rem/1.45 var(--sans);color:var(--gris);max-width:none}
.cm-f2-grille{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;row-gap:.4rem;align-items:end;margin-top:1.2rem}
.cm-f2-lib{font:500 1rem/1.3 var(--sans);color:var(--encre)}
.cm-f2-lib.cm-f2-m{font-weight:400;color:var(--gris)}
/* le nombre de réponses sous le libellé, le taux seul à droite */
.cm-f2-lib small{display:block;margin-top:.15rem;font:400 .875rem/1.3 var(--sans);color:var(--gris)}
.cm-f2-piste{grid-column:1 / -1;position:relative;display:block;height:1.1rem;margin-bottom:.8rem;border-radius:.35rem;background:var(--voile)}
.cm-f2-piste i{position:absolute;top:0;bottom:0;left:calc(var(--a,0) * 1%);width:calc(var(--v,0) * 1%);border-radius:.35rem;background:var(--porteur);transform-origin:left center}
.cm-f2-piste.cm-f2-m i{width:calc((var(--b) - var(--a)) * 1%);background:var(--gris)}
.cm-f2-val{display:flex;align-items:baseline;justify-content:flex-end;gap:.55rem;white-space:nowrap}
.cm-f2-val b{font:400 clamp(1.7rem,3vw,2.2rem)/1 var(--serif);letter-spacing:-.03em;color:var(--porteur);font-variant-numeric:lining-nums}
.cm-f2-val.cm-f2-m b{font-size:clamp(1.3rem,2.2vw,1.6rem);color:var(--gris)}
.cm-f2-ech{grid-column:1 / -1;position:relative;display:block;height:1.1rem;margin-top:-.45rem}
.cm-f2-ech i{position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);font:400 .8125rem/1 var(--sans);font-style:normal;color:var(--gris);white-space:nowrap}
.cm-f2-ech i:first-child{transform:none}
.cm-f2-ech i:last-child{transform:translateX(-100%)}
.rs-anime .cm-marche:not(.vu) .cm-f2-piste i{transform:scaleX(0)}
.rs-anime .cm-marche .cm-f2-piste i{transition:transform 1.1s var(--douce) .3s}
.rs-anime .cm-marche .cm-f2-piste.cm-f2-m i{transition-delay:.6s}

/* ---- Comelli : six fonctions, un même message dont une phrase change ---- */
.cm-six{margin-top:clamp(1.4rem,3vw,2rem)}
.cm-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1rem,2.6vw,2rem);align-items:start;margin-top:1rem}
.cm-mail{background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);padding:1.1rem 1.25rem 1.2rem;font:400 1rem/1.55 var(--sans);color:var(--encre)}
.cm-mail p{margin:0 0 .7rem;max-width:none}
.cm-objet{padding-bottom:.7rem;border-bottom:1px solid var(--voile);font-weight:500}
.cm-objet > span:first-child{color:var(--gris);font-weight:400;margin-right:.35rem} /* « Objet » seul : la règle atteignait aussi la variable « marque », grise sur voile (4,4) */
.cm-var{display:inline-block;padding:0 .4rem;border-radius:.35rem;background:var(--voile);color:var(--porteur);font:500 .82em/1.55 var(--sans)}
.cm-arg{padding:.75rem .9rem;border-radius:.6rem;background:var(--voile-leger);border-left:3px solid var(--porteur)}
.cm-arg-l{display:block;margin-bottom:.3rem;font:600 .875rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--porteur)}
.cm-arg-x{display:block}
.rs-anime .cm-arg-x.cm-change{animation:rs-ouvre .35s var(--douce)}
.cm-gris i{display:block;height:.5rem;margin:.55rem 0;border-radius:.25rem;background:var(--voile)}
.cm-signe{margin:0!important;color:var(--gris)}
.cm-fonctions{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cm-fonctions li{display:flex}
.cm-fonctions .cm-f{flex:1}
.cm-f{display:flex;align-items:flex-start;gap:.8rem;width:100%;min-height:44px;padding:.62rem .8rem;text-align:left;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:.7rem;font:inherit;color:var(--encre);cursor:pointer;transition:background .25s var(--douce),border-color .25s var(--douce),color .25s var(--douce)}
.cm-f:hover{border-color:var(--porteur)}
.cm-f[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
.cm-f:focus-visible{outline:2px solid var(--porteur);outline-offset:2px}
.cm-f-n{flex:none;font:600 .72rem/1.9 var(--sans);letter-spacing:.08em;color:var(--gris);font-variant-numeric:tabular-nums}
.cm-f[aria-pressed="true"] .cm-f-n{color:#BFD3C4}
.cm-f-t b{display:block;font:600 1rem/1.35 var(--sans)}
.cm-f-t span{display:block;margin-top:.12rem;font:400 .9375rem/1.4 var(--sans);color:var(--gris)}
.cm-f[aria-pressed="true"] .cm-f-t span{color:#D5E2D8}
.cm-six .t-source{margin-top:.9rem}
@media (max-width:860px){
  .cm-marche,.cm-duo{grid-template-columns:1fr}
  .cm-fonctions{order:-1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cm-f-t span{display:none}
  .cm-f{align-items:center;padding:.55rem .7rem;gap:.6rem}
  /* la v22 posait ici font-size:.86rem, puis l'échelle relevée du bloc des cas (.cm-f-t b{font-size:1rem}, plus loin dans
     la feuille) la dépassait par l'ordre : au téléphone, les noms des fonctions se lisent à 1rem, la ligne à 1.25 */
  .cm-f-t b{line-height:1.25}
}

/* ---- Paradox : les campagnes en barres, les ouvertures d'abord ----
   Chaque barre, une campagne ; le trait et la bande, le marché, écrits sur la figure et non dans une légende.
   Fonction : lire d'un coup où se situe chaque campagne par rapport au marché. */
.px2{margin:0;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);padding:clamp(1.15rem,3vw,1.9rem) clamp(1rem,3vw,2rem) clamp(1rem,2.4vw,1.5rem)}
.px2-tete{display:flex;flex-direction:column;gap:.45rem;margin-bottom:clamp(1.2rem,2.8vw,1.7rem)}
.px2-large{display:grid;grid-template-columns:minmax(9rem,.85fr) minmax(0,1.1fr) minmax(0,1.1fr);column-gap:clamp(1.2rem,3vw,2.2rem)}
.px2-col-t{display:flex;flex-direction:column;gap:.55rem;padding-bottom:.8rem;min-width:0}
.px2-col-t>b{font:500 1.25rem/1.2 var(--serif);color:var(--encre)}
.px2-ann{display:flex;flex-direction:column;gap:.35rem;--inset:3.4rem}
.px2-ann-l{position:relative;margin-left:calc(var(--x) * (100% - var(--inset)) / 100);width:max-content;max-width:calc(100% - var(--x) * (100% - var(--inset)) / 100);padding-left:.55rem;font:400 .875rem/1.35 var(--sans);color:var(--encre);box-sizing:border-box}
.px2-ann-l i{position:absolute;left:0;top:.05rem;bottom:.05rem;width:1.5px;background:repeating-linear-gradient(to bottom,var(--gris) 0 4px,transparent 4px 7px)}
.px2-ann-l i.px2-k-bande{width:4px;background:var(--voile-fonce);border-radius:1px}
.px2-g{grid-column:1 / -1;margin:1.1rem 0 .3rem;font:600 .9375rem/1.4 var(--sans);color:var(--porteur);max-width:none}
.px2-large .px2-g:first-of-type{margin-top:.2rem}
.px2-lib{align-self:center;padding:.55rem 0;font:400 1rem/1.35 var(--sans);color:var(--encre)}
.px2-piste{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:.35rem;margin-right:3.4rem;min-height:2.9rem}
.px2-piste::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--ba,0) * 1%);width:calc((var(--bb,0) - var(--ba,0)) * 1%);background:var(--voile)}
.px2-piste::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lx,0) * 1%);width:1.5px;background:repeating-linear-gradient(to bottom,rgba(94,111,99,.8) 0 4px,transparent 4px 7px)}
.px2-po{--lx:30}
.px2-pr{--ba:10;--bb:20;--lx:50}
.px2-b{position:relative;display:block;height:.8rem;z-index:1}
.px2-deux .px2-b{height:.62rem}
.px2-b i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 1%);border-radius:0 .3rem .3rem 0}
.px2-ouv i{background:var(--vert-moyen)}
.px2-rep i{background:var(--porteur)}
.px2-b b{position:absolute;left:calc(var(--v) * 1% + .5rem);top:50%;transform:translateY(-50%);font:600 .875rem/1 var(--sans);color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 3px var(--blanc),0 0 3px var(--blanc)}
.px2-ech-l{margin-right:3.4rem;padding-top:.5rem;border-top:1px solid var(--voile-fonce)}
.px2-ech{position:relative;display:block;height:1.1rem}
.px2-ech i{position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);font:400 .8125rem/1 var(--sans);font-style:normal;color:var(--gris);white-space:nowrap}
.px2-ech i:first-child{transform:none}
.px2-ech i:last-child{transform:translateX(-100%)}
.px2-pourquoi{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--voile);font:500 1.0625rem/1.5 var(--sans);color:var(--porteur);max-width:40em}
.px2-etroit{display:none}
.px2-pan+.px2-pan{margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid var(--voile)}
.px2-pan-t{margin:0 0 .5rem;font:500 1.2rem/1.2 var(--serif);color:var(--encre);max-width:none}
.px2-pan .px2-ann{margin:0 0 .65rem;--inset:3.2rem}
.px2-ligne{display:flex;flex-direction:column;gap:.25rem;padding:.3rem 0}
.px2-ligne .px2-lib{align-self:flex-start;padding:0;font-size:.9375rem}
.px2-ligne .px2-piste{margin-right:3.2rem;min-height:1.35rem}
.px2-pan .px2-g{margin:.9rem 0 .2rem}
.px2-pan .px2-g:first-child{margin-top:0}
.px2-pan>.px2-ech{margin:.5rem 3.2rem 0 0;padding-top:.45rem;border-top:1px solid var(--voile-fonce);height:1.6rem}
.rs-anime .px2:not(.vu) .px2-b i{width:0}
.rs-anime .px2 .px2-b i{transition:width 1s var(--douce);transition-delay:calc(.15s + var(--j) * 70ms)}
.rs-anime .px2:not(.vu) .px2-b b{opacity:0}
.rs-anime .px2 .px2-b b{transition:opacity .4s var(--douce);transition-delay:calc(.9s + var(--j) * 70ms)}
@media (max-width:760px){
  .px2-large{display:none}
  .px2-etroit{display:block}
}
/* les pointillés sont dessinés, pas tracés en bordure : Safari rend une bordure pointillée de 1,5 px en points isolés
   (Joy, 8/10, sur son téléphone et son ordinateur, v059) */
/* au téléphone (Joy, 8/10, v058) : le marché tient en un seul trait et une seule bande, du premier groupe à l'échelle,
   au lieu d'un tronçon par barre ; les libellés passent devant, sur le blanc de la carte. Les repères s'écrivent en tête,
   chacun sur sa ligne, de la même largeur, avec leur signe : le trait pointillé, la bande. */
.px2-pan-corps{position:relative}
.px2-pan .px2-rep-z{position:absolute;left:0;right:3.2rem;top:0;bottom:0;pointer-events:none}
.px2-pan .px2-trait{position:absolute;top:0;bottom:0;left:calc(var(--x) * 1%);width:1.5px;background:repeating-linear-gradient(to bottom,rgba(94,111,99,.8) 0 4px,transparent 4px 7px)}
.px2-pan .px2-bande{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);background:var(--voile)}
.px2-pan .px2-piste::before,.px2-pan .px2-piste::after{display:none}
.px2-pan .px2-lib,.px2-pan .px2-g{position:relative;z-index:1;width:max-content;max-width:100%;background:var(--blanc);padding-right:.35rem}
.px2-pan .px2-ann-l{margin-left:0;max-width:none;width:auto}

/* ---- sous « réduire les animations », rien ne bouge ---- */
@media (prefers-reduced-motion:reduce){
  .rs-anime .rep,.rs-anime .rep mark.demande,.rs-anime .c12-marques .cx-marques li,.rs-anime .c12-sept .s-pts i,.rs-anime .c12-sept .cx-coches li::after,.rs-anime .c12-courbe .t-ligne,.rs-anime .c12-courbe .t-aire,.rs-anime .c12-courbe .t-point,.rs-anime .c12-courbe .t-lab-pt,.rs-anime .c12-courbe :is(.t-bande-b,.t-etiq-bande),.rs-anime .op .op-chaine li,.rs-anime .px2 .px2-b i,.rs-anime .px2 .px2-b b,.rs-anime .lm-mur .lm-noms li,.rs-anime .cm-marche .cm-f2-piste i{transition:none!important}
  .rs-anime .cx-tiroir[open] .cx-tir-corps,.rs-anime .cm-arg-x.cm-change{animation:none!important}
}

/* ---- le premier échange et le pied sont au socle (site.css : .pe-suite a, .pied-merci), plus rien ici ---- */

/* ---- l'impression : le socle coupe les mouvements et découvre les entrées ; le script ouvre les tiroirs le temps de
   l'impression (v22). Le bloc des cas dépasse une page : la contrainte du socle (.bloc{break-inside:avoid}) est levée sur lui. */
@media print{
  [data-page="resultats"] #cas{break-inside:auto}
}

/* Comelli : les six arguments, réécrits le 8/10 (Joy, passe UX copy) ; la note le dit sous l'exemple (v060) */
.cm-note{margin:1rem 0 0;font-size:.86rem;line-height:1.45;color:var(--gris-voile);max-width:none}