/* ==============================================
   JADIS FEEL — Page Changement d'humeur
   Code adapté EXACTEMENT de la consigne d'Iza
   (fichier user_input_files/interface_style_13fev2026.css)
   ============================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== BACKGROUND NORMAL INTERFACE ==========
   Le body a un fond de base rose/jaune fixe.
   C'est le fond "normal" de l'interface. */
body.page-humeur {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(
    circle farthest-corner at 10% 20%,
    rgba(240, 139, 139, 1) 0%,
    rgba(243, 252, 166, 1) 90%
  );
  font-family: 'Prata', 'Georgia', serif;
  overflow-x: hidden;
  transition: background 3.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  isolation: isolate;
  --mood-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fondu enchaîné du background humeur -> fond normal (sans flou global UI) */
body.page-humeur::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(22, 18, 20, 0.78) 0%,
      rgba(22, 18, 20, 0.38) 65%,
      transparent 100%
    ) top / 100% 0% no-repeat,
    linear-gradient(
      to top,
      rgba(22, 18, 20, 0.78) 0%,
      rgba(22, 18, 20, 0.38) 65%,
      transparent 100%
    ) bottom / 100% 0% no-repeat;
  opacity: 0;
  backdrop-filter: brightness(1) contrast(1);
  -webkit-backdrop-filter: brightness(1) contrast(1);
}

body.page-humeur::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--mood-overlay-gradient, transparent);
  background-size: 220% 220%;
  background-position: 0% 50%;
  opacity: 0;
}

/* Quand l'humeur est "on" : on désactive le ::before et on active le ::after */
body.mood-overlay-on::before {
  opacity: 0;
  animation: none;
}

/* Le clignement Truffaut de la sérénité — posé le 16/08/2026.
   Il était déclaré sur `body.humeur-serenite` par la variable
   `--mood-overlay-animation-name: truffautShutterSoft`, mais la règle
   `body.humeur-serenite::after` qui suit impose `ondeZen` et l'écrasait :
   le clignement n'a donc jamais été rendu à l'écran. C'était le point resté
   ouvert dans `docs_jdb-landing--.md`, « valider visuellement l'animation
   truffaut shutter de la sérénité ».
   Les deux animations ne se disputent plus la même surface : l'onde zen
   continue de faire respirer le fond sur le calque `::after`, le clignement
   joue par-dessus sur `::before`, celui qui porte les deux bandes
   d'obturateur. Il ne bat pas en continu — `humeur.js` pose la classe une
   fois toutes les 7 secondes environ, la cadence organique réglée pour le
   portrait le 13/08/2026 dans `blink.js`. */
body.mood-overlay-on.truffaut-cligne::before {
  opacity: 0;
  /* L'obturateur passe devant toute la page — le calque d'humeur, le texte,
     le bouton de retour. C'est ce qui en fait un obturateur et non un voile
     de fond : sans ce z-index, il jouait sous le dégradé opaque de l'humeur
     et rien ne se voyait à l'écran. Il ne prend aucun clic : `pointer-events:
     none` est déclaré sur `body.page-humeur::before`. */
  z-index: 30;
  animation: truffautShutterSoft var(--truffaut-blink-duration, 1.55s) var(--mood-ease) 1;
}

body.mood-overlay-on::after {
  opacity: 1;
  background-size: var(--mood-overlay-size, 440% 440%);
  animation: var(--mood-overlay-animation-name, moodGradientFlow) var(--mood-overlay-duration, 12s) var(--mood-overlay-ease, ease-in-out) infinite;
}

/* Quand l'humeur fade (transition) : on ferme le shutter puis on dissout */
body.mood-overlay-fade::before {
  opacity: 1;
  animation: truffautShutterSoft var(--truffaut-blink-duration, 1.15s) var(--mood-ease) forwards;
}

body.mood-overlay-fade::after {
  background-size: var(--mood-overlay-size, 440% 440%);
  animation:
    var(--mood-overlay-animation-name, moodGradientFlow) var(--mood-overlay-duration, 12s) var(--mood-overlay-ease, ease-in-out) infinite,
    moodDissolve var(--truffaut-blink-duration, 1.15s) var(--mood-ease) forwards;
}

/* ========== KEYFRAMES (référence d'Iza) ========== */
@keyframes moodGradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ondeZen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ondeZenVolutes {
  0% {
    background-position: 8% 30%, 92% 68%, 0% 50%;
  }
  50% {
    background-position: 62% 36%, 36% 46%, 100% 50%;
  }
  100% {
    background-position: 8% 30%, 92% 68%, 0% 50%;
  }
}

@keyframes sereneCloudDrift {
  0% {
    background-position: 0px 22%, 260px 76%, 0px 58%;
  }
  100% {
    background-position: 1080px 22%, 760px 76%, 1480px 58%;
  }
}

@keyframes truffautShutterSoft {
  0% {
    opacity: 0;
    background-size: 100% 0%, 100% 0%;
    backdrop-filter: brightness(1) contrast(1);
    -webkit-backdrop-filter: brightness(1) contrast(1);
  }
  32% {
    opacity: var(--truffaut-mid-opacity, 0.50);
    background-size: 100% 26%, 100% 26%;
    backdrop-filter: brightness(0.38) contrast(1.06) grayscale(0.06);
    -webkit-backdrop-filter: brightness(0.38) contrast(1.06) grayscale(0.06);
  }
  52% {
    opacity: var(--truffaut-peak-opacity, 0.52);
    background-size: 100% 47%, 100% 47%;
    backdrop-filter: brightness(0.12) contrast(1.12) grayscale(0.18);
    -webkit-backdrop-filter: brightness(0.12) contrast(1.12) grayscale(0.18);
  }
  76% {
    opacity: 0.46;
    background-size: 100% 22%, 100% 22%;
    backdrop-filter: brightness(0.52) contrast(1.03) grayscale(0.04);
    -webkit-backdrop-filter: brightness(0.52) contrast(1.03) grayscale(0.04);
  }
  100% {
    opacity: 0;
    background-size: 100% 0%, 100% 0%;
    backdrop-filter: brightness(1) contrast(1);
    -webkit-backdrop-filter: brightness(1) contrast(1);
  }
}

@keyframes moodDissolve {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ========== GRADIENTS HUMEURS - FOND DE PAGE (body) ==========
   6 humeurs, comme dans le code d'Iza. */

/* Humeur : tendresse (rose pâle -> rose vif) */
body.humeur-tendresse {
  background: radial-gradient(
    circle,
    rgb(255, 255, 255) 2%,
    rgb(255, 182, 193) 77%,
    rgb(255, 105, 180) 100%
  ) !important;
  --truffaut-blink-duration: 1.15s;
  --mood-overlay-animation-name: moodGradientFlow;
  --mood-overlay-duration: 12s;
  --mood-overlay-ease: ease-in-out;
  --mood-overlay-size: 240% 240%;
}

/* SÉRÉNITÉ — demandée par Iza comme page par défaut */
body.humeur-serenite {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.63) 2%,
    rgba(216, 131, 230, 0.79) 77%,
    rgba(206, 194, 252, 0.83) 100%
  ) !important;
  --truffaut-blink-duration: 1.55s;
  --truffaut-mid-opacity: 0.46;
  --truffaut-peak-opacity: 0.48;
  --mood-overlay-animation-name: truffautShutterSoft;
  --mood-overlay-duration: 8.4s;
  --mood-overlay-ease: linear;
  --mood-overlay-size: 440% 440%;
}

body.humeur-serenite {
  background-size: 440% 440% !important;
  animation: ondeZen 8.4s linear infinite !important;
}

body.humeur-serenite::after {
  opacity: 1;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.63) 2%,
    rgba(216, 131, 230, 0.79) 77%,
    rgba(206, 194, 252, 0.83) 100%
  );
  background-size: 440% 440%;
  background-position: 0% 50%;
  animation: ondeZen 8.4s linear infinite;
  mix-blend-mode: normal;
}

body.humeur-rieuse {
  background: linear-gradient(307deg,
    #f9e860,
    #dfa872,
    #f2c464,
    #ff9d00,
    #e58e26,
    #f9d423) !important;
  --truffaut-blink-duration: 0.90s;
  --truffaut-mid-opacity: 0.48;
  --truffaut-peak-opacity: 0.50;
  --mood-overlay-animation-name: moodGradientFlow;
  --mood-overlay-duration: 12s;
  --mood-overlay-ease: ease;
  --mood-overlay-size: 600% 600%;
}

body.humeur-pensive {
  background: linear-gradient(269deg,
    #17225d,
    #130f36,
    #58a2f7,
    #08ffd5) !important;
  --truffaut-blink-duration: 1.55s;
  --truffaut-mid-opacity: 0.48;
  --truffaut-peak-opacity: 0.50;
  --mood-overlay-animation-name: moodGradientFlow;
  --mood-overlay-duration: 12s;
  --mood-overlay-ease: ease;
  --mood-overlay-size: 800% 800%;
}

body.humeur-rossignol {
  background: linear-gradient(66deg,
    #d22828,
    #262558,
    #f2bc88,
    #322c20) !important;
  --truffaut-blink-duration: 1.55s;
  --truffaut-mid-opacity: 0.48;
  --truffaut-peak-opacity: 0.50;
  --mood-overlay-animation-name: moodGradientFlow;
  --mood-overlay-duration: 16s;
  --mood-overlay-ease: ease;
  --mood-overlay-size: 800% 800%;
}

body.humeur-bougonne {
  background: linear-gradient(298deg,
    #67675d,
    #9f95b0,
    #cebfa0,
    #92805c) !important;
  --truffaut-blink-duration: 0.90s;
  --truffaut-mid-opacity: 0.48;
  --truffaut-peak-opacity: 0.50;
  --mood-overlay-animation-name: moodGradientFlow;
  --mood-overlay-duration: 5s;
  --mood-overlay-ease: ease;
  --mood-overlay-size: 800% 800%;
}

/* Animation commune à toutes les humeurs (référence d'Iza) */
body.humeur-tendresse,
body.humeur-serenite,
body.humeur-rieuse,
body.humeur-pensive,
body.humeur-rossignol,
body.humeur-bougonne {
  background-size: var(--mood-overlay-size, 240% 240%) !important;
  animation: var(--mood-overlay-animation-name, moodGradientFlow) var(--mood-overlay-duration, 12s) var(--mood-overlay-ease, ease-in-out) infinite;
}

/* ========== MISE EN PAGE ========== */

/* ========== ZONE DE SAISIE ==========
   L'humeur ne se choisit pas : elle se détecte à partir de ce que
   l'invité écrit ici. Il n'y a donc aucun bouton d'humeur. */
.humeur-input-zone {
  width: 100%;
  max-width: 580px;
  margin: 0 auto var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.humeur-input-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(22, 18, 20, 0.8);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.humeur-input {
  width: 100%;
  resize: vertical;
  min-height: 92px;
  padding: 14px 16px;
  font-family: 'Prata', 'Georgia', serif;
  font-size: 1rem;
  line-height: 1.55;
  /* Fond opaque et non plus translucide : le mauve de l'humeur transparaissait
     au travers et changeait le contraste du texte selon la couleur de la page.
     Signalé le 17/08/2026 par une lectrice dont la vision faiblit. */
  color: #111111;
  font-weight: 500;
  background: #FDF8F2;
  border: 1px solid #E5DDD5;
  border-radius: 12px;
  border-radius: 12px;
  box-shadow:
    0 6px 18px rgba(43, 28, 20, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: border-color 0.3s var(--mood-ease), box-shadow 0.3s var(--mood-ease);
}

.humeur-input:focus {
  outline: none;
  border-color: rgba(22, 18, 20, 0.55);
  box-shadow:
    0 8px 22px rgba(43, 28, 20, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.humeur-input::placeholder {
  color: rgba(22, 18, 20, 0.6);
  font-style: italic;
}

/* Une étiquette posée sur le fond d'humeur : des visiteurs ont tenté d'écrire
   à Jadis et se sont trouvés bloqués. Retour recueilli le 17/08/2026. */
.humeur-exemple {
  display: table;
  margin: 14px auto 0;
  padding: 5px 12px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.82rem;
  color: #2b1c14;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 3px;
}

/* Indicateur discret de l'humeur perçue */
.humeur-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(22, 18, 20, 0.75);
}

.humeur-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(22, 18, 20, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
  flex: none;
}

/* Contenu principal */
.humeur-main {
  position: relative;
  z-index: 1;
  padding: var(--s-md) var(--s-md) var(--s-xl);
  max-width: 720px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.humeur-intro {
  text-align: center;
  margin-bottom: var(--s-lg);
  color: #1a1a1a;
}
.humeur-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 var(--s-xs);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
.humeur-subtitle {
  font-family: 'Prata', 'Georgia', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #2b1c14;
  opacity: 0.85;
  margin: 0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

@keyframes caretBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Lien retour en haut */
/* Le retour est en haut à gauche — décision d'Iza, 16/08/2026, et sa raison
   mérite d'être écrite : la fin de la ligne est ce que la mémoire retient le
   mieux, et cette page ne cherche pas à ce qu'on la quitte. Le lien de sortie
   n'a donc rien à faire à la place la plus mémorable. À gauche, il occupe le
   coin où le geste « revenir » se cherche par habitude, sans être mis en
   avant. */
.page-header-humeur {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
}
/* Retour à l'accueil — refait le 16/08/2026.
   L'état d'avant écrivait du gris à 78 % sur un blanc à 60 %, en 0,85 rem :
   sur le mauve de la sérénité comme sur le rose de l'interface, le lien se
   noyait. Une flèche seule le remplace : aucun fond, aucun cadre, rien qui
   pèse sur une page dont le sujet est le fond qui change. Le trait est foncé
   et opaque, il tient donc le contraste sur les six humeurs. La zone
   cliquable fait 44 px — la cible tactile mesurée sur téléphone le
   13/08/2026 — alors que le dessin n'en occupe que 26. */
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  color: rgba(22, 18, 20, 0.78);
  background: none;
  /* Un cercle fin cerne la flèche : seule, elle se repérait mal sur les
     fonds d'humeur. Retour recueilli le 17/08/2026. */
  border: 1.5px solid rgba(22, 18, 20, 0.45);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.back-link:hover {
  color: #161214;
  transform: translateX(-2px);
}
.back-link:focus-visible {
  outline: 2px solid rgba(22, 18, 20, 0.75);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 1;
  padding: var(--s-md);
  text-align: center;
  font-size: 0.82rem;
  color: rgba(22, 18, 20, 0.65);
  font-family: 'Prata', serif;
}
.site-footer p { margin: 0 0 var(--s-xs); }
.site-footer a { color: rgba(22, 18, 20, 0.85); text-decoration: underline; }

/* Responsive */
@media (max-width: 600px) {
  .humeur-input { min-height: 110px; }
}

/* Le badge d'humeur a été retiré le 16/08/2026, avec le code JavaScript qui
   l'alimentait : aucune des cinq pages du site ne contient l'élément
   `moodBadge` que ces règles habillaient. */

/* ========== PHRASE CENTRALE (RUBAN) ==========
   Grande phrase poétique, change selon l'humeur. Disparaît après 10s. */
.phrase-centrale {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-style: italic;
  text-align: center;
  color: #1a1a1a;
  margin: 0 auto var(--s-lg);
  max-width: 580px;
  padding: var(--s-md) var(--s-md);
  /* Ivoire opaque, comme la zone de saisie : le blanc translucide laissait
     passer l'humeur et gênait la lecture. */
  background: #FDF8F2;
  border-left: 2px solid rgba(22, 18, 20, 0.45);
  border-right: 2px solid rgba(22, 18, 20, 0.45);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  /* Lisible dès l'arrivée : à 0.3 le mauve traversait la boîte. */
  opacity: 0.85;
  transform: translateY(8px);
  transition: opacity 0.8s var(--mood-ease), transform 0.8s var(--mood-ease);
}
.phrase-centrale.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== BOUTON RETOUR INTERFACE NORMALE ==========
   Refait le 16/08/2026. Le bouton portait la phrase « Revenir à l'interface
   normale », trop proche du lien « Retour à l'accueil » posé en haut de page.
   Il reprend maintenant la pastille ronde de l'application — même dégradé,
   même icône, mêmes ombres (`public\css\interface_style_13fev2026.css`,
   classe `.btn-grad`). Deux écarts assumés :
   44 px au lieu de 40, cible tactile mesurée sur téléphone le 13/08/2026 ;
   aucune rotation au clic, la landing ne reprend pas cette animation. */
.btn-back-mood {
  display: none;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  padding: 0;

  background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
  background-size: 200% auto;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(222, 98, 98, 0.3);
  cursor: pointer;
  transition:
    background-position 0.5s,
    transform 0.3s var(--mood-ease),
    box-shadow 0.3s var(--mood-ease);
  align-self: center;
  position: relative;
  z-index: 10;
}

/* Le bouton ne s'affiche que si une humeur est posée sur le body : sans
   humeur active, il n'y a rien à annuler. Règle reprise de l'application,
   où elle s'écrit `body[class*="humeur-"] .btn-grad`. */
/* La légende paraît et disparaît avec le bouton, par la même condition. */
.btn-back-mood__legende {
  display: none;
  margin: 0 auto var(--s-xl);
  font-family: 'Special Elite', 'Courier New', monospace;
  /* Agrandi pour la visibilité. */
  font-size: 0.95rem;
  color: #2b1c14;
  text-align: center;
}

body[class*="humeur-"] .btn-back-mood__legende {
  display: block;
}

body[class*="humeur-"] .btn-back-mood {
  display: inline-flex;
}

.btn-back-mood:hover {
  background-position: right center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.btn-back-mood:active {
  transform: scale(0.9);
}

/* Le contour de focus se voit sur le fond rose comme sur les fonds d'humeur. */
.btn-back-mood:focus-visible {
  outline: 3px solid rgba(22, 18, 20, 0.65);
  outline-offset: 3px;
}

/* Le bloc explicatif « section démo » a été retiré le 16/08/2026 : ses six
   règles habillaient un encadré qui n'existe dans aucune page du site. */

/* Mise en page principale (flex centré) */
.humeur-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.humeur-intro {
  text-align: center;
  width: 100%;
}