/* Peau de la face praticien — mesurée dans le CSS calculé de Docdialy Soft
 * (https://demouro.docdialy.com) le 10/09/2026, pas prise sur le site public.
 *
 * ⚠️ La charte de _ops/CHARTE_GRAPHIQUE.md décrit le SITE PUBLIC : bleu #006293,
 * Lexend et Fredoka. Le LOGICIEL du praticien, lui, est turquoise et en Roboto.
 * La bulle vit dans le logiciel : c'est cette peau-là qu'elle porte, sinon elle
 * ressemble à un corps étranger collé sur la page.
 *
 * Le tableau de bord des agentes, lui, a sa propre peau (sav/sav.css) : rail sombre.
 * Deux publics, deux peaux, volontairement.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* relevés dans le CSS calculé */
  --bleu: #006293;             /* charte : la bulle du praticien */
  --turquoise: #50C6D9;        /* rgb(80, 198, 217) — en-tête du logiciel */
  --turquoise-fonce: #33aec2;
  --vert-doux: #A8D59C;        /* fin du dégradé du rail latéral */
  --degrade-rail: linear-gradient(197deg, #50C6D9 0%, #A8D59C 100%);

  --texte: #333333;
  --texte-doux: #6C6C6C;
  --texte-pale: #9AA6AD;
  --fond: #FFFFFF;
  --fond-doux: #F4FAFF;        /* fond des boutons du logiciel */
  --fond-turquoise: #E4F5F8;
  --fond-vert: #EDF6EA;
  --fond-jaune: #FDF6D8;
  --bord: #E3EAEF;
  --bord-fort: #D9E3E9;
  --rouge: #C0392B;

  /* le logiciel écrit tout en Roboto, corps à 16 px */
  --police: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 10px;
  --rayon-pilule: 20px;        /* les boutons du logiciel sont des pilules */
  --rayon-bulle: 14px;
}

* { box-sizing: border-box; }

/* L'attribut hidden est posé par le navigateur avec une spécificité très faible :
   le moindre "display: flex" écrit ensuite le neutralise, et deux écrans se
   superposent sans que rien ne signale l'erreur. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font-family: inherit; font-size: 14px; color: var(--texte); }
input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--turquoise-fonce); outline-offset: 1px;
}

.bouton-plein {
  background: var(--turquoise);
  color: #fff;
  border-radius: var(--rayon-pilule);
  padding: 10px 18px;
  font-size: 14px; font-weight: 500;
}
.bouton-plein:hover { background: var(--turquoise-fonce); }
.bouton-plein:disabled { background: var(--bord-fort); color: #fff; cursor: not-allowed; }

.bouton-vide {
  background: var(--fond-doux);
  color: var(--texte-doux);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-pilule);
  padding: 8px 15px;
  font-size: 13px;
}
.bouton-vide:hover { border-color: var(--turquoise); color: var(--turquoise-fonce); }

.etiquette {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
/* Les trois états portent les mots du tableau de bord : nouveau, en cours, traité. */
.etiquette-nouveau { background: var(--fond-jaune); color: #6b5c02; }
.etiquette-prise_en_charge { background: var(--fond-turquoise); color: #175e6b; }
.etiquette-attente_medecin { background: var(--fond-turquoise); color: #175e6b; }
.etiquette-resolu { background: var(--fond-vert); color: #3d6b33; }
.etiquette-remonte { background: #FDECF0; color: #9c2b45; }

.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-pale); flex: none; }
.pastille.en-ligne { background: var(--vert-doux); }

/* Mot-symbole Docdialy : « Doc » puis « dialy ».
   https://docdialy.com/logo.svg répond 403 hors du site — une interface ne doit pas
   dépendre d'une image servie par un domaine qu'on ne contrôle pas. Le vrai fichier
   reprend sa place tout seul s'il est déposé dans public/commun/logo.svg. */
.logo-mot {
  font-family: var(--police);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--turquoise-fonce);
  white-space: nowrap;
}
.logo-mot > span { color: var(--vert-doux); }
.logo-mot.sur-turquoise { color: #fff; }
.logo-mot.sur-turquoise > span { color: #eafaf2; }
.logo-image { width: auto; display: block; }
.logo-image.sur-turquoise { filter: brightness(0) invert(1); }