/* Joy B2B · À propos (préfixe ap-) · « Un mot de Joy », bis · v046 du 7/10/2026 (trois lettres pour le seuil) · v045 du 7/10/2026 (le mot-image sans étiquette d'état, la
   troisième garantie à choisir) · v044 du 7/10/2026 (« Et l'IA ? » a son titre ; les lignes des
   engagements s'alignent ; la carte « Au pied, ce qu'on retient » validée, les trois autres parties) · v043 du 7/10/2026
   (le contenu de Joy intégré : chaque preuve
   porte son nom, la carte sans note ferme son en-tête, le message relu a son surtitre) · v042 du 6/10/2026 (la passe UX
   de toute la page) · v041 du
   6/10/2026 (le fil, son mot, son ordre, cinq actifs,
   le bandeau qui s'ouvre, les preuves dans la carte du Dispositif ; en bas, les exemples à choisir et l'échelle des
   cartes) · v040 · v039 · v038 · v037
   Le contenu de la maquette v06 (Joy et ChatGPT), la forme du site assemblé. Le socle (assets/site.css) porte les jetons,
   le cadre, les titres à son échelle, le souffle des blocs, les fonds (voile, ombre, sombre), les entrées (.reveal,
   [data-trace]), le premier échange, le rail, l'en-tête, le pied. Cette feuille ne garde que ce qui n'appartient qu'à la page :
   la grille de trois colonnes, la photo calée, la lettre, les cartes, le pont de RDV, les pastilles du parcours, le voile du
   présent. En bas, les choix de la huitième relecture (5/10), en relecture jusqu'à la validation de la page.

   La grille de la page : trois colonnes égales, de 300 px au plus, au seuil, aux origines et au parcours. La première et
   la dernière tiennent les bords du cadre, les gouttières respirent quand la page s'élargit. 300 px, c'est la largeur où
   le portrait de 900 px tient exactement le 3x (la règle de netteté de Joy). La photo, la troisième origine et le troisième
   temps du parcours se posent donc l'un sous l'autre, bord sur bord. */
.page{--ap-gout:clamp(1.4rem,3.4cqw,2.6rem);--ap-h3:clamp(1.3rem,2.5cqw,1.62rem);--ap-surligne:rgba(30,184,63,.24);--ap-clair:#F3F7EF;--ap-deborde:clamp(.9rem,1.8cqw,1.3rem);--ap-rouge:#D94C36}
.ap-grille,.ap-trois,.ap-temps{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:space-between;column-gap:var(--ap-gout)}
/* l'enveloppe du texte de chaque origine et de chaque temps : sans effet ici, elle range le texte dans les cinq
   présentations (6/10, en bas de la feuille) */
.ap-src-txt{display:contents}

/* les liens de la page : soulignés d'éclat, comme ceux du texte courant ; l'épaisseur répond au survol */
.ap-lien{color:var(--action);text-decoration:underline;text-decoration-color:var(--eclat);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-thickness var(--d-geste)}
.ap-lien:hover{text-decoration-thickness:2.5px}
.ap-lien svg{width:.95em;height:.95em;margin-left:.2em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- le seuil : le titre et la lettre sur deux colonnes, la photo sur la troisième ; la signature et le lien LinkedIn
   sur une même ligne, dessous (Joy, 5/10 : « Joy Lasry » revient, LinkedIn sous le portrait) ----
   La photo garde son cadrage d'origine (3:4), l'épaule et la main avec leur air autour (Joy, 1/10), et couvre la hauteur
   du titre et de la lettre (Joy, 3/10) : son haut sur le haut des capitales du titre, son bas sur la ligne de base de la
   dernière ligne. Le cadre prend cette hauteur, le portrait s'y pose en bas, à sa largeur, au 3x ; au-dessus, le fond du
   studio continue (le dégradé relevé sur le bord haut de la photo, et un fondu de quelques pixels qui efface la jointure).
   Le script mesure la hauteur des capitales et les deux lignes de base dans la police chargée ; sans script, les valeurs
   de repli tiennent au pixel près. */
.ap-seuil-grille{grid-template-areas:"tete tete photo" "outils outils photo" "intro intro photo" "signe signe li";grid-template-rows:auto;align-items:start}
.ap-tete{grid-area:tete;min-width:0}
.page .seuil .ap-h1{margin:0 0 clamp(1.1rem,2.6cqw,1.5rem);max-width:none}
.ap-intro{grid-area:intro;min-width:0;display:grid;gap:.9rem;max-width:54ch}
.ap-intro p{margin:0;font-size:var(--t-sous);font-weight:400;line-height:1.64;color:var(--encre)}
/* v046 : la lettre, à choisir parmi trois ; ses paragraphes gardent le même souffle */
.ap-lettre{display:grid;gap:.9rem}
/* la signature, à gauche sous le texte, comme au bas d'une lettre (v06) ; le lien LinkedIn sur sa ligne de base, sous le
   portrait, aligné à gauche */
.ap-signe,.ap-li{align-self:baseline;margin:clamp(1.15rem,2.6cqw,1.5rem) 0 0}
.ap-signe{grid-area:signe;font:600 var(--t-ui)/1.4 var(--sans);color:var(--porteur)}
.ap-li{grid-area:li;font-size:var(--t-petit);line-height:1.45}
.ap-photo{grid-area:photo;--cale:1;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;
  margin:var(--photo-haut,calc(var(--t-surtitre) * 1.3 + var(--r-surtitre) + var(--t-h1) * .21)) 0 var(--photo-bas,calc(var(--t-sous) * .445));
  border-radius:var(--rayon);overflow:hidden;
  background:linear-gradient(90deg,rgb(230 235 229) 0%,rgb(230 235 229) 10%,rgb(231 236 230) 15%,rgb(231 237 230) 20%,rgb(232 238 231) 25%,rgb(233 239 232) 30%,rgb(233 239 232) 70%,rgb(232 238 231) 75%,rgb(231 236 230) 80%,rgb(231 236 230) 85%,rgb(230 235 229) 90%,rgb(230 235 229) 100%)}
.ap-photo img{display:block;flex:none;width:100%;height:auto;aspect-ratio:3/4;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%);mask-image:linear-gradient(to bottom,transparent 0,#000 6%)}
/* au téléphone : le titre, le portrait, puis la lettre, sa signature et le lien LinkedIn (v055, Joy, 7/10 : « ok pour tel et linkedin ») (l'ordre de la v06, Joy, 3/10 : « le
   seuil pour tel est déjà bien »). Le portrait garde 300 px au plus, son 3x, et sa hauteur propre. */
@container page (max-width: 760px){
  .ap-seuil-grille{grid-template-columns:minmax(0,1fr);grid-template-areas:"tete" "outils" "photo" "intro" "signe" "li";grid-template-rows:auto}
  .ap-photo{--cale:0;align-self:start;width:min(100%,300px);margin:.35rem 0 1.7rem}
  .ap-li{align-self:start;margin:.7rem 0 0}
  .ap-signe{align-self:start}
  .ap-li a,.ap-carte-note a,.ap-rdv-voir a{display:inline-block;padding-block:.78rem;margin-block:-.78rem}
}

/* ---- la ligne des outils, sous le titre du seuil : la durée et la voix (à moduler, Joy, 3/10). Vide, elle se retire (le
   script). La voix attend son enregistrement : sans lui, la pastille se retire avant la mise en ligne. ---- */
.ap-outils{grid-area:outils;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin:clamp(-.4rem,-.6cqw,-.2rem) 0 clamp(1.1rem,2.6cqw,1.5rem);font:500 var(--t-petit)/1.4 var(--sans);color:var(--gris)}
/* vide (la durée et la voix éteintes), elle se retire dès le premier affichage, sans attendre le script : au téléphone,
   sur une connexion lente, le portrait et la lettre sautaient de 15 px quand il arrivait (passe UX, 6/10) */
.ap-outils:not(:has(> :not([hidden]))){display:none}
.ap-pastille{display:inline-flex;align-items:center;gap:.4rem;min-height:2.1rem;padding:.3rem .85rem;border:1px solid var(--voile-fonce);border-radius:999px;background:var(--blanc);color:var(--encre);font:600 .74rem/1.15 var(--sans);cursor:pointer;transition:border-color .2s var(--douce),background-color .2s var(--douce),color .2s var(--douce)}
.ap-pastille:hover{border-color:var(--porteur)}
.ap-pastille[aria-disabled="true"]{cursor:default;color:var(--gris)}
.ap-pastille:focus-visible{outline:2px solid var(--porteur);outline-offset:2px}
.ap-pastille svg{width:1rem;height:1rem;fill:currentColor}
@container page (max-width: 640px){ .ap-pastille{min-height:2.75rem} }
.ap-voix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.ap-afaire{font:500 .68rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gris-voile)}

/* ---- d'où vient cette attention : trois origines à têtes alignées (la présentation 2, Joy, 3/10) ----
   Huit rangées partagées par les trois colonnes : la marge, le titre, le récit, la ligne « En prospection », puis les
   quatre rangées de la carte. Les titres démarrent ensemble, les récits aussi, les lignes aussi, et chaque rangée des
   cartes. */
.ap-trois{grid-template-rows:repeat(8,auto);margin-top:var(--r-objet)}
.ap-source{grid-row:span 8;display:grid;grid-template-rows:subgrid;min-width:0;border-top:1px solid var(--voile-fonce);padding-top:1.05rem}
.ap-marge,.ap-quand{margin:0 0 .6rem;font:500 var(--t-note)/1.45 var(--sans);letter-spacing:.02em;color:var(--gris-voile)}
.page .ap-source h3,.page .ap-temps h3{margin:0 0 .7rem;font-size:var(--ap-h3);line-height:1.15;letter-spacing:-.012em;color:var(--encre)}
.ap-recit p{margin:0;max-width:40ch;font-size:var(--t-corps);line-height:1.65}
.ap-recit p+p{margin-top:.7rem}
/* un récit en relecture caché ne pousse pas celui qui le suit (wt) */
.ap-recit p[hidden]+p{margin-top:0}
/* ce que l'origine apporte en prospection : une ligne à part, sous le récit, au vert porteur, ouverte par un trait d'éclat
   et son étiquette (la grammaire du fil du site, en petit). La même place dans les trois colonnes : l'œil fait le lien. */
.ap-apport{position:relative;margin:1.05rem 0 0;padding-top:.85rem;max-width:40ch;font-size:var(--t-corps);font-weight:500;line-height:1.55;color:var(--porteur)}
.ap-apport::before{content:"";position:absolute;left:0;top:0;width:18px;height:2px;border-radius:2px;background:var(--eclat)}
.ap-apport-lab{display:block;margin:0 0 .3rem;font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--porteur)}

/* ---- les cartes, sans clic (Joy, 5/10) : un objet posé, blanc, au rayon de la maison. Quatre rangées, les mêmes dans les
   trois cartes et à la même hauteur d'une carte à l'autre (Joy, 3/10, « faire ordre ») : la tête (le lieu, le titre), la
   scène (ce que l'on regarde, dans son cadre), le texte (ce qu'il en tire, sur le fond clair et son filet d'éclat), la
   note. ---- */
.ap-carte{display:flex;flex-direction:column;min-width:0;margin:1.6rem 0 0;padding:1.05rem 1.05rem 1rem;background:var(--blanc);border:1px solid rgba(21,48,29,.08);border-radius:var(--rayon);box-shadow:0 1px 2px rgba(21,48,29,.05);transition:opacity var(--d-entree) var(--douce),transform var(--d-entree) var(--douce)}
.ap-source > .ap-carte{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:.9rem}
.ap-carte.attend{opacity:0;transform:translateY(12px)}
.ap-source:nth-child(2) .ap-carte{transition-delay:.12s}
.ap-source:nth-child(3) .ap-carte{transition-delay:.24s}
.ap-carte-tete{display:grid;align-content:start;gap:.4rem}
.ap-carte-lieu{font:600 .64rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ap-carte-titre{font:500 1.2rem/1.2 var(--serif);font-optical-sizing:auto;letter-spacing:-.01em;color:var(--encre)}
.ap-carte-note{margin:0;font-size:.72rem;line-height:1.5;color:var(--gris)}
.ap-carte-note .ap-lien{margin-left:.15rem;white-space:nowrap}
.ap-etiq{margin:0 0 .45rem;font:600 .6rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
/* le halo qui appelle, tant que rien n'est touché : le pont de RDV (le point qui appelle de l'accueil) */
@keyframes ap-halo{0%{box-shadow:0 0 0 0 rgba(30,184,63,.5)}70%{box-shadow:0 0 0 .45rem rgba(30,184,63,0)}100%{box-shadow:0 0 0 0 rgba(30,184,63,0)}}

/* la scène, dans son cadre ; le texte, sur le fond clair que le site donne à ce qu'on choisit, marqué du filet d'éclat.
   Les trois cadres prennent la hauteur de leur rangée et se lisent comme une bande ; les trois textes démarrent ensemble. */
.ap-scene,.ap-texte{display:flex;flex-direction:column;min-width:0}
.ap-source > .ap-carte > .ap-texte{align-self:start}
.ap-cadre,.ap-mail{flex:1 1 auto;min-width:0;border:1px solid var(--voile-fonce);border-radius:.6rem;background:var(--blanc)}
.ap-cadre{padding:.7rem .8rem .75rem}
.ap-mieux{flex:1 1 auto;padding:.75rem .8rem .8rem;background:var(--ap-clair);border-left:2px solid var(--eclat);border-radius:0 var(--rayon-petit) var(--rayon-petit) 0}
.ap-mieux .ap-etiq{color:var(--porteur)}
.ap-cadre p:not(.ap-etiq),.ap-mieux p:not(.ap-etiq){margin:0;font-size:.84rem;line-height:1.52}
.ap-mieux p:not(.ap-etiq) + p:not(.ap-etiq){margin-top:.35rem}
.ap-cadre p:not(.ap-etiq){color:var(--gris)}
.ap-mieux p:not(.ap-etiq){color:var(--encre)}

/* 1 · la clarté : la formulation d'origine, entière et en gris (sa longueur se voit), la formulation clarifiée dessous.
   v054, la dernière passe : plus de coupe à cinq lignes. Elle cachait les mots qui font la preuve (« nonobstant leur
   occupation matérielle effective ») et, au téléphone, coupait au milieu d'un mot (« remplissag… ») ; rien de tronqué
   (Joy, 16/08). */

/* 2 · Geniux : le protocole, en échelle (Joy, 5/10). Trois versions d'un même passage, celle qui reste sur le fond clair.
   Le premier jet, relu, garde le cadre du mail ; la demande masquée, la pastille douce des réponses de la page Résultats,
   comme le geste de masquer à la main un passage sur une vraie lettre (Joy, 3/10). */
.ap-mail{display:grid;align-content:start;padding:.55rem 0 .7rem;overflow:hidden}
.ap-mail-de{display:flex;align-items:center;gap:.45rem;margin:0 0 .25rem;padding:0 .8rem;font-size:.74rem;line-height:1.3;color:var(--encre)}
.ap-mail-de b{font-weight:600}
.ap-mail-point{width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat);flex:none}
.ap-mail-h{margin-left:auto;font-size:.68rem;color:var(--gris);font-variant-numeric:tabular-nums}
.ap-masques{display:inline}
.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}
.fr-echelle{display:grid;align-content:start;gap:.35rem;margin:0;padding:.28rem .25rem .3rem;list-style:none;counter-reset:fe}
.fr-echelle li{display:grid;gap:.15rem;padding:.42rem .55rem;border-radius:.45rem;counter-increment:fe}
.fe-d{font:400 .78rem/1.42 var(--sans);color:var(--gris)}
.fe-d::before{content:counter(fe) "\00a0·\00a0";font-weight:600;color:var(--porteur)}
.fe-r{font:600 .74rem/1.35 var(--sans);color:var(--encre)}
.fe-mieux{background:var(--ap-clair);box-shadow:inset 2px 0 0 var(--eclat)}
.fe-mieux .fe-d{color:var(--encre)}

/* 3 · le mot-image : RDV, les barres qui se chargent de bas en haut, du rouge au vert (le moteur de v06, tel quel).
   Les proportions (Joy, 5/10 au soir) · la scène en trois rangs · l'étiquette en haut, à la hauteur de « Formulation
   initiale » et de la première demande, qui dit l'état du mot ; le mot au milieu de l'espace qui reste, à égale distance
   de l'étiquette et de la commande ; la commande en bas du cadre. Le mot garde sa proportion propre (aspect-ratio, et
   ses dimensions dans la balise) · sans elles, Safari lui donnait 150 px de haut. Le passage (validé le 5/10 au soir) ·
   un seul rail entre les deux points ; Joy B2B y glisse, le rail se remplit derrière lui à la couleur du mot, le trèfle
   roule avec lui ; à l'arrivée, le mot se pose et le point de l'élan sonne deux fois. « Voir comment » attend la fin du
   chargement, sa place gardée. */
/* v045 (Joy, 7/10 au soir) : l'étiquette d'état part, l'image dit seule où en est le mot */
.ap-rdv-cadre{display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:.55rem}
.ap-rdv-scene{display:flex;align-items:center;min-height:0}
.ap-rdv{display:block;flex:none;width:100%;height:auto;aspect-ratio:846 / 306;overflow:visible}
.ap-rdv-ctrl{display:flex;align-items:center;gap:.4rem}
.ap-pont-point{flex:none;width:.5rem;height:.5rem;border-radius:50%}
.ap-pont-depart{background:var(--ap-rouge)}
.ap-pont-elan{background:var(--voile-fonce);transition:background-color .4s var(--douce)}
.ap-mot[data-etat="fini"] .ap-pont-elan{background:var(--eclat)}
.ap-rdv-voie{position:relative;flex:1 1 auto;min-width:0;height:2.5rem}
.ap-rdv-rail{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--voile-fonce);overflow:hidden}
.ap-rdv-rail i{position:absolute;inset:0;background:var(--rdv-c,var(--eclat));transform:scaleX(var(--p,0));transform-origin:0 50%}
.ap-pont-btn{position:absolute;top:50%;left:calc(var(--p,0) * 100%);transform:translate(calc(var(--p,0) * -100%),-50%);display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.35rem .8rem .35rem .6rem;border:1px solid var(--porteur);border-radius:999px;background:var(--blanc);color:var(--porteur);font:600 .74rem/1.15 var(--sans);white-space:nowrap;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;transition:background-color .2s var(--douce),color .2s var(--douce)}
.ap-mot.glisse .ap-pont-btn{cursor:grabbing}
.ap-pont-btn:hover{background:var(--ap-clair)}
.ap-pont-btn:focus-visible{outline:2px solid var(--porteur);outline-offset:2px}
.ap-pont-btn .ico{width:1.05rem;height:1.05rem;transform:rotate(calc(var(--p,0) * 360deg))}
.ap-mot[data-etat="fini"] .ap-pont-btn{background:var(--porteur);color:var(--papier)}
.ap-mot.joue[data-etat="pret"]:not(.vu) .ap-pont-btn{animation:ap-halo 1.8s ease-out 1.6s 4}
@keyframes ap-rdv-pose{0%,100%{transform:scale(1)}45%{transform:scale(1.04)}}
@keyframes ap-point-sonne{0%{box-shadow:0 0 0 0 rgba(30,184,63,.55)}70%{box-shadow:0 0 0 .55rem rgba(30,184,63,0)}100%{box-shadow:0 0 0 0 rgba(30,184,63,0)}}
.ap-mot.arrive:not(.glisse) .ap-rdv{animation:ap-rdv-pose .6s var(--douce)}
.ap-mot.arrive .ap-pont-elan{animation:ap-point-sonne 1.5s ease-out 2}
@media (prefers-reduced-motion:reduce){ .ap-mot *,.ap-mot *::before,.ap-mot *::after{animation:none!important;transition:none!important} }
.ap-mieux .ap-rdv-message{font-size:.92rem;font-weight:500}
.ap-mieux .ap-rdv-voir{margin-top:.55rem;font:500 var(--t-petit)/1.4 var(--sans)}
.ap-rdv-voir .fl{width:1.1em;height:1.1em;margin-left:.35em;vertical-align:-.2em;transition:transform var(--d-geste) var(--douce)}
.ap-rdv-voir a:hover .fl{transform:translateX(3px)}
.ap-mot:not([data-etat="fini"]) .ap-rdv-voir{visibility:hidden}

/* à la tablette, et tant que trois cartes seraient trop étroites : chaque origine à gauche, sa carte à droite, têtes
   alignées ; la carte reprend sa colonne propre */
@container page (max-width: 1000px){
  .ap-trois{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:clamp(2.2rem,5cqw,3rem)}
  .ap-source{grid-row:auto;grid-template-rows:auto auto auto auto 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--ap-gout);align-items:start}
  .ap-source > :not(.ap-carte){grid-column:1}
  .ap-source > .ap-carte{grid-column:2;grid-row:1 / -1;margin-top:0;display:flex;flex-direction:column;gap:.9rem}
  .ap-source > .ap-carte > .ap-texte{align-self:stretch}
  .ap-recit p,.ap-apport{max-width:none}
  .ap-carte.attend{transform:none}
  .ap-source:nth-child(n) .ap-carte{transition-delay:0s}
}
/* au téléphone : une colonne, chaque origine suivie de sa carte */
@container page (max-width: 640px){
  .ap-source{display:block}
  .ap-source > .ap-carte{margin-top:1.3rem}
  .ap-pont-btn{min-height:2.75rem}
  .ap-rdv-voie{height:2.75rem}
}

/* ---- avec quels résultats : trois temps, de gauche à droite ; le filet se trace comme le temps passe ----
   La liste porte data-trace : le socle lui pose « attend », puis « joue » quand elle est montée au dernier quart de l'écran.
   Aujourd'hui : le filet porteur, et le point d'éclat au bout, là où l'on en est. Cinq rangées partagées : la date, le
   titre, le récit, puis la preuve sur deux (ce qu'elle compte, d'où elle vient). */
.ap-temps{grid-template-rows:repeat(5,auto);list-style:none;margin:var(--r-objet) 0 0;padding:0}
.ap-temps > li{position:relative;grid-row:span 5;display:grid;grid-template-rows:subgrid;min-width:0;padding-top:1.15rem}
.ap-temps > li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--voile-fonce);transform-origin:0 50%;transition:transform var(--d-trace) var(--douce)}
.ap-temps > li:nth-child(2)::before{transition-delay:.35s}
.ap-temps > li.maintenant::before{height:2px;top:-.5px;background:var(--porteur);transition-delay:.7s}
.ap-temps > li.maintenant::after{content:"";position:absolute;right:-1px;top:-4.5px;width:10px;height:10px;border-radius:50%;background:var(--eclat);transition:opacity .45s var(--douce) 1.6s,transform .45s var(--douce) 1.6s}
.ap-temps.attend li::before{transform:scaleX(0)}
.ap-temps.attend li.maintenant::after{opacity:0;transform:scale(.4)}
.ap-quand{color:var(--gris)}
/* la preuve de chaque temps, qui mène à la page où elle vit. Le chiffre habillé de la page Résultats (le nombre, ce qu'il
   compte, d'où il vient), ou des pastilles (Joy, 5/10 : « je préfère vraiment les pastilles ») : les treize secteurs
   d'Appris, des grands comptes qualifiés d'Exercé, ceux qui ont signé en plein. */
.ap-preuve{position:relative;grid-row:span 2;align-self:start;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:subgrid;row-gap:0;column-gap:.95rem;align-items:center;margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--voile-fonce);color:var(--encre);text-decoration:none;transition:border-color .3s var(--douce)}
.ap-preuve:hover{border-top-color:var(--eclat)}
.ap-p-n{font:400 clamp(2.5rem,4.2cqw,3.3rem)/1 var(--serif);letter-spacing:-.035em;color:var(--porteur);font-variant-numeric:lining-nums}
.ap-p-t{font:500 .92rem/1.38 var(--sans);color:var(--encre);text-wrap:pretty}
.ap-p-c{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.7rem;font-size:.8rem;line-height:1.45;color:var(--gris)}
.ap-p-c .fl{flex:none;width:1.1em;height:1.1em;fill:none;stroke:var(--porteur);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--d-geste) var(--douce)}
.ap-p-c:hover .fl{transform:translateX(3px)}
.ap-preuve:focus-visible{outline:2px solid var(--porteur);outline-offset:4px}
.ap-preuve-puces{align-items:start}
.ap-preuve-puces :is(.ap-p-t,.ap-p-c){grid-column:1 / -1}
.ap-puces{display:flex;flex-wrap:wrap;gap:.35rem}
.ap-puces-tete{flex-basis:100%;display:block;margin:0 0 .4rem;font:500 .92rem/1.38 var(--sans);color:var(--encre)}
/* le nom de chaque preuve, écrit dans la page (Joy, 7/10 : « L'expérience », « Les résultats », « Votre équipe aux
   commandes ») : le lecteur d'écran le lit avant le chiffre, comme l'œil */
.ap-puces-lieu{display:block;margin:0 0 .35rem;font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--porteur)}
.ap-puces-n{margin-right:.15rem;font:400 1.75rem/1 var(--serif);letter-spacing:-.025em;color:var(--porteur);font-variant-numeric:lining-nums;vertical-align:-.12em}
.ap-puces > span:where(:not(.ap-puces-tete):not(.ap-puces-leg):not(.ap-puces-lab)){padding:.24rem .6rem;border:1px solid var(--voile-fonce);border-radius:999px;background:var(--blanc);font:500 .74rem/1.2 var(--sans);color:var(--encre)}
.ap-puces > span.plein{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
.ap-puces > span.autres{border-style:dashed;background:transparent;color:var(--gris)}
.ap-puces-leg{flex-basis:100%;margin-top:.2rem;font:500 .72rem/1.4 var(--sans);color:var(--gris)}
@container page (max-width: 760px){
  .ap-temps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:1.9rem}
  .ap-temps > li{grid-row:auto;display:block}
  .ap-preuve{grid-template-columns:4.6rem minmax(0,1fr);align-items:end;margin-top:1.2rem;padding-top:1rem}
  .ap-preuve-puces{display:block}
  .ap-p-n{font-size:2.6rem}
  .ap-p-c{grid-column:2;margin-top:.3rem}
  .ap-preuve-puces .ap-p-c{margin-top:.7rem}
  .ap-temps > li:nth-child(n)::before{transition-delay:0s}
  .ap-temps > li.maintenant::after{transition-delay:.6s}
}

/* ---- les bandes : une respiration pleine largeur entre deux blocs ---- */
.ap-bande{padding-block:clamp(2.4rem,5cqw,3.4rem);border-top:1px solid var(--voile);background:var(--papier)}
.ap-apres{background:var(--ombre);border-top:0}
/* « Et l'IA ? » (v044, Joy, 7/10 : « le titre doit être très clair ») : un surtitre et un titre, comme les autres blocs,
   puis l'exemple */
.ap-apres .ap-jet{margin-top:clamp(1.5rem,3.2cqw,2.2rem)}
/* le titre sur deux lignes posées, chacune entière (v046 : « Quatre secondes pour écrire. Des années pour… ») */
.ap-apres #ap-apres-titre{max-width:none}

/* ---- la réponse reçue : la carte des réponses de la page Résultats, au bout du premier jet, dans sa troisième colonne ---- */
.ap-reponse{margin:0;padding:1.3rem 1.4rem 1.1rem;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:.9rem;color:var(--encre)}
.ap-rep-de{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;padding-bottom:.75rem;margin:0 0 .9rem;border-bottom:1px solid var(--voile)}
.ap-rep-de b{font:600 .84rem/1.35 var(--sans);color:var(--porteur)}
.ap-rep-de span{font:500 .76rem/1.4 var(--sans);color:var(--gris)}
.ap-rep-texte{margin:0}
.ap-rep-texte p{margin:0;font:400 .97rem/1.6 var(--sans);color:var(--encre)}
mark.ap-merci{color:inherit;padding:0 .06em;border-radius:.16em;background:linear-gradient(to bottom,transparent 30%,var(--ap-surligne) 30%,var(--ap-surligne) 94%,transparent 94%)}
.ap-sourire::before{content:":)"}
.ap-rep-quoi{display:flex;align-items:center;gap:.55rem;margin:1rem 0 0;font:500 .8rem/1.4 var(--sans);color:var(--porteur)}
.ap-rep-quoi::before{content:"";flex:none;width:1.05rem;height:.5rem;border-radius:.2rem;background:var(--ap-surligne)}
@container page (max-width: 760px){ .ap-reponse{padding:1.15rem 1.1rem 1rem} }

/* ---- les boutons de texte de la page (Rejouer) : soulignés d'éclat, comme les liens ---- */
.ap-rejouer{min-height:2.25rem;padding:.3rem 0;border:0;background:none;color:var(--action);font:500 var(--t-petit)/1.3 var(--sans);text-decoration:underline;text-decoration-color:var(--eclat);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.ap-rejouer:focus-visible{outline:2px solid var(--porteur);outline-offset:2px}
@container page (max-width: 640px){ .ap-rejouer{min-height:2.75rem} }

/* ==== la neuvième relecture (5/10). Deux sortes de choix : à moduler (chacun s'allume seul), et à choisir (une variante
   à la fois par groupe). Chaque pièce dit à quels choix elle appartient (data-idee) ou lesquels la remplacent
   (data-idee-sans) ; la racine porte les actifs (classes x-code). Une fois la page validée, ce qui n'est pas retenu
   part. ==== */

/* -- un message, relu : le premier jet de l'IA (Joy, 5/10 ; repris le 5/10 au soir) -- */
/* le message sur deux colonnes, la réponse sur la troisième. En tête, deux côtés : le premier jet (envoyé à 2 000 contacts,
   il arrive en spam), puis relu (écrit pour un segment, il arrive dans sa boîte). Sans script, l'état final : l'envoi et
   le spam barrés, le premier jet barré, le message relu. */
.ap-jet{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:space-between;column-gap:var(--ap-gout);align-items:start}
.ij-carte{grid-column:1 / span 2;display:grid;grid-template-rows:auto 1fr auto;gap:.75rem;margin:0;padding:1.1rem 1.2rem .5rem;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:.9rem}
/* pendant qu'il se joue, la carte garde sa hauteur finale : le mail occupe la place, le pied reste en bas */
.ij-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem 1.2rem;align-items:start}
.ij-cote{display:grid;gap:.3rem;min-width:0}
.ij-cote-relu{justify-items:end;text-align:right}
.ij-etat{font:600 .64rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:color .4s var(--douce)}
.ij-cote-jet .ij-etat{color:var(--gris)}
.ij-cote-relu .ij-etat{color:var(--porteur)}
.ij-envoi{display:grid;justify-items:start;gap:.3rem;font:500 .74rem/1.45 var(--sans);color:var(--gris)}
.ij-cote-relu .ij-envoi{justify-items:end;color:var(--encre)}
.ij-dest{display:inline-block;padding:.04rem .45rem;border-radius:999px;font:600 .64rem/1.4 var(--sans);font-style:normal;white-space:nowrap}
.ij-cote-jet .ij-dest{background:rgba(217,76,54,.12);color:#9E3320}
.ij-cote-relu .ij-dest{background:rgba(30,184,63,.16);color:var(--porteur)}
/* l'envoi du premier jet et sa destination, barrés dès que la relecture commence (Joy, 5/10 au soir : laissés tels quels,
   on ne comprend pas) ; le spam passe au gris, l'alerte est derrière lui */
.ap-jet:is([data-etat="relu"],[data-etat="fin"]) .ij-cote-jet :is(.ij-envoi-t,.ij-dest){text-decoration:line-through;text-decoration-thickness:1px}
.ap-jet:is([data-etat="relu"],[data-etat="fin"]) .ij-cote-jet .ij-dest{background:rgba(94,111,99,.1);color:var(--gris)}
.ij-chrono{font-variant-numeric:tabular-nums}
.ij-mail{padding:.55rem 0 .65rem}
.ij-l{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.8rem;align-items:start;margin:0;padding:.3rem .8rem .3rem 1.67rem;transition:background-color .45s var(--douce)}
.ij-l > :is(.ij-jet,.ij-relu){grid-column:1}
.ij-jet{display:block;font:400 .76rem/1.45 var(--sans);color:var(--gris);text-decoration:line-through;text-decoration-color:rgba(94,111,99,.6)}
.ij-relu{display:block;font:400 .88rem/1.5 var(--sans);color:var(--encre)}
.ij-objet .ij-relu{font-weight:600}
.ij-tags{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;padding-top:.1rem}
.ij-tag{display:inline-flex;gap:.3rem;padding:.14rem .55rem;border-radius:999px;background:var(--ap-clair);font:500 .66rem/1.3 var(--sans);color:var(--gris-voile);white-space:nowrap}
.ij-tag b{font-weight:600;color:var(--porteur)}
.ij-pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.2rem 1rem;margin:0}
.ij-reponse{display:grid;gap:.8rem;min-width:0}
.ij-reponse > .ap-reponse{padding:1.05rem 1.05rem .95rem}
.ij-reponse .ap-rep-texte p{font-size:.9rem;line-height:1.56}
/* les états, le temps qu'il se joue : pret (il attend, vide, le curseur au début de l'objet), jet (il s'écrit), envoye
   (l'envoi, puis le spam), relu (ligne à ligne), fin. Les pièces à venir gardent leur place (visibility) : rien ne saute. */
.ap-jet:is([data-etat="pret"],[data-etat="jet"],[data-etat="envoye"]) .ij-cote-jet .ij-etat{color:var(--porteur)}
.ap-jet:is([data-etat="pret"],[data-etat="jet"],[data-etat="envoye"]) .ij-cote-relu,
.ap-jet:not(.vu-envoi) .ij-cote-jet .ij-envoi-t,
.ap-jet:not(.vu-spam) .ij-cote-jet .ij-dest,
.ap-jet:not(.vu-pour) .ij-cote-relu .ij-envoi-t,
.ap-jet:not(.vu-boite) .ij-cote-relu .ij-dest{visibility:hidden}
.ap-jet[data-etat="envoye"] .ij-cote-jet .ij-envoi-t,
.ap-jet[data-etat="relu"] .ij-cote-relu .ij-etat,
.ap-jet[data-etat="relu"].vu-pour .ij-cote-relu .ij-envoi-t{animation:parait var(--d-fondu) var(--douce)}
.ap-jet[data-etat="envoye"].vu-spam .ij-cote-jet .ij-dest,
.ap-jet[data-etat="relu"].vu-boite .ij-cote-relu .ij-dest{animation:ij-pose .5s var(--douce)}
@keyframes ij-pose{from{opacity:0;transform:scale(.85)}}
/* tant qu'une ligne n'est pas relue : le premier jet en clair, à la taille du mail */
.ap-jet:is([data-etat="pret"],[data-etat="jet"],[data-etat="envoye"]) .ij-l .ij-jet,
.ap-jet[data-etat="relu"] .ij-l:not(.relue) .ij-jet{font-size:.88rem;line-height:1.5;color:var(--encre);text-decoration:none}
.ap-jet:is([data-etat="pret"],[data-etat="jet"],[data-etat="envoye"]) .ij-objet .ij-jet,
.ap-jet[data-etat="relu"] .ij-objet:not(.relue) .ij-jet{font-weight:600}
.ap-jet:is([data-etat="pret"],[data-etat="jet"],[data-etat="envoye"]) .ij-l :is(.ij-relu,.ij-tags),
.ap-jet[data-etat="relu"] .ij-l:not(.relue) :is(.ij-relu,.ij-tags){display:none}
/* la ligne qu'on relit : le fond clair et le point d'éclat (« vous êtes ici ») ; son étiquette arrive après elle */
.ij-l::before{content:"";position:absolute;left:.72rem;top:.74rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat);opacity:0;transform:scale(.4);transition:opacity .3s var(--douce),transform .3s var(--douce)}
.ap-jet[data-etat="relu"] .ij-l.ici{background:var(--ap-clair)}
.ap-jet[data-etat="relu"] .ij-l.ici::before{opacity:1;transform:none}
.ap-jet[data-etat="relu"] .ij-l.relue .ij-relu{animation:parait var(--d-fondu) var(--douce)}
.ap-jet[data-etat="relu"] .ij-l.relue:not(.tag-vu) .ij-tags{visibility:hidden}
.ap-jet[data-etat="relu"] .ij-l.tag-vu .ij-tags{animation:parait var(--d-fondu) var(--douce)}
/* le curseur, qui attend puis suit la frappe */
@keyframes ij-curseur{50%{opacity:0}}
.ap-jet:is([data-etat="pret"],[data-etat="jet"]) .ij-l.tape .ij-jet::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.17em;background:var(--porteur);animation:ij-curseur 1.05s steps(1) infinite}
/* la réponse arrive à la fin ; « Voir le message relu » tant qu'il se joue, puis « Rejouer », à la même place */
.ap-jet:not([data-etat="fin"]) .ij-reponse{visibility:hidden}
.ap-jet[data-etat="fin"] .ij-reponse{animation:parait var(--d-fondu) var(--douce)}
.ij-passer{display:none}
.ap-jet:not([data-etat="fin"]) .ij-passer{display:inline-block}
.ap-jet:not([data-etat="fin"]) .ij-rejouer{display:none}
@media (prefers-reduced-motion:reduce){ .ap-jet *,.ap-jet *::before,.ap-jet *::after{animation:none!important;transition:none!important} }
@container page (max-width: 760px){
  .ap-jet{grid-template-columns:minmax(0,1fr);row-gap:1rem}
  .ij-carte{grid-column:1;padding:1rem 1rem .45rem}
  .ij-l{grid-template-columns:minmax(0,1fr);padding-left:1.2rem;padding-right:.7rem}
  .ij-l::before{left:.42rem}
  .ij-tags{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding-top:.3rem}
  .ij-pied .ap-carte-note{flex-basis:100%}
}
@container page (max-width: 640px){
  .ij-tete{grid-template-columns:minmax(0,1fr)}
  .ij-cote-relu,.ij-cote-relu .ij-envoi{justify-items:start;text-align:left}
}

/* -- la preuve de Transmis : des actifs qui prennent de la valeur (Joy, 5/10 au soir : validé) -- */
/* tr-actifs · des actifs à votre nom, qui prennent de la valeur : au départ, puis après un an ; la flèche dit le temps,
   la valeur d'arrivée au vert porteur, l'autonomie du pilote sur le fond clair */
.ap-actifs{display:grid;gap:0;margin-top:.15rem}
.aa-tete,.aa-l{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.4fr);column-gap:.55rem;align-items:baseline}
.aa-tete{padding:0 .4rem .3rem;font:600 .58rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gris-voile)}
.aa-tete span:first-child{grid-column:2}
.aa-l{padding:.36rem .4rem;border-top:1px solid var(--voile-fonce);font:500 .74rem/1.35 var(--sans);color:var(--gris-voile)}
.aa-l b{font-weight:600;color:var(--encre)}
.aa-l > span:last-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.35rem;font-weight:600;color:var(--porteur)}
.aa-l > span:last-child::before{content:"→";font:600 .8rem/1.3 var(--sans);color:var(--eclat)}
.aa-tete span:last-child{padding-left:1.15rem}
.aa-pilote{border-radius:0 0 .45rem .45rem;background:var(--ap-clair)}

/* -- à moduler -- */
/* photo · le portrait plus grand, au téléphone : toute la largeur de la colonne. Au-delà de 300 px, la photo de 900 px
   passe sous le 3x ; pour la garder nette, il faut l'original en 1 080 px de large. */
@container page (max-width: 760px){ .x-photo .ap-photo{width:100%} }
/* preuves · le parcours passe avant les origines (le script) ; les fonds s'échangent, deux blocs clairs ne se touchent pas,
   et les gris du parcours foncent d'un cran sur le voile */
.x-preuves #parcours{background:var(--voile)}
.x-preuves #approche{background:var(--papier)}
.x-preuves #parcours :is(.ap-quand,.ap-p-c,.ap-puces-leg,.ap-puces > span.autres,.ap-v-attente){color:var(--gris-voile)}
/* logos · le logo de chaque temps, au-dessus de sa date (Joy, 3/10) : Nimley, le premier logo de Joy B2B, le trèfle
   d'aujourd'hui. Une rangée de plus, partagée. */
.x-logos .ap-temps{grid-template-rows:repeat(6,auto)}
.x-logos .ap-temps > li{grid-row:span 6}
.ap-vignette{display:flex;align-items:center;height:clamp(72px,7.6cqw,88px);margin:0 0 1rem}
.ap-v-attente{justify-content:center;width:min(100%,12.5rem);border:1px dashed var(--voile-fonce);border-radius:.6rem;font:500 .68rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--gris)}
.ap-v-logo{gap:.75rem}
.ap-v-logo svg{display:block;height:64%;width:auto;aspect-ratio:1}
.ap-v-mot{font:600 .95rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--porteur)}
.v-cercles circle{fill:none;stroke:var(--porteur);stroke-width:.035;opacity:.5}
.v-trefle{fill:var(--porteur)}
@container page (max-width: 760px){ .ap-vignette{height:64px;margin-bottom:.8rem} }
/* geste · un seul geste au premier échange : le bouton, sans le lien « Ou d'abord » (Joy, 5/10 : trop de lignes dispersent) */
.x-geste #pe-suite{display:none!important}
/* c7 · le rail qui coche ses questions : la question lue garde son point plein, et sa coche (Joy, 5/10 : à étendre à tout le
   site à l'assemblage, avec et sans, jugé en dernière passe) */
.x-c7 .rail a.lu:not(.actif)::before{background:var(--porteur);border-color:var(--porteur)}
.x-c7 .rail a.lu span::after{content:"\00a0✓";color:var(--porteur)}
.x-c7 .rail a.sur-sombre.lu:not(.actif)::before{background:var(--sur-vert-2);border-color:var(--sur-vert-2)}
.x-c7 .rail a.sur-sombre.lu span::after{color:var(--papier)}

/* c9 · ce que je tiens, aujourd'hui : dans le prolongement d'Internalisation (Joy, 5/10). Le temps présent prend le voile,
   et le voile se prolonge sous les trois temps, en un seul objet : le présent, puis ce qu'il tient. Un congé arrondi
   joint les deux. */
.x-c9 .ap-temps > li.maintenant{margin-inline:calc(-1 * var(--ap-deborde));padding:1.15rem var(--ap-deborde) 1.6rem;background:var(--voile);border-radius:var(--rayon) var(--rayon) 0 0}
.x-c9 .ap-temps > li.maintenant::before{left:var(--ap-deborde);right:var(--ap-deborde)}
.x-c9 .ap-temps > li.maintenant::after{right:calc(var(--ap-deborde) - 1px)}
.x-c9 .ap-temps > li.maintenant :is(.ap-quand,.ap-p-c,.ap-puces-leg,.ap-puces > span.autres){color:var(--gris-voile)}
.ap-present-coin{display:none}
.x-c9 .ap-present-coin{display:block;position:absolute;left:calc(-1 * var(--rayon));bottom:0;width:var(--rayon);height:var(--rayon);background:radial-gradient(circle at 0 0,transparent calc(var(--rayon) - .5px),var(--voile) var(--rayon))}
.ap-tiens{margin:0 calc(-1 * var(--ap-deborde));padding:clamp(1.4rem,3cqw,2rem) var(--ap-deborde) clamp(1.5rem,3.2cqw,2.1rem);background:var(--voile);border-radius:var(--rayon) 0 var(--rayon) var(--rayon)}
.ap-tiens-tete{display:flex;align-items:center;gap:.55rem;margin:0 0 1.15rem;font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--porteur)}
.ap-tiens-tete::before{content:"";flex:none;width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat)}
.ap-tiens-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem var(--ap-gout);margin:0;padding:0;list-style:none}
.ap-tiens-liste li{position:relative;display:grid;align-content:start;gap:.4rem;padding-top:.9rem}
.ap-tiens-liste li::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;border-radius:2px;background:var(--eclat)}
.ap-tiens-liste b{font:500 clamp(1.02rem,1.7cqw,1.12rem)/1.3 var(--serif);font-optical-sizing:auto;color:var(--encre)}
.ap-tiens-liste span{font-size:.88rem;line-height:1.55;color:var(--gris-voile)}
.x-preuves.x-c9 .ap-temps > li.maintenant,.x-preuves .ap-tiens{background:var(--papier)}
.x-preuves.x-c9 .ap-present-coin{background:radial-gradient(circle at 0 0,transparent calc(var(--rayon) - .5px),var(--papier) var(--rayon))}
@container page (max-width: 1000px){ .ap-tiens-liste{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container page (max-width: 760px){
  .ap-tiens{border-radius:0 0 var(--rayon) var(--rayon)}
  .x-c9 .ap-present-coin{display:none}
}
@container page (max-width: 520px){ .ap-tiens-liste{grid-template-columns:minmax(0,1fr)} }

/* -- la fin du premier échange : la question des trois secondes en titre, dans les mots de Joy (5/10), et le P.-S. en une
   ligne (« les 2 en une ligne ») ; la promesse, le P.-S. et le bouton s'accordent à la question (fin-a, fin-b, fin-c) -- */
.pe-ps{margin:1.3rem 0 0;max-width:34rem;font:400 var(--t-corps)/1.55 var(--sans);color:var(--papier)}
.pe-ps-lab{margin-right:.35rem;font-weight:600;color:var(--sur-vert-1)}
/* la question en titre, sur deux lignes posées : la mesure s'élargit à la colonne */
#premier-echange #pe-titre{max-width:none}
/* halo · le bouton qui appelle (Joy, 5/10) : un halo d'éclat, rectangle comme le bouton, respire trois fois autour de lui,
   2,5 s après que le premier échange est à hauteur de lecture ; puis le calme. Le halo du point (l'accueil, la page
   contact), à la forme du bouton. */
.pe-carte .btn-plein{position:relative}
.pe-carte .btn-plein::after{content:"";position:absolute;inset:-3px;border:2px solid var(--eclat);border-radius:calc(var(--rayon-moyen) + 3px);opacity:0;pointer-events:none}
.x-halo .pe-carte .btn-plein.appelle::after{animation:ap-halo-btn 1.8s ease-out 3}
@keyframes ap-halo-btn{0%{inset:-3px;border-radius:calc(var(--rayon-moyen) + 3px);opacity:0}18%{opacity:1}100%{inset:-16px;border-radius:calc(var(--rayon-moyen) + 16px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .x-halo .pe-carte .btn-plein.appelle::after{animation:none} }

/* ==== les deux blocs, cinq présentations (Joy, 6/10 : « penser l'attention du user comme un fil continu ; pas de
   dispersion, pas d'agrégation de beaucoup d'éléments »). La même matière, cinq façons de la lire · 1 le fil, 2 la scène,
   3 la page, 4 le passage, 5 le sommaire. La racine porte la présentation choisie (x-p-fil…) et x-pres pour leurs
   fondations communes ; sans elles, l'actuelle (v034). Une fois l'une choisie, les autres partent. ==== */

/* -- les fondations communes --
   Un niveau de surface par bloc, jamais une carte dans la carte. Une couleur, un sens · l'éclat dit « vous êtes ici »,
   une fois à l'écran ; le porteur, ce que le lecteur y gagne ; le rouge brique, l'état de départ, dans les exemples
   seulement. Une étiquette en capitales par bloc, son surtitre ; les autres repères en minuscules. Les noms et les
   secteurs se lisent en texte, comme le mur des noms de Résultats (une pastille ressemble à un bouton). Seule la
   dernière ligne d'une preuve mène à la page où elle vit. Un mouvement à la fois, qui passe la main au suivant. */
.x-pres .ap-vignette{display:none!important}
.x-pres .ap-carte.attend{opacity:1;transform:none}
.x-pres :is(.ap-source,.ap-temps > li){border-top:0}
.x-pres .ap-temps > li::before,.x-pres .ap-temps > li::after{display:none}
.x-pres .ap-present-coin{display:none}
/* les repères */
.x-pres .ap-carte-lieu{font:500 var(--t-note)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--gris)}
.x-pres .ap-etiq{margin:0 0 .3rem;font:500 .76rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--gris)}
.x-pres .ap-mieux .ap-etiq{font-weight:600;color:var(--porteur)}
.x-pres .ap-apport{margin-top:1rem;padding-top:0}
.x-pres .ap-apport::before{display:none}
.x-pres .ap-apport-lab{margin:0 0 .2rem;font:600 var(--t-note)/1.35 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--porteur)}
/* l'exemple, à plat : un objet, et dedans du texte, séparé par des filets */
.x-pres .ap-carte{box-shadow:none}
.x-pres :is(.ap-cadre,.ap-mieux){padding:0;border:0;border-radius:0;background:transparent}
.x-pres .ap-carte-titre{font-size:1.12rem}
.x-pres .ap-clair-initial p:not(.ap-etiq){-webkit-line-clamp:4;line-clamp:4;font-size:.84rem;color:var(--gris)}
.x-pres :is(.ap-clair,.ap-g,.ap-mot) .ap-texte{padding-top:.8rem;border-top:1px solid var(--voile-fonce)}
.x-pres .ap-clair .ap-mieux p:not(.ap-etiq){font-size:.95rem;line-height:1.5;color:var(--encre)}
.x-pres .fr-echelle{gap:0;padding:0}
.x-pres .fr-echelle li{padding:.55rem 0;border-radius:0;border-top:1px solid var(--voile-fonce)}
.x-pres .fr-echelle li:first-child{padding-top:.1rem;border-top:0}
.x-pres .fe-mieux{background:none;box-shadow:none}
.x-pres .fe-mieux .fe-d{font-weight:500;color:var(--encre)}
.x-pres .fe-mieux .fe-r{color:var(--porteur)}
.x-pres .fr-echelle li:not(.fe-mieux) .fe-r{font-weight:500;color:var(--gris-voile)}
.x-pres .ap-g .ap-mieux p:not(.ap-etiq){font-size:.92rem;font-weight:500;color:var(--encre)}
.x-pres .ap-rdv-cadre{padding:0}
/* l'exemple se joue une fois, à son tour (ap-attend, puis ap-joue). Le départ est déjà là ; ce qui change arrive quand
   le lecteur y arrive · la formulation clarifiée sous celle de départ ; la troisième demande sous les deux premières, puis
   ce qui reste ; le pont de RDV appelle quand c'est son tour */
.x-pres .ap-clair .ap-texte{transition:opacity .6s var(--douce) .6s,transform .6s var(--douce) .6s}
.x-pres .ap-clair.ap-attend .ap-texte{opacity:0;transform:translateY(8px);transition:none}
.x-pres .ap-g .fr-echelle li:nth-child(3){transition:opacity .55s var(--douce) .35s,transform .55s var(--douce) .35s}
.x-pres .ap-g.ap-attend .fr-echelle li:nth-child(3){opacity:0;transform:translateY(6px);transition:none}
.x-pres .ap-g .ap-texte{transition:opacity .6s var(--douce) 1.1s}
.x-pres .ap-g.ap-attend .ap-texte{opacity:0;transition:none}
.x-pres .ap-mot.joue[data-etat="pret"]:not(.vu) .ap-pont-btn{animation:none}
.x-pres .ap-mot.ap-joue[data-etat="pret"]:not(.vu) .ap-pont-btn{animation:ap-halo 1.8s ease-out 1.2s 4}
/* les preuves : le chiffre, puis les noms en texte ; seule la dernière ligne est un lien (dans la page aussi depuis la
   passe UX du 6/10 : le lecteur d'écran lit la preuve, puis un lien court) */
.x-pres .ap-preuve{display:block;margin:0;padding:0;border-top:0}
.x-pres .ap-preuve .ap-p-c{pointer-events:auto}
.x-pres .ap-puces{display:block}
.x-pres .ap-puces-tete{margin:0 0 .5rem;font:500 .95rem/1.4 var(--sans);color:var(--encre)}
.x-pres .ap-puces-n{display:block;margin:0 0 .2rem;font:400 clamp(2.4rem,4cqw,3rem)/1 var(--serif);letter-spacing:-.03em;vertical-align:baseline}
.x-pres .ap-puces > span:where(:not(.ap-puces-tete):not(.ap-puces-leg)){display:inline;padding:0;border:0;border-radius:0;background:none;font:400 .86rem/1.75 var(--sans);color:var(--gris)}
.x-pres .ap-puces > span:where(:not(.ap-puces-tete):not(.ap-puces-leg)) + span:where(:not(.ap-puces-leg):not(.autres))::before{content:"\00a0· ";color:var(--gris)}
.x-pres .ap-puces > span.autres::before{content:"\0020"}
.x-pres .ap-puces > span.plein{background:none;color:var(--encre);font-weight:600}
.x-pres .ap-puces-leg{display:block;margin-top:.3rem;font-size:0;color:var(--gris-voile)}
.x-pres .ap-puces-leg::after{content:"En gras, ceux qui ont signé.";font:500 .74rem/1.4 var(--sans);color:var(--gris-voile)}
.x-pres .ap-p-c{display:inline-block;margin-top:.85rem;font:500 var(--t-petit)/1.4 var(--sans);color:var(--action);text-decoration:underline;text-decoration-color:var(--eclat);text-decoration-thickness:1.5px;text-underline-offset:4px}
.x-pres .ap-p-c .fl{display:inline-block;width:1.05em;height:1.05em;margin-left:.3em;vertical-align:-.18em;stroke:currentColor}
.x-pres .ap-actifs{margin-top:.2rem}
.x-pres .aa-tete{padding:0 0 .35rem;font:500 .74rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--gris)}
.x-pres .aa-l{padding:.42rem 0;font-size:.84rem}
.x-pres .aa-pilote{background:none;border-radius:0}
.x-pres .aa-l > span:last-child::before{color:var(--porteur)}
/* ce que je tiens : un titre, quatre engagements, sans fond */
.x-pres.x-c9 .ap-temps > li.maintenant{margin-inline:0;padding:0;background:none;border-radius:0}
.x-pres .ap-tiens{margin:clamp(2.6rem,5cqw,3.6rem) 0 0;padding:0;background:none;border-radius:0}
.x-pres .ap-tiens-tete{margin:0 0 1.1rem;font:500 var(--ap-h3)/1.15 var(--serif);font-optical-sizing:auto;letter-spacing:-.012em;text-transform:none;color:var(--encre)}
.x-pres .ap-tiens-tete::before{display:none}
.x-pres .ap-tiens-liste li{padding-top:0}
.x-pres .ap-tiens-liste li::before{display:none}
.x-pres .ap-tiens-liste span{color:var(--gris)}

/* -- 1 · le fil : une ligne relie les six étapes et ce que je tiens ; elle se trace au fil de la lecture. Un seul fond, le
   papier, pour que le fil ne se coupe pas d'un bloc à l'autre ; le voile marque ce qui se regarde, les trois exemples.
   Le point de chaque étape se remplit quand la ligne l'atteint ; celle qu'on lit porte l'éclat, la grammaire des points
   du rail. Son exemple se joue alors, et lui seul. -- */
.x-p-fil :is(#approche,#parcours){--fil-marge:4.4rem;--fil-x:.45rem;position:relative;background:var(--papier)}
.x-p-fil :is(#approche,#parcours){border-top:0}
.x-p-fil :is(#approche,#parcours).fil-tete{border-top:1px solid var(--voile)}
.x-p-fil :is(#approche,#parcours) > .cadre{padding-left:calc(var(--gouttiere) + var(--fil-marge))}
.x-p-fil :is(#approche,#parcours)::before,.x-p-fil :is(#approche,#parcours)::after{content:"";position:absolute;z-index:0;left:calc(max(0px,(100% - 1120px) / 2) + var(--gouttiere) + var(--fil-x) - 1px);width:2px;border-radius:2px;pointer-events:none}
/* la ligne part du premier point du bloc du haut, finit au bas de la dernière étape du bloc du bas (le script les mesure,
   dans l'ordre de lecture choisi) */
.x-p-fil :is(#approche,#parcours)::before,.x-p-fil :is(#approche,#parcours)::after{top:var(--fil-haut,0px);bottom:var(--fil-bas,0px)}
.x-p-fil :is(#approche,#parcours)::before{background:var(--voile-fonce)}
.x-p-fil :is(#approche,#parcours)::after{background:var(--porteur);transform:scaleY(var(--fil-p,1));transform-origin:50% 0}
.x-p-fil .ap-trois,.x-p-fil .ap-temps{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:clamp(3rem,6.5cqw,4.6rem);margin-top:clamp(2.2rem,4.6cqw,3rem)}
.x-p-fil :is(.ap-source,.ap-temps > li){position:relative;grid-row:auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:none;column-gap:clamp(2rem,5cqw,4rem);align-items:start;margin:0;padding:0;background:none}
.x-p-fil .ap-src-txt{display:block;grid-column:1;min-width:0}
.x-p-fil .ap-recit p,.x-p-fil .ap-apport{max-width:44ch}
.x-p-fil .ap-source > .ap-carte{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:1rem;margin:0;padding:1.3rem 1.4rem 1.15rem;background:var(--voile);border:0;border-radius:var(--rayon)}
.x-p-fil .ap-carte :where(.ap-carte-lieu,.ap-etiq,.ap-carte-note,.fe-d,.fr-echelle li:not(.fe-mieux) .fe-r),.x-p-fil .ap-clair-initial p:not(.ap-etiq){color:var(--gris-voile)}
.x-p-fil .ap-carte .ap-mieux .ap-etiq{color:var(--porteur)}
.x-p-fil .ap-carte .fe-mieux .fe-d{color:var(--encre)}
.x-p-fil .ap-carte :where(.ap-texte,.fr-echelle li){border-color:var(--voile-fonce)}
.x-p-fil .ap-temps > li > .ap-preuve{grid-column:2;grid-row:1;padding-top:.1rem}
/* ce que je tiens, dans le temps présent : sous son récit et sa preuve, sur toute la largeur de l'étape, sans point à lui */
.x-p-fil .ap-temps > li > .ap-tiens{grid-column:1 / -1;margin:clamp(.5rem,2cqw,1.4rem) 0 0}
.x-p-fil .ap-tiens-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem clamp(2rem,5cqw,4rem)}
/* les points : vides, remplis quand la ligne les atteint, l'éclat sur celui qu'on lit */
.x-p-fil .ap-source::before,.x-pres.x-p-fil .ap-temps > li::before{content:"";display:block;position:absolute;z-index:1;left:calc(var(--fil-x) - var(--fil-marge) - 7px);right:auto;top:2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--voile-fonce);background:var(--papier);transform:none;transition:background-color .35s var(--douce),border-color .35s var(--douce),box-shadow .35s var(--douce)}
.x-p-fil .ap-source.lu::before,.x-pres.x-p-fil .ap-temps > li.lu::before{border-color:var(--porteur);background:var(--porteur)}
.x-p-fil .ap-source.ici::before,.x-pres.x-p-fil .ap-temps > li.ici::before{border-color:var(--eclat);background:var(--eclat);box-shadow:0 0 0 5px rgba(30,184,63,.16)}
@container page (max-width: 1000px){
  .x-p-fil :is(.ap-source,.ap-temps > li){grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .x-p-fil .ap-source > .ap-carte,.x-p-fil .ap-temps > li > .ap-preuve{grid-column:1;grid-row:auto}
  .x-p-fil .ap-recit p,.x-p-fil .ap-apport{max-width:62ch}
}
@container page (max-width: 760px){
  .x-p-fil :is(#approche,#parcours){--fil-marge:2.35rem;--fil-x:.4rem}
  .x-p-fil .ap-source > .ap-carte{padding:1.1rem 1.1rem 1rem}
  .x-p-fil .ap-tiens-liste{grid-template-columns:minmax(0,1fr)}
}

/* ==== les passes du 6/10, sur le fil. Validés · le mot-image plus petit, qui se charge à la lecture ; l'ordre d'avant à
   aujourd'hui ; cinq actifs pour Transmis ; le bandeau qui s'ouvre pour ce que je tiens ; les preuves dans la carte du
   Dispositif (pr-3), sur l'échelle du site. Puis (7/10) la carte des exemples, « Au pied, ce qu'on retient » (ex-3) ; les
   trois autres idéations sont parties. ==== */

/* -- le mot-image : 260 px au plus, sans commande ; il se charge à mesure qu'il monte vers la ligne de lecture -- */
.x-pres .ap-source > .ap-carte > .ap-texte{align-self:stretch}
.x-pres .ap-rdv-cadre{grid-template-columns:minmax(0,260px);justify-content:start}
.x-rdv-fil .ap-rdv-pied{display:none}

/* -- les cartes. Deux familles, une carte : celle de « L'exemple suivi sur cette page », au Dispositif. Un en-tête sur le
   voile, le corps sur le blanc, un pied sous un filet. Les preuves y sont, validées (Joy, 6/10 : « mes preuves prospection
   ok dans la carte du dispositif ») ; les exemples la prennent aussi (« préférence pour carte du dispositif »), finie sur
   ce qu'on retient (ex-3, Joy, 7/10 : « oui au pied ce qu'on retient »).
   L'échelle des cartes (Joy, 6/10 : « en termes de tailles de texte j'en vois des différentes, cale-toi sur ce qui a été
   choisi pour le site ») · chaque taille est une taille du site, au rôle que lui donne site.css, la même que dans la
   colonne d'à côté. Les capitales en --t-surtitre (comme « En prospection »), le titre en --t-h3 (comme le titre de
   l'étape), la phrase qui reste en --t-fil, en Fraunces, le libellé du chiffre en --t-ui, le texte, les pastilles et les
   liens en --t-petit, les notes en --t-note (comme « Droit · ESCP Europe · Citeo »). Le chiffre, seul hors de l'échelle,
   reprend celui de la page Résultats. -- */

/* la carte des exemples (Joy, 7/10 : « oui au pied ce qu'on retient ») : la carte du Dispositif (celle de la v040, sur
   l'échelle), puis, plus bas, ce qui la fait finir sur ce qu'on retient. La carte du Dispositif. Le corps : le départ en petit, puis le gain, marqué du
   point vert de la sélection et posé en Fraunces. Le protocole reprend les cases du ciblage, une par ligne pour que
   chaque réaction tienne sur la sienne (Joy, 5/10), la demande retenue en vert plein, comme l'hypothèse choisie. */
.x-ex-3 .ap-source > .ap-carte{gap:0;padding:0;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);overflow:hidden}
.x-ex-3 .ap-source > .ap-carte > .ap-carte-tete{gap:.45rem;padding:1.1rem 1.25rem 1rem;background:var(--voile);border-bottom:1px solid var(--voile-fonce)}
.x-ex-3 .ap-source > .ap-carte :is(.ap-carte-lieu,.ap-etiq){font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.x-ex-3 .ap-source > .ap-carte .ap-carte-lieu{color:var(--porteur)}
.x-ex-3 .ap-source > .ap-carte .ap-etiq{margin:0 0 .45rem;color:var(--gris-voile)}
.x-ex-3 .ap-source > .ap-carte .ap-carte-titre{font:500 var(--t-h3)/1.21 var(--serif);font-optical-sizing:auto;letter-spacing:-.01em;color:var(--encre)}
.x-ex-3 .ap-source > .ap-carte > :is(.ap-scene,.ap-texte){padding:1.1rem 1.25rem 0;border-top:0}
.x-ex-3 .ap-source > .ap-carte > .ap-texte{padding-bottom:1.15rem}
.x-ex-3 .ap-clair > .ap-texte{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--voile)}
.x-ex-3 .ap-clair-initial p:not(.ap-etiq){font-size:var(--t-petit);line-height:1.6}
.x-ex-3 .ap-source .ap-mieux .ap-etiq{display:flex;align-items:center;gap:.45rem;color:var(--porteur)}
.x-ex-3 .ap-source .ap-mieux .ap-etiq::before{content:"";flex:none;width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat)}
.x-ex-3 :is(.ap-clair,.ap-g) .ap-mieux p:not(.ap-etiq),.x-ex-3 .ap-mot .ap-rdv-message{font:500 var(--t-fil)/1.45 var(--serif);font-optical-sizing:auto;letter-spacing:-.003em;color:var(--encre)}
.x-ex-3 .ap-mot .ap-rdv-voir{font:500 var(--t-petit)/1.4 var(--sans)}
.x-ex-3 .ap-source > .ap-carte > .ap-carte-note{margin:0;padding:.85rem 1.25rem .9rem;border-top:1px solid var(--voile-fonce);font-size:var(--t-note);line-height:1.5}
/* le protocole, en cases, une par ligne */
.x-ex-3 .ap-g .fr-echelle{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;padding:0}
.x-ex-3 .ap-g .fr-echelle > li,.x-ex-3 .ap-g .fr-echelle > li:first-child{display:flex;flex-direction:column;gap:.2rem;padding:.65rem .85rem .7rem;border:1px solid var(--voile-fonce);border-radius:.6rem;background:var(--papier)}
.x-ex-3 .ap-g .fr-echelle > li > .fe-d{font:600 var(--t-petit)/1.4 var(--sans);color:var(--encre)}
.x-ex-3 .ap-g .fr-echelle > li > .fe-r{font:400 var(--t-note)/1.4 var(--sans);color:var(--gris-voile)}
.x-ex-3 .ap-g .fr-echelle > li.fe-mieux{background:var(--porteur);border-color:var(--porteur)}
.x-ex-3 .ap-g .fr-echelle > li.fe-mieux > .fe-d,.x-ex-3 .ap-g .fr-echelle > li.fe-mieux > .fe-d::before{color:var(--papier)}
.x-ex-3 .ap-g .fr-echelle > li.fe-mieux > .fe-r{color:rgba(253,252,249,.86)}
.x-ex-3 .ap-g > .ap-texte{margin-top:.1rem}

/* ex-3 · au pied, ce qu'on retient. La carte du Dispositif à la lettre. Sa note monte sous le titre, dans l'en-tête, là où
   le Dispositif écrit « Exemple fictif » : le lecteur sait ce qu'il regarde avant de le regarder. Le corps garde la
   matière. Le gain ferme la carte, sous un filet, comme la sélection au pied du ciblage, et son point bat une fois quand
   il se pose. Les six cartes finissent pareil, sur ce qu'elles donnent : le gain pour un exemple, le lien pour une
   preuve. */
.x-ex-3 .ap-source > .ap-carte > .ap-carte-tete{order:1;padding-bottom:.5rem;border-bottom:0}
/* sans note (le mot-image, Joy, 7/10), l'en-tête se ferme lui-même : son souffle et son filet */
.x-ex-3 .ap-source > .ap-carte:not(:has(> .ap-carte-note)) > .ap-carte-tete{padding-bottom:1rem;border-bottom:1px solid var(--voile-fonce)}
.x-ex-3 .ap-source > .ap-carte > .ap-carte-note{order:2;padding:0 1.25rem 1rem;background:var(--voile);border-top:0;border-bottom:1px solid var(--voile-fonce);color:var(--gris-voile)}
.x-ex-3 .ap-source > .ap-carte > .ap-scene{order:3;padding-bottom:1.15rem}
.x-ex-3 .ap-source > .ap-carte > .ap-texte{order:4;margin-top:0;padding:1.1rem 1.25rem 1.15rem;border-top:1px solid var(--voile-fonce)}
/* le pied attend sa réponse (passe UX, 6/10) : son filet est là d'emblée, le gain s'y pose quand l'exemple se joue ;
   avant, tout le pied restait blanc, sans filet, et la carte semblait finir trop tôt */
.x-ex-3 .ap-source > :is(.ap-clair,.ap-g).ap-attend > .ap-texte{opacity:1;transform:none}
.x-ex-3 .ap-source > :is(.ap-clair,.ap-g) > .ap-texte > *{transition:opacity .6s var(--douce) .6s,transform .6s var(--douce) .6s}
.x-ex-3 .ap-source > .ap-g > .ap-texte > *{transition-delay:1.1s}
.x-ex-3 .ap-source > :is(.ap-clair,.ap-g).ap-attend > .ap-texte > *{opacity:0;transform:translateY(8px);transition:none}
@keyframes ap-pouls{40%{transform:scale(1.9)}}
@media (prefers-reduced-motion: no-preference){
  .x-ex-3 .ap-clair.ap-joue .ap-mieux .ap-etiq::before{animation:ap-pouls .7s var(--douce) 1.25s}
  .x-ex-3 .ap-g.ap-joue .ap-mieux .ap-etiq::before{animation:ap-pouls .7s var(--douce) 1.75s}
  .x-ex-3 .ap-mot.arrive .ap-mieux .ap-etiq::before{animation:ap-pouls .7s var(--douce) .2s}
}

/* les preuves, dans la carte du Dispositif (validé, Joy, 6/10). L'en-tête sur le voile : le nom de la preuve (Joy, 7/10),
   le chiffre et son libellé, comme en tête de la page Résultats. Le corps sur le blanc : les pastilles, comme « Ce
   qu'elles demandent » et les réglages du domaine ; les cinq actifs portent la coche des réglages. Le pied sous un
   filet : le lien, sa flèche à droite. */
.x-pr-3 .ap-temps > li > .ap-preuve{padding:0;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);overflow:hidden}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-p-t{display:block;padding:0}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;padding:0 1.25rem .65rem}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces-tete{flex:0 0 calc(100% + 2.5rem)}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces-tete{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.45rem;align-items:center;margin:0 -1.25rem 1.1rem;padding:1.1rem 1.25rem 1rem;background:var(--voile);border-bottom:1px solid var(--voile-fonce);font:500 var(--t-ui)/1.38 var(--sans);color:var(--encre)}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces-lieu{grid-column:1 / -1;margin:0}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces-n{margin:0;font:400 clamp(2.7rem,4.8cqw,3.7rem)/1 var(--serif);letter-spacing:-.035em;color:var(--porteur);font-variant-numeric:lining-nums}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces > span:where(:not(.ap-puces-tete)){display:inline-flex;align-items:center;gap:.4rem;margin:0 .35rem .45rem 0;padding:.42rem .8rem;font:500 var(--t-petit)/1.1 var(--sans);color:var(--porteur);background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:999px}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces > span:where(:not(.ap-puces-tete)) + span::before{content:none}
.x-pr-3 .ap-temps > li.maintenant > .ap-preuve .ap-puces > span:where(:not(.ap-puces-tete)){padding-left:.4rem}
.x-pr-3 .ap-temps > li.maintenant > .ap-preuve .ap-puces > span:where(:not(.ap-puces-tete))::before{content:"✓" / "";display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.05rem;height:1.05rem;margin:0;border-radius:50%;background:var(--eclat);font:700 .6rem/1 var(--sans);color:var(--blanc)}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-p-c{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;margin:0;padding:.85rem 1.25rem .9rem;border-top:1px solid var(--voile-fonce)}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-p-c .fl{margin-left:auto}
.x-pr-3 .ap-temps > li > .ap-preuve .ap-p-c:focus-visible{outline:2px solid var(--porteur);outline-offset:-4px;border-radius:0 0 calc(var(--rayon) - 1px) calc(var(--rayon) - 1px)}
/* à moduler · les pastilles en aplat, comme « Ce qu'elles demandent » sur la page Résultats : sans contour, les noms se
   lisent comme un seul ensemble, l'œil compte moins d'objets (passe UX, 6/10, l'attention en fil continu) [hypothèse] */
.x-aplat.x-pr-3 .ap-temps > li > .ap-preuve .ap-puces > span:where(:not(.ap-puces-tete)){background:#EFF3EC;border-color:#EFF3EC}
@container page (max-width: 640px){
  .x-pr-3 .ap-temps > li > .ap-preuve .ap-puces-n{font-size:2.6rem}
}
@container page (max-width: 520px){
  .x-pr-3 .ap-temps > li > .ap-preuve .ap-puces > span:where(:not(.ap-puces-tete)){margin:0 .3rem .4rem 0;padding:.38rem .68rem}
}

/* -- aujourd'hui, ce que je tiens · le bandeau qui s'ouvre (Joy, 6/10 : « 1 et 2 », puis « oui »). Quatre garanties, avec
   les pictos du site (le bouclier de l'infrastructure, la cible du ciblage) ; chacune s'ouvre sur sa réponse, comme la
   FAQ de la page Accompagnement. Le titre est une ligne au porteur, sous un filet. -- */
.x-pres .ap-temps > li > .ap-tiens.ap-tq{margin-top:clamp(1.6rem,3.4cqw,2.3rem);padding-top:clamp(1.3rem,2.6cqw,1.7rem);border-top:1px solid var(--voile-fonce)}
.x-pres .ap-tiens.ap-tq .ap-tiens-tete{margin:0 0 1.15rem;font:600 var(--t-ui)/1.35 var(--sans);letter-spacing:0;color:var(--porteur)}
.ap-bandeau{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem clamp(1rem,2.6cqw,1.8rem);margin:0;padding:0;list-style:none}
.ap-bd-i{grid-row:1 / span 2;width:1.6rem;height:1.6rem;fill:none;stroke:var(--porteur);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ap-bandeau b{font:600 .92rem/1.3 var(--sans);color:var(--encre)}
.ap-bandeau span{font:400 .84rem/1.45 var(--sans);color:var(--gris-voile)}
.ap-bandeau-faq{align-items:start}
.ap-bandeau-faq details{min-width:0}
.ap-bandeau-faq summary{position:relative;display:grid;grid-template-columns:1.6rem minmax(0,1fr);column-gap:.6rem;row-gap:.2rem;min-height:44px;padding:0 1.15rem 0 0;cursor:pointer;list-style:none}
.ap-bandeau-faq summary::-webkit-details-marker{display:none}
/* le signe + se voit et se tait : le lecteur d'écran lit déjà « réduit » ou « développé » (v045) */
.ap-bandeau-faq summary::after{content:"+";content:"+" / "";position:absolute;right:0;top:-.15rem;font:400 1.25rem/1 var(--sans);color:var(--porteur)}
.ap-bandeau-faq details[open] > summary::after{content:"−";content:"−" / ""}
.ap-bandeau-faq summary:focus-visible{outline:2px solid var(--porteur);outline-offset:4px;border-radius:4px}
.ap-bandeau-faq details > p{margin:.55rem 0 0 2.2rem;font:400 .86rem/1.5 var(--sans);color:var(--gris-voile)}
/* les lignes alignées (Joy, 7/10 : « j'aimerais un alignement des lignes ») : la ligne de chaque garantie garde la même
   largeur partout, celle que Joy voit, et chacune tient sur trois lignes ; quatre colonnes tant qu'elles ont cette
   largeur et leur titre sur une ligne (le picto et le signe + serrés d'un cran), deux ensuite ; au téléphone, une
   colonne, la ligne libre */
.ap-bandeau-faq summary > span{max-width:8.3rem}
@container page (max-width: 1020px){ .ap-bandeau{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container page (max-width: 520px){ .ap-bandeau{grid-template-columns:minmax(0,1fr)} .ap-bandeau-faq summary > span{max-width:none} }

/* ---- l'impression : le socle coupe les mouvements, découvre les entrées, cache le rail et le menu ; la page trace ses
   filets, montre RDV chargé et le premier jet relu, et laisse les boutons à l'écran ---- */
@media print{
  [data-page="a-propos"] .ap-temps.attend li::before{transform:none!important}
  [data-page="a-propos"] .ap-carte.attend{opacity:1!important;transform:none!important}
  .ap-rejouer,.ap-pont-btn{display:none!important}
  /* le seuil sur papier : la lettre à gauche, le portrait à droite, sur la première page (en une colonne, la grille,
     trop haute pour le reste de la page, passait tout entière à la page 2) ; le portrait de 190 px garde plus que le 3x */
  .ap-seuil-grille{grid-template-columns:minmax(0,1fr) 190px!important;grid-template-areas:"tete photo" "intro photo" "signe li"!important;grid-template-rows:auto!important;column-gap:2rem}
  .ap-outils{display:none!important}
  .ap-photo{width:auto!important;align-self:start!important;margin:calc(var(--t-surtitre) * 1.3 + var(--r-surtitre) + var(--t-h1) * .21) 0 0!important}
  .ap-li{margin-top:1rem!important}
  .ap-carte,.ij-carte,.ap-reponse{break-inside:avoid;box-shadow:none}
  .ap-jet .ij-reponse{visibility:visible!important}
  .x-pres .ap-attend :is(.ap-texte,.fr-echelle li){opacity:1!important;transform:none!important}
  .x-p-fil :is(#approche,#parcours)::after{transform:none!important}
}

/* « En prospection » prend la forme de « Ce que vous saurez faire » du Dispositif (Joy, 8/10, v058) : le filet d'éclat
   à gauche, l'étiquette en capitales grises, la phrase en porteur. Le même geste d'une page à l'autre, la même lecture :
   ce que le parcours donne, en prospection. */
.x-pres .ap-apport,.ap-apport{margin:1.3rem 0 0;padding:.1rem 0 .1rem .95rem;border-left:2px solid var(--eclat);font:500 1rem/1.55 var(--sans);color:var(--porteur)}
.x-pres .ap-apport::before,.ap-apport::before{display:none}
.x-pres .ap-apport-lab,.ap-apport-lab{display:block;margin:0 0 .3rem;font:600 .64rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}