/* =========================================================================
   carnet.css — l'espace de consultation du carnet de betises
   Ecrit le 2 septembre avec la V140.

   Le carnet est trop petit dans la fresque pour qu'on y lise quoi que ce
   soit : au clic, il s'ouvre dans une scene qui occupe tout l'ecran, posee
   PAR-DESSUS la fresque et non a la place. La fresque n'est jamais quittee,
   elle attend derriere -- c'est ce qui donne la sensation de continuite
   demandee : on ouvre un objet, on ne change pas de page.

   Trois couches, dans cet ordre :
     .carnet-scene   -> le decor (le fond de table) et la couche fixe
     .carnet-objet   -> le carnet lui-meme, seul element qui bouge/zoome
     .carnet-zone    -> les anecdotes, invisibles au repos

   Palette du site : #F3F0DE papier, #8B6F47 brun, #9C8558 or, #3A2E24 encre.
   ========================================================================= */

/* --- La scene ---------------------------------------------------------- */
.carnet-scene{
  position:fixed;
  inset:0;
  z-index:1200;          /* au-dessus de #previewOverlay (1000) et du sceau */
  display:none;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.5s ease;
  /* Exactement le fond de la fresque -- meme couleur, meme texture -- pour
     qu'on ne sente pas qu'on a change d'endroit : on a ouvert un objet, on
     n'est pas parti ailleurs. Les coins seuls sont un peu creuses, juste
     assez pour que le carnet ne se noie pas dans un aplat de la meme famille
     que son propre papier. Un fond de table sombre avait ete essaye d'abord :
     il detachait mieux le carnet mais faisait basculer dans une autre piece
     que le reste du site. */
  /* Exactement le fond de l'Arbre genial-logique : creme tres clair, texture
     de papier, et deux halos verts a peine perceptibles dans les coins hauts.
     Un fond clair suffit a poser le carnet des lors que le detourage est
     propre -- la carte blanche bordee de pointilles qu'il y avait avant
     faisait cage autour de lui. */
  background-color:#FBF3DF;
  background-image:url('../images/paper-texture.png'),
                   radial-gradient(ellipse 500px 300px at 15% 10%, rgba(174,191,135,0.18), transparent),
                   radial-gradient(ellipse 500px 300px at 85% 15%, rgba(159,176,119,0.15), transparent);
  background-repeat:repeat, no-repeat, no-repeat;
  overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
}
.carnet-scene.ouvert{ display:flex; }
.carnet-scene.visible{ opacity:1; }

/* --- Le plan de travail : centre le carnet et lui laisse ses marges ------ */
.carnet-plan{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Marges asymetriques : un peu plus de place en bas pour le cartouche
     d'anecdote, qui s'y glisse sans jamais recouvrir le carnet. */
  padding:3vh 4vw 7vh;
  padding:3dvh 4vw 7dvh;
  /* Le plan couvre tout l'ecran pour centrer le carnet, mais il ne doit rien
     intercepter : sans cela il recouvrirait les deux bandes de feuilletage et
     les clics a cote du carnet n'atteindraient jamais la scene. Seul le
     carnet lui-meme reprend la main sur les clics. */
  pointer-events:none;
}

/* --- Le carnet ---------------------------------------------------------- */
.carnet-objet{
  position:relative;
  max-width:100%;
  max-height:100%;
  /* Legerement de travers, comme un objet pose et non une image centree.
     Le carnet se redresse des qu'on zoome sur une anecdote (voir .lu). */
  transform:rotate(-0.7deg);
  transform-origin:50% 50%;
  pointer-events:auto;
  /* Au-dessus des bandes de feuilletage : sur un ecran haut et etroit
     (tablette en portrait), le carnet est plus large que la place laissee par
     les bandes, qui lui mangeraient sinon un morceau de page. Ainsi les
     bandes ne repondent que la ou l'on voit vraiment le fond. */
  z-index:3;
  transition:transform 0.85s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* Le carnet attend son image (voir attendrePage() dans carnet.js) : la page,
   sa doublure, les cadres des passages et le petit papier restent invisibles,
   puis viennent en fondu. Le feuillet d'introduction, lui, reste lisible : il
   donne de quoi lire pendant l'attente. On agit sur les enfants et non sur le
   carnet lui-meme, dont l'opacite et la transition appartiennent deja aux
   animations d'ouverture, de feuilletage et de zoom. */
/* Pas de transition ajoutee ici : le petit papier en a deja une (son
   transform), qu'une regle plus precise effacerait. La page et sa doublure
   viennent en fondu par leur propre regle (.carnet-objet > img) ; cadres et
   papier suivent d'un coup. */
.carnet-objet.attente-page > :not(.carnet-feuillet){ opacity:0; }

/* La doublure : la meme photo, derriere la page, rendue opaque.
   Le filtre #rendreOpaque, defini dans index.html, multiplie l'alpha de
   chaque pixel par vingt puis le plafonne : un papier detoure a vingt pour
   cent devient plein, tandis qu'un vrai vide -- l'exterieur du carnet, les
   trous de la reliure -- reste a zero. Le contour decoupe est conserve au
   pixel pres et rien n'est redessine. Elle se glisse entre le petit papier (z-index 1,
   ecrit avant elle) et la page (z-index 2) : le papier range est masque, et
   le papier sorti passe devant tout puisqu'il monte alors a 6.
   Le leger flou rattrape ce que le facteur durcit : les pixels du bord, a
   demi transparents par nature, formeraient sinon un lisere net qui
   depasserait d'un cheveu sous la page. */
.carnet-objet > img.carnet-doublure{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
  filter:url(#rendreOpaque) blur(0.4px);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.carnet-objet > img{
  display:block;
  width:auto;
  height:auto;
  /* Contraintes exprimees en vw/vh et non en % : .carnet-objet epouse
     l'image (il porte les zones d'anecdotes en pourcentage, il ne peut donc
     pas avoir sa propre hauteur), et un max-height en % ne se resout jamais
     dans un parent de hauteur auto -- l'image s'affichait a ses 2200 px
     naturels et debordait de l'ecran par le bas et par la droite.
     Les valeurs sont le complement du padding de .carnet-plan ci-dessus :
     100 - 4 - 4 en largeur, 100 - 3 - 7 en hauteur. Si l'un change,
     changer l'autre, ainsi que boiteFinale() dans js/carnet.js. */
  /* Au-dessus du petit papier range (z-index 1) : c'est le corps du carnet
     qui le masque, et non un decoupage. Voir la section des papiers, plus
     bas dans ce fichier. */
  position:relative;
  z-index:2;
  /* 86vw et non 92 : le petit papier depasse de la tranche droite, et sa
     languette doit tenir dans la marge -- assez largement pour qu'on la voie
     et qu'un doigt la trouve. La reserve vaut pour TOUTES les ouvertures, y
     compris celles qui ne portent pas de papier, sans quoi le carnet
     changerait de taille a chaque page tournee. Elle est d'ailleurs juste :
     ces feuillets etaient bel et bien dans le carnet. */
  max-width:86vw;
  max-height:90vh;
  max-height:90dvh;
  /* L'ombre epouse le contour decoupe de la photo (spirale, papiers qui
     depassent) : drop-shadow et non box-shadow, qui ferait un rectangle. */
  filter:drop-shadow(0 9px 20px rgba(58,46,36,0.26));
  -webkit-user-drag:none;
  user-select:none;
}

/* Etat "on regarde de pres une anecdote" : le carnet se redresse et le JS
   pose sur lui la translation + l'echelle calculees pour la zone visee. */
.carnet-scene.lu .carnet-objet{ transform:none; }

/* --- Les anecdotes ------------------------------------------------------ */
/* Le calque des zones ne doit rien intercepter pour son propre compte : sinon
   un clic tombant a cote d'une anecdote -- ou sur une anecdote rendue inerte
   pendant qu'on en lit une autre -- s'arrete la et ne fait rien. Seuls les
   boutons de zone repondent ; le reste traverse jusqu'au carnet, qui replie. */
/* z-index 3 : au-dessus de l'image de la page, passee a 2 pour masquer le
   petit papier range. Sans lui, la page recouvrait les passages -- ils
   restaient dans le document, visibles pour qui les mesure, mais peints
   dessous, donc invisibles ET inclicables. Regression introduite avec la
   V149 et corrigee le meme jour. */
/* Le tirage pose sur une page. Il est place en pourcentages de l'image,
   comme les passages, donc il suit la page quelle que soit la taille de
   l'ecran. L'ombre est celle d'un papier pose, pas d'un cadre : elle part du
   contour decoupe et non d'un rectangle. */
/* Le selecteur est celui de la doublure, et pour la meme raison :
   « .carnet-objet > img » fixe width:auto et des maximums en vw/vh, et
   l'emporte sur « .carnet-tirage » seul. Ecrit simplement, le tirage
   s'affichait a sa taille naturelle, deux fois trop large. */
.carnet-objet > img.carnet-tirage{
  position:absolute;
  max-width:none;
  max-height:none;
  left:var(--tx, 50%); top:var(--ty, 50%);
  width:var(--tw, 30%);
  height:auto;
  transform:translate(-50%, -50%) rotate(var(--ta, -2.2deg));
  filter:drop-shadow(2px 4px 10px rgba(58,46,36,0.42));
  pointer-events:none;
  z-index:2;
}
.carnet-tirage[hidden]{ display:none; }

.carnet-zones{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.carnet-zone{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border:1px dashed rgba(139,111,71,0.68);
  border-radius:3px;
  /* Les passages sont surlignes en permanence, et non plus reveles au seul
     survol. Un premier lecteur qui ne sait pas qu'il y a quelque chose a
     ouvrir ne pense pas a promener la souris sur une page de carnet : il
     regarde, trouve cela joli, et s'en va. Le surlignage ne retire rien --
     le survol marque toujours davantage, le clic ouvre toujours. */
  background-color:rgba(196,166,108,0.26);
  box-shadow:0 0 12px 4px rgba(201,174,120,0.14);
  pointer-events:auto;
  /* Une respiration jouee une seule fois a l'ouverture d'une page : c'est le
     mouvement qui dit « regarde ici », bien mieux qu'un contour. Elle
     s'arrete d'elle-meme et ne revient pas. */
  animation:carnet-passage 1.5s ease-in-out 0.5s 2 both;
  padding:0; margin:0; font:inherit;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  transition:background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  -webkit-tap-highlight-color:transparent;
}
/* Au survol : le papier s'eclaire tres legerement sous la main, et une
   couture pointillee doree affleure -- le motif des coutures du site. Ce
   n'est deliberement pas un bouton : rien ne s'affiche, rien ne se colore. */
@media (hover:hover){
  .carnet-zone:hover{
    background-color:rgba(196,166,108,0.46);
    border-color:rgba(122,96,60,0.9);
    box-shadow:0 0 14px 5px rgba(201,174,120,0.26);
  }
}
/* Sur un ecran tactile, la bulle d'une zone reste affichee apres le tap et
   recouvre la page qu'on vient justement d'ouvrir. On la supprime : au doigt,
   le tap ouvre directement le texte, l'annonce ne sert a rien.

   Et surtout : sans survol, il ne reste PLUS RIEN pour signaler les passages.
   Sur telephone, ou l'ecriture n'est de toute facon pas lisible avant d'avoir
   ouvert, on tatonnait au doigt pour trouver ou appuyer -- un jeu de piste,
   alors qu'il n'y a rien a chercher. Les passages sont donc surlignes en
   permanence, du meme jaune tres pale que le survol de l'ordinateur. */
@media (hover:none){
  .carnet-zone::after, .carnet-zone::before{ content:none; }
}
@keyframes carnet-passage{
  0%, 100%{ background-color:rgba(196,166,108,0.26); }
  50%{ background-color:rgba(190,158,96,0.52); }
}
@media (prefers-reduced-motion:reduce){
  .carnet-zone{ animation:none; }
}
.carnet-zone:focus-visible{
  outline:none;
  background-color:rgba(196,166,108,0.46);
  border-color:rgba(122,96,60,0.95);
}
/* Pendant qu'on lit une anecdote, les autres s'effacent completement -- mais
   celle qu'on lit garde sa couture. Sans agrandissement, c'est elle seule qui
   dit de quel passage parle le texte en bas de l'ecran. */
/* Toutes les zones s'eteignent pendant la lecture, sauf celle qu'on lit :
   c'est en recliquant dessus qu'on referme. */
.carnet-scene.lu .carnet-zone{ pointer-events:none; animation:none; }
.carnet-scene.lu .carnet-zone.lue{ pointer-events:auto; cursor:pointer; }
.carnet-scene.lu .carnet-zone:not(.lue){
  background-color:transparent; border-color:transparent; box-shadow:none;
}
/* Pendant la lecture, la zone perd son voile : c'est l'ecriture qu'on essaie
   justement de dechiffrer, elle doit se detacher sur le papier nu. Seule la
   couture reste, plus franche, pour dire ou l'on est. */
.carnet-zone.lue, .carnet-scene.lu .carnet-zone.lue:hover{
  background-color:transparent;
  border-color:rgba(122,96,60,0.95);
  border-style:dashed;
  box-shadow:0 0 0 3px rgba(251,243,223,0.55);
}

/* --- Le mot : la traduction de l'anecdote ------------------------------- */
/* Il ne vit plus en bas de l'ecran mais juste sous le passage qu'on vient
   d'ouvrir : c'est la que le regard est. Sa position est calculee par
   placerMot() dans js/carnet.js, d'ou le left/top a zero ici. */
.carnet-mot{
  position:absolute;
  left:0;
  top:0;
  /* Le mot epouse l'anecdote : il n'a ni largeur ni hauteur minimale, et sa
     largeur suit celle du texte. Une anecdote de deux mots donne un mot de
     deux mots -- sans quoi la transcription pesait plus lourd a l'oeil que
     l'ecriture qu'elle sert, et la hierarchie s'inversait. */
  max-width:min(84vw, 400px);
  width:max-content;
  /* Sur un ecran court -- un telephone couche, par exemple -- un mot long
     (sept repliques plus un « Pour comprendre » avec photo) depasse la
     hauteur disponible. Il defile alors plutot que d'etre coupe. */
  max-height:calc(100vh - 68px);
  max-height:calc(100dvh - 68px);
  overflow-y:auto;
  background-color:#F3F0DE;
  background-image:url('../images/paper-texture.png');
  background-repeat:repeat;
  border:1px solid #8B6F47;
  border-radius:4px;
  box-shadow:0 5px 14px rgba(58,46,36,0.22);
  padding:7px 12px 8px;
  color:#3A2E24;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.32s ease, visibility 0.32s ease;
  z-index:4;
  /* Cliquable : c'est un des deux moyens de replier l'anecdote, avec le
     passage lui-meme. On ne devrait jamais avoir a chercher ou cliquer. */
  pointer-events:none;
  cursor:pointer;
}
/* Le z-index vaut pour la lecture d'une anecdote de PAGE exactement comme il
   valait deja pour celle d'un petit papier, plus bas. Sans lui, sur les six
   ouvertures qui portent un papier -- toutes sauf la premiere -- la double
   page monte a 7 (voir .carnet-scene.avec-papier .carnet-objet) et se peignait
   PAR-DESSUS le cartouche reste a 4 : la transcription etait dans la page,
   declaree visible et opaque, mesurable, et pourtant invisible. On voyait son
   ecriture transparaitre a travers celle du carnet, ce qui donnait a croire
   qu'elle avait perdu sa texture. Meme famille de piege que celui de la V149,
   et meme remede. */
.carnet-scene.lu .carnet-mot{ opacity:1; visibility:visible; pointer-events:auto; z-index:9; }
/* Le cartouche sert aussi aux petits papiers : meme papier, meme filet, meme
   Caveat pour la date. Un seul cartouche pour les deux, plutot que deux qui
   se ressembleraient. */
.carnet-scene.papier-lu .carnet-mot{
  opacity:1; visibility:visible; pointer-events:auto;
  /* Au-dessus du carnet, qui est monte a 7 sur les ouvertures a papier.
     Sans cela la double page etait PEINTE PAR-DESSUS le cartouche : son
     ecriture transparaissait a travers le texte, qui devenait illisible.
     Le fond du cartouche est pourtant opaque -- ce n'etait pas une affaire
     de transparence mais d'ordre d'empilement. */
  z-index:9;
}
/* La date et qui l'a notee, sur une seule ligne : une anecdote ne merite pas
   trois etages d'etiquettes avant d'etre lue. */
.carnet-mot-date{
  font-family:'Caveat', 'Segoe Script', cursive;
  font-weight:700;
  font-size:18px;
  line-height:1.1;
  color:#8B6F47;
  margin-bottom:4px;
}
/* --- La tete du cartouche : la date, et en face la voix -------------------
   Le petit mot de la voix est ecrit a la meme encre que la date, dans la meme
   Caveat : c'est une annotation de plus en marge du carnet, pas un lecteur
   audio. Pas de bulle : le cartouche defile, et une bulle y serait coupee --
   le mot dit lui-meme ce que le clic va faire (« chut ! », « ecouter »,
   « encore »). */
.carnet-mot-tete{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:4px;
}
.carnet-mot-tete .carnet-mot-date{ margin-bottom:0; }
.carnet-voix{
  appearance:none; -webkit-appearance:none;
  margin:0 -3px 0 auto;
  padding:0 3px;
  border:0;
  background:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
  font-family:'Caveat', 'Segoe Script', cursive;
  font-weight:700;
  font-size:18px;
  line-height:1.1;
  color:#8B6F47;
  cursor:pointer;
}
.carnet-voix[hidden]{ display:none; }
.carnet-voix svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  /* Le haut-parleur se pose sur la ligne d'ecriture, pas au-dessus. */
  position:relative; top:1px;
}
.carnet-voix .hp{ fill:currentColor; fill-opacity:0.18; }
.carnet-voix .onde{ opacity:0.3; transition:opacity 0.3s ease; }
/* Pendant la lecture, les deux ondes respirent l'une apres l'autre -- le seul
   mouvement du cartouche, et il s'arrete avec la voix. */
.carnet-voix.lit .onde{ animation:carnetOnde 1.5s ease-in-out infinite; }
.carnet-voix.lit .onde2{ animation-delay:0.25s; }
@keyframes carnetOnde{ 0%, 100%{ opacity:0.25; } 50%{ opacity:1; } }
.carnet-voix:hover .carnet-voix-mot,
.carnet-voix:focus-visible .carnet-voix-mot{
  text-decoration:underline dotted;
  text-underline-offset:3px;
}
.carnet-voix:focus-visible{ outline:1px dashed #8B6F47; outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion:reduce){
  .carnet-voix.lit .onde{ animation:none; opacity:1; }
}

/* « Pour comprendre » : un contexte que seule la famille connait -- qui etait
   Brunette, ce qu'etait le Viandox. Il est detache du reste par un filet :
   c'est nous qui expliquons aujourd'hui, ce n'est pas le carnet qui parle. */
.carnet-contexte{
  display:block;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(139,111,71,0.32);
  font-family:'Work Sans', Arial, sans-serif;
  font-size:12px;
  line-height:1.45;
  color:#6b5a45;
}
.carnet-contexte[hidden]{ display:none; }
/* Seul dans son cartouche -- le dos d'un petit papier, qui n'a pas de
   transcription -- le filet n'a plus rien a separer : il ferait un trait en
   l'air. */
.carnet-contexte.seul{ margin-top:0; padding-top:0; border-top:0; }
/* Quand le contexte parle de quelqu'un dont on a une photo -- Brunette, par
   exemple -- elle se pose ici plutot que dans le carnet : c'est l'explication
   qui la porte, pas la page. */
.carnet-contexte-photo{
  float:right;
  /* Assez grande pour qu'on voie le lapin dans les bras de l'enfant : a 96 px
     on ne distinguait qu'une tache blanche. */
  width:148px;
  /* La hauteur est connue AVANT que l'image arrive : sans cela le mot est
     mesure trop court au moment de le placer, et il se pose a un endroit qui
     ne lui convient plus une fois la photo chargee.
     Toutes les photos du carnet sont CARREES -- Anne les fournit en
     1254 x 1254 -- d'ou la valeur par defaut. Le rapport reste pose par le JS
     pour chacune, au cas ou l'une d'elles ne le serait pas un jour. */
  aspect-ratio:var(--photo-ratio, 1 / 1);
  margin:1px 0 7px 13px;
  /* Plus de carton de montage. Il rendait bien le bord dentele, mais comme
     tout est en border-box, ses dix pixels tout autour se prenaient sur la
     photo et non autour : le cliche tombait a 112 px et l'on ne distinguait
     plus qui etait dedans -- ce qui etait pourtant le seul but de le montrer.
     La photo se pose donc a meme le papier du cartouche, comme celles du
     feuillet se posent a meme le tissu.
     L'ombre suffit a detacher le lisere, et elle est en drop-shadow : elle
     epouse la decoupe du PNG, la ou un box-shadow aurait dessine un rectangle
     autour d'une image detouree. */
  filter:drop-shadow(0 2px 5px rgba(58,46,36,0.34));
}
.carnet-contexte-photo[hidden]{ display:none; }
.carnet-contexte::after{ content:""; display:block; clear:both; }

/* Seul le texte respecte les retours a la ligne : sur le bloc entier, les
   sauts du fichier HTML lui-meme s'affichaient, et un blanc s'ouvrait sous
   « Pour comprendre ». */
.carnet-contexte-texte{ white-space:pre-line; }

.carnet-contexte-titre{
  display:block;
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:16px;
  line-height:1;
  color:#8B6F47;
  margin-bottom:3px;
}

.carnet-clair{
  font-family:'Work Sans', Arial, sans-serif;
  font-size:13px;
  line-height:1.45;
  /* Les repliques vont a la ligne comme dans le carnet : c'est un dialogue,
     pas un paragraphe. Les sauts sont poses dans js/carnet.js, selon une
     regle simple : une ligne vide entre la scene racontee et la scene
     entendue, puis un simple retour a la ligne par changement de locuteur.
     La ligne vide est ramenee a une demi-hauteur : a pleine hauteur de ligne
     elle coupait le mot en deux blocs au lieu de le respirer. */
  white-space:pre-line;
  color:#3A2E24;
}

/* --- Le feuillet d'introduction ------------------------------------------
   Un papier glisse contre le carnet, a gauche, visible uniquement a cote de
   la premiere ouverture. Il porte la texture de la fresque -- le meme tissu
   que le fond du site -- pour se distinguer franchement du papier quadrille
   du carnet : ce n'est pas une page, c'est un mot pose a cote.

   Il a d'abord ete essaye comme page de garde, traversee a chaque ouverture
   du carnet. Une fois lue, elle devenait un peage : trois secondes a franchir
   pour arriver a « Mars 79 ». A cote, on le voit, on le lit si l'on veut, et
   l'oeil cesse de le remarquer des la deuxieme visite.
--------------------------------------------------------------------------- */
.carnet-feuillet{
  flex:0 0 auto;
  /* A droite du carnet. Le sosie qui s'envole de la fresque arrive par la
     gauche : un feuillet pose de ce cote-la se serait trouve sous le regard
     pendant toute l'ouverture, et l'on se serait mis a le lire avant meme que
     le carnet ne soit pose. */
  position:relative;
  z-index:2;
  width:min(28vw, 310px);
  max-height:90vh;
  max-height:90dvh;
  /* Surtout pas de defilement : le feuillet est legerement incline, et la
     barre de defilement l'etait avec lui -- un escalier de pixels le long du
     bord. Tout doit donc tenir, quelle que soit la hauteur de l'ecran : les
     tailles ci-dessous sont exprimees en vh pour se regler d'elles-memes. */
  overflow:hidden;
  padding:1.7vh 18px 1.9vh;
  padding:1.7dvh 18px 1.9dvh;
  background-color:#F1E7D1;
  background-image:url('../images/cover-texture.png');
  border-radius:2px;
  box-shadow:0 7px 20px rgba(58,46,36,0.24);
  /* Il se pose APRES le carnet : pendant l'ouverture, rien ne doit disputer
     l'attention au carnet qui vient se poser devant soi. */
  opacity:0;
  transition:opacity 0.55s ease;
  transform:rotate(0.9deg);
  transform-origin:0 50%;
  pointer-events:auto;
  color:#3A2E24;
}
.carnet-feuillet[hidden]{ display:none; }
.carnet-feuillet.pose{ opacity:1; }

/* Les photos sont posees a meme le tissu, sans cadre : leurs bords dentelés
   d'epoque font deja le travail, et un cadre blanc par-dessus en aurait mis
   deux l'un dans l'autre. */
/* Les trois cliches sont poses a meme le tissu, comme jetes la, et chacun
   porte sa legende : Brunette et Mamou reviennent dans les anecdotes, il faut
   pouvoir mettre un nom dessus. Pas de cadre ajoute -- leurs bords dentelés
   d'epoque font deja le travail. */
/* Les deux cliches sont poses cote a cote, legerement de guingois. Ils sont
   en flux et non en absolu : une hauteur fixe ne pouvait pas suivre a la fois
   la largeur des photos et la place des legendes, et « Premier Noel en
   famille » retombait sur le titre des que l'ecran raccourcissait. En flux,
   le bloc prend exactement la hauteur qu'il lui faut. */
.feuillet-images{
  display:flex;
  align-items:flex-start;
  gap:clamp(6px, 1.2vh, 12px);
  gap:clamp(6px, 1.2dvh, 12px);
  margin:0 0 clamp(9px, 1.6vh, 16px);
  margin:0 0 clamp(9px, 1.6dvh, 16px);
}
.feuillet-images .fe{
  flex:1 1 0;
  min-width:0;
  margin:0;
  filter:drop-shadow(0 3px 8px rgba(58,46,36,0.32));
}
.feuillet-images .fe img{ display:block; width:100%; height:auto; }
/* En Work Sans et non en Caveat : une legende de photo est un texte
   fonctionnel, comme les transcriptions et les bulles du site. Le Caveat, on
   le garde pour ce qui imite la main -- le titre, les dates, la citation. Une
   cursive a dix points, avec un exposant a sept, ne pouvait pas se lire. */
.feuillet-images figcaption{
  font-family:'Work Sans', Arial, sans-serif;
  font-size:clamp(9.5px, 1.35vh, 12px);
  font-size:clamp(9.5px, 1.35dvh, 12px);
  letter-spacing:0.02em;
  line-height:1.2;
  color:#6b5a45;
  text-align:center;
  margin-top:3px;
}
.feuillet-images figcaption sup{ font-size:0.7em; vertical-align:0.36em; }
.fe-papamaman{ transform:rotate(-2.6deg); }
.fe-mamou{     transform:rotate(2.4deg); margin-top:clamp(6px, 1.4vh, 14px) !important; }
.fe-mamou{     transform:rotate(2.4deg); margin-top:clamp(6px, 1.4dvh, 14px) !important; }

.carnet-feuillet h2{
  font-family:'Caveat', 'Segoe Script', cursive;
  font-weight:700;
  font-size:clamp(17px, 2.7vh, 25px);
  font-size:clamp(17px, 2.7dvh, 25px);
  line-height:1;
  margin:0;
}
.feuillet-dates{
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:clamp(9.5px, 1.35vh, 12.5px) !important;
  font-size:clamp(9.5px, 1.35dvh, 12.5px) !important;
  letter-spacing:0.04em;
  color:#8B6F47;
  margin:1px 0 1.1vh !important;
  margin:1px 0 1.1dvh !important;
}
.carnet-feuillet p{
  font-family:'Work Sans', Arial, sans-serif;
  font-size:clamp(9.8px, 1.36vh, 12.2px);
  font-size:clamp(9.8px, 1.36dvh, 12.2px);
  line-height:1.44;
  margin:0 0 0.8vh;
  margin:0 0 0.8dvh;
}
.feuillet-citation{
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:clamp(9.4px, 1.3vh, 12.2px) !important;
  font-size:clamp(9.4px, 1.3dvh, 12.2px) !important;
  line-height:1.36 !important;
  color:#5b4a35;
  border-left:2px solid #C9AE78;
  padding-left:10px;
  margin:1.2vh 0 !important;
  margin:1.2dvh 0 !important;
}

/* Le carnet et son feuillet se partagent la scene. */
/* Quand le feuillet est la, le carnet lui cede de la place -- et surtout il
   ne doit plus recouvrir les bandes de feuilletage : contraint par sa seule
   hauteur, il debordait dessus et leur volait le clic. */
.carnet-scene.avec-feuillet .carnet-plan{ gap:clamp(12px, 2.2vw, 30px); }
.carnet-scene.avec-feuillet .carnet-objet > img{
  max-width:calc(100vw - min(28vw, 310px) - 2 * min(9vw, 110px) - 40px);
  max-height:84vh;
  max-height:84dvh;
}

/* En PORTRAIT seulement : le feuillet passe sous le carnet. En paysage, la
   hauteur est la denree rare -- les empiler y reduisait le carnet a moins de
   deux cents pixels de haut, illisible. Cote a cote, chacun garde sa place. */
@media (max-width:900px) and (orientation:portrait){
  .carnet-scene.avec-feuillet .carnet-plan{ flex-direction:column; }
  /* Sur telephone le feuillet est bien plus haut que la place disponible :
     plutot que de le couper -- ce qu'il faisait, en cachant la moitie du
     texte -- on le laisse defiler, et l'on annonce qu'il defile. La barre
     n'est plus de biais ici, puisque le feuillet n'est plus incline. */
  .carnet-feuillet{
    width:min(92vw, 460px);
    max-height:38vh;
    max-height:38dvh;
    overflow-y:auto;
    transform:none;
    -webkit-overflow-scrolling:touch;
  }
  /* Plus de hauteur imposee : les cliches sont en flux depuis qu'ils ont
     leurs legendes, et une hauteur fixe faisait retomber « 1er Noel en
     famille » sur le titre. */
  .feuillet-images{ max-width:330px; margin-left:auto; margin-right:auto; }
  .carnet-scene.avec-feuillet .carnet-objet > img{ max-width:92vw; max-height:48vh; }
  .carnet-scene.avec-feuillet .carnet-objet > img{ max-width:92vw; max-height:48dvh; }
}

/* En paysage sur un petit ecran, le feuillet se fait etroit et defile. */
@media (max-height:520px) and (orientation:landscape){
  .carnet-feuillet{
    width:min(30vw, 260px);
    max-height:88vh;
    max-height:88dvh;
    overflow-y:auto;
    transform:none;
    padding:10px 12px 12px;
  }
  .carnet-scene.avec-feuillet .carnet-objet > img{
    max-width:calc(100vw - min(30vw, 260px) - 2 * min(9vw, 110px) - 30px);
    max-height:88vh;
    max-height:88dvh;
  }
}
@media (prefers-reduced-motion:reduce){
  .carnet-feuillet{ transform:none; }
}

/* --- Feuilleter --------------------------------------------------------- */
.carnet-tourne{
  /* Au-dessus du feuillet d'introduction : il empietait sur la bande de
     gauche et lui volait le clic. */
  z-index:6;
  position:absolute;
  top:0;
  left:auto; right:auto;
  /* height:100% et non top:0;bottom:0 : .carnet-scene est un conteneur flex,
     et un enfant absolu n'y recoit pas de hauteur du couple top/bottom -- les
     deux bandes se retrouvaient hautes de 0 px, donc increvables au clic et
     invisibles a la souris, sans que rien ne le signale. */
  height:100%;
  width:min(9vw, 110px);
  border:none;
  background:none;
  padding:0; margin:0; font:inherit;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.carnet-tourne--avant{ right:0; }
.carnet-tourne--arriere{ left:0; }
/* Arrive au bout de ce qui est recopie, la bande ne s'eteint pas : elle
   reste cliquable pour pouvoir le dire (voir dire() dans js/carnet.js). Un
   vrai [disabled] avale le clic sans rien annoncer. */
.carnet-tourne.inerte{ cursor:default; }
.carnet-tourne.inerte .carnet-chevron{ opacity:0.15; }
/* Au repos : rien. A l'approche : la lumiere du bord glisse un peu, et un
   trait fin se dessine dans le sens ou l'on va. Aucune pastille, aucun rond.
   Le chevron est un <span> et non un ::after : ces bandes portent (comme tout
   le site) des bulles [data-tip] qui occupent deja ::after et ::before. Un
   chevron dessine en ::after se superposait au fond papier et au texte de la
   bulle -- a l'ecran, un losange blanc plein au milieu de nulle part. */
.carnet-chevron{
  position:absolute;
  top:50%;
  /* Plus grandes et plus franches : a 15 px et 34 % d'opacite, personne ne
     les trouvait -- meme en sachant qu'elles existaient. */
  width:22px; height:22px;
  border-top:3px solid rgba(139,111,71,0.85);
  border-right:3px solid rgba(139,111,71,0.85);
  /* Visibles au repos, et non plus seulement au survol : personne ne devine
     qu'il faut approcher la souris du bord d'un ecran vide pour tourner la
     page. Assez pales pour ne pas faire boutons. */
  opacity:0.7;
  transition:opacity 0.3s ease, transform 0.3s ease;
  pointer-events:none;
}
.carnet-tourne--avant .carnet-chevron{
  right:30px; transform:translateY(-50%) rotate(45deg) translateX(-5px);
}
.carnet-tourne--arriere .carnet-chevron{
  left:30px; transform:translateY(-50%) rotate(-135deg) translateX(-5px);
}
@media (hover:hover){
  .carnet-tourne:not(.inerte):hover{
    background:linear-gradient(to left, rgba(139,111,71,0.10), transparent);
  }
  .carnet-tourne--arriere:not(.inerte):hover{
    background:linear-gradient(to right, rgba(139,111,71,0.10), transparent);
  }
  .carnet-tourne:not(.inerte):hover .carnet-chevron{ opacity:1; }
  .carnet-tourne--avant:not(.inerte):hover .carnet-chevron{
    transform:translateY(-50%) rotate(45deg) translateX(0);
  }
  .carnet-tourne--arriere:not(.inerte):hover .carnet-chevron{
    transform:translateY(-50%) rotate(-135deg) translateX(0);
  }
}
.carnet-tourne:focus-visible .carnet-chevron{ opacity:1; }
/* Ni fleche ni bande de lumiere quand on lit une anecdote de pres. */
.carnet-scene.lu .carnet-tourne{ pointer-events:none; }
.carnet-scene.lu .carnet-chevron{ opacity:0; }

/* --- Reposer le carnet -------------------------------------------------- */
/* Meme badge rond que .home-badge (css/common.css), pour que le geste de
   sortie soit celui qu'on connait deja partout ailleurs sur le site. */
.carnet-sortie{
  position:absolute;
  top:14px; left:14px;
  width:40px; height:40px;
  border:none;
  border-radius:50%;
  background:#8B6F47;
  color:#F3F0DE;
  padding:0; margin:0;
  font:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  transition:background 0.2s ease, transform 0.2s ease;
  z-index:6;
  -webkit-tap-highlight-color:transparent;
}
.carnet-sortie:hover, .carnet-sortie:focus-visible{
  background:#3A2E24; transform:scale(1.08); outline:none;
}
.carnet-sortie svg{ width:19px; height:19px; display:block; }
/* Sa bulle s'ouvre vers le bas et est ancree a gauche, comme .home-badge :
   le badge est a 14 px du haut ET du bord gauche, une bulle centree
   au-dessus serait hors ecran et coupee au debut du texte. */
.carnet-sortie::after{ bottom:auto; top:calc(100% + 8px); left:-4px; transform:none; }
.carnet-sortie::before{ bottom:auto; top:calc(100% + 3px); left:11px; transform:none;
  border-top-color:transparent; border-bottom-color:#8B6F47; }

/* --- Le conseil de tourner le telephone --------------------------------- */
/* Une ligne, une fois par visite, qui s'efface d'elle-meme : sur un ecran
   tenu debout la double page fait la taille d'un timbre. Ce n'est pas une
   explication du carnet -- c'est le seul geste qu'on ne peut pas deviner. */
.carnet-conseil{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  max-width:76vw;
  background-color:rgba(243,240,222,0.94);
  border:1px solid #8B6F47;
  border-radius:4px;
  padding:5px 11px;
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
  font-family:'Work Sans', Arial, sans-serif;
  font-size:12px;
  font-weight:500;
  color:#3A2E24;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.5s ease, visibility 0.5s ease;
  pointer-events:none;
  /* Au-dessus du carnet, qui monte a 7 sur les ouvertures portant un petit
     papier. Le bandeau etait reste a 5 : sur la derniere ouverture recopiee
     -- qui porte justement un papier -- la phrase qui annonce que la suite
     n'est pas encore la se peignait DERRIERE la double page. On croyait la
     fleche muette alors qu'elle repondait. Meme piege que celui du cartouche,
     au meme endroit du fichier. Il reste sous le cartouche (9) : les deux ne
     s'affichent jamais ensemble, mais si cela devait arriver, c'est le texte
     de l'anecdote qui doit primer. */
  z-index:8;
}
.carnet-conseil.visible{ opacity:1; visibility:visible; }

/* --- Le carnet fermé qui grandit pendant l'ouverture -------------------- */
/* Sosie du carnet de la fresque, place a sa position exacte puis anime vers
   le centre. Il s'efface pendant que la double page apparait : c'est ce
   fondu croise, et non un changement d'image net, qui donne l'ouverture. */
.carnet-vol{
  position:fixed;
  z-index:1250;
  pointer-events:none;
  transform-origin:50% 50%;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.28));
}
.carnet-vol img{ width:100%; height:auto; display:block; }
/* Les deux etats du carnet ferme sont SUPERPOSES : celui avec elastique
   par-dessus, qui s'efface pour laisser voir celui sans. Sans cette regle ils
   s'empilent l'un sous l'autre et l'on voit deux carnets pendant toute
   l'ouverture -- le second se lisant comme une ombre du premier. */
.carnet-vol .carnet-vol-elastique{ position:absolute; left:0; top:0; }
/* En mouvement reduit le carnet ferme ne voyage pas : il se montre a la place
   qu'occupera la double page, le temps qu'on voie l'elastique partir. */
.carnet-vol-pose{
  left:50%; top:50%;
  width:auto; height:52vh;
  width:auto; height:52dvh;
  transform:translate(-50%, -50%);
  transition:opacity 0.6s ease;
}
.carnet-vol-pose img{ width:auto; height:100%; }
.carnet-vol-pose .carnet-vol-elastique{ transition:opacity 0.55s ease; }

/* --- Mobile ------------------------------------------------------------- */
@media (max-width:700px){
  .carnet-plan{ padding:2vh 1.5vw 15vh; }
  .carnet-plan{ padding:2dvh 1.5vw 15dvh; }
  /* 84vw et non 97 : sur un telephone tenu droit, le carnet occupait toute
     la largeur et il ne restait pas de quoi poser un doigt sur le coin du
     papier. C'est l'ecran ou la reserve compte le plus. */
  .carnet-objet > img{ max-width:84vw; max-height:85vh; }
  .carnet-objet > img{ max-width:84vw; max-height:85dvh; }
  /* Sur telephone, les bandes de bord mangeraient la moitie du carnet : on
     les reduit au chevron seul, pose en bas de l'ecran, sous le carnet. Elles
     etaient purement masquees ; le balayage suffisait techniquement, mais
     rien ne l'annoncait et l'on cherchait les fleches sans les trouver. */
  .carnet-tourne{
    width:clamp(46px, 13vw, 62px);
    height:auto;
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 3vh);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 3dvh);
    padding:10px 0;
  }
  .carnet-tourne--avant{ right:4vw; }
  .carnet-tourne--arriere{ left:4vw; }
  .carnet-chevron{ opacity:0.85; }
  .carnet-mot{
    padding:6px 10px 7px;
    max-width:92vw;
    /* Le mot ne prend jamais plus de la moitie basse : au-dela il recouvre le
       passage, et c'est lui qu'on est venu lire. Il defile plutot que de
       monter. */
    max-height:48vh;
    max-height:48dvh;
    overflow-y:auto;
  }
  .carnet-contexte{ font-size:11.5px; margin-top:7px; padding-top:6px; }
  /* Quand le contexte parle de quelqu'un dont on a une photo -- Brunette, par
   exemple -- elle se pose ici plutot que dans le carnet : c'est l'explication
   qui la porte, pas la page. */
.carnet-contexte-photo{
  float:right;
  /* Assez grande pour qu'on voie le lapin dans les bras de l'enfant : a 96 px
     on ne distinguait qu'une tache blanche. */
  width:148px;
  /* La hauteur est connue AVANT que l'image arrive : sans cela le mot est
     mesure trop court au moment de le placer, et il se pose a un endroit qui
     ne lui convient plus une fois la photo chargee.
     Toutes les photos du carnet sont CARREES -- Anne les fournit en
     1254 x 1254 -- d'ou la valeur par defaut. Le rapport reste pose par le JS
     pour chacune, au cas ou l'une d'elles ne le serait pas un jour. */
  aspect-ratio:var(--photo-ratio, 1 / 1);
  margin:1px 0 7px 13px;
  /* Plus de carton de montage. Il rendait bien le bord dentele, mais comme
     tout est en border-box, ses dix pixels tout autour se prenaient sur la
     photo et non autour : le cliche tombait a 112 px et l'on ne distinguait
     plus qui etait dedans -- ce qui etait pourtant le seul but de le montrer.
     La photo se pose donc a meme le papier du cartouche, comme celles du
     feuillet se posent a meme le tissu.
     L'ombre suffit a detacher le lisere, et elle est en drop-shadow : elle
     epouse la decoupe du PNG, la ou un box-shadow aurait dessine un rectangle
     autour d'une image detouree. */
  filter:drop-shadow(0 2px 5px rgba(58,46,36,0.34));
}
.carnet-contexte-photo[hidden]{ display:none; }
.carnet-contexte::after{ content:""; display:block; clear:both; }

/* Seul le texte respecte les retours a la ligne : sur le bloc entier, les
   sauts du fichier HTML lui-meme s'affichaient, et un blanc s'ouvrait sous
   « Pour comprendre ». */
.carnet-contexte-texte{ white-space:pre-line; }

.carnet-contexte-titre{ font-size:15px; }
  .carnet-mot-date{ font-size:18px; }
  .carnet-clair{ font-size:12.5px; }
  .carnet-sortie{ top:10px; left:10px; }
}

/* --- Visiteurs qui ont demande a limiter les animations ----------------- */
/* Mouvement reduit : on supprime les DEPLACEMENTS, pas les fondus.
   Le reglage systeme (Windows : Parametres > Accessibilite > Effets visuels)
   vise le mouvement, qui peut donner le vertige ; un fondu d'opacite ne pose
   pas ce probleme. Tout couper rendait l'ouverture instantanee : le carnet
   sautait de la fresque a la double page sans qu'on ait le temps de
   comprendre qu'on venait de l'ouvrir. */
@media (prefers-reduced-motion:reduce){
  .carnet-objet, .carnet-zone, .carnet-tourne,
  .carnet-chevron, .carnet-sortie{ transition:none; }
  .carnet-objet{ transform:none; }
  .carnet-scene{ transition:opacity 0.45s ease; }
  .carnet-mot{ transition:opacity 0.3s ease, visibility 0.3s ease; }
}

/* =========================================================================
   LES PETITS PAPIERS                                    ajoutes avec la V149

   Le carnet contenait, glisses entre ses pages, une trentaine de feuillets
   ecrits par Mamou et par Papa. On les rend a leur place : un coin depasse de
   la tranche, on tire dessus, le papier se pose a cote de la double page.

   Trois choses a savoir pour s'y retrouver :

   1. Le papier vit DANS .carnet-objet, ecrit avant l'image de la page. Il
      passe donc derriere elle, et c'est le corps du carnet qui le masque --
      aucun decoupage n'est necessaire, et le mouvement de sortie est juste
      parce qu'il est reel.

   2. Sorti, il n'est pas dispute au carnet : la double page passe en retrait
      et ses zones s'eteignent. Le papier est deja seul et deja a sa taille de
      lecture, il n'y a donc rien a viser et rien a agrandir -- un seul
      agrandissement dans toute la sequence, celui du tirage.

   3. Son placement est calcule en JS (posePapier dans js/carnet.js) : la
      largeur disponible n'est pas la meme d'un ecran a l'autre, et le
      cartouche doit tenir a cote sans jamais recouvrir le papier.
   ========================================================================= */

.carnet-papier{
  position:absolute;
  z-index:1;                     /* DERRIERE l'image de la page, qui est a 2 */
  right:0;
  top:var(--haut, 11%);
  height:var(--hauteur, 78%);
  /* La boite tient a son rapport hauteur/largeur : les deux faces sont en
     position absolue et n'ont aucune largeur propre. C'est cette largeur qui
     sert ensuite au calcul de la place a droite du carnet. */
  aspect-ratio:var(--ratio, 0.66);
  transform:translateX(var(--languette, 40px));
  transition:transform 0.95s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  perspective:1600px;
}
.carnet-papier[hidden]{ display:none; }

/* Deux battements a l'ouverture d'une page, puis plus rien -- exactement le
   timing des zones d'anecdotes. La lecon est la meme : personne ne pense a
   promener la souris sur la tranche d'un carnet, il faut donc que le geste
   soit annonce. Et une fois annonce, l'ecran doit se taire. */
.carnet-papier:not(.sorti){ animation:papier-appel 1.5s ease-in-out 0.5s 2 both; }
@keyframes papier-appel{
  0%, 100%{ transform:translateX(var(--languette, 40px)); }
  50%     { transform:translateX(calc(var(--languette, 40px) + 9px)); }
}
.carnet-papier.sorti{ z-index:6; animation:none; }

.papier-feuille{
  position:relative;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.34,.64,.32,1);
}
.carnet-papier.retourne .papier-feuille{ transform:rotateY(180deg); }

.papier-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.papier-face img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  /* Ombre portee vers la droite : range, le papier ne montre que sa tranche,
     et une ombre verticale ne l'aurait pas detache du fond creme. */
  filter:drop-shadow(-2px 5px 12px rgba(58,46,36,0.34));
  transition:filter 0.6s ease;
  -webkit-user-drag:none;
  user-select:none;
}
.papier-verso{ transform:rotateY(180deg); }
/* Sorti, le papier est au-dessus du plan et non plus dans le carnet : son
   ombre se detache franchement. */
.carnet-papier.sorti .papier-face img{ filter:drop-shadow(0 12px 26px rgba(58,46,36,0.36)); }

/* Le carnet passe en retrait pendant qu'on lit le papier. Il ne disparait
   pas : on le voit toujours, on n'a pas change d'endroit, et il revient net
   des qu'on range. */
/* Les bandes de feuilletage sont a z-index 6 et couvrent les bords de
   l'ecran : sur une fenetre moyenne, le carnet vient au contact et la
   languette du papier, qui depasse de sa tranche, tombait dessous -- le clic
   tournait la page au lieu de tirer le papier. On eleve donc le carnet
   au-dessus d'elles, mais SEULEMENT sur les ouvertures qui portent un papier.
   Les bandes restent cliquables partout ou le carnet ne les recouvre pas.

   Consequence assumee : sur une fenetre moyenne, la languette mord sur la
   bande de droite, et un clic a cet endroit precis tire le papier au lieu de
   tourner la page. C'est le bon arbitrage -- on clique sur un objet visible,
   il repond -- et la bande reste disponible au-dessus et en dessous du
   papier, qui n'occupe que les quatre cinquiemes de la hauteur. Le
   feuilletage reste par ailleurs accessible au clavier et au balayage. */
.carnet-scene.avec-papier .carnet-objet{ z-index:7; }

.carnet-scene.papier-sorti .carnet-objet > img{ opacity:0.28; filter:none; }
.carnet-scene.papier-sorti .carnet-zone{ opacity:0.16; pointer-events:none; }
.carnet-scene.papier-sorti .carnet-feuillet{ opacity:0.2; }
.carnet-objet > img{ transition:opacity 0.75s ease, filter 0.75s ease; }
.carnet-zone{ transition:background-color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, opacity 0.6s ease; }

/* La languette : la surface qu'on attrape quand le papier est range. Elle
   couvre exactement le morceau visible, pas un pixel de plus -- sinon elle
   volerait les clics de la page du carnet a cote. */
.papier-attrape{
  position:absolute;
  z-index:7;
  top:0; bottom:0; right:0;
  width:var(--languette, 40px);
  padding:0; margin:0; border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.carnet-papier.sorti .papier-attrape{ display:none; }
@media (hover:hover){
  .carnet-papier:not(.sorti):hover,
  .carnet-papier.survol:not(.sorti){
    animation:none;              /* sinon l'appel ecrase le decalage */
    transform:translateX(calc(var(--languette, 40px) + 7px));
  }
  .carnet-papier:not(.sorti):hover .papier-face img,
  .carnet-papier.survol:not(.sorti) .papier-face img{
    filter:drop-shadow(-4px 6px 15px rgba(58,46,36,0.44));
  }
}
.papier-attrape:focus-visible{ outline:2px solid #8B6F47; outline-offset:2px; border-radius:2px; }

/* Sorti, le papier entier repond : un clic replie tout, texte compris. */
.papier-replie{
  position:absolute;
  inset:0;
  z-index:5;
  padding:0; margin:0; border:0; background:none;
  cursor:pointer;
  display:none;
}
.carnet-papier.sorti .papier-replie{ display:block; }

/* --- Les passages du papier --------------------------------------------- */
/* Un papier dont Anne a cadre les passages se lit comme une page : surlignage
   permanent, deux battements a l'arrivee. Un papier scripte en entier n'en a
   aucun -- c'est le papier lui-meme qui est l'anecdote. */
.papier-zones{ position:absolute; inset:0; z-index:6; pointer-events:none; display:none; }
.carnet-papier.sorti .papier-zones{ display:block; }
.papier-zone{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border:1px dashed rgba(139,111,71,0.68);
  border-radius:3px;
  /* Un peu plus soutenu que sur les pages du carnet (0,26) : les papiers sont
     d'un blanc franc, la ou les pages sont quadrillees et deja beiges, et le
     meme voile s'y voyait a peine. Mais a peine plus : a 0,42 le voile
     masquait l'ecriture qu'il est cense designer, ce qui est exactement le
     contraire du but. */
  background-color:rgba(196,166,108,0.30);
  box-shadow:0 0 12px 4px rgba(201,174,120,0.18);
  padding:0; margin:0; font:inherit;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  pointer-events:auto;
  transform:rotate(var(--pivot, 0deg));
  /* Animation propre aux papiers : « carnet-passage » revient a 0,26 en fin
     de course, et son fill-mode « both » ecrasait le voile plus soutenu
     ci-dessus. Les passages devenaient invisibles des la fin du battement. */
  animation:papier-passage 1.5s ease-in-out 0.9s 2 both;
  transition:background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  -webkit-tap-highlight-color:transparent;
}
@keyframes papier-passage{
  0%, 100%{ background-color:rgba(196,166,108,0.30); }
  50%     { background-color:rgba(190,158,96,0.52); }
}
@media (hover:hover){
  .papier-zone:hover{
    background-color:rgba(196,166,108,0.46);
    border-color:rgba(122,96,60,0.9);
    box-shadow:0 0 14px 5px rgba(201,174,120,0.26);
  }
}
.papier-zone:focus-visible{
  outline:none;
  background-color:rgba(196,166,108,0.46);
  border-color:rgba(122,96,60,0.95);
}
/* Pendant qu'on lit un passage, les autres s'effacent : celui-la seul doit
   dire de quoi parle le texte a cote. */
.carnet-scene.papier-lu .papier-zone:not(.lue){
  background-color:transparent;
  border-color:transparent;
  box-shadow:none;
  animation:none;
}
/* Sauf sur la seule face qui porte plusieurs passages -- le dos de
   l'ouverture 03. La regle ci-dessus faisait disparaitre les zones voisines
   pendant qu'on lisait : on pouvait deja cliquer directement de l'une a
   l'autre sans rien refermer, mais plus rien ne le disait. On refermait donc
   tout, et il fallait ressortir le papier, le retourner, viser -- trois
   gestes pour ce qui n'en demandait qu'un.
   Elles restent donc dessinees, en pointille et sans fond : assez pour dire
   qu'il y a autre chose a lire, pas assez pour concurrencer le texte ouvert.
   Leur bulle « Lire ce passage » les accompagne, elle n'a jamais disparu. */
.carnet-scene.papier-lu .papier-zones.plusieurs .papier-zone:not(.lue){
  background-color:transparent;
  border-color:rgba(122,96,60,0.60);
  border-style:dashed;
  box-shadow:none;
  animation:none;
}
/* Sur une page du carnet, la zone qu'on lit perd son voile : on veut voir
   l'ecriture au-dessous. Sur un petit papier, NON -- et c'est une difference
   qui compte. Le papier sort et s'ouvre d'un seul geste : si le voile
   disparaissait aussitot, on ne verrait jamais le passage surligne, et rien
   ne dirait quelle partie de la feuille est transcrite. Il reste donc, un peu
   plus soutenu, avec sa bordure pleine. */
.papier-zone.lue{
  background-color:rgba(196,166,108,0.36);
  border-color:rgba(122,96,60,0.95);
  border-style:solid;
  box-shadow:0 0 0 3px rgba(251,243,223,0.55);
  animation:none;
}

/* --- La bulle des zones, a la taille du site ---------------------------- */
/* Les bulles [data-tip] sont declarees a 12 px partout dans le site. Celles
   des zones d'un petit papier vivent dans .carnet-papier, que l'on met a
   l'echelle par un transform : elles sortaient donc a 18 px sur ordinateur et
   28 px sur telephone -- plus grandes que l'ecriture qu'elles designent, et
   plus grandes que toutes les autres bulles du site.
   On defait l'echelle plutot que de recalculer chaque valeur : une seule
   ligne, et la taille du texte, les marges, le filet et l'ombre reviennent
   ensemble a leur juste proportion. --echelle est publiee par papTransform()
   dans js/carnet.js, et suit aussi l'approche a la molette.
   Le point d'ancrage est le bas de la bulle : elle reste posee juste
   au-dessus de la zone, comme partout ailleurs. */
.papier-zone[data-tip]::after{
  transform:translateX(-50%) scale(calc(1 / var(--echelle, 1)));
  transform-origin:bottom center;
}
.papier-zone[data-tip]::before{
  transform:translateX(-50%) scale(calc(1 / var(--echelle, 1)));
  transform-origin:bottom center;
}

/* --- Le coin corne ------------------------------------------------------ */
/* Un vrai coin de feuille relevee : le triangle clair est le dos du papier
   qu'on apercoit, l'ombre est celle du pli. Il n'apparait que sur les papiers
   qui portent quelque chose au verso, et bat deux fois quand le papier se
   pose -- c'est l'instant ou il faut le remarquer. */
.papier-corne{
  position:absolute;
  z-index:8;
  right:0; bottom:0;
  /* Le pli se dessine dans le coin, mais la zone qui repond est une BANDE le
     long du bas. Tant que le coin etait seul, il faisait foi et l'on visait le
     petit triangle. Depuis qu'il y a « voir au dos » ecrit a cote, c'est le
     texte qu'on vise -- et le texte, lui, laissait passer le clic jusqu'au
     papier, qui se rangeait. On promettait le dos et on refermait la feuille.
     La bande couvre donc la mention ET le pli : ou qu'on vise en bas a droite,
     la feuille se retourne. Sa hauteur reste celle du pli, pour ne pas manger
     le texte de l'anecdote au-dessus. */
  width:42%;
  height:clamp(24px, 13%, 58px);
  padding:0; margin:0; border:0;
  background:none;
  cursor:pointer;
  display:none;
  -webkit-tap-highlight-color:transparent;
}
.carnet-papier.sorti.a-dos .papier-corne{
  display:block;
  animation:papier-corne-appel 1.5s ease-in-out 0.9s 2 both;
}
@keyframes papier-corne-appel{
  0%, 100%{ transform:none; }
  50%     { transform:translate(-5px, -5px); }
}
/* Le coin seul ne suffisait plus. Depuis que les passages sont surlignes en
   permanence, l'oeil apprend qu'un trait pointille se clique -- et le petit
   pli en bas a droite, qui ne porte aucun trait, cesse d'exister. Deux
   battements au tirage ne rattrapent pas cela : on ne les voit que si on
   regarde deja au bon endroit. Une main a donc note le geste a cote du pli,
   comme on annote une feuille qu'on passe a quelqu'un.
   Ecrit et non dessine, translucide et de travers : c'est une mention, pas un
   bouton. Et seulement sur le recto -- au dos, le geste est appris. */
.papier-corne-mot{
  position:absolute;
  /* Calee sur le PLI, et non sur le bord gauche de la bande. Anne : « le voir
     au dos gagnerait a etre un peu remonte et surtout deplace sur la droite,
     comme ca on arriverait a lire Champagne, qui est le dernier mot de la
     feuille ». Elle s'arrete donc juste avant le coin releve, au lieu de
     partir en travers de la feuille : la mention se lit comme une note portee
     dans la marge, a cote du pli qu'elle designe, et rend au texte la fin de
     sa derniere ligne.
     Remontee, aussi, de la hauteur du halo : pose au ras du bord, celui-ci
     debordait de dix a dix-huit pixels SOUS la feuille, et l'on voyait un
     souffle clair flotter sur la page du carnet en dessous. */
  left:auto;
  right:calc(var(--pli, 44px) + 0.30em);
  bottom:calc(0.88 * var(--mot, 15px));
  white-space:nowrap;
  font-family:'Caveat', 'Segoe Script', cursive;
  font-size:var(--mot, 15px);
  line-height:1;
  /* Un peu plus d'encre qu'avant (0,60) : le halo pose sous la mention la
     detache deja du fond, l'ecriture peut donc etre lue sans etre appuyee. */
  color:rgba(58,46,36,0.74);
  transform:rotate(-3.5deg);
  /* Pas de pointer-events:none ici. C'etait la cause du bug : le clic
     traversait la mention et tombait sur le papier, qui se rangeait. */
}
/* Le halo. Sur l'ouverture 09 -- la grande feuille de Mamou ecrite recto
   verso -- la mention tombe en travers des dernieres lignes, et les deux
   ecritures se mangent l'une l'autre. Il fallait donc quelque chose dessous.
   Un rectangle de plus aurait fait cartouche, et le site en a deja beaucoup ;
   un ovale sans bord ne fait rien d'autre qu'eclaircir la feuille a cet
   endroit, comme un souffle sur la page. Il n'a pas de contour du tout : le
   degrade s'eteint avant d'atteindre son bord, de sorte qu'on ne voit jamais
   ou il s'arrete -- c'est ce qui l'empeche de ressembler a un objet pose. Sa
   couleur est celle du papier, en plus clair, et non un blanc franc. */
.papier-corne-mot::before{
  content:'';
  position:absolute;
  /* Elargi le 13 septembre, a la demande d'Anne : au premier jet, les deux
     lettres des extremites -- le « v » et le « s » -- tombaient la ou l'ovale
     est le plus mince et le degrade deja bien efface. Elles restaient donc
     melees a l'ecriture de Mamou pendant que le milieu du mot etait degage.
     L'ovale deborde maintenant d'un quart de part et d'autre, et le palier
     clair tient jusqu'aux quatre cinquiemes du rayon : la ligne entiere est
     posee au propre, pas seulement son milieu. */
  left:-26%; right:-26%; top:-62%; bottom:-62%;
  border-radius:50%;
  background:radial-gradient(closest-side ellipse at 50% 50%,
      rgba(250,244,228,0.93) 0%,
      rgba(250,244,228,0.89) 54%,
      rgba(250,244,228,0.52) 80%,
      rgba(250,244,228,0.00) 100%);
  z-index:-1;
  pointer-events:none;
}
.carnet-papier.retourne .papier-corne-mot{ display:none; }

.papier-corne::before{
  content:'';
  position:absolute;
  right:0; bottom:0;
  /* Un carre dont le cote vaut la hauteur de la bande : le pli garde sa
     taille d'avant, c'est la zone qui repond qui s'est elargie. */
  height:100%; aspect-ratio:1; width:auto;
  background:linear-gradient(228deg, #F2E9D4 0%, #E6D8B8 40%, #C6B183 100%);
  clip-path:polygon(100% 100%, 0 100%, 100% 0);
  box-shadow:-3px -3px 9px rgba(58,46,36,0.34);
  transition:width 0.35s ease, height 0.35s ease;
}
/* L'ombre du pli sur le papier, sous le coin releve. */
.papier-corne::after{
  content:'';
  position:absolute;
  right:0; bottom:0;
  /* Un carre dont le cote vaut la hauteur de la bande : le pli garde sa
     taille d'avant, c'est la zone qui repond qui s'est elargie. */
  height:100%; aspect-ratio:1; width:auto;
  clip-path:polygon(100% 100%, 0 100%, 100% 0);
  background:linear-gradient(228deg, transparent 55%, rgba(58,46,36,0.22) 100%);
  transform:scaleX(-1) translateX(2px);
  pointer-events:none;
}
@media (hover:hover){
  .papier-corne:hover::before{ height:122%; }
}
.papier-corne:focus-visible{ outline:2px solid #8B6F47; outline-offset:2px; }

/* --- Sur un telephone tenu droit, le coin depasse PAR LE HAUT -----------
   Le carnet y occupe presque toute la largeur : il ne restait pas douze
   pixels a droite, de quoi voir le coin encore moins de quoi poser un doigt
   dessus. En hauteur, au contraire, la place ne manque pas.
   Le haut plutot que le bas : c'est par la qu'un papier glisse dans un
   carnet depasse vraiment, comme un marque-page. */
@media (max-width:700px) and (orientation:portrait){
  .carnet-papier{
    right:auto;
    left:var(--gauche, 16%);
    top:0;
    transform:translateY(calc(-1 * var(--languette, 26px)));
  }
  @keyframes papier-appel{
    0%, 100%{ transform:translateY(calc(-1 * var(--languette, 26px))); }
    50%     { transform:translateY(calc(-1 * var(--languette, 26px) - 9px)); }
  }
  /* La surface qu'on attrape suit le coin : elle devient une bande
     horizontale posee sur le haut du papier. */
  .papier-attrape{
    top:0; bottom:auto;
    left:0; right:0;
    width:auto;
    height:var(--languette, 26px);
  }
  /* L'ombre se porte vers le haut, puisque c'est par la qu'il sort. */
  .papier-face img{ filter:drop-shadow(2px -3px 12px rgba(58,46,36,0.34)); }

  /* Le survol doit decaler vers le HAUT lui aussi. La regle generale, ecrite
     pour un coin qui sort par la tranche droite, envoyait le papier a droite :
     il s'echappait sous le curseur, et le clic tombait a cote. Invisible sur
     un vrai telephone, qui n'a pas de survol -- mais un ordinateur a fenetre
     etroite rendait le coin inattrapable. */
  @media (hover:hover){
    .carnet-papier:not(.sorti):hover,
  .carnet-papier.survol:not(.sorti){
      animation:none;
      transform:translateY(calc(-1 * var(--languette, 26px) - 7px));
    }
    .carnet-papier:not(.sorti):hover .papier-face img,
  .carnet-papier.survol:not(.sorti) .papier-face img{
      filter:drop-shadow(3px -5px 15px rgba(58,46,36,0.44));
    }
  }
}


@media (prefers-reduced-motion:reduce){
  .carnet-papier, .papier-feuille, .papier-corne::before,
  .carnet-objet > img{ transition:none; }
  .carnet-papier:not(.sorti), .papier-zone,
  .carnet-papier.sorti.a-dos .papier-corne{ animation:none; }
}