/* ============================================================================
   EDDY, l'assistant de l'écosystème EUDUC, aux couleurs de HOLANGCOURS.

   LA SIGNATURE D'EDDY EST GARDÉE : mêmes formes, mêmes tailles, mêmes rayons,
   mêmes animations, même disposition. Seules les COULEURS changent, et elles ne
   sont pas choisies ici : elles sont prises dans les tokens du site, source
   unique. Aucun hexadécimal dans ce fichier.

   LES VARIABLES SONT DÉCLARÉES DANS .hol-scope, jamais dans :root : le site
   cohabite avec euduc.com en production, et deux chartes qui écrivent dans la
   même racine finissent par se marcher dessus.

   TROIS ÉCARTS AVEC LA FEUILLE D'ORIGINE, tous dictés par la charte ou par les
   appareils que ce site doit servir :

   1. LE ROUGE EST L'IDENTITÉ, JAMAIS UNE ACTION. Il porte donc l'avatar et le
      liseré du bouton flottant, et rien de cliquable. Le bouton d'envoi et les
      puces de suggestion, qui sont des actions, prennent le bleu de la marque.

   2. « color-mix() » est remplacé par des tokens. Il manque encore sur les
      Android anciens, que ce site doit servir, et une couleur qui ne se calcule
      pas laisse un fond transparent.

   3. La police est celle du site. Un assistant écrit dans une autre police
      qu'aucune autre page n'utilise se voit tout de suite comme une pièce
      rapportée.
   ========================================================================== */

.hol-scope {
  --eddy-primary:   var(--hol-brand);            /* bulle du visiteur, bouton flottant */
  /* La barre prend le bleu le plus profond de la marque : elle porte une photo
     et trois boutons, et c'est le fond qui doit les tenir. Le bouton flottant
     et les bulles gardent le bleu d'action, plus clair. */
  --eddy-barre:     var(--hol-brand-active);
  --eddy-primary-2: var(--hol-brand-active);     /* variante foncée */
  --eddy-accent:    var(--hol-accent);           /* IDENTITÉ seulement : avatar, liseré */
  --eddy-on-accent: var(--hol-text-inverse);     /* ce qui se pose sur l'accent */
  --eddy-bg:        var(--hol-surface-1);        /* panneau, barre de saisie */
  --eddy-bg-2:      var(--hol-surface-0);        /* fond de la conversation */
  --eddy-card:      var(--hol-surface-1);        /* bulles d'Eddy */
  --eddy-line:      var(--hol-border-subtle);
  --eddy-text:      var(--hol-text-primary);
  --eddy-link:      var(--hol-brand);
  --eddy-muted:     var(--hol-text-muted);
  /* Le coin bas droit est partagé : le bouton flottant d'Eddy se pose en bas,
     la remontée en haut se range au-dessus de lui. Une seule valeur commande
     l'écart au bord, pour que la pile reste alignée. */
  --eddy-bord: clamp(14px, 3vw, 28px);
  --eddy-taille: 60px;
}

/* ---- Bouton flottant (ouvre Eddy) ---- */
.eu-eddy-launch {
  position: fixed; right: var(--eddy-bord); bottom: var(--eddy-bord); z-index: 70;
  width: var(--eddy-taille); height: var(--eddy-taille); border-radius: var(--hol-r-pill);
  background: var(--eddy-primary); color: var(--hol-text-inverse);
  border: 2px solid var(--eddy-accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--hol-shadow-3);
  transition: transform .2s ease, box-shadow .2s ease, bottom .2s ease;
}
.eu-eddy-launch:hover { transform: translateY(-3px); }
.eu-eddy-launch.is-hidden { display: none; }

/* ---- Panneau ---- */
.eu-eddy {
  position: fixed; right: var(--eddy-bord); bottom: var(--eddy-bord); z-index: 71;
  width: 370px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 44px);
  background: var(--eddy-bg); border: 1px solid var(--eddy-line);
  border-radius: var(--hol-r-lg); overflow: hidden;
  display: none; flex-direction: column;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  box-shadow: var(--hol-shadow-3);
}
.eu-eddy.is-open { display: flex; animation: euPop .22s ease; }

/* ---- Invite proactive ---- */
.eu-eddy-nudge {
  position: fixed; right: var(--eddy-bord);
  bottom: calc(var(--eddy-bord) + var(--eddy-taille) + 12px); z-index: 70; max-width: 256px;
  background: var(--hol-surface-1); border: 1px solid var(--eddy-line);
  border-radius: var(--hol-r-sm); padding: 13px 30px 13px 13px;
  box-shadow: var(--hol-shadow-2); display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer; animation: euPop .25s ease;
  font-family: Inter, system-ui, sans-serif;
}
.eu-eddy-nudge .eu-eddy-nudge-ava { flex: none; width: 30px; height: 30px; border-radius: var(--hol-r-pill); background: var(--eddy-accent); color: var(--eddy-on-accent); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.eu-eddy-nudge .eu-eddy-nudge-txt { font-size: 13px; line-height: 1.45; color: var(--eddy-text); }
.eu-eddy-nudge .eu-eddy-nudge-x { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 18px; line-height: 1; color: var(--eddy-muted); cursor: pointer; }
@keyframes euPop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Le bandeau cookies occupe le bas de l'écran tant qu'on n'a pas répondu.
        Toute la pile monte au-dessus de lui plutôt que de se cacher dessous.
        L'attribut est posé par le script du pied de page, pas par « :has() »,
        qui manque encore sur les Android anciens. ---- */
.eu-eddy-launch[data-bandeau="1"],
.eu-eddy[data-bandeau="1"] { bottom: calc(var(--hol-bandeau-h, 104px) + 12px); }
.eu-eddy-nudge[data-bandeau="1"] { bottom: calc(var(--hol-bandeau-h, 104px) + 12px + var(--eddy-taille) + 12px); }

/* ---- En-tête ---- */
/* LA BARRE REPREND LE BLOC IMAGE DU SITE : une photo qui se perd dans le bleu.
   Même texture, même identité que les cartes de Tarifs et d'Accompagnement.

   La photo passe par « --eddy-photo », posée sur le panneau par le gabarit.
   Un fond CSS plutôt qu'une balise <img> : l'image n'est demandée qu'à
   l'ouverture du panneau, pas au chargement de chaque page pour des gens qui
   n'ouvriront peut-être jamais la conversation.

   Le voile se termine dense À DROITE aussi : les trois boutons s'y trouvent, et
   une icône blanche sur une photo claire ne se voit plus. Le dégradé ménage
   donc la photo au milieu, et garde les deux bords tenus. */
.eu-eddy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--eddy-barre); color: var(--hol-text-inverse); padding: 14px 16px; position: relative; overflow: hidden; cursor: pointer; }
.eu-eddy-head::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: 0;
  background-image: var(--eddy-photo); background-size: cover; background-position: 50% 38%;
  pointer-events: none; }
.eu-eddy-head::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
      var(--eddy-barre) 0%,
      var(--eddy-barre) 30%,
      var(--hol-hero-scrim-a) 52%,
      var(--hol-hero-scrim-b) 72%,
      var(--hol-hero-scrim-a) 100%); }
.eu-eddy-id { display: flex; align-items: center; gap: 11px; position: relative; z-index: 2; }
.eu-eddy-ava { width: 38px; height: 38px; border-radius: var(--hol-r-pill); background: var(--eddy-accent); color: var(--eddy-on-accent); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; }
/* La barre porte maintenant trois boutons : le bloc du nom doit pouvoir se
   rétrécir, sinon l'état passe à la ligne et la barre grandit. */
.eu-eddy-id { min-width: 0; }
.eu-eddy-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.eu-eddy-titles small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-eddy-titles strong { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; }
.eu-eddy-titles small { font-size: 11.5px; color: var(--hol-text-inverse-2); }
.eu-eddy-tools { display: flex; gap: 4px; position: relative; z-index: 2; }
.eu-eddy-iconbtn[hidden] { display: none; }
.eu-eddy-iconbtn { width: 32px; height: 32px; border-radius: var(--hol-r-sm); background: transparent; border: none; color: var(--hol-text-inverse-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.eu-eddy-iconbtn:hover { background: var(--hol-surface-sur-sombre); color: var(--hol-text-inverse); }
.eu-eddy.is-muted .eu-eddy-wave { display: none; }

/* ---- Corps et bulles ---- */
/* LE DÉFILEMENT S'ARRÊTE AU BORD DE LA CONVERSATION. Sans cela, arrivé en bas
   du fil, la molette continue sur la page derrière : on croit faire défiler la
   conversation et c'est le site qui bouge. Le script complète cette règle pour
   les cas qu'elle ne couvre pas (conversation trop courte pour défiler,
   navigateurs anciens). */
.eu-eddy-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; background: var(--eddy-bg-2); display: flex; flex-direction: column; gap: 12px; }
.eu-eddy-msg { max-width: 84%; font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: var(--hol-r-sm); }
.eu-eddy-msg a { color: var(--eddy-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.eu-eddy-eddy { align-self: flex-start; background: var(--eddy-card); border: 1px solid var(--eddy-line); color: var(--eddy-text); border-bottom-left-radius: 5px; }
.eu-eddy-user { align-self: flex-end; background: var(--eddy-primary); color: var(--hol-text-inverse); border-bottom-right-radius: 5px; }
/* Un lien dans la bulle du visiteur se pose sur le bleu de la marque : il lui
   faut une teinte claire, sinon il disparaît dans son propre fond. */
.eu-eddy-user a { color: var(--hol-brand-clair); }
.eu-eddy-typing { align-self: flex-start; background: var(--eddy-card); border: 1px solid var(--eddy-line); border-radius: var(--hol-r-sm); border-bottom-left-radius: 5px; display: inline-flex; gap: 5px; padding: 14px 16px; }
.eu-eddy-typing span { width: 7px; height: 7px; border-radius: var(--hol-r-pill); background: var(--eddy-muted); display: inline-block; animation: euTyping 1.2s infinite ease-in-out; }
.eu-eddy-typing span:nth-child(2) { animation-delay: .18s; }
.eu-eddy-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes euTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---- Suggestions ---- */
.eu-eddy-sugg { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px 0; background: var(--eddy-bg); }
.eu-eddy-chip { font-size: 12.5px; font-weight: 600; color: var(--hol-brand); background: var(--hol-brand-wash); border: 1px solid var(--hol-brand-clair); border-radius: var(--hol-r-pill); padding: 7px 12px; cursor: pointer; transition: background .2s, border-color .2s, transform .18s ease; }
.eu-eddy-chip:hover { background: var(--hol-brand); color: var(--hol-text-inverse); border-color: var(--hol-brand); transform: translateY(-2px); }
.eu-eddy-chip:focus-visible { outline: 2px solid var(--hol-focus); outline-offset: 2px; }

/* ---- Saisie et réseaux ---- */
.eu-eddy-form { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--eddy-bg); border-top: 1px solid var(--eddy-line); }
.eu-eddy-form input { flex: 1; font: inherit; font-size: 16px; color: var(--eddy-text); padding: 11px 13px; border: 1px solid var(--hol-border-strong); border-radius: var(--hol-r-sm); background: var(--hol-surface-1); outline: none; transition: border-color .2s; }
.eu-eddy-form input:focus-visible { border-color: var(--hol-brand); outline: 2px solid var(--hol-focus); outline-offset: 1px; }
.eu-eddy-send { width: 42px; height: 42px; flex: none; border-radius: var(--hol-r-sm); background: var(--hol-brand); color: var(--hol-text-inverse); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .2s; }
.eu-eddy-send:hover { transform: translateY(-2px); background: var(--hol-brand-hover); }
.eu-eddy-send:focus-visible { outline: 2px solid var(--hol-focus); outline-offset: 2px; }
.eu-eddy-social { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 4px 14px 12px; background: var(--eddy-bg); }
.eu-eddy-social > span { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--eddy-muted); margin-right: 3px; }
.eu-eddy-social a { width: 30px; height: 30px; border-radius: var(--hol-r-pill); display: flex; align-items: center; justify-content: center; color: var(--hol-brand); background: var(--hol-brand-wash); text-decoration: none; transition: background .2s ease, color .2s ease; }
.eu-eddy-social a:hover { background: var(--hol-brand); color: var(--hol-text-inverse); }

/* ---- Téléphone : plein écran, comme la feuille d'origine ---- */
@media (max-width: 560px) {
  .eu-eddy, .eu-eddy[data-bandeau="1"] { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eu-eddy.is-open, .eu-eddy-nudge { animation: none; }
  .eu-eddy-typing span { animation: none; }
  .eu-eddy-launch, .eu-eddy-chip, .eu-eddy-send { transition: none; }
}

/* ---- Le choix de la langue de la conversation ----------------------------
   Elle se demande au premier mot, dans les deux langues, et se change ensuite
   d'un bouton dans la barre. Ce n'est pas la langue du site : on peut lire en
   français et vouloir s'exercer en anglais. */
.eu-eddy-lang { width: auto; min-width: 34px; padding: 0 9px;
                font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
                letter-spacing: .06em;
                border: 1px solid var(--hol-bordure-sur-sombre); }
.eu-eddy-langues { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.eu-eddy-langues .eu-eddy-chip { font-size: 13.5px; padding: 8px 16px; }

/* ---- L'avis de changement de langue --------------------------------------
   PAS UNE TRACE DANS LE FIL. Un repère laissé dans la conversation s'empile :
   dix bascules, dix lignes, et la conversation devient un journal de bascules.
   C'est un avis passager, un seul élément réemployé, qui se montre et s'efface.
   Vert d'état système, avec sa coche et son libellé : jamais la couleur seule. */
.eu-eddy-zone-avis { position: relative; z-index: 3; height: 0; flex: 0 0 auto; }
.eu-eddy-avis[hidden] { display: none; }
.eu-eddy-avis { position: absolute; top: 10px; left: 50%; margin: 0;
                display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
                padding: 7px 15px; border-radius: var(--hol-r-pill);
                background: var(--hol-succes); color: var(--hol-text-inverse);
                font-size: 13px; font-weight: 600; box-shadow: var(--hol-shadow-2);
                opacity: 0; transform: translate(-50%, -10px);
                transition: opacity .22s ease, transform .22s ease; }
.eu-eddy-avis[data-vu="1"] { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .eu-eddy-avis { transition: none; } }