/* =============================================================================
   Charlotte Bard — plume.css (module « Prénom à la plume », 15/10/2026)
   Chargé après css/animations.css. Balisage : extrait
   _chantier/integration-effets/extraits/plume.html (classe .logotype-plume sur le
   logotype du héros), fabriqué par _chantier/integration-effets/plume/outils/fabriquer_plume.py.

   À l'arrivée, « Charlotte » s'écrit trait par trait : l'encre fraîche (rose-rouge
   sombre, --action-fonce) prend le rose du nom 250 ms après le passage de la plume,
   et la plume revient barrer les deux t en dernier. Puis BARD se resserre, le cœur
   tombe sur le filet, qui se déroule de part et d'autre, et CHANTEUSE apparaît.

   Le prénom est un SVG : le contour exact d'Ephesis rempli au rose du nom
   (.plume-plein) et, sous .anim seulement, les traits de plume (.plume-encre),
   découpés par ce même contour. Boîte identique au texte Ephesis (3,25 em × 1,1 em) :
   aucun décalage de mise en page, aucune attente de police. Le texte « Charlotte »
   reste dans la page, visuellement caché, pour les lecteurs d'écran.

   Contrat : tout état de départ est écrit sous .anim ET dans
   @media (prefers-reduced-motion: no-preference). Sans JS, en mouvement réduit, à
   l'impression, ou si le chien de garde du <head> retire .anim : le contour rempli,
   immobile. Rien ne boucle ; tout est immobile à 2,1 s.
   Propriétés animées : stroke-dashoffset et stroke (traits SVG), transform, opacity,
   clip-path (filet), visibility. Espace de noms : classes .plume*, @keyframes plume-*,
   variables --plume-*.

   Réglages pour la chorégraphie commune (à poser sur .hero ou .hero-marque) :
     --plume-depart   décale toute l'entrée du logotype (défaut 0ms) ;
     --plume-echelle  multiplie délais et durées (défaut 1 ; 0.9 = 10 % plus vif).
   Calendrier par défaut, en ms depuis l'arrivée :
     plume 120 → 1 450 (du C au e) ; barre des t 1 530 → 1 680 ;
     encre sèche partout et bascule sur le contour : 1 930 (--fin, dans le SVG) ;
     BARD 900 → 1 500 ; cœur 1 250 → 1 630 ; filet 1 480 → 2 080 ; CHANTEUSE 1 600 → 2 100.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOUS LES MODES : le prénom dessiné, dans la boîte exacte du texte
   (l'avance de « Charlotte » en Ephesis, 2,97 em, plus .14 em de chaque côté ;
   hauteur de ligne 1,1).
   ----------------------------------------------------------------------------- */
.logotype-plume .logotype-prenom { position: relative; padding: 0; line-height: 0; }
.plume {
  display: block;
  width: 3.25em;
  height: 1.1em;
  max-width: none;
  overflow: visible;
}
.plume-plein { fill: var(--logo-prenom, var(--rose, #B5675B)); }
.plume-encre { display: none; }
/* BARD : une boîte par lettre (pour le mouvement) ; le mot entier est lu par les lecteurs d'écran. */
.plume-bard > span { display: inline-block; }
.logotype-plume .logotype-nom .visuellement-cache { text-transform: none; }


/* -----------------------------------------------------------------------------
   2. MOUVEMENT (seulement sous .anim, seulement sans préférence de mouvement réduit)
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* L'ancienne apparition (animations.css, 2.6 : prénom masqué de gauche à droite, BARD en fondu)
     est neutralisée ici, même si ses règles restent en place ; celle du filet est remplacée plus bas. */
  .anim .hero .logotype-plume .logotype-prenom,
  .anim .hero .logotype-plume .logotype-nom { animation: none; }

  /* Les traits : chacun se trace à vitesse de plume (--d : départ, --t : durée, en ms, dans le
     SVG), à l'encre fraîche, puis prend le rose du nom 250 ms plus tard. À --fin, la couche des
     traits s'efface et le contour rempli (la police, exactement) prend le relais. */
  .anim .plume-encre {
    display: inline;
    animation: plume-cache 0s linear calc(var(--fin, 1930) * var(--plume-echelle, 1) * 1ms + var(--plume-depart, 0ms)) forwards;
  }
  .anim .plume-plein {
    animation: plume-montre 0s linear calc(var(--fin, 1930) * var(--plume-echelle, 1) * 1ms + var(--plume-depart, 0ms)) backwards;
  }
  .anim .plume-encre path {
    stroke: var(--logo-prenom, var(--rose, #B5675B));
    stroke-dasharray: 1 1.1;   /* pathLength="1" : un tiret de toute la longueur du trait */
    stroke-dashoffset: 1.05;
    animation:
      plume-trace calc(var(--t) * var(--plume-echelle, 1) * 1ms) linear
        calc(var(--d) * var(--plume-echelle, 1) * 1ms + var(--plume-depart, 0ms)) both,
      plume-seche calc(var(--t) * var(--plume-echelle, 1) * 1ms) linear
        calc((var(--d) + 250) * var(--plume-echelle, 1) * 1ms + var(--plume-depart, 0ms)) both;
  }
  /* La barre des t : un seul geste, qui part doucement et se pose. */
  .anim .plume-encre .plume-barre { animation-timing-function: cubic-bezier(.45, 0, .3, 1), linear; }

  /* Fin rendue définitive par js/plume.js : les traits sortent du rendu. */
  .anim .plume-finie .plume-encre { display: none; }
  .anim .plume-finie .plume-plein { animation: none; }

  /* BARD : les lettres, d'abord un peu écartées (--r dans le HTML), se resserrent à leur place. */
  .anim .hero .logotype-plume .plume-bard > span {
    animation: plume-resserre calc(600ms * var(--plume-echelle, 1)) var(--courbe, cubic-bezier(.2, .7, .2, 1))
      calc(900ms * var(--plume-echelle, 1) + var(--plume-depart, 0ms)) backwards;
  }
  /* Le cœur tombe sur le filet, puis le filet se déroule de part et d'autre : une fenêtre (clip-path du
     conteneur) s'ouvre depuis le cœur, ± 0,8 em = demi-cœur et écart, jusqu'aux deux bouts. Le conteneur
     seul est animé : ::before, ::after et le dessin du cœur restent libres pour d'autres effets (dorure). */
  .anim .hero .logotype-plume .coeur {
    animation: plume-coeur calc(380ms * var(--plume-echelle, 1)) cubic-bezier(.3, 1.4, .5, 1)
      calc(1250ms * var(--plume-echelle, 1) + var(--plume-depart, 0ms)) backwards;
  }
  .anim .hero .logotype-plume .logotype-filet {
    animation: plume-filet calc(600ms * var(--plume-echelle, 1)) var(--courbe, cubic-bezier(.2, .7, .2, 1))
      calc(1480ms * var(--plume-echelle, 1) + var(--plume-depart, 0ms)) backwards;
  }
  /* CHANTEUSE, en dernier (remplace l'apparition à 0,05 s de animations.css, 2.1). */
  .anim .hero .logotype-plume + .surtitre {
    animation: plume-chanteuse calc(500ms * var(--plume-echelle, 1)) var(--courbe, cubic-bezier(.2, .7, .2, 1))
      calc(1600ms * var(--plume-echelle, 1) + var(--plume-depart, 0ms)) backwards;
  }
}


/* Contraste élevé (couleurs forcées) : le prénom, immobile, prend la couleur du texte.
   Placé après le mouvement pour l'emporter à spécificité égale. */
@media (forced-colors: active) {
  .plume-plein,
  .anim .plume-plein { fill: CanvasText; animation: none; }
  .anim .plume-encre { display: none; }
}


/* -----------------------------------------------------------------------------
   3. IMAGES CLÉS
   ----------------------------------------------------------------------------- */
@keyframes plume-trace { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
/* Encre fraîche (--action-fonce, #8E4A40) vers le rose du nom (valeur de la règle) */
@keyframes plume-seche { from { stroke: var(--action-fonce, #8E4A40); } }
@keyframes plume-cache { to { visibility: hidden; } }
@keyframes plume-montre { from { visibility: hidden; } }
@keyframes plume-resserre { from { opacity: 0; transform: translateX(calc(var(--r, 0) * .3em)); } }
@keyframes plume-coeur { from { opacity: 0; transform: translateY(-.6em) scale(.6); } 40% { opacity: 1; } }
@keyframes plume-filet {
  from { clip-path: inset(-1em calc(50% - .8em)); }
  to { clip-path: inset(-1em 0); }
}
@keyframes plume-chanteuse { from { opacity: 0; transform: translateY(6px); } }


/* -----------------------------------------------------------------------------
   4. IMPRESSION : le contour rempli seul
   ----------------------------------------------------------------------------- */
@media print {
  .plume-encre { display: none !important; }
  .plume-plein,
  .plume-bard > span,
  .logotype-plume .coeur,
  .logotype-plume + .surtitre { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .logotype-plume .logotype-filet { clip-path: none !important; }
}