/* Ateliers de design thinking (ateliers-a.html), page retenue par Lilian le 30/09/2026 parmi quatre propositions fondées
   sur la recherche de marché (maquettes/refonte-2026/recherche-ateliers-outils.md). Le mur de post-it, les colonnes de tri,
   le déroulé à retourner, les formats, les preuves. S'ajoute à onglets.css, boutons-surlignage.css, accueil-fidele.css et
   organisation-fidele.css. Les propositions écartées B, C et D, avec la version complète de cette feuille, sont gardées
   dans tour-2/ecartees/ateliers-bcd/.
   Les post-it sont du papier : ils gardent leur couleur claire et leur encre nuit dans les deux thèmes. */

:root{
  --postit-lilas:var(--lilas);
  --postit-vert:var(--vert-pale);
  --postit-vif:var(--vert-moyen);
  --postit-blanc:var(--blanc);
  --postit-rose:#FFE4DD;            /* la barre d'alerte du site : encre nuit 15,06:1 */
  --postit-ombre:0 1px 0 rgba(32,10,29,.08), 0 10px 18px -12px rgba(32,10,29,.55);
  --postit-ombre-levee:0 1px 0 rgba(32,10,29,.08), 0 18px 26px -12px rgba(32,10,29,.6);
  --mur:var(--fond-2);
  --mur-point:rgba(32,10,29,.10);
}
:root[data-theme="dark"]{--mur:#282022;--mur-point:rgba(244,238,232,.08)}

/* ---------- Le post-it ---------- */
.postit{position:relative;display:grid;gap:var(--e-2);align-content:start;padding:var(--e-4) var(--e-4) var(--e-5);background:var(--fond-postit,var(--postit-lilas));color:var(--nuit);border-radius:3px;box-shadow:var(--postit-ombre);transform:rotate(var(--penche,-1.2deg));transition:transform var(--duree-secondaire) var(--courbe),box-shadow var(--duree-secondaire) var(--courbe)}
.postit::before{content:"";position:absolute;left:50%;top:-9px;width:54px;height:18px;margin-left:-27px;background:rgba(250,248,245,.55);box-shadow:0 1px 2px rgba(32,10,29,.12);transform:rotate(-3deg)} /* le ruban adhésif */
.postit--vert{--fond-postit:var(--postit-vert)}
.postit--vif{--fond-postit:var(--postit-vif)}
.postit--blanc{--fond-postit:var(--postit-blanc)}
.postit--rose{--fond-postit:var(--postit-rose)}
.postit p,.postit li{font-size:var(--t-sm);line-height:1.45}
.postit h3{font-size:var(--t-md);line-height:1.2;letter-spacing:-.015em;color:var(--nuit)}
.postit .fichier{color:rgba(32,10,29,.72)} /* le papier reste clair en thème sombre : ses mentions gardent une encre sombre (7,4:1 sur le blanc) */
.postit-heure{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;color:var(--nuit)}
.postit-barre{text-decoration:line-through;text-decoration-color:var(--rouge-texte);text-decoration-thickness:2px}
@media(hover:hover){.postit:hover{transform:rotate(calc(var(--penche,-1.2deg) * .3)) translateY(-3px);box-shadow:var(--postit-ombre-levee)}}

/* Premier écran : le mur au milieu de la hauteur du texte */
.page-ateliers .hero-grille{align-items:center}

/* ---------- Le mur ---------- */
.mur{position:relative;padding:var(--e-5);border-radius:var(--rayon-fenetre);background-color:var(--mur);background-image:radial-gradient(var(--mur-point) 1.2px,transparent 1.4px);background-size:22px 22px}
.mur-legende{margin-bottom:var(--e-4);font-family:var(--police-fichier);font-size:var(--t-xs);color:var(--encre-douce)}
.scene-surface .mur-legende{color:var(--encre-douce)}
.colonnes{display:grid;gap:var(--e-5)}
.colonne{display:grid;gap:var(--e-4);align-content:start;min-width:0}
.colonne-titre{display:flex;align-items:center;gap:var(--e-2);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre)}
.colonne-titre::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c,var(--vert))}
.colonne-titre span{margin-left:auto;font-weight:400;color:var(--encre-douce)}
.colonne .postit{--penche:-.8deg}
.colonne .postit:nth-child(3n){--penche:1deg}
.colonne .postit:nth-child(3n+2){--penche:-.3deg}
@media(min-width:720px){.colonnes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Le déroulé à retourner ---------- */
.deroule{display:grid;gap:var(--e-6)}
.deroule .postit{padding-bottom:var(--e-4)}
.deroule .postit:nth-child(2n){--penche:.9deg}
.deroule .postit:nth-child(3n){--penche:-.4deg}
.sortie{display:grid;gap:var(--e-1);margin-top:var(--e-2);padding-top:var(--e-3);border-top:1px dashed rgba(32,10,29,.3)}
.sortie b{font-family:var(--police-fichier);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase}
.js .retourner .sortie[hidden]{display:none}
.btn-retourner{justify-self:start;display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;margin-top:var(--e-1);padding:0 var(--e-3);border:2px solid var(--nuit);border-radius:var(--pilule);background:transparent;color:var(--nuit);font:700 var(--t-sm) var(--police);cursor:pointer}
.btn-retourner:hover{background:rgba(32,10,29,.08)}
.btn-retourner:focus-visible{outline:3px solid var(--aubergine);outline-offset:2px}
.btn-retourner[aria-expanded="true"] .fleche{transform:rotate(180deg)}
.btn-retourner .fleche{transition:transform var(--duree-secondaire) var(--courbe)}
html:not(.js) .btn-retourner{display:none}
@media(min-width:900px){.deroule{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--e-4)}}

/* ---------- Les formats ---------- */
.formats{display:grid;gap:var(--e-6);margin-top:var(--e-6)}
.format .fenetre-corps{gap:var(--e-3);height:100%}
.format h3{font-size:var(--t-lg);letter-spacing:-.02em}
.format-infos{display:grid;gap:var(--e-2);margin:var(--e-1) 0}
.format-infos li{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--e-2);font-size:var(--t-sm);line-height:1.45}
.format-infos li b{font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;color:var(--encre-douce);padding-top:2px}
.format-prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-2);margin-top:auto;padding-top:var(--e-3);border-top:1px solid var(--filet)}
.format-prix strong{font-size:var(--t-xl);letter-spacing:-.03em;color:var(--vert);font-variation-settings:'opsz' 96}
:root[data-theme="dark"] .format-prix strong{color:var(--vert-moyen)}
.format-prix span{font-size:var(--t-sm);color:var(--encre-douce)}
/* Le sprint : deux paliers, 3 et 5 jours, chacun avec son prix de départ */
.format-prix--paliers{display:grid;gap:var(--e-3)}
.format-prix--paliers p{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--e-2)}
.format-prix--paliers .format-palier{flex-basis:100%;font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em}
@media(min-width:960px){.formats{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.format{display:flex;flex-direction:column}.format .fenetre-corps{flex:1;display:flex;flex-direction:column}}

/* Ce que comprend le prix : avant, pendant, après */
.comprend{display:grid;gap:var(--e-4);margin-top:var(--e-5)}
.comprend li{display:grid;gap:var(--e-1);padding:var(--e-4);border-radius:var(--rayon-onglet);background:var(--fenetre);box-shadow:inset 0 0 0 1px var(--filet)}
.comprend b{font-family:var(--police-fichier);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--rouge-texte)}
@media(min-width:760px){.comprend{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Les preuves ---------- */
.preuves-ateliers{display:grid;gap:var(--e-6);margin-top:var(--e-6)}
.preuve-atelier .fenetre-corps{gap:var(--e-3)}
.preuve-atelier h3{font-size:var(--t-md)}
.preuve-atelier .chiffres{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.preuve-atelier .chiffres span{padding:4px 10px;border-radius:var(--pilule);background:var(--lilas);color:var(--nuit);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700}
.parcours-cible{display:grid;gap:var(--e-2);grid-template-columns:repeat(2,minmax(0,1fr))}
.parcours-cible li{display:grid;gap:2px;padding:var(--e-2) var(--e-3);border-radius:6px;background:var(--fond-2);font-size:var(--t-xs);line-height:1.35}
.parcours-cible b{font-family:var(--police-fichier);color:var(--rouge-texte)}
@media(min-width:900px){.preuves-ateliers{grid-template-columns:repeat(2,minmax(0,1fr))}.parcours-cible{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(prefers-reduced-motion:reduce){.postit,.btn-retourner .fleche{transition:none}.postit:hover{transform:rotate(var(--penche,-1.2deg))}}