/* Joy B2B · Le dispositif (préfixes dp- et fv-) · l'artefact v18 validé le 26/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, les fonds
   (.bloc.ombre, .bloc.voile), les entrées (.reveal.attend / .joue), le rail, le pied, l'impression générale.
   Cette feuille garde ce qui n'appartient qu'à la page : le seuil et son signe, le sommaire, la carte du ciblage,
   le fichier vivant, le message, l'infrastructure, le journal, la fin. Les règles sans préfixe sont scopées à la page. */

/* la mesure d'une colonne de lecture : la règle globale p{max-width:58ch} de la feuille v012, dont la page dépend
   (.dp-fin-corps), à la même force qu'un sélecteur d'élément pour que les classes de la page la dépassent */
:where([data-page="dispositif"] main p){max-width:var(--mesure)}

.dp-micro{font:600 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0;max-width:none}
.dp-lead{font:500 clamp(1.16rem,1.8vw,1.36rem)/1.42 var(--serif);color:var(--encre);margin:1.1rem 0 0;max-width:34em;letter-spacing:-.005em}
.dp-corps{font-size:1.02rem;line-height:1.7;margin:1rem 0 0;max-width:40em;color:var(--encre)}
.dp-petit{font-size:.8rem;line-height:1.6;color:var(--gris);margin:0;max-width:none}
.dp-voile{background:var(--voile)}   /* la fin, hors des blocs du socle, prolonge le voile du pilotage */
[data-page="dispositif"] .dp-bloc h2{margin:0;max-width:none}   /* les distiques gardent leurs deux lignes */
.dp-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,3.4rem);align-items:start}
.dp-panneau{background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);overflow:hidden}
.dp-legende{font-size:.78rem;line-height:1.6;color:var(--gris);margin:.8rem 0 0;max-width:none}
[data-page="dispositif"] .saurez{margin:clamp(1.8rem,3.6vw,2.4rem) 0 0;border-left:2px solid var(--eclat);padding:.1rem 0 .1rem .95rem;max-width:none;font:500 1rem/1.55 var(--sans);color:var(--porteur)}
[data-page="dispositif"] .saurez span{display:block;font:600 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:.3rem}
/* le repère de la sélection : le point d'éclat dit « vous êtes ici » ; il bat une fois quand le choix change */
.dp-selection{display:inline-flex;align-items:center;gap:.45rem;font:600 .78rem/1.3 var(--sans);color:var(--porteur)}
.dp-selection::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat);flex:none}
.dp-selection.pouls::before{animation:dp-pouls .7s var(--douce)}
@keyframes dp-pouls{40%{transform:scale(1.9)}}
@keyframes dp-monte{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- le seuil ---- */
.dp-seuil-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
[data-page="dispositif"] .seuil.dp-seuil h1{margin:0;max-width:none}
.dp-seuil .dp-corps{font-size:clamp(1.02rem,1.4vw,1.12rem);max-width:33em;margin-top:1.4rem}

/* ---- le signe du seuil : la chorégraphie du site v006 (10/09), celle de la planche, retrouvée le 25/09 ----
   Les places, règle du 11/09 tranchée par Joy le 26/09 : Infrastructure en haut à gauche, Ciblage en haut à droite, Base en bas
   à droite, Écriture en bas à gauche. Les quatre cercles paraissent un à un, dans le sens des aiguilles d'une montre depuis le
   haut droit, dans l'ordre de la page (Ciblage, Base, Écriture, Infrastructure), comme sur l'accueil v30. Le trèfle naît,
   fait son tour (trois secondes et demie), et demeure, en porteur du début à la fin. Les noms se posent pendant le tour, au-dessus
   et au-dessous des cercles, hors du passage des feuilles. La légende se lit dès le départ. Tout se joue à l'opacité et à la
   rotation, rien d'autre. Chaque nom mène à sa fiche et s'éclaire avec son entrée du sommaire. */
.dp-signe{margin:0;width:min(100%,360px);justify-self:center}
.dp-art{position:relative;aspect-ratio:5/5.9}
.dp-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dp-c{fill:transparent;stroke:var(--voile-fonce);stroke-width:.04;transition:stroke .3s,fill .3s;cursor:pointer;pointer-events:all}
.dp-c.on{stroke:var(--porteur);fill:rgba(24,73,40,.045)}
.dp-trefle{fill:var(--porteur);transform-origin:0 0;cursor:pointer;transition:fill .25s}
.dp-art svg :focus{outline:none}
.dp-trefle.on{fill:var(--action)}
.dp-lab{position:absolute;transform:translate(-50%,-50%);font:500 .8rem/1.2 var(--sans);color:var(--encre);text-decoration:none;white-space:nowrap;padding:.3rem .4rem;border-radius:.35rem}
.dp-lab:hover,.dp-lab.on{color:var(--porteur);text-decoration:underline;text-decoration-color:var(--eclat);text-decoration-thickness:1.5px;text-underline-offset:4px}
.dp-legende-signe{text-align:center;font-size:.84rem;line-height:1.5;color:var(--gris);margin:.7rem 0 0;max-width:none}
.dp-legende-signe a{color:var(--porteur);font-weight:600;text-decoration:underline;text-decoration-color:var(--voile-fonce);text-underline-offset:4px;transition:text-decoration-color .2s}
.dp-legende-signe a:hover,.dp-legende-signe a.on{text-decoration-color:var(--eclat)}
.dp-anime .dp-signe:not(.joue) .dp-c,.dp-anime .dp-signe:not(.joue) .dp-trefle,.dp-anime .dp-signe:not(.joue) .dp-lab,.dp-anime .dp-signe:not(.joue) .dp-legende-signe{opacity:0}
.dp-signe.joue .dp-c{animation:dp-parait .6s ease var(--d) both}
.dp-signe.joue .dp-trefle{animation:dp-parait .6s ease 1.5s both,dp-tour 3.5s cubic-bezier(.58,.08,.14,1) 1.9s both}
.dp-signe.joue .dp-lab{animation:dp-parait .9s ease var(--d) both}
.dp-signe.joue .dp-legende-signe{animation:dp-parait .9s ease .3s both}
@keyframes dp-parait{from{opacity:0}to{opacity:1}}
@keyframes dp-tour{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* ---- arrivé par la transition, de l'accueil ou de la page égarée (1/10, revu le 1/10 au soir) : fixe et discret sur
   l'accueil, le signe prend vie ici, sur sa page de profondeur (Joy). La page passe, le signe reste ; puis chaque cercle
   s'éclaire à l'appel de son nom, dans l'ordre de la page (Ciblage, Base, Écriture, Infrastructure), et le trèfle, leur
   jonction, fait son tour pendant que la légende le nomme. L'éclairage est celui du survol : en passant, le visiteur
   apprend que chaque cercle répond à son nom. Sans fin figée, pour que le survol garde la main ensuite. ---- */
@media (min-width:861px){ .dp-art svg{view-transition-name:signe} }
.vt-signe .dp-signe .dp-c,.vt-signe .dp-signe .dp-trefle{opacity:1!important}
.vt-signe .dp-signe.joue .dp-c{animation:dp-allume 1.2s ease calc(.8s + var(--d) * 6 / 7) 1}
.vt-signe .dp-signe.joue .dp-trefle{animation:dp-tour 3.5s cubic-bezier(.58,.08,.14,1) 2.1s 1}
.vt-signe .dp-signe.joue .dp-lab{animation:dp-parait .9s ease calc(var(--d) - 1.6s) both}
.vt-signe .dp-signe.joue .dp-legende-signe{animation:dp-parait .9s ease 2.4s both}
@keyframes dp-allume{0%,100%{stroke:var(--voile-fonce);fill:transparent}25%,60%{stroke:var(--porteur);fill:rgba(24,73,40,.045)}}
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
  ::view-transition-group(signe),::view-transition-old(signe),::view-transition-new(signe){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}

/* le sommaire : les cinq, dans l'ordre de la page ; chacun s'éclaire avec son cercle */
.dp-sommaire{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.3rem;margin-top:clamp(2rem,4vw,2.8rem)}
.dp-sommaire a{display:block;padding:.85rem 0 .2rem;border-top:1px solid var(--voile-fonce);text-decoration:none;color:var(--encre);transition:border-color .2s,box-shadow .2s}
/* les noms un peu plus gras, les questions en gras : les retours de Joy du 24/09, perdus dans la passe du 25 */
.dp-sommaire strong{display:flex;align-items:center;gap:.5rem;font:600 1.12rem/1.25 var(--serif)}
.dp-sommaire .ico{width:1rem;height:1rem;color:var(--porteur)}
.dp-sommaire span{display:block;font-size:.8rem;font-weight:600;color:var(--gris);margin-top:.35rem}
.dp-sommaire a:hover,.dp-sommaire a.on{border-top-color:var(--eclat);box-shadow:inset 0 1px 0 var(--eclat)}

/* ---- 01 · le ciblage : la carte de l'exemple ---- */
.dp-carte-tete{background:var(--voile);padding:1.1rem 1.25rem 1rem;border-bottom:1px solid var(--voile-fonce)}
.dp-carte-tete .dp-micro{color:var(--porteur)}
[data-page="dispositif"] .dp-carte-tete h3{margin:.4rem 0 .45rem;color:var(--encre)}
.dp-matrice{display:grid;grid-template-columns:.85fr repeat(3,minmax(0,1fr));gap:.45rem;padding:1.05rem 1.1rem}
.dp-mh{font:600 .72rem var(--sans);text-align:center;color:var(--encre);padding:0 0 .15rem;align-self:end}
.dp-mr{font:400 .78rem/1.4 var(--sans);color:var(--gris);align-self:center}
.dp-cel{font:400 .74rem/1.35 var(--sans);text-align:left;background:var(--papier);border:1px solid var(--voile-fonce);border-radius:.6rem;padding:.65rem .6rem;min-height:4.2rem;color:var(--gris);cursor:pointer;display:flex;flex-direction:column;justify-content:center;transition:background .25s,border-color .25s,color .25s}
.dp-cel b{display:block;font:600 .8rem var(--sans);color:var(--porteur);white-space:nowrap}
.dp-cel small{display:block;font-size:.72rem;margin-top:.15rem}
.dp-cel:hover{border-color:var(--porteur)}
.dp-cel[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:rgba(253,252,249,.8)}
.dp-cel[aria-pressed="true"] b{color:var(--papier)}
.dp-carte-pied{border-top:1px solid var(--voile-fonce);padding:.85rem 1.1rem;display:flex;justify-content:space-between;align-items:flex-end;gap:.4rem 1rem;flex-wrap:wrap}
.dp-carte-pied .dp-statut{display:block;font-size:.76rem;color:var(--gris);margin-top:.15rem}
.dp-suivre{font:500 .78rem var(--sans);color:var(--action);text-decoration:underline;text-decoration-color:var(--eclat);text-underline-offset:4px;opacity:0;transform:translateY(4px);transition:opacity .4s var(--douce),transform .4s var(--douce);pointer-events:none}
.dp-suivre.vu{opacity:1;transform:none;pointer-events:auto}

/* ---- 02 · la base : le fichier vivant de la v9, relié au message ----
   Le mouvement que Joy a retenu le 25/09 : une ligne toutes les 0,8 à 0,9 seconde, un peu irrégulière, comme une main qui vérifie.
   Chaque adresse se vérifie, une ligne sur sept sort, hors cible, et le fichier défile. Il se remplit tant qu'on le regarde et
   se tient immobile le temps de viser une ligne. Ce qui a changé depuis : le fichier suit la case choisie sur la carte, les trois
   premières lignes sont les contacts de l'exemple, et le contact choisi sort du flou et reste épinglé en haut, parce que le
   message plus bas lui est adressé. Pour une piste à explorer, les lignes arrivent « à vérifier » : la base reste à constituer. */
.dp-fichier-barre{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;padding:.8rem 1.1rem;background:var(--ombre);border-bottom:1px solid var(--voile-fonce)}
.fv-tete,.fv-l{display:grid;grid-template-columns:2.4rem minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.25fr) 7.6rem;align-items:center;column-gap:.9rem;padding:0 1.1rem}
.fv-tete{font:600 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding-top:.7rem;padding-bottom:.7rem;border-bottom:1px solid var(--voile-fonce)}
.fv-corps{height:20.4rem;overflow:hidden;position:relative}
.fv-l{width:100%;height:0;opacity:0;overflow:hidden;margin:0;font:400 .84rem/1.3 var(--sans);color:var(--encre);text-align:left;background:transparent;border:0;border-bottom:1px solid var(--voile);border-radius:0;cursor:pointer;transition:height .42s var(--douce),opacity .42s var(--douce),background 1s var(--douce),box-shadow .4s var(--douce)}
.fv-l.in{height:2.55rem;opacity:1}
.fv-l.neuf{background:rgba(30,184,63,.07)}
.fv-l:hover{background:#F3F7EF}
.fv-l.choisie{position:sticky;top:0;z-index:2;background:#EEF4EA;box-shadow:inset 3px 0 0 var(--eclat)}
.fv-corps.epingle .fv-l.choisie{box-shadow:inset 3px 0 0 var(--eclat),0 12px 16px -14px rgba(21,48,29,.5)}
.fv-l:focus-visible{outline:2px solid var(--eclat);outline-offset:-2px}
.fv-l>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-l .c-n{color:var(--gris);font-size:.74rem;font-variant-numeric:tabular-nums}
.fv-l .c-nom{font-weight:600}
.fv-l .flou{font-style:normal;filter:blur(3.4px);user-select:none;transition:filter .6s var(--douce)}
.fv-l.choisie .flou{filter:none;user-select:auto}
.fv-l .c-fn-m{display:none}
.fv-l .c-ent small{color:var(--gris);margin-left:.2rem;font-size:.74rem}
.fv-l .c-fn{color:var(--gris)}
.fv-l .c-adr{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--gris)}
.fv-l .pt{width:.55rem;height:.55rem;border-radius:50%;background:var(--voile-fonce);flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;animation:dp-respire .8s ease-in-out infinite}
@keyframes dp-respire{50%{opacity:.35}}
.fv-l.ok .pt{animation:none;background:var(--eclat);width:.95rem;height:.95rem}
.fv-l.ok .pt::after{content:"✓";color:var(--blanc);font:700 .56rem/1 var(--sans)}
.fv-l.ok .c-adr{color:var(--porteur);font-weight:600}
.fv-l.av .pt{animation:none;background:transparent;border:1.5px solid var(--gris)}
.fv-l.hc{cursor:default}
.fv-l.hc .c-nom,.fv-l.hc .c-ent,.fv-l.hc .c-fn{color:var(--gris);text-decoration:line-through;text-decoration-color:var(--voile-fonce)}
.fv-l.hc .pt{animation:none;background:transparent;border:1.5px solid var(--gris)}
.fv-l.sort{height:0!important;opacity:0}
.fv-onglets{display:flex;gap:0;border-top:1px solid var(--voile);background:var(--ombre);padding:0 .6rem;overflow-x:auto}
.fv-onglets button{font:500 .76rem var(--sans);color:var(--gris);background:transparent;border:0;border-top:2px solid transparent;padding:.55rem .9rem .6rem;min-height:2.4rem;cursor:pointer;white-space:nowrap}
.fv-onglets button:hover{color:var(--porteur)}
.fv-onglets button[aria-pressed="true"]{background:var(--blanc);color:var(--porteur);border-top-color:var(--eclat);font-weight:600}
.fv-onglets button.ouvrir{font-style:italic}
.dp-detail{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;padding:.8rem 1.1rem;background:#F3F7EF;border-top:1px solid var(--voile);font-size:.82rem;color:var(--porteur)}
.dp-lien{font:500 .8rem var(--sans);color:var(--action);text-decoration:underline;text-decoration-color:var(--eclat);text-underline-offset:4px;white-space:nowrap}
.dp-leg:hover,.dp-suivre:hover,.dp-lien:hover{text-decoration-thickness:2px}   /* a:hover de la feuille v012, recopié pour les liens soulignés de la page */

/* ---- 03 · l'écriture : un message par fonction, adressé à la ligne choisie ---- */
.dp-mail{padding:clamp(1.1rem,2.4vw,1.5rem)}
/* la tête de la carte de l'écriture (1/10) : le titre, ce que montre l'exemple, puis le contexte, fixe d'un onglet à l'autre */
.dp-mail-tete{margin:0 0 1rem}
.dp-mail-tete p{margin:0;max-width:none}
.dp-mail-titre{font:600 1rem/1.35 var(--sans);color:var(--encre)}
.dp-mail-sous{margin-top:.3rem!important;font-size:.88rem;line-height:1.5;color:var(--gris)}
.dp-mail-contexte{margin-top:.6rem!important;font:500 .8rem/1.4 var(--sans);letter-spacing:.01em;color:var(--porteur)}
.dp-controles{display:flex;justify-content:space-between;align-items:center;gap:.7rem 1rem;flex-wrap:wrap;margin:0 0 1.15rem}
.dp-roles{display:flex;gap:.45rem;flex-wrap:wrap}
.dp-role{border:1px solid var(--voile-fonce);border-radius:999px;background:var(--blanc);padding:.45rem 1.05rem;min-height:2.5rem;font:600 .8rem var(--sans);color:var(--encre);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.dp-role:hover{border-color:var(--porteur)}
.dp-role[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
.dp-var-btn{font:500 .8rem var(--sans);color:var(--action);background:none;border:0;padding:.5rem 0;margin-top:.45rem;cursor:pointer;text-decoration:underline;text-decoration-color:var(--eclat);text-underline-offset:4px}
.dp-mail-g{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.dp-lettre{border:1px solid var(--voile-fonce);background:var(--papier);border-radius:.75rem;padding:1.1rem 1.25rem;font-size:.92rem;line-height:1.65}
.dp-lettre p{margin:0;max-width:none}
.dp-lettre [data-corps] p+p{margin-top:.8rem}
.dp-objet{display:flex;gap:.8rem;align-items:baseline;padding-bottom:.65rem;border-bottom:1px solid var(--voile);margin-bottom:.85rem!important;font-weight:600;font-size:.86rem}
.dp-objet span:first-child{font:500 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.dp-lettre mark{color:inherit;background-image:linear-gradient(#DDEBD5,#DDEBD5);background-size:0% 100%;background-repeat:no-repeat;background-color:transparent;border-radius:.15rem;padding:0;transition:background-size .55s var(--douce)}
.dp-lettre.variables mark{background-size:100% 100%;box-shadow:inset 0 -1px 0 var(--porteur)}
.dp-lettre.maj [data-corps] p,.dp-lettre.maj [data-objet]{animation:dp-monte .5s var(--douce) both}
.dp-lettre.maj [data-corps] p:nth-child(2){animation-delay:.08s}.dp-lettre.maj [data-corps] p:nth-child(3){animation-delay:.16s}.dp-lettre.maj [data-corps] p:nth-child(4){animation-delay:.24s}
.dp-note>div+div{margin-top:1.05rem}
.dp-note .dp-micro{color:var(--porteur);margin-bottom:.3rem}
.dp-note p:not(.dp-micro){font-size:.88rem;line-height:1.6;margin:0;max-width:none}
.dp-note.maj p:not(.dp-micro){animation:dp-monte .5s var(--douce) both}
.dp-variables{margin-top:.6rem;padding:1rem 1.1rem;background:#F0F4EC;border-radius:.7rem;font-size:.84rem;line-height:1.6}
.dp-variables .dp-micro{color:var(--porteur)}
.dp-var-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem 1.2rem;margin-top:.7rem}
.dp-var-g strong{display:block;font-weight:600;margin-bottom:.2rem}
.dp-var-note{margin:.8rem 0 0;color:var(--gris);max-width:none}

/* ---- 04 · l'infrastructure : les réglages se cochent, douze semaines se construisent, l'anneau se remplit ---- */
.dp-infra{padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1.1rem,2.6vw,1.7rem)}
.dp-infra .dp-micro{color:var(--gris)}
.dp-livraison{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);gap:1.2rem clamp(1.4rem,3.5vw,2.4rem);align-items:stretch}
[data-page="dispositif"] .reglages{list-style:none;margin:.85rem 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
[data-page="dispositif"] .reglages li{display:inline-flex;align-items:center;gap:.4rem;font:600 .76rem var(--sans);color:var(--porteur);background:var(--papier);border:1px solid var(--voile);border-radius:999px;padding:.26rem .7rem .26rem .32rem}
[data-page="dispositif"] .reglages i{width:1.02rem;height:1.02rem;border-radius:50%;border:1.5px solid var(--voile-fonce);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .35s,border-color .35s;transition-delay:calc(.4s + var(--k)*.3s)}
[data-page="dispositif"] .reglages i::after{content:"✓";font:700 .58rem/1 var(--sans);color:var(--blanc);opacity:0;transition:opacity .3s;transition-delay:calc(.5s + var(--k)*.3s)}
.dp-infra.joue .reglages i{background:var(--eclat);border-color:var(--eclat)}
.dp-infra.joue .reglages i::after{opacity:1}
[data-page="dispositif"] .c-rep,[data-page="dispositif"] .c-cols,[data-page="dispositif"] .c-axe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:.3rem}
[data-page="dispositif"] .c-rep{margin-bottom:.5rem;font:600 .72rem/1.25 var(--sans);color:var(--porteur)}
[data-page="dispositif"] .c-rep span{border-top:1.5px solid currentColor;padding-top:.35rem}
[data-page="dispositif"] .c-rep .r1{grid-column:1/5;color:var(--gris);border-top-color:var(--voile-fonce)}
[data-page="dispositif"] .c-rep .r2{grid-column:5/13}
[data-page="dispositif"] .c-cols{height:8.8rem;align-items:end;border-bottom:1px solid var(--voile-fonce);position:relative}
[data-page="dispositif"] .c-cols::before{content:"";position:absolute;top:-.55rem;bottom:0;left:calc(33.333% - .05rem);width:1.5px;background:repeating-linear-gradient(to bottom,var(--porteur) 0 4px,transparent 4px 7px);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--douce) .95s}
.dp-infra.joue .c-cols::before{transform:none}
[data-page="dispositif"] .c-col{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
[data-page="dispositif"] .c-col i{display:block;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--douce)}
[data-page="dispositif"] .c-col .ca{height:calc(var(--ca)*100%);background:var(--porteur);border-radius:.22rem .22rem 0 0;transition-delay:calc(1.3s + var(--i)*.08s)}
[data-page="dispositif"] .c-col .ch{height:calc(var(--ch)*100%);background:var(--voile-fonce);border-radius:.22rem .22rem 0 0;transition-delay:calc(.3s + var(--i)*.06s)}
[data-page="dispositif"] .c-col .ca+.ch{border-radius:0}
.dp-infra.joue .c-col i{transform:none}
@keyframes onde{0%,100%{background-color:var(--voile-fonce)}50%{background-color:#A5C3AB}}
.dp-infra.joue .c-col .ch{animation:onde 1.6s ease-in-out 1;animation-delay:calc(2.4s + var(--i)*.12s)}
[data-page="dispositif"] .c-axe{margin-top:.35rem;font:500 .62rem var(--sans);color:var(--gris);text-align:center}
[data-page="dispositif"] .c-axe-t{margin:.25rem 0 0;font:500 .7rem var(--sans);color:var(--gris);text-align:right;max-width:none}
[data-page="dispositif"] .c-leg{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.9rem 0 0;font-size:.8rem;color:var(--encre);max-width:none}
[data-page="dispositif"] .c-leg span{display:inline-flex;align-items:center;gap:.45rem}
[data-page="dispositif"] .c-leg i{width:.8rem;height:.8rem;border-radius:.2rem;display:inline-block;flex:none}
[data-page="dispositif"] .c-leg .k-ca{background:var(--porteur)}
[data-page="dispositif"] .c-leg .k-ch{background:var(--voile-fonce)}
[data-page="dispositif"] .c-leg .hon{color:var(--gris);font-size:.74rem}
[data-page="dispositif"] .mesure{border-left:1px solid var(--voile);padding-left:clamp(1rem,2.6vw,1.8rem);display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1rem;align-items:center;align-content:center}
[data-page="dispositif"] .mesure svg{width:92px;height:92px;display:block;grid-column:1;grid-row:1;justify-self:center}
[data-page="dispositif"] .mesure .arc{stroke-dasharray:106.8;stroke-dashoffset:106.8;transition:stroke-dashoffset 1.6s var(--douce) .8s}
.dp-infra.joue .mesure .arc{stroke-dashoffset:2.1}
[data-page="dispositif"] .mesure .chiffre{grid-column:1;grid-row:2;justify-self:center;text-align:center}
[data-page="dispositif"] .mesure .chiffre b{display:block;font-family:var(--serif);font-weight:500;font-size:1.8rem;line-height:1;color:var(--porteur)}
[data-page="dispositif"] .mesure .quoi{margin:0;font-size:.84rem;line-height:1.4;color:var(--encre);max-width:none}
[data-page="dispositif"] .mesure .q1{grid-column:2;grid-row:1}
[data-page="dispositif"] .mesure .q2{grid-column:2;grid-row:2}
[data-page="dispositif"] .mesure .src{grid-column:1/-1;grid-row:3;font-size:.76rem;color:var(--gris);margin:.2rem 0 0;max-width:none}

/* ---- 05 · le pilotage : un signal, une page du journal ---- */
.dp-signaux{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}
.dp-signal{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid #BFD0BF;background:transparent;border-radius:.6rem;padding:.75rem .95rem;min-height:2.9rem;font:500 .92rem var(--sans);color:var(--encre);cursor:pointer;text-align:left;transition:background .2s,border-color .2s,color .2s}
.dp-signal svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--douce)}
.dp-signal:hover{border-color:var(--porteur)}
.dp-signal:hover svg{transform:translateX(3px)}
.dp-signal[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
/* le journal, une page de carnet : moins large que la colonne du texte, plus haute que large (retour de Joy du 25/09) */
#pilotage .dp-deux{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(2rem,6vw,4.8rem)}
.dp-journal{background:var(--blanc);border:1px solid #C5D4C2;border-radius:var(--rayon);padding:2.1rem 1.85rem 2.2rem;box-shadow:6px 6px 0 #F7FAF3,7px 7px 0 #D0DDCA}
.dp-journal-tete{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--voile-fonce)}
[data-page="dispositif"] .dp-journal-tete h3{margin:0;color:var(--encre)}
.dp-journal-tete .dp-petit{white-space:nowrap}
.dp-entree{padding:1.6rem 0;border-bottom:1px solid var(--voile)}
.dp-entree:last-child{border-bottom:0;padding-bottom:.2rem}
.dp-entree .dp-micro{color:var(--gris);margin-bottom:.55rem}
.dp-entree p:not(.dp-micro){font-size:.9rem;line-height:1.75;margin:0;max-width:none}
.dp-entree.dp-reponse p:not(.dp-micro){font:500 1.26rem/1.5 var(--serif);color:var(--encre)}
.dp-journal.maj .dp-entree{animation:dp-monte .5s var(--douce) both}
.dp-journal.maj .dp-entree:nth-child(3){animation-delay:.12s}.dp-journal.maj .dp-entree:nth-child(4){animation-delay:.24s}

/* ---- la fin : la conclusion, dans le voile du pilotage, sous un filet, puis la suite (choix de Joy du 26/09, la fin A).
   Après le comment, la preuve : le premier geste mène à Résultats ; le premier échange reste à côté, et dans l'en-tête. ---- */
.dp-fin{padding:0 0 clamp(3rem,6vw,4.4rem)}
.dp-fin-g{border-top:1px solid #BDCFBA;padding-top:clamp(2.4rem,5vw,3.4rem)}
[data-page="dispositif"] .dp-fin h2{margin:0;max-width:none}
.dp-fin-corps{font-size:1rem;line-height:1.65;color:var(--gris);margin:1rem 0 0}
.dp-fin-actions{margin-top:1.7rem}
.dp-fin-actions .btn-plein{border:1.5px solid transparent}   /* même hauteur que le bouton filet, qui porte un filet de 1,5 px */
.dp-fin-actions .btn-filet{justify-content:center}
.dp-fin-mot{font-size:.86rem;line-height:1.55;color:var(--gris-voile);margin:.9rem 0 0;max-width:none}


/* ---- le gris sur le voile : 4,4 de contraste, sous le seuil AA de 4,5. Un gris plus profond, 5,3, comme sur Résultats ---- */
.dp-carte-tete .dp-petit,[data-page="dispositif"] .voile .dp-legende,[data-page="dispositif"] .voile .saurez span,.dp-voile .dp-fin-corps{color:var(--gris-voile)}

/* ---- l'ordinateur étroit, la tablette, le téléphone ---- */
@media (max-width:900px){.dp-sommaire{gap:1rem}.dp-sommaire strong{font-size:1.02rem}}
@media (max-width:860px){
  .dp-seuil-g,.dp-deux,#pilotage .dp-deux,.dp-fin-g{grid-template-columns:minmax(0,1fr)}
  .dp-signe{width:min(100%,290px)}
  .dp-livraison{grid-template-columns:minmax(0,1fr)}
  [data-page="dispositif"] .mesure{border-left:0;padding-left:0;border-top:1px solid var(--voile);padding-top:1.1rem;grid-template-columns:auto 1fr auto 1fr;gap:.8rem 1rem}
  [data-page="dispositif"] .mesure .chiffre{grid-column:3;grid-row:1}[data-page="dispositif"] .mesure .q2{grid-column:4;grid-row:1}[data-page="dispositif"] .mesure .src{grid-row:2}
  .dp-signal svg{transform:rotate(90deg)}.dp-signal:hover svg{transform:rotate(90deg) translateX(3px)}
}
@media (max-width:640px){
  .dp-lab{font-size:.74rem;padding:.95rem .6rem}
  .dp-legende-signe a{display:inline-block;padding-block:.85rem;margin-block:-.85rem}   /* une cible de 44 px, sans rien déplacer (le geste du lien de l'engagement, accueil v30) */
  .dp-lien,.dp-suivre,.dp-var-btn{display:inline-flex;align-items:center;min-height:2.75rem}
  .dp-sommaire{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.4rem}
  .dp-sommaire a:last-child{grid-column:1/-1}
  .dp-matrice{grid-template-columns:.8fr repeat(3,minmax(0,1fr));gap:.32rem;padding:.9rem .75rem}
  .dp-cel{padding:.5rem .4rem;min-height:3.9rem;font-size:.66rem}.dp-cel b{font-size:.68rem;letter-spacing:-.01em}.dp-cel small{font-size:.64rem}
  .dp-mr{font-size:.68rem}.dp-mh{font-size:.64rem}
  .fv-tete,.fv-l{grid-template-columns:1.5rem minmax(0,1.25fr) minmax(0,1fr) 1.1rem;column-gap:.6rem;padding:0 .8rem}
  .fv-tete .c-fn,.fv-l .c-fn,.fv-tete .c-adr span{display:none}
  .fv-l .c-fn-m{display:block;font-style:normal;font-weight:400;font-size:.72rem;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fv-l.in{height:3.15rem}
  .fv-l .c-ent{white-space:normal}
  .fv-l .c-ent small{display:block;margin:0}
  .fv-l .st{display:none}
  .fv-corps{height:18.9rem}
  .fv-onglets button{min-height:2.75rem}
  .dp-mail-g{grid-template-columns:minmax(0,1fr)}
  /* au téléphone, les trois repères viennent après le mail, l'un sous l'autre (1/10) */
  .dp-mail-g{gap:1rem}
  .dp-note{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;padding-top:1.1rem;border-top:1px solid var(--voile)}
  .dp-note>div+div{margin-top:0}
  .dp-var-g{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .dp-role{min-height:2.75rem}
  .dp-lettre{padding:1rem;font-size:.9rem}
  [data-page="dispositif"] .mesure{grid-template-columns:auto 1fr;gap:.9rem 1rem}
  [data-page="dispositif"] .mesure .chiffre{grid-column:1;grid-row:2}[data-page="dispositif"] .mesure .q2{grid-column:2;grid-row:2}[data-page="dispositif"] .mesure .src{grid-row:3}
  [data-page="dispositif"] .c-rep,[data-page="dispositif"] .c-cols,[data-page="dispositif"] .c-axe{column-gap:.2rem}[data-page="dispositif"] .c-rep{font-size:.64rem}[data-page="dispositif"] .c-axe span:nth-child(even){visibility:hidden}[data-page="dispositif"] .c-cols{height:7.4rem}
}
@media (prefers-reduced-motion:reduce){
  .fv-l,.fv-l .flou,[data-page="dispositif"] .c-col i,[data-page="dispositif"] .c-cols::before,[data-page="dispositif"] .reglages i,[data-page="dispositif"] .reglages i::after,[data-page="dispositif"] .mesure .arc,.dp-suivre{transition:none}
  .dp-infra.joue .c-col .ch,.fv-l .pt,.dp-selection.pouls::before{animation:none}
  .dp-lettre.maj [data-corps] p,.dp-lettre.maj [data-objet],.dp-note.maj p,.dp-journal.maj .dp-entree{animation:none}
  .dp-lettre mark{transition:none}
}
/* ---- l'impression, ou l'enregistrement en PDF : la page entière, dans son état final ----
   Sans cela, tout ce que le lecteur n'avait pas encore fait défiler sortait invisible sur le papier. */
@media print{
  .dp-anime .dp-signe .dp-c,.dp-anime .dp-signe .dp-trefle,.dp-anime .dp-signe .dp-lab,.dp-anime .dp-signe .dp-legende-signe{opacity:1!important}
  .dp-infra .reglages i{background:var(--eclat);border-color:var(--eclat)}
  .dp-infra .reglages i::after{opacity:1}
  [data-page="dispositif"] .c-col i,[data-page="dispositif"] .c-cols::before{transform:none!important}
  [data-page="dispositif"] .mesure .arc{stroke-dashoffset:2.1}
  .dp-suivre,.dp-var-btn,.dp-lien{display:none!important}
  .dp-panneau,.dp-journal,[data-page="dispositif"] .saurez,.dp-fin-g,.dp-signaux{break-inside:avoid}
  [data-page="dispositif"] .bloc{break-inside:auto}   /* les fiches sont plus hautes qu'une page : elles se coupent entre leurs objets, comme la page validée */
}