/* ==========================================================================
   Chez Fleurette — FLUIDITÉ & FINITIONS
   Transitions de page (View Transitions cross-document) + micro-finitions
   typographiques et d'interaction. 100 % progressive enhancement : un
   navigateur qui ignore @view-transition / text-wrap garde exactement le
   comportement actuel. Chargé juste après style.css (avant les thèmes,
   qui gardent donc le dernier mot). Aucune dépendance externe (CSP).
   ========================================================================== */

/* ── Transitions de page (View Transitions cross-document) ───────────────
   Fondu + léger glissement vers le haut entre deux pages du site : la page
   qui part s'efface, celle qui arrive monte doucement, comme une feuille
   qu'on pose sur la table. L'en-tête garde son propre nom de transition :
   identique d'une page à l'autre, il reste visuellement en place. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: cf-entete; }

@keyframes cf-page-sort {
  to { opacity: 0; }
}
@keyframes cf-page-arrive {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: cf-page-sort .25s ease both;
  }
  ::view-transition-new(root) {
    animation: cf-page-arrive .32s ease both;
  }
}

/* Mouvement réduit : aucune transition de page, aucun pseudo-élément animé. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

/* ── Titres équilibrés ────────────────────────────────────────────────────
   text-wrap: balance répartit joliment les mots d'un titre sur ses lignes
   (fini le dernier mot orphelin). Ignoré sans dommage par les vieux
   navigateurs. */
h1,
.title,
.cta-band h2 {
  text-wrap: balance;
}

/* ── Sélection de texte aux couleurs de la maison ─────────────────────────
   Rose de la charte + encre en dur (pas les variables : en thème « veillée »
   --ink devient crème, illisible sur fond rose). */
::selection {
  background: #EBA6CA;
  color: #3a2724;
}

/* ── Focus clavier : visible et charte ────────────────────────────────────
   Rouge doux de la marque, décollé de l'élément pour bien se voir sur les
   fonds crème comme sur les cartes blanches. Les thèmes gardent leurs
   ajustements (rose en « veillée », crème sur les aplats « affiche »)
   puisqu'ils sont chargés après ce fichier. */
:focus-visible {
  outline: 3px solid var(--red-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Micro-interaction des boutons ────────────────────────────────────────
   Au clic, le bouton se tasse légèrement — un petit « tampon » satisfaisant.
   Complète le translateY existant de style.css ; coupé si mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .btn:active {
    transform: translateY(0) scale(.97);
  }
}

/* ── Barre de défilement discrète ─────────────────────────────────────────
   Pouce rose sur gouttière crème ; les variables suivent le thème actif
   (brun-encre en « veillée », etc.). */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--pink) var(--cream-deep);
    scrollbar-width: thin;
  }
}