/* La Forge — kit UI
   Transposition à l'échelle réelle des brouillons Claude Design
   (design/La Forge - Brouillons élève.dc.html) sur les tokens du design system
   Prenez Place. Aucune ombre, aucun dégradé décoratif, angles quasi carrés.
   Toutes les couleurs viennent des tokens de la charte (charte/tokens) ; les
   seules valeurs écrites en dur sont des TEINTES d'état dérivées des quatre
   couleurs de marque — Argile (alerte), Citron (attention), Mousse (acquis),
   Violet (départ / éloigné) — et le blanc. Vérifié le 5 sept. 2026. */
@import url('charte/tokens/fonts.css');
@import url('charte/tokens/colors.css');
@import url('charte/tokens/typography.css');
@import url('charte/tokens/spacing.css');
@import url('charte/tokens/app.css');

:root{
  --hairline:rgba(157,156,154,.28);
  --hairline-strong:rgba(157,156,154,.45);
  --encre-attention:#7A6520;      /* texte sur teinte citron */
  --teinte-attention:#FDF6E3;
  --encre-alerte:#A65A42;
  --teinte-alerte:#F7E4DE;
  --texte-doux:#5c5c5c;           /* corps secondaire des brouillons */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pp-w2);color:var(--pp-b1);
  font:400 13.5px/1.5 var(--font-sans);letter-spacing:var(--tracking-sans);
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;border:0;background:none;padding:0;color:inherit;cursor:pointer;text-align:left}
input,textarea,select{font:inherit;letter-spacing:inherit;color:var(--pp-b1)}
img{max-width:100%}
::selection{background:var(--teinte-attention)}

/* ── Typographie ──────────────────────────────────────────────── */
.t-marque{font:400 19px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.t-hero{font:400 34px/1.14 var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.t-hero .g,.t-hero.g{color:var(--pp-w4)}
.t-page{font:400 20px var(--font-display);letter-spacing:var(--tracking-display)}
.t-carte{font:400 16px var(--font-display);letter-spacing:var(--tracking-display)}
.t-item{font:400 15px var(--font-display);letter-spacing:var(--tracking-display)}
.t-kicker{font:400 13px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-w4)}
.lbl{font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pp-grey-warm)}
.lbl.att{color:var(--encre-attention)}
.p{font:400 13px/1.5 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--texte-doux)}
.meta{font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm)}
.meta.sombre{color:var(--texte-doux)}
.petit{font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm)}
.mousse{color:var(--pp-mousse)}
.att-ink{color:var(--encre-attention)}
.sous-titre{font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-w4);margin-top:4px}

/* ── Boutons & liens ─────────────────────────────────────────── */
.btn{display:inline-block;background:var(--pp-mousse);color:#fff;
  font:400 15px var(--font-display);letter-spacing:var(--tracking-display);
  padding:9px 18px;border-radius:2px;text-align:center;cursor:pointer;line-height:1.5;
  transition:background-color .15s,color .15s}
.btn:hover{background:var(--mousse-survol)}
.btn.large{display:block;width:100%}
.btn.min{font-size:14px;padding:8px 16px}
/* Le bouton en contour du Studio : filet encre, s'inverse au survol. */
.btn.blanc{background:transparent;color:var(--pp-b1);box-shadow:inset 0 0 0 1px var(--pp-b1)}
.btn.blanc:hover{background:var(--pp-b1);color:#fff}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.lnk{font:400 13px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-b1);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .15s}
.lnk:hover{color:var(--pp-mousse)}
.lnk.discret{color:var(--pp-grey-warm)}

/* ── Surfaces ─────────────────────────────────────────────────── */
.carte{background:#fff;border-radius:2px}
/* Décision client (31/08) : PAS de liseré de couleur sur les cartes. Les
   classes .bord / .c-* sont conservées — elles portent encore la variable
   --bord, utile aux pastilles — mais elles ne dessinent plus rien. La couleur
   de marque reste portée par les pastilles de thème, l'histogramme R1/R2/R3,
   les encarts et les étiquettes. */
.carte.bord{box-shadow:none}
.c-argile{--bord:var(--pp-argile)}
.c-mousse{--bord:var(--pp-mousse)}
.c-citron{--bord:var(--pp-citron)}
.c-violet{--bord:var(--pp-violet)}
.c-gris{--bord:var(--pp-grey-stroke)}
/* Les mêmes teintes en aplat très clair, pour les en-têtes de carte. */
.wash-argile{background:#FBEFEB}
.wash-mousse{background:#EEF0E6}
.wash-citron{background:var(--teinte-attention)}
.wash-violet{background:#F1EEEF}
.wash-gris{background:var(--pp-w3)}
.carte.pad{padding:18px 20px}
.creux{background:var(--pp-w3)}
/* Le pendant apaisé de l'encart d'attention : ce qui est fait, ce qui est ouvert. */
.encart-mousse{background:#EEF0E6;padding:14px 15px;border-radius:2px}

.encart-att{background:linear-gradient(90deg,var(--teinte-attention),rgba(253,246,227,0));padding:14px 15px}
.encart-neutre{background:linear-gradient(90deg,var(--pp-w3),rgba(242,238,234,0));padding:12px 13px}
.encart-alerte{background:linear-gradient(90deg,var(--teinte-alerte),rgba(247,228,222,0));padding:14px 15px}
.filet{border-bottom:1px solid var(--hairline)}
.filet-h{border-top:1px solid var(--hairline)}

/* ── Pastilles & puces ───────────────────────────────────────── */
.dot{width:7px;height:7px;border-radius:999px;flex:none}
.dot.g9{width:9px;height:9px}
.puce-theme{width:8px;height:8px;flex:none}   /* carrée, couleur du thème */
.pill{font:400 10px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-attention);background:var(--teinte-attention);padding:4px 7px;border-radius:999px;white-space:nowrap}
.pill.gris{color:var(--pp-grey-warm);background:var(--pp-w3)}
.pill.alerte{color:var(--encre-alerte);background:var(--teinte-alerte)}
/* Modalité d'une séance — la question que le candidat se pose en premier :
   est-ce que je me déplace, ou est-ce que je me connecte ? Elle était noyée
   dans la ligne grise des informations ; elle devient une pastille pleine,
   posée devant l'intitulé. */
.tag-mod{display:inline-block;font:500 10px/1 var(--font-sans);letter-spacing:.11em;text-transform:uppercase;
  padding:4px 7px;border-radius:2px;white-space:nowrap;vertical-align:2px;margin-right:7px}
.tag-visio{background:var(--pp-mousse);color:#fff}
.tag-presentiel{background:var(--pp-citron);color:#4a3c10}
.tag-mixte{background:var(--pp-violet);color:#fff}
/* Version compacte pour les colonnes du planning, où une pastille pleine sur
   chaque ligne serait illisible : un carré de couleur, expliqué par la
   légende en tête de page. */
.puce-mod{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:1px;flex:none}
.puce-visio{background:var(--pp-mousse)}
.puce-presentiel{background:var(--pp-citron)}
.puce-mixte{background:var(--pp-violet)}
.legende-mod{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px}
.legende-mod span{display:flex;align-items:center;font:400 11.5px var(--font-sans);color:var(--pp-w4)}

/* ── Jauges ───────────────────────────────────────────────────── */
.jauge{height:3px;background:var(--pp-w3);position:relative}
.jauge>i{display:block;height:3px;background:var(--pp-mousse);transition:width .5s ease}
.jauge>i.avant{background:var(--pp-grey-stroke)}
.jauge>b{position:absolute;top:0;width:2px;height:3px;background:var(--pp-argile)}
.jauge.blanche{background:rgba(255,255,255,.2)}
.jauge.blanche>i{background:#fff}

/* ── Puces de filtre (R1/R2/R3, filtres) — la « Chip » du Studio ──
   Angles à 1 px, dormante en blanc cerné d'un filet gris, active en encre
   pleine. */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:8px 16px;background:#fff;font:400 12.5px var(--font-sans);letter-spacing:var(--tracking-sans);
  color:var(--pp-b1);cursor:pointer;border-radius:1px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--pp-w4);
  transition:background-color .15s}
.tab:hover{background:var(--pp-w3)}
.tab.on{background:var(--pp-b1);color:#fff;box-shadow:none}
.tab.off{color:var(--pp-grey-warm);cursor:default}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:400 12.5px var(--font-sans);letter-spacing:var(--tracking-sans);padding:8px 16px;
  background:#fff;cursor:pointer;border-radius:1px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--pp-w4);
  transition:background-color .15s}
.chip:hover{background:var(--pp-w3)}
.chip.on{background:var(--pp-b1);color:#fff;box-shadow:none}

/* ── Champs ───────────────────────────────────────────────────── */
.champ{width:100%;height:36px;background:var(--pp-w3);border:0;border-radius:2px;
  padding:0 14px;font:400 13.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-b1)}
.champ::placeholder{color:var(--pp-grey-warm)}
.champ:focus{outline:0;box-shadow:inset 0 0 0 1px var(--pp-mousse)}
textarea.champ{height:auto;min-height:64px;padding:10px 12px;resize:vertical;line-height:1.5}
select.champ{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%23909090' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
  font:400 12px var(--font-sans);color:var(--pp-grey-warm);text-align:center;cursor:pointer}
.ck{width:18px;height:18px;flex:none;border-radius:2px;background:var(--pp-w3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.ck.on{background:var(--pp-mousse)}
.ck.on::after{content:"";width:9px;height:5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) translate(0,-1px)}

/* ── Le picto de La Forge ─────────────────────────────────────── */
/* Dessin ET geste viennent du design system (guideline « Pictogrammes des
   outils ») : les sept outils de la famille partagent la même mécanique —
   480 ms, courbe .4 0 .2 1, aucun rebond — et chacun a son mouvement propre.
   Celui de La Forge : « le marteau se lève, l'étincelle part ».
   Le picto est INLINE et non en image de fond : un background ne peut pas
   animer ses formes séparément. */
.pic-forge{display:block;flex:none;
  /* Le marteau levé sort du viewBox de 0,85 unité par la gauche (mesuré) :
     sans ceci, son coin arrondi serait rogné net pendant tout le geste.
     Le débordement est peint, il ne déplace rien. */
  overflow:visible;
  --pic-a:var(--pp-argile);
  /* L'argile à 45 % sur blanc, la valeur du design system. En dur parce que
     color-mix() n'a pas de repli sûr : sans support, le fill tomberait au
     noir. Vérifié : 225·.45 + 255·.55 = 242, 129→198, 104→187. */
  --pic-b:#F2C6BB}
.pic-forge .hm,.pic-forge .sp{transition:transform 480ms cubic-bezier(.4,0,.2,1);transform-box:view-box}
.pic-forge .hm{transform-origin:19px 42px}          /* le bas du manche */
@media (hover:hover){
  .t-marque:hover .pic-forge .hm,.marque-co:hover .pic-forge .hm{transform:rotate(-14deg)}
  .t-marque:hover .pic-forge .sp,.marque-co:hover .pic-forge .sp{transform:translate(3px,-3px)}
}
@media (prefers-reduced-motion:reduce){
  .pic-forge .hm,.pic-forge .sp{transition:none}
}
/* ── Le logotype Prenez Place ─────────────────────────────────
   La marque a été annoncée le 15 sept. 2026 : elle signe désormais l'outil.
   Le logotype est manuscrit et LARGE (ratio 2,62 : 1) — on le dimensionne donc
   par la HAUTEUR, jamais par la largeur, sinon il écrase la barre. Il est servi
   en image (et non inline) : c'est un tracé de 25 Ko, il n'a rien à animer. */
.logo-pp{display:block;flex:none;height:22px;width:auto}
/* Sur l'écran d'accueil, le logotype SIGNE le bloc de marque : il vient sous
   le nom et la promesse, séparé par un filet — La Forge garde son pictogramme
   et son nom en tête (retour client du 15 sept. 2026). */
.marque-co .logo-pp{height:30px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline);
  box-sizing:content-box;opacity:.9}
@media (max-width:600px){ .logo-pp{height:18px} }

/* Écran de connexion : le bloc de marque reçoit son panneau, comme la boîte
   de saisie en dessous. Angles vifs, aucune ombre — règle de la marque. */
.marque-co{width:100%;max-width:400px;background:#fff;border-radius:2px;padding:26px 26px 22px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.marque-co .pic-forge{width:52px;height:52px}
.marque-co .nom{font:400 34px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}

/* ── La coquille — calquée sur « Le Studio » (28 sept. 2026) ─────────
   Mêmes cotes, mêmes couleurs, mêmes mécaniques que la coque du Studio
   (studio-shell.tsx / studio-ui.tsx) : barre haute de 62 px, colonne des
   espaces à 250 / 56 px (rail par défaut), seul le contenu défile, menu du
   compte sous l'avatar, tiroir mobile depuis la gauche, palette ⌘K.
   La coquille est VERROUILLÉE à la fenêtre : barre et colonne restent en
   place, c'est `#vue` qui porte l'ascenseur. */
:root{
  --app-rail-w:56px;--app-tabs-h:48px;
  --app-hairline-mid:rgba(157,156,154,.45);--app-ink-soft:#3F3D3A;--app-badge-alerte:#C4453A;
  --app-volet-duree:240ms;--app-volet-duree-libelle:180ms;--app-volet-ease:cubic-bezier(.22,.61,.36,1);
  --mousse-survol:#544A28;
}
:focus-visible{outline:2px solid rgba(103,91,49,.5);outline-offset:1px}
.coq{height:calc(100vh - var(--obs-h,0px));height:calc(100dvh - var(--obs-h,0px));
  display:flex;flex-direction:column;overflow:hidden;background:var(--app-surface)}
body.focus .coq{height:auto;overflow:visible}

/* La barre haute : la marque d'abord (le paraphe mène au portail), l'outil
   ensuite (le picto et le nom mènent à l'accueil). 18 px à gauche = le
   padding de la colonne (8) + celui de ses rangées (10) : le paraphe tombe
   sur la verticale des pictogrammes. 22 px à droite. */
.haut{flex:none;display:flex;align-items:center;gap:14px;height:var(--app-topbar-h);
  padding:0 22px 0 18px;background:var(--app-panel);border-bottom:1px solid var(--hairline);
  position:relative;z-index:40}
.haut-g{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.marque-pp{display:flex;align-items:center;transition:opacity .15s}
.marque-pp:hover{opacity:.7}
.marque-pp img{display:block;height:20px;width:auto}
.haut-sep{width:1px;height:22px;background:var(--app-hairline-mid);margin:0 4px;flex:none}
.haut .t-marque{display:inline-flex;align-items:center;gap:10px;font-size:19px;line-height:1;
  white-space:nowrap;text-decoration:none;transition:opacity .15s}
.haut .t-marque:hover{opacity:.7}
.haut .t-marque .pic-forge{width:26px;height:26px}
.haut-d{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none;min-width:0}
.haut .ctx{display:none}
.haut .sel-promo{width:auto;height:34px;font-size:13.5px;padding-left:14px;max-width:220px;border-radius:2px}
.pill-jour{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;white-space:nowrap;
  font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--app-ink-soft);background:var(--pp-w3)}
.pill-jour:empty{display:none}
.pill-sim{font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--encre-attention);white-space:nowrap}
/* L'identité vit dans le menu du compte, pas dans la barre. */
.ident{display:block;font:400 12.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-w4)}
.ident b{display:block;font:400 16px/1.25 var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ident .sep{display:none}
.ident .g{display:inline-block;margin-top:8px;font:500 10px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:#8a8478;background:var(--pp-w3);padding:2px 7px;border-radius:2px}

/* Le burger (sous 1024) et l'avatar : 30 px, citron, initiale en SN Leif. */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:2px;
  border:1px solid rgba(169,164,157,.6);background:#fff;color:var(--pp-b1);cursor:pointer;flex:none}
.burger:hover{background:var(--pp-w3)}
.compte{position:relative;flex:none}
.avatar{width:30px;height:30px;border-radius:999px;background:var(--pp-citron);color:var(--pp-b1);
  display:flex;align-items:center;justify-content:center;font:400 14px/1 var(--font-display);
  letter-spacing:var(--tracking-display);flex:none;cursor:pointer;transition:opacity .15s;padding:0}
.avatar:hover{opacity:.85}
.menu-compte{position:absolute;right:0;top:calc(100% + 2px);z-index:50;width:236px;
  background:var(--app-panel);border:1px solid var(--hairline)}
.menu-compte[hidden]{display:none}
.menu-tete{padding:12px 14px;border-bottom:1px solid var(--hairline)}
.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;text-align:left;
  font:400 16px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1);
  cursor:pointer;transition:background-color .15s}
.menu-item:hover{background:var(--pp-w3)}
.menu-item svg{flex:none}

/* Le corps : la colonne + le contenu qui défile. */
.corps{display:flex;flex:1;min-height:0;align-items:stretch}
.rail{display:none}
.contenu{flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;
  background:var(--app-surface);padding:24px 16px 60px}
body.focus .contenu{overflow:visible;padding:0}
.page{padding:0 0 26px}
.bloc{margin:0}
.pad-x{padding-left:0;padding-right:0}

/* La colonne des espaces — rangées de 40 px, gouttière 12, pictos de 20.
   Rail (56) par défaut ; ouverte (250) sur `.volet-ouvert`. Le libellé n'est
   jamais démonté : en rail il s'efface et glisse de 6 px, la colonne le
   rogne. Rien ne s'anime avant le premier geste (`.volet-anime`). */
@media (min-width:1024px){
  .rail{display:flex;flex-direction:column;gap:2px;flex:none;overflow:hidden;
    width:var(--app-rail-w);padding:16px 8px;background:var(--app-panel);border-right:1px solid var(--hairline)}
  .volet-ouvert .rail{width:var(--app-sidebar-w)}
  .volet-anime .rail{transition:width var(--app-volet-duree) var(--app-volet-ease)}
  .rail a,.rail .replier{display:flex;align-items:center;gap:12px;height:40px;flex:none;padding:0 10px;
    border-radius:2px;white-space:nowrap;color:var(--pp-b1);cursor:pointer;transition:background-color .15s}
  .rail a:hover,.rail .replier:hover{background:var(--app-surface)}
  .rail a.on{background:var(--pp-mousse);color:var(--pp-w1)}
  .rail .ico{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center}
  .rail .lib{font:400 17px var(--font-display);letter-spacing:var(--tracking-display);
    overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-6px)}
  .volet-ouvert .rail .lib{opacity:1;transform:none}
  .volet-anime .rail .lib{transition:opacity var(--app-volet-duree-libelle) ease,transform var(--app-volet-duree) var(--app-volet-ease)}
  .rail .ressort{flex:1;min-height:40px}
  .rail .replier{color:var(--pp-w4)}
  .rail .replier .lib{font-size:16px}
  .rail .chev{transform:rotate(180deg)}
  .volet-ouvert .rail .chev{transform:none}
  .volet-anime .rail .chev{transition:transform var(--app-volet-duree) var(--app-volet-ease)}
  .haut .ctx{display:inline-flex}
  .contenu{padding:34px 24px 60px}
}
@media (min-width:1280px){ .contenu{padding-left:var(--app-gutter);padding-right:var(--app-gutter)} }
/* L'espace candidat reste cadré sur un grand moniteur (retour client) : la
   marge se calcule DANS l'ascenseur, la colonne de lecture est centrée. */
@media (min-width:1400px){ .coq:not(.coq-adm) .contenu{padding-left:max(40px,calc((100% - 1240px)/2));padding-right:max(40px,calc((100% - 1240px)/2))} }
@media (min-width:1700px){ .coq:not(.coq-adm) .contenu{padding-left:max(40px,calc((100% - 1440px)/2));padding-right:max(40px,calc((100% - 1440px)/2))} }
@media (min-width:2000px){ .coq:not(.coq-adm) .contenu{padding-left:max(40px,calc((100% - 1560px)/2));padding-right:max(40px,calc((100% - 1560px)/2))} }
@media (max-width:1023px){
  .haut{padding:0 16px}
  .burger{display:flex}
  .haut .sel-promo{max-width:150px}
}
/* Téléphone étroit : la barre ne garde que l'essentiel — la pastille
   d'enregistrement se réduit à son point, le jour disparaît (il est dans la
   page), les sélecteurs se resserrent. Le burger et l'avatar ne sortent
   jamais de l'écran. */
@media (max-width:600px){
  .haut{gap:8px;padding:0 12px}
  .haut-g{gap:8px}
  .haut-sep{margin:0 2px}
  .haut-d{gap:8px}
  .haut .enr{font-size:0;gap:0;padding:0;width:28px;height:28px;justify-content:center;background:transparent}
  .haut .pill-jour{display:none}
  .haut .sel-promo{max-width:110px;padding-left:10px;font-size:12.5px}
  .burger{width:40px;height:40px}
  .t-hero{font-size:28px}
}
@media (max-width:360px){ .haut .t-marque span{display:none} }

/* Le tiroir mobile — depuis la gauche, 420 px, 200 ms, voile noir à 30 %. */
.tiroir-voile{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.3);opacity:0;transition:opacity .2s}
.tiroir-voile.on{opacity:1}
.tiroir{position:absolute;top:0;bottom:0;left:0;width:100%;max-width:420px;background:var(--app-panel);
  display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);transition:transform .2s ease}
.tiroir-voile.on .tiroir{transform:none}
.tiroir-tete{display:flex;align-items:center;gap:10px;padding:20px;border-bottom:1px solid var(--hairline)}
.tiroir-tete .pp-picto{width:26px;height:26px}
.tiroir-tete .t{flex:1;font:400 24px var(--font-display);letter-spacing:var(--tracking-display)}
.tiroir-fermer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--pp-grey-stroke);border-radius:2px;
  padding:6px 12px;font:400 12px var(--font-sans);cursor:pointer;background:#fff}
.tiroir-id{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hairline)}
.tiroir-id .ini{width:40px;height:40px;border-radius:2px;background:var(--pp-w3);flex:none;
  display:flex;align-items:center;justify-content:center;font:400 14px var(--font-display)}
.tiroir-id .qui{min-width:0}
.tiroir-id .qui b{display:block;font:500 14px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiroir-id .app-label,.app-label{font:500 10px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pp-grey-warm)}
.tiroir-id .app-label{display:inline-block;margin-top:4px;border:1px solid var(--hairline-strong);padding:1px 6px;border-radius:2px}
.tiroir-nav{padding:12px}
.tiroir-nav .lbl{display:block;padding:0 8px 6px}
.tiroir-nav a{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:2px}
.tiroir-nav a:hover{background:var(--app-surface)}
.tiroir-nav a .ico{width:36px;height:36px;flex:none;border-radius:2px;background:var(--pp-w3);display:flex;align-items:center;justify-content:center}
.tiroir-nav a.on .ico{background:var(--pp-mousse);color:#fff}
.tiroir-nav a .lib{font:400 16px var(--font-display);letter-spacing:var(--tracking-display)}
.tiroir-pied{margin-top:auto;padding:12px;border-top:1px solid var(--hairline)}
.tiroir-pied button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 8px;border-radius:2px;
  font:400 14px var(--font-sans);color:#B85042;cursor:pointer}
.tiroir-pied button:hover{background:rgba(184,80,66,.1)}

/* ⌘K — la palette des destinations. */
.palette-voile{position:fixed;inset:0;z-index:2147483000;background:rgba(17,17,17,.25);
  display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.palette{width:min(620px,92vw);max-height:70vh;background:#fff;border:1px solid #D3CDC2;display:flex;flex-direction:column}
.palette-champ{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-bottom:1px solid var(--hairline);color:var(--pp-w4)}
.palette-champ input{flex:1;border:0;outline:0;background:none;font:400 14px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-b1);min-width:0}
.palette-champ kbd{font:400 11px var(--font-sans);color:var(--pp-w4);border:1px solid var(--hairline-strong);padding:1px 6px;border-radius:2px}
.palette-liste{overflow-y:auto}
.palette-item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hairline);
  font:400 14px var(--font-sans);letter-spacing:var(--tracking-sans);cursor:pointer;color:var(--pp-b1)}
.palette-item:last-child{border-bottom:0}
.palette-item.on{background:var(--pp-w3)}
.palette-item .lib{flex:1}
.palette-item .m{font-size:12.5px;color:var(--pp-w4)}
.palette-item svg{color:var(--pp-w4);flex:none}
.palette-vide{padding:24px 16px;font:400 14px var(--font-sans);color:var(--pp-w4)}

/* ── Coquille manager / admin : toute la largeur ─────────────── */
.coq-adm .rail{display:none}
@media (min-width:1024px){ .coq-adm .rail{display:flex} }

/* ── Listes de séances ────────────────────────────────────────── */
.seance{display:flex;gap:14px;padding:15px 0}
.seance+.seance{border-top:1px solid var(--hairline)}
.seance .h{width:52px;flex:none;font:400 12.5px/1.35 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-b1)}
.seance.passee{opacity:.5}
.seance.passee .h{color:var(--texte-doux)}
.seance .t{font:400 16px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.seance .m{font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);margin-top:4px}
.seance .m.on{color:var(--texte-doux)}

/* ── Lignes génériques (biblio, supports, grilles…) ───────────── */
.ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}
.ligne+.ligne{border-top:1px solid var(--hairline)}
.ligne .t{font:400 15px var(--font-display);letter-spacing:var(--tracking-display)}
.ligne .m{font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);margin-top:3px}
.vignette{width:46px;height:32px;background:var(--pp-w3);flex:none;border-radius:1px;overflow:hidden;position:relative}
.vignette .ppSlide{transform-origin:top left;position:absolute;top:0;left:0}

/* ── Quiz ─────────────────────────────────────────────────────── */
.q-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;
  padding:14px 15px;font:400 14px var(--font-sans);letter-spacing:var(--tracking-sans);
  color:var(--pp-b1);cursor:pointer;border-left:3px solid transparent;border-radius:2px;width:100%}
.q-opt:hover{background:var(--pp-w3)}
.q-opt.gele{pointer-events:none}
.q-opt.dim{color:var(--pp-grey-warm);opacity:.65}
/* La correction doit se lire d'un coup d'œil, sans lire le texte :
   aplat coloré + filet épais + pastille ✓ / ✗ à gauche du libellé. */
.q-opt .marque{width:22px;height:22px;border-radius:999px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;background:var(--pp-w3);color:transparent;
  font:600 12px var(--font-sans);line-height:1}
.q-opt .lib{display:flex;align-items:center;gap:11px;min-width:0}
.q-opt.bonne{border-left-color:var(--pp-mousse);background:#EEF0E6}
.q-opt.bonne .marque{background:var(--pp-mousse);color:#fff}
.q-opt.fausse{border-left-color:var(--pp-argile);background:var(--teinte-alerte)}
.q-opt.fausse .marque{background:var(--pp-argile);color:#fff}
.q-opt.bonne .lib,.q-opt.fausse .lib{font-weight:500}
.q-opt .tag{font:600 10px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;padding:4px 8px;border-radius:999px}
.q-opt .tag.ok{color:#fff;background:var(--pp-mousse)}
.q-opt .tag.ko{color:#fff;background:var(--pp-argile)}
.q-opt .tag.att{color:var(--pp-mousse);background:#E1E5D3}
/* Verdict au-dessus de l'explication */
.verdict{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:2px;margin-top:16px}
.verdict.ok{background:#EEF0E6;color:#4A5230}
.verdict.ko{background:var(--teinte-alerte);color:var(--encre-alerte)}
.verdict .rond{width:26px;height:26px;border-radius:999px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font:600 14px var(--font-sans);color:#fff;line-height:1}
.verdict.ok .rond{background:var(--pp-mousse)}
.verdict.ko .rond{background:var(--pp-argile)}
.verdict .txt{font:400 15px var(--font-display);letter-spacing:var(--tracking-display)}
@keyframes pulse-in{0%{transform:scale(.985);opacity:.4}100%{transform:scale(1);opacity:1}}
.q-anim{animation:pulse-in .18s ease}

/* ── Nature du quiz : évaluation de départ vs validation ────────
   Un bandeau de couleur distincte en tête de chaque écran de quiz. */
.bandeau-quiz{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:2px;
  font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.bandeau-quiz .rond{width:22px;height:22px;border-radius:999px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font:600 11px var(--font-sans);color:#fff;
  letter-spacing:0;text-transform:none}
.bandeau-quiz.depart{background:#EFE9EC;color:#4F4449}
.bandeau-quiz.depart .rond{background:var(--pp-violet)}
.bandeau-quiz.valid{background:#EEF0E6;color:#4A5230}
.bandeau-quiz.valid .rond{background:var(--pp-mousse)}
.bandeau-quiz.finale{background:var(--teinte-attention);color:var(--encre-attention)}
.bandeau-quiz.finale .rond{background:var(--pp-citron);color:var(--encre-attention)}

/* En-tête du fil de thématique, dans le lecteur. */
.fil-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:2px;border-bottom:1px solid var(--hairline)}

/* Pastille de module dans le parcours : numéro, puis coche quand c'est fait. */
.marque-mod{width:24px;height:24px;border-radius:999px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;background:var(--pp-w3);
  font:600 11px var(--font-sans);color:var(--pp-grey-warm)}
.marque-mod.ok{background:var(--pp-mousse);color:#fff}

/* ── Leçons natives ───────────────────────────────────────────────
   Nos propres supports, rendus par l'application : ils s'affichent toujours,
   dans la typographie de la marque, et se lisent aussi bien au téléphone. */
.lecon h3{font:400 19px/1.2 var(--font-display);letter-spacing:var(--tracking-display);
  color:var(--pp-b1);margin:26px 0 10px}
.lecon h3:first-child{margin-top:0}
.lecon p{font:400 14.5px/1.62 var(--font-sans);letter-spacing:var(--tracking-sans);
  color:var(--pp-b1);margin:0 0 11px}
.lecon ul{margin:0 0 12px;padding:0;list-style:none}
.lecon li{position:relative;padding-left:16px;margin-bottom:8px;
  font:400 14.5px/1.55 var(--font-sans);letter-spacing:var(--tracking-sans)}
.lecon li::before{content:"—";position:absolute;left:0;color:var(--pp-grey-warm)}
.lecon .tab-wrap{overflow-x:auto;margin:0 0 14px}
.lecon table{width:100%;border-collapse:collapse;min-width:420px}
.lecon th{font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pp-grey-warm);text-align:left;padding:9px 12px 9px 0;
  border-bottom:1px solid var(--hairline-strong);white-space:nowrap}
.lecon td{font:400 13.5px/1.5 var(--font-sans);letter-spacing:var(--tracking-sans);
  padding:11px 12px 11px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.lecon tr:last-child td{border-bottom:0}
.lecon .chiffres{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.lecon .chiffre{flex:1;min-width:150px;background:var(--pp-w3);padding:14px 16px;border-radius:2px}
.lecon .chiffre b{display:block;font:400 28px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.lecon .chiffre span{display:block;font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);margin-top:4px}
.lecon .encart{background:var(--teinte-attention);padding:16px 18px;border-radius:2px;margin:18px 0 14px}
.lecon .encart .lbl{display:block;margin-bottom:7px}
.lecon .encart p{margin:0;color:var(--texte-doux)}
@media (pointer:coarse){ .lecon p,.lecon li{font-size:15.5px} }

/* ── Lecteur de support (sombre) ──────────────────────────────── */
.lecteur{background:#111;color:#fff;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.lecteur .barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.lecteur .titre{font:400 12.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecteur .ghost{color:rgba(255,255,255,.6);cursor:pointer;font:400 12px var(--font-sans)}
.lecteur .ghost:hover{color:#fff}
.scene{flex:1;display:flex;align-items:center;justify-content:center;padding:0 12px;min-height:0}
.cadre{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:var(--pp-w3);overflow:hidden}
.cadre .ppSlide{position:absolute;top:0;left:0;transform-origin:top left}
.lecteur .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font:400 13px var(--font-sans)}
.lecteur .nav .pos{font-size:12px;color:rgba(255,255,255,.6)}
.film{display:flex;gap:6px;padding:0 16px 16px;overflow-x:auto}
.film>button{width:52px;height:30px;flex:none;background:rgba(255,255,255,.25);border-radius:1px;overflow:hidden;position:relative}
.film>button.on{outline:2px solid #fff}
.film .ppSlide{position:absolute;top:0;left:0;transform-origin:top left}

/* ── Barres comparatives (quiz de fin, suivi) ─────────────────── */
.duo{display:flex;flex-direction:column;gap:4px;margin-top:9px}
.histo{display:flex;align-items:flex-end;gap:10px;height:96px}
.histo>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.histo i{display:block;width:100%;background:var(--pp-grey-stroke)}
/* Un passage = une teinte de la marque : R1 argile, R2 mousse, R3 violet.
   La progression se lit d'un coup d'œil, sans relire les libellés. */
.histo .r1 i{background:var(--pp-argile)}
.histo .r2 i{background:var(--pp-mousse)}
.histo .r3 i{background:var(--pp-violet)}
.histo .fut i{background:var(--pp-w3)}
.histo span{font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--texte-doux);white-space:nowrap}

/* ── Tableaux (manager / admin) ──────────────────────────────── */
/* Les tableaux gardent une largeur minimale et défilent DANS leur cadre
   (le cadre porte overflow-x:auto) — jamais de colonne écrasée. */
table.tb{width:100%;border-collapse:collapse;min-width:520px}
.tb th{font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pp-grey-warm);
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--hairline-strong);white-space:nowrap}
.tb td{padding:12px;border-bottom:1px solid var(--hairline);font:400 13px var(--font-sans);
  letter-spacing:var(--tracking-sans);vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb tr.clic{cursor:pointer}
.tb tr.clic:hover td{background:var(--pp-w2)}

/* ── Grands titres de page (élève desktop, manager, admin) ──────
   Une seule classe : ils se réduisent d'eux-mêmes sur les petits écrans. */
.t-grand{font:400 22px/1.06 var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.t-grand.g{color:var(--pp-w4);margin-top:2px}
@media (min-width:1024px){.t-grand{font-size:24px}}
@media (min-width:1280px){.t-grand{font-size:28px;line-height:1.05}}

/* ── Bibliothèque (bureau) : arborescence des thématiques ──────── */
.arbo{width:200px;flex:none;background:#fff;border-right:1px solid var(--hairline);padding:20px 12px;min-height:70vh}
@media (min-width:1280px){.arbo{width:250px;padding:20px 14px}}

/* ── Confort tactile (doigt) : cibles agrandies ──────────────────
   S'applique à l'iPad, au téléphone et aux écrans tactiles — sans toucher
   au rendu souris, où ces mêmes contrôles restent compacts. */
@media (pointer:coarse){
  .ck{width:24px;height:24px}
  .ck.on::after{width:11px;height:6px}
  .tab{padding:10px 16px}
  .chip{padding:10px 14px}
  .q-opt{padding:16px 15px}
  .ligne{padding:15px 16px}
  .lnk{display:inline-block;padding:3px 0}
  .champ{height:42px}
  select.champ{background-position:right 14px center}
  .film>button{width:60px;height:34px}
  .lecteur .nav{padding:16px}
}

/* ── Téléphone en paysage : le lecteur prend toute la hauteur ──── */
@media (max-width:900px) and (orientation:landscape){
  .lecteur .barre{padding:8px 14px}
  .lecteur .nav{padding:8px 14px}
  .film{display:none}          /* la pellicule mange la hauteur utile */
  .scene{padding:0 8px}
}

/* La devise, d'où vient le nom. Elle ne vit plus que sur l'écran d'accueil :
   la barre haute du Studio ne porte que la marque et l'outil. */
.devise{font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);
  color:var(--pp-grey-warm);font-style:italic;white-space:nowrap}

/* ── La grille d'évaluation R1 / R2 / R3 ─────────────────────────────────
   264 points, jugés en couleurs — le classeur du client, relu par le
   responsable formateur : ni note, ni pourcentage. Un pion par couleur, et
   un second clic sur le même pion l'efface (tous les points ne se voient pas
   à chaque rendez-vous). */
.ev-point{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px 0;border-top:1px solid var(--hairline)}
.ev-lib{font:400 13.5px/1.45 var(--font-sans);letter-spacing:var(--tracking-sans);flex:1;min-width:0}
@media (min-width:1280px){ .ev-lib{font-size:14.5px} }
.ev-choix{display:flex;gap:6px;flex:none}
.pion{width:22px;height:22px;border-radius:999px;flex:none;cursor:pointer;padding:0;
  background:var(--pp-w3);box-shadow:inset 0 0 0 1px var(--hairline-fort);transition:transform .12s ease}
.pion:hover{transform:scale(1.12)}
.pion.on{box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px currentColor}
.pion-vert{color:#4F6B2E} .pion-vert.on{background:#4F6B2E}
.pion-orange{color:#E0A828} .pion-orange.on{background:#E0A828}
.pion-rouge{color:#D9694C} .pion-rouge.on{background:#D9694C}
.pion-violet{color:var(--pp-violet)} .pion-violet.on{background:var(--pp-violet)}
@media (pointer:coarse){ .pion{width:28px;height:28px} .ev-choix{gap:8px} }

/* ── Le résultat d'un QCM : une couleur, jamais une note ─────────────────
   Décision du responsable formateur (relayée par le client) : « sur le QCM on
   avait convenu des couleurs, pas de note, % etc. Évitons le modèle français.
   Les couleurs, ce sont les pays du nord, plus évolués en pédagogie. »
     vert   = acquis, capable de transmettre à un junior
     orange = en cours d'acquisition, des lacunes, à voir en jeu de rôle
     rouge  = non acquis, le module est à suivre
     violet = trop peu évalué pour conclure
   Les teintes sortent de la palette Prenez Place — pas de vert « feu tricolore »
   qui jurerait avec le reste. */
.niv{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:2px;
  font:600 10px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.niv::before{content:"";width:9px;height:9px;border-radius:999px;background:currentColor;flex:none}
/* ⚠️ Les quatre teintes doivent se distinguer AU PREMIER COUP D'ŒIL. Première
   version : mousse #675B31 pour le vert et violet #726268 — deux tons rompus à
   ΔE 28, et surtout des FONDS à ΔE 7,6, donc indiscernables (« le violet et le
   vert se confondent », retour du client). On écarte les teintes : le vert part
   à 88° et le violet à 280°, tous les écarts deux à deux passent au-dessus de
   ΔE 48. Le contraste texte/fond reste ≥ 5,6. */
.niv-vert{background:#E7EFDE;color:#3F5722}
.niv-orange{background:#FBF0D8;color:#7A5B12}
.niv-rouge{background:#FAE3DC;color:#8A4530}
.niv-violet{background:#EFE4F4;color:#573264}
.niv-gris{background:var(--pp-w3);color:var(--pp-grey-warm)}
/* Dans un avant/après, l'état de départ se lit en retrait. */
.niv.pale{opacity:.55;font-weight:400}
@media (min-width:1280px){ .niv{font-size:10.5px;padding:6px 12px} }

/* ── Largeurs : une échelle, pas des nombres en dur ──────────────────────
   Retour du client, deux fois : « ce n'est pas responsive », puis « tu as
   tendance à ne pas utiliser la place dispo, ça fait tout petit ». La cause
   était toujours la même — des `max-width` écrits EN LIGNE dans le gabarit,
   donc insensibles à l'écran. Mesuré à 1920 px avant correction : la leçon
   occupait 544 px (28 % de la fenêtre), les colonnes d'administration 760 px,
   l'espace manager 960 px.

   Trois familles, et une seule règle : la mesure grandit par paliers, jamais
   au-delà de ce que l'œil peut suivre sur une ligne de texte.
     .page.concentre  un exercice, une question à la fois  (quiz, défi)
     .page.lecture    un document qu'on lit               (leçon, situation)
     .col-large       une colonne de travail              (admin, manager)   */
.page.lecture{max-width:660px;margin:0 auto}
@media (min-width:768px){ .page.lecture{max-width:760px} }
@media (min-width:1024px){ .page.lecture{max-width:920px} }
@media (min-width:1400px){ .page.lecture{max-width:1080px} }
@media (min-width:1700px){ .page.lecture{max-width:1180px} }

.col-large{max-width:760px}
@media (min-width:1280px){ .col-large{max-width:940px} }
@media (min-width:1600px){ .col-large{max-width:1100px} }
@media (min-width:1900px){ .col-large{max-width:1400px} }

/* La lecture à deux colonnes : le fil du thème passe sur le côté dès qu'il y a
   la place, au lieu d'être relégué sous un pied de page. */
.lecon-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:1024px){
  .lecon-grille{grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
}
@media (min-width:1400px){ .lecon-grille{grid-template-columns:minmax(0,1fr) 340px;gap:32px} }
.lecon-titre{font:400 21px/1.15 var(--font-display);letter-spacing:-.02em;margin-top:9px}
@media (min-width:1024px){ .lecon-titre{font-size:26px} }
@media (min-width:1400px){ .lecon-titre{font-size:30px;line-height:1.1} }

/* Le corps d'une leçon : la PROSE garde une mesure lisible (une ligne trop
   longue et l'œil perd la suivante), mais le tableau, les chiffres et l'encart
   prennent toute la colonne — c'est là que la place sert vraiment. */
.lecon{max-width:none}
.lecon h3,.lecon p,.lecon li{max-width:64ch}
@media (min-width:1280px){
  .lecon p,.lecon li{font-size:16px;line-height:1.65}
  .lecon h3{font-size:22px}
  .lecon td{font-size:15px}
  .lecon th{font-size:10.5px}
}
@media (min-width:1700px){
  .lecon p,.lecon li{font-size:17px}
  .lecon h3{font-size:24px}
}

/* ── Responsive : téléphone, tablette, ordinateur ────────────────
   Retour du client, capture d'un quiz sur Mac : « ce n'est pas responsive
   iPad, iPhone, Mac ; là c'est tout petit ». Le diagnostic exact : les
   écrans de CONCENTRATION (quiz, défi, situations) étaient figés à 560 px
   par un style EN LIGNE — donc une colonne de téléphone perdue au milieu
   d'un écran de 1512 px — et la typographie ne grandissait nulle part.

   Deux réponses distinctes, parce que ce ne sont pas les mêmes besoins :
   — la largeur de LECTURE grandit par paliers, sans jamais s'étirer (au-delà
     de ~90 signes par ligne, on perd la ligne suivante en revenant à gauche) ;
   — la TAILLE du texte grandit sur grand écran : à 2 mètres d'un iMac, du
     13 px est illisible, alors qu'à 30 cm d'un téléphone il est juste. */
.page.concentre{max-width:560px;margin:0 auto}
@media (min-width:768px){ .page.concentre{max-width:660px} }
@media (min-width:1024px){ .page.concentre{max-width:740px} }
@media (min-width:1400px){ .page.concentre{max-width:820px} }

/* L'énoncé de la question : c'est LUI qu'on lit, il mène l'échelle. */
.q-enonce{font:400 21px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--pp-b1)}
@media (min-width:768px){ .q-enonce{font-size:23px} }
@media (min-width:1024px){ .q-enonce{font-size:26px;line-height:1.18} }
@media (min-width:1400px){ .q-enonce{font-size:29px} }

/* Les réponses suivent, et leur cible de clic grandit avec elles. */
@media (min-width:1024px){
  .q-opt{font-size:15.5px;padding:16px 18px}
  .q-opt .marque{width:24px;height:24px}
  .verdict .txt{font-size:15px}
}
@media (min-width:1400px){
  .q-opt{font-size:16.5px;padding:18px 20px}
}

/* Sur grand écran, tout le corps de texte monte d'un cran. Modeste à dessein :
   on ne redessine pas l'application, on la rend lisible à distance d'écran. */
@media (min-width:1280px){
  .coq .p{font-size:14px;line-height:1.55}
  .coq .t-item{font-size:16px}
  .coq .t-carte{font-size:17px}
  .coq .t-page{font-size:23px}
  .coq .t-hero{font-size:30px}
  .coq .t-kicker{font-size:14px}
  .coq .meta{font-size:12.5px}
  .coq .petit{font-size:12px}
  .coq .ligne .t{font-size:16px}
  .coq .ligne .m{font-size:12.5px}
}
/* Écrit APRÈS le bloc 1280 : à spécificité égale, c'est la dernière règle qui
   gagne. Placé avant, il était purement décoratif (bug constaté à 1920 px). */
@media (min-width:1700px){
  .coq .p{font-size:15px}
  .coq .t-item{font-size:17px}
  .coq .t-page{font-size:25px}
  .coq .t-hero{font-size:33px}
  .coq .ligne .t{font-size:17px}
  .coq .petit{font-size:12.5px}
}

/* ── Divers ───────────────────────────────────────────────────── */
/* minmax(0,…) et non 1fr : une piste « 1fr » prend la largeur min-content
   de son contenu et fait déborder la page sur petit écran. */
.grille-2{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.grille-3{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:720px){.grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Le toast du Studio (sonner, en haut à droite) : panneau blanc, filet,
   texte encre, angles à 2 px. */
.toast{position:fixed;right:24px;top:24px;z-index:2147483001;
  background:#fff;color:var(--pp-b1);border:1px solid var(--pp-grey-stroke);font:400 13px/1.45 var(--font-sans);letter-spacing:var(--tracking-sans);
  padding:12px 16px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(-6px);max-width:min(360px,calc(100vw - 32px))}
.toast.on{opacity:1;transform:none}
.spin{width:18px;height:18px;border-radius:999px;border:2px solid var(--pp-w3);border-top-color:var(--pp-mousse);
  animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ── Une journée du planning ───────────────────────────────────
   Cliquable pour déplier ses horaires : une carte tronquée à « + 3 autres
   séances » ne laissait aucun moyen de voir le reste. */
.jour-carte{background:#fff;border-radius:2px;overflow:hidden;transition:background .15s}
.jour-carte:hover{background:var(--pp-w3)}
.jour-carte.on{background:var(--pp-w3);box-shadow:inset 0 0 0 1px var(--hairline)}
.jour-carte>button{display:block}
/* La semaine au point : un panneau à elle, barre dorée en tête. Sans marqueur
   fort, c'était la colonne du JOUR COURANT (avec son liseré) qui passait pour
   la sélection — exactement ce que le client a signalé. */
.sem-col{padding:12px 12px 14px;border-radius:2px;transition:opacity .15s,background .15s}
.sem-col.sem-focus{background:#fff;box-shadow:inset 0 2px 0 0 var(--pp-mousse),0 0 0 1px var(--hairline)}
.sem-col:not(.sem-focus){opacity:.62;cursor:pointer}
.sem-col:not(.sem-focus):hover{opacity:.9;background:var(--pp-w3)}
.sem-col:not(.sem-focus) .jour-carte{background:transparent}
.sem-col:not(.sem-focus) .jour-carte:hover{background:#fff}

/* ── La coche de consultation ──────────────────────────────────
   Un trait fin, sans pastille : dans une liste, un badge plein pèse trop et
   attire l'œil autant que le titre. Le trait se lit d'un coup et reste sobre.
   Même dessin partout — listes, cartes, fiche manager — pour que « fait » ait
   une seule forme dans toute l'application. */
.coche{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-mousse)}
.coche svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.coche.off{color:var(--pp-grey-warm)}
.coche.gros svg{width:15px;height:15px;stroke-width:1.6}
/* Dans une pastille d'étape (parcours, situations), la coche reprend le même
   tracé, en blanc sur le fond mousse. */
.marque-mod svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Indice clavier : sur un quiz de 87 questions, le clavier change la vie. */
.touche{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;
  background:var(--pp-w3);color:var(--pp-grey-warm);border-radius:2px;
  font:600 10px var(--font-sans);letter-spacing:.04em;flex:none}
.q-opt .touche{margin-right:2px}
@media (pointer:coarse){.q-opt .touche{display:none}}
.aide-clavier{display:none;align-items:center;gap:7px;margin-top:14px}
@media (hover:hover) and (min-width:720px){.aide-clavier{display:flex}}

/* Rejoindre la visio : le bouton se tient à droite de la séance, sans
   écraser l'intitulé — c'est le geste du matin, il doit sauter aux yeux. */
.seance .visio{flex:none;align-self:center;white-space:nowrap}
@media (max-width:519px){.seance{flex-wrap:wrap}.seance .visio{margin-left:66px;margin-top:8px}}

/* Bandeau « vous regardez ailleurs » : discret mais impossible à manquer,
   en tête de page, avec la sortie à portée de clic. */
/* Collé en haut, AVANT la barre : sans cela la barre lui passait dessus au
   défilement et le rappel « vous regardez ailleurs » disparaissait. */
.bandeau-obs{position:sticky;top:0;z-index:31;
  background:var(--pp-citron);color:#3A2E0B;padding:8px 16px;
  font:400 12.5px/1.4 var(--font-sans);letter-spacing:var(--tracking-sans);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.bandeau-obs b{font-weight:500}
.bandeau-obs .lnk{color:#3A2E0B;text-decoration:underline}

/* ── Mon parcours ──────────────────────────────────────────────
   Une page qui répond à « je fais quoi ? » avant de proposer d'explorer :
   la position (frise), le geste suivant (action), les modules, puis le reste. */

/* La frise : les modules comme des étapes. Elle défile plutôt que de se
   comprimer — quatre modules illisibles ne valent pas mieux qu'aucune frise. */
.frise{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.frise-e{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:78px;padding:4px 2px;border-radius:2px}
.frise-e:hover{background:var(--pp-w3)}
.frise-p{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:600 11px var(--font-sans);color:var(--pp-grey-warm);background:var(--pp-w3);
  box-shadow:inset 0 0 0 1.5px var(--pp-w3)}
.frise-e.entame .frise-p{color:var(--pp-b1);box-shadow:inset 0 0 0 1.5px var(--c)}
.frise-e.ici .frise-p{color:#fff;background:var(--c);box-shadow:none}
.frise-e.fini .frise-p{color:#fff;background:var(--pp-mousse);box-shadow:none}
.frise-e.fini .frise-p svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.frise-n{font:400 10.5px/1.25 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);
  text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.frise-e.ici .frise-n{color:var(--pp-b1)}

/* Le geste suivant : un seul, en évidence. C'est la réponse à « je fais quoi
   maintenant » — le reste de la page est du contexte. */
.action-suite{display:block;margin-top:16px;padding:15px 17px;background:var(--pp-mousse);color:#fff;border-radius:2px}
.action-suite:hover{background:#564B28}
.action-suite.doux{background:var(--pp-w3);color:var(--pp-b1)}
.as-verbe{display:block;font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.as-quoi{display:block;font:400 18px/1.2 var(--font-display);letter-spacing:var(--tracking-display);margin-top:5px}
.as-meta{display:block;font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);opacity:.72;margin-top:5px}

/* Une carte par module : en-tête cliquable, jauge collée dessous, étapes. */
.mod-tete{display:flex;align-items:center;gap:11px;width:100%;padding:14px 16px 12px;text-align:left}
.mod-tete:hover{background:var(--pp-w3)}
/* Le motif d'inscription tient sur UNE ligne : sur un écran étroit il poussait
   le titre et l'état l'un sur l'autre. Il disparaît sous 520 px — l'état du
   module compte plus que la raison de l'inscription, qu'on relit dans la carte. */
.mod-tete .petit{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:519px){.mod-tete .petit{display:none}}
.mod-etat{flex:none;font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);white-space:nowrap}
.mod-etat.ok{color:var(--pp-mousse)}
.mod-etat.att{color:var(--encre-attention)}
.mod-jauge{padding:0 16px 13px}
.carte.mod.fini .mod-tete{opacity:.72}
.mod-corps{border-top:1px solid var(--hairline)}
/* L'intitulé d'une phase du parcours : un repère, pas un titre — il sépare
   « comprendre » de « vérifier » sans prendre la place d'une étape. */
.phase-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 16px 5px;font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pp-grey-warm);border-top:1px solid var(--hairline)}
.phase-t:first-child{border-top:0}
.phase-t+.etape{border-top:0}
.etape{display:flex;align-items:center;gap:11px;padding:11px 16px}
.etape+.etape{border-top:1px solid var(--hairline)}
a.etape:hover{background:var(--pp-w3)}
.etape.bloque{opacity:.55}
.etape-t{display:block;font:400 14px/1.35 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-b1)}

/* « Explorer librement » : replié par défaut, il vient APRÈS le parcours —
   la bibliothèque ne doit pas être la première chose qu'on voit. */
.libre-tete{display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;border-top:1px solid var(--hairline)}
/* La bibliothèque garde ses deux visages : accordéons sur petit écran,
   arborescence à gauche + ressources à droite dès qu'il y a la place. */
.bib-bureau{display:none}
@media (min-width:1024px){.bib-mobile{display:none}.bib-bureau{display:block}}
.bib-colonnes{display:flex;align-items:stretch;background:var(--pp-w2)}
.arbo{width:250px;flex:none;background:#fff;border-right:1px solid var(--hairline);padding:20px 12px;min-height:70vh}
@media (min-width:1400px){.arbo{width:290px}}
/* Une entrée de l'arborescence : la pastille du thème, son nom, son compte. */
.arbo-t{display:flex;align-items:center;gap:9px;width:100%;padding:10px 10px;border-radius:2px;text-align:left}
.arbo-t:hover{background:var(--pp-w3)}
.arbo-t.on{background:var(--pp-mousse)}
.arbo-nom{display:block;font:400 14.5px/1.25 var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.arbo-n{display:block;font:400 11px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);margin-top:2px}
.arbo-t.on .arbo-nom{color:#fff}
.arbo-t.on .arbo-n{color:rgba(255,255,255,.72)}
/* Un sous-thème : cliquable (il filtre le thème), et il le montre. */
.arbo-sous{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:5px 10px 5px 30px;border-radius:2px;text-align:left;
  font:400 12.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--texte-doux)}
.arbo-sous:hover{background:var(--pp-w3);color:var(--pp-b1)}
.arbo-sous .arbo-n{margin-top:0}
.arbo-sous.on{background:var(--pp-w3);color:var(--pp-b1);box-shadow:inset 2px 0 0 0 var(--pp-mousse)}

/* ── Les logiciels ─────────────────────────────────────────────
   Un accordéon par outil, un tutoriel par ligne, la vidéo qui se déplie sur
   place : on ne quitte pas la page pour regarder trois minutes. */
.log-tete{display:flex;align-items:center;gap:13px;width:100%;padding:15px 16px;text-align:left}
.log-tete:hover{background:var(--pp-w3)}
.log-emoji{font-size:19px;flex:none;width:24px;text-align:center}
.log-fleche{flex:none;color:var(--pp-grey-warm);font-size:12px}
.log-corps{border-top:1px solid var(--hairline)}
.tuto+.tuto{border-top:1px solid var(--hairline)}
.tuto.on{background:var(--pp-w3)}
.tuto-tete{display:flex;align-items:center;gap:11px;width:100%;padding:11px 16px 11px 20px;text-align:left}
.tuto-tete:not([disabled]):hover{background:var(--pp-w3)}
.tuto-tete[disabled]{opacity:.55;cursor:default}
.tuto-emoji{flex:none;width:20px;text-align:center;font-size:14px}
.tuto-titre{flex:1;min-width:0;font:400 13.5px/1.4 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-b1)}
.marque-vu{flex:none;color:var(--pp-mousse);font-size:12px}
.tuto-video{padding:4px 16px 18px 20px}
/* 16/9 tenu par le rapport d'aspect : pas de saut de mise en page au chargement. */
.cadre-video{position:relative;aspect-ratio:16/9;background:#111;border-radius:2px;overflow:hidden}
.cadre-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:519px){.tuto-video{padding-left:16px}.log-tete{gap:10px;padding:13px 14px}}

/* ── Le pitch ──────────────────────────────────────────────────
   Les quatre temps du support : la slide à gauche, son intention à droite —
   c'est la lecture du support d'origine du client. En dessous de 760px on
   empile, la slide passe en 16/9 pleine largeur. */
.pitch-etape{display:grid;overflow:hidden}
.pitch-vis{margin:0;background:#111;aspect-ratio:16/9;overflow:hidden}
.pitch-vis img{display:block;width:100%;height:100%;object-fit:cover}
.pitch-corps{padding:15px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pitch-tete{display:flex;align-items:center;gap:10px}
.pitch-num{flex:none;width:22px;height:22px;border-radius:999px;background:var(--pp-mousse);color:#fff;
  font:400 12px var(--font-display);display:inline-flex;align-items:center;justify-content:center}
.pitch-cit{margin:2px 0 0;padding:11px 13px;background:var(--pp-w3);border-left:2px solid var(--pp-citron);
  font:400 13px/1.55 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--texte-doux)}
.pitch-crit{margin:8px 0 0;padding:0;list-style:none}
.pitch-crit li{position:relative;padding-left:16px;margin-top:7px;
  font:400 13px/1.5 var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--texte-doux)}
.pitch-crit li::before{content:"—";position:absolute;left:0;color:var(--pp-grey-warm)}
.pitch-crit b{font-weight:500;color:var(--pp-b1)}
.pitch-duo{display:grid;gap:12px}
@media (min-width:760px){
  .pitch-etape{grid-template-columns:308px minmax(0,1fr);align-items:stretch}
  .pitch-vis{aspect-ratio:auto;height:100%;min-height:186px}
}
@media (min-width:900px){.pitch-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}

/* Le sélecteur de promo, dans l'en-tête : discret, il ne concurrence pas le titre. */
.sel-promo{height:28px;padding:0 26px 0 9px;font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);
  color:var(--texte-doux);background-color:var(--pp-w3);border:0;max-width:210px}
@media (max-width:519px){.sel-promo{max-width:140px}}

/* Les promos d'un contenu : de petites puces à cocher, pas un formulaire. */
.promos-choix{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;max-width:260px}
.promos-choix .chip{font-size:10.5px;padding:3px 8px}

/* ── Le code d'accès ────────────────────────────────────────────
   Un code se lit caractère par caractère : chasse fixe, lettres espacées,
   et masqué par défaut dans le tableau — il ne traîne pas à l'écran. */
.code,.code-grand{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-ligatures:none}
.code{font-size:14px;line-height:1;letter-spacing:.10em;color:var(--pp-b1);cursor:pointer;
  background:var(--pp-w3);padding:6px 9px;border-radius:2px;display:inline-block;white-space:nowrap}
.code:hover{box-shadow:inset 0 0 0 1px var(--pp-grey-stroke)}
.code.masque{color:var(--pp-grey-warm);letter-spacing:.18em}
.code-grand{font-size:34px;line-height:1.1;letter-spacing:.14em;color:var(--pp-b1);margin-top:10px;
  cursor:pointer;word-break:break-all}
@media (max-width:519px){.code-grand{font-size:26px;letter-spacing:.10em}}

/* Mode salle : le pupitre et la projection prennent tout l'écran — on efface
   l'ossature de l'administration (en-tête, rail de navigation, marges). */
body.plein .haut,body.plein .rail{display:none}
body.plein .coq,body.plein .corps{display:block;height:auto;min-height:0;max-width:none;margin:0;padding:0}
body.plein .contenu{max-width:none!important;padding:0;overflow:visible}

/* ── Le pupitre du formateur ───────────────────────────────────
   Deux écrans, comme dans PowerPoint : ici la slide courante, la suivante et
   les notes ; la projection (plein écran, slide seule) part dans une seconde
   fenêtre. Fond sombre : en salle, on ne veut pas d'un écran blanc dans l'œil. */
.pup{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#111;color:#F2EEEA}
.pup-h{display:flex;align-items:center;gap:16px;padding:12px 18px;flex-wrap:wrap;
  border-bottom:1px solid rgba(242,238,234,.12)}
.pup-nom{font:400 17px var(--font-display);letter-spacing:var(--tracking-display);color:#fff}
.pup-h .petit{color:rgba(242,238,234,.6)}
.pup-chrono{font:400 24px var(--font-display);letter-spacing:var(--tracking-display);
  font-variant-numeric:tabular-nums;color:var(--pp-citron);margin-left:auto}
.pup-corps{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 18px 20px;min-height:0}
@media (min-width:1024px){.pup-corps{grid-template-columns:minmax(0,1fr) 340px}}
@media (min-width:1500px){.pup-corps{grid-template-columns:minmax(0,1fr) 420px}}
.pup-scene{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Le cadre 16/9 : les slides font 1920×1080, le deck les met à l'échelle. */
.pup-cadre{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(242,238,234,.14)}
.pup-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pup-cadre:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;box-shadow:none}
/* Plein écran = la SCÈNE entière : la slide s'étire, les boutons Précédente /
   Suivante restent visibles et cliquables sous elle (la pellicule aussi). */
.pup-scene:fullscreen{background:#0C0B09;padding:14px 18px}
.pup-scene:fullscreen .pup-cadre{flex:1;aspect-ratio:auto;min-height:0}
.pup-nav{display:flex;align-items:center;justify-content:center;gap:18px}
.pup-pos{font:400 15px var(--font-display);letter-spacing:var(--tracking-display);
  font-variant-numeric:tabular-nums;color:rgba(242,238,234,.75);min-width:74px;text-align:center}
.pup-cote{display:flex;flex-direction:column;gap:16px;min-width:0}
.pup-cote .lbl{color:rgba(242,238,234,.5);display:block;margin-bottom:7px}
.pup-suivante{opacity:.9}
.pup-fin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0C0B09;color:rgba(242,238,234,.55);font:400 14px var(--font-sans);letter-spacing:var(--tracking-sans)}
/* Un `display` explicite l'emporte sur la règle [hidden] du navigateur : il faut
   le dire, sinon le carton « Dernière slide » recouvre la slide suivante. */
.pup-fin[hidden]{display:none}
/* Les notes : c'est le texte que le formateur lit en biais, il doit être lisible. */
.pup-notes{flex:1;min-height:0;display:flex;flex-direction:column}
.pup-notes-txt{flex:1;overflow:auto;background:rgba(242,238,234,.06);border-radius:2px;padding:14px 15px;
  font:400 15.5px/1.62 var(--font-sans);letter-spacing:var(--tracking-sans);color:#F2EEEA}
@media (min-width:1500px){.pup-notes-txt{font-size:17px}}
/* La pellicule : où l'on en est dans le déroulé. */
.pup-pellicule{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.pup-pellicule button{padding:0;background:none}
.pup-pellicule i{display:block;width:14px;height:5px;border-radius:1px;background:rgba(242,238,234,.22)}
.pup-pellicule button:hover i{background:rgba(242,238,234,.5)}
.pup-pellicule button.on i{background:var(--pp-citron)}
.pup .btn.blanc{background:rgba(242,238,234,.1);color:#F2EEEA;box-shadow:inset 0 0 0 1px rgba(242,238,234,.2)}
.pup .btn.blanc:hover{background:rgba(242,238,234,.18)}
.pup .btn[disabled]{opacity:.3}
.pup .lnk.discret{color:rgba(242,238,234,.55)}

/* La projection : la slide, rien d'autre. */
.proj{position:relative;width:100vw;height:100vh;height:100dvh;background:#000;overflow:hidden}
.proj iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.proj-barre{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;
  padding:10px 16px;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  transition:opacity .4s ease}
.proj-barre.off{opacity:0;pointer-events:none}
.proj-titre{font:400 13px var(--font-sans);letter-spacing:var(--tracking-sans);color:rgba(255,255,255,.75)}
.proj .btn.blanc{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){.proj-barre{transition:none}}

@media print{
  .memo-page{max-width:none}
  .memo-page .carte{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  .memo-page .t-hero{font-size:22px}
}

@media print{
  .tabbar,.rail,.haut,.no-print{display:none!important}
  body{background:#fff}
  .contenu{padding:0;max-width:none}
}

/* ── L'enregistrement, dit à l'écran ──────────────────────────────
   Tout part tout seul, mais rien ne le montrait : on modifiait le planning ou
   les supports, on revenait, et on ne savait pas si le travail avait été gardé
   (retour client du 8 sept. 2026). La pastille de l'en-tête dit l'état, et se
   clique pour enregistrer sur-le-champ. */
.enr{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font:400 12px var(--font-sans);letter-spacing:var(--tracking-sans);
  padding:7px 11px;border-radius:2px;background:var(--pp-w3);color:var(--pp-b1);white-space:nowrap}
.enr::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--pp-grey-warm);flex:none}
.enr:hover{background:#e8e2dc}
.enr.a-jour{color:var(--pp-w4)}
.enr.a-jour::before{background:var(--pp-mousse)}
.enr.en-attente::before,.enr.envoi::before{background:var(--pp-citron)}
.enr.envoi::before{animation:pulse 1s ease-in-out infinite}
.enr.hors-ligne,.enr.conflit{background:var(--pp-argile);color:#fff}
.enr.hors-ligne::before,.enr.conflit::before{background:#fff}
@keyframes pulse{50%{opacity:.25}}

.bandeau-conflit{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--pp-argile);color:#fff;padding:14px 18px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font:400 13px var(--font-sans);letter-spacing:var(--tracking-sans);line-height:1.5}
.bandeau-conflit[hidden]{display:none}
.bandeau-conflit b{font-weight:500}
.bandeau-conflit .actions{display:flex;gap:8px;flex:none}
.bandeau-conflit .btn{background:#fff;color:var(--pp-b1);font-size:13px;padding:9px 13px}
.bandeau-conflit .btn:hover{background:var(--pp-w3)}
.bandeau-conflit .btn.fant{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.bandeau-conflit .btn.fant:hover{background:rgba(255,255,255,.14)}

/* ── Le lexique (sous la bibliothèque) ── */
.lex{padding-top:26px;padding-bottom:34px;border-top:1px solid var(--hairline);margin-top:8px}
.lex-entete{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;flex-wrap:wrap}
.lex-champ{width:380px;max-width:100%;flex:none;height:40px;font-size:14px}
.lex-fiche{background:#fff;border-radius:2px;margin-top:8px;border:1px solid transparent}
.lex-fiche.on{border-color:var(--pp-mousse)}
.lex-tete{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:12px 14px;cursor:pointer;font:inherit;color:inherit}
.lex-mot{font:400 17px var(--font-display);letter-spacing:var(--tracking-display);color:var(--pp-b1)}
.lex-fam{font:400 11px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-w4);margin-left:auto;white-space:nowrap}
.lex-plus{width:22px;height:22px;border-radius:2px;background:var(--pp-w3);display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--pp-mousse);flex:none}
.lex-fiche.on .lex-plus{background:var(--pp-mousse);color:#fff}
.lex-syn{font:400 11.5px var(--font-sans);letter-spacing:var(--tracking-sans);color:var(--pp-grey-warm);padding:0 14px 10px}
.lex-corps{padding:0 14px 14px;border-top:1px solid var(--hairline)}
.lex-def{padding-top:12px;font-size:14px;color:var(--pp-b1)}
.lex-pourquoi{margin-top:12px;background:linear-gradient(90deg,var(--pp-w3),rgba(242,238,234,0));padding:10px 12px;border-left:3px solid var(--pp-citron)}
.lex-pourquoi .lbl{display:block;margin-bottom:5px}
.lex-voir{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lex-voir .lbl{margin-right:4px}
@media (max-width:760px){.lex-champ{width:100%}.lex-fam{display:none}}

/* ── Les RDV parfaits (forge-rdv.js) : la carte mentale R1 / R2 / R3, pleine page ── */
.coq .contenu.large{padding-left:16px!important;padding-right:16px!important;padding-top:12px}
.rdv{--rc-o:var(--pp-mousse);--rc-e:var(--pp-citron)}
.rdv-haut{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:12px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.rdv-haut .t-page{white-space:nowrap}
.rdv-sous{font-size:13px;color:var(--pp-w4);margin-top:4px;max-width:520px}
.rdv-seg{display:flex;gap:0;background:#fff;padding:0;border-radius:2px;box-shadow:inset 0 0 0 1px var(--pp-w4);overflow:hidden}
.rdv-seg button{border:0;background:transparent;border-radius:0;padding:5px 12px;cursor:pointer;font:inherit;color:var(--pp-b1);display:flex;align-items:baseline;gap:8px;line-height:1.15}
.rdv-seg button b{font:400 18px var(--font-display);letter-spacing:var(--tracking-display)}
.rdv-seg button span{font-size:11.5px;color:var(--pp-w4)}
.rdv-seg button.on{background:var(--pp-b1);color:#fff}.rdv-seg button.on span{color:#cfc9bd}
.rdv-outils{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.rdv-outils .champ{width:200px;max-width:100%;height:34px;font-size:13px}
.rdv-outils .btn{padding:6px 10px;font-size:12.5px}
.rdv-outils .btn.on{background:var(--pp-mousse);color:#fff;border-color:var(--pp-mousse)}
.rdv-prog{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pp-mousse);font-weight:500;margin-left:6px}
.rdv-prog .bar{width:96px;height:6px;background:var(--pp-w3);border-radius:3px;overflow:hidden}
.rdv-prog .bar i{display:block;height:100%;background:var(--pp-mousse);width:0;transition:width .3s}
.rdv-legende{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:#555;padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--hairline);background:#fff}
.rdv-legende[hidden]{display:none}
.rdv-legende .intro{flex-basis:100%;color:var(--pp-b1)}
.rdv-fil{font-size:13px;padding-top:6px;padding-bottom:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px}
.rdv-fil a{cursor:pointer;color:var(--pp-mousse);text-decoration:underline;text-underline-offset:3px}
.rdv-fil a.on{color:var(--pp-b1);text-decoration:none;font-weight:500}
.rdv-fil .sep,.rdv-fil .vide{color:var(--pp-w4)}
.rdv-b{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:2px;line-height:1.4;vertical-align:middle;white-space:nowrap}
.rdv-b-o{background:var(--pp-mousse);color:#fff}.rdv-b-e{background:var(--pp-citron);color:#4a3c10}.rdv-b-c{background:var(--pp-b1);color:#fff}
.rdv-b-n{background:var(--pp-w3);color:var(--pp-b1);border:1px solid var(--hairline)}.rdv-b-f{background:#fff;color:var(--pp-mousse);border:1px solid var(--pp-mousse);white-space:normal}
.rdv-b-s{background:var(--pp-ill-teal);color:#fff}.rdv-b-t{background:#fff;border:1px solid var(--hairline)}
.rdv-niv{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--pp-w3);border:1px solid var(--hairline);font-size:11px;font-weight:600;vertical-align:middle}
.rdv-app{display:flex;position:relative;height:70vh;min-height:420px;border-top:1px solid var(--hairline)}
.rdv.liste .rdv-app,.rdv.liste .rdv-fil{display:none}
.rdv-scene{flex:1;position:relative;overflow:hidden;background:var(--pp-w2);cursor:grab;background-image:radial-gradient(rgba(157,156,154,.22) 1px,transparent 1px);background-size:22px 22px}
.rdv-scene.drag{cursor:grabbing}
.rdv-monde{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.rdv-liens{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.rdv-liens path{fill:none;stroke-width:2.6;opacity:.8}
.rdv-node{position:absolute;background:#fff;border:1px solid var(--hairline);border-left:4px solid var(--c,var(--pp-mousse));border-radius:2px;padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:pointer;user-select:none;transition:box-shadow .15s;font-size:15px;line-height:1.35}
.rdv-node:hover{box-shadow:0 3px 10px rgba(0,0,0,.09)}
.rdv-node .t{font-weight:500}
.rdv-node .sub{font-size:12px;color:var(--pp-w4);margin-top:3px;line-height:1.3}
.rdv-node .nq{font-size:11.5px;color:var(--pp-mousse);margin-top:4px}
.rdv-node.root{background:var(--pp-b1);color:#fff;border-color:var(--pp-b1);border-left-color:var(--pp-citron)}
.rdv-node.root .t{font:400 24px/1.1 var(--font-display);letter-spacing:var(--tracking-display)}
.rdv-node.root .sub{color:#cfc9bd}
.rdv-node.phase{background:var(--c);color:#fff;border-color:var(--c);padding:8px 12px}
.rdv-node.phase .t{font:400 18px/1.15 var(--font-display);letter-spacing:var(--tracking-display)}
.rdv-node.phase .sub,.rdv-node.phase .nq{color:rgba(255,255,255,.82)}
.rdv-node.phase.clair{color:var(--pp-b1)}.rdv-node.phase.clair .sub,.rdv-node.phase.clair .nq{color:rgba(0,0,0,.6)}
.rdv-node.theme .t{font:400 17px/1.2 var(--font-display);letter-spacing:var(--tracking-display)}
.rdv-node.theme.sous .t{font:500 14.5px/1.3 var(--font-sans)}
.rdv-node.q{padding-left:38px}
.rdv-node.q .t{font-weight:400}
.rdv-node.q .rdv-coche{position:absolute;left:12px;top:12px;width:17px;height:17px;accent-color:var(--pp-mousse);cursor:pointer;margin:0}
.rdv-node.q.faite{background:var(--pp-w3)}
.rdv-node.q.faite .t{color:var(--pp-w4);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.rdv-node .bs{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.rdv-node.step{border-left-style:dashed}
.rdv-node.step .t{font-weight:400}.rdv-node.step .t:before{content:"▶ ";color:var(--pp-ill-teal);font-size:11px}
.rdv-node.tip{background:#fffbea;border-color:#e9dfb3}.rdv-node.tip .t{font-weight:400}.rdv-node.tip .t:before{content:"💡 ";font-size:12px}
.rdv-node .plus{position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--c,var(--pp-mousse));color:var(--c,var(--pp-mousse));font-size:14px;line-height:22px;text-align:center;font-weight:600}
.rdv-node.ouvert .plus{background:var(--c,var(--pp-mousse));color:#fff}
.rdv-node.sel{outline:3px solid var(--pp-citron);outline-offset:1px;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.rdv-node.chemin{box-shadow:0 0 0 2px var(--c,var(--pp-mousse)) inset,0 3px 10px rgba(0,0,0,.08)}
.rdv-node.dim{opacity:.28}.rdv-node.hit{outline:2px solid var(--pp-citron)}
.rdv-zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:4px;z-index:5}
.rdv-zoom button{width:36px;height:36px;padding:0;font-size:17px;background:#fff;border:1px solid var(--hairline);border-radius:2px;cursor:pointer}
.rdv-panel{position:absolute;right:0;top:0;bottom:0;width:400px;max-width:100%;border-left:1px solid var(--hairline);background:#fff;overflow:auto;padding:18px 20px 40px;font-size:14.5px;box-shadow:-8px 0 24px rgba(0,0,0,.08);transform:translateX(105%);transition:transform .18s;z-index:6}
.rdv-panel.ouvert{transform:none}
.rdv-panel .vide{color:var(--pp-w4);font-size:14px}
.rdv-panel h2{font:400 22px/1.15 var(--font-display);letter-spacing:var(--tracking-display);margin:8px 0 6px}
.rdv-panel .rdv-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--c,var(--pp-mousse))}
.rdv-panel .rdv-sub{color:var(--pp-w4);font-size:13px;margin:0 0 6px}
.rdv-panel .rdv-bloc{margin-top:16px;padding-top:12px;border-top:1px solid var(--hairline)}
.rdv-panel .rdv-bloc h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pp-w4);margin:0 0 6px;font-weight:600}
.rdv-panel p{margin:0 0 6px}.rdv-panel ul{margin:0;padding-left:18px}.rdv-panel li{margin:4px 0}
.rdv-panel .rdv-nivbox{background:var(--pp-w3);border-radius:2px;padding:10px 12px;font-size:13.5px}
.rdv-panel .rdv-grande{display:flex;gap:10px;align-items:center;background:var(--pp-w3);padding:10px 12px;border-radius:2px;margin-top:14px;cursor:pointer;font-weight:500}
.rdv-panel .rdv-grande input{width:18px;height:18px;accent-color:var(--pp-mousse)}
.rdv-panel .rdv-enfants a{display:block;padding:7px 0;border-bottom:1px solid var(--hairline);color:inherit;cursor:pointer}
.rdv-panel .rdv-enfants a:hover{color:var(--pp-mousse)}
.rdv-panel .rdv-fermer{float:right;width:32px;height:32px;border:1px solid var(--hairline);background:#fff;border-radius:2px;font-size:20px;line-height:1;cursor:pointer;margin:-4px -6px 0 0}
.rdv-liste{display:none;max-width:980px;margin:0 auto;padding-top:14px;padding-bottom:80px}
.rdv.liste .rdv-liste{display:block}
.rdv-lphase{background:#fff;border:1px solid var(--hairline);border-left:6px solid var(--c);border-radius:2px;margin:12px 0;padding:0 16px 8px}
.rdv-lphase summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;padding:14px 0;font:400 22px/1.15 var(--font-display);letter-spacing:var(--tracking-display)}
.rdv-lphase summary::-webkit-details-marker{display:none}
.rdv-lphase summary:before{content:"+";font:600 18px var(--font-sans);color:var(--c);width:18px;flex:none}
.rdv-lphase[open] summary:before{content:"−"}
.rdv-lphase summary .num{font:500 12px var(--font-sans);color:var(--pp-w4)}
.rdv-lphase summary .meta{font:400 12.5px var(--font-sans);color:var(--pp-w4);margin-left:auto;white-space:nowrap}
.rdv-liste h3{font:400 19px/1.2 var(--font-display);letter-spacing:var(--tracking-display);margin:20px 0 4px;border-bottom:2px solid var(--c);padding-bottom:4px}
.rdv-liste h4{font:600 14px/1.3 var(--font-sans);margin:16px 0 4px;color:var(--c)}
.rdv-liste .num{color:var(--pp-w4);font:500 12px var(--font-sans);margin-right:6px}
.rdv-liste h3 small,.rdv-liste h4 small{font:400 12px var(--font-sans);color:var(--pp-w4);margin-left:8px}
.rdv-liste .lp{font-size:13.5px;color:#444;margin:2px 0 8px}
.rdv-lq{background:var(--pp-w2);border:1px solid var(--hairline);border-radius:2px;padding:10px 12px;margin:8px 0;cursor:pointer}
.rdv-lq label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:15.5px}
.rdv-lq input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--pp-mousse)}
.rdv-lq.faite .lt{text-decoration:line-through;color:var(--pp-w4)}
.rdv-lq .lb{margin:6px 0 4px 27px;display:flex;flex-wrap:wrap;gap:4px}
.rdv-lq .lp{margin-left:27px}
.rdv-lq .lr{margin:4px 0 0 27px;font-size:13.5px;color:#333}
.rdv-lq .lr b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pp-w4);font-weight:600;margin-bottom:2px}
.rdv-lq .lr ul{margin:0;padding-left:18px}
.rdv-ls{padding:8px 12px;margin:6px 0;border-left:3px dashed var(--pp-ill-teal);font-size:14.5px}
.rdv-ls .lp{margin:2px 0 0}
.rdv-ltip{background:#fffbea;border:1px solid #e9dfb3;border-radius:2px;padding:8px 12px;margin:6px 0;font-size:13.5px}
@media (max-width:900px){
 .rdv-panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:62vh;border-left:0;border-top:1px solid var(--hairline);box-shadow:0 -6px 24px rgba(0,0,0,.12);transform:translateY(100%);z-index:40}
 .rdv-panel.ouvert{transform:none}
 .rdv-seg button{padding:6px 10px}.rdv-seg button span{display:none}
 .rdv-legende{display:none}
 .rdv-outils .champ{width:100%}
}
@media print{
 .haut,.rail,.tabbar,.rdv-haut,.rdv-legende,.rdv-fil,.rdv-app,.toast{display:none!important}
 .coq{height:auto;overflow:visible}.contenu{overflow:visible}
 body{background:#fff}
 .rdv-liste{display:block!important;max-width:none;padding:0}
 .rdv-lphase{break-before:page;border:0;padding:0}.rdv-lphase:first-of-type{break-before:auto}
 .rdv-lq{break-inside:avoid}
}

/* Le pitch : déroulé slide par slide (deck du Studio) */
.pitch-deroule{display:flex;flex-direction:column}
.pitch-slide{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hairline)}
.pitch-slide:last-child{border-bottom:0}
.pitch-slide .p{margin-top:2px}

/* Photo Teams à la place des initiales (forge-photos.js) : le rond garde sa taille, l'image le remplit. */
.avatar.avatar-photo,.tiroir-id .ini.avatar-photo{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent;font-size:0;border:0}