/* ============================================================
   _fido.css — La fenêtre de Fido · Grelottage de l'Ordre
   Une plaque d'obsidienne soufflée sur le braisier : le renard
   attend en bas à droite, sa fenêtre s'ouvre en verre dépoli.
   Moteurs : public/assets/js/fido.js, fido-love.js, fido-rtt.js
   ============================================================ */

/* ── 1. Jetons ────────────────────────────────────────────────
   Le namespace .fc-* est propre à la fenêtre. .fx-* appartient déjà
   au moteur de révélation global (fx.js pose fx-reveal / fx-in). */
.fido{
  --fc-ink: #f8ede8;
  --fc-soft: #d6c0ba;
  --fc-muted: #a68f92;

  --fc-ember: #ff8a4c;
  --fc-amber: #ffb340;
  --fc-gold: #ffdc9a;
  --fc-line: #ffb9a326;
  --fc-line-soft: #ffb9a314;
  --fc-flame: linear-gradient(96deg, #ff4d63 0%, #ff8a4c 46%, #ffdc9a 100%);
  --fc-flame-soft: linear-gradient(96deg, #ff4d631f, #ff8a4c14 55%, #ffdc9a0f);
  --fc-glass: linear-gradient(158deg, #ffffff0e, #ffffff02 46%), linear-gradient(180deg, #ff3d5c12, transparent 34%, #05020640), #1a1113c4;
  --fc-solid: #1b1214;
  --fc-bubble: linear-gradient(150deg, #ffffff0d, #ffffff03 55%), #2a1c1fb8;
  /* Couleurs plates des queues de bulle : la vitre derrière est un dégradé,
     on ne peut pas la recréer, donc la queue se superpose à la bulle. */
  --fc-bubble-flat: #2a1c1f;
  --fc-flame-flat: #ffcd82;
  --fc-relief: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #05020640;
  --fc-ease: cubic-bezier(.16, 1, .3, 1);
  /* Cadence du pointeur : la descente est immédiate, le relâchement reprend
     l'amortie de la fenêtre. Un seul jeton, sinon chaque contrôle presse à son
     rythme et le geste ne rend plus la monnaie attendue. */
  --fc-tap: .08s;
  /* Zoom et avance de l'amour, écrits par fido.js et fido-love.js. */
  --fc-zoom: 1;
  --fc-love-room: 350px;
  --fc-choice-delay: 0ms;
  position: fixed; z-index: 9000;
  right: 24px; bottom: max(24px, env(safe-area-inset-bottom));
  font-family: var(--font-body); color: var(--fc-ink);
  line-height: 1.6; text-align: left;
  caret-color: var(--fc-ember); -webkit-tap-highlight-color: transparent;
}
.fido *,.fido *::before,.fido *::after{ box-sizing: border-box }
/* La remise à zéro perd toujours : :where() la laisse derrière les règles de
   la fenêtre. Elle libère surtout le p{max-width:68ch} global de _base.css:63. */
.fido :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure){ margin: 0; padding: 0; max-width: none; color: inherit }
.fido :where(ul, ol){ list-style: none }
.fido :where(button){ font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
.fido :where(a){ color: inherit; text-decoration: none }
.fido :where(textarea){ font: inherit }
.fido [hidden]{ display: none !important }
.fido em{ font-style: normal }
/* Sélection : la braise remplace le bleu système dans toute la fenêtre. La
   bulle flamme garde sa propre trempe — un lavis rouge posé sur son dégradé ne
   se lit plus et y noierait le texte. */
.fido ::selection{ background: #ff4d6366; color: #fff4ee; text-shadow: none }
.fido :is(.fc-message--user, .fc-message--user *)::selection{ background: #7a140f80; color: #fff8f2 }
/* Un appui n'est pas une sélection : les pastilles décoratives restent hors du
   lavis, sinon le renard et ses points de frappe se colorent avec le texte. */
.fido :is(.fc-message-avatar, .fc-typing > span, .fc-love-pop, .fc-status-dot){ user-select: none }

/* ── 2. Lanceur : la plaque du goupil ───────────────────────── */
.fc-launcher{
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 9px;
  min-height: 58px; padding: 8px 19px 8px 8px;
  border: 1px solid var(--fc-line); border-radius: 19px;
  background: linear-gradient(120deg, #2a1418, #1d1512);
  box-shadow: 0 12px 34px #0502064d, 0 3px 10px #05020659, inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #05020659;
  color: var(--fc-ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .3s var(--fc-ease), border-color .3s, box-shadow .3s;
}
.fc-launcher-avatar{
  display: block; flex: 0 0 44px; width: 44px; height: 44px;
  object-fit: contain; filter: drop-shadow(0 3px 7px #05020680);
  transform-origin: 50% 85%; animation: fc-float 5.5s ease-in-out infinite;
  transition: translate .3s var(--fc-ease), rotate .3s var(--fc-ease), scale .2s var(--fc-ease);
}
.fc-launcher::before{
  /* Liseré de braise sous la plaque, allumé au survol. */
  content: ''; position: absolute; inset: auto 12% 3px; height: 1px;
  background: linear-gradient(90deg, transparent, #ff8a4c66, transparent);
  opacity: .5; transition: opacity .3s, inset .3s;
}
.fc-launcher:hover{ transform: translateY(-3px); border-color: #ff9a5c59; box-shadow: 0 18px 42px #05020666, 0 0 26px #ff6a3d1f, inset 0 1px 0 #ffffff14 }
.fc-launcher:hover::before{ opacity: 1; inset: auto 4% 3px }
.fc-launcher:hover .fc-launcher-avatar{ animation-play-state: paused; translate: 0 -2px; rotate: -3deg }
/* Le salut du goupil passe par translate/rotate/scale : le float ne porte que
   `transform`, et une animation gelée coiffe toute valeur posée sur cette
   propriété — le tilt écrit ici serait resté mort. */
/* Clic : la plaque s'enfonce d'un pixel, le renard hoche, tout en .08 s. Au
   relâchement, l'amortie de la fenêtre reprend et rend la monnaie du geste.
   Le liseré et la cendre sont écrits exprès : sous prefers-reduced-motion, la
   fonte est coupée et il ne resterait sinon aucun signe d'appui. `.fido` donne
   à la trempe plus de poids que .fc-open, qui ne doit pas la masquer. */
.fido .fc-launcher:active{ transform: translateY(1px) scale(.98); border-color: #ff9a5c8c; box-shadow: 0 5px 16px #05020680, 0 0 18px #ff6a3d26, inset 0 2px 9px #05020673, inset 0 -1px 0 #05020659; transition-duration: var(--fc-tap) }
.fido .fc-launcher:active .fc-launcher-avatar{ translate: 0 1px; rotate: 2deg; scale: .94; filter: drop-shadow(0 1px 3px #050206a6) saturate(.9); transition-duration: var(--fc-tap) }
.fc-launcher:focus-visible{ outline: 2px solid var(--fc-gold); outline-offset: 4px }
.fc-open .fc-launcher{ border-color: #ff9a5c47 }
.fc-open .fc-launcher-avatar{ animation: none }
.fc-open .fc-welcome{ display: none }
/* Fido en repos : la plaque reste posée, mais sa flamme baisse. */
.fc--rtt .fc-launcher{ filter: saturate(.6); box-shadow: 0 6px 22px #05020640 }
.fc--rtt .fc-launcher-avatar{ animation: none }
/* Moteur en cours d'acheminement : le lanceur prévient qu'il répond, sans bloquer la page. */
.fc-loading .fc-launcher{ cursor: progress }
.fc-loading .fc-launcher-avatar{ animation: fc-boot-wait .9s ease-in-out infinite }
@keyframes fc-boot-wait{ 50%{ opacity: .45 } }

/* ── 3. Panneau : plaque de verre sur le braisier ───────────── */
.fc-panel{
  position: absolute; right: 0; bottom: 74px; z-index: 2;
  width: 400px; height: 650px;
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 124px);
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border: 1px solid var(--fc-line); border-radius: 24px;
  background: var(--fc-glass);
  /* Le flou est rendu par _perf-glass.css : la fenêtre est une surface fixe. */
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 26px 68px #0502068c, 0 6px 18px #05020659, 0 0 0 1px #ff8a4c0a, inset 0 1px 0 #ffffff12;
  transform-origin: bottom right;
}
.fc-panel::before{
  /* Filet de flamme le long du bord supérieur : la signature de l'Ordre. */
  content: ''; position: absolute; inset: 0 0 auto; height: 2px; z-index: 3;
  background: var(--fc-flame); opacity: .8;
}
/* Le reflet qui balaie la vitre : une traînée montée sur son propre calque,
   transform-only, pour ne pas relancer le flou à chaque image. */
.fc-panel::after{
  content: ''; position: absolute; top: 0; bottom: 0; left: -34%; z-index: 4;
  width: 34%; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent, #ffffff14 46%, #ffffff07 64%, transparent);
  transform: translateX(-30%);
  transition: transform .9s var(--fc-ease), opacity .5s;
}
.fc-panel:hover::after{ opacity: 1; transform: translateX(392%) }
.fc-resize{
  position: absolute; top: 3px; left: 3px; z-index: 6;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 9px; color: var(--fc-muted); font-size: 15px; opacity: .3;
  cursor: nwse-resize; touch-action: none; user-select: none;
  transition: opacity .25s, background .25s, color .25s, transform .2s var(--fc-ease);
}
.fc-resize:hover{ opacity: 1; background: #ffffff0d; color: var(--fc-gold) }
/* Poignée tenue ou pressée : même flamme sous le losange. La règle de tirage
   est posée ici, avant l'appui — .fc-resizing arrive dès le pointerdown et,
   tout aussi spécifique que :active, elle l'écraserait sinon par son ordre. */
.fc-resizing .fc-resize,.fc-resize:active{ opacity: 1; background: #ff8a4c33; color: var(--fc-gold) }
/* Appui : le losange se referme sur le doigt. */
.fc-resize:active{ transform: scale(.86); transition-duration: var(--fc-tap) }
.fc-resize:focus-visible{ opacity: 1; outline: 2px solid var(--fc-gold); outline-offset: -2px }
/* Poignée tenue : la plaque dit qu'elle est en train de se tailler. */
.fc-resizing .fc-panel{ border-color: #ff9a5c8c; box-shadow: 0 26px 68px #050206b3, 0 0 0 2px #ff8a4c33 }
.fc-resizing .fc-launcher-avatar,.fc-resizing .fc-status-dot{ animation-play-state: paused }

/* ── 4. En-tête ─────────────────────────────────────────────── */
.fc-header{
  position: relative; flex: 0 0 auto; z-index: 2;
  display: flex; align-items: center; gap: 11px;
  min-height: 78px; padding: 10px 12px 10px 30px;
  border-bottom: 1px solid var(--fc-line-soft);
  background: linear-gradient(180deg, #ffffff12, transparent 58%), linear-gradient(112deg, #ff3d5c14, transparent 46%), #241418a8;
}
.fc-avatar{
  position: relative; flex: 0 0 58px; width: 58px; height: 62px;
  display: grid; place-items: center; padding: 0; border-radius: 14px;
  transition: transform .25s var(--fc-ease), filter .25s;
}
.fc-avatar img{ display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px #05020659) }
.fc-avatar::after{
  content: '🧡'; position: absolute; right: -2px; bottom: -1px;
  font-size: 12px; filter: drop-shadow(0 1px 3px #050206a6);
}
.fc-avatar:hover{ transform: translateY(-2px) }
.fc-avatar:active{ transform: translateY(1px) scale(.93); transition-duration: var(--fc-tap) }
.fc-avatar[aria-expanded="true"]::after{ content: '✕'; color: var(--fc-gold) }
.fc-identity{ flex: 1; min-width: 0 }
.fc-identity strong{ display: block; font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; text-shadow: 0 1px 0 #0502068c }
.fc-identity small{ display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--fc-muted) }
.fc-status-dot{
  flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: #8fd6a4; box-shadow: 0 0 0 0 #8fd6a44d;
  animation: fc-presence 3.2s ease-out infinite;
}
.fc-clear,.fc-close{
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid #ffffff0d; border-radius: 12px; background: #ffffff06;
  box-shadow: var(--fc-relief);
  color: var(--fc-soft); font-size: 17px;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.fc-clear{ font-size: 14px }
.fc-close{ font-size: 22px; line-height: 1 }
.fc-clear:hover,.fc-close:hover{ background: #ffffff14; color: var(--fc-ink); border-color: var(--fc-line) }
.fc-clear:hover{ transform: translateY(-2px) }
.fc-close:hover{ transform: rotate(90deg) }
/* Appui : la plaque rentre dans l'en-tête et son liseré s'allume. Le X garde sa
   rotation — repartir à 0° sous le doigt ferait deux gestes au lieu d'un. */
.fc-clear:active:not(:disabled){ transform: translateY(1px) scale(.93); background: #ff8a4c26; border-color: #ff9a5c59; transition-duration: var(--fc-tap) }
.fc-close:active{ transform: rotate(90deg) scale(.88); background: #ff4d632e; border-color: #ff9a5c59; color: var(--fc-ink); transition-duration: var(--fc-tap) }
.fc-clear:disabled{ opacity: .35; cursor: wait }
/* L'anneau suit la géométrie de chaque contrôle : aucun rayon n'est posé ici.
   .fido et pas .fc-panel : la confirmation d'effacement est hors du panneau. */
.fido :is(.fc-clear, .fc-close, .fc-avatar, .fc-suggestions button, .fc-pet, .fc-love-claim, .fc-love-ghost, .fc-zoom button, .fc-settings-gear, .fc-confirm-actions button, .fc-markdown a, .fc-love-more, .fc-message > a, .fc-rtt-close, .fc-love-close, .fc-relire):focus-visible{
  outline: 2px solid var(--fc-gold); outline-offset: 3px;
}

/* ── 5. Conversation ────────────────────────────────────────── */
.fc-day{
  flex: 0 0 auto; padding: 9px 0 0; text-align: center;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fc-muted);
}
.fc-messages{
  flex: 1; min-height: 0; padding: 14px 15px 18px;
  display: flex; flex-direction: column; align-items: stretch;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #a3766b4d transparent;
  background: radial-gradient(ellipse 90% 40% at 85% 0, #ff3d5c0c, transparent 70%);
}
/* Le fil occupe toute la largeur du panneau : Fido reste collé au bord gauche,
   l'interlocuteur au bord droit, même sur une fenêtre très large. C'est la
   bulle qui porte la mesure de lecture, pas la rangée. */
.fc-messages > :is(.fc-day, .fc-row){ width: 100% }
/* Le premier pseudo-enfant avale l'espace libre : les réponses collent au
   composer au lieu de laisser un vide sous le fil. Une marge auto vaut 0 dès
   que le fil déborde, contrairement à justify-content:flex-end qui rendrait le
   haut du fil inatteignable au défilement. */
.fc-messages::before{ content: ''; display: block; flex: 0 0 auto; margin-top: auto }
.fc-row,.fc-typing{ margin-bottom: 16px }
.fc-messages > :last-child{ margin-bottom: 0 }
.fc-row{ display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto; animation: fc-reply-in .34s var(--fc-ease) }
.fc-row--user{ justify-content: flex-end; padding-left: 34px; animation-name: fc-user-in }
.fc-row--restored{ animation: none }
.fc-message-avatar{ flex: 0 0 34px; width: 34px; height: 38px; margin-bottom: 2px }
.fc-message-avatar img{ display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px #05020659) }
.fc-message{
  position: relative; min-width: 0; max-width: min(calc(100% - 42px), 24em);
  padding: 12px 14px 8px; border: 1px solid var(--fc-line-soft);
  border-radius: 17px 17px 17px 5px; background: var(--fc-bubble);
  box-shadow: 0 3px 12px #05020626, 0 1px 3px #05020633, var(--fc-relief);
  font-size: calc(14.5px * var(--fc-zoom)); line-height: 1.75; color: var(--fc-ink);
  overflow-wrap: anywhere;
  transition: border-color .25s, box-shadow .25s;
}
/* La queue qui vise le locuteur : un quart d'ellipse d'une couleur plate, collé
   au bord bas de la bulle. Pas de dégradé recréé — sur 8 px la rampe jurerait —
   et pas de chevauchement sur la bulle ourlée, qui boirait son liseré. */
.fc-message::before{
  content: ''; position: absolute; bottom: 0; left: -8px; width: 8px; height: 10px;
  background: var(--fc-bubble-flat); border-bottom-left-radius: 100%;
}
.fc-message:hover{ border-color: var(--fc-line); box-shadow: 0 5px 18px #05020640, 0 1px 3px #05020633, var(--fc-relief) }
/* Corps sans markdown (réponses d'amour, repli) : les sauts de ligne du texte
   brut doivent rester visibles, contrairement au HTML rendu par .fc-markdown. */
.fc-message > p{ white-space: pre-wrap }
.fc-message--user{
  max-width: min(100%, 24em); margin-left: auto; border-color: transparent;
  border-radius: 17px 17px 5px 17px; background: var(--fc-flame);
  color: #2c0c0e; box-shadow: 0 5px 18px #ff5a3d1f, 0 2px 6px #0502064d, inset 0 1px 0 #ffffff5c, inset 0 -1px 0 #7a140f40;
}
.fc-message--user::before{ left: auto; right: -6px; background: var(--fc-flame-flat); border-bottom-left-radius: 0; border-bottom-right-radius: 100% }
/* .fc-message:hover (deux classes) coifferait .fc-message--user (une seule) et
   éteindrait la flamme au survol de sa propre bulle. */
.fc-message--user:hover{ box-shadow: 0 8px 24px #ff5a3d33, 0 2px 6px #0502064d, inset 0 1px 0 #ffffff73, inset 0 -1px 0 #7a140f40 }
.fc-message--user :is(a, strong){ color: #2c0c0e }
.fc-message-meta{
  display: block; margin-top: 7px; text-align: right;
  font-size: calc(11px * var(--fc-zoom)); color: var(--fc-muted); opacity: .85;
}
.fc-message--user .fc-message-meta{ color: #4b1a14b3 }
/* La Relire de la bulle : une graine au bout de l'heure, de la trempe des autres
   boutons ronds. Elle reste discrète tant que le pointeur ne passe pas sur SA bulle
   ou que le clavier ne la cherche — vingt bulles toutes allumées feraient un sapin.
   Sur un pouce, qui ne survole jamais, elle se montre d'office plus bas. */
.fc-relire{
  position: relative;
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 7px;
  padding: 0; border: 1px solid var(--fc-line-soft); border-radius: 999px;
  background: #ffffff08; box-shadow: var(--fc-relief); color: var(--fc-muted);
  font: inherit; cursor: pointer; vertical-align: -.42em; opacity: 0; pointer-events: none;
  transition: opacity .2s, background .2s, border-color .2s, color .2s, transform .2s var(--fc-ease);
}
.fc-relire > .bi{ font-size: 12px }
/* Invisible et hors de portée : une graine éteinte ne se cueille pas du premier venu
   qui clique au hasard dans la bulle. Le survol, le clavier ou le pouce l'allument
   et lui rendent la main. */
.fc-message:hover .fc-relire,.fc-relire:focus-visible,.fc-relire[aria-pressed="true"]{ opacity: 1; pointer-events: auto }
.fc-relire:hover{ background: #ffffff14; border-color: var(--fc-line); color: var(--fc-ink) }
.fc-relire:active{ transform: scale(.88); transition-duration: var(--fc-tap) }
/* Le morceau en cours de prononciation chauffe : on voit de quelle bulle sort la voix. */
.fc-relire[aria-pressed="true"]{ border-color: #ff9a5c73; background: #ff8a4c1f; color: var(--fc-gold) }
@media (hover: none){ .fc-relire{ opacity: .72; pointer-events: auto } }
/* La tringle globale « button{min-height:44px} » étirerait la graine en pilule : le
   disque garde son diamètre, et une vitre de dix points autour lui fait l'empreinte
   du pouce sans rien montrer de plus. */
@media (hover: none), (pointer: coarse){
  .fc-relire{ min-height: 24px }
  .fc-relire::before{ content: ''; position: absolute; inset: -10px; border-radius: 999px }
}
.fc-row--love .fc-message{
  border-radius: 16px; background: var(--fc-flame-soft);
  border-color: var(--fc-line); text-align: center;
  box-shadow: 0 3px 12px #05020626, inset 0 1px 0 #ffffff1a, inset 0 -1px 0 #05020633;
}
/* Carte-cérémonie, pas bulle : pas de queue. */
.fc-row--love .fc-message::before{ display: none }
.fc-message > a{
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  padding: 8px 10px; border: 1px solid var(--fc-line); border-radius: 11px;
  background: #ff8a4c0d; color: var(--fc-amber);
  font-size: calc(13px * var(--fc-zoom)); line-height: 1.45;
  transition: background .2s, border-color .2s, transform .2s;
}
.fc-message > a:hover{ background: #ff8a4c1a; border-color: #ff9a5c59; transform: translateX(3px) }
/* Carte tenue : elle revient d'un tiers du chemin et son cadre chauffe. Le
   glissement reste — l'annuler effacerait le signal du survol au moment précis
   où l'on valide. */
.fc-message > a:active{ background: #ff8a4c2b; border-color: #ff9a5c8c; transform: translateX(1px) scale(.99); transition-duration: var(--fc-tap) }
.fc-chat-emote{
  display: block; width: 84px; height: 84px; margin: 8px 0 2px;
  object-fit: contain; animation: fc-gain-in .25s var(--fc-ease);
}
.fc-typing{
  position: relative;
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  align-self: flex-start; margin-left: 42px; padding: 14px 16px;
  border: 1px solid var(--fc-line-soft); border-radius: 17px 17px 17px 5px;
  background: var(--fc-bubble); box-shadow: 0 3px 12px #05020626, var(--fc-relief);
  animation: fc-choice-in .25s var(--fc-ease);
}
.fc-typing::before{
  content: ''; position: absolute; bottom: 0; left: -8px; width: 8px; height: 10px;
  background: var(--fc-bubble-flat); border-bottom-left-radius: 100%;
}
.fc-typing > span:not(.fc-sr){
  width: 6px; height: 6px; border-radius: 50%; background: var(--fc-ember);
  animation: fc-typing .95s ease-in-out infinite;
}
.fc-typing > span:nth-child(3){ animation-delay: .13s }
.fc-typing > span:nth-child(4){ animation-delay: .26s }

/* Markdown des réponses IA. */
.fc-markdown{ min-width: 0; line-height: 1.75 }
.fc-markdown > *{ margin: 0 }
.fc-markdown > :not(:last-child){ margin-bottom: .65em }
/* Le li{color} global de _base.css:68 hériterait par-dessus la bulle. */
.fc-markdown :is(p, li){ white-space: normal; color: inherit }
.fc-markdown :is(h1, h2, h3, h4, h5, h6){ font-size: 1.08em; font-weight: 700; line-height: 1.4; letter-spacing: -.02em }
.fc-markdown :is(h1, h2){ font-size: 1.16em }
.fc-markdown :is(ul, ol){ padding-left: 1.4em; list-style-position: outside }
.fc-markdown ul{ list-style-type: disc }
.fc-markdown ol{ list-style-type: decimal }
.fc-markdown li{ margin: .25em 0 }
.fc-markdown li > p{ margin: 0 }
/* Lien en ligne : filet permanent en currentColor, puis une trempe chaude qui
   balaie depuis la gauche. Un background-size, pas de filtre : rien ne relance
   le flou de la vitre à chaque survol. */
.fc-markdown a{
  color: var(--fc-amber); text-decoration: none; border-radius: 3px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(#ff8a4c3d, #ff8a4c3d);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 0% 100%;
  transition: background-size .22s var(--fc-ease), color .2s;
}
.fc-markdown a:hover{ background-size: 100% 1.5px, 100% 100% }
.fc-markdown a:active{ color: var(--fc-gold); background-size: 100% 1.5px, 100% 100%; transition-duration: var(--fc-tap) }
.fc-message--user .fc-markdown a{ color: #2c0c0e }
.fc-markdown blockquote{ padding: .2em .9em; border-left: 2px solid #ff8a4c80; background: #ff8a4c0d; color: var(--fc-soft) }
.fc-markdown code{ padding: .12em .35em; border-radius: 6px; background: #ffffff10; font-family: Consolas, monospace; font-size: .9em; white-space: break-spaces }
.fc-markdown pre{ padding: 12px; border: 1px solid var(--fc-line-soft); border-radius: 12px; background: #05020640; overflow: auto; white-space: pre; overscroll-behavior: contain }
.fc-markdown pre code{ padding: 0; background: none; white-space: pre }
.fc-markdown hr{ border: 0; border-top: 1px solid var(--fc-line-soft); margin: .9em 0 }
.fc-markdown-table{ max-width: 100%; overflow-x: auto; overscroll-behavior: contain }
.fc-markdown table{ width: 100%; border-collapse: collapse; font-size: .92em }
.fc-markdown :is(th, td){ padding: 6px 9px; border: 1px solid var(--fc-line-soft); text-align: left }
.fc-markdown th{ background: #ff8a4c12; font-weight: 700 }

/* ── 6. Pistes guidées ──────────────────────────────────────── */
.fc-quick{
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 12px; padding: 8px 15px 2px;
  border-top: 1px solid var(--fc-line-soft); background: #ffffff04;
  box-shadow: inset 0 1px 0 #ffffff0d;
  font-size: 11.5px; color: var(--fc-muted);
}
.fc-quick small{ font-size: inherit; color: var(--fc-soft) }
.fc-suggestions{
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 7px; padding: 8px 15px 12px;
  /* Un menu guidé compte jusqu'à neuf sujets : posés en une seule piste
     horizontale, sept d'entre eux restaient hors du cadre à 400 px de large,
     sans barre ni signe. Ils s'empilent donc, et la pile ne se borne que si le
     fil doit garder de l'air — auquel cas l'ascenseur est franchement visible. */
  max-height: min(244px, 38%); overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: #a3766b66 transparent; background: #ffffff04;
}
.fc-suggestions::-webkit-scrollbar{ width: 6px }
.fc-suggestions::-webkit-scrollbar-track{ background: transparent }
.fc-suggestions::-webkit-scrollbar-thumb{ background: #a3766b66; border-radius: 999px }
.fc-suggestions button{
  flex: 0 0 auto; max-width: 250px; min-height: 42px;
  padding: 9px 13px; border: 1px solid var(--fc-line); border-radius: 13px;
  background: linear-gradient(120deg, #ff4d6312, #ffdc9a0a); color: var(--fc-soft);
  box-shadow: inset 0 1px 0 #ffffff14, 0 4px 12px #05020640;
  font-size: calc(13px * var(--fc-zoom)); line-height: 1.35; text-align: left;
  animation: fc-choice-in .3s var(--fc-ease) var(--fc-choice-delay) backwards;
  transition: transform .2s var(--fc-ease), background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.fc-suggestions button:hover:not(:disabled){ transform: translateY(-2px); border-color: #ff9a5c66; background: linear-gradient(120deg, #ff4d6320, #ffdc9a12); color: var(--fc-ink); box-shadow: inset 0 1px 0 #ffffff26, 0 8px 20px #ff5a3d1f }
/* Piste tenue : la tuile s'enfonce et son halo retombe dans la plaque. Un
   bouton qui garde sa lueur d'appui pendant qu'il rétrécit semble flotter au
   lieu de s'encastrer. */
.fc-suggestions button:active:not(:disabled){ transform: translateY(1px) scale(.98); background: linear-gradient(120deg, #ff4d632b, #ffdc9a17); box-shadow: inset 0 2px 8px #05020673; transition-duration: var(--fc-tap) }
.fc-suggestions button:disabled{ opacity: .45; cursor: default }

/* ── 7. Composer ────────────────────────────────────────────── */
.fc-form{
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 11px 12px max(11px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--fc-line-soft); background: #ffffff06;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.fc-form textarea{
  flex: 1; min-width: 0; min-height: 46px; max-height: 105px; padding: 12px 13px;
  border: 1px solid var(--fc-line); border-radius: 14px; background: #05020640;
  box-shadow: inset 0 2px 8px #05020673;
  color: var(--fc-ink); font-size: max(16px, calc(15px * var(--fc-zoom))); line-height: 1.4;
  resize: none; overflow-y: auto; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.fc-form textarea::placeholder{ color: var(--fc-muted) }
.fc-form textarea:focus{ border-color: #ff9a5c73; background: #0502066b; box-shadow: inset 0 2px 8px #05020673, 0 0 0 3px #ff6a3d12 }
.fc-form button{
  flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid #ffffff1a; border-radius: 14px; background: var(--fc-flame);
  box-shadow: 0 6px 20px #ff5a3d2b, 0 2px 6px #05020659, inset 0 1px 0 #ffffff40, inset 0 -1px 0 #7a140f40; color: #2c0c0e;
  font-size: 19px; touch-action: manipulation;
  transition: transform .2s var(--fc-ease), box-shadow .2s, opacity .2s;
}
.fc-form button:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 10px 26px #ff5a3d40, 0 2px 6px #05020659, inset 0 1px 0 #ffffff59, inset 0 -1px 0 #7a140f40 }
.fc-form button:active:not(:disabled){ transform: translateY(1px) scale(.95); box-shadow: 0 1px 6px #ff5a3d1f, inset 0 2px 8px #7a140f59; transition-duration: var(--fc-tap) }
.fc-form button:disabled{ opacity: .3; box-shadow: none; cursor: default }
.fc-form button i{ pointer-events: none }

/* ── 8. Bulles de réglages et d'ambiance ────────────────────── */
/* Les plaques posées sur la page sont pleines : 4 % de transparence suffisent
   à faire resurgir le texte du héros sous la bulle de bienvenue. */
.fc-welcome,.fc-rtt-bubble,.fc-love-toast{
  position: absolute; z-index: 8;
  border: 1px solid #ff9a5c4d; border-radius: 20px;
  background: linear-gradient(150deg, #2f1a1b, #241410);
  box-shadow: 0 18px 44px #0502068c, 0 0 26px #ff6a3d12, inset 0 1px 0 #ffffff1a, inset 0 -1px 0 #05020659;
  color: var(--fc-ink); animation: fc-gain-in .3s var(--fc-ease);
}
.fc-welcome{
  right: 0; bottom: calc(100% + 16px); width: max-content;
  max-width: calc(100vw - 40px); padding: 12px 17px;
  font-size: 14.5px; font-weight: 600;
  border-radius: 20px 20px 6px 20px;
}
.fc-welcome::after{
  content: ''; position: absolute; right: 20px; bottom: -6px;
  width: 12px; height: 12px; transform: rotate(45deg);
  border-right: 1px solid #ff9a5c4d; border-bottom: 1px solid #ff9a5c4d;
  background: #241410;
}
.fc-rtt-bubble{
  right: 0; bottom: calc(100% + 16px); width: 340px; max-width: calc(100vw - 32px);
  padding: 20px 22px; border-radius: 22px 22px 22px 8px;
}
.fc-rtt-bubble strong{ display: block; padding-right: 30px; font-size: 17px; font-weight: 600; letter-spacing: -.02em }
.fc-rtt-bubble p{ margin-top: 9px; font-size: 13.5px; line-height: 1.75; color: var(--fc-soft) }
.fc-rtt-close{
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 10px; background: #ffffff0d; color: var(--fc-soft); font-size: 20px;
  transition: background .2s, color .2s, transform .2s;
}
.fc-rtt-close:hover{ background: #ffffff1c; color: var(--fc-ink); transform: rotate(90deg) }
.fc-rtt-close:active{ background: #ff4d632e; color: var(--fc-ink); transform: rotate(90deg) scale(.88); transition-duration: var(--fc-tap) }
.fc-love-toast{
  right: 12px; bottom: calc(100% + 12px); width: max-content;
  padding: 7px 13px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.fc-love-toast[data-earned="false"]{ font-weight: 500; font-size: 13.5px; color: var(--fc-soft) }

/* ── 9. Écran d'amour ─────────────────────────────────────────
   fido.js pose le `top` en style en ligne (hauteur de l'en-tête + 12) : la
   bulle s'ouvre sous l'en-tête, jamais par-dessus. */
.fc-love{
  position: absolute; left: 14px; right: 14px; top: 88px; z-index: 9;
  padding: 0;
  border: 1px solid #ff9a5c59; border-radius: 8px 22px 22px 22px;
  background: linear-gradient(150deg, #ff4d6317, #ffdc9a0c), #211517;
  box-shadow: 0 20px 48px #05020699, 0 0 28px #ff6a3d14, inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #05020659;
  transform-origin: 22px 0;
}
.fc-love::before{
  content: ''; position: absolute; top: -8px; left: 20px;
  width: 15px; height: 15px; transform: rotate(45deg);
  border-top: 1px solid #ff9a5c59; border-left: 1px solid #ff9a5c59;
  background: #241618;
}
.fc-love-body{
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 17px 16px; border-radius: inherit;
  max-height: min(420px, var(--fc-love-room));
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* La colonne défile : sans ça, l'excédent écrase les enfants raides et la
   jauge de 9 px s'effondre à 0 de haut au lieu de pousser l'ascenseur. */
.fc-love-body > *{ flex: none }
.fc-love-close{
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: #ffffff0d; color: var(--fc-soft); font-size: 18px;
  transition: background .2s, color .2s, transform .2s;
}
.fc-love-close:hover{ background: #ffffff1c; color: var(--fc-ink); transform: rotate(90deg) }
.fc-love-close:active{ background: #ff4d632e; color: var(--fc-ink); transform: rotate(90deg) scale(.88); transition-duration: var(--fc-tap) }
.fc-love-intro{ padding-right: 26px; font-size: 12px; color: var(--fc-muted) }
.fc-love-head{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px }
.fc-love-head strong{ font-size: 15px; font-weight: 600; letter-spacing: -.02em }
.fc-love-badge{
  padding: 3px 10px; border-radius: 999px; background: var(--fc-flame);
  color: #2c0c0e; font-size: 12px; font-weight: 800; white-space: nowrap;
  animation: fc-love-badge 3.6s ease-in-out infinite;
}
.fc-love-score{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px }
.fc-love-score strong{ font-size: 20px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.fc-love-score span{ font-size: 12.5px; color: var(--fc-amber) }
/* La jauge reste lisible à 0 % : le lit est plus clair que la plaque, pas
   plus sombre — un creux noir sur noir ne se devine pas. */
.fc-love-track{
  position: relative; height: 9px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(#ffffff0f, #ffffff05), #2e1f22;
  box-shadow: inset 0 1px 2px #05020673, inset 0 0 0 1px #ffb9a33d;
}
.fc-love-track > span{
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: var(--fc-flame); box-shadow: 0 0 12px #ff6a3d4d, inset 0 1px 0 #ffffff73;
  transition: width .7s var(--fc-ease);
}
/* Le compteur quotidien tient sur la ligne de progression : deux blocs de
   trois mots chacun ne remplissent pas une plaque de 350 px. */
.fc-love-meter{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px }
.fc-love-next{ font-size: 12.5px; font-weight: 600; color: var(--fc-soft) }
.fc-love-daily{ font-size: 12px; font-weight: 600; color: var(--fc-amber) }
.fc-love-fine{ font-size: 11.5px; line-height: 1.55; color: var(--fc-muted) }
/* Le registre du jour : quatre cases de géométrie égale, posées en grille.
   Seule la lumière change entre « à offrir » et « déjà fait » — la taille reste
   la même pour que le visiteur lise un tableau, pas une hiérarchie. */
.fc-love-ledger{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 5px;
  padding: 8px; border: 1px solid var(--fc-line); border-radius: 13px;
  background: #ffffff08; box-shadow: var(--fc-relief);
}
.fc-love-chip{
  display: grid; justify-items: center; gap: 1px;
  padding: 5px 4px 6px; border: 1px solid #ffffff14; border-radius: 10px;
  background: #ffffff0d; text-align: center;
  transition: border-color .25s, background .25s, opacity .25s;
}
.fc-love-chip-line{ display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 4px; font-size: 11.5px; font-weight: 600; color: var(--fc-soft) }
.fc-love-chip-line i{ font-style: normal; font-size: 12.5px }
.fc-love-chip-line b{ font-family: 'Outfit', var(--font-body); font-size: 11.5px; font-weight: 700; color: var(--fc-amber); font-variant-numeric: tabular-nums }
.fc-attention-note{ font-size: 9.5px; font-weight: 500; letter-spacing: .02em; color: var(--fc-muted) }
.fc-love-chip[data-state="open"]{ border-color: #ff9a5c52; background: #ff9a5c14 }
.fc-love-chip[data-state="open"] .fc-attention-note{ color: var(--fc-amber) }
.fc-love-chip[data-state="done"]{ opacity: .45; border-color: #ffffff0d; background: transparent }
.fc-love-chip[data-state="done"] .fc-love-chip-line b{ text-decoration: line-through; text-decoration-thickness: 1px }
/* La caresse attend son tour, compte à rebours tenu par le guichet : la patte
   reste allumée mais pressée, pour ne pas promettre un geste qui ne partira pas. */
.fc-pet:disabled{ cursor: default; opacity: .58; box-shadow: 0 2px 8px #ff5a3d1f, inset 0 1px 0 #ffffff26 }
.fc-pet{
  padding: 11px; border: 1px solid #ffffff1a; border-radius: 13px;
  background: var(--fc-flame); color: #2c0c0e; font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 18px #ff5a3d26, 0 2px 6px #05020659, inset 0 1px 0 #ffffff40, inset 0 -1px 0 #7a140f40;
  transition: transform .2s var(--fc-ease), box-shadow .2s;
}
.fc-pet:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 10px 24px #ff5a3d40, 0 2px 6px #05020659, inset 0 1px 0 #ffffff59, inset 0 -1px 0 #7a140f40 }
/* Caresse tenue : la plaque flamme s'enfonce et sa braise retombe dans la
   matière — garder le halo d'appui la ferait flotter au lieu de presser. */
.fc-pet:active:not(:disabled){ transform: translateY(1px) scale(.97); box-shadow: 0 1px 6px #ff5a3d1f, inset 0 2px 8px #7a140f59; transition-duration: var(--fc-tap) }
.fc-love-foot{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px }
.fc-love-reward{ font-size: 12px; line-height: 1.5; color: var(--fc-soft) }
.fc-love-actions{ display: flex; flex-wrap: wrap; gap: 7px }
.fc-love-ghost{
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px;
  border: 1px solid var(--fc-line); border-radius: 11px; background: #ffffff08;
  box-shadow: var(--fc-relief);
  font-size: 12.5px; font-weight: 600;
  transition: background .2s, border-color .2s, transform .2s;
}
.fc-love-ghost:hover{ background: #ffffff14; border-color: #ff9a5c59; transform: translateY(-1px) }
.fc-love-ghost:active{ background: #ffffff21; border-color: #ff9a5c8c; transform: translateY(1px) scale(.97); transition-duration: var(--fc-tap) }
.fc-love-claim{
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px;
  border: 1px solid transparent; border-radius: 11px; background: var(--fc-flame);
  box-shadow: 0 4px 14px #ff5a3d26, 0 1px 4px #05020659, inset 0 1px 0 #ffffff40, inset 0 -1px 0 #7a140f40;
  color: #2c0c0e; font-size: 12.5px; font-weight: 700;
  transition: transform .2s var(--fc-ease), box-shadow .2s, opacity .2s;
}
.fc-love-claim:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 8px 20px #ff5a3d33, 0 1px 4px #05020659, inset 0 1px 0 #ffffff59, inset 0 -1px 0 #7a140f40 }
.fc-love-claim:active:not(:disabled){ transform: translateY(1px) scale(.97); box-shadow: 0 1px 6px #ff5a3d1f, inset 0 2px 7px #7a140f59; transition-duration: var(--fc-tap) }
.fc-love-claim:disabled{ opacity: .35; box-shadow: none; cursor: default }
/* Lien discret de l'écran d'amour : le même filet qui s'épaissit que les liens
   du fil, pour que le geste reste le dictionnaire du même mot. */
.fc-love-more{
  font-size: 12px; color: var(--fc-amber); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s, text-decoration-thickness .2s;
}
.fc-love-more:hover{ color: var(--fc-gold); text-decoration-color: var(--fc-gold); text-decoration-thickness: 2px }
.fc-love-more:active{ color: var(--fc-ember); text-decoration-color: var(--fc-ember); transition-duration: var(--fc-tap) }
.fc-love-notice{
  flex: 0 0 auto; padding: 8px 15px; background: #ff8a4c0d;
  border-bottom: 1px solid var(--fc-line-soft);
  font-size: 12px; line-height: 1.5; color: var(--fc-soft);
}
.fc-love-pop{
  position: absolute; top: 10px; right: 26px; z-index: 4; pointer-events: none;
  font-size: 22px; animation: fc-love-pop 1.1s ease-out forwards;
}

/* ── 10. Réglages ───────────────────────────────────────────── */
/* Le feuillet des réglages tient sur une ligne de la colonne, mais seul
   l'engrenage est posable : la rangée rend les armes devant le pointeur
   (`pointer-events: none`) pour que la bande vide à sa droite ne réveille
   aucune feuille. Le vol, lui, s'accroche toujours au bord gauche de la plaque. */
.fc-settings{ position: relative; z-index: 7; flex: 0 0 auto; margin: 0 12px 5px; color: inherit; pointer-events: none }
.fc-settings-gear{
  position: relative; pointer-events: auto;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--fc-line-soft); border-radius: 50%;
  background: #ffffff08; box-shadow: var(--fc-relief);
  color: var(--fc-soft); font-size: 15px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .25s, transform .5s var(--fc-ease);
}
.fc-settings-gear:hover{ background: #ffffff12; border-color: var(--fc-line); color: var(--fc-ink); transform: rotate(90deg) }
/* Tenue, la roue reste tournée et son liseré chauffe : l'ouverture de la feuille
   se joue dès l'appui. Écrit APRÈS le survol — même poids, et c'est bien la
   feuille ouverte qui se referme sous le doigt. */
.fc-settings-gear:active{ background: #ff8a4c26; border-color: #ff9a5c73; transform: rotate(90deg) scale(.88); transition-duration: var(--fc-tap) }
.fc-settings.is-set > .fc-settings-gear{ background: #ff8a4c1c; border-color: #ff9a5c73; color: var(--fc-amber); box-shadow: var(--fc-relief), 0 0 0 3px #ff8a4c1f; transform: rotate(90deg) }
/* Le mode se lit sans ouvrir la feuille : pastille ambrée quand Fido pense avec
   Gemini, éteinte quand il répond tout seul à la maison. */
.fc-settings-gear::after{
  content: ''; position: absolute; top: 0; right: 1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--fc-muted); box-shadow: 0 0 0 2px #1b1214;
  transition: background .25s, box-shadow .25s;
}
.fc-settings-gear[data-mode="ia"]::after{ background: var(--fc-amber); box-shadow: 0 0 0 2px #1b1214, 0 0 7px #ff8a4cb3 }
.fc-settings-mode{ padding: 2px 9px; border-radius: 999px; background: #ff8a4c1c; color: var(--fc-amber); font-size: 11.5px; font-weight: 700 }
.fc-settings-alert{
  width: max-content; max-width: 100%; margin: 5px 0 0; padding: 3px 9px;
  border-radius: 999px; background: #ff8a4c1f; font-size: 11px; line-height: 1.3; color: var(--fc-gold);
}
/* Accordéon — la base : là où le pointeur ne sait pas survoler, la carte naît
   sous son engrenage, dans la plaque, et le fil se resserre au lieu d'être couvert. */
.fc-settings-card{
  pointer-events: auto;
  max-height: min(232px, 40dvh); padding: 8px; overflow: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
  border: 1px solid #ff9a5c52; border-radius: 14px;
  background: linear-gradient(180deg, #ff8a4c0d, transparent 42%), #ffffff05;
  animation: fc-choice-in .22s var(--fc-ease);
}
/* Le titre porte le résumé du mode : c'est la seule ligne de la feuille qui
   parle d'elle-même, les quatre cases en dessous parlent de leur réglage. */
.fc-set-head{
  display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--fc-muted);
}
.fc-set-head .fc-settings-mode{ margin-left: auto; letter-spacing: 0; text-transform: none }
/* Quatre cases égales plutôt que cinq bandeaux de même poids : le titre est
   au-dessus du contrôle, l'état se range à droite du doigt, et la feuille tient
   en deux rangées — le fil garde de l'air quand elle s'ouvre. */
.fc-set-grid{ display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) }
.fc-set-cell{
  display: flex; flex-direction: column; gap: 5px; padding: 7px 9px;
  border-radius: 11px; background: #ffffff07; box-shadow: var(--fc-relief);
}
.fc-set-label{
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--fc-muted);
}
.fc-set-label > .bi{ font-size: 12px }
.fc-set-state{ margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--fc-amber) }
.fc-set-row{ display: flex; align-items: center; gap: 6px }
.fc-set-row .fc-switch-row{ flex: 1 1 auto; min-width: 0 }
.fc-set-foot{ padding: 7px 2px 0; font-size: 11px; line-height: 1.5; color: var(--fc-muted) }
.fc-set-line{ display: block }
.fc-set-line::before{
  content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 7px;
  border-radius: 50%; background: var(--fc-ember); opacity: .55; vertical-align: .2em;
}
.fc-zoom{ display: flex; gap: 4px }
.fc-zoom button{
  display: grid; place-items: center; flex: 1 1 0; min-width: 0; height: 27px; padding: 0 4px;
  border: 1px solid var(--fc-line-soft); border-radius: 9px; background: #ffffff08;
  color: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s var(--fc-ease);
}
.fc-zoom button:hover:not(:disabled){ background: #ffffff14; border-color: var(--fc-line) }
.fc-zoom button:active:not(:disabled){ transform: translateY(1px) scale(.95); background: #ffffff1f; box-shadow: inset 0 2px 6px #05020666; transition-duration: var(--fc-tap) }
.fc-zoom button:disabled{ opacity: .35; cursor: default }
.fc-zoom .fc-zoom-reset{ flex: 1.4 1 0; font-size: 11.5px }
.fc-switch-row{ position: relative; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: var(--fc-muted) }
/* La case à cocher couvre son étiquette : toute la ligne se clique, et le
   doigt dispose de la largeur de la case, pas du seul interrupteur. */
.fc-switch-row input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }
.fc-switch{
  display: block; width: 38px; height: 22px; flex: 0 0 38px;
  border: 1px solid #ffffff14; border-radius: 999px; background: #6d5560;
  transition: background .25s, box-shadow .25s;
}
.fc-switch::after{
  content: ''; display: block; width: 16px; height: 16px; margin: 2px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0502068c;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), width .15s var(--fc-ease);
}
/* Molette tenue : le bouton de l'interrupteur enfle de 2 px — 18 + la course
   de 16 dans une piste de 38, ça ne déborde pas. Le pouce dit « oui » avant le
   déclic. */
.fc-switch-row input:active:not(:disabled) + .fc-switch::after{ width: 18px; transition-duration: var(--fc-tap), var(--fc-tap) }
.fc-switch-row input:checked + .fc-switch{ background: linear-gradient(96deg, #ff4d63, #ff8a4c); box-shadow: 0 2px 10px #ff5a3d33 }
.fc-switch-row input:checked + .fc-switch::after{ transform: translateX(16px) }
.fc-switch-row input:focus-visible + .fc-switch{ outline: 2px solid var(--fc-gold); outline-offset: 3px }
.fc-switch-row input:disabled + .fc-switch{ opacity: .45 }
/* Voix : l'interrupteur règle l'auto-lecture, la Relire reste un geste
   à soi — il parle même quand la feuille est éteinte. */
.fc-voice-relire{
  display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 26px;
  border: 1px solid var(--fc-line-soft); border-radius: 999px; background: #ffffff08;
  box-shadow: var(--fc-relief); color: var(--fc-soft); font: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--fc-ease);
}
.fc-voice-relire > .bi{ font-size: 13px }
.fc-voice-relire:hover:not(:disabled){ background: #ffffff14; border-color: var(--fc-line); color: var(--fc-ink) }
.fc-voice-relire:active:not(:disabled){ transform: translateY(1px) scale(.95); box-shadow: inset 0 2px 6px #05020666; transition-duration: var(--fc-tap) }
.fc-voice-relire:disabled{ opacity: .35; cursor: default }
.fc-voice-relire:focus-visible{ outline: 2px solid var(--fc-gold); outline-offset: 2px }
/* Le timbre se choisit en face du zoom. Les noms du système sont longs et
   tronqués ici même : la flèche et la liste déroulante restent natives, elles
   suivent le schéma de couleurs du thème sans qu'on le redessine. */
.fc-set-cell select{
  width: 100%; height: 28px; padding: 0 7px;
  border: 1px solid var(--fc-line-soft); border-radius: 9px; background: #ffffff12;
  box-shadow: var(--fc-relief); color: var(--fc-ink); font: inherit; font-size: 11px;
  cursor: pointer; text-overflow: ellipsis;
  transition: background .2s, border-color .2s;
}
.fc-set-cell select:hover:not(:disabled){ background: #ffffff1c; border-color: var(--fc-line) }
.fc-set-cell select:focus-visible{ outline: 2px solid var(--fc-gold); outline-offset: 2px }
.fc-set-cell select:disabled{ opacity: .45; cursor: default }
.fc-set-cell option{ background: var(--fc-solid); color: var(--fc-ink) }
html[data-theme="light"] .fc-set-cell select{ background: #fff; border-color: #b9544659 }
html[data-theme="light"] .fc-set-cell option{ background: #fff; color: var(--fc-ink) }
/* Fido parle : la pastille de présence prend la braise et bat plus vite, et la
   Relire chauffe sous l'onglet — l'état se lit même réglages refermés. */
.fido.fc-speaking .fc-status-dot{ background: var(--fc-amber); animation: fc-voice 1.4s ease-out infinite }
.fido.fc-speaking .fc-voice-relire{ border-color: #ff9a5c73; background: #ff8a4c1f; color: var(--fc-gold) }
.fido.fc-speaking .fc-set-line--voice{ color: var(--fc-gold) }
.fc-bubbles{ flex: 0 0 auto }
.fc-mode-status{
  margin-top: 7px; padding: 8px 10px;
  border: 1px solid #ff8a4c26; border-radius: 10px;
  background: #ff8a4c12; font-size: 12px; line-height: 1.55; color: var(--fc-gold);
  animation: fc-choice-in .25s var(--fc-ease);
}
.fc-debug{ margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: #ff8a4c08; font-size: 12px }
.fc-debug summary{ cursor: pointer; color: var(--fc-muted) }
.fc-debug pre{ margin-top: 8px; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fc-soft) }

/* ── 10 bis. La carte de réglages en vol ──────────────────────
   Sur un cadre large qui sait survoler, la carte quitte la plaque par son bord
   gauche et pivote dessus comme une page qu'on lève — la sœur de l'aperçu du
   profil, en miroir. Trois triggers la tiennent ouverte : le survol, le focus
   qu'elle contient, et l'épingle posée par un clic.
   La gouttière de 12 px qui sépare la carte de son engrenage doit rester franchissable
   au pointeur : une carte refermée devient `pointer-events: none` et ne se
   rallume plus sous la souris, qui n'a plus que la roue pour la rappeler. Le
   pont est donc la bordure droite transparente du feuillet — elle se teste au
   pointeur sans rien peindre (`background-clip: padding-box`), alors que le
   pseudo-élément qu'elle remplace débordait le feuillet de sa propre largeur et
   faisait pousser un ascenseur horizontal. */
@media (min-width: 900px) and (hover: hover) {
  /* La plaque ne rogne plus : c'est le prix du vol. Les trois bandes qui
     touchaient ses angles reprennent donc leur propre arrondi, et le filet de
     flamme s'arrête où la courbure commence. */
  .fc-panel{ overflow: visible }
  .fc-header{ border-radius: 23px 23px 0 0 }
  .fc-form{ border-radius: 0 0 23px 23px }
  .fc-panel::before{ inset: 0 14px auto }
  /* Le reflet ne franchit plus les bords : il part collé au bord gauche et
     finit collé au bord droit, sans jamais déborder sur la page. */
  .fc-panel::after{ left: 0; transform: translateX(-100%) }
  .fc-panel:hover::after{ transform: translateX(294%) }
  .fc-settings-card{
    position: absolute; top: -6px; right: 100%; z-index: 8;
    /* 308 = les 296 du feuillet visible + les 12 de la gouttière, mangées par la
       bordure droite. Le bord utile retombe donc exactement où il tombait. */
    width: 308px; max-width: max(202px, calc(100vw - 100% - 56px));
    max-height: calc(100dvh - 190px); padding: 9px;
    border: 1px solid #ff9a5c52; border-right: 12px solid transparent;
    border-radius: 22px 0 0 22px; background-clip: padding-box;
    /* Opaque, et vitrée surtout pas : deux verres imbriqués repassent sous les
       dix images par seconde que la fenêtre coûte déjà. */
    background-image: linear-gradient(168deg, #ff8a4c14, transparent 52%);
    background-color: var(--fc-solid);
    box-shadow: inset 1px 0 0 #ff9a5c4d, inset 0 1px 0 #ffffff14,
      -20px 22px 46px #0502068c, 0 0 30px #ff6a3d1f;
    transform-origin: right center; backface-visibility: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: perspective(860px) rotateY(21deg) translateX(14px);
    animation: none;
    transition: opacity .22s var(--fc-ease) .16s, transform .36s var(--fc-ease) .16s, visibility 0s .42s;
  }
  /* La roue est un disque : ses quatre coins ne se testent plus au pointeur. Un
     curseur qui part du centre vers la carte sort donc du bouton avant d'entrer
     dans la gouttière, et la feuille se referme en plein geste. Le pont est
     élargi à ce seul rayon — un bloc transparent de 56 × 48 centré sur l'engrenage,
     qui mord de 8 px sur la bordure du feuillet. La bande vide à droite de la
     roue reste morte : rien ne s'allume en survolant la plaque pour rien. */
  .fc-settings::before{ content: ''; position: absolute; top: -6px; bottom: -6px; left: -8px; width: 56px; pointer-events: auto }
  /* Un geste large — de la roue au `select` du timbre, tout en bas du feuillet —
     coupe par la plaque et traverse trois ou quatre points où ni le disque ni la
     gouttière ne tiennent le pointeur. Le tenon est là pour ces points : il ne
     s'allume QUE pendant que la rangée est déjà survolée, donc il ne réveille
     jamais rien, et il ne tient que la feuille déjà ouverte. */
  .fc-settings::after{ content: ''; position: absolute; top: -6px; left: -8px; width: 22px; height: 150px; pointer-events: none }
  .fc-settings:hover::after{ pointer-events: auto }
  .fc-settings:hover > .fc-settings-card,
  .fc-settings.is-set > .fc-settings-card,
  .fc-settings .fc-settings-card:focus-within{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: perspective(860px) rotateY(0deg) translateX(0);
    transition: opacity .18s var(--fc-ease), transform .42s var(--fc-ease), visibility 0s;
  }
  /* Le focus qui tient la carte est celui QU'ELLE contient, pas celui du
     feuillet entier : l'engrenage est dans le feuillet, et un Echap qui lui
     revient laisserait la carte ouverte sur elle-même. */
  /* La carte se déploie, elle ne se montre pas : les quatre étages arrivent
     après leur voisin. Les `animation-name` ne vivent QUE dans l'état ouvert —
     une carte masquée par `visibility` ne se masque pas de la même façon qu'un
     `display: none`, et un nom posé en base ne rejouerait plus au survol. */
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-head,
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-cell,
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-mode-status,
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-debug,
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-foot{
    animation: fc-set-in .4s var(--fc-ease) both;
  }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-head{ animation-delay: 0s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-cell:nth-child(1){ animation-delay: .04s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-cell:nth-child(2){ animation-delay: .1s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-cell:nth-child(3){ animation-delay: .16s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-cell:nth-child(4){ animation-delay: .22s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-mode-status{ animation-delay: .28s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-debug{ animation-delay: .32s }
  .fc-settings:is(:hover, :focus-within, .is-set) .fc-set-foot{ animation-delay: .36s }
  /* Écrites ici avec un cran de poids de plus : la section 13 pose le fond
     d'accordéon du thème clair APRÈS ce bloc et le battrait sinon. Le fond se
     dit en deux longues propriétés, jamais en raccourci : `background` remettrait
     l'arrimage du fond à `padding-box` et repeindrait la gouttière de crème. */
  html[data-theme="light"] .fc-settings .fc-settings-card{
    background-image: linear-gradient(168deg, #d8303f0f, transparent 52%);
    background-color: #fff8f3;
    box-shadow: inset 1px 0 0 #b9544659, inset 0 1px 0 #ffffffb8,
      -20px 22px 46px #b9544633, 0 0 30px #d8303f14;
  }
  html[data-theme="light"] .fc-settings .fc-settings-card .fc-set-cell{ background: #fffdfb }
}
@keyframes fc-set-in{ from{ opacity: 0; transform: translateX(14px) } to{ opacity: 1; transform: none } }

/* ── 11. Confirmation d'effacement ──────────────────────────── */
.fc-confirm{
  width: 340px; max-width: calc(100vw - 32px); padding: 24px;
  border: 1px solid #ff9a5c52; border-radius: 20px;
  background: linear-gradient(158deg, #ffffff0e, #ffffff02 46%), var(--fc-solid);
  color: var(--fc-ink); box-shadow: 0 26px 68px #050206b3, 0 6px 18px #05020659, inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #05020659;
}
.fc-confirm::backdrop{ background: #050206b3 }
.fc-confirm[open]{ animation: fc-gain-in .28s var(--fc-ease) }
.fc-confirm h2{ font-size: 20px; font-weight: 600; letter-spacing: -.03em }
.fc-confirm p{ margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--fc-soft) }
.fc-confirm-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px }
.fc-confirm-actions button{
  min-height: 44px; padding: 10px 17px;
  border: 1px solid var(--fc-line); border-radius: 12px; background: #ffffff0a; color: inherit;
  font-size: 14px; transition: background .2s, transform .15s, box-shadow .2s;
}
.fc-confirm-actions button:hover{ background: #ffffff16 }
.fc-confirm-actions button:active{ transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 7px #05020659; transition-duration: var(--fc-tap) }
.fc-confirm-yes{ border-color: transparent; background: var(--fc-flame); color: #2c0c0e; font-weight: 700; box-shadow: 0 6px 18px #ff5a3d2b }

/* ── 12. Jour et accessibilité du fil ───────────────────────── */
.fc-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 13. Thème clair ────────────────────────────────────────── */
html[data-theme="light"] .fido{
  --fc-ink: #2c1618;
  --fc-soft: #6b4a49;
  --fc-muted: #93736f;

  --fc-ember: #e0763a;
  --fc-amber: #b9540b;
  --fc-gold: #8a4a08;
  --fc-line: #b9544633;
  --fc-line-soft: #b954461c;
  --fc-flame: linear-gradient(96deg, #d8303f 0%, #e0763a 48%, #c98a1a 100%);
  --fc-flame-soft: linear-gradient(96deg, #d8303f12, #e0763a0d 55%, #c98a1a0a);
  /* Même profondeur que le thème sombre, en crème : chaud sous l'en-tête,
     cuivre au pied de la plaque. Sans cette couche, le clair paraît délavé. */
  --fc-glass: linear-gradient(158deg, #fffffff2, #fffaf4cc 46%), linear-gradient(180deg, #d8303f14, transparent 34%, #b954462e), #fbeee3f2;
  --fc-solid: #fffaf6;
  --fc-bubble: linear-gradient(150deg, #ffffff, #fffaf4e6 55%), #f8ebe3f2;
  --fc-bubble-flat: #f8ebe3;
  --fc-flame-flat: #c98a1a;
  /* Sur une plaque claire, le liseré du bas n'est pas une ombre noire mais une
     trace de cuivre : le même creux, sans la ligne grise. */
  --fc-relief: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #b9544626;
  color: var(--fc-ink);
}
html[data-theme="light"] .fc-launcher{ background: linear-gradient(120deg, #fff5ee, #f7e4d8); box-shadow: 0 12px 30px #a54d3f26, 0 3px 10px #a54d3f1f, var(--fc-relief) }
html[data-theme="light"] .fc-header{ background: linear-gradient(180deg, #ffffffb8, transparent 58%), linear-gradient(112deg, #d8303f0d, transparent 46%), #fff3ead9 }
html[data-theme="light"] .fc-identity strong{ text-shadow: 0 1px 0 #fff }
html[data-theme="light"] :is(.fc-quick, .fc-suggestions, .fc-form, .fc-settings-gear){ background: #fbf0e8a6; box-shadow: var(--fc-relief) }
/* Le reflet qui balaie la vitre doit rester une lumière, pas une ombre : sur
   le fond crème, le blanc cassé ne se lit qu'à plus forte dose. */
html[data-theme="light"] .fc-panel::after{ background: linear-gradient(104deg, transparent, #ffffffb8 46%, #ffffff66 64%, transparent) }
html[data-theme="light"] .fc-message{ box-shadow: 0 3px 12px #a54d3f1a, 0 1px 3px #a54d3f14, var(--fc-relief) }
html[data-theme="light"] .fc-suggestions button{ box-shadow: inset 0 1px 0 #fff, 0 4px 12px #a54d3f1f }
/* La feuille intégrée reste dans l'épaisseur de la plaque : sur crème, un lavis
   blanc ne se voit pas, ce sont les tuiles de papier qui portent la structure. */
html[data-theme="light"] .fc-settings-card{ background: linear-gradient(180deg, #d8303f0f, transparent 42%), #b954460a; box-shadow: var(--fc-relief) }
html[data-theme="light"] .fc-set-cell{ background: #fffdfb; box-shadow: 0 1px 0 #b954461f, var(--fc-relief) }
html[data-theme="light"] .fc-confirm{ box-shadow: 0 26px 68px #a54d3f33, 0 6px 18px #a54d3f1f, var(--fc-relief) }
html[data-theme="light"] .fc-form textarea{ background: #fff; color: var(--fc-ink); box-shadow: inset 0 2px 8px #b9544626 }
html[data-theme="light"] .fc-message--user,html[data-theme="light"] .fc-pet,html[data-theme="light"] .fc-love-claim,html[data-theme="light"] .fc-form button,html[data-theme="light"] .fc-love-badge{ color: #fff6f1 }
html[data-theme="light"] .fc-message-avatar img,html[data-theme="light"] .fc-launcher-avatar,html[data-theme="light"] .fc-avatar img{ filter: none }
html[data-theme="light"] .fc-love{ background: linear-gradient(150deg, #d8303f12, #c98a1a0c), #fffaf6; box-shadow: 0 20px 48px #a54d3f33, 0 0 28px #ff6a3d14, var(--fc-relief) }
html[data-theme="light"] .fc-love::before{ background: #fffaf6 }
html[data-theme="light"] .fc-love-track{ background: #b954462e; box-shadow: inset 0 1px 2px #b9544626, inset 0 0 0 1px #b9544640 }
/* À 30 % sur une plaque claire, un bouton flamme devient une tache illisible :
   le refus garde sa forme et son libellé reste contrasté. */
html[data-theme="light"] :is(.fc-love-claim, .fc-form button):disabled{ background: #b9544626; color: #7d544c; opacity: 1 }
/* Le registre du jour sur crème : « à offrir » prend un lavis de cuivre, « déjà
   fait » une cendre. L'opacité seule ne se lirait pas sur papier clair. */
html[data-theme="light"] .fc-love-ledger{ background: #b954460d; border-color: #b954462e }
html[data-theme="light"] .fc-love-chip{ background: #fffdfb; border-color: #b9544626 }
html[data-theme="light"] .fc-love-chip[data-state="open"]{ background: #ff9a5c26; border-color: #c9721f5c }
html[data-theme="light"] .fc-love-chip[data-state="done"]{ background: transparent; border-color: #b954461a; opacity: .62 }
html[data-theme="light"] .fc-pet:disabled{ background: #b9544626; color: #7d544c; opacity: 1 }
html[data-theme="light"] .fc-welcome,html[data-theme="light"] .fc-rtt-bubble,html[data-theme="light"] .fc-love-toast{ background: linear-gradient(150deg, #fffaf6, #fdeee6); box-shadow: 0 18px 44px #a54d3f33, 0 0 26px #ff6a3d12, var(--fc-relief); color: var(--fc-ink) }
html[data-theme="light"] .fc-welcome::after{ background: #fdeee6 }
html[data-theme="light"] .fc-markdown pre{ background: #b9544612 }
html[data-theme="light"] .fc-form textarea{ background: #fff; color: var(--fc-ink) }
/* Sélection du jour : la même braise, posée sur crème. Le lavis sombre de la
   nuit y ferait une tache d'encre. */
html[data-theme="light"] .fido ::selection{ background: #e0555b59; color: #fff6f1 }
html[data-theme="light"] .fido :is(.fc-message--user, .fc-message--user *)::selection{ background: #7a140f73; color: #fff8f2 }
/* Sur crème, un lavis blanc ne se lit pas : l'appui y prend la trace de cuivre,
   et la trempe des liens aussi. Le survol vient avant la trempe — même poids,
   c'est le dernier écrit qui garde la main quand le doigt est posé dessus. */
html[data-theme="light"] .fido :is(.fc-clear, .fc-zoom button, .fc-love-ghost, .fc-relire):hover{ background: #b9544614; border-color: #b9544659 }
html[data-theme="light"] .fido :is(.fc-clear, .fc-zoom button, .fc-love-ghost, .fc-relire):active{ background: #b9544621 }
/* Sur crème, l'or de la nuit devient papier : la Relire en cours de parole prend
   le cuivre brulé, et son encre éteinte se fonce d'un ton. Écrit après la trempe de
   survol, même poids : c'est elle qui garde la main quand le doigt est posé dessus. */
html[data-theme="light"] .fc-relire{ color: #8d6a6d; border-color: #b9544626 }
html[data-theme="light"] .fido .fc-relire[aria-pressed="true"]{ background: #ff8a4c26; border-color: #d8303f59; color: #b9540b }
/* La cendre de la plaque tenue se pose aussi sur crème : même enfoncement,
   mais en bistre, non en poix. */
html[data-theme="light"] .fido .fc-launcher:active{ border-color: #b9544673; box-shadow: 0 3px 12px #a54d3f2b, 0 0 14px #e0763a26, inset 0 2px 7px #b9544633, inset 0 -1px 0 #b9544626 }
/* La roue a une assiette crème opaque, non une vitre : sa trempe se dit en
   assombrissant le papier plutôt qu'en posant un lavis transparent. */
html[data-theme="light"] .fc-settings.is-set > .fc-settings-gear{ background: #f7dfd2; border-color: #d8303f59 }
html[data-theme="light"] .fc-settings-gear:hover{ background: #f6e4d8 }
html[data-theme="light"] .fc-settings-gear:active{ background: #efd6c7 }
/* Le liseré de la pastille de mode se découpe dans le fond, pas dans la nuit. */
html[data-theme="light"] .fc-settings-gear::after{ box-shadow: 0 0 0 2px #fff8f3 }
html[data-theme="light"] .fc-settings-gear[data-mode="ia"]::after{ box-shadow: 0 0 0 2px #fff8f3, 0 0 7px #d8303f4d }
html[data-theme="light"] .fc-markdown a{ background-image: linear-gradient(currentColor, currentColor), linear-gradient(#b9544633, #b9544633) }
/* Sur crème, l encre la plus chaude est la plus foncée : la trempe de la
   « voir mes récompenses » s enfonce au lieu de pâlir comme en nuit. */
html[data-theme="light"] .fc-love-more:active{ color: #6b3405; text-decoration-color: #6b3405 }

/* ── 14. Mobile, clavier et petites hauteurs ────────────────── */
@media (max-width: 640px) {
  .fido{ right: 14px; bottom: max(14px, env(safe-area-inset-bottom)) }
  .fc-launcher{ min-height: 54px; padding: 7px 16px 7px 7px; font-size: 14.5px }
  .fc-launcher-avatar{ flex-basis: 40px; width: 40px; height: 40px }
  /* fido.js impose position:fixed et les dimensions du viewport visible. */
  .fc-panel{ border-radius: 20px; max-width: none }
  .fc-resize{ display: none }
  .fc-header{ padding: calc(8px + env(safe-area-inset-top)) 12px 8px 12px; min-height: 68px }
  .fc-avatar{ flex-basis: 50px; width: 50px; height: 54px }
  .fc-identity small{ font-size: 11px }
  .fc-clear,.fc-close,.fc-settings-gear{ flex-basis: 44px; width: 44px; height: 44px }
  .fc-love{ left: 12px; right: 12px; width: auto }
  .fc-messages{ padding: 12px 12px 16px }
  .fc-rtt-bubble{ position: fixed; inset: auto 8px 8px; width: auto; max-width: none; max-height: 82dvh; overflow: auto; padding: 24px 22px max(24px, env(safe-area-inset-bottom)); border-radius: 22px }
  .fc-rtt-bubble::before{ content: ''; display: block; width: 36px; height: 4px; margin: -12px auto 18px; border-radius: 4px; background: #ffffff22 }
  .fc-welcome{ bottom: calc(100% + 12px) }
  .fc-open .fc-launcher{ visibility: hidden; pointer-events: none }
  /* Un voile fixe : la page derrière est figée, la fenêtre devient la scène. */
  .fc-open::before{ content: ''; position: fixed; inset: 0; z-index: -1; background: #0a0508a6 }
}
/* Clavier virtuel : le fil garde la place, les bandeaux s'effacent. */
.fc-keyboard :is(.fc-quick, .fc-suggestions, .fc-day){ display: none }
.fc-keyboard .fc-header{ padding-block: 6px; min-height: 58px }
.fc-keyboard .fc-messages{ padding-block: 8px }
@media (max-height: 660px) and (min-width: 641px) {
  .fc-day,.fc-love-next{ display: none }
  .fc-header{ min-height: 62px }
  .fc-suggestions{ padding-bottom: 8px }
  .fc-identity small{ display: none }
}
@media (pointer: coarse) {
  .fc-resize{ width: 38px; height: 38px; font-size: 20px }
  .fc-header{ padding-left: 38px }
}

/* ── 15. Animations ─────────────────────────────────────────── */
@keyframes fc-float { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-4px) rotate(1.4deg) } }
@keyframes fc-presence { 0% { box-shadow: 0 0 0 0 #8fd6a466 } 65%, 100% { box-shadow: 0 0 0 6px #8fd6a400 } }
@keyframes fc-voice { 0% { box-shadow: 0 0 0 0 #ff9a5c73 } 65%, 100% { box-shadow: 0 0 0 6px #ff9a5c00 } }
@keyframes fc-reply-in { from { opacity: 0; transform: translate(-8px, 8px) } to { opacity: 1; transform: none } }
@keyframes fc-user-in { from { opacity: 0; transform: translate(8px, 8px) } to { opacity: 1; transform: none } }
@keyframes fc-choice-in { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
@keyframes fc-gain-in { from { opacity: 0; transform: translateY(-10px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes fc-typing { 0%, 70%, 100% { opacity: .35; transform: none } 35% { opacity: 1; transform: translateY(-4px) } }
@keyframes fc-love-pop { from { opacity: 1; transform: translateY(0) scale(.6) } 40% { opacity: 1; transform: translateY(-22px) scale(1.15) } to { opacity: 0; transform: translateY(-54px) scale(.9) } }
@keyframes fc-love-badge { 0%, 100% { box-shadow: 0 0 0 0 #ff9a5c00 } 50% { box-shadow: 0 0 16px 2px #ff9a5c4d } }

/* Le mouvement est un extra : tout reste lisible sans lui. */
@media (prefers-reduced-motion: reduce) {
  .fido :where(*),.fido :where(*)::before,.fido :where(*)::after{ animation: none !important; transition: none !important }
  /* Chaque sélecteur reprend la forme exacte de sa règle d'appui ou de survol :
     une variante plus lâche (sans :not(:disabled), par exemple) se ferait
     coiffer par l'originale et le mouvement survivrait ici. */
  .fc-launcher:hover,.fido .fc-launcher:active,.fc-avatar:hover,.fc-avatar:active,.fc-resize:active,.fc-clear:hover,.fc-clear:active:not(:disabled),.fc-close:hover,.fc-close:active,.fc-message > a:hover,.fc-message > a:active,.fc-suggestions button:hover:not(:disabled),.fc-suggestions button:active:not(:disabled),.fc-form button:hover:not(:disabled),.fc-form button:active:not(:disabled),.fc-rtt-close:hover,.fc-rtt-close:active,.fc-love-close:hover,.fc-love-close:active,.fc-pet:hover,.fc-pet:active,.fc-love-ghost:hover,.fc-love-ghost:active,.fc-love-claim:hover:not(:disabled),.fc-love-claim:active:not(:disabled),.fc-zoom button:active:not(:disabled),.fc-confirm-actions button:active,.fc-settings-gear:hover,.fc-settings-gear:active,.fc-relire:active,.fc-settings.is-set > .fc-settings-gear{ transform: none }
  /* Le salut du goupil est posé sur translate/rotate/scale, hors de `transform`.
     La cendre du `filter` reste, elle : c'est le seul signe d'appui sans mouvement. */
  .fc-launcher:hover .fc-launcher-avatar,.fido .fc-launcher:active .fc-launcher-avatar{ translate: none; rotate: none; scale: none }
  /* L'interrupteur ne gonfle plus : le déclic se lit seulement dans la course. */
  .fc-switch-row input:active:not(:disabled) + .fc-switch::after{ width: 17px }
  .fc-messages,.fc-suggestions,.fc-settings-card{ scroll-behavior: auto }
  /* Faute de transition, le reflet sauterait d'un bord à l'autre au survol. */
  .fc-panel::after{ display: none }
}
@media (prefers-reduced-transparency: reduce) {
  /* Miroir fumé : la fenêtre prend l'opacité que le flou ne donne plus. */
  .fc-panel{ background: var(--fc-solid); backdrop-filter: none; -webkit-backdrop-filter: none }
  html[data-theme="light"] .fc-panel{ background: #fff8f3 }
}
@media (forced-colors: active) {
  .fc-panel,.fc-confirm,.fc-love,.fc-message,.fc-suggestions button{ border: 1px solid CanvasText }
  .fc-panel::before,.fc-panel::after,.fc-launcher::before,.fc-love::before,.fc-message::before,.fc-typing::before{ display: none }
}