/* =====================================================================
   Styles des pages applicatives : compte, espace client, back-office.
   S'appuie sur les tokens de style.css, qui doit être chargé avant.
   ===================================================================== */

.page-app {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---------- Barre supérieure ---------- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--blur-m)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-m)) saturate(180%);
  border-bottom: 1px solid var(--stroke);
}

.app-bar__tools { display: flex; align-items: center; gap: .6rem; }
.inline-form { display: contents; }
.btn--petit { padding: .55rem 1.1rem; font-size: .86rem; }

/* ---------- Corps ---------- */
.app-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
}

.app-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--stroke);
  font-size: .84rem;
  color: var(--faint);
}
.app-pied nav { display: flex; gap: 1.2rem; }
.app-pied a { transition: color .25s var(--ease); }
.app-pied a:hover { color: var(--text); }

/* ---------- Carte de formulaire ---------- */
.carte-auth {
  width: min(100%, 460px);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--r-xl);
}
.carte-auth--large { width: min(100%, 620px); }

.carte-auth__titre {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  margin-bottom: .6rem;
}
.carte-auth__sous {
  color: var(--muted);
  font-size: .94rem;
  margin-bottom: 1.8rem;
}

.carte-auth .form { gap: 1rem; }

/* Lien de bas de carte */
.carte-auth__liens {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--stroke);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  font-size: .88rem;
  color: var(--muted);
}
.carte-auth__liens a { color: var(--accent); }
.carte-auth__liens a:hover { text-decoration: underline; }

/* ---------- Champ « piège » anti-robot ----------
   Il doit rester dans le flux pour qu'un automate le remplisse, tout en
   étant invisible et inatteignable pour une personne : display:none
   serait ignoré par certains robots, et tab-index le sortirait du
   parcours clavier. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Messages ---------- */
.message {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-m);
  font-size: .9rem;
  margin-bottom: 1.4rem;
  border: 1px solid;
}
.message--erreur  { background: rgba(244, 63, 94, .1);  border-color: rgba(244, 63, 94, .35);  color: #fb7185; }
.message--succes  { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .35); color: #34d399; }
.message--info    { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .3); color: var(--accent); }

.message svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bloc d'état (page de confirmation) ---------- */
.etat { text-align: center; }
.etat__icone {
  width: 66px; height: 66px;
  margin: 0 auto 1.4rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(124, 92, 255, .2), rgba(34, 211, 238, .12));
  color: var(--accent);
}
.etat__icone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.etat__icone--succes { color: #34d399; background: rgba(52, 211, 153, .14); }
.etat__icone--erreur { color: #fb7185; background: rgba(244, 63, 94, .12); }

.etat p { color: var(--muted); margin-bottom: 1.6rem; }
.etat .btn { width: 100%; }

/* ---------- Indication de force du mot de passe ---------- */
.aide-champ {
  font-size: .78rem;
  color: var(--faint);
  margin-top: -.5rem;
  padding-left: .2rem;
}

/* ---------- Bandeau d'avertissement ---------- */
.bandeau-verif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: .8rem 1.25rem;
  background: rgba(251, 191, 36, .12);
  border-bottom: 1px solid rgba(251, 191, 36, .3);
  color: var(--amber);
  font-size: .88rem;
  text-align: center;
}
.bandeau-verif form { display: contents; }
.bandeau-verif button {
  background: none;
  border: 0;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 480px) {
  .app-bar { padding: .8rem 1rem; }
  .carte-auth__liens { flex-direction: column; }
}

/* =====================================================================
   Liens de compte dans la navigation du site vitrine.
   Ajoutés en v2 : la v1 n'avait pas d'espace utilisateur.
   ===================================================================== */

.nav__separateur {
  width: 1px;
  height: 20px;
  margin: 0 .35rem;
  background: var(--stroke);
  flex-shrink: 0;
}

.nav__link--compte {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.nav__link--compte svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sous 860 px la navigation devient un menu plein écran vertical :
   le séparateur, pensé pour une barre horizontale, n'y a plus de sens. */
@media (max-width: 860px) {
  .nav__separateur {
    width: 42px;
    height: 1px;
    margin: .6rem 0;
  }
  .nav__link--compte { justify-content: center; }
  .nav__link--compte svg { width: 20px; height: 20px; }
}

/* =====================================================================
   V3 — assistant conversationnel et vues commerciales
   ===================================================================== */

/* ---------- Bulle et fenêtre de chat ---------- */
.chat-bulle {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.3rem;
  border: 0;
  border-radius: 99px;
  font-family: var(--police-titre);
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  box-shadow: 0 14px 34px -12px rgba(124, 92, 255, .95);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chat-bulle:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(124, 92, 255, 1); }
.chat-bulle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.chat-fenetre {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 68px);
  z-index: 91;
  width: min(380px, calc(100vw - 2rem));
  height: min(520px, calc(100svh - 160px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--surface-2);
  backdrop-filter: blur(var(--blur-l)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(200%);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.chat-fenetre.is-open { opacity: 1; visibility: visible; transform: none; }

.chat-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--stroke);
}
.chat-tete strong { font-family: var(--police-titre); font-size: .98rem; }
.chat-tete small { display: block; font-size: .76rem; color: var(--faint); font-weight: 400; }
.chat-tete button {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.4rem; line-height: 1;
  padding: 0 .2rem;
}
.chat-tete button:hover { color: var(--text); }

.chat-fil {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.chat-msg {
  max-width: 85%;
  padding: .7rem .95rem;
  border-radius: var(--r-m);
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg--user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  border-bottom-right-radius: 6px;
}
.chat-msg--assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-bottom-left-radius: 6px;
}
.chat-msg--erreur {
  align-self: flex-start;
  background: rgba(244, 63, 94, .12);
  border: 1px solid rgba(244, 63, 94, .35);
  color: #fb7185;
}

/* Trois points pendant l'attente de la première portion de texte. */
.chat-msg.is-attente { min-width: 54px; min-height: 38px; position: relative; }
.chat-msg.is-attente::after {
  content: "\2022\2022\2022";
  position: absolute;
  left: .95rem; top: 50%;
  transform: translateY(-50%);
  letter-spacing: .15em;
  color: var(--faint);
  animation: chatAttente 1.3s ease-in-out infinite;
}
@keyframes chatAttente { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.chat-form {
  display: flex;
  gap: .5rem;
  padding: .8rem;
  border-top: 1px solid var(--stroke);
}
.chat-form input {
  flex: 1;
  padding: .7rem .9rem;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
}
.chat-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.chat-form button {
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.chat-form button:hover { transform: scale(1.07); }
.chat-form.is-loading button { opacity: .5; pointer-events: none; }
.chat-form button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chat-mention {
  padding: 0 1rem .7rem;
  font-size: .72rem;
  color: var(--faint);
  text-align: center;
}

@media (max-width: 480px) {
  .chat-fenetre {
    right: .5rem; left: .5rem;
    width: auto;
    bottom: 80px;
    height: min(460px, calc(100svh - 140px));
  }
  .chat-bulle span { display: none; }
  .chat-bulle { padding: .9rem; border-radius: 50%; }
}

/* ---------- Liste des demandes ---------- */
.filtres-statut {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.4rem;
}
.filtre-statut {
  padding: .4rem .85rem;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: .82rem;
  color: var(--muted);
  transition: all .25s var(--ease);
}
.filtre-statut:hover { color: var(--text); border-color: var(--stroke-2); }
.filtre-statut.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  border-color: transparent;
}
.filtre-statut b {
  margin-left: .35rem;
  padding: .05rem .35rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
  font-size: .72rem;
}

.liste-demandes { display: grid; gap: .7rem; }

.demande-ligne {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke);
  background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.demande-ligne:hover { border-color: var(--stroke-2); transform: translateX(3px); }
.demande-ligne__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .5rem;
}
.demande-ligne__ref {
  font-family: var(--police-titre);
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
}
.demande-ligne__corps p {
  margin-top: .3rem;
  font-size: .88rem;
  color: var(--muted);
}
.demande-ligne__pied {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .7rem;
  font-size: .76rem;
  color: var(--faint);
}
.puce-ia {
  padding: .1rem .5rem;
  border-radius: 99px;
  background: rgba(124, 92, 255, .18);
  color: var(--violet);
  font-weight: 600;
}

/* ---------- Étiquettes de statut ---------- */
.etiquette {
  padding: .2rem .7rem;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.etiquette--nouveau      { background: rgba(124, 92, 255, .18); color: var(--violet); border-color: transparent; }
.etiquette--qualifie     { background: rgba(34, 211, 238, .16);  color: var(--accent); border-color: transparent; }
.etiquette--devis_envoye { background: rgba(251, 191, 36, .16);  color: var(--amber);  border-color: transparent; }
.etiquette--accepte      { background: rgba(52, 211, 153, .18);  color: #34d399;       border-color: transparent; }
.etiquette--refuse       { background: rgba(244, 63, 94, .14);   color: #fb7185;       border-color: transparent; }

/* ---------- Fiche d'une demande ---------- */
.demande-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sous-titre {
  font-size: 1.05rem;
  margin: 2rem 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--stroke);
}
.sous-titre--petit { font-size: .92rem; margin: 1.2rem 0 .5rem; border: 0; padding: 0; }

.message-client {
  margin: 0;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--violet);
  background: var(--surface);
  font-size: .93rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Pièces jointes d'une demande (V7.2) ---------- */
.pieces-apercus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 160px));
  gap: .6rem;
  margin: 0 0 1rem;
}
.pieces-apercus__item {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke);
  overflow: hidden;
  background: var(--surface);
}
.pieces-apercus__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieces-apercus__item:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.texte-barre { text-decoration: line-through; opacity: .6; }
.lien-partage { display: grid; gap: .25rem; margin: 0 0 .4rem; padding: .8rem 1rem; border-radius: var(--r-m); border: 1px solid var(--stroke); background: var(--surface); font-size: .9rem; }
.lien-partage span { color: var(--muted); font-size: .8rem; }
.lien-partage a { overflow-wrap: anywhere; }
/* Nom de fichier, taille et bouton : sur un écran étroit, le nom prend
   toute la ligne au lieu d'être coupé lettre par lettre. */
.row--piece { flex-wrap: wrap; gap: .3rem .8rem; }
.row--piece > span:first-child { flex: 1 1 14rem; }

/* ---------- Synthèse ---------- */
.synthese {
  padding: 1.3rem;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke);
  background: var(--surface);
}

.synthese__recommandation {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 99px;
  font-family: var(--police-titre);
  font-size: .9rem;
  font-weight: 600;
}
.synthese__recommandation svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.synthese__recommandation--accepter    { background: rgba(52, 211, 153, .16); color: #34d399; }
.synthese__recommandation--approfondir { background: rgba(251, 191, 36, .16);  color: var(--amber); }
.synthese__recommandation--refuser     { background: rgba(244, 63, 94, .14);   color: #fb7185; }

.synthese__resume { font-size: .96rem; line-height: 1.65; margin-bottom: 1.1rem; }
.synthese__justification {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--muted);
  font-style: italic;
}
.synthese__meta {
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--stroke);
  font-size: .76rem;
  color: var(--faint);
}
.synthese__meta strong { color: var(--muted); }

.liste-vigilance { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.liste-vigilance li { font-size: .88rem; color: var(--muted); }

/* ---------- Boutons de décision ---------- */
.form-decision { margin-top: .5rem; }
.boutons-statut { display: flex; flex-wrap: wrap; gap: .5rem; }
.bouton-statut {
  padding: .6rem 1.1rem;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: .86rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.bouton-statut:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--stroke-2);
  transform: translateY(-2px);
}
.bouton-statut.is-actuel {
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: #fff;
  border-color: transparent;
  cursor: default;
}

/* =====================================================================
   Back-office étendu : tableau de bord, graphiques, réglages.

   Les couleurs de séries proviennent d'une palette validée pour la
   vision des couleurs déficiente, dans les deux thèmes (voir README §22).
   Elles sont déclarées ici en rôles, jamais écrites en dur dans le SVG.
   ===================================================================== */

.viz-root {
  --viz-surface:   #0d0d14;
  --viz-grille:    rgba(255, 255, 255, .08);
  --viz-axe:       rgba(242, 242, 247, .45);
  --serie-1:       #3987e5;   /* bleu   — pente sombre */
  --serie-2:       #d95926;   /* orange — pente sombre */
}

/* Le thème clair est choisi, pas déduit : ce sont les pentes claires
   de la même palette, validées contre la surface claire. */
:root[data-theme="light"] .viz-root {
  --viz-surface:   #f4f4f8;
  --viz-grille:    rgba(10, 10, 25, .1);
  --viz-axe:       rgba(17, 17, 26, .55);
  --serie-1:       #2a78d6;
  --serie-2:       #eb6834;
}

/* ---------- Mise en page ---------- */
.admin-large {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.admin-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.periodes { display: flex; gap: .35rem; }
.periode {
  padding: .4rem .9rem;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: .84rem;
  color: var(--muted);
  transition: all .25s var(--ease);
}
.periode:hover { color: var(--text); border-color: var(--stroke-2); }
.periode.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  border-color: transparent;
}

/* ---------- Tuiles d'indicateur ---------- */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.tuile {
  position: relative;
  padding: 1.2rem 1.3rem 1.4rem;
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.tuile__libelle {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Le nombre est le sujet : il porte la taille, pas une couleur de série. */
.tuile__valeur {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tuile__delta {
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.est-hausse { color: #34d399; }
.est-baisse { color: #fb7185; }
.est-neutre { color: var(--faint); }
.tuile__note { font-size: .76rem; color: var(--muted); }

.viz-mini {
  width: 100%;
  height: 32px;
  margin-top: .6rem;
  display: block;
}

/* ---------- Blocs ---------- */
.bloc {
  padding: 1.4rem;
  border-radius: var(--r-l);
  margin-bottom: 1.2rem;
}
.bloc__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.bloc__tete h2 { font-size: 1.05rem; }
.bloc__note { font-size: .82rem; color: var(--muted); margin-top: .9rem; }

.grille-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
}

/* ---------- Légende ---------- */
.legende { display: flex; flex-wrap: wrap; gap: 1rem; }
.legende__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--muted);   /* le texte porte l'encre, jamais la couleur de série */
}
.viz-pastille {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.viz-pastille.viz-s1 { background: var(--serie-1); }
.viz-pastille.viz-s2 { background: var(--serie-2); }

/* ---------- SVG ---------- */
.viz-cadre { width: 100%; overflow: hidden; }
.viz { width: 100%; height: auto; display: block; }

.viz-grille {
  stroke: var(--viz-grille);
  stroke-width: 1;          /* filet plein, jamais en pointillés */
}
.viz-axe {
  fill: var(--viz-axe);
  font-size: 11px;
  font-family: var(--police-titre);
}

.viz-trait {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* L'aire est un voile, pas un aplat. */
.viz-aire { stroke: none; opacity: .1; }

/* L'anneau de surface garde le point lisible là où il croise un trait. */
.viz-point { stroke: var(--viz-surface); stroke-width: 2; }

.viz-etiquette {
  font-family: var(--police-titre);
  font-size: 12px;
  font-weight: 600;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}

.viz-s1.viz-trait, .viz-s1.viz-point { stroke: var(--serie-1); }
.viz-s1.viz-aire,  .viz-s1.viz-point { fill: var(--serie-1); }
.viz-s2.viz-trait, .viz-s2.viz-point { stroke: var(--serie-2); }
.viz-s2.viz-aire,  .viz-s2.viz-point { fill: var(--serie-2); }

.viz-zone { fill: transparent; cursor: crosshair; }

.viz-viseur {
  stroke: var(--viz-axe);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease);
}
.viz-viseur.is-visible { opacity: .5; }

/* ---------- Barres horizontales ---------- */
.viz-barres { display: grid; gap: .55rem; }

.viz-barre {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2.4fr auto;
  align-items: center;
  gap: .8rem;
  cursor: default;
}
.viz-barre__libelle {
  font-size: .84rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viz-barre__piste {
  height: 14px;              /* sous le plafond de 24 px */
  border-radius: 3px;
  background: var(--viz-grille);
  overflow: hidden;
}
.viz-barre__valeur {
  display: block;
  height: 100%;
  /* Extrémité arrondie côté donnée, carrée sur la ligne de base. */
  border-radius: 0 4px 4px 0;
  transition: filter .25s var(--ease);
}
.viz-barre__valeur.viz-s1 { background: var(--serie-1); }
.viz-barre:hover .viz-barre__valeur { filter: brightness(1.15); }

/* La valeur est écrite : c'est ce qui lève l'avertissement de contraste
   de la palette en thème clair. */
.viz-barre__nombre {
  font-family: var(--police-titre);
  font-size: .84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 2.2rem;
  text-align: right;
}

.viz-vide { font-size: .86rem; color: var(--faint); }

/* ---------- Infobulle ---------- */
.viz-infobulle {
  position: fixed;
  z-index: 200;
  padding: .5rem .8rem;
  border-radius: var(--r-s);
  background: var(--surface-2);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(var(--blur-m)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-m)) saturate(180%);
  box-shadow: var(--shadow-lg);
  font-size: .82rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.viz-infobulle.is-visible { opacity: 1; }

/* ---------- Vue tableau ---------- */
.viz-tableau { margin-top: 1.2rem; }
.viz-tableau summary {
  cursor: pointer;
  font-size: .84rem;
  color: var(--accent);
  padding: .4rem 0;
}
.viz-tableau table {
  width: 100%;
  margin-top: .8rem;
  border-collapse: collapse;
  font-size: .84rem;
  max-height: 320px;
}
.viz-tableau th, .viz-tableau td {
  padding: .45rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
  font-variant-numeric: tabular-nums;
}
.viz-tableau th { color: var(--faint); font-weight: 600; }
.viz-tableau td:not(:first-child), .viz-tableau th:not(:first-child) { text-align: right; }

/* ---------- Onglets et réglages ---------- */
.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--stroke);
}
.onglet {
  padding: .5rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: .86rem;
  color: var(--muted);
  transition: all .25s var(--ease);
}
.onglet:hover { color: var(--text); border-color: var(--stroke-2); }
.onglet.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  border-color: transparent;
}

.form-reglages { display: grid; gap: 1.6rem; max-width: 640px; }

.reglage { display: grid; gap: .45rem; }
.reglage__titre {
  font-family: var(--police-titre);
  font-size: .94rem;
  font-weight: 600;
}
.reglage__aide { font-size: .8rem; color: var(--muted); line-height: 1.55; }

.champ-reglage {
  width: 100%;
  padding: .75rem .95rem;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  resize: vertical;
}
.champ-reglage:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
select.champ-reglage { cursor: pointer; }

.reglage__bascule {
  display: flex;
  align-items: center;
  gap: .8rem;
  cursor: pointer;
}
.reglage__bascule input { position: absolute; opacity: 0; pointer-events: none; }
.reglage__interrupteur {
  width: 46px; height: 26px;
  flex-shrink: 0;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  padding: 3px;
  display: flex;
  transition: background .3s var(--ease);
}
.reglage__interrupteur::after {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.reglage__bascule input:checked + .reglage__interrupteur::after {
  transform: translateX(20px);
  background: linear-gradient(135deg, var(--violet), var(--cyan));
}
.reglage__bascule input:focus-visible + .reglage__interrupteur {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Navigation du back-office ---------- */
.admin-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.6rem;
}
.admin-menu a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: .86rem;
  color: var(--muted);
  transition: all .25s var(--ease);
}
.admin-menu a:hover { color: var(--text); border-color: var(--stroke-2); transform: translateY(-2px); }
.admin-menu a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  border-color: transparent;
}
.admin-menu b {
  padding: .05rem .4rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .2);
  font-size: .74rem;
}

/* Les pages larges du back-office ne sont pas centrées verticalement. */
.page-app .app-main:has(.admin-large) {
  align-items: flex-start;
}

@media (max-width: 640px) {
  .viz-barre { grid-template-columns: minmax(70px, 1fr) 1.6fr auto; gap: .5rem; }
  .admin-entete { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   V4 — corrections de contraste (WCAG 2.1 AA)

   Les valeurs ci-dessous ne sont pas choisies à l'œil : elles viennent
   de `node server/outils/contraste.js`, qui calcule le rapport réel en
   composant les couleurs translucides sur leur fond.

   Six échecs mesurés avant correction, dont cinq en thème clair : les
   couleurs d'état avaient été choisies pour le fond sombre et
   réutilisées telles quelles sur fond clair, où elles tombaient à
   1,5:1 — illisibles.
   ===================================================================== */

:root {
  /* Couleurs d'état, déclinées par thème. Elles servent au texte, donc
     elles doivent atteindre 4,5:1 — pas seulement « se voir ». */
  --succes: #34d399;
  --erreur: #fb7185;
  --alerte: #fbbf24;

  /* Teintes de fond des pastilles : la couleur d'état posée à faible
     opacité, pour que le texte garde son contraste. */
  --succes-fond: rgba(52, 211, 153, .16);
  --erreur-fond: rgba(244, 63, 94, .14);
  --alerte-fond: rgba(251, 191, 36, .16);
}

[data-theme="light"] {
  /* Mêmes teintes, assombries pour le fond clair. Mesurées :
     vert 4,58:1 · rouge 4,83:1 · ambre 4,52:1 — toutes au-dessus de 4,5. */
  --succes: #047857;
  --erreur: #be123c;
  --alerte: #92400e;

  --succes-fond: rgba(4, 120, 87, .1);
  --erreur-fond: rgba(190, 18, 60, .09);
  --alerte-fond: rgba(146, 64, 14, .1);

  /* `faint` tombait à 2,72:1 : illisible. Porté à une opacité qui donne
     4,54:1 sur le fond clair. */
  --faint: rgba(17, 17, 26, .72);
}

:root:not([data-theme="light"]) {
  /* En thème sombre, `faint` était à 3,24:1 — sous le seuil du texte
     courant. Relevé à 4,66:1. */
  --faint: rgba(242, 242, 247, .52);
}

/* ---------------------------------------------------------------
   Bordures des champs de formulaire

   Un contour à 1,2:1 ne permet pas de distinguer le champ de son fond.
   WCAG demande 3:1 pour tout élément qui sert à identifier un contrôle.
   Le `--stroke` décoratif reste inchangé : il sépare des blocs, il
   n'identifie pas un contrôle.
   --------------------------------------------------------------- */
:root { --stroke-champ: rgba(255, 255, 255, .36); }
[data-theme="light"] { --stroke-champ: rgba(10, 10, 25, .46); }

.field input,
.field textarea,
.field select,
.champ-reglage,
.chat-form input {
  border-color: var(--stroke-champ);
}

/* ---------------------------------------------------------------
   Texte sur les boutons dégradés

   Le blanc sur le violet donnait 4,35:1 — juste sous le seuil, pour un
   texte de 15 px qui n'est pas considéré comme « grand ». On assombrit
   légèrement le départ du dégradé : 4,64:1 mesuré.
   --------------------------------------------------------------- */
:root { --violet-bouton: #3F5BE8; }

/* V8 : aplat de la couleur d'action, texte de la couleur prévue pour
   elle (blanc en clair, bleu nuit en sombre) : contraste AA dans les deux
   thèmes, sans dégradé. */
.btn--primary,
.nav__link--cta,
.chat-bulle,
.chat-form button,
.filter.is-active,
.periode.is-active,
.onglet.is-active,
.filtre-statut.is-active,
.bouton-statut.is-actuel,
.plan__flag,
.chat-msg--user,
.admin-menu a.is-active {
  background: var(--bouton);
  color: var(--bouton-texte);
  box-shadow: none;
}
.nav__link--cta:hover { background: var(--bouton-survol); color: var(--bouton-texte); }

/* ---------------------------------------------------------------
   Application des couleurs d'état aux composants existants
   --------------------------------------------------------------- */
.message--succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.message--erreur { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }

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

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

.field__err { color: var(--erreur); }

/* style.css part de .field__err invisible et ne le révèle que sous
   .field.is-invalid (fondu du formulaire de contact, piloté par main.js).
   Dans les formulaires du back-office, l'erreur est rendue par le serveur
   sous un .reglage, jamais sous un .field : sans cette règle, un
   formulaire refusé (422) revenait sans aucun motif visible. L'espacement
   vient déjà du gap de la grille .reglage. */
.reglage .field__err { opacity: 1; transform: none; }

.est-hausse { color: var(--succes); }
.est-baisse { color: var(--erreur); }

.chat-msg--erreur { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }

.synthese__recommandation--accepter    { background: var(--succes-fond); color: var(--succes); }
.synthese__recommandation--approfondir { background: var(--alerte-fond); color: var(--alerte); }
.synthese__recommandation--refuser     { background: var(--erreur-fond); color: var(--erreur); }

.etiquette--accepte { background: var(--succes-fond); color: var(--succes); }
.etiquette--refuse  { background: var(--erreur-fond); color: var(--erreur); }
.etiquette--devis_envoye { background: var(--alerte-fond); color: var(--alerte); }

.bandeau-verif { background: var(--alerte-fond); border-bottom-color: var(--alerte); color: var(--alerte); }

.switch-label em { background: var(--succes-fond); color: var(--succes); }

.plan ul li::before { background: var(--succes-fond); box-shadow: inset 0 0 0 1px var(--succes); }
.plan ul li::after  { border-color: var(--succes); }

.badge__dot, .ping { background: var(--succes); }

/* ---------------------------------------------------------------
   Lien d'évitement

   Permet d'atteindre le contenu sans parcourir toute la navigation au
   clavier. Invisible tant qu'il n'a pas le focus.
   --------------------------------------------------------------- */
.lien-evitement {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 300;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-m) var(--r-m);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--stroke-2);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.lien-evitement:focus { top: 0; }

/* ---------------------------------------------------------------
   Pages légales
   --------------------------------------------------------------- */
.page-legale {
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.page-legale h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .6rem; }
.page-legale .maj { font-size: .84rem; color: var(--faint); margin-bottom: 2.5rem; }
.page-legale h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--stroke);
}
.page-legale h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; }
.page-legale p, .page-legale li { color: var(--muted); line-height: 1.75; margin-bottom: .9rem; }
.page-legale ul, .page-legale ol { padding-left: 1.4rem; }
.page-legale li { margin-bottom: .5rem; }
.page-legale a { color: var(--accent); text-decoration: underline; }
.page-legale strong { color: var(--text); }

.page-legale table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.6rem;
  font-size: .9rem;
}
.page-legale th, .page-legale td {
  padding: .7rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}
.page-legale th { color: var(--text); font-weight: 600; }
.page-legale td { color: var(--muted); }

.encart {
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  border-radius: var(--r-m);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--accent);
  background: var(--surface);
}
.encart p:last-child { margin-bottom: 0; }

.sommaire-legal {
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--stroke);
  margin-bottom: 2.5rem;
}
.sommaire-legal ol { margin: 0; padding-left: 1.2rem; }
.sommaire-legal li { margin-bottom: .35rem; }

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stroke);
  font-size: .88rem;
}


/* ===============================================================
   V5 — devis, commandes, projets

   Les formulaires V5 réutilisent les classes du back-office
   (.form-reglages, .reglage, .champ-reglage, .reglage__bascule) :
   n'est défini ici que ce qui n'existait pas. Tout passe par les
   jetons du thème, donc le mode clair et les contrastes mesurés plus
   haut s'appliquent sans duplication.
   =============================================================== */

/* ---------- Actions de formulaire ---------- */
.formulaire__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .4rem;
}
/* Un formulaire qui ne contient qu'un bouton se range sur la ligne. */
.en-ligne { display: inline-flex; margin: 0; }

/* Plusieurs champs courts côte à côte, repliés sur mobile. */
.champ-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* Action destructrice : un lien, pas un bouton plein. Elle doit se voir
   sans attirer l'œil avant l'action principale. */
.lien-danger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .86rem;
  color: var(--erreur);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien-danger:hover { text-decoration-thickness: 2px; }

/* ---------- Lignes de devis et de commande ---------- */
.tableau-lignes { display: grid; gap: .6rem; margin-bottom: 1rem; }

.ligne-devis {
  padding: .8rem 1rem;
  border: 1px solid var(--stroke);
  border-radius: var(--r-m);
  background: var(--surface);
}
.ligne-devis__principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
}
.ligne-devis__principal > :first-child { flex: 1 1 220px; min-width: 0; }
.ligne-devis__principal .aide-champ { margin: .25rem 0 0; }

.ligne-devis__principal input {
  padding: .5rem .7rem;
  border: 1px solid var(--stroke-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
}
.ligne-devis__principal input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ligne-devis__principal input.etroit { width: 6.5rem; }
/* Devis figé : les champs restent lisibles mais se lisent comme figés. */
.ligne-devis__principal input[readonly] { opacity: .7; cursor: default; }

.ligne-devis__total {
  margin-left: auto;
  min-width: 7rem;
  text-align: right;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ligne-devis__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .6rem;
}

/* ---------- Totaux ---------- */
.totaux {
  display: grid;
  gap: .4rem;
  max-width: 360px;
  margin: .5rem 0 1.5rem auto;
}
.totaux strong { color: var(--text); font-variant-numeric: tabular-nums; }
.totaux .row:last-child { background: var(--surface-2); font-size: .95rem; }

/* Texte libre rédigé par le studio : les retours à la ligne comptent. */
.devis-intro {
  margin: .5rem 0 1rem;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-line;
}

/* ---------- Parcours d'un projet, côté client ---------- */
.parcours {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .3rem;
  counter-reset: etape;
}
.parcours__etape {
  position: relative;
  padding: .5rem .8rem .5rem 2.4rem;
  border-radius: var(--r-s);
  font-size: .9rem;
  color: var(--muted);
  counter-increment: etape;
}
.parcours__etape::before {
  content: counter(etape);
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--stroke-2);
  font-size: .7rem;
  font-weight: 600;
}
.parcours__etape.is-faite { color: var(--text); }
.parcours__etape.is-faite::before {
  content: "✓";
  background: var(--succes-fond);
  color: var(--succes);
  border-color: transparent;
}
.parcours__etape.is-courante {
  color: var(--text);
  font-weight: 600;
  background: var(--surface-2);
}
.parcours__etape.is-courante::before {
  background: var(--bouton);
  color: var(--bouton-texte);
  border-color: transparent;
}

/* ---------- Pastilles de statut ----------
   Les statuts de demande avaient leurs couleurs ; ceux des devis, des
   commandes et des projets non — ils s'affichaient en gris neutre.
   Trois familles seulement : en attente d'autrui (alerte), en cours de
   travail (violet), abouti (succès). Le reste garde la pastille neutre. */
.etiquette--envoye,
.etiquette--en_attente,
.etiquette--en_revue {
  background: var(--alerte-fond); color: var(--alerte); border-color: transparent;
}
.etiquette--en_cours {
  background: rgba(124, 92, 255, .18); color: var(--violet); border-color: transparent;
}
.etiquette--livre {
  background: var(--succes-fond); color: var(--succes); border-color: transparent;
}
.etiquette--brouillon,
.etiquette--annule,
.etiquette--clos { color: var(--muted); }


/* ---------- V5.4 — échanges d'un projet ---------- */

/* Fil de messages. Les messages du studio et ceux du client se distinguent
   par un liseré, pas par une couleur de fond seule : l'information reste
   lisible sans percevoir les couleurs. */
.fil { display: grid; gap: .6rem; margin-bottom: 1rem; }
.fil__message {
  padding: .75rem 1rem;
  border: 1px solid var(--stroke);
  border-left-width: 3px;
  border-radius: var(--r-m);
  background: var(--surface);
}
.fil__message--studio { border-left-color: var(--violet); }
.fil__message--client { border-left-color: var(--cyan); }
.fil__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
  font-size: .82rem;
  color: var(--muted);
}
.fil__entete strong { color: var(--text); }
/* Texte saisi par une personne : ses retours à la ligne comptent, et un mot
   très long (une URL collée) ne doit pas faire déborder la carte. */
.fil__texte {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-size: .92rem;
}

/* Livraison : un bloc par envoi, avec ses fichiers et la réponse du client. */
.bloc-livraison {
  display: grid;
  gap: .5rem;
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  border: 1px solid var(--stroke);
  border-radius: var(--r-m);
  background: var(--surface);
}
.bloc-livraison .form-reglages { margin-top: .4rem; }

/* Case à cocher simple dans une liste : l'interrupteur du back-office est
   fait pour un réglage isolé, pas pour choisir plusieurs fichiers. */
.case-simple {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  cursor: pointer;
}
.case-simple input { width: 1.05rem; height: 1.05rem; accent-color: var(--violet); }

/* Liens de fichiers : un nom de fichier peut être très long. */
.panel__rows .row > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- V5.5 — paiements et factures ---------- */

/* Statuts préfixés : « annule » ou « en_attente » existent aussi pour les
   commandes, avec un autre sens. Le préfixe évite qu'une règle écrite pour
   l'un colore l'autre. */
.etiquette--paiement-reussi,
.etiquette--facture-payee      { background: var(--succes-fond); color: var(--succes); border-color: transparent; }
.etiquette--paiement-en_attente,
.etiquette--facture-emise      { background: var(--alerte-fond); color: var(--alerte); border-color: transparent; }
.etiquette--paiement-echoue    { background: var(--erreur-fond); color: var(--erreur); border-color: transparent; }
.etiquette--paiement-annule,
.etiquette--paiement-rembourse,
.etiquette--facture-brouillon  { color: var(--muted); }

/* Accueil : deux activités et deux prestations sur devis. */
.accueil-deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 700px) { .accueil-deux-colonnes { grid-template-columns: 1fr; } }

/* ---------- V6.1 — options du catalogue sur l'accueil ---------- */
.plan__options-titre { margin: 1rem 0 .35rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan__options { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .92rem; }
.plan__options span { color: var(--muted); }
.field-options { border: 1px solid var(--stroke); border-radius: var(--r-m, 14px); padding: .8rem 1rem; margin: 0 0 1rem; display: grid; gap: .45rem; }
.field-options legend { padding: 0 .35rem; font-size: .9rem; }
.field-options legend span { color: var(--muted); font-size: .82rem; }
.field-options__choix { display: flex; align-items: center; gap: .6rem; font-size: .92rem; cursor: pointer; }
/* `display: grid` ci-dessus l'emporterait sur l'attribut hidden : sans
   cette règle, les options de l'autre métier restaient affichées. */
.field-options[hidden] { display: none; }
.field-options__choix input { width: 1.05rem; height: 1.05rem; accent-color: var(--violet); flex-shrink: 0; }

/* ---------- V7.2 — pièces jointes du formulaire de contact ---------- */
.depot { border: 1px solid var(--stroke); border-radius: var(--r-m, 14px); padding: .8rem 1rem 1rem; margin: 0; display: grid; gap: .6rem; min-width: 0; }
.depot legend { padding: 0 .35rem; font-size: .9rem; }
.depot legend span { color: var(--muted); font-size: .82rem; }
/* Le champ natif reste dans le document (clavier, lecteurs d'écran) ; c'est
   la zone, son libellé, qui se voit et qui reçoit le glisser-déposer. */
.depot__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.depot__zone {
  display: grid; justify-items: center; gap: .3rem; text-align: center;
  padding: 1.1rem .8rem; border: 1.5px dashed var(--stroke-2, var(--stroke)); border-radius: var(--r-s, 12px);
  background: var(--surface); cursor: pointer; font-size: .92rem;
  transition: border-color .25s ease, background .25s ease;
}
.depot__zone svg { width: 26px; height: 26px; fill: none; stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.depot__zone small { color: var(--muted); font-size: .78rem; }
.depot__zone:hover, .depot__zone.is-survol { border-color: var(--violet); background: var(--surface-2); }
.depot:focus-within .depot__zone { border-color: var(--violet); }
.depot__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.depot__liste:empty { display: none; }
.depot__fichier { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: var(--r-s, 12px); background: var(--surface); font-size: .86rem; min-width: 0; }
.depot__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot__taille { color: var(--muted); font-size: .78rem; flex-shrink: 0; }
.depot__etat { font-size: .78rem; flex-shrink: 0; }
.depot__etat--ok { color: #34d399; }
.depot__etat--erreur { color: #fb7185; }
.depot__retirer { border: 0; background: none; color: var(--muted); font-size: 1.15rem; line-height: 1; padding: .1rem .35rem; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.depot__retirer:hover, .depot__retirer:focus-visible { color: var(--text); background: var(--surface-2); }
.depot__err { margin: 0; font-size: .8rem; color: #fb7185; }
.depot__err:empty { display: none; }
/* V7.5 — partage réservé aux comptes vérifiés : invitation à la place de la zone. */
.depot-verrou { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1.5px dashed var(--stroke-2, var(--stroke)); border-radius: var(--r-m, 14px); background: var(--surface); }
.depot-verrou > svg { flex-shrink: 0; width: 26px; height: 26px; margin-top: .1rem; fill: none; stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.depot-verrou__texte { display: grid; gap: .4rem; min-width: 0; }
.depot-verrou__texte strong { font-size: .95rem; }
.depot-verrou__texte p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.depot-verrou__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.depot-verrou__actions .btn { padding: .55rem 1rem; font-size: .85rem; }
.envoi-progression { display: grid; gap: .4rem; }
.envoi-progression[hidden] { display: none; }
.envoi-progression__barre { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.envoi-progression__barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--accent)); transition: width .2s linear; }
.envoi-progression__texte { margin: 0; font-size: .82rem; color: var(--muted); }
.form__retour { margin: 0; padding: .8rem 1rem; border-radius: var(--r-s, 12px); border: 1px solid var(--stroke); background: var(--surface); font-size: .88rem; line-height: 1.55; }
.form__retour[hidden] { display: none; }
.form__retour--alerte { border-color: rgba(251, 113, 133, .5); }

/* ---------- V7.3 — rubrique « Nos capacités » ---------- */
.capacites-hero { padding-top: clamp(8rem, 14vw, 10rem); }
/* V7.4 — quarante démonstrations, rangées par type de projet. Cartes sans
   flou d'arrière-plan : quarante « verres dépolis » pèseraient sur le rendu. */
.demos-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.demos-nav a { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem; border-radius: 99px; color: inherit; text-decoration: none; font-weight: 600; font-size: .92rem; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.demos-nav a:hover, .demos-nav a:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.demos-nav span { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 99px; background: var(--grad-brand); color: #fff; font-size: .75rem; }
.demos-categorie { scroll-margin-top: 6.5rem; }
.demos-categorie + .demos-categorie { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.demos-categorie__tete { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: 1.6rem; }
.demos-categorie__num { font: 800 clamp(2rem, 5vw, 3rem)/1 var(--police-titre); background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.demos-categorie__tete h2 { margin: 0 0 .3rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.demos-categorie__tete p { margin: 0; max-width: 640px; color: var(--muted); }
.demos-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .demos-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.demos-grille > li { display: grid; }
.demo-vignette { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--stroke); border-radius: var(--r-m); overflow: hidden; background: var(--surface); color: inherit; text-decoration: none; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.demo-vignette:hover, .demo-vignette:focus-visible { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }
.demo-vignette img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--stroke); border-bottom: 1px solid var(--stroke); }
.demo-vignette__corps { display: grid; align-content: start; gap: .2rem; padding: .85rem .95rem 1rem; }
.demo-vignette__corps strong { font-family: var(--police-titre); font-size: 1rem; }
.demo-vignette__corps small { color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.demo-vignette__resume { margin-top: .3rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.demo-vignette__points { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.demo-vignette__points i { padding: .15rem .5rem; border-radius: 99px; border: 1px solid var(--stroke); font-style: normal; font-size: .7rem; color: var(--muted); }
/* Téléphone : deux colonnes compactes plutôt que quarante cartes empilées. */
@media (max-width: 560px) {
  .demos-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .demos-nav a { justify-content: space-between; padding: .55rem .6rem .55rem .9rem; font-size: .82rem; line-height: 1.2; }
  .demos-grille { gap: .7rem; }
  .demo-vignette__corps { padding: .6rem .65rem .75rem; }
  .demo-vignette__corps strong { font-size: .9rem; }
  .demo-vignette__corps small { font-size: .64rem; letter-spacing: .03em; }
  .demo-vignette__resume, .demo-vignette__points { display: none; }
  .demos-categorie__tete { gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .demo-vignette, .demos-nav a { transition: none; } .demo-vignette:hover, .demos-nav a:hover { transform: none; } }
.demos__mention { margin: 1.6rem auto 0; max-width: 640px; text-align: center; font-size: .85rem; color: var(--muted); }
/* V7.6 — projets avancés : une grande carte après les dix démonstrations
   de la catégorie, cerclée du dégradé de la marque. */
.demos-avances { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.demos-avances__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: 1rem; }
.demos-avances__tete h3 { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.demos-avances__tete h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 14px var(--accent); }
.demos-avances__tete p { margin: 0; color: var(--muted); font-size: .92rem; }
.demos-avances__liste { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.demos-avances__liste > li { display: grid; }
.demo-avance { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--r-l); background: var(--surface); color: inherit; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
/* Liseré dégradé : un fond masqué qui ne laisse voir que 1,5 px de bord. */
.demo-avance::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.demo-avance:hover, .demo-avance:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 70px -30px rgba(139, 92, 246, .6); }
.demo-avance img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--stroke); }
.demo-avance__corps { display: grid; align-content: center; gap: .5rem; padding: clamp(1.2rem, 3vw, 2.2rem); }
.demo-avance__badge { justify-self: start; padding: .3rem .75rem; border-radius: 99px; background: var(--grad-brand); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-avance__corps strong { font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--police-titre); }
.demo-avance__corps small { color: var(--accent); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.demo-avance__resume { color: var(--muted); line-height: 1.55; }
.demo-avance__points { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.demo-avance__points i { padding: .2rem .6rem; border: 1px solid var(--stroke); border-radius: 99px; color: var(--muted); font-size: .75rem; font-style: normal; }
.demo-avance__lien { margin-top: .4rem; color: var(--accent); font-weight: 600; }
@media (max-width: 800px) {
  .demo-avance { grid-template-columns: minmax(0, 1fr); }
  .demo-avance img { height: auto; }
}
@media (max-width: 560px) {
  .demo-avance__corps { padding: 1rem 1rem 1.2rem; }
  .demo-avance__resume { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .demo-avance { transition: none; } .demo-avance:hover { transform: none; } }
.capacites-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .capacites-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .capacites-liste { grid-template-columns: 1fr; } }
.capacites-appel { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--r-l, 24px); display: grid; gap: 1rem; justify-items: center; }
.capacites-appel h2 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.capacites-appel p { margin: 0; max-width: 560px; color: var(--muted); }

/* Section de l'accueil : les quatre vignettes, cliquables. */
.accueil-demos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 980px) { .accueil-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .accueil-demos { grid-template-columns: 1fr; } }
.accueil-demo { display: grid; border-radius: var(--r-m); overflow: hidden; color: inherit; text-decoration: none; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.accueil-demo:hover, .accueil-demo:focus-visible { transform: translateY(-4px); border-color: var(--stroke-2, var(--stroke)); }
.accueil-demo__texte { display: grid; gap: .15rem; padding: .9rem 1rem 1.1rem; }
.accueil-demo__texte small { color: var(--accent); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.accueil-demo__texte span { color: var(--muted); font-size: .86rem; }
.accueil-demos__suite { display: flex; justify-content: center; margin-top: 2rem; }

/* Vignettes : un écran miniature par démonstration. */
.apercu-demo { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 1.1rem; background: radial-gradient(120% 120% at 0% 0%, rgba(124, 92, 255, .28), transparent 60%), radial-gradient(120% 120% at 100% 100%, rgba(34, 211, 238, .22), transparent 60%), var(--surface); overflow: hidden; }
.apercu-demo * { box-sizing: border-box; }
.ad-fenetre { display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.ad-fenetre--clair { background: #faf7f2; }
.ad-fenetre--sombre { background: #0f1420; }
.ad-barre { display: flex; gap: 4px; padding: 6px 8px; background: rgba(0, 0, 0, .08); }
.ad-fenetre--sombre .ad-barre { background: rgba(255, 255, 255, .06); }
.ad-barre i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b5f; }
.ad-barre i:nth-child(2) { background: #ffbd3f; }
.ad-barre i:nth-child(3) { background: #3fca5b; }
.ad-l { display: block; height: 5px; border-radius: 3px; background: #cdbfae; }
.ad-l--titre { height: 11px; background: #3a2f25; width: 90%; }
.ad-l--court { width: 55%; }
.ad-vitrine { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 8px 12px 10px; min-height: 0; }
.ad-vitrine__nav { display: flex; align-items: center; gap: 6px; font: 600 9px/1 Georgia, serif; color: #3a2f25; }
.ad-vitrine__nav b { margin-right: auto; font-weight: 600; }
.ad-vitrine__nav em { width: 18px; height: 4px; border-radius: 2px; background: #cdbfae; }
.ad-vitrine__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: center; min-height: 0; }
.ad-vitrine__texte { display: grid; gap: 5px; align-content: center; }
.ad-pastille { display: block; width: 40%; height: 11px; border-radius: 6px; background: #8a6d4f; margin-top: 3px; }
.ad-vitrine__arche { width: 100%; height: 100%; min-height: 0; }
.ad-vitrine__galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ad-vitrine__galerie i { height: 26px; border-radius: 4px; background: linear-gradient(135deg, #e9dccb, #c9b397); }
.ad-vitrine__galerie i:nth-child(2) { background: linear-gradient(135deg, #d9e0d2, #8a9a7b); }
.ad-vitrine__galerie i:nth-child(3) { background: linear-gradient(135deg, #efe3d6, #b98f6d); }
.ad-boutique { display: grid; grid-template-rows: auto 1fr; gap: 7px; padding: 8px 10px 10px; min-height: 0; }
.ad-boutique__nav { display: flex; justify-content: space-between; align-items: center; font: 700 9px/1 Georgia, serif; color: #2e2a26; }
.ad-panier { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #c9764f; color: #fff; font: 700 8px/1 var(--police-titre); }
.ad-boutique__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 0; }
.ad-produit { display: grid; gap: 4px; align-content: center; justify-items: center; padding: 5px; border-radius: 6px; }
.ad-produit svg { width: 70%; }
.ad-produit .ad-l { width: 60%; height: 4px; background: rgba(0, 0, 0, .18); }
.ad-tableau { display: grid; grid-template-columns: 22% 1fr; min-height: 0; }
.ad-tableau__menu { display: grid; align-content: start; gap: 6px; padding: 8px; background: rgba(255, 255, 255, .04); }
.ad-tableau__menu b { height: 8px; width: 70%; border-radius: 3px; background: #22d3ee; margin-bottom: 4px; }
.ad-tableau__menu i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.ad-tableau__corps { display: grid; grid-template-rows: auto 1fr auto; gap: 7px; padding: 8px; min-height: 0; }
.ad-tableau__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ad-tableau__kpi i { padding: 5px 6px; border-radius: 5px; background: rgba(255, 255, 255, .06); font-style: normal; }
.ad-tableau__kpi b { font: 700 9px/1 var(--police-titre); color: #e8ecf5; }
.ad-tableau__courbe { width: 100%; height: 100%; min-height: 34px; }
.ad-tableau__lignes { display: grid; gap: 4px; }
.ad-tableau__lignes i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .09); }
/* Posé en absolu dans la vignette : sa hauteur est alors définie, et les
   téléphones, dimensionnés en pourcentage de hauteur, ne débordent jamais. */
.apercu-demo { position: relative; }
.ad-mobile { position: absolute; inset: 8% 6%; display: flex; justify-content: center; align-items: center; }
/* Dimensionné par la hauteur : la vignette garde toujours ses deux téléphones entiers. */
.ad-tel { position: relative; z-index: 1; height: 92%; width: auto; aspect-ratio: 9 / 18; padding: 4px; border-radius: 14px; background: #10131a; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .7); }
.ad-tel--arriere { z-index: 0; margin-right: -8%; transform: rotate(-8deg) translateY(6%); opacity: .85; }
.ad-ecran { display: block; position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #eef3ea; }
.ad-ecran svg { width: 100%; height: 100%; display: block; }
.ad-ecran__stats { position: absolute; left: 6%; right: 6%; bottom: 6%; display: flex; justify-content: space-between; padding: 4px 5px; border-radius: 6px; background: #fff; font: 700 6px/1 var(--police-titre); color: #1f2a1c; }
.ad-ecran--liste { display: grid; align-content: start; gap: 5px; padding: 18px 6px 6px; background: #f6f3ee; }
.ad-ecran--liste i { height: 16px; border-radius: 5px; background: linear-gradient(90deg, #b9d3a8 30%, #fff 30%); }

/* Aperçu des e-mails (back-office) */
.apercu-email { display: block; width: 100%; max-width: 680px; height: 760px; margin: 1rem 0; border: 1px solid var(--stroke); border-radius: 14px; background: #F5F2EB; }
.apercu-email__texte pre { white-space: pre-wrap; font-size: .85rem; padding: 1rem; border-radius: 12px; background: var(--surface, rgba(255,255,255,.04)); overflow-x: auto; }

/* Devis : intertitres par provenance (Formule, Pack, Options, Prestations) */
.ligne-groupe { margin: 1rem 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ligne-groupe:first-child { margin-top: 0; }

/* Espace client : tableau de bord (données réelles du compte uniquement) */
.espace-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.espace-nav a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--stroke); font-size: .85rem; color: var(--muted); text-decoration: none; }
.espace-nav a:hover, .espace-nav a:focus-visible { color: var(--text); border-color: var(--accent, #5271FF); }
.espace-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.espace-tuile { display: grid; gap: .2rem; align-content: start; padding: 1rem; border-radius: 14px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--text) 3%, transparent); color: inherit; text-decoration: none; min-width: 0; scroll-margin-top: 90px; transition: border-color .2s, transform .2s; }
a.espace-tuile:hover, a.espace-tuile:focus-visible { border-color: var(--accent, #5271FF); transform: translateY(-2px); }
.espace-tuile__titre { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.espace-tuile strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.espace-tuile span:last-child { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .espace-tuile { transition: none; } a.espace-tuile:hover { transform: none; } }

/* Savoir-faire : packs et options à essayer dans chaque démonstration */
.demos-options { margin: 0 auto 2rem; max-width: 820px; padding: 1.2rem 1.4rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--stroke)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.demos-options h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.demos-options p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.demo-vignette__essais { display: block; margin-top: .55rem; font-size: .75rem; line-height: 1.45; color: var(--text); }
.demo-vignette__essais span { color: var(--accent); font-weight: 600; }