/* =====================================================================
   Studio weblory — JETONS
   Palette « établi », thèmes clair et sombre.

   CE FICHIER EST LE SEUL DU STUDIO OÙ UNE COULEUR LITTÉRALE A LE DROIT
   D'APPARAÎTRE. Partout ailleurs — studio.css, editor/src/vues.mjs,
   control-plane/src/backoffice/vues.mjs — on écrit var(--st-…). Un témoin
   (styles/studio/test/jetons.test.mjs) refuse la moindre entorse.

   Pourquoi « établi » : le Studio est le plan de travail d'un
   professionnel qui fabrique des sites POUR D'AUTRES. L'établi est en
   encre et en papier ; le laiton est le seul métal, et il ne sert qu'à
   désigner. La couleur vive appartient au site montré, jamais au meuble
   qui le porte. C'est ce qui permet à douze vitrines de sites clients de
   cohabiter sur un même écran sans se battre entre elles.

   Trois thèmes possibles :
     — défaut            : clair
     — prefers-color-scheme: dark  → sombre (sauf [data-theme="clair"])
     — [data-theme="sombre"|"clair"] → forçage explicite (avant-après,
       futur réglage d'atelier). Aucun JavaScript requis pour le défaut.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------- surfaces */
  --st-fond: #eceff1;           /* le fond de l'application */
  --st-fond-creux: #e2e7ea;     /* rails, zones en retrait, gouttière */
  --st-surface: #ffffff;        /* cartes, panneaux, tableaux */
  --st-surface-douce: #f4f6f7;  /* entêtes de tableau, zones calmes */
  --st-surface-active: #eef1f3; /* survol de ligne, onglet actif */

  /* ------------------------------------------------------------ encres */
  --st-encre: #14181c;          /* texte courant, titres */
  --st-encre-douce: #4c565e;    /* texte secondaire, prose d'aide */
  --st-encre-tenue: #5e6971;    /* méta, légendes, unités */
  --st-encre-inverse: #ffffff;  /* texte posé sur un aplat de laiton */

  /* ------------------------------------------------------------ filets */
  --st-filet: #d3d9dd;          /* séparations, contours de carte */
  --st-filet-fort: #7a848b;     /* contours de champ, bord d'appui */

  /* ------------------------------------------- laiton : le seul accent */
  --st-laiton: #7a5410;         /* liens, focus, état actif, chiffre clé */
  --st-laiton-vif: #8a5f12;     /* aplat du bouton principal */
  --st-laiton-voile: #f7efe1;   /* fond d'un état « en cours » */
  --st-laiton-filet: #c0a068;   /* contour d'un état « en cours » */

  /* ------------------------------------------------- verdict : en ligne */
  --st-vert: #16663c;
  --st-vert-voile: #e5f2ea;
  --st-vert-filet: #7cb595;

  /* ------------------------------------------------------ verdict : échec */
  --st-rouge: #ab2318;
  --st-rouge-voile: #fbeae8;
  --st-rouge-filet: #d9968d;

  /* ------------------------------------------------------------ ombres */
  --st-ombre-posee: 0 1px 1px rgba(20, 24, 28, 0.05), 0 1px 3px rgba(20, 24, 28, 0.05);
  --st-ombre-levee: 0 2px 4px rgba(20, 24, 28, 0.06), 0 8px 20px rgba(20, 24, 28, 0.09);
  --st-ombre-vitrine: inset 0 0 0 1px rgba(20, 24, 28, 0.07);

  /* ------------------------------------------------------ typographies */
  /* Titres : Fraunces 600 (OFL-1.1, auto-hébergée). Interface : Karla
     400/600 (OFL-1.1, auto-hébergée). Les replis sont déclarés en toutes
     lettres : une police qui n'arrive pas ne doit jamais faire tomber la
     page sur le serif par défaut du navigateur. */
  --st-police-titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --st-police-texte: "Karla", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --st-police-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Échelle : quinte mineure adoucie (1.18) autour d'un corps de 15 px.
     Un outil d'opérateur est DENSE : le corps est plus petit qu'un site,
     l'interligne plus généreux que la normale pour compenser. */
  --st-t-xs: 0.6875rem;   /* 11 px — unités, mentions légales */
  --st-t-s: 0.8125rem;    /* 13 px — méta, légendes */
  --st-t-m: 0.875rem;     /* 14 px — libellés, tableaux */
  --st-t-base: 0.9375rem; /* 15 px — corps */
  --st-t-l: 1.0625rem;    /* 17 px — sous-titres */
  --st-t-xl: 1.3125rem;   /* 21 px — titres de section */
  --st-t-2xl: 1.75rem;    /* 28 px — titre de page */
  --st-t-3xl: 2.25rem;    /* 36 px — chiffre clé */

  --st-interligne: 1.55;
  --st-interligne-titre: 1.15;

  /* ------------------------------------------------------- espacements */
  /* Grille de 4 px. Toute marge du Studio est un de ces huit pas. */
  --st-e1: 0.25rem;
  --st-e2: 0.5rem;
  --st-e3: 0.75rem;
  --st-e4: 1rem;
  --st-e5: 1.5rem;
  --st-e6: 2rem;
  --st-e7: 3rem;
  --st-e8: 4rem;

  /* ------------------------------------------------------------ formes */
  /* Rayons COURTS. Le Studio n'arrondit pas tout : une pilule signale un
     état, jamais un conteneur. */
  --st-r-s: 3px;
  --st-r-m: 6px;
  --st-r-l: 10px;
  --st-r-pilule: 999px;

  --st-focus-epaisseur: 2px;
  --st-focus-ecart: 2px;

  --st-duree: 120ms;
  --st-duree-longue: 220ms;

  --st-largeur-page: 82rem;
  --st-largeur-texte: 42rem;
  --st-largeur-rail: 22rem;
}

/* ---------------------------------------------------------------------
   THÈME SOMBRE
   Mêmes rôles, mêmes noms. Le laiton s'éclaircit (un laiton foncé sur un
   fond foncé ne se voit pas), l'encre s'adoucit (un blanc pur sur du
   noir vibre). Les voiles deviennent des teintes, pas des gris.
   ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --st-fond: #0f1315;
    --st-fond-creux: #090c0e;
    --st-surface: #181d20;
    --st-surface-douce: #1f252a;
    --st-surface-active: #242b30;

    --st-encre: #e6eaec;
    --st-encre-douce: #a9b3ba;
    --st-encre-tenue: #8e989f;
    --st-encre-inverse: #0f1315;

    --st-filet: #2b3237;
    --st-filet-fort: #626d75;

    --st-laiton: #e3b05a;
    --st-laiton-vif: #e3b05a;
    --st-laiton-voile: #2b2115;
    --st-laiton-filet: #7a5f2c;

    --st-vert: #6ad096;
    --st-vert-voile: #142720;
    --st-vert-filet: #44755a;

    --st-rouge: #ff9187;
    --st-rouge-voile: #2c1715;
    --st-rouge-filet: #8a4840;

    --st-ombre-posee: 0 1px 2px rgba(0, 0, 0, 0.5);
    --st-ombre-levee: 0 2px 6px rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.45);
    --st-ombre-vitrine: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="sombre"] {
  --st-fond: #0f1315;
  --st-fond-creux: #090c0e;
  --st-surface: #181d20;
  --st-surface-douce: #1f252a;
  --st-surface-active: #242b30;

  --st-encre: #e6eaec;
  --st-encre-douce: #a9b3ba;
  --st-encre-tenue: #8e989f;
  --st-encre-inverse: #0f1315;

  --st-filet: #2b3237;
  --st-filet-fort: #626d75;

  --st-laiton: #e3b05a;
  --st-laiton-vif: #e3b05a;
  --st-laiton-voile: #2b2115;
  --st-laiton-filet: #7a5f2c;

  --st-vert: #6ad096;
  --st-vert-voile: #142720;
  --st-vert-filet: #44755a;

  --st-rouge: #ff9187;
  --st-rouge-voile: #2c1715;
  --st-rouge-filet: #8a4840;

  --st-ombre-posee: 0 1px 2px rgba(0, 0, 0, 0.5);
  --st-ombre-levee: 0 2px 6px rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.45);
  --st-ombre-vitrine: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/studio/polices/fraunces/fraunces-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url("/studio/polices/karla/karla-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:600;font-display:swap;src:url("/studio/polices/karla/karla-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =====================================================================
   Studio weblory — COMPOSANTS
   Complément de `jetons.css`. AUCUNE couleur littérale ici : tout passe
   par var(--st-…). Le témoin styles/studio/test/jetons.test.mjs le
   vérifie sur ce fichier ET sur les deux vues qui l'utilisent.

   Préfixe `st-`. Trois exceptions volontaires — `.ok`, `.erreur`,
   `.barre` — conservées parce que control-plane/src/backoffice/routes.mjs
   les émet et qu'il est hors périmètre de ce lot (voir README).
   ===================================================================== */

/* ---------------------------------------------------------- fondations */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.st-corps {
  margin: 0;
  min-height: 100vh;
  background: var(--st-fond);
  color: var(--st-encre);
  font-family: var(--st-police-texte);
  font-size: var(--st-t-base);
  line-height: var(--st-interligne);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.st-corps h1,
.st-corps h2,
.st-corps h3,
.st-corps h4 {
  font-family: var(--st-police-titre);
  font-weight: 600;
  line-height: var(--st-interligne-titre);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.st-corps p {
  margin: 0;
}

.st-corps code,
.st-corps kbd,
.st-corps samp {
  font-family: var(--st-police-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* Un anneau de focus unique, visible sur toutes les surfaces, jamais
   supprimé. Il est posé en `outline` pour ne rien déplacer. */
.st-corps :focus-visible {
  outline: var(--st-focus-epaisseur) solid var(--st-laiton);
  outline-offset: var(--st-focus-ecart);
}

.st-corps ::selection {
  background: var(--st-laiton-voile);
  color: var(--st-encre);
}

.st-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- en-tête */

.st-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-e2) var(--st-e5);
  padding: var(--st-e3) var(--st-e5);
  background: var(--st-surface);
  border-bottom: 1px solid var(--st-filet);
  box-shadow: var(--st-ombre-posee);
}

.st-marque {
  display: inline-flex;
  align-items: baseline;
  gap: var(--st-e2);
  text-decoration: none;
  color: var(--st-encre);
  white-space: nowrap;
}

.st-marque__nom {
  font-family: var(--st-police-titre);
  font-weight: 600;
  font-size: var(--st-t-l);
  letter-spacing: -0.02em;
}

/* Le mot « studio » est le seul endroit du chrome où le laiton devient
   un aplat : c'est la signature, elle tient en dix pixels. */
.st-marque__role {
  font-size: var(--st-t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-laiton);
  border-left: 2px solid var(--st-laiton);
  padding-left: var(--st-e2);
}

.st-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-e1);
  margin-inline-start: auto;
}

.st-nav__lien {
  display: inline-block;
  padding: var(--st-e2) var(--st-e3);
  border-radius: var(--st-r-m);
  color: var(--st-encre-douce);
  font-size: var(--st-t-m);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--st-duree) ease, color var(--st-duree) ease;
}

.st-nav__lien:hover {
  background: var(--st-surface-active);
  color: var(--st-encre);
}

/* L'onglet courant est marqué DEUX fois : la couleur et le filet sous le
   mot. Une seule des deux suffirait à un œil valide ; les deux servent
   celui qui ne distingue pas le laiton du gris. */
.st-nav__lien[aria-current="page"] {
  color: var(--st-laiton);
  background: var(--st-laiton-voile);
  box-shadow: inset 0 -2px 0 var(--st-laiton);
}

/* ----------------------------------------------------------- structure */

.st-page {
  max-width: var(--st-largeur-page);
  margin: 0 auto;
  padding: var(--st-e6) var(--st-e5) var(--st-e8);
}

.st-page--etroite {
  max-width: 46rem;
}

.st-entete-page {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--st-e4);
  margin-bottom: var(--st-e6);
}

.st-entete-page__texte {
  min-width: 0;
}

.st-surtitre {
  display: block;
  font-size: var(--st-t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-encre-tenue);
  margin-bottom: var(--st-e2);
}

.st-titre-page {
  font-size: var(--st-t-2xl);
  overflow-wrap: anywhere;
}

.st-chapeau {
  margin-top: var(--st-e2);
  color: var(--st-encre-douce);
  max-width: var(--st-largeur-texte);
}

.st-section {
  margin-top: var(--st-e7);
}

.st-section__titre {
  font-size: var(--st-t-xl);
  margin-bottom: var(--st-e2);
}

.st-section__note {
  color: var(--st-encre-douce);
  font-size: var(--st-t-m);
  margin-bottom: var(--st-e4);
  max-width: var(--st-largeur-texte);
}

.st-carte {
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  box-shadow: var(--st-ombre-posee);
}

.st-carte__corps {
  padding: var(--st-e5);
}

.st-carte__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--st-e3);
  padding: var(--st-e4) var(--st-e5);
  border-bottom: 1px solid var(--st-filet);
}

.st-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--st-largeur-rail);
  gap: var(--st-e5);
  align-items: start;
}

@media (max-width: 62rem) {
  .st-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------- la vitrine des sites */
/* Le cœur du Studio : ce qu'on vient y voir, c'est le site du client.
   Il occupe donc le haut de la carte, en entier, sans chrome autour. */

.st-grille-sites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--st-e5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-site {
  display: flex;
  flex-direction: column;
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  box-shadow: var(--st-ombre-posee);
  overflow: hidden;
  transition: box-shadow var(--st-duree-longue) ease, transform var(--st-duree-longue) ease;
}

.st-site:hover,
.st-site:focus-within {
  box-shadow: var(--st-ombre-levee);
  transform: translateY(-1px);
}

/* Le cadre de vitrine. `--st-vitrine-zoom` fixe la réduction : le contenu
   interne est dimensionné à 1/zoom puis remis à l'échelle, si bien que le
   site est rendu dans un viewport de LARGEUR RÉELLE de bureau (≈ 4× la
   carte) avant d'être réduit. C'est ce qui donne une vraie page d'accueil
   et non une version mobile écrasée. */
.st-vitrine {
  --st-vitrine-zoom: 0.25;
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--st-surface-douce);
  border-bottom: 1px solid var(--st-filet);
  box-shadow: var(--st-ombre-vitrine);
  text-decoration: none;
  color: inherit;
}

.st-vitrine__capture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.st-vitrine__cadre {
  position: absolute;
  inset: 0;
  width: calc(100% / var(--st-vitrine-zoom));
  height: calc(100% / var(--st-vitrine-zoom));
  border: 0;
  transform: scale(var(--st-vitrine-zoom));
  transform-origin: 0 0;
  pointer-events: none;
  background: var(--st-surface);
}

/* Site sans capture : une PLANCHE dessinée, jamais une image cassée.
   Hachure au filet, initiales du client en gros, et la raison écrite. */
.st-vitrine__planche {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--st-e2);
  padding: var(--st-e4);
  text-align: center;
  background-color: var(--st-surface-douce);
  background-image: repeating-linear-gradient(
    135deg,
    var(--st-filet) 0,
    var(--st-filet) 1px,
    transparent 1px,
    transparent 11px
  );
}

.st-vitrine__initiales {
  font-family: var(--st-police-titre);
  font-size: var(--st-t-3xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--st-encre-tenue);
  background: var(--st-surface);
  border: 1px solid var(--st-filet-fort);
  border-radius: var(--st-r-m);
  padding: var(--st-e2) var(--st-e4);
  line-height: 1.1;
}

.st-vitrine__note {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
  background: var(--st-surface);
  border-radius: var(--st-r-s);
  padding: var(--st-e1) var(--st-e2);
  max-width: 100%;
}

.st-site__corps {
  display: flex;
  flex-direction: column;
  gap: var(--st-e2);
  padding: var(--st-e4) var(--st-e4) var(--st-e3);
  flex: 1 1 auto;
  min-width: 0;
}

/* Un nom de client peut être très long : il se coupe, sur deux lignes au
   plus, et n'écarte jamais la carte. */
.st-site__client {
  font-family: var(--st-police-titre);
  font-size: var(--st-t-l);
  font-weight: 600;
  line-height: var(--st-interligne-titre);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.st-site__client a {
  color: inherit;
  text-decoration: none;
}

.st-site__client a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-site__id {
  font-family: var(--st-police-mono);
  font-size: var(--st-t-s);
  color: var(--st-encre-tenue);
  overflow-wrap: anywhere;
}

.st-site__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-e2);
  padding: var(--st-e3) var(--st-e4);
  border-top: 1px solid var(--st-filet);
  background: var(--st-surface-douce);
}

/* --------------------------------------------------------- étiquettes */

.st-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-e1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-etiquette {
  display: inline-block;
  padding: 0.1rem var(--st-e2);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-s);
  background: var(--st-surface-douce);
  color: var(--st-encre-douce);
  font-size: var(--st-t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.st-etiquette--appuyee {
  border-color: var(--st-laiton-filet);
  background: var(--st-laiton-voile);
  color: var(--st-laiton);
}

/* ------------------------------------------------------------- états */
/* Un état se lit sans couleur : la FORME de la marque suffit — disque
   plein (en ligne), bague (brouillon), demi-disque (en cours), losange
   (échec), barre (suspendu). La couleur double l'information ; elle ne
   la porte jamais seule. Le mot est toujours écrit. */

.st-etat {
  display: inline-flex;
  align-items: center;
  gap: var(--st-e2);
  padding: 0.15rem var(--st-e3) 0.15rem var(--st-e2);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-pilule);
  background: var(--st-surface);
  color: var(--st-encre-douce);
  font-size: var(--st-t-s);
  font-weight: 600;
  white-space: nowrap;
}

.st-etat__marque {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--st-encre-tenue);
}

.st-etat--publie {
  border-color: var(--st-vert-filet);
  background: var(--st-vert-voile);
  color: var(--st-vert);
}

.st-etat--publie .st-etat__marque {
  background: var(--st-vert);
}

.st-etat--brouillon {
  border-color: var(--st-filet-fort);
  background: var(--st-surface);
  color: var(--st-encre-douce);
}

/* Bague : le disque est creux tant que rien n'est parti en ligne. */
.st-etat--brouillon .st-etat__marque {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--st-encre-tenue);
}

.st-etat--encours {
  border-color: var(--st-laiton-filet);
  background: var(--st-laiton-voile);
  color: var(--st-laiton);
}

/* Demi-disque : la moitié du chemin est faite. */
.st-etat--encours .st-etat__marque {
  background: linear-gradient(90deg, var(--st-laiton) 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 1.5px var(--st-laiton);
}

.st-etat--echec {
  border-color: var(--st-rouge-filet);
  background: var(--st-rouge-voile);
  color: var(--st-rouge);
}

/* Losange : la seule marque anguleuse de la série. */
.st-etat--echec .st-etat__marque {
  border-radius: 1px;
  background: var(--st-rouge);
  transform: rotate(45deg);
}

.st-etat--suspendu {
  border-color: var(--st-filet-fort);
  background: var(--st-surface-douce);
  color: var(--st-encre-douce);
}

/* Barre : rien ne bouge. */
.st-etat--suspendu .st-etat__marque {
  border-radius: 1px;
  height: 0.25rem;
  background: var(--st-encre-tenue);
}

/* ----------------------------------------------------------- boutons */

.st-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-e2);
}

.st-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-e2);
  min-height: 2.5rem;
  padding: var(--st-e2) var(--st-e4);
  border: 1px solid var(--st-filet-fort);
  border-radius: var(--st-r-m);
  background: var(--st-surface);
  color: var(--st-encre);
  font: inherit;
  font-size: var(--st-t-m);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--st-duree) ease, border-color var(--st-duree) ease,
    box-shadow var(--st-duree) ease;
}

.st-bouton:hover {
  background: var(--st-surface-active);
  border-color: var(--st-encre-tenue);
}

.st-bouton:active {
  box-shadow: inset 0 1px 2px var(--st-filet);
}

.st-bouton--principal {
  background: var(--st-laiton-vif);
  border-color: var(--st-laiton-vif);
  color: var(--st-encre-inverse);
}

.st-bouton--principal:hover {
  background: var(--st-laiton);
  border-color: var(--st-laiton);
}

.st-bouton--discret {
  border-color: transparent;
  background: transparent;
  color: var(--st-encre-douce);
}

.st-bouton--discret:hover {
  background: var(--st-surface-active);
  border-color: var(--st-filet);
  color: var(--st-encre);
}

.st-bouton--danger {
  border-color: var(--st-rouge-filet);
  background: var(--st-rouge-voile);
  color: var(--st-rouge);
}

.st-bouton--danger:hover {
  border-color: var(--st-rouge);
  background: var(--st-rouge-voile);
}

.st-bouton--menu {
  min-height: 2.125rem;
  padding: var(--st-e1) var(--st-e3);
  font-size: var(--st-t-s);
}

/* Sur un écran tactile, la cible ne descend jamais sous 44 px : c'est la
   règle, pas une option — l'opérateur est parfois debout chez un client.
   EDI-03 y ajoute les LIGNES de la carte et les têtes de dépliants : ce
   sont désormais les cibles que le client touche le plus souvent, et elles
   montent à 46 px (borne de la maquette). Le critère est le POINTEUR, pas
   la largeur : une tablette est large et se touche quand même. */
@media (pointer: coarse) {
  .st-bouton {
    min-height: 2.75rem;
  }

  .st-bouton--menu {
    min-height: 2.5rem;
  }

  .st-ligne,
  .st-depliant__tete {
    min-height: 46px;
  }
}

.st-lien {
  color: var(--st-laiton);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.st-lien:hover {
  text-decoration-thickness: 2px;
}

.st-forme-en-ligne {
  display: inline;
}

/* --------------------------------------------------------- formulaires */

.st-champ {
  margin: var(--st-e4) 0;
  min-width: 0;
}

.st-champ__label,
.st-champ label {
  display: block;
  font-weight: 600;
  font-size: var(--st-t-m);
  color: var(--st-encre);
  margin-bottom: var(--st-e1);
}

.st-champ__requis {
  color: var(--st-laiton);
  font-weight: 700;
}

.st-aide {
  color: var(--st-encre-douce);
  font-size: var(--st-t-s);
  margin: var(--st-e1) 0;
  max-width: var(--st-largeur-texte);
}

.st-exemple {
  color: var(--st-encre-tenue);
  font-size: var(--st-t-s);
  font-style: italic;
  margin: var(--st-e1) 0;
}

/* Le mot « bornes » est le contrat du témoin editor/test/parcours. */
.st-champ__bornes {
  color: var(--st-encre-tenue);
  font-size: var(--st-t-xs);
  margin: var(--st-e1) 0 0;
}

.st-corps input[type="text"],
.st-corps input[type="email"],
.st-corps input[type="number"],
.st-corps input[type="file"],
.st-corps select,
.st-corps textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--st-e2) var(--st-e3);
  font: inherit;
  font-size: var(--st-t-base);
  color: var(--st-encre);
  background: var(--st-surface);
  border: 1px solid var(--st-filet-fort);
  border-radius: var(--st-r-m);
  transition: border-color var(--st-duree) ease, box-shadow var(--st-duree) ease;
}

.st-corps input[type="text"]:hover,
.st-corps input[type="email"]:hover,
.st-corps input[type="number"]:hover,
.st-corps select:hover,
.st-corps textarea:hover {
  border-color: var(--st-encre-tenue);
}

.st-corps textarea {
  min-height: 5rem;
  resize: vertical;
}

.st-corps textarea.st-json {
  font-family: var(--st-police-mono);
  font-size: var(--st-t-s);
  line-height: 1.5;
  min-height: 22rem;
  background: var(--st-fond-creux);
  tab-size: 2;
}

.st-corps output {
  display: block;
  font-size: var(--st-t-xs);
  color: var(--st-encre-tenue);
  text-align: right;
  margin-top: var(--st-e1);
}

.st-groupe {
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-m);
  background: var(--st-surface);
  margin: var(--st-e5) 0;
  padding: var(--st-e2) var(--st-e4) var(--st-e4);
  min-width: 0;
}

.st-groupe > legend {
  padding: 0 var(--st-e2);
  margin-inline-start: calc(var(--st-e2) * -1);
}

.st-groupe > legend h2,
.st-groupe > legend h3,
.st-groupe > legend h4 {
  font-size: var(--st-t-l);
  margin: 0;
}

.st-lecture-seule {
  color: var(--st-encre-douce);
  font-size: var(--st-t-m);
  background: var(--st-surface-douce);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-m);
  padding: var(--st-e2) var(--st-e3);
  margin: var(--st-e1) 0;
}

/* ----------------------------------------------------------- messages */

.st-message,
.st-corps .ok,
.st-corps .erreur {
  display: block;
  border: 1px solid var(--st-filet);
  border-left-width: 3px;
  border-radius: var(--st-r-m);
  background: var(--st-surface);
  color: var(--st-encre);
  padding: var(--st-e3) var(--st-e4);
  margin: var(--st-e4) 0;
  font-size: var(--st-t-base);
}

.st-message--ok,
.st-corps .ok {
  border-color: var(--st-vert-filet);
  border-left-color: var(--st-vert);
  background: var(--st-vert-voile);
}

.st-message--erreur,
.st-corps .erreur {
  border-color: var(--st-rouge-filet);
  border-left-color: var(--st-rouge);
  background: var(--st-rouge-voile);
  white-space: pre-wrap;
}

.st-message--info {
  border-color: var(--st-laiton-filet);
  border-left-color: var(--st-laiton);
  background: var(--st-laiton-voile);
}

.st-message strong {
  font-weight: 700;
}

.st-message ul {
  margin: var(--st-e2) 0 0;
  padding-inline-start: var(--st-e5);
}

/* --------------------------------------------------------- états vides */

.st-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--st-e2);
  text-align: center;
  padding: var(--st-e7) var(--st-e5);
  background: var(--st-surface);
  border: 1px dashed var(--st-filet-fort);
  border-radius: var(--st-r-l);
  color: var(--st-encre-douce);
}

.st-vide__titre {
  font-family: var(--st-police-titre);
  font-size: var(--st-t-xl);
  color: var(--st-encre);
}

.st-vide__aide {
  max-width: 34rem;
  font-size: var(--st-t-m);
}

/* ---------------------------------------------------------- tableaux */

.st-tableau-defilant {
  overflow-x: auto;
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  background: var(--st-surface);
  box-shadow: var(--st-ombre-posee);
}

.st-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--st-t-m);
}

.st-table caption {
  text-align: left;
  padding: var(--st-e3) var(--st-e4);
  color: var(--st-encre-douce);
  font-size: var(--st-t-s);
}

.st-table th,
.st-table td {
  padding: var(--st-e3) var(--st-e4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--st-filet);
}

.st-table thead th {
  position: sticky;
  top: 0;
  background: var(--st-surface-douce);
  color: var(--st-encre);
  font-size: var(--st-t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--st-filet-fort);
}

.st-table tbody tr:last-child th,
.st-table tbody tr:last-child td {
  border-bottom: 0;
}

.st-table tbody tr:hover {
  background: var(--st-surface-active);
}

.st-table .st-nombre,
.st-corps td.nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Un identifiant n'est pas une quantité : il ne s'aligne pas à droite,
   il se compare caractère par caractère depuis le début. */
.st-table .st-identifiant {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--st-encre-douce);
}

.st-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-e1);
}

.st-table__vide {
  color: var(--st-encre-douce);
  font-style: italic;
}

/* ------------------------------------------------ chiffres et jauges */

.st-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--st-e3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Une seconde rangée de chiffres sous la première, dans la même section. */
.st-chiffres--suite {
  margin-top: var(--st-e5);
}

.st-chiffre {
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-m);
  padding: var(--st-e4);
  box-shadow: var(--st-ombre-posee);
}

.st-chiffre__valeur {
  display: block;
  font-family: var(--st-police-titre);
  font-size: var(--st-t-2xl);
  font-weight: 600;
  line-height: 1.05;
  color: var(--st-encre);
  font-variant-numeric: tabular-nums;
}

.st-chiffre__libelle {
  display: block;
  margin-top: var(--st-e1);
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
}

.st-chiffre--alerte .st-chiffre__valeur {
  color: var(--st-rouge);
}

.st-chiffre--reussite .st-chiffre__valeur {
  color: var(--st-vert);
}

/* Les barres de croissance. `.barre` sans préfixe : c'est le contrat du
   témoin control-plane/test/kpis.test.mjs, qui vérifie que les barres
   restent du CSS pur (aucune bibliothèque de graphes). */
.st-jauge {
  display: block;
  min-width: 10rem;
}

.st-jauge .barre {
  display: inline-block;
  height: 0.6rem;
  border-radius: var(--st-r-s);
  background: var(--st-laiton);
  vertical-align: middle;
}

.st-jauge .barre-sites {
  background: var(--st-encre-tenue);
}

/* ------------------------------------------ l'atelier : formulaire + vue */
/* L'écran de l'Éditeur. À gauche ce qu'on change, à droite ce que ça
   donne. L'aperçu SUIT le défilement : le client ne doit jamais avoir à
   remonter pour savoir à quoi ressemble son site. */

.st-atelier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: var(--st-e5);
  align-items: start;
}

.st-atelier__travail {
  min-width: 0;
}

.st-atelier__vue {
  position: sticky;
  top: calc(var(--st-e8) + var(--st-e2));
  min-width: 0;
}

@media (max-width: 64rem) {
  .st-atelier {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sur mobile l'aperçu passe EN PREMIER et cesse de coller : on veut
     voir son site en arrivant, puis descendre dans le formulaire. */
  .st-atelier__vue {
    position: static;
    order: -1;
  }
}

.st-apercu {
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  box-shadow: var(--st-ombre-posee);
  overflow: hidden;
}

.st-apercu__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-e2);
  padding: var(--st-e3) var(--st-e4);
  border-bottom: 1px solid var(--st-filet);
  background: var(--st-surface-douce);
}

.st-apercu__titre {
  font-family: var(--st-police-titre);
  font-size: var(--st-t-l);
  font-weight: 600;
}

.st-apercu .st-vitrine {
  --st-vitrine-zoom: 0.5;
  border-bottom: 0;
  border-top: 0;
}

.st-apercu__pied {
  display: flex;
  flex-direction: column;
  gap: var(--st-e2);
  padding: var(--st-e4);
  border-top: 1px solid var(--st-filet);
}

.st-apercu__note {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
}

/* Barre d'actions collée en bas de la colonne de travail : « Publier »
   ne doit jamais être à trois écrans de la modification qu'on vient de
   faire. */
.st-actions-collantes {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-e2);
  margin-top: var(--st-e5);
  padding: var(--st-e3) var(--st-e4);
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  box-shadow: var(--st-ombre-levee);
}

.st-actions-collantes__etat {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
  margin: 0;
}

.st-actions-collantes__etat p {
  margin: 0;
}

/* L'ENVOI D'UNE PHOTO EN COURS (EDI-04, issue 295).
   Le seul état « en cours » de l'espace client, et il se dit en laiton —
   jamais en vert ni en rouge : rien n'est encore réussi ni échoué. Vide, le
   paragraphe disparaît : une ligne blanche permanente dans une barre
   collante coûte une ligne de hauteur sur un téléphone, et ne dit rien. */
.st-etat-envoi {
  color: var(--st-laiton);
  font-weight: 600;
}

.st-etat-envoi:empty {
  display: none;
}

/* Sur un téléphone, cette barre reste collée en bas de l'écran pendant
   toute la saisie : elle ne doit pas manger le tiers de la page. Les
   boutons passent devant, l'état se réduit à deux lignes au plus. */
@media (max-width: 40rem) {
  .st-actions-collantes {
    padding: var(--st-e2) var(--st-e3);
    gap: var(--st-e1);
  }

  .st-actions-collantes .st-boutons {
    order: -1;
    width: 100%;
  }

  .st-actions-collantes .st-bouton {
    flex: 1 1 8rem;
  }

  .st-actions-collantes__etat {
    flex: 1 1 100%;
    font-size: var(--st-t-xs);
  }

  .st-actions-collantes__etat p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ------------------------------------------------------------- divers */

.st-liste-nue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--st-e2);
}

.st-paire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-e1) var(--st-e3);
  justify-content: space-between;
  padding: var(--st-e2) 0;
  border-bottom: 1px solid var(--st-filet);
  font-size: var(--st-t-m);
}

.st-paire:last-child {
  border-bottom: 0;
}

.st-paire__cle {
  color: var(--st-encre-douce);
}

.st-paire__valeur {
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: right;
}

.st-vignette {
  display: block;
  width: 6rem;
  height: 4.5rem;
  object-fit: cover;
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-s);
  background: var(--st-surface-douce);
}

.st-pied {
  max-width: var(--st-largeur-page);
  margin: 0 auto;
  padding: var(--st-e5);
  border-top: 1px solid var(--st-filet);
  color: var(--st-encre-tenue);
  font-size: var(--st-t-s);
}

/* ------------------------------------------------------- petits écrans */

@media (max-width: 40rem) {
  .st-entete {
    padding: var(--st-e3) var(--st-e4);
  }

  .st-page {
    padding: var(--st-e5) var(--st-e4) var(--st-e7);
  }

  .st-nav {
    margin-inline-start: 0;
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--st-e1);
  }

  .st-titre-page {
    font-size: var(--st-t-xl);
  }

  .st-grille-sites {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-carte__corps,
  .st-carte__entete {
    padding: var(--st-e4);
  }
}

/* --------------------------------------------------- mouvement réduit */
/* Aucune animation n'est porteuse de sens dans le Studio : les couper
   n'enlève rien. On les coupe donc franchement. */

@media (prefers-reduced-motion: reduce) {
  .st-corps *,
  .st-corps *::before,
  .st-corps *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .st-site:hover,
  .st-site:focus-within {
    transform: none;
  }
}

/* ---------------------------------------------------------- impression */

@media print {
  .st-entete,
  .st-actions-collantes,
  .st-boutons {
    display: none;
  }

  .st-corps {
    background: var(--st-surface);
  }

  .st-site,
  .st-carte {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ═══════════════════════════ EDI-03 : la carte du site et ses écrans ═══ */
/* L'éditeur ne se déroule plus, il se parcourt. Deux pièces seulement : la
   CARTE (« que voulez-vous modifier ? »), qui ne porte aucun champ, et
   l'ÉCRAN, qui n'en porte qu'une poignée. Tout ce qui suit sert l'une ou
   l'autre — rien ici n'est décoratif, et les cibles tactiles descendent
   jusqu'à 46 px minimum sur téléphone (bloc final). */

/* --- la barre du site, en haut des deux écrans --- */
/* Le client vient chez lui, pas chez nous : la première ligne dit SON nom,
   SON adresse, et où en est SON site. Les deux boutons y vivent parce que
   « publier » ne doit jamais être à trois écrans de la modification. */

.st-barre-site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-e2) var(--st-e4);
  padding: var(--st-e3) var(--st-e5);
  background: var(--st-surface);
  border-bottom: 1px solid var(--st-filet);
}

.st-barre-site__identite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 12rem;
  min-width: 0;
}

.st-barre-site__nom {
  font-family: var(--st-police-titre);
  font-size: var(--st-t-l);
  line-height: var(--st-interligne-titre);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.st-barre-site__adresse {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.st-barre-site__adresse:hover,
.st-barre-site__adresse:focus-visible {
  color: var(--st-laiton-vif);
  text-decoration: underline;
}

.st-barre-site__compte {
  font-size: var(--st-t-xs);
  color: var(--st-encre-tenue);
  overflow-wrap: anywhere;
}

.st-barre-site__etat {
  margin: 0;
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
}

.st-barre-site__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-e2);
}

/* --- un groupe de la carte : « Vos pages », « Votre établissement » --- */

.st-carte-site {
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  overflow: hidden;
  margin-bottom: var(--st-e5);
}

.st-carte-site__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--st-e1) var(--st-e3);
  padding: var(--st-e3) var(--st-e5);
  background: var(--st-surface-douce);
  border-bottom: 1px solid var(--st-filet);
}

.st-carte-site__titre {
  margin: 0;
  font-family: var(--st-police-texte);
  font-size: var(--st-t-m);
  font-weight: 700;
}

.st-carte-site__resume {
  margin: 0;
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
}

/* --- une page qui se déplie --- */
/* Ce repli-là ne cache que des LIENS : les champs, eux, ne sont même pas
   dans le document. C'est toute la différence avec un <details> posé sur
   cent onze champs, qui aurait gardé le poids en cachant le rouleau. */

.st-depliant {
  border-bottom: 1px solid var(--st-filet);
}

.st-depliant:last-child {
  border-bottom: 0;
}

.st-depliant__tete {
  display: flex;
  align-items: center;
  gap: var(--st-e3);
  padding: var(--st-e3) var(--st-e5);
  min-height: 3rem;
  cursor: pointer;
  list-style: none;
}

.st-depliant__tete::-webkit-details-marker {
  display: none;
}

.st-depliant__tete::before {
  content: "▸";
  color: var(--st-encre-tenue);
  transition: transform var(--st-duree) ease;
}

.st-depliant[open] > .st-depliant__tete::before {
  content: "▾";
}

.st-depliant[open] > .st-depliant__tete {
  background: var(--st-surface-active);
  border-bottom: 1px solid var(--st-filet);
}

.st-depliant__tete:hover {
  background: var(--st-surface-active);
}

.st-depliant__tete:focus-visible {
  outline: var(--st-focus-epaisseur) solid var(--st-laiton-vif);
  outline-offset: calc(-1 * var(--st-focus-epaisseur));
}

.st-depliant__titre {
  font-size: var(--st-t-base);
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
}

.st-depliant__resume {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
}

/* --- une ligne de la carte --- */
/* Elle se reconnaît à son CONTENU : le titre dit de quoi il s'agit,
   l'extrait dit ce qu'elle contient, le compte dit dans quoi on s'engage. */

.st-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-ligne {
  display: flex;
  align-items: center;
  gap: var(--st-e3);
  padding: var(--st-e3) var(--st-e5);
  min-height: 3.25rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--st-filet);
}

.st-lignes > li:last-child .st-ligne {
  border-bottom: 0;
}

.st-ligne:hover {
  background: var(--st-surface-active);
}

.st-ligne:focus-visible {
  outline: var(--st-focus-epaisseur) solid var(--st-laiton-vif);
  outline-offset: calc(-1 * var(--st-focus-epaisseur));
}

.st-ligne--modifiee {
  background: var(--st-laiton-voile);
}

.st-ligne__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.st-ligne__titre {
  font-size: var(--st-t-base);
  font-weight: 500;
}

.st-ligne__extrait {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
  overflow-wrap: anywhere;
}

.st-ligne__compte {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.st-ligne__chevron {
  color: var(--st-encre-tenue);
  font-size: var(--st-t-l);
  line-height: 1;
}

/* Les pastilles d'une ligne : « modifié, pas publié », « à compléter ». */

.st-jeton {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--st-e2);
  border-radius: var(--st-r-pilule);
  font-size: var(--st-t-xs);
  font-weight: 700;
  white-space: nowrap;
}

.st-jeton--brouillon {
  background: var(--st-surface);
  border: 1px solid var(--st-laiton-filet);
  color: var(--st-laiton-vif);
}

.st-jeton--manque {
  background: var(--st-rouge-voile);
  border: 1px solid var(--st-rouge-filet);
  color: var(--st-rouge);
}

.st-jeton--publie {
  background: var(--st-vert-voile);
  border: 1px solid var(--st-vert-filet);
  color: var(--st-vert);
}

/* --- le rappel « une modification n'est pas encore publiée » --- */

.st-rappel {
  padding: var(--st-e3) var(--st-e4);
  background: var(--st-laiton-voile);
  border: 1px solid var(--st-laiton-filet);
  border-radius: var(--st-r-l);
  font-size: var(--st-t-s);
  line-height: var(--st-interligne);
}

.st-rappel p {
  margin: 0;
}

/* --- l'écran de saisie --- */

.st-retour {
  margin: 0 0 var(--st-e3);
  font-size: var(--st-t-m);
}

.st-formulaire {
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  border-radius: var(--st-r-l);
  padding: var(--st-e5);
}

/* La navigation frère-à-frère, sous le formulaire : « ← Vos coordonnées ·
   2 sur 4 · Votre marque → ». Ce sont des SOUMISSIONS, pas des liens :
   changer de section enregistre d'abord. */

.st-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-e2);
  margin-top: var(--st-e4);
}

.st-navigation__rang {
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
  text-align: center;
}

.st-navigation__vide {
  flex: 0 0 auto;
}

/* --- « où cela apparaît » : le plan de la page, pas une image inventée --- */

.st-plan {
  padding: var(--st-e4);
  background: var(--st-fond-creux);
}

.st-plan__page {
  margin: 0 0 var(--st-e3);
  font-size: var(--st-t-s);
  font-weight: 700;
  color: var(--st-encre-douce);
}

.st-plan__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--st-e2);
  counter-reset: section;
}

.st-plan__section {
  padding: var(--st-e2) var(--st-e3);
  border-radius: var(--st-r-s);
  background: var(--st-surface);
  border: 1px solid var(--st-filet);
  font-size: var(--st-t-s);
  color: var(--st-encre-douce);
}

.st-plan__section--courante {
  border: 2px solid var(--st-laiton-filet);
  background: var(--st-laiton-voile);
  color: var(--st-encre);
  font-weight: 700;
}

/* --- petits écrans : le doigt, pas la souris --- */
/* Le commanditaire a signalé deux défauts mobiles avant celui-ci. Les
   cibles tactiles ne descendent pas sous 46 px : c'est la borne de la
   maquette, et elle vaut pour tout ce qu'on touche ici. */

@media (max-width: 40rem) {
  .st-barre-site {
    padding: var(--st-e3) var(--st-e4);
  }

  .st-barre-site__actions {
    width: 100%;
  }

  .st-barre-site__actions .st-bouton {
    flex: 1 1 8rem;
    min-height: 46px;
  }

  .st-carte-site__entete,
  .st-ligne,
  .st-depliant__tete {
    padding-inline: var(--st-e4);
  }

  .st-ligne,
  .st-depliant__tete {
    min-height: 46px;
  }

  /* Le compte de champs passe à la ligne de l'extrait plutôt que de
     rétrécir le titre à trois mots. */
  .st-ligne {
    flex-wrap: wrap;
  }

  .st-ligne__texte {
    flex: 1 1 100%;
  }

  .st-formulaire {
    padding: var(--st-e4);
  }

  .st-navigation .st-bouton {
    min-height: 46px;
  }

  /* SUR UN TÉLÉPHONE, LA CARTE PASSE DEVANT L'APERÇU. Le réglage général
     (≤ 64rem) fait remonter la colonne d'aperçu : c'est juste sur une
     tablette, où l'on veut voir son site en arrivant. Sur un téléphone,
     cela met un site entier chargé dans un cadre AVANT la seule chose
     qu'on est venu faire — choisir ce qu'on modifie. On rend donc l'ordre
     naturel, et le cadre lui-même disparaît : l'aperçu s'ouvre en plein
     écran par le lien, comme le dit la maquette. Le fait qu'une
     modification attende, lui, reste visible en haut dans la pastille de
     la barre du site. */
  .st-atelier__vue {
    order: 0;
  }

  .st-apercu .st-vitrine {
    display: none;
  }
}