/* Site vitrine. Feuille de style de L'EDITEUR uniquement : le site public
   produit porte son propre style, ecrit dans src/lib/rendu-site.js, et ne
   charge aucun fichier d'ici.
   Palette distincte des autres outils FastSolve : violet pour le CRM, le
   calculateur, le tableau de bord et la facturation, bleu pour le back-office,
   vert profond ici. */

:root {
  --papier: #f1f6f4;
  --papier-carte: #ffffff;
  --papier-creux: #e6eeeb;
  --encre: #16241f;
  --encre-douce: #56665f;
  --encre-tenue: #8a9691;
  --accent: #0f766e;
  --accent-clair: #d9ede9;
  --accent-sombre: #0a544e;
  --trait: #d5e2dd;
  --succes: #1d6b3f;
  --succes-fond: #e3f2e8;
  --alerte: #9a3412;
  --alerte-fond: #fbeae2;
  --ombre: 0 1px 2px rgba(22, 36, 31, 0.04), 0 8px 24px rgba(22, 36, 31, 0.07);
  --rayon: 12px;
  --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--encre-douce);
  margin: 0 0 1rem;
  font-weight: 600;
}

.sr-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Banniere de demonstration -------------------------------------------- */

.banniere-demo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  background: var(--accent-sombre);
  color: #eef7f6;
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
}

.pastille {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* --- Entete --------------------------------------------------------------- */

.entete {
  background: var(--papier-carte);
  border-bottom: 1px solid var(--trait);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete__interieur {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.marque {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--encre);
  line-height: 1.15;
}

.marque__nom {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.marque__signature {
  font-size: 0.72rem;
  color: var(--encre-tenue);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-right: auto;
}

.lien-nav {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--encre-douce);
  font-size: 0.9rem;
  white-space: nowrap;
}

.lien-nav:hover {
  background: var(--papier-creux);
  color: var(--encre);
}

.lien-nav--actif {
  background: var(--accent-clair);
  color: var(--accent-sombre);
  font-weight: 600;
}

.lien-nav--discret {
  color: var(--encre-tenue);
  font-size: 0.85rem;
}

/* --- Structure ------------------------------------------------------------ */

.contenu {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.corps--centre .contenu {
  max-width: 420px;
  padding-top: 4rem;
}

.sous-titre {
  color: var(--encre-douce);
  margin: 0.35rem 0 1.5rem;
  font-size: 0.92rem;
}

.pied {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--encre-tenue);
  font-size: 0.8rem;
  display: flex;
  gap: 0.5rem;
}

/* --- Cartes --------------------------------------------------------------- */

.carte {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.4rem;
  box-shadow: var(--ombre);
  margin-bottom: 1.25rem;
}

.carte--connexion {
  padding: 2rem;
}

/* --- Formulaires ---------------------------------------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.champ__intitule {
  font-size: 0.82rem;
  color: var(--encre-douce);
  font-weight: 550;
}

.champ__aide {
  font-size: 0.78rem;
  color: var(--encre-tenue);
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  width: 100%;
  min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

legend {
  font-size: 0.82rem;
  color: var(--encre-douce);
  font-weight: 550;
  padding: 0;
  margin-bottom: 0.3rem;
}

.aide {
  font-size: 0.85rem;
  color: var(--encre-tenue);
  margin: 0 0 0.9rem;
}

/* --- Boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.bouton--principal {
  background: var(--accent);
  color: #ffffff;
}

.bouton--principal:hover {
  background: var(--accent-sombre);
}

.bouton--discret {
  background: var(--papier-carte);
  border-color: var(--trait);
  color: var(--encre);
}

.bouton--discret:hover {
  border-color: var(--accent);
  color: var(--accent-sombre);
}

.bouton--danger {
  background: transparent;
  color: var(--alerte);
  border-color: transparent;
  padding-left: 0;
}

.bouton--danger:hover {
  text-decoration: underline;
}

.barre-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.barre-actions--fin {
  justify-content: flex-end;
}

.formulaire-suppression {
  margin-top: 2rem;
}

/* --- Tableaux ------------------------------------------------------------- */

.tableau-defilant {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: 10px;
  margin-bottom: 1.25rem;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--papier-carte);
}

.tableau td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
}

.tableau tbody tr:last-child td {
  border-bottom: none;
}

.tableau tbody tr:hover {
  background: var(--papier-creux);
}

/* --- Etiquettes de statut -------------------------------------------------- */

.etiquette {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--papier-creux);
  color: var(--encre-douce);
  white-space: nowrap;
}

/* --- Alertes et vides ------------------------------------------------------ */

.alerte {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.alerte--succes {
  background: var(--succes-fond);
  color: var(--succes);
}

.alerte--erreur {
  background: var(--alerte-fond);
  color: var(--alerte);
}

.vide {
  background: var(--papier-carte);
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--encre-douce);
}

.vide--discret {
  padding: 1rem;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--encre-tenue);
}

.vide--ligne {
  padding: 1.5rem !important;
  text-align: center;
  color: var(--encre-douce);
}

.discret {
  color: var(--encre-tenue);
  font-size: 0.9rem;
}

/* --- Blocs de contenu ------------------------------------------------------ */

.bloc {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem 1.35rem 1.4rem;
  margin-bottom: 1.5rem;
}

.bloc > h2 {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--encre);
  font-weight: 650;
  margin-bottom: 0.9rem;
}

/* --- Accueil sans donnees et jeux d'exemple -------------------------------- */

.accueil-vide {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 2rem 1.75rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

.accueil-vide h1 {
  margin-bottom: 0.5rem;
}

.accueil-vide p {
  color: var(--encre-douce);
  margin: 0 auto;
  max-width: 32rem;
}

.jeux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.jeux form {
  margin: 0;
  display: flex;
}

.jeu {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.1rem 1.15rem;
  font: inherit;
  color: var(--encre);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.jeu strong {
  font-size: 1rem;
  font-weight: 650;
}

.jeu span {
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.jeu:hover {
  border-color: var(--accent);
  box-shadow: var(--ombre);
  transform: translateY(-1px);
}

.lien-discret {
  color: var(--encre-tenue);
  font-size: 0.9rem;
  text-decoration: none;
}

.lien-discret:hover {
  color: var(--encre);
}

/* Installation de l'application */

.lien-nav--installer {
  border: 1px solid var(--accent);
  background: var(--accent-clair);
  color: var(--accent-sombre);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}

.lien-nav--installer:hover { background: var(--accent); color: #ffffff; }
.lien-nav--installer[disabled] { opacity: 0.6; cursor: default; }

.aide-installation {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem 1rem;
  color: var(--encre-douce);
  font-size: 0.88rem;
}

.aide-installation summary { cursor: pointer; color: var(--accent-sombre); font-weight: 550; }
.aide-installation ul { margin: 0.6rem 0 0; padding-left: 1.1rem; line-height: 1.6; }
.aide-installation li { margin-bottom: 0.35rem; }
.aide-installation[hidden] { display: none; }

.banniere-installation {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  background: var(--accent-clair);
  border-bottom: 1px solid var(--trait);
}

.banniere-installation__texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-right: auto;
  min-width: 240px;
}

.banniere-installation__texte strong { color: var(--accent-sombre); }
.banniere-installation__texte span { color: var(--encre-douce); font-size: 0.88rem; }

.banniere-installation__plus-tard {
  background: none;
  border: 0;
  color: var(--encre-douce);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: auto;
}

.note-installation {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--papier-creux);
  border-radius: 8px;
  color: var(--encre-douce);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ===========================================================================
   Back-office
   ===========================================================================
   Ces composants sont propres à cet outil. Ils réutilisent les jetons définis
   plus haut pour que les outils FastSolve restent visiblement de la même
   famille.
   ------------------------------------------------------------------------ */

/* --- Filtres ----------------------------------------------------------------- */

.barre-filtres {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.5rem;
}

.barre-filtres input[type="text"] {
  flex: 1;
  min-width: 10rem;
}

/* --- Tableau : en-têtes triables ---------------------------------------------- */

.tableau thead th {
  text-align: left;
  padding: 0.65rem 0.9rem;
  background: var(--papier-creux);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}

.lien-tri {
  color: var(--encre-douce);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.lien-tri:hover {
  color: var(--accent-sombre);
}

.lien-tri--actif {
  color: var(--accent-sombre);
}

.tableau__actions {
  width: 1%;
  white-space: nowrap;
}

/* --- Tableau : cellules éditables ---------------------------------------------- */
/* Une saisie directe, façon feuille de calcul : le champ se fond dans la cellule
   tant qu'on n'y touche pas, et ne reprend l'apparence d'un champ de formulaire
   qu'au focus, pour que le tableau reste lisible avec beaucoup de lignes. */

.tableau td {
  padding: 0.4rem 0.5rem;
  vertical-align: top;
}

.tableau td input,
.tableau td select {
  border-color: transparent;
  background: transparent;
  padding: 0.35rem 0.45rem;
  min-width: 7rem;
}

.tableau td input[type="number"] {
  min-width: 5rem;
}

.tableau td input[type="date"] {
  min-width: 8.5rem;
}

.tableau td input:hover,
.tableau td select:hover {
  border-color: var(--trait);
}

.tableau td input:focus,
.tableau td select:focus {
  background: var(--papier-carte);
}

.tableau tbody tr:hover {
  background: transparent;
}

.bouton--compact {
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
}

.ligne-ajout {
  background: var(--papier-creux);
}

.ligne-ajout input::placeholder {
  color: var(--encre-tenue);
}

/* --- Réglages : colonnes ---------------------------------------------------- */

.colonne-reglage {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--trait);
}

.colonne-reglage:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.formulaire--colonne {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
  margin: 0;
}

.champ--nom-colonne {
  min-width: 10rem;
}

.formulaire--colonne .champ {
  margin-bottom: 0;
  min-width: 12rem;
}

.etiquette--type {
  margin-bottom: 0.6rem;
}

.colonne-reglage .formulaire-suppression {
  margin-top: 0;
}

/* --- Petits écrans ----------------------------------------------------------- */

@media (max-width: 720px) {
  .entete__interieur {
    gap: 0.75rem;
  }

  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .barre-filtres {
    flex-direction: column;
    align-items: stretch;
  }

  .barre-filtres button {
    width: 100%;
  }

  .barre-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .barre-actions .bouton {
    width: 100%;
  }

  /* La liste devient des cartes empilées : le nombre de colonnes varie d'un
     client à l'autre, donc pas de grille fixe possible. Chaque cellule porte
     déjà son nom de colonne dans data-etiquette (posé par la vue) : c'est ce
     qui sert d'étiquette une fois les en-têtes du tableau masqués. */
  .tableau-defilant {
    overflow-x: visible;
    border: none;
  }

  .tableau thead {
    display: none;
  }

  .tableau,
  .tableau tbody,
  .tableau tr,
  .tableau td {
    display: block;
    width: 100%;
  }

  .tableau tr {
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    background: var(--papier-carte);
  }

  .ligne-ajout {
    background: var(--papier-creux);
  }

  .tableau tr:last-child {
    margin-bottom: 0;
  }

  .tableau td {
    padding: 0.3rem 0;
  }

  .tableau td[data-etiquette]::before {
    content: attr(data-etiquette);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre-tenue);
    margin-bottom: 0.15rem;
  }

  .tableau__actions {
    display: flex;
    gap: 0.5rem;
    width: auto !important;
  }

  .tableau__actions .bouton {
    flex: 1;
  }
}

@media print {
  .banniere-demo,
  .entete,
  .pied,
  .barre-filtres,
  .banniere-installation,
  .aide-installation {
    display: none !important;
  }

  body {
    background: #ffffff;
  }
}

/* =========================================================================
   Éditeur en deux colonnes. C'est la forme propre à cet outil : les autres
   outils FastSolve sont des listes ou des tableaux, celui-ci met le résultat
   à côté de la saisie.
   ========================================================================= */

.corps--editeur .contenu { max-width: none; padding: 20px 24px 40px; }

.editeur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: start;
}
.editeur__colonne { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.editeur__apercu { position: sticky; top: 18px; min-width: 0; }

/* --- Aperçu ------------------------------------------------------------- */
.apercu {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.apercu__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--trait); background: var(--papier-creux);
}
.apercu__titre { font-size: .84rem; font-weight: 600; color: var(--encre-douce); }
.apercu__lien { font-size: .84rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.apercu__lien:hover { text-decoration: underline; }
.apercu__cadre { background: #fff; }
.apercu__iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; }

/* --- Bandeau de publication --------------------------------------------- */
.publication {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 18px; background: var(--papier-carte);
  border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.publication__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 240px; }
.publication form { margin-left: auto; }
.pastille--en-ligne { background: var(--succes-fond); color: var(--succes); }
.manques { margin: 0; font-size: .86rem; color: var(--alerte); }
.manques span + span::before { content: ""; }
.adresse {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  flex: 1 1 100%; padding-top: 12px; border-top: 1px solid var(--trait);
}
.adresse__cle { font-size: .8rem; color: var(--encre-douce); }
.adresse__valeur { font-family: var(--police-mono); font-size: .82rem; color: var(--accent); overflow-wrap: anywhere; }

/* --- Panneaux ------------------------------------------------------------ */
.panneau {
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.panneau--large { max-width: 760px; margin: 0 auto; }
.panneau--demo { background: var(--accent-clair); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.panneau__entete { display: flex; flex-direction: column; gap: 4px; }
.panneau__titre { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; }
.panneau__aide { margin: 0; font-size: .87rem; color: var(--encre-douce); }
.panneau__pied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.colonne-simple { display: flex; flex-direction: column; gap: 18px; max-width: 680px; margin: 0 auto; }

/* --- Champs -------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.champ__etiquette { font-size: .8rem; font-weight: 600; color: var(--encre-douce); }
.champ__saisie {
  width: 100%; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 9px;
  background: #fff; color: var(--encre); font: inherit; font-size: .93rem;
}
.champ__saisie:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.champ__saisie--zone { resize: vertical; line-height: 1.5; }
.champ--serre .champ__etiquette { font-size: .74rem; }
.grille-champs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* --- Blocs --------------------------------------------------------------- */
.blocs { display: flex; flex-direction: column; gap: 14px; }
.bloc { border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--papier); padding: 14px; }
.bloc__entete { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.bloc__type {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-clair); color: var(--accent-sombre);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.bloc__aide { margin: 6px 0 0; font-size: .82rem; color: var(--encre-douce); max-width: 46ch; }
.bloc__ordre { display: flex; gap: 5px; flex: 0 0 auto; }
.bloc__ordre form { margin: 0; }
.bloc__forme { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bloc__forme .bouton { align-self: flex-start; }
.bloc__elements { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--trait); }
.bloc__sous-titre { margin: 0 0 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--encre-tenue); }

/* --- Éléments d'un bloc --------------------------------------------------- */
.elements { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.element {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--papier-carte); border: 1px solid var(--trait); border-radius: 10px; padding: 12px;
}
.element__forme { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.element__actions { display: flex; gap: 8px; }
.element__retirer { flex: 0 0 auto; }
.element__ajout { display: flex; gap: 8px; flex-wrap: wrap; }
.element__ajout .champ__saisie { flex: 1 1 180px; }
.ajout-bloc { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ajout-bloc .champ__saisie { flex: 1 1 150px; }
.vide { margin: 0; padding: 14px; border: 1px dashed var(--trait); border-radius: 10px;
  color: var(--encre-douce); font-size: .87rem; text-align: center; }

/* --- Jeux de démonstration ------------------------------------------------ */
.jeux { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.jeu { margin: 0; display: flex; }
.jeu__bouton {
  flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 13px 15px; border: 1px solid var(--trait); border-radius: 10px;
  background: var(--papier-carte); color: inherit; font: inherit; cursor: pointer;
}
.jeu__bouton:hover { border-color: var(--accent); box-shadow: var(--ombre); }
.jeu__nom { font-weight: 700; font-size: .93rem; }
.jeu__resume { font-size: .81rem; color: var(--encre-douce); }

/* --- Apparence ------------------------------------------------------------ */
.groupe { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.groupe__titre { padding: 0; font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--encre-tenue); }
.palettes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.palette { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.palette input { position: absolute; opacity: 0; pointer-events: none; }
.palette__apercu {
  display: block; overflow: hidden; border-radius: 10px;
  border: 2px solid var(--trait); transition: border-color .12s ease;
}
.palette--choisie .palette__apercu,
.palette input:focus-visible + .palette__apercu { border-color: var(--accent); }
.palette__bande { display: block; height: 34px; }
.palette__corps { display: block; padding: 11px 12px 14px; }
.palette__pastille { display: block; width: 26px; height: 7px; border-radius: 999px; margin-bottom: 8px; }
.palette__trait { display: block; height: 5px; border-radius: 999px; margin-bottom: 5px; }
.palette__trait--court { width: 55%; margin-bottom: 0; }
.palette__nom { font-size: .85rem; font-weight: 600; text-align: center; }

.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.choix { position: relative; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--trait);
  border-radius: 999px; font-size: .88rem; cursor: pointer; background: var(--papier-carte);
}
.choix--choisi span { border-color: var(--accent); background: var(--accent-clair); color: var(--accent-sombre); font-weight: 600; }
.choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Boutons complémentaires ---------------------------------------------- */
.bouton--icone { padding: 6px 10px; font-size: .95rem; line-height: 1; min-width: 34px; }
.bouton[disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 980px) {
  .editeur { grid-template-columns: minmax(0, 1fr); }
  .editeur__apercu { position: static; order: -1; }
  .apercu__iframe { height: 60vh; }
}
@media (max-width: 620px) {
  .corps--editeur .contenu { padding: 14px 14px 30px; }
  .element { flex-direction: column; }
  .element__retirer { align-self: flex-end; }
}

/* Deux classes utilisées par les vues communes (connexion, installation, pied
   de page) qui n'avaient de règle dans aucun outil FastSolve : le formulaire
   d'accès s'affichait sans mise en forme et la version en taille de corps. */
.formulaire {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 420px; margin: 8vh auto 0; padding: 26px;
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.formulaire h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.01em; }
.formulaire p { margin: 0; font-size: .88rem; color: var(--encre-douce); }
.formulaire .bouton { align-self: stretch; text-align: center; }
.version { color: var(--encre-tenue); font-size: .78rem; font-variant-numeric: tabular-nums; }