/* =========================================================================
   ALFRED — la fenêtre du majordome
   Posée le 13 septembre 2026.

   CE QUE CE FICHIER REFUSE DE FAIRE, ET POURQUOI

   Pas de bulles. La bulle est la signature du clavardage de service à la
   clientèle, et elle range le Manoir à côté d'un formulaire de retour de
   colis. Ici les deux voix se distinguent autrement : Alfred porte un filet
   or et occupe la pleine largeur, le visiteur est en retrait et plus discret.
   On lit une correspondance, pas une messagerie.

   Pas de trois points qui sautillent pendant l'attente. Un filet or qui
   respire, et rien d'autre.

   Pas de pastille rouge, pas d'ouverture automatique, pas de rebond pour
   attirer l'oeil. Un majordome se tient dans l'entrée et attend qu'on
   s'adresse à lui.

   LES COULEURS VIENNENT DU SITE, elles ne sont pas réinventées ici : ce sont
   les variables de l'accueil et de /le-cercle, recopiées sous un préfixe qui
   leur est propre pour qu'aucune page ne puisse les écraser par accident.
   ========================================================================= */

.alfred {
  --alf-noir:    #0A0908;
  --alf-panneau: #121110;
  --alf-blanc:   #F4EFE6;
  --alf-or:      #C9A24B;
  --alf-or-clair:#E4C87E;
  --alf-filet:   rgba(244, 239, 230, 0.12);
  --alf-discret: rgba(244, 239, 230, 0.58);
  --alf-corps:   'Inter', system-ui, -apple-system, sans-serif;
  --alf-titre:   'Playfair Display', Georgia, serif;

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  font-family: var(--alf-corps);
}

/* ── Le bouton, fermé ──────────────────────────────────────────────────── */
/*
   UN DISQUE À DOUBLE FILET, ET UNE CLOCHE DE RÉCEPTION AU CENTRE.

   Cinq versions ont échoué avant celle-ci, et chacune enseigne quelque chose.
   L'armoirie entière à vingt-six pixels : une tache, le dessin est trop
   dense. Une plaque rectangulaire au filet d'or : lisible, encombrante, et
   elle s'étirait sur toute la largeur d'un téléphone. Un A en Playfair :
   propre et muet, on ne comprenait pas à quoi il sert. Le cygne de l'armoirie
   repeint en or : il disait la maison sans dire le service. Une bulle de
   conversation : elle disait le service, mais sa queue tirait la cloche hors
   du centre et on ne reconnaissait plus l'objet.

   Ici la cloche est CENTRÉE et assez grande pour se lire : c'est l'objet du
   majordome, celui qu'on frappe pour appeler quelqu'un. Le double filet
   rappelle la gravure d'une carte, ce qui est le registre du domaine.

   POURQUOI PAS UN DISQUE PLEIN, or ou crème. Le site porte déjà un bouton
   plein en or, « Demander la brochure », qui est son appel principal. Un
   second disque plein lui disputerait l'oeil sur la même page, et le
   majordome n'a pas à concurrencer la porte d'entrée.

   Le trait est blanc et non or : sur les photographies du site, chandeliers
   et cadres dorés, l'or se fond dans le décor. Le blanc tient partout.
*/

.alfred-appel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--alf-panneau);
  /* Un filet franc de deux pixels. Le double filet gravé avait plus de
     caractère et moins de netteté : son anneau intérieur, à un pixel sur un
     écran ordinaire, rendait un gris sale au lieu d'un trait. Un seul trait,
     net, tient mieux le rôle. */
  border: 2px solid var(--alf-blanc);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* LA CLOCHE EST VECTORIELLE, et ce n'est pas un détail de confort.
   Elle a d'abord été un PNG de quatre-vingt-dix pixels de haut, affiché à
   trente-deux. Sur un téléphone à trois fois la densité, il aurait fallu
   quatre-vingt-seize pixels de source : elle rendait donc floue, exactement
   là où on la regarde de près. Un tracé reste net à toutes les densités, et
   il pèse moins qu'un fichier à charger. */
.alfred-appel svg {
  display: block;
  width: 36px;
  height: 36px;
}

.alfred-appel:hover,
.alfred-appel:focus-visible {
  transform: translateY(-2px);
  border-color: var(--alf-or-clair);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
  outline: none;
}

/* Le nom, pour qui lit l'écran. Il ne s'affiche jamais. */
.alfred-appel-role {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.alfred-appel[hidden],
.alfred-panneau[hidden] { display: none; }

/* ── Le voile ──────────────────────────────────────────────────────────── */
/*
   SUR TÉLÉPHONE, LA CONVERSATION S'ISOLE DE LA PAGE.

   Le panneau laisse voir le site au-dessus de lui, et c'est voulu : on reste
   là où l'on était. Mais selon l'endroit de la page, ce qui dépasse peut être
   n'importe quoi : un titre, un bouton, le « Bienvenue au Manoir Blackswan »
   du haut de l'accueil, en or, juste au-dessus d'une conversation qui vient
   de commencer. Deux messages d'accueil l'un sur l'autre, et l'oeil ne sait
   plus lequel lire.

   Un voile règle cela sans transformer la fenêtre en page : le site reste
   visible et reconnaissable, il passe simplement au second plan. C'est ce que
   fait toute fenêtre de conversation sur un téléphone, et ce n'est pas une
   mode : sur un petit écran, deux choses au premier plan n'en font aucune.

   Sur grand écran, pas de voile. Il y a la place pour les deux, et masquer la
   page pour une fenêtre de trois cent quatre-vingts pixels serait
   disproportionné.
*/
.alfred-voile { display: none; }

@media (max-width: 520px) {
  .alfred-voile {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 9, 8, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: alfred-voile-vient 0.3s ease both;
  }
  .alfred-voile[hidden] { display: none; }
}

@keyframes alfred-voile-vient {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Le panneau, ouvert ────────────────────────────────────────────────── */

.alfred-panneau {
  display: flex;
  flex-direction: column;
  width: 384px;
  height: 560px;
  max-height: calc(100vh - 48px);
  background: var(--alf-noir);
  border: 1px solid var(--alf-filet);
  border-radius: 2px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  /* Elle monte depuis le bouton plutôt que d'apparaître d'un coup. Trois
     dixièmes de seconde : assez pour que l'oeil suive d'où elle vient, trop
     court pour qu'on attende. */
  animation: alfred-ouvre 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transform-origin: bottom right;
}

@keyframes alfred-ouvre {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Le filet d'or en tête du panneau. Il tient lieu de sceau : c'est le seul
   endroit où la couleur de la marque occupe toute la largeur. */
.alfred-panneau::before {
  content: '';
  display: block;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg,
    rgba(201, 162, 75, 0) 0%,
    var(--alf-or) 22%,
    var(--alf-or-clair) 50%,
    var(--alf-or) 78%,
    rgba(201, 162, 75, 0) 100%);
}

/* L'en-tête porte le LOGO DU DOMAINE, celui de la barre de navigation du
   site, armoirie et mot-symbole ensemble. C'est la maison qui se présente, et
   Alfred vient après elle : il est son majordome, pas une marque à lui.

   C'est aussi le seul endroit de la fenêtre où l'armoirie a la place d'être
   reconnue. À cent soixante pixels de large, le mot-symbole se lit et le
   dessin tient. */
.alfred-entete {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 44px 18px;
  border-bottom: 1px solid var(--alf-filet);
  flex: none;
}

.alfred-entete img {
  width: 160px;
  height: auto;
  display: block;
  flex: none;
}

.alfred-entete-mots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  line-height: 1;
}

/* Le filet qui sépare la maison de son majordome. Court, centré, discret. */
.alfred-entete-mots::before {
  content: '';
  width: 34px;
  height: 1px;
  background: rgba(201, 162, 75, 0.5);
}

.alfred-entete-role {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alf-or);
}

.alfred-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  flex: none;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--alf-discret);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.alfred-fermer:hover,
.alfred-fermer:focus-visible {
  color: var(--alf-blanc);
  border-color: var(--alf-filet);
  outline: none;
}

/* ── Les messages ──────────────────────────────────────────────────────── */

.alfred-fil {
  flex: 1;
  /* LES MESSAGES PARTENT DU BAS, comme dans toute fenêtre de conversation.
     Ils partaient du haut, et le vide s'étalait dessous : c'est ce qui faisait
     « page ouverte » au lieu de « conversation ».

     MAIS PAS AVEC `justify-content: flex-end`, et c'est un piège connu du
     navigateur : sur un conteneur qui défile, cette règle rend le HAUT du
     contenu inatteignable dès qu'il dépasse. Le premier message existait, il
     était poussé au-dessus de la zone visible et aucun geste ne le ramenait.
     C'est le défaut qu'Emmanuel a décrit : « la page ouvre mais sans message,
     on doit toujours scroller pour voir le haut ».

     La façon qui fonctionne : on laisse l'alignement normal, et on pousse le
     PREMIER message vers le bas avec une marge automatique. Le résultat est
     le même quand il y a peu de contenu, et le défilement reste entier quand
     il y en a beaucoup. */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 18px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 239, 230, 0.18) transparent;
}

.alfred-fil::-webkit-scrollbar { width: 6px; }
.alfred-fil::-webkit-scrollbar-thumb {
  background: rgba(244, 239, 230, 0.18);
  border-radius: 3px;
}

/* La marge qui colle le fil en bas tant qu'il n'est pas plein. */
.alfred-fil > :first-child { margin-top: auto; }

.alfred-mot {
  margin: 0 0 22px;
  animation: alfred-venue 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes alfred-venue {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.alfred-qui {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.alfred-texte {
  font-size: 0.875rem;
  line-height: 1.72;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Alfred parle au nom du domaine : filet d'or, pleine largeur, texte clair. */
.alfred-mot.de-lui {
  border-left: 1px solid rgba(201, 162, 75, 0.45);
  padding-left: 15px;
}
.alfred-mot.de-lui .alfred-qui   { color: var(--alf-or); }
.alfred-mot.de-lui .alfred-texte { color: var(--alf-blanc); }

/* Le visiteur se tient en retrait, à droite, et plus bas en intensité. */
.alfred-mot.de-vous {
  padding-left: 18%;
  text-align: right;
}
.alfred-mot.de-vous .alfred-qui   { color: rgba(244, 239, 230, 0.4); }
.alfred-mot.de-vous .alfred-texte { color: var(--alf-discret); }

.alfred-texte a {
  color: var(--alf-or-clair);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 200, 126, 0.4);
  transition: border-color 0.3s ease;
}
.alfred-texte a:hover { border-bottom-color: var(--alf-or-clair); }

/* ── L'attente ─────────────────────────────────────────────────────────── */
/* Pas de points de suspension animés. Un filet qui respire, de la largeur
   d'un mot, sous le label d'Alfred. */

.alfred-attente { margin: 0 0 22px; padding-left: 15px; border-left: 1px solid rgba(201, 162, 75, 0.45); }

.alfred-attente span {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--alf-or);
  animation: alfred-souffle 1.7s ease-in-out infinite;
}

@keyframes alfred-souffle {
  0%, 100% { opacity: 0.25; width: 22px; }
  50%      { opacity: 0.85; width: 46px; }
}

/* ── La saisie ─────────────────────────────────────────────────────────── */

.alfred-saisie {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--alf-filet);
}

.alfred-saisie textarea {
  flex: 1;
  min-height: 22px;
  max-height: 110px;
  resize: none;
  background: none;
  border: none;
  outline: none;
  color: var(--alf-blanc);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
  padding: 0;
}

.alfred-saisie textarea::placeholder { color: rgba(244, 239, 230, 0.34); }

.alfred-envoyer {
  flex: none;
  background: none;
  border: none;
  padding: 0 0 2px;
  color: var(--alf-or);
  font-family: inherit;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.alfred-envoyer:hover:not(:disabled) { color: var(--alf-or-clair); }
.alfred-envoyer:disabled { opacity: 0.3; cursor: default; }

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  /* PAS DE `left` SUR .alfred : le conteneur se dimensionne à son contenu,
     sinon le bouton s'étire sur toute la largeur. */
  .alfred { right: 14px; bottom: 14px; }

  /*
     UNE FENÊTRE, ET NON UNE PAGE. La première version prenait `inset: 0`,
     donc tout l'écran : plus de contexte, plus de site derrière, et une
     impression d'application qui s'ouvre par-dessus au lieu d'une
     conversation qui commence. Emmanuel l'a jugée laide et malcommode, et il
     avait raison.

     Elle est maintenant ancrée en bas, avec de l'air tout autour et le site
     visible derrière. On reste sur la page où l'on était.

     `dvh` plutôt que `vh` : sur un téléphone, `vh` ignore les barres du
     navigateur et le clavier, et la zone de saisie finit sous l'écran au
     moment précis où l'on veut écrire. `dvh` suit la hauteur réellement
     visible. Le repli en `vh` sert aux navigateurs qui ne le connaissent pas.
  */
  .alfred-panneau {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 14px;
    top: auto;
    width: auto;
    /* UNE HAUTEUR TENUE, et non une boîte qui grandit à chaque message. Avec
       `height: auto`, la fenêtre faisait 296 pixels à l'ouverture puis
       s'étirait : on voyait la page bouger sous elle à chaque réponse. Une
       fenêtre de conversation a une taille, et le fil défile dedans. */
    height: 72vh;
    height: 72dvh;
    max-height: 620px;
  }

  /*
     L'EN-TÊTE DEVIENT UNE BARRE. Sur grand écran, le logo centré du domaine
     est juste : il y a la place, et c'est la maison qui se présente. Sur un
     téléphone, il mangeait le quart de la fenêtre et donnait à l'ensemble
     l'allure d'une affiche qu'on aurait ouverte par erreur.

     Ici, une ligne : l'emblème, le nom, le rôle, et la fermeture. C'est la
     forme qu'ont toutes les fenêtres de conversation, et ce n'est pas un
     hasard : elle laisse la place à ce qui compte, le fil.
  */
  .alfred-entete {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 11px 46px 11px 14px;
  }
  .alfred-entete img { width: 26px; height: auto; }
  .alfred-entete-mots { align-items: flex-start; gap: 3px; }
  /* Le filet séparateur n'a plus de sens dans une barre horizontale. */
  .alfred-entete-mots::before { display: none; }
  .alfred-entete-role { font-size: 0.56rem; letter-spacing: 0.14em; }
  .alfred-entete-nom {
    font-family: var(--alf-titre);
    font-size: 1.02rem;
    color: var(--alf-blanc);
    line-height: 1;
  }

  /* Le X reste à DROITE, comme sur grand écran. Il est passé à gauche une
     heure, sur une demande, puis revenu : c'est là qu'on le cherche. */
  .alfred-fermer { top: 10px; right: 10px; }

  .alfred-fil { padding: 18px 16px 14px; }
  .alfred-mot.de-vous { padding-left: 12%; }
  .alfred-saisie { padding: 12px 16px 14px; }

  /* SEIZE PIXELS, ET PAS UN DE MOINS. iOS agrandit la page entière dès qu'on
     touche un champ dont la police est plus petite, et le visiteur se
     retrouve avec un site zoomé qu'il doit remettre en place à la main.
     C'est une règle du système et non un réglage : la seule façon de ne pas
     la déclencher est de rester au seuil. */
  .alfred-saisie textarea { font-size: 16px; }
}

/* ── Ce que demande le visiteur ────────────────────────────────────────── */
/* Le mouvement est un ornement, jamais une information : tout ce qu'il porte
   ici se lit aussi sans lui. */

@media (prefers-reduced-motion: reduce) {
  .alfred-mot { animation: none; }
  .alfred-attente span { animation: none; opacity: 0.6; }
  .alfred-appel { transition: border-color 0.2s ease; }
  .alfred-appel:hover, .alfred-appel:focus-visible { transform: none; }
}