@charset "UTF-8";
/* =========================================================================
   Affrenchy, de mère en fille : le livre de la page d'accueil
   Les pages se mesurent en unités de conteneur (cqw, cqh) : le texte et les
   photos gardent leurs proportions quelle que soit la taille du livre.
   Aucune photo n'est rognée : chaque tirage garde son format d'origine.
   ========================================================================= */

.livre {
  --papier: #FBF8F1;
  --encre-page: #2A2A30;
  --gris-page: #6B6557;
  --fil-argent: #B9BCC2;
  --fil-brun: #8B6B4F;
  --dore: #C9A96A;
  --pw: 360px;
  --ph: 514px;
  position: relative;
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(201, 169, 106, .26), rgba(247, 244, 238, 0) 64%),
    var(--ivoire);
}

/* ------------------------------------------------------------ l'ouverture */

.livre__intro {
  text-align: center;
  padding: clamp(1.75rem, 5vw, 3.25rem) var(--gouttiere) 1.5rem;
  display: grid;
  gap: .55rem;
  justify-items: center;
}
.livre__intro .surtitre { margin: 0; }
.livre h1.livre__titre {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  color: var(--nasir);
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.005em;
}
.livre__titre em { font-style: italic; }
.livre__chapeau { margin: 0; max-width: 30em; color: var(--texte); }
.livre__consigne {
  margin: .5rem 0 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or-fonce);
}
.livre__consigne::after {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  margin: .55rem auto 0;
  background: linear-gradient(var(--or-fonce), rgba(138, 106, 47, 0));
  transform-origin: top;
  animation: livre-invite 2.4s ease-in-out infinite;
}
@keyframes livre-invite {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  50% { transform: scaleY(1); opacity: 1; }
}
.livre__passer {
  font-size: .76rem;
  color: var(--texte);
  position: absolute;
  left: -9999px;
}
.livre__passer:focus { position: static; }

/* ------------------------------------------------------- une page du livre */

.livre .lp {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: size;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--encre-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* marges en % de la largeur : une page ne peut pas se mesurer elle-même */
  padding: 10.5% 8% 10%;
  overflow: hidden;
}
.livre .lp p { margin: 0; }

.lp__tete {
  position: absolute;
  top: 3.3cqh;
  left: 0;
  right: 0;
  text-align: center;
  font: 500 clamp(8px, 2cqw, 11px)/1 var(--texte-police);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris-page);
}
.lp__folio {
  position: absolute;
  bottom: 2.6cqh;
  left: 0;
  right: 0;
  text-align: center;
  font: 400 clamp(10px, 2.9cqw, 15px)/1 var(--display);
  color: var(--gris-page);
}
.livre .lp p.lp__folio { margin: 0; }

.lp__corps {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  container-type: size;
  display: grid;
  place-items: center;
}

/* la planche prend la hauteur que demande son format, sans plus : photo,
   légende et texte forment un seul bloc, centré dans la page */
.lp--photos, .lp--nuit { justify-content: center; }
.livre .lp .lp__corps {
  flex: 0 1 auto;
  height: calc(100cqw / var(--r));
}

/* planches : lignes et colonnes calculées au format exact des photos */
.planche { display: flex; gap: 2.6cqmin; min-width: 0; min-height: 0; }
.planche--ligne { flex-direction: row; }
.planche--colonne { flex-direction: column; }
.planche--racine {
  width: min(100cqw, calc(100cqh * var(--r)));
  aspect-ratio: var(--r);
}
.planche .planche { flex: var(--f) 1 0; }

.tirage {
  flex: var(--f) 1 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* le tirage s'agrandit ou se réduit pour remplir sa place, à son format exact.
   Aucun cadre : la photo seule, bord à bord, posée sur la page. */
.tirage img {
  --bord: 0px;
  display: block;
  box-sizing: content-box;
  width: min(calc(100cqw - 2 * var(--bord)), calc((100cqh - 2 * var(--bord)) * var(--a, 1)));
  height: auto;
  aspect-ratio: var(--a, 1);
  max-width: none;
  object-fit: contain;
  border: 0;
  outline: 0;
  padding: 0;
  /* une teinte de papier tient la place de la photo le temps qu'elle arrive */
  background: #ECE7DE;
  /* une ombre à peine perceptible, très diffuse, pour détacher la photo de la page */
  box-shadow: 0 22px 48px -30px rgba(30, 24, 18, .24);
  transform: rotate(var(--pivot, 0deg));
  cursor: zoom-in;
}

.lp__legende {
  margin-top: 2.6cqh !important;
  font: 500 clamp(8px, 2.05cqw, 11.5px)/1.45 var(--texte-police);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-page);
  text-align: center;
  max-width: 92%;
}
.lp__texte {
  margin-top: 2cqh !important;
  font: italic 400 clamp(15px, 5.1cqw, 28px)/1.3 var(--display);
  color: var(--encre-page);
  text-align: center;
  max-width: 94%;
  text-wrap: balance;
}

/* ------------------------------------------------ couverture et dos du livre */

.livre .lp--couverture,
.livre .lp--dos {
  background-color: #1A2F5E;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(120% 90% at 30% 18%, #264077 0%, #1A2F5E 55%, #142548 100%);
  color: #E7D8BC;
  padding: 6.5%;
  cursor: pointer;
}
.livre .lp--dos { cursor: default; }
.couv__cadre {
  flex: 1;
  width: 100%;
  border: 1px solid rgba(201, 169, 106, .8);
  outline: 1px solid rgba(201, 169, 106, .4);
  outline-offset: -2.3cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3.2cqh;
  padding: 7cqw;
}
.couv__monogramme { width: 23cqw; height: auto; }
.livre .couv__titre {
  font: 500 10.6cqw/1.02 var(--display);
  letter-spacing: .01em;
  background: linear-gradient(180deg, #F6E7C3 0%, #D7B97C 42%, #A9864A 62%, #EAD5A5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.livre .couv__sous-titre { font: italic 400 5.8cqw/1.2 var(--display); color: #EFE2C6; }
.livre .couv__ligne {
  font: 500 clamp(8px, 2.15cqw, 11px)/1.5 var(--texte-police);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(231, 216, 188, .82);
}
.couv__signet {
  position: absolute;
  top: 0;
  right: 17%;
  width: 5.2cqw;
  height: 24cqh;
  background: linear-gradient(90deg, #A9864A, #E4CB91 50%, #A9864A);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 87%, 0 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.couv__wordmark { width: 64cqw; height: auto; }
.couv__logo { width: 42cqw; height: auto; }
.livre .couv__site { font: 400 3.4cqw/1 var(--display); letter-spacing: .12em; color: #EFE2C6; }

.livre .couv__ligne2 {
  font: italic 400 4.6cqw/1.3 var(--display);
  color: #EFE2C6;
}
.couv__filet {
  display: block;
  width: 26%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 106, 0), rgba(201, 169, 106, .9), rgba(201, 169, 106, 0));
}

/* ------------------------------------------ couverture : la promesse, en platine */

.livre .couv__maison {
  font: 500 clamp(8px, 2.45cqw, 13px)/1.75 var(--texte-police);
  letter-spacing: .24em;
  text-transform: uppercase;
  max-width: 82%;
  text-wrap: balance;
}
.platine-texte {
  background: linear-gradient(180deg, #F4F5F7 0%, #C5C7CB 46%, #979AA1 64%, #E6E8EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.livre .couv__heritage {
  font: italic 400 clamp(13px, 4.9cqw, 26px)/1.3 var(--display);
  color: #EFE2C6;
  max-width: 84%;
  text-wrap: balance;
}
.livre .lp--couverture .couv__cadre { gap: 4.2cqh; }
.livre .lp--couverture .couv__wordmark { width: 66cqw; margin-bottom: 1.5cqh; }

/* -------------------------------------- page de gauche : la galerie d'art */

.livre .lp--galerie {
  background-color: #FFFEFB;
  padding: 17% 15% 15%;
  justify-content: center;
}
.livre .lp--galerie .tirage img {
  padding: 0;
  background: #ECE7DE;
  box-shadow: 0 24px 52px -30px rgba(30, 24, 18, .26);
}
.livre .galerie__cartel {
  margin-top: 5.5cqh;
  font: 500 clamp(8px, 2.3cqw, 11px)/1.6 var(--texte-police);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-page);
  text-align: center;
  max-width: 90%;
  text-wrap: balance;
}

/* ------------------------------ page de droite : le texte, bleu de la maison */

.livre .lp--nuit {
  background-color: #1A2F5E;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(120% 90% at 30% 18%, #264077 0%, #1A2F5E 55%, #142548 100%);
  color: #EFE2C6;
}
.livre .lp--nuit .lp__folio { color: rgba(231, 216, 188, .6); }
.or-texte {
  background: linear-gradient(180deg, #F6E7C3 0%, #D7B97C 42%, #A9864A 64%, #EAD5A5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.livre .lp--texte { padding: 12% 11% 11%; justify-content: center; }
.texte {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.livre .texte__surtitre {
  font: 500 clamp(8px, 2.5cqw, 12.5px)/1.4 var(--texte-police);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 3.2cqh;
}
.livre .lp h2.texte__titre {
  margin: 0;
  font: italic 400 clamp(28px, 12.4cqw, 64px)/1.04 var(--display);
  padding: 0 .06em .08em;
}
.texte__filet {
  display: block;
  width: 20%;
  height: 1px;
  margin: 2.2cqh 0 3.6cqh;
  background: linear-gradient(90deg, rgba(201, 169, 106, 0), rgba(201, 169, 106, .95), rgba(201, 169, 106, 0));
}
.texte__corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6cqh;
}
.livre .texte__p {
  font: 400 clamp(13px, 5.1cqw, 25px)/1.45 var(--display);
  color: #EFE2C6;
  max-width: 94%;
  text-wrap: balance;
}
.livre .texte__citation {
  font: italic 400 clamp(16px, 6.4cqw, 33px)/1.26 var(--display);
  color: #F8F0DD;
  max-width: 96%;
  text-wrap: balance;
}
.livre .texte__or {
  font: italic 400 clamp(24px, 10.8cqw, 54px)/1.06 var(--display);
  padding: 0 .08em .1em;
}
.livre .texte__signature {
  margin-top: 1.2cqh;
  font: italic 400 clamp(14px, 5.6cqw, 28px)/1.2 var(--display);
  color: #E9D3A0;
}
.livre .texte__fonction {
  margin-top: -1.4cqh;
  font: 500 clamp(8px, 2.3cqw, 11.5px)/1.4 var(--texte-police);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(231, 216, 188, .78);
}
.livre .texte__bouton { margin-top: 4cqh; font-size: clamp(10px, 2.5cqw, 13px); }

/* un petit tirage posé sous le texte, entier, à son format */
.livre .texte__photo { margin: 2.4cqh 0 0; display: grid; justify-items: center; }
.livre .texte__photo figcaption {
  margin-top: 1.3cqh;
  font: 500 clamp(7px, 2cqw, 10px)/1.4 var(--texte-police);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(231, 216, 188, .72);
}
.livre .texte__photo img {
  display: block;
  box-sizing: content-box;
  height: 20cqh;
  width: auto;
  max-width: 72cqw;
  aspect-ratio: var(--a, 1);
  object-fit: contain;
  border: 0;
  outline: 0;
  padding: 0;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .4);
  cursor: zoom-in;
}

/* -------------------------------------------- sans animation : l'album à plat */

.livre:not(.livre--3d) .livre__livre {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  justify-items: center;
  padding: 1rem var(--gouttiere) clamp(3rem, 8vw, 5rem);
}
.livre:not(.livre--3d) .lp {
  width: min(100%, 33rem);
  height: auto;
  aspect-ratio: .7;
  box-shadow: 0 1px 2px rgba(40, 30, 20, .12), 0 20px 44px -26px rgba(40, 30, 20, .5);
}

/* ------------------------------------------------------------ le livre en 3D */

.livre--3d .livre__piste { position: relative; }
.livre--3d .livre__scene {
  position: relative;
  height: calc(100vh - var(--entete, 0px));
  height: calc(100svh - var(--entete, 0px));
  overflow: hidden;
  overscroll-behavior: contain;
}
.livre--3d .livre__intro {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  padding-top: clamp(.9rem, 3.2vh, 2.4rem);
  padding-bottom: 0;
  will-change: opacity, transform;
}
.livre--3d .livre__plateau {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--fil-h, 72px);
  z-index: 1;
  display: grid;
  place-items: center;
}
.livre--3d .livre__livre {
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  perspective: calc(var(--pw) * 4.6);
  will-change: transform;
}
.livre--3d.livre--simple .livre__livre { width: var(--pw); }

/* tranches du livre : l'épaisseur des pages lues et à lire */
.livre--double .livre__livre::before,
.livre--double .livre__livre::after {
  content: "";
  position: absolute;
  top: .8%;
  bottom: .8%;
  background: repeating-linear-gradient(90deg, #F1EADB 0 1px, #D9CFBB 1px 2px);
  pointer-events: none;
}
.livre--double .livre__livre::before { right: 100%; width: var(--ep-g, 0px); border-radius: 3px 0 0 3px; }
.livre--double .livre__livre::after { left: 100%; width: var(--ep-d, 8px); border-radius: 0 3px 3px 0; }

.feuille {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.livre--simple .feuille { left: 0; }
.feuille.est-cachee { visibility: hidden; }

.feuille__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 22px 40px -26px rgba(28, 28, 32, .55);
}
.feuille__verso { transform: rotateY(180deg); border-radius: 3px 0 0 3px; }
.feuille__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* ombre de la reliure, et ombre portée pendant que la page tourne */
.feuille__recto::after {
  background:
    linear-gradient(90deg, rgba(60, 45, 25, .18) 0%, rgba(60, 45, 25, .05) 3%, rgba(60, 45, 25, 0) 8%),
    linear-gradient(270deg, rgba(20, 15, 10, calc(var(--s, 0) * .24)) 0%, rgba(20, 15, 10, 0) 65%);
}
.feuille__verso::after {
  background:
    linear-gradient(270deg, rgba(60, 45, 25, .18) 0%, rgba(60, 45, 25, .05) 3%, rgba(60, 45, 25, 0) 8%),
    linear-gradient(90deg, rgba(20, 15, 10, calc(var(--s, 0) * .24)) 0%, rgba(20, 15, 10, 0) 65%);
}
.livre--3d .lp { width: 100%; height: 100%; }

/* ------------------------------------------------------------- le fil d'argent */

.fil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: 62rem;
  margin-inline: auto;
  padding: .35rem var(--gouttiere) max(.9rem, env(safe-area-inset-bottom, 0px));
}
.fil[hidden] { display: none; }
.fil__ligne { position: relative; flex: 1; height: 46px; }
.fil__ligne::before,
.fil__rempli {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  height: 1.5px;
}
.fil__ligne::before { right: 0; background: var(--platine); }
.fil__rempli {
  width: 0;
  background: linear-gradient(90deg, var(--fil-brun), var(--dore) 55%, #B9BCC2);
}
.fil__noeud {
  position: absolute;
  top: 0;
  left: calc(var(--x, 0) * 100%);
  transform: translateX(-50%);
  min-width: 44px;
  min-height: 44px;
  padding: 0 .2rem;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  color: var(--texte);
  font: 500 .64rem/1.2 var(--texte-police);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fil__noeud::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ivoire);
  border: 1.5px solid var(--platine);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.fil__noeud.est-passe::before { border-color: var(--dore); background: var(--champagne-doux); }
.fil__noeud.est-actif::before {
  background: var(--dore);
  border-color: var(--dore);
  box-shadow: 0 0 0 4px rgba(201, 169, 106, .28);
}
.fil__noeud.est-actif { color: var(--nasir); }
.fil__num { display: none; }
.fil__nom { white-space: nowrap; }
.fil__fleche {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--platine);
  background: rgba(255, 255, 255, .65);
  color: var(--nasir);
  font: 400 1.5rem/1 var(--display);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.fil__fleche:hover:not(:disabled) { border-color: var(--dore); background: #fff; }
.fil__fleche:disabled { opacity: .35; cursor: default; }

@media (max-width: 720px) {
  .fil { gap: .5rem; }
}
/* sous 1000 px, les six noms se chevauchent (en espagnol dès 900 px) :
   seul le chapitre en cours garde le sien */
@media (max-width: 1000px) {
  .fil__noeud .fil__nom { display: none; }
  .fil__noeud.est-actif .fil__nom {
    display: block;
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------ la visionneuse */

.visionneuse {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: transparent;
}
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: rgba(12, 18, 34, .9); }
.visionneuse__figure {
  margin: 0;
  display: grid;
  gap: .9rem;
  justify-items: center;
  padding: 1rem;
}
.visionneuse__figure img {
  max-width: min(94vw, 1600px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .5);
}
.visionneuse figcaption {
  color: #EDE6D6;
  font: italic 400 1.15rem/1.4 var(--display);
  text-align: center;
  max-width: 40em;
}
.visionneuse__fermer {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: 1rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .2);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .livre__consigne::after { animation: none; }
}