/* ======================================================================
   Le carnet d'Heloise
   ----------------------------------------------------------------------
   Volontairement separe de css/carnet.css. Les deux carnets se ressemblent
   mais ne fonctionnent pas pareil : celui de Papa est un manuscrit qu'on
   dechiffre -- zoom, cartouche, petits papiers ; celui-ci est compose, il se
   lit tel quel. Partager le code reviendrait a faire cohabiter deux
   mecaniques dans un fichier qui en porte deja une, et le carnet de Papa a
   deja assez souffert cette semaine.
   ====================================================================== */

.hel-scene{
  position:fixed;
  inset:0;
  z-index:1300;          /* au-dessus de la scene du carnet de Papa (1200) */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 2vw, 26px);
  background:rgba(30,24,18,0.90);
  opacity:0;
  transition:opacity 0.45s ease;
}
.hel-scene[hidden]{ display:none; }
.hel-scene.ouverte{ opacity:1; }

/* La double page. On lui donne sa hauteur en dvh ET en vh : sur un telephone,
   100vh ne tient pas compte de la barre d'adresse, et le bas de la page
   passait dessous. */
/* 85dvh et non 88 : la couverture est glissee derriere le livre et depasse
   par le haut, il faut donc que le haut existe. A 88 il ne restait que 43 px
   au-dessus du livre sur un ecran de 720 px, soit une languette de 33 px --
   sous la cible de 44 px et trop mince pour se voir. A 85 il en reste 54, et
   le texte ne perd que trois pour cent et demi de corps, ce qui ne se voit
   nulle part sur un ecran large. Le portrait, lui, ne change pas : il a deja
   ses 8 % au-dessus, et c'est la que la place manque au texte. */
.hel-livre{
  position:relative;
  max-width:min(92vw, 1500px);
  max-height:85vh;
  max-height:85dvh;
}
/* ENFANT DIRECT, imperativement. Ecrit « .hel-livre img », ce selecteur
   attrapait aussi les photos posees dans les encarts et leur imposait
   width:auto -- elles s'affichaient a leur taille naturelle, 700 px de large
   dans une colonne de 406, et la page triplait de hauteur. C'est exactement le
   piege deja rencontre avec « .carnet-objet img » sur le carnet de Papa, et
   la meme correction. */
.hel-livre > img{
  display:block;
  width:auto;
  height:auto;
  max-height:85vh;
  max-height:85dvh;
  max-width:100%;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

/* Les deux colonnes de texte, posees sur le scan. Tout est en pourcentage :
   la page est une image qui se redimensionne, le texte doit la suivre. La
   taille de police se mesure sur la LARGEUR du livre et non sur celle de
   l'ecran -- sinon le texte grossit quand la fenetre s'elargit alors que la
   page, elle, est limitee par sa hauteur. */
.hel-page{
  position:absolute;
  top:6.5%;
  width:36%;
  color:#3A2E24;
  font-family:'EB Garamond', Georgia, serif;
  line-height:1.62;
  font-size:min(calc(var(--l) * 0.0159), calc(var(--h, 9999px) * 0.0218));
}
.hel-page.gauche{ left:6.5%; }
.hel-page.droite{ left:57.5%; }

.hel-date{
  font-size:min(calc(var(--l) * 0.0118), calc(var(--h, 9999px) * 0.0162));
  color:#8B6F47;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:0.7em;
}
.hel-page .hel-date:not(:first-child){ margin-top:2.1em; }
.hel-amorce{ font-style:italic; margin-bottom:0.8em; }
.hel-page p{ margin:0 0 0.34em 0; }

/* Le filet court : une respiration a l'interieur d'une meme journee, quand
   une scene en suit une autre a cinq minutes d'intervalle. Il ne ressemble
   pas a celui du « Pour comprendre », qui traverse toute la colonne : celui-
   la separe deux voix, celui-ci separe deux moments de la meme. */
.hel-filet{
  width:22%;
  height:0;
  margin:1.5em auto 1.3em auto;
  border-top:1px solid rgba(58,46,36,0.22);
}
.hel-suite{ font-style:italic; margin:0 0 0.8em 0; }

/* Le « Pour comprendre ». Chez Papa, la frontiere entre ce que dit le
   document et ce que nous en expliquons etait portee par l'ecriture
   manuscrite. Ici il n'y a pas de manuscrit : c'est la police qui la porte.
   Les mots d'Anne en Garamond, les notres en Work Sans. */
.hel-comprendre{
  margin-top:1.4em;
  padding-top:1em;
  border-top:1px solid rgba(139,111,71,0.42);
  font-family:'Work Sans', Arial, sans-serif;
  font-size:min(calc(var(--l) * 0.0112), calc(var(--h, 9999px) * 0.0154));
  line-height:1.6;
  color:#6b5a45;
}
.hel-comprendre b{
  display:block;
  font-weight:600;
  color:#8B6F47;
  margin-bottom:0.45em;
  font-size:min(calc(var(--l) * 0.0106), calc(var(--h, 9999px) * 0.0145));
}
.hel-comprendre span{ display:block; margin-top:0.7em; }

/* Une photo dans un encart, jamais sur la page : le marque-page annonce que
   les photographies ont pris le relais APRES. Pas de dentelure non plus --
   elle date les tirages du carnet de Papa, ou elle est vraie ; sur une photo
   de 2019 elle serait un deguisement. Bord net, ombre qui suit le carre. */
.hel-cliche{
  float:right;
  width:39%;
  aspect-ratio:1;
  margin:2px 0 8px 14px;
  filter:drop-shadow(0 2px 6px rgba(58,46,36,0.34));
}
/* Sauf sur la page des Titi, la plus pleine du carnet : a 39 % elle
   debordait. A 30 % elle tient, tout juste -- 98,5 % de la hauteur. */
.hel-cliche.serree{ width:30%; }

/* Le marque-page, sur l'interieur de la couverture. C'est la seule page du
   carnet entierement libre : elle n'a pas de raie manta. */
.hel-marque{
  font-size:min(calc(var(--l) * 0.0129), calc(var(--h, 9999px) * 0.0177));
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.hel-marque .titre{
  font-size:min(calc(var(--l) * 0.0235), calc(var(--h, 9999px) * 0.0322));
  line-height:1.15;
  margin-bottom:0.5em;
  text-align:left;
}
.hel-marque p{ margin:0 0 0.58em 0; }
/* Le meme geste que sur le marque-page du carnet de Papa : un filet dans la
   marge pour dire que cette phrase-la porte plus que les autres. Meme
   epaisseur, meme or, meme retrait. La-bas c'est la Caveat qui change le ton,
   ici c'est l'italique -- mais le trait est le meme, et c'est lui qui fait
   que les deux carnets se repondent sans se copier. */
.hel-marque .fin{
  margin-top:0.9em;
  font-style:italic;
  border-left:2px solid #C9AE78;
  padding-left:12px;
}

/* Le tirage pose sur la contre-plat arriere. Pose, pas imprime : on n'imprime
   pas de photo sur une page du carnet, mais un objet laisse dedans est autre
   chose -- le carnet de Papa fait exactement cela avec ses petits papiers. */
.hel-tirage{ top:9%; text-align:center; }
.hel-tirage img{
  width:82%;
  height:auto;
  transform:rotate(-1.6deg);
  filter:drop-shadow(3px 6px 12px rgba(58,46,36,0.42));
}
.hel-tirage .legende{
  margin:1.5em auto 0 auto;
  width:88%;
  font-family:'Work Sans', Arial, sans-serif;
  font-size:min(calc(var(--l) * 0.0106), calc(var(--h, 9999px) * 0.0145));
  line-height:1.55;
  color:#6b5a45;
  text-align:left;
}

/* --- Feuilleter ------------------------------------------------------- */
.hel-tourne{
  position:relative;
  z-index:2;
  width:clamp(30px, 4vw, 52px);
  height:clamp(60px, 12vh, 120px);
  border:0;
  background:none;
  cursor:pointer;
  color:#E8DFC8;
  font-size:clamp(26px, 3.4vw, 42px);
  line-height:1;
  opacity:0.55;
  transition:opacity 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color:transparent;
}
.hel-tourne:hover{ opacity:1; transform:scale(1.12); }
.hel-tourne:focus-visible{ outline:2px solid #C9AE78; outline-offset:3px; }
.hel-tourne[disabled]{ opacity:0.14; cursor:default; transform:none; }

.hel-sortie{
  position:fixed;
  top:14px; right:16px;
  z-index:3;
  border:0;
  background:rgba(58,46,36,0.55);
  color:#F3F0DE;
  font-family:'Work Sans', Arial, sans-serif;
  font-size:14px;
  padding:8px 15px;
  border-radius:999px;
  cursor:pointer;
}
.hel-sortie:hover{ background:rgba(58,46,36,0.8); }

/* Ou en est-on dans le carnet. Discret : ce n'est pas une pagination, c'est
   un reperage. */
.hel-repere{
  position:fixed;
  left:0; right:0; bottom:12px;
  text-align:center;
  font-family:'Work Sans', Arial, sans-serif;
  font-size:12px;
  letter-spacing:0.1em;
  color:rgba(243,240,222,0.55);
  pointer-events:none;
}

/* --- Sur un telephone tenu droit -------------------------------------- */
/* Une page seule remplit l'ecran : c'est le format meme du carnet, une page
   portrait sur un ecran portrait. Pas de zoom, pas de clic pour agrandir une
   anecdote, aucune mecanique. On decale l'image de la moitie de sa largeur et
   on n'en montre que la moitie. */
/* --- Sur un telephone tenu droit : la page s'allonge -------------------
   Une page du carnet mesure 363 x 512 px sur un telephone de 390, et la plus
   chargee porte pres de deux mille signes : elle est physiquement pleine, et
   son texte tombait a 11 px. Or il restait trois cents pixels de vide en haut
   et en bas de l'ecran -- la page etait bridee par la largeur, pas par la
   hauteur.
   On allonge donc la feuille. Elle n'est plus une image mais trois : le haut
   du scan avec son bord, le bas avec sa raie manta, et entre les deux une
   bande de papier NU prelevee dans la page elle-meme, qui se repete autant
   qu'il faut. Rien n'est invente, rien n'est etire : c'est le meme papier,
   avec son grain, et la page prend simplement la hauteur qu'on lui donne.
   Le texte peut alors respirer a 15 px. */
@media (max-aspect-ratio: 3/4){
  /* On ne montre qu'une moitie de l'image : le livre est donc une fenetre de
     la largeur d'UNE page, et l'image, deux fois plus large, coulisse
     derriere. Le rapport exact vient du scan lui-meme (--ratio, pose par le
     script) et non d'une valeur ecrite en dur : les cinq doubles pages n'ont
     pas toutes le meme, et une valeur approchee ferait sauter la page d'un
     ou deux pixels a chaque tour. */
  /* La page n'est plus un morceau de scan mais une feuille reconstituee, et
     c'est un choix de fiabilite. On avait d'abord decoupe le scan en trois --
     un haut, un bas, une bande repetee au milieu -- et cela ne tenait pas :
     l'ombre du pli varie sur la hauteur, la bande est constante, et le
     raccord se voyait quoi qu'on fasse. Trois tentatives, trois echecs.
     Ici : la texture de papier du site, celle des cartouches du carnet de
     Papa, qui se repete sans couture par construction ; la vraie raie manta
     detouree sur la quatrieme de couverture, posee au pied ; et l'ombre du
     pli dessinee en degrade, du cote ou elle doit etre. Rien ne peut plus se
     desaligner, a n'importe quelle hauteur d'ecran. */
  .hel-livre{
    width:92vw;
    height:84dvh;
    height:84vh;
    aspect-ratio:auto;
    max-width:none;
    max-height:none;
    overflow:hidden;
    background-color:#FBF7EC;
    background-image:
      var(--manta, none),
      linear-gradient(to right, rgba(58,46,36,0.13), rgba(58,46,36,0) 4.5%),
      url('../images/paper-texture.png');
    background-position:left 3% bottom 3%, right top, center top;
    background-repeat:no-repeat, no-repeat, repeat;
    /* La raie manta a la taille qu'elle a sur la vraie page : mesuree sur le
       scan, elle occupe 29 % de la largeur, a 3 % du bord gauche et du bas.
       Reglee en hauteur, elle depassait 31 % de large et le chevron de gauche
       lui tombait dessus. */
    background-size:29% auto, 100% 100%, 260px auto;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
  }
  /* Le pli est a droite quand on lit la page de gauche, et inversement. */
  .hel-livre.pli-droite{
    background-image:
      var(--manta, none),
      linear-gradient(to left, rgba(58,46,36,0.13), rgba(58,46,36,0) 4.5%),
      url('../images/paper-texture.png');
  }
  .hel-livre > img{ display:none; }
  /* Onze pixels, et c'est un maximum, pas un choix.
     Une page de ce carnet fait 363 x 512 px sur un telephone de 390 px de
     large, et la plus chargee porte pres de deux mille signes : elle est
     physiquement pleine. On a mesure, en faisant varier toutes les tailles
     d'un meme facteur et en relevant la page la plus pleine des dix-huit --
     a 15,6 px elle debordait de 42 %, a 12,8 px de 10 %, a 11,2 px elle
     tient. Elargir la colonne de 74 a 86 % n'a rendu qu'un pour cent.
     C'est la page qui est petite, pas la police qui est mal reglee. */
  .hel-page{ width:84%; top:4.5%; font-size:min(calc(var(--l) * 0.0430), calc(var(--h, 9999px) * 0.0196)); }
  .hel-page.gauche{ left:8%; }
  .hel-page.droite{ left:8%; }
  .hel-date{ font-size:min(calc(var(--l) * 0.0300), calc(var(--h, 9999px) * 0.0143)); }
  .hel-comprendre{ font-size:min(calc(var(--l) * 0.0295), calc(var(--h, 9999px) * 0.0141)); }
  .hel-comprendre b{ font-size:min(calc(var(--l) * 0.0280), calc(var(--h, 9999px) * 0.0134)); }
  .hel-marque{
    /* Le marque-page est le texte le plus long du carnet, et la page de garde
       est celle qu'on lit en premier : il a donc sa propre mesure, poussee
       jusqu'a ce qu'il touche le bas de la page. Deux bornes, la largeur et la
       hauteur, parce qu'un ecran de 640 px n'offre pas la place d'un de 844. */
    font-size:min(calc(var(--l) * 0.0335), calc(var(--h, 9999px) * 0.0176));
  }
  .hel-marque .titre{ font-size:min(calc(var(--l) * 0.0580), calc(var(--h, 9999px) * 0.0277)); }
  .hel-tirage .legende{ font-size:min(calc(var(--l) * 0.0280), calc(var(--h, 9999px) * 0.0134)); }
  .hel-sortie{ font-size:12px; padding:6px 12px; }
  /* Les chevrons ne prennent plus de largeur au livre : ils se posent sur les
     bords de l'ecran. Sur un telephone, c'est la largeur qui limite la page,
     pas la hauteur -- une page portrait de rapport 0,705 devrait faire 512 px
     de large pour remplir les 844 px de haut. Chaque pixel rendu au livre est
     donc du texte plus grand. */
  /* Les chevrons descendent SUR la page, en bas a gauche et a droite.
     Poses au-dessus et au-dessous, ils etaient trop pales pour se voir et
     l'un chevauchait le compteur de pages. Ici ils sont dans le brun de
     l'encre, sur le papier, a la taille d'un pouce -- et le carnet se
     feuillette aussi en faisant glisser la page, comme celui de Papa.
     La page fait 92vw de large et 84dvh de haut, centree : son bord bas est
     donc a 50 % moins 42dvh du bas de l'ecran, et son bord gauche a 4vw. */
  .hel-scene{ flex-direction:column; gap:0; }
  .hel-tourne{
    position:absolute;
    bottom:calc(50% - 42dvh + 14px);
    bottom:calc(50% - 42vh + 14px);
    width:52px;
    height:52px;
    font-size:34px;
    line-height:1;
    color:#8B6F47;
    opacity:0.75;
    background:none;
    border-radius:50%;
  }
  /* Ramenes vers le centre : au bord gauche, le chevron tombait sur la raie
     manta, qui occupe le tiers bas de la page a partir de 7 % de sa largeur.
     Ils forment maintenant une paire au pied de la page, degagee du motif. */
  /* Les deux chevrons au milieu du pied de page, cote a cote. Poses plus a
     gauche, le premier tombait sur la raie manta -- elle occupe le bas de la
     page depuis 7 % jusqu'a 42 % de sa largeur, mesure. */
  #helArriere{ left:calc(4vw + 46vw - 58px); }
  #helAvant{ left:calc(4vw + 46vw + 6px); }
  .hel-tourne:hover{ transform:none; }
  .hel-tourne[disabled]{ opacity:0.16; }
  /* Le marque-page repasse au fer a gauche sur telephone. Justifie, il tient
     sur une colonne large ; sur vingt-huit signes de large il ecarte les mots,
     et « LaMinuteCocotte.com », qui ne se coupe pas, laisse la ligne d'avant a
     moitie vide. De loin, l'oeil ne voit plus que ce trou. */
  /* Selecteur double, sinon .hel-page.gauche (0,2,0) l'emporte sur .hel-marque
     (0,1,0) et impose sa marge de 8 % : le texte partait alors a 8 % avec une
     largeur de 92 %, soit jusqu'au bord exact de la page. */
  .hel-page.hel-marque{
    text-align:left;
    /* Sur la contre-plat il n'y a pas de raie manta : le texte peut prendre
       toute la largeur, et descendre un peu plus bas. Cela rend six pour cent
       de corps -- de 12,0 a 12,7 px. Pas davantage : cette page porte quarante
       pour cent de texte de plus que la plus chargee des anecdotes, et c'est
       elle, et non un mauvais reglage, qui impose sa petite taille. */
    width:92%;
    left:4%;
    font-size:min(calc(var(--l) * 0.0345), calc(var(--h, 9999px) * 0.0188));
  }
}

@media (prefers-reduced-motion:reduce){
  .hel-scene{ transition:none; }
  .hel-tourne{ transition:none; }
}


/* --- Telephone couche -------------------------------------------------- */
/* Mesure plutot que devinee : sur un ecran de 390 px de haut, la double page
   tombe a 486 px de large et son texte a 7,7 px ; en page seule ce serait
   pire encore, 236 px de large. Aucun reglage ne sauve ce format. On demande
   donc de tourner l'appareil, comme le fait le carnet de Papa. */
.hel-tourner-tel{
  display:none;
  margin:0;
  padding:0 24px;
  text-align:center;
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:30px;
  line-height:1.3;
  color:#E8DFC8;
}
/* Et seulement sur un appareil TACTILE. La condition portait d'abord sur la
   seule hauteur, et une fenetre d'ordinateur de 1200 x 480 se voyait donc
   prier de tourner son telephone. Quelqu'un devant un clavier peut agrandir
   sa fenetre ; quelqu'un qui tient un telephone ne peut que le tourner. */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) and (pointer: coarse){
  .hel-scene .hel-livre,
  .hel-scene .hel-tourne,
  .hel-scene .hel-repere{ display:none; }
  .hel-tourner-tel{ display:block; }
}

/* --- La couverture, glissee derriere le carnet ---------------------------
   Deux faces du meme objet, jamais montrees jusqu'ici : la premiere de
   couverture calligraphiee a l'encre de Chine par Marika, et le dos ou une
   main a ecrit au crayon « Petit carnet de pensees tendres ». Le carnet les
   mentionne deux fois -- le marque-page a l'entree, la legende de la robe a
   la sortie -- et ne les avait jamais donnees a lire.

   C'est la meme grammaire que les petits papiers du carnet de Papa, et c'est
   voulu : une feuille glissee contre le carnet, une languette qui depasse,
   deux battements d'appel, un clic qui la sort et la pose devant soi pendant
   que le carnet passe en retrait. Le geste s'apprend une fois pour les deux
   carnets. Ce qui change : celle-ci ne se retourne pas, ne porte pas de
   zones, et ne s'approche pas -- il n'y a rien a dechiffrer dessus, il y a a
   regarder.

   Tout le placement est calcule en pixels par le script (couvPlacer) et non
   ecrit ici : la feuille doit se caler sur la boite reelle du livre, qui
   change de forme entre une double page et une page seule, et la place qui
   reste a cote depend de la fenetre. Une valeur en pourcentage se serait
   trompee des le premier ecran etroit.
--------------------------------------------------------------------------- */
.hel-couv{
  position:absolute;
  left:0; top:0;
  /* Pas de z-index : c'est l'ordre du DOM qui la place SOUS le livre, declare
     juste apres elle. Un z-index, meme a 0, en ferait un frere a egalite et
     la ferait repasser dessus des que le livre prendrait le sien. */
  transition:left 0.85s cubic-bezier(.22,.61,.36,1),
             top 0.85s cubic-bezier(.22,.61,.36,1),
             height 0.85s cubic-bezier(.22,.61,.36,1);
  will-change:left, top, height;
}
.hel-couv[hidden]{ display:none; }
/* Sortie, elle passe devant le livre et devant les chevrons (qui sont a 2). */
.hel-couv.sortie{ z-index:6; }

/* Deux battements a l'arrivee, puis plus rien -- exactement le reglage des
   petits papiers. Personne ne pense a regarder la tranche d'un carnet : il
   faut que le geste soit annonce une fois, et qu'ensuite l'ecran se taise. */
.hel-couv:not(.sortie) .hel-couv-tirette{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* Range, l'objet n'est qu'une BANDE de la couverture : la feuille est
     derriere le carnet, on n'en voit que ce qui depasse. C'est donc une
     fenetre, et l'image coulisse dedans. */
  overflow:hidden;
  box-shadow:0 -3px 14px rgba(58,46,36,0.40);
  transition:box-shadow 0.6s ease;
}
.hel-couv.sortie .hel-couv-tirette{
  overflow:visible;
  box-shadow:0 16px 38px rgba(0,0,0,0.55);
}
.hel-couv-tirette img{
  position:absolute;
  left:0;
  top:var(--img-haut, 0px);
  display:block;
  width:100%;
  height:auto;
  transition:top 0.85s cubic-bezier(.22,.61,.36,1);
  -webkit-user-drag:none;
  user-select:none;
}

/* Le voile se ferme un peu pendant qu'on regarde la couverture. Sans cela, le
   carnet passant a 42 %, c'est la fresque qui reprenait le dessus derriere lui
   -- on regardait une calligraphie sur fond de bric-a-brac. */
.hel-scene.couv-sortie{ background:rgba(30,24,18,0.965); }

/* Le carnet passe en retrait pendant qu'on regarde la couverture. Il ne
   disparait pas : on doit continuer a voir qu'elle appartient a ce carnet-la
   et pas a un autre. */
.hel-scene.couv-sortie .hel-livre{
  transform:scale(0.955);
  opacity:0.42;
  transition:transform 0.85s cubic-bezier(.22,.61,.36,1), opacity 0.6s ease;
}
.hel-scene .hel-livre{
  transition:transform 0.85s cubic-bezier(.22,.61,.36,1), opacity 0.6s ease;
}
.hel-scene.couv-sortie .hel-tourne,
.hel-scene.couv-sortie .hel-repere{ opacity:0.25; pointer-events:none; }
.hel-scene .hel-tourne,
.hel-scene .hel-repere{ transition:opacity 0.5s ease; }

@media (prefers-reduced-motion: reduce){
  .hel-couv{ transition:none; }
  .hel-couv:not(.sortie) .hel-couv-tirette{ animation:none; }
  .hel-scene.couv-sortie .hel-livre{ transform:none; }
}