/* =============================================================================
   design.css — le système de design de l'outil (toutes les pages).
   Pour habiller l'outil aux couleurs d'un client : modifier SEULEMENT le bloc
   « CHARTE » ci-dessous. Tout le reste en découle.
   ============================================================================= */

/* ===== CHARTE ===== */
:root {
  --fond: #F5F6F8;          /* fond des pages */
  --surface: #FFFFFF;       /* cartes, panneaux */
  --texte: #1F2430;         /* texte principal */
  --texte-2: #5D6576;       /* texte secondaire (version adoucie du texte) */
  --accent: #3B5BDB;        /* couleur principale (boutons, liens) — texte blanc dessus : contraste 5,9:1 */
  --texte-sur-accent: #FFFFFF;
  --accent-pale: #E8EDFC;   /* l'accent très éclairci (mes bulles de discussion) */
  --accent-2: #0CA678;      /* couleur secondaire */
  --vert: #2E9E6A;
  --rouge: #D9443B;
  --orange: #E8590C;
  --bordure: #E1E4EA;       /* un peu plus foncée que le fond */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* ===== fin de la charte ===== */

:root {
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(31, 36, 48, .06), 0 6px 20px rgba(31, 36, 48, .07);
  --ombre-forte: 0 12px 40px rgba(31, 36, 48, .18);
  --transition: 150ms ease;
  --anneau: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--anneau); }
[hidden] { display: none !important; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----- Marque (initiale de l'outil) ----- */
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marque-carre {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); color: var(--texte-sur-accent);
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
}
.marque-nom { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Carte ----- */
.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px;
}
.carte-titre { font-size: 16px; font-weight: 600; margin: 0 0 12px; }

/* ----- Boutons « pilule » ----- */
.bouton, .bouton-secondaire, .bouton-discret {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 18px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.bouton { background: var(--accent); color: var(--texte-sur-accent); }
.bouton:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.bouton:active, .bouton-secondaire:active { transform: translateY(1px); }
.bouton-secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.bouton-secondaire:hover { border-color: color-mix(in srgb, var(--texte) 30%, var(--bordure)); }
.bouton-discret { background: transparent; color: var(--texte-2); padding: 8px 12px; }
.bouton-discret:hover { color: var(--texte); background: color-mix(in srgb, var(--texte) 6%, transparent); }
.bouton-danger { color: var(--rouge); }
.bouton-grand { min-height: 52px; padding: 12px 26px; font-size: 16px; }
.bouton-large { width: 100%; }
.bouton:disabled, .bouton-secondaire:disabled, .bouton-discret:disabled { opacity: .55; cursor: default; transform: none; }
.bouton-icone { min-width: 40px; padding: 8px; }
.bouton svg, .bouton-secondaire svg, .bouton-discret svg { width: 18px; height: 18px; flex: none; }

/* ----- Pastille d'état : point de couleur + texte ----- */
.pastille {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  background: color-mix(in srgb, var(--texte) 6%, var(--surface)); color: var(--texte);
  border: 0;
}
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texte-2); flex: none; }
.pastille.vert { background: color-mix(in srgb, var(--vert) 12%, var(--surface)); }
.pastille.vert::before { background: var(--vert); }
.pastille.orange { background: color-mix(in srgb, var(--orange) 12%, var(--surface)); }
.pastille.orange::before { background: var(--orange); }
.pastille.rouge { background: color-mix(in srgb, var(--rouge) 12%, var(--surface)); }
.pastille.rouge::before { background: var(--rouge); }
.pastille.accent { background: var(--accent-pale); }
.pastille.accent::before { background: var(--accent); }
.pastille.anime::before { animation: pulsation 1.4s ease-in-out infinite; }
button.pastille { cursor: pointer; transition: box-shadow var(--transition); }
button.pastille:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 35%, transparent); }
@keyframes pulsation { 50% { opacity: .35; } }

/* ----- Champs ----- */
.champ-libelle { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.champ, input.champ, textarea.champ {
  width: 100%; font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--texte);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ:focus { outline: none; border-color: var(--accent); box-shadow: var(--anneau); }
.champ::placeholder { color: color-mix(in srgb, var(--texte-2) 75%, transparent); }
.aide { font-size: 13px; color: var(--texte-2); margin: 8px 0 0; }
.erreur { font-size: 14px; color: var(--rouge); margin: 10px 0 0; min-height: 1.4em; }
.succes { font-size: 15px; color: var(--vert); font-weight: 600; }

/* ----- Onglets ----- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); padding: 0 12px; }
.onglet {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--texte-2);
  transition: color var(--transition);
}
.onglet:hover { color: var(--texte); }
.onglet[aria-selected="true"] { color: var(--accent); }
.onglet[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--accent);
}

/* ----- Fenêtre (modale) ----- */
.fenetre-fond {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 24, 33, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: apparition var(--transition);
}
.fenetre {
  width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); border-radius: 20px; box-shadow: var(--ombre-forte);
  padding: 26px 24px 22px; position: relative;
  animation: monte 200ms ease;
}
.fenetre-titre { font-size: 20px; font-weight: 700; margin: 0 40px 6px 0; }
.fenetre-sous-titre { color: var(--texte-2); margin: 0 0 18px; }
.fenetre-fermer { position: absolute; top: 14px; right: 14px; }
@keyframes apparition { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ----- Toast (message éphémère) ----- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  background: var(--texte); color: #fff; border-radius: 12px; padding: 11px 16px;
  font-size: 14px; box-shadow: var(--ombre-forte); animation: monte 200ms ease;
}
.toast.erreur-toast { background: var(--rouge); }
.toast.succes-toast { background: var(--vert); }

/* ----- État vide ----- */
.vide { text-align: center; color: var(--texte-2); padding: 32px 16px; }
.vide-titre { color: var(--texte); font-size: 18px; font-weight: 600; margin: 12px 0 6px; }

/* ----- Squelette (chargement) ----- */
.squelette {
  border-radius: 8px; min-height: 14px;
  background: linear-gradient(90deg, var(--bordure) 0%, color-mix(in srgb, var(--bordure) 40%, var(--surface)) 50%, var(--bordure) 100%);
  background-size: 200% 100%; animation: chargement 1.2s linear infinite;
}
@keyframes chargement { to { background-position: -200% 0; } }

/* ----- Étapes numérotées (fenêtres guidées) ----- */
.etapes-guidees { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.etapes-guidees > li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.etape-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-pale); color: var(--accent); font-weight: 700; font-size: 14px;
}
.commande {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: #1F2430; color: #fff; border-radius: 10px; padding: 6px 6px 6px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
}
.commande code { flex: 1; }
.commande .bouton-secondaire { min-height: 32px; padding: 4px 12px; font-size: 13px; }

/* ----- Page de connexion ----- */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.page-connexion .carte { width: 100%; max-width: 400px; padding: 32px 28px; }
.page-connexion .marque { justify-content: center; margin-bottom: 24px; }
.page-connexion h1 { font-size: 20px; font-weight: 600; margin: 0 0 20px; text-align: center; }
.page-connexion .champ { margin-bottom: 16px; }
.page-connexion .bouton { width: 100%; margin-top: 4px; min-height: 46px; font-size: 15px; }
.page-connexion .erreur { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}