/* ==========================================================================
   BaRez Vous - le mode bande dessinee
   Feuille a part : elle n est chargee que par bd.html
   ========================================================================== */

.salle{
  background:
    radial-gradient(circle at 20% 12%, rgba(240,196,101,.10), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(240,149,92,.10), transparent 55%),
    var(--fond);
  padding:clamp(1.4rem,3vw,2.6rem) 0 clamp(2rem,4vw,3.2rem);
}
.salle-tete{text-align:center;margin-bottom:clamp(1.2rem,3vw,2rem)}
.salle-tete h1{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:.25em}
.salle-tete p{color:var(--brun-2);max-width:52ch;margin-inline:auto}
.salle-tete .format-lien{margin-top:.6rem}
/* le bouton flottant de devis masquait le coin du livre : la BD a son propre appel en derniere planche */
.wa,.wa-bulle{display:none}
.haut{bottom:calc(1rem + env(safe-area-inset-bottom, 0px))}

/* --------------------------------------------------- le livre --------- */
/* un vrai livre ouvert : la page de gauche est fixe, celles de droite se tournent */
.livre{
  position:relative;margin-inline:auto;
  height:min(72vh,690px);aspect-ratio:142/100;max-width:94vw;
  perspective:2600px;
}
.livre::before{ /* la page de gauche */
  content:"";position:absolute;top:0;bottom:0;left:0;width:50%;
  border-radius:12px 3px 3px 12px;
  background:
    repeating-linear-gradient(115deg, rgba(26,20,16,.045) 0 2px, transparent 2px 9px),
    #E9DEC9;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.75), inset -16px 0 28px -22px rgba(0,0,0,.55);
}
.livre::after{ /* la reliure, au centre */
  content:"";position:absolute;top:1%;bottom:1%;left:50%;width:16px;margin-left:-8px;
  z-index:950;pointer-events:none;border-radius:3px;
  background:linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.42) 45%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.02));
}

.planche{
  position:absolute;top:0;bottom:0;left:50%;right:0;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.32,.06,.24,1);
}
.planche.tournee{transform:rotateY(-179deg)}

.recto,.verso{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:3px 12px 12px 3px;
  background:#F3EADA;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.75), inset -14px 0 26px -22px rgba(0,0,0,.5);
}
.verso{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(115deg, rgba(26,20,16,.045) 0 2px, transparent 2px 9px),
    #E9DEC9;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.75), inset 14px 0 26px -22px rgba(0,0,0,.5);
}
.verso::after{
  content:"BaRez Vous";position:absolute;inset:auto 0 1.4rem;text-align:center;
  font-family:var(--main);font-size:1.4rem;color:rgba(26,20,16,.22);
}

/* --------------------------------------------------- la planche ------- */
.recto{
  display:flex;flex-direction:column;gap:.55rem;
  padding:clamp(.7rem,2.2vw,1.1rem);
  color:#1A1410;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,20,16,.12) 1px, transparent 0);
  background-size:6px 6px;background-color:#F3EADA;
}
.numero{
  position:absolute;right:.7rem;bottom:.5rem;
  font-family:var(--sans);font-size:.68rem;font-weight:600;color:rgba(26,20,16,.4);
}

/* les cases */
.case{
  position:relative;border:3px solid #1A1410;border-radius:3px;background:#FBF6EC;
  overflow:hidden;box-shadow:3px 3px 0 rgba(26,20,16,.85);
  display:flex;align-items:center;justify-content:center;
}
.case.grande{flex:1 1 auto;min-height:0}
.case.moyenne{flex:0 0 46%}
.case img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(1.15)}
/* la photo passee en BD est deja contrastee : pas de filtre en plus, trame plus discrete */
.scene-photo img{filter:none;object-position:center 40%}
.scene-photo .voile{opacity:.22}
.case svg{width:100%;height:100%;display:block}
.couv .dessin svg{height:auto}
.case .voile{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(26,20,16,.16) 1px, transparent 0);background-size:5px 5px;pointer-events:none}
.duo{display:flex;gap:.55rem;flex:0 0 auto}
.duo .case{flex:1 1 50%}

/* le recitatif, en haut a gauche d une case */
.recit-bd{
  position:absolute;top:0;left:0;max-width:74%;
  background:#F2D99A;border-right:3px solid #1A1410;border-bottom:3px solid #1A1410;
  padding:.42rem .7rem;font-family:var(--sans);font-size:clamp(.66rem,1.7vw,.82rem);
  font-weight:500;line-height:1.35;
}

/* les bulles */
.bulle-bd{
  position:absolute;background:#FFFDF7;border:3px solid #1A1410;border-radius:18px;
  padding:.5rem .8rem;font-family:var(--main);font-weight:700;
  font-size:clamp(.92rem,2.6vw,1.22rem);line-height:1.12;max-width:62%;
  box-shadow:2px 2px 0 rgba(26,20,16,.8);
}
.bulle-bd::after{
  content:"";position:absolute;width:0;height:0;
  border:11px solid transparent;border-top-color:#1A1410;
}
.bulle-bd::before{
  content:"";position:absolute;width:0;height:0;z-index:2;
  border:8px solid transparent;border-top-color:#FFFDF7;
}
.bulle-bd.bg{left:5%;top:6%}
.bulle-bd.bg::after{left:22px;bottom:-22px}
.bulle-bd.bg::before{left:25px;bottom:-14px}
.bulle-bd.bd{right:5%;bottom:8%}
.bulle-bd.bd::after{right:22px;bottom:-22px}
.bulle-bd.bd::before{right:25px;bottom:-14px}
.bulle-bd.hd{right:5%;top:6%}
.bulle-bd.hd::after{right:22px;bottom:-22px}
.bulle-bd.hd::before{right:25px;bottom:-14px}
.bulle-bd.bas{left:5%;bottom:8%}
.bulle-bd.bas::after{left:22px;bottom:-22px}
.bulle-bd.bas::before{left:25px;bottom:-14px}

/* les onomatopees */
.sfx{
  position:absolute;font-family:"Bangers","Caveat",cursive;
  font-size:clamp(2rem,7vw,3.4rem);line-height:.9;letter-spacing:.02em;
  color:#F0C465;-webkit-text-stroke:3px #1A1410;paint-order:stroke fill;
  text-shadow:4px 4px 0 rgba(26,20,16,.9);transform:rotate(-9deg);
}
.sfx.rouge{color:#E8623A}
.sfx.d{right:6%;top:12%}
.sfx.g{left:6%;top:14%;transform:rotate(7deg)}
.sfx.c{left:50%;top:38%;transform:translate(-50%,-50%) rotate(-6deg)}

/* la couverture */
.couv{
  color:#F8F3E9;align-items:center;justify-content:center;text-align:center;
  gap:.2rem;padding:clamp(1rem,4vw,2rem);
  background-color:#2A3833;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0),
    linear-gradient(165deg,#3A4A44,#222D28);
  background-size:7px 7px, cover;
}
.couv .bandeau{
  display:inline-block;background:#E8623A;color:#FFF;border:3px solid #1A1410;
  font-family:"Bangers","Caveat",cursive;letter-spacing:.06em;
  font-size:clamp(.8rem,2.4vw,1rem);padding:.2rem .9rem;transform:rotate(-2deg);
}
.couv h2{
  font-family:"Bangers","Caveat",cursive;font-weight:400;
  font-size:clamp(2.4rem,9vw,4rem);line-height:.92;margin:.4rem 0 .1rem;
  color:#F0C465;-webkit-text-stroke:3px #1A1410;paint-order:stroke fill;
  text-shadow:5px 5px 0 rgba(26,20,16,.85);
}
.couv .sous{font-family:var(--main);font-size:clamp(1.1rem,3.4vw,1.5rem);color:#F8F3E9;margin:0}
.couv .dessin{width:min(86%,340px);margin:.6rem auto 0}

.couv .episode{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,243,233,.72);margin:.6rem 0 0}
.couv .invite{font-family:var(--main);font-size:1.15rem;color:#F0C465;margin:.5rem 0 0}

/* la derniere planche */
.finale{align-items:center;justify-content:center;text-align:center;gap:.5rem}
.finale h2{font-family:"Bangers","Caveat",cursive;font-weight:400;font-size:clamp(2rem,7vw,3rem);line-height:.95;color:#1A1410;margin:0}
.finale p{max-width:32ch;margin:0;font-size:clamp(.9rem,2.3vw,1rem);color:#4A3228}
.finale .btn{border-color:#1A1410;background:#1A1410;color:#F8F3E9;margin-top:.4rem}
.finale .btn:hover{background:#E8623A;border-color:#1A1410}

/* --------------------------------------------------- la navigation ---- */
/* les zones de clic ne couvrent que les bords : le milieu de la page reste
   libre pour ce qui s y trouve (bouton video, lien de la derniere planche) */
.zone-clic{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:900;pointer-events:none}
.zone-clic button{flex:0 0 24%;pointer-events:auto;background:none;border:0;cursor:pointer;color:transparent}
.zone-clic button:first-child{cursor:w-resize}
.zone-clic button:last-child{cursor:e-resize}

.commandes{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:clamp(1rem,2.6vw,1.6rem);
}
.commandes button{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--trait);background:var(--carte);color:var(--encre);
  display:grid;place-items:center;font-size:1.1rem;transition:.25s var(--gout);
}
.commandes button:hover:not(:disabled){background:var(--dore);color:var(--bois);border-color:var(--dore)}
.commandes button:disabled{opacity:.32;cursor:default}
.compteur{font-family:var(--serif);font-size:1.05rem;min-width:5.5rem;text-align:center;color:var(--brun-2)}
.aide-bd{text-align:center;font-size:.84rem;color:var(--brun-pale);margin:.9rem 0 0}

/* sous 760 px, on lit page par page : une double page serait illisible */
@media (max-width:759px){
  .livre{height:min(66vh,560px);aspect-ratio:71/100;max-width:96vw}
  .livre::before{display:none}
  .livre::after{left:0;margin-left:-7px;width:14px;
    background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.04))}
  .planche{left:0}
}
@media (max-width:600px){
  .case{border-width:2.5px;box-shadow:2px 2px 0 rgba(26,20,16,.85)}
  .bulle-bd{border-width:2.5px;padding:.4rem .62rem;max-width:70%}
}
@media (prefers-reduced-motion:reduce){
  .planche{transition:none}
}

/* --------------------------------------------------- planches video ----
   La video remplit la case, l affiche sert d image fixe. Les bulles et le
   recitatif s effacent pendant la lecture et reviennent a la pause.
   ---------------------------------------------------------------------- */
.scene-video{background:#1A1410}
.scene-video video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 85%;background:#000;
}
.scene-video .voile{z-index:2;transition:opacity .35s}
.scene-video .recit-bd,.scene-video .bulle-bd{z-index:3;transition:opacity .35s}
.etiquette-bd{
  position:absolute;right:-6px;top:-8px;z-index:3;
  background:#F0C465;color:#1A1410;border:3px solid #1A1410;
  font-family:"Bangers","Caveat",cursive;letter-spacing:.06em;font-size:1rem;
  padding:.08rem .6rem;transform:rotate(6deg);box-shadow:2px 2px 0 rgba(26,20,16,.85);
  transition:opacity .35s;
}
.lecture-bd{
  position:absolute;z-index:4;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;
  border-radius:50%;background:#E8623A;border:3px solid #1A1410;
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:3px 3px 0 rgba(26,20,16,.85);
  transition:transform .25s var(--gout),opacity .25s;
}
.lecture-bd svg{width:34px;height:34px;fill:#F8F3E9;margin-left:5px}
.lecture-bd:hover,.lecture-bd:focus-visible{transform:scale(1.1) rotate(-6deg)}
.scene-video.joue{cursor:pointer}
.scene-video.joue .lecture-bd,.scene-video.joue .recit-bd,.scene-video.joue .bulle-bd,
.scene-video.joue .etiquette-bd,.scene-video.joue .voile{opacity:0;pointer-events:none}

/* --------------------------------------------------- planches qui reagissent */
.scene-de{cursor:pointer}
.de-bd{transform-box:fill-box;transform-origin:center}
.scene-de.roule .de-bd{animation:deTourne .72s cubic-bezier(.3,.7,.3,1)}
@keyframes deTourne{
  0%{transform:rotate(-13deg) scale(1)}
  45%{transform:rotate(160deg) scale(.82)}
  100%{transform:rotate(347deg) scale(1)}
}
.scene-de .bulle-bd{transition:transform .2s}
.scene-de.roule .bulle-bd{transform:scale(1.05)}

.scene-soir{cursor:pointer}
.ampoules-bd circle{transition:filter .3s}
.scene-soir.allume .ampoules-bd circle{
  filter:drop-shadow(0 0 6px #F0C465) drop-shadow(0 0 14px rgba(240,196,101,.7));
  animation:ampouleBd 1.1s ease-in-out infinite alternate;
}
.scene-soir.allume .ampoules-bd circle:nth-child(2n){animation-delay:-.4s}
.scene-soir.allume .ampoules-bd circle:nth-child(3n){animation-delay:-.8s}
@keyframes ampouleBd{from{opacity:1}to{opacity:.55}}
.scene-soir .sfx{transition:transform .3s var(--gout)}
.scene-soir.allume .sfx{transform:translate(-50%,-50%) rotate(-6deg) scale(1.18)}

@media (prefers-reduced-motion:reduce){
  .scene-de.roule .de-bd,.scene-soir.allume .ampoules-bd circle{animation:none}
}