/* ============================================================
   L'ASSISTANT, partage par toutes les pages du site public.

   Sorti d'accueil.css le 9 septembre 2026 : le mode d'emploi le veut
   aussi, et /fr le voudra. Une page l'obtient en chargeant ce fichier
   et assistant.js, rien d'autre : le bouton et le panneau sont
   construits par le script, il n'y a aucun balisage a recopier.
   ============================================================ */

/* ===== Le bouton et le panneau =====
   Ajouté le 9 septembre 2026. C'est un cadre vers l'assistant hébergé, et
   non le script du fournisseur : la CSP du site interdit les scripts tiers
   et on ne l'a pas desserrée pour un widget. Seul frame-src a été ouvert,
   ce qui laisse script-src, style-src et connect-src intacts pour toute
   l'application et les pages patients. */

.assistant-bouton {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--foret); color: var(--carte-c); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(17, 18, 8, 0.22);
}
.assistant-bouton:hover { background: #1D3D23; }
.assistant-bouton svg { width: 26px; height: 26px; }
.assistant-bouton .assistant-fermer { display: none; }
.assistant-bouton[aria-expanded="true"] .assistant-ouvrir { display: none; }
.assistant-bouton[aria-expanded="true"] .assistant-fermer { display: block; }

.assistant-fenetre {
  --entete-fournisseur: 52px;
  position: fixed; right: 22px; bottom: 90px; z-index: 60;
  width: 400px; height: 620px; max-height: calc(100vh - 130px);
  background: var(--carte-c); border: 1.5px solid var(--filet);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(17, 18, 8, 0.20);
}
.assistant-fenetre[hidden] { display: none; }
.assistant-fenetre { display: flex; flex-direction: column; }

/* Notre en-tête, avec la vraie marque du site : la photo, le trait blanc par
   dessus, l'anneau. Le même montage que l'en-tête de la page, en plus petit.
   L'anneau passe en crème translucide, le vert de la marque serait invisible
   sur un fond vert. */
.assistant-entete {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 14px; background: var(--foret); color: var(--carte-c);
}
.assistant-entete .mk {
  width: 26px; height: 26px; border-radius: 8px; overflow: hidden;
  position: relative; flex: none; background: #0A0A08;
  box-shadow: 0 0 0 1.5px rgba(255, 253, 247, 0.38);
}
.assistant-entete .mk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.assistant-entete .mk svg { position: absolute; top: 8%; right: 11%; height: 56%; width: auto; }
.assistant-entete .marque {
  font-family: var(--serif); font-variation-settings: 'SOFT' 20, 'WONK' 1;
  font-size: 16px; font-weight: 650; letter-spacing: -0.01em;
}
.assistant-entete .fonction {
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 650; opacity: 0.72;
}

/* Le bouton d'agrandissement, à droite de la barre. Deux fois la surface,
   borné par la hauteur de l'écran pour ne jamais déborder. */
.assistant-agrandir {
  margin-left: auto; width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; cursor: pointer;
  background: rgba(255, 253, 247, 0.14); color: var(--carte-c);
}
.assistant-agrandir:hover { background: rgba(255, 253, 247, 0.26); }
.assistant-agrandir svg { width: 15px; height: 15px; }
.assistant-agrandir .reduire { display: none; }
.assistant-fenetre.grand .assistant-agrandir .agrandir { display: none; }
.assistant-fenetre.grand .assistant-agrandir .reduire { display: block; }

.assistant-fenetre.grand {
  width: 620px; height: calc(100vh - 120px); max-height: calc(100vh - 120px);
}

/* Le cadre est remonté de la hauteur du bandeau de Dify, qui répète le nom
   sans rien ajouter. Une seule valeur à corriger s'ils la changent un jour. */
.assistant-corps { flex: 1; overflow: hidden; position: relative; }
.assistant-corps iframe {
  position: absolute; left: 0; top: calc(0px - var(--entete-fournisseur));
  width: 100%; height: calc(100% + var(--entete-fournisseur));
  border: 0; display: block;
}

/* Sur téléphone la fenêtre prend la largeur, sinon elle déborde. */
@media (max-width: 560px) {
  .assistant-bouton { right: 16px; bottom: 16px; }
  .assistant-fenetre,
  .assistant-fenetre.grand {
    right: 12px; left: 12px; bottom: 84px; width: auto;
    height: calc(100vh - 110px); max-height: calc(100vh - 110px);
  }
  /* La fenêtre remplit déjà l'écran, il n'y a rien à agrandir. */
  .assistant-agrandir { display: none; }
}