/* ============================================================
   ateliers.css · page « Ateliers & personas »
   Ne porte que ce qui est propre à cette page. Le reste (grille,
   titres, figures, zoom, rail de fin) vient de base.css et
   projet.css. Accent : --pc = --c-workshop.
   ============================================================ */

/* ---- Les trois personas -------------------------------------
   Une carte par profil. Le fond reste blanc comme partout
   ailleurs : la couleur d'identité ne sert que d'accent. */

/* Les trois cartes partagent une grille : chaque bloc (nom, citation,
   intertitre, fiche) occupe la même rangée dans les trois, donc tout
   tombe à la même hauteur quelle que soit la longueur du texte.
   L'écart entre rangées vient des marges des enfants et pas de
   `row-gap`, sinon toutes les respirations internes seraient égales. */
.wk-personas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(8,auto);
  column-gap:clamp(14px,1.6vw,20px);row-gap:0;
  margin-top:clamp(30px,5vw,52px)}

.wk-p{
  grid-row:span 8;
  grid-template-rows:subgrid;
  --pad:clamp(20px,2.2vw,28px);
  background:#fff;
  border:1px solid color-mix(in srgb,var(--pc) 12%,rgba(28,28,38,.05));
  border-radius:20px;
  padding:var(--pad);
  box-shadow:var(--pj-card);
  display:grid;
  min-width:0}

.wk-p-num{
  display:inline-block;
  font-size:11.5px;letter-spacing:.14em;font-weight:600;
  text-transform:uppercase;
  color:var(--pc-ink);
  background:color-mix(in srgb,var(--pc) 12%,transparent);
  border-radius:5px;padding:4px 8px;
  margin-bottom:14px;align-self:flex-start}

.wk-p-name{
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(22px,2.3vw,29px);line-height:1.05;
  letter-spacing:-.01em;color:var(--on-night)}
.wk-p-name em{font-style:italic}

.wk-p-role{
  margin-top:7px;
  font-size:13px;letter-spacing:.02em;
  color:var(--pc-ink);font-weight:600}

.wk-p-ctx{
  margin-top:14px;
  font-size:14.5px;line-height:1.6;
  color:var(--on-night-soft)}

.wk-p-quote{
  margin-top:18px;padding-left:14px;
  border-left:2px solid color-mix(in srgb,var(--pc) 40%,transparent);
  font-family:var(--title-font),serif;font-style:italic;
  font-size:16px;line-height:1.45;
  color:var(--on-night)}

.wk-p-list{margin-top:20px;min-width:0}
.wk-p-list.stop{margin-top:16px}
.wk-p-list .lbl{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--on-night-faint);margin-bottom:8px}
.wk-p-list ul{list-style:none}
/* Deux puces qui disent le sens de la liste : un chevron qui pousse en
   avant, une croix qui barre. Dessinées en CSS pour rester nettes à
   14 px et suivre la couleur du projet. */
.wk-p-list li{
  position:relative;padding-left:19px;
  font-size:14px;line-height:1.55;
  color:var(--on-night-soft)}
.wk-p-list li + li{margin-top:8px}

.wk-p-list li::before{
  content:"";position:absolute;left:1px;top:.42em;
  width:5px;height:5px;
  border-right:1.7px solid var(--pc);
  border-top:1.7px solid var(--pc);
  transform:rotate(45deg)}

.wk-p-list.stop li::before,
.wk-p-list.stop li::after{
  content:"";position:absolute;left:0;top:.66em;
  width:9px;height:1.6px;border-radius:1px;border:0;
  background:color-mix(in srgb,var(--on-night) 30%,transparent);
  transform:rotate(45deg)}
.wk-p-list.stop li::after{transform:rotate(-45deg)}
.wk-p-list b{color:var(--on-night);font-weight:500}

/* La fiche complète derrière un bouton.
   Elle vivait en grande image au pied de chaque carte : trois fiches,
   trois écrans de page pour une planche qu'on regarde une fois. Le
   bouton la remplace, l'image reste dans la page mais masquée. C'est
   elle que zoom.js équipe au chargement, et js/ateliers.js lui passe
   le clic du bouton. display:none la sort du flux ET de l'ordre de
   tabulation : le bouton est le seul chemin vers elle, à la souris
   comme au clavier. */
.wk-p-fiche-src{display:none}
/* Le bouton se cale en bas de sa rangée. Les trois cartes partagent la
   même grille (subgrid), les trois boutons tombent donc à la même
   hauteur quelle que soit la longueur des listes au-dessus. */
.wk-p-voir{align-self:end;margin-top:22px}
.wk-voir{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:13px;
  color:var(--on-night-soft);
  background:none;border:1px solid var(--night-line);
  border-radius:999px;padding:8px 15px;cursor:zoom-in;
  transition:border-color .2s,color .2s}
/* La même loupe que sur les visuels zoomables, en masque pour qu'elle
   prenne la couleur du texte et suive le survol. */
.wk-voir::before{
  content:"";width:15px;height:15px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center/15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center/15px no-repeat}
.wk-voir:hover{border-color:var(--pc);color:var(--on-night)}
.wk-voir:focus-visible{outline:2px solid var(--pc);outline-offset:3px}

/* Sous 900 px les trois cartes empilées font une colonne interminable :
   elles passent en carrousel qui se cale carte par carte. La carte
   suivante dépasse du bord droit, c'est ce qui dit qu'on peut faire
   glisser. ⚠️ `overflow-x` rogne AUSSI en hauteur : la marge basse
   rend la place que prend l'ombre des cartes. */
@media (max-width:900px){
  .wk-personas{
    --marge:clamp(20px,5vw,64px);
    display:flex;grid-template-columns:none;grid-template-rows:none;
    width:100vw;margin-left:calc(50% - 50vw);
    padding-inline:var(--marge);
    padding-bottom:56px;margin-bottom:-34px;
    gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wk-personas::-webkit-scrollbar{display:none}
  .wk-p{
    grid-row:auto;grid-template-rows:none;
    display:flex;flex-direction:column;
    flex:0 0 min(80vw,360px);
    scroll-snap-align:center}
  /* en carrousel, la carte est en flex : la marge auto repousse le
     bouton en bas, comme le faisait la fiche */
  .wk-p-voir{margin-top:auto;padding-top:22px}
}

/* ---- Le titre d'une sous-partie -----------------------------
   Chaque volet en contient plusieurs (les personas, l'atelier…).
   Il se cale sur la colonne de texte, comme .pj-h2. */

.wk-h3{
  max-width:var(--measure);margin-inline:auto;
  margin-top:clamp(64px,9vw,116px);margin-bottom:22px;
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(24px,3.2vw,40px);line-height:1.06;
  letter-spacing:-.018em;color:var(--on-night)}
.wk-h3 em{font-style:italic}
.wk-h3::before{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--pc);margin-bottom:20px}

/* ---- Le tableau des trois conditions ------------------------ */

.wk-cond{
  margin-top:clamp(26px,4vw,42px);
  background:#fff;
  border:1px solid color-mix(in srgb,var(--pc) 12%,rgba(28,28,38,.05));
  border-radius:20px;
  box-shadow:var(--pj-card);
  overflow:hidden}

.wk-cond table{width:100%;border-collapse:collapse}
/* Le résumé du tableau reste pour les lecteurs d'écran seulement :
   .sr de base.css est scopé à la topbar, on redéclare ici. */
.wk-cond caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wk-cond th,.wk-cond td{
  padding:clamp(14px,1.6vw,20px) clamp(12px,1.6vw,22px);
  text-align:left;vertical-align:middle}
.wk-cond thead th{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--on-night-faint);
  border-bottom:1px solid var(--night-line)}
.wk-cond thead th span{
  display:block;margin-top:5px;
  font-size:13.5px;letter-spacing:0;text-transform:none;
  font-weight:500;color:var(--on-night)}
.wk-cond thead th + th,.wk-cond td + td{text-align:center;width:19%}
.wk-cond tbody td:first-child{
  font-size:15px;line-height:1.5;color:var(--on-night-soft);max-width:0}
.wk-cond tbody tr + tr td{border-top:1px solid var(--night-line)}
.wk-cond tfoot td{
  border-top:1px solid var(--night-line);
  background:color-mix(in srgb,var(--pc) 5%,transparent);
  font-size:14.5px;font-weight:500;color:var(--on-night)}

.wk-b{
  display:inline-block;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  padding:5px 11px;border-radius:999px;white-space:nowrap}
/* Ces trois puces disent oui, peut-être et non. Elles ne suivent donc AUCUNE
   couleur de projet : le vert a changé de propriétaire dans base.css et la
   puce « oui » se serait retrouvée en cyan sur un fond vert. Valeurs écrites
   en clair, mesurées sur leur propre fond (4,6 à 4,9:1). */
.wk-b.oui{color:#007445;background:rgba(18,184,134,.13)}
.wk-b.peut{color:#985100;background:rgba(245,159,0,.15)}
.wk-b.non{color:#BC195D;background:rgba(230,73,128,.13)}

.wk-cond-leg{
  margin-top:14px;
  font-size:13px;color:var(--on-night-faint);
  display:flex;flex-wrap:wrap;gap:6px 18px}
.wk-cond-leg span{display:inline-flex;align-items:center;gap:7px}
.wk-cond-leg i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

@media (max-width:720px){
  .wk-cond{border-radius:16px}
  .wk-cond th,.wk-cond td{padding:12px 10px}
  .wk-cond thead th + th,.wk-cond td + td{width:22%}
  .wk-cond tbody td:first-child{font-size:14px}
  .wk-b{font-size:12px;padding:4px 8px}
}

/* ---- Ce qu'il fallait obtenir des deux profils --------------- */

.wk-visee{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(20px,3vw,30px)}
.wk-visee > div{
  border-left:3px solid var(--pc);
  padding:4px 0 4px clamp(16px,2vw,22px)}
.wk-visee h4{
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(18px,1.9vw,23px);line-height:1.15;
  color:var(--on-night)}
.wk-visee p{
  margin-top:10px;font-size:14.5px;line-height:1.6;
  color:var(--on-night-soft)}
@media (max-width:720px){.wk-visee{grid-template-columns:1fr}}

/* ---- Le déroulé du sprint ----------------------------------- */

/* Quatre bandes pleine largeur, c'était une durée dans une colonne de
   96 px puis trois lignes de texte perdues au milieu d'un bloc de
   1 180 px, pour 700 px de page. En deux colonnes le même texte tient
   dans la moitié de la hauteur, sans qu'un mot parte. */
.wk-ag{
  margin-top:clamp(28px,4vw,46px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(22px,2.8vw,40px);
  counter-reset:ag}
.wk-ag-i{
  display:grid;grid-template-columns:74px 1fr;
  gap:clamp(12px,1.6vw,20px);
  padding:clamp(18px,2.1vw,25px) 0;
  border-top:1px solid var(--night-line);
  counter-increment:ag}
/* Le filet de fin fermait le dernier bloc ; en grille, la dernière
   rangée en compte deux. */
.wk-ag-i:nth-last-child(-n+2){border-bottom:1px solid var(--night-line)}
/* En une seule colonne, l'ordre allait de soi. En deux, il faut le
   dire : on numérote les quatre temps. Le chiffre est en serif dans la
   couleur du projet, comme les autres numéros de la page. */
.wk-ag-t::before{
  content:counter(ag);
  display:block;margin-bottom:7px;
  font-family:var(--title-font),serif;font-size:23px;line-height:1;
  color:var(--pc);opacity:.55}
.wk-ag-t{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--pc-ink);padding-top:4px}
.wk-ag-b :is(h3,h4){
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(19px,2vw,25px);line-height:1.15;
  color:var(--on-night)}
.wk-ag-b p{
  margin-top:9px;font-size:15px;line-height:1.66;
  color:var(--on-night-soft)}
.wk-ag-b p strong{color:var(--on-night);font-weight:500}
.wk-ag-src{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.wk-ag-src li{
  font-size:13px;letter-spacing:.02em;
  color:var(--on-night-soft);
  background:color-mix(in srgb,var(--pc) 9%,transparent);
  border-radius:6px;padding:5px 10px}
@media (max-width:860px){
  .wk-ag{grid-template-columns:1fr}
  .wk-ag-i:nth-last-child(-n+2){border-bottom:0}
  .wk-ag-i:last-child{border-bottom:1px solid var(--night-line)}
}
@media (max-width:640px){
  .wk-ag-i{grid-template-columns:1fr;gap:10px}
  .wk-ag-t{padding-top:0}
  .wk-ag-t::before{display:inline-block;margin:0 10px 0 0}
}

/* ---- Les trois planches de l'atelier ------------------------
   Trois formats très différents (une portrait, une paysage, une
   presque carrée). En grille de trois colonnes, les légendes
   tombaient à trois hauteurs. On les aligne donc sur une hauteur
   d'image commune, les largeurs suivent.
   Le figcaption est sorti du calcul de largeur intrinsèque
   (width:0 + min-width:100%), sinon son texte élargirait la
   colonne au-delà de l'image.
   ⚠️ zoom.js enveloppe chaque image dans .zoomable-box, et
   projet.css impose `width:100%;height:auto` à
   `.pj-figure > .zoomable-box > img`. Il faut donc reprendre ce
   sélecteur en entier, sinon la hauteur commune est ignorée. */

.wk-plans{
  --plan-h:clamp(230px,25vw,352px);
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(30px,5vw,56px)}
/* Six planches au lieu de trois : on baisse la hauteur commune pour
   qu'elles tiennent en deux rangées de trois. */
.wk-plans.petit{--plan-h:clamp(200px,21vw,300px)}
/* Trois planches denses : on les sort de la colonne de texte pour
   qu'elles respirent sur toute la largeur de la fenêtre. */
.wk-plans.large{
  /* 27,5vw : au-delà, la somme des trois largeurs + les gouttières +
     la marge intérieure dépasse la fenêtre et la 3e planche passe à la
     ligne. Les trois formats donnent un facteur de 3,08 × la hauteur. */
  --plan-h:clamp(190px,27.5vw,470px);
  width:100vw;margin-left:calc(50% - 50vw);
  padding-inline:clamp(20px,4vw,56px);
  overflow-x:clip}
.wk-plans .pj-figure.nu:has(img){flex:0 0 auto;margin-top:0;max-width:100%;min-width:0}
.wk-plans .pj-figure > .zoomable-box{display:block;width:max-content;max-width:100%}
.wk-plans img,
.wk-plans .pj-figure > .zoomable-box > img{
  display:block;
  height:var(--plan-h);width:auto;max-width:100%}
.wk-plans figcaption{width:0;min-width:100%}

@media (max-width:760px){
  .wk-plans{flex-direction:column;align-items:center}
  .wk-plans img,
  .wk-plans .pj-figure > .zoomable-box > img{height:auto;width:100%;max-width:420px}
  .wk-plans .pj-figure.nu:has(img){width:100%;max-width:420px}
}

/* ---- Les idées retenues ------------------------------------- */

.wk-top{
  margin-top:clamp(26px,4vw,42px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(12px,1.4vw,16px);list-style:none;counter-reset:wt}
.wk-top li{
  counter-increment:wt;
  background:#fff;
  border:1px solid color-mix(in srgb,var(--pc) 12%,rgba(28,28,38,.05));
  border-radius:14px;
  padding:clamp(16px,1.8vw,22px);
  box-shadow:var(--pj-card);
  font-size:14.5px;line-height:1.55;color:var(--on-night-soft)}
.wk-top li::before{
  content:counter(wt);
  display:block;margin-bottom:10px;
  font-family:var(--title-font),serif;font-size:20px;
  color:var(--pc-ink)}
.wk-top b{display:block;color:var(--on-night);font-weight:500;margin-bottom:5px}

/* ---- Les idées clés d'une formation ------------------------- */

/* Le volet 3 n'a plus une seule image : ces quatre enseignements le
   portent à eux seuls. En frise de quatre colonnes étroites, en texte
   gris sur le fond de page, ils ne retenaient l'œil nulle part. Deux
   rangées de deux, le fond teinté des colonnes du design critique, et
   le numéro en gros dans la police de titre : le compteur était déjà
   là sans être affiché nulle part, il sert enfin. */
.wk-idees{
  margin-top:clamp(30px,4.5vw,50px);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.8vw,22px);
  list-style:none;counter-reset:wi}
.wk-idees li{
  position:relative;counter-increment:wi;
  padding:clamp(22px,2.4vw,30px);
  padding-left:clamp(62px,6vw,82px);
  border-radius:16px;
  background:color-mix(in srgb,var(--pc) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 12%,transparent)}
.wk-idees li::before{
  content:counter(wi);
  position:absolute;left:clamp(20px,2.2vw,28px);top:clamp(18px,2vw,25px);
  font-family:var(--title-font),serif;font-size:clamp(27px,3.1vw,36px);
  line-height:1;color:var(--pc);opacity:.5}
.wk-idees b{
  display:block;margin-bottom:10px;
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(18px,1.9vw,22px);line-height:1.18;
  color:var(--on-night)}
.wk-idees li > span{
  font-size:15px;line-height:1.6;color:var(--on-night-soft)}
@media (max-width:720px){
  .wk-idees{grid-template-columns:1fr}
}

/* ---- Le kick-off, ses six blocs ----------------------------- */

.wk-kick{
  margin-top:clamp(26px,4vw,42px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,16px)}
.wk-k{
  background:#fff;
  border:1px solid color-mix(in srgb,var(--pc) 12%,rgba(28,28,38,.05));
  border-radius:14px;
  padding:clamp(16px,1.8vw,22px);
  box-shadow:var(--pj-card)}
.wk-k .k{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--pc-ink);margin-bottom:9px}
.wk-k p{font-size:14.5px;line-height:1.55;color:var(--on-night-soft)}
.wk-k b{color:var(--on-night);font-weight:500}
@media (max-width:860px){.wk-kick{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.wk-kick{grid-template-columns:1fr}}

/* ---- La design critique, ses trois colonnes de retours ------- */

.wk-crit{
  margin-top:clamp(26px,4vw,42px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px)}
.wk-c{
  border-radius:14px;
  padding:clamp(16px,1.8vw,22px);
  background:color-mix(in srgb,var(--pc) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 12%,transparent)}
.wk-c .k{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  /* --pci et pas --pc-ink : la carte a déjà un fond teinté de la couleur du
     projet, et --pc-ink n'est étalonné que sur le crème nu. */
  font-weight:600;color:var(--pci,var(--pc-ink));margin-bottom:9px}
.wk-c p{font-size:14.5px;line-height:1.55;color:var(--on-night-soft)}
@media (max-width:640px){.wk-crit{grid-template-columns:1fr}}

/* ---- L'ouverture · du verbatim au board de l'atelier ---------
   Un post-it plein écran puis le scroll dézoome et révèle le board
   entier. Le zoom est un transform:scale piloté par js/ateliers.js ;
   les dimensions du board (5800×3600 en large, 2600×4600 en portrait
   sous 900px) sont DUPLIQUÉES dans le JS : changer l'un sans l'autre
   décadre la fin de course. */

/* La police manuscrite des post-its, servie depuis ce serveur comme
   les deux autres familles (variable 400-700, latin + latin-ext). */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 340vh faisaient trois écrans et demi de défilement pour passer du
   post-it au board, et on décrochait avant la fin. Le calcul du JS ne
   dépend pas de cette hauteur : il lit la course restante à chaque
   image et termine le dézoom aux 82 % du parcours (75 % sous 900 px).
   Le board arrive donc à la même taille finale, en deux fois moins de
   défilement, et il reste posé le temps des 18 % qui restent. */
.dz{position:relative;height:240vh}
/* 100dvh et pas svh : la scène doit suivre la hauteur RÉELLE quand la
   barre d'adresse mobile se replie, sinon une bande de fond apparaît
   en bas (retour de ML sur téléphone). */
.dz-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.dz-board{position:relative;flex:0 0 auto;width:5800px;height:3600px;
  background-image:radial-gradient(circle,rgba(28,28,38,.13) 7px,transparent 8px);
  background-size:170px 170px;background-position:85px 85px;
  transform-origin:50% 50%}
.dz-pl{position:absolute;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px -30px rgba(28,28,38,.35);border:1px solid rgba(28,28,38,.06)}
.dz-pl img{display:block;width:100%;height:auto}
.dz-sec{position:absolute;font-weight:700;font-size:74px;letter-spacing:.02em;
  color:#fff;background:#6C4FE0;border-radius:18px;padding:22px 46px;
  box-shadow:0 30px 60px -25px rgba(108,79,224,.5)}
.dz-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);
  width:760px;padding:64px 62px 56px;
  background:linear-gradient(180deg,#FFE993,#FFE178);border-radius:6px;
  box-shadow:0 6px 10px rgba(28,28,38,.12),0 80px 140px -50px rgba(28,28,38,.4);
  font-family:"Caveat",cursive;font-weight:500;font-size:64px;line-height:1.14;color:#2a2438}
.dz-note::before{content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%) rotate(-1deg);
  width:210px;height:62px;background:rgba(255,255,255,.55);border:1px solid rgba(28,28,38,.05)}
.dz-note b{display:block;margin-top:26px;font-size:40px;font-weight:600;opacity:.6}
.dz-dot{position:absolute;width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 6px #fff,0 8px 16px rgba(28,28,38,.22)}
.dz-dot.d1{right:36px;top:30px;background:#6C4FE0}
.dz-dot.d2{right:96px;top:44px;background:var(--pc)}
.dz-cap{position:absolute;left:0;right:0;bottom:clamp(26px,6vh,64px);z-index:3;
  text-align:center;padding:0 24px;pointer-events:none}
.dz-cap span{display:inline-block;font-family:var(--title-font),serif;font-size:clamp(19px,2.2vw,27px);
  color:var(--on-night);background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(6px);border-radius:14px;padding:12px 22px}

/* positions des planches · disposition large */
.dzp-bench{left:700px;top:430px;width:1400px}
.dzp-idea{left:2300px;top:260px;width:1200px}
.dzp-crazy{left:3700px;top:400px;width:1500px}
.dzp-emp{left:900px;top:1330px;width:950px}
.dzp-hmw{left:3950px;top:1280px;width:1250px}
.dzp-sprint{left:1750px;top:2330px;width:1900px}
.dzp-crit{left:3850px;top:2300px;width:1050px;transform:rotate(1.2deg)}
.dzp-dim{left:700px;top:2700px;width:800px;transform:rotate(-1.5deg)}
.dzp-ele{left:5000px;top:2380px;width:640px;transform:rotate(2deg)}
.dzs-emp{left:710px;top:290px}
.dzs-def{left:2450px;top:2165px}
.dzs-ide{left:3710px;top:260px}
.dzs-per{left:710px;top:2560px}

/* disposition portrait (mobile & tablette) : board plus haut que
   large, pour que la fin de course remplisse l'écran au lieu d'y
   flotter en bandeau */
@media (max-width:900px){
  /* même hauteur qu'en large : le portrait dézoome sur 75 % de la
     course au lieu de 82, il lui reste donc encore plus de tenue */
  .dz{height:240vh}
  .dz-board{width:2600px;height:4600px}
  .dzp-bench{left:160px;top:280px;width:1100px}
  .dzp-idea{left:160px;top:960px;width:1000px}
  .dzp-crazy{left:1340px;top:420px;width:1100px}
  .dzp-emp{left:160px;top:2000px;width:750px}
  .dzp-hmw{left:1450px;top:1120px;width:1000px}
  .dzp-sprint{left:850px;top:3150px;width:1400px}
  .dzp-crit{left:1750px;top:2050px;width:800px}
  .dzp-dim{left:120px;top:3450px;width:620px}
  .dzp-ele{left:1750px;top:4050px;width:600px}
  .dzs-emp{left:170px;top:150px}
  .dzs-def{left:1460px;top:990px}
  .dzs-ide{left:1350px;top:285px}
  .dzs-per{left:130px;top:3315px}
}

/* le titre de transition sous le dézoom : il fait le lien et ses
   gélules remplacent l'ancien sommaire .pj-toc */
.dz-after{position:relative;z-index:2;max-width:920px;margin:clamp(40px,7vh,84px) auto 0;
  padding:0 24px;text-align:center}
.dz-after h2{max-width:820px;margin-inline:auto;
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(24px,3.4vw,40px);line-height:1.16;letter-spacing:-.01em;color:var(--on-night)}
.dz-after h2 em{font-style:italic;color:var(--pc-ink)}
.dz-volets{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3vw,30px)}
.dz-volets a{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--on-night-soft);
  background:#fff;border:1px solid color-mix(in srgb,var(--pc) 16%,rgba(28,28,38,.05));
  border-radius:999px;padding:10px 18px;box-shadow:0 10px 24px -14px rgba(28,28,38,.18);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.dz-volets a:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--pc) 40%,transparent);
  box-shadow:0 16px 30px -14px rgba(28,28,38,.26)}
.dz-volets b{font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--pc-ink)}


/* ============================================================
   Repli de mouvement : le board va directement à sa position finale
   (js/ateliers.js). Sa hauteur, elle, restait à 240vh : on faisait
   défiler deux écrans et demi de vide pour rien. Elle devient
   automatique, comme le carrousel du MID sur Affiliation.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .dz{height:auto}
  .dz-sticky{position:static}
}


/* ============================================================
   La planche de la formation accessibilité : un board de 32 768 px
   de large, ramené à une bande. Réduite à la colonne de texte elle
   ne dirait plus rien ; en pleine largeur on lit les sept intitulés
   et on comprend le volume. Le zoom du site fait le reste.
   ============================================================ */
/* La règle porte les trois classes : `.pj-figure.nu:has(img)` remet le
   rembourrage à zéro, et la planche se retrouvait collée aux deux bords
   de l'écran. */
.pj-figure.nu.wk-bande{width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box;
  padding:0 clamp(24px,6vw,92px);background:none;border:0;box-shadow:none}
.pj-figure.nu.wk-bande img{display:block;width:100%;max-width:1680px;height:auto;
  margin-inline:auto;border-radius:12px;cursor:zoom-in}
.pj-figure.nu.wk-bande figcaption{max-width:var(--measure);margin:14px auto 0;text-align:center}