/* Pupitre — généré par construire.py depuis tokens.json et composants.css. Ne pas éditer à la main. */

:root {
  --fond: #FAF2F0;
  --blanc: #FFFFFF;
  --encre: #50312F;
  --encre-2: #70524E;
  --nuit: #50312F;
  --sur-nuit: #FAF2F0;
  --rouge: #CB0000;
  --sur-rouge: #FFFFFF;
  --rouge-texte: #CB0000;
  --citron: #E4EA8C;
  --sur-citron: #50312F;
  --sur-citron-2: #70524E;
  --ok: #3F6C45;
  --alerte: #8A5000;
  --pastel-orange: #F8D8C6;
  --pastel-bleu: #D6DDEE;
  --pastel-vert: #D3E3CF;
  --pastel-jaune: #F5E2A8;
  --pastel-rose: #F6D2D6;
  --vif-orange: #E8743B;
  --vif-bleu: #4A63C9;
  --vif-vert: #4F8A57;
  --vif-jaune: #E9B824;
  --vif-rose: #E0566E;
  --ombre-flottant: 0 14px 32px -12px #50312F66;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-16: 64px;
  --rayon-m: 20px;
  --rayon-l: 32px;
  --rayon-pilule: 9999px;
  --trait: 2.5px;
  --hauteur-touche: 48px;
  --largeur-texte: 60ch;
  --font-affiche: "Sofia Sans Extra Condensed", Impact, "Arial Narrow", sans-serif;
  --font-texte: Rubik, "Helvetica Neue", Arial, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --fond: #1E1312;
  --blanc: #2B1D1C;
  --encre: #FAF2F0;
  --encre-2: #C4AEAB;
  --nuit: #3A2523;
  --sur-nuit: #FAF2F0;
  --rouge: #FF4D3D;
  --sur-rouge: #1E1312;
  --rouge-texte: #FF4D3D;
  --citron: #E4EA8C;
  --sur-citron: #50312F;
  --sur-citron-2: #70524E;
  --ok: #7DBB86;
  --alerte: #F2B04A;
  --pastel-orange: #3F2618;
  --pastel-bleu: #232842;
  --pastel-vert: #1F3322;
  --pastel-jaune: #3A3014;
  --pastel-rose: #3F2026;
  --vif-orange: #E8743B;
  --vif-bleu: #4A63C9;
  --vif-vert: #4F8A57;
  --vif-jaune: #E9B824;
  --vif-rose: #E0566E;
  --ombre-flottant: 0 14px 32px -12px #000000cc;
  color-scheme: dark;
}
}
:root[data-theme="dark"] {
  --fond: #1E1312;
  --blanc: #2B1D1C;
  --encre: #FAF2F0;
  --encre-2: #C4AEAB;
  --nuit: #3A2523;
  --sur-nuit: #FAF2F0;
  --rouge: #FF4D3D;
  --sur-rouge: #1E1312;
  --rouge-texte: #FF4D3D;
  --citron: #E4EA8C;
  --sur-citron: #50312F;
  --sur-citron-2: #70524E;
  --ok: #7DBB86;
  --alerte: #F2B04A;
  --pastel-orange: #3F2618;
  --pastel-bleu: #232842;
  --pastel-vert: #1F3322;
  --pastel-jaune: #3A3014;
  --pastel-rose: #3F2026;
  --vif-orange: #E8743B;
  --vif-bleu: #4A63C9;
  --vif-vert: #4F8A57;
  --vif-jaune: #E9B824;
  --vif-rose: #E0566E;
  --ombre-flottant: 0 14px 32px -12px #000000cc;
  color-scheme: dark;
}

/* Styles de texte */
.affiche-xl {
  font-family: var(--font-affiche);
  font-size: 240px;
  line-height: 0.8;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.affiche-l {
  font-family: var(--font-affiche);
  font-size: 80px;
  line-height: 0.86;
  font-weight: 900;
  text-transform: uppercase;
}
.affiche-m {
  font-family: var(--font-affiche);
  font-size: 44px;
  line-height: 0.9;
  font-weight: 900;
  text-transform: uppercase;
}
.chiffre {
  font-family: var(--font-affiche);
  font-size: 128px;
  line-height: 0.8;
  font-weight: 900;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.texte-l {
  font-family: var(--font-texte);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}
.texte {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.texte-petit {
  font-family: var(--font-texte);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.etiquette {
  font-family: var(--font-texte);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.donnee {
  font-family: var(--font-texte);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Pupitre — composants. Se charge après les tokens. Préfixe pp-.
   Palette Canva « Bold Berries » : aubergine, fraise, citron vert, basilic. Tout est rond et gras ;
   le citron signe chaque page, les familles vivent dans les objets low poly et les pastels. */

/* Famille courante : fond pastel et couleur vive de l'outil */
:root { --famille: var(--pastel-orange); --famille-vif: var(--vif-orange); }
.pp-famille-orange { --famille: var(--pastel-orange); --famille-vif: var(--vif-orange); }
.pp-famille-bleu   { --famille: var(--pastel-bleu);   --famille-vif: var(--vif-bleu); }
.pp-famille-vert   { --famille: var(--pastel-vert);   --famille-vif: var(--vif-vert); }
.pp-famille-jaune  { --famille: var(--pastel-jaune);  --famille-vif: var(--vif-jaune); }
.pp-famille-rose   { --famille: var(--pastel-rose);   --famille-vif: var(--vif-rose); }

body { margin: 0; background: var(--fond); color: var(--encre); font: 500 16px/24px var(--font-texte); -webkit-font-smoothing: antialiased; }
:where(a) { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

/* Typo */
.pp-affiche { margin: 0; font: 900 80px/.86 var(--font-affiche); text-transform: uppercase; text-wrap: balance; }
.pp-etiquette { font: 700 12px/16px var(--font-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.pp-etiquette::before { content: "( "; }
.pp-etiquette::after { content: " )"; }
.pp-donnee { font: 500 15px/22px var(--font-texte); font-variant-numeric: tabular-nums; }
.pp-code { font: 500 14px/20px var(--font-code); }

/* Mots étalés sur toute la largeur */
.pp-etale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--espace-3); margin: 0; padding: 0; list-style: none; font: 600 13px/18px var(--font-texte); letter-spacing: .04em; text-transform: lowercase; color: var(--rouge-texte); }

/* Touche : une pilule */
.pp-touche { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2); height: var(--hauteur-touche); padding: 0 26px; border: var(--trait) solid var(--encre); border-radius: var(--rayon-pilule); background: transparent; color: var(--encre); font: 600 16px/20px var(--font-texte); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms, color 120ms, border-color 120ms, transform 120ms; }
.pp-touche:hover { background: var(--encre); color: var(--fond); }
.pp-touche:active { transform: scale(.96); }
.pp-touche--primaire { border-color: var(--rouge); background: var(--rouge); color: var(--sur-rouge); }
.pp-touche--primaire::before { content: "↳"; font-weight: 700; }
.pp-touche--primaire:hover { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.pp-touche--danger { border-color: var(--rouge); color: var(--rouge-texte); }
.pp-touche--danger:hover { background: var(--rouge); color: var(--sur-rouge); }
.pp-touche--petite { height: 38px; padding: 0 18px; font-size: 14px; }
.pp-touche--discret { height: auto; padding: 0; border: 0; background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pp-touche--discret:hover { background: none; color: var(--rouge-texte); }
.pp-touche--fleche { height: auto; padding: 0; border: 0; background: none; font-weight: 700; }
.pp-touche--fleche::before { content: "( "; }
.pp-touche--fleche::after { content: " )"; }
.pp-touche--fleche:hover { background: none; color: var(--rouge-texte); }
.pp-touche:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Voyant : la forme dit l'état (rond ok, triangle alerte, carré arrondi panne, anneau veille) */
.pp-voyant { display: inline-flex; align-items: center; gap: var(--espace-2); font: 600 15px/20px var(--font-texte); }
.pp-voyant::before { content: ""; flex: none; box-sizing: border-box; width: 11px; height: 11px; border-radius: var(--rayon-pilule); background: var(--encre-2); }
.pp-voyant--ok::before { background: var(--ok); }
.pp-voyant--alerte::before { width: 13px; height: 12px; border-radius: 2px; background: var(--alerte); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pp-voyant--panne::before { border-radius: 3px; background: var(--rouge); }
.pp-voyant--veille::before { background: transparent; border: 2.5px solid var(--encre-2); }

/* Pastille : une petite pilule */
.pp-pastille { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--rayon-pilule); background: var(--rouge); color: var(--sur-rouge); font: 700 11px/1 var(--font-texte); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pp-pastille--neutre { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.pp-pastille--famille { background: var(--famille); color: var(--encre); }

/* Bande sombre : rythme la page */
.pp-bande { display: grid; gap: var(--espace-6); padding: var(--espace-8); border-radius: var(--rayon-l); background: var(--nuit); color: var(--sur-nuit); }
.pp-bande > .pp-etiquette { color: var(--sur-nuit); }

/* Mesures : des cartes pastel, le chiffre en très grand */
.pp-mesures { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--espace-4); }
.pp-mesure { display: grid; gap: var(--espace-3); align-content: start; min-width: 0; padding: var(--espace-8) 28px 28px; border-radius: var(--rayon-l); background: var(--citron); color: var(--sur-citron); }
.pp-mesure .pp-etiquette { color: var(--sur-citron-2); }
.pp-mesure__valeur { margin: 0; font: 900 clamp(72px, 9vw, 128px)/.8 var(--font-affiche); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-mesure__unite { margin-left: .06em; font-size: .45em; }
.pp-mesure__pied { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-4); font: 500 14px/20px var(--font-texte); color: var(--sur-citron-2); font-variant-numeric: tabular-nums; }
.pp-mesure__pied b { font-weight: 700; color: var(--sur-citron); }
.pp-mesure .pp-jauge i { box-shadow: inset 0 0 0 2px var(--sur-citron); }
.pp-mesure .pp-jauge i.on { background: var(--sur-citron); }

/* Jauge : des pilules, allumées dans la couleur vive de la famille */
.pp-jauge { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; height: 16px; min-width: 0; }
.pp-jauge i { border-radius: var(--rayon-pilule); box-shadow: inset 0 0 0 2px var(--encre); }
.pp-jauge i.on { background: var(--famille-vif); }

/* Bloc */
.pp-bloc { display: grid; gap: var(--espace-6); align-content: start; min-width: 0; padding: var(--espace-8); border-radius: var(--rayon-l); background: var(--blanc); }
.pp-bloc--famille { background: var(--famille); }
.pp-bloc__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-3) var(--espace-4); }
.pp-bloc__titre { margin: 0; font: 900 44px/.9 var(--font-affiche); text-transform: uppercase; }

/* Barre du haut, à la Pipole : la marque en rouge, la nav, une pilule */
.pp-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-8); padding: var(--espace-4); font: 500 15px/20px var(--font-texte); }
.pp-barre__marque { font: 900 36px/1 var(--font-affiche); color: var(--rouge); text-transform: uppercase; text-decoration: none; }
.pp-barre nav { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-6); margin-left: auto; font-weight: 600; }
.pp-barre nav a { text-decoration: none; }
.pp-barre nav a:hover { text-decoration: underline; }
.pp-barre nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 3px; }

/* En-tête d'outil : le nom en énorme, l'objet qui déborde dessus */
.pp-entete { display: grid; gap: var(--espace-6); padding-block: var(--espace-8); }
.pp-entete__nom { position: relative; justify-self: start; max-width: 100%; margin: 0; font: 900 clamp(104px, 19vw, 240px)/.8 var(--font-affiche); letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.pp-entete__objet { position: absolute; top: -.26em; left: calc(100% - .4em); width: 1.22em; height: auto; pointer-events: none; }
.pp-entete__chapeau { max-width: min(var(--largeur-texte), 58%); margin: 0; font-size: 20px; line-height: 30px; }
.pp-entete__actions { display: flex; flex-wrap: wrap; gap: var(--espace-4); align-items: center; }

/* Sélecteur : une pilule à positions */
.pp-selecteur { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: var(--trait) solid var(--encre); border-radius: var(--rayon-pilule); }
.pp-selecteur button { -webkit-appearance: none; appearance: none; height: 34px; padding: 0 16px; border: 0; border-radius: var(--rayon-pilule); background: transparent; color: var(--encre); font: 600 14px/18px var(--font-texte); cursor: pointer; }
.pp-selecteur button:hover { background: var(--citron); color: var(--sur-citron); }
.pp-selecteur button[aria-pressed="true"] { background: var(--encre); color: var(--fond); }

/* Champ */
.pp-champ { display: grid; gap: var(--espace-2); min-width: 0; }
.pp-champ > label { padding-left: 4px; font: 700 12px/16px var(--font-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.pp-champ :is(input, select) { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; min-width: 0; height: var(--hauteur-touche); padding: 0 20px; border: var(--trait) solid var(--encre); border-radius: var(--rayon-pilule); background: var(--blanc); color: var(--encre); font: 500 16px/24px var(--font-texte); }
.pp-champ textarea { box-sizing: border-box; width: 100%; min-height: 110px; padding: 14px 20px; border: var(--trait) solid var(--encre); border-radius: var(--rayon-m); background: var(--blanc); color: var(--encre); font: 500 16px/24px var(--font-texte); }
.pp-champ :is(input, textarea)::placeholder { color: var(--encre-2); }
.pp-champ__aide { padding-left: 4px; font-size: 13px; line-height: 18px; color: var(--encre-2); }
.pp-champ--erreur :is(input, select, textarea) { border-color: var(--rouge); }
.pp-champ--erreur .pp-champ__aide { color: var(--rouge-texte); }

/* Tableau : chaque ligne est une pilule */
.pp-tableau-cadre { overflow-x: auto; min-width: 0; }
.pp-tableau { width: 100%; border-collapse: separate; border-spacing: 0 var(--espace-2); font-size: 15px; line-height: 22px; }
.pp-tableau th { padding: 0 16px; color: var(--encre-2); font: 700 12px/16px var(--font-texte); letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.pp-tableau td { padding: 12px 16px; background: var(--fond); vertical-align: middle; }
.pp-tableau td:first-child { border-radius: var(--rayon-pilule) 0 0 var(--rayon-pilule); padding-left: 20px; }
.pp-tableau td:last-child { border-radius: 0 var(--rayon-pilule) var(--rayon-pilule) 0; padding-right: 20px; }
.pp-tableau tbody tr:hover td { background: var(--citron); color: var(--sur-citron); }
.pp-tableau .pp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tuile d'outil */
.pp-tuile { position: relative; box-sizing: border-box; display: grid; gap: var(--espace-1); align-content: start; padding: 20px 22px 24px; border-radius: var(--rayon-l); background: var(--famille); color: var(--encre); text-decoration: none; }
.pp-tuile img { width: 100%; max-width: 170px; height: auto; justify-self: center; transition: transform 200ms ease-out; }
.pp-tuile:hover img { transform: rotate(-8deg) scale(1.08); }
.pp-tuile::after { content: "( → )"; position: absolute; top: 18px; right: 20px; font-weight: 700; }
.pp-tuile__nom { font: 900 30px/.9 var(--font-affiche); text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; }

/* État vide : la mascotte, et une phrase */
.pp-vide { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--espace-4); align-items: center; padding: var(--espace-4); border-radius: var(--rayon-m); background: var(--fond); }
.pp-vide img { width: 104px; height: 104px; }

/* Message : une pilule sombre qui flotte */
.pp-message { display: inline-flex; align-items: center; gap: var(--espace-4); max-width: min(560px, 100%); padding: 12px 14px 12px 22px; border-radius: var(--rayon-pilule); background: var(--nuit); color: var(--sur-nuit); box-shadow: var(--ombre-flottant); font: 600 15px/22px var(--font-texte); }
.pp-message .pp-voyant { color: inherit; }
.pp-message__action { -webkit-appearance: none; appearance: none; margin-left: auto; height: 34px; padding: 0 16px; border: 0; border-radius: var(--rayon-pilule); background: var(--rouge); color: var(--sur-rouge); font: 600 14px/18px var(--font-texte); cursor: pointer; }

/* Nom géant en pied de page, coupé par le bord :
   <svg class="pp-geant" viewBox="0 0 1000 250"><text x="0" y="290" textLength="1000" lengthAdjust="spacingAndGlyphs">PUPITRE</text></svg> */
.pp-geant { display: block; width: 100%; height: auto; margin-top: var(--espace-16); }
.pp-geant text { font: 900 360px var(--font-affiche); fill: var(--encre); }

@media (max-width: 640px) {
  .pp-entete__objet { top: -.38em; left: auto; right: -10px; width: .95em; }
  .pp-entete__chapeau { max-width: none; font-size: 18px; line-height: 27px; }
  .pp-bloc, .pp-bande { padding: var(--espace-6) 20px; }
}
@media (prefers-reduced-motion: reduce) { .pp-touche, .pp-tuile img { transition: none; } }