/* ==========================================================================
   « Pizza dans le ciel » — socle
   Variables, remise à zéro, typographie, utilitaires d'animation.
   Même méthode que le site du studio : tout le mouvement se coupe d'un coup
   quand la machine demande moins d'animations (.sobre).
   ========================================================================== */

:root{
  /* La palette est celle du jeu, relevée dans son code — pas une approximation. */
  --papier:      #f7f0e2;
  --papier-c:    #ece0c9;
  --papier-o:    #dbcbab;
  --kraft:       #d9c9a8;
  --encre:       #4a4038;   /* corps de texte    — 9,4:1 sur le papier */
  --encre-doux:  #6b5d50;   /* légendes, notes   — 5,6:1 */
  --terre:       #c9553c;
  --terre-f:     #a03f2b;
  --or:          #d8ab5c;
  --sauge:       #8fa882;
  --ciel:        #bfd8e8;
  --ciel-f:      #5d87a6;
  --nuit:        #241f1b;   /* le mur des boss */
  --nuit-2:      #322a24;

  --titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --texte: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --large: 1180px;
  --gouttiere: 22px;
  --rythme: clamp(64px, 9vw, 116px);   /* respiration verticale entre sections */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--texte);
  font-size:17px;
  line-height:1.62;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:900;line-height:1.04;margin:0;letter-spacing:.01em}
p{margin:0}
button{font:inherit}

.dedans{width:100%;max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere)}
.papier-grain{background-image:radial-gradient(rgba(74,64,56,.055) 1px,transparent 1px);background-size:14px 14px}

/* Le focus reste visible : on ne le supprime jamais, on le dessine. */
:focus-visible{outline:3px solid var(--terre);outline-offset:3px;border-radius:4px}

.lecteur-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------- les boutons */
.bouton{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;font-weight:600;cursor:pointer;
  background:var(--encre);color:var(--papier);
  box-shadow:0 3px 0 rgba(36,31,27,.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bouton:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(36,31,27,.35)}
.bouton:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(36,31,27,.35)}
.bouton--terre{background:var(--terre);box-shadow:0 3px 0 var(--terre-f)}
.bouton--terre:hover{background:var(--terre-f)}
.bouton--fantome{background:rgba(247,240,226,.6);color:var(--encre);border:1px dashed rgba(74,64,56,.45);box-shadow:none;cursor:default}
.bouton--fantome:hover{transform:none;box-shadow:none}
.bouton b{font-family:var(--titre);font-weight:700;font-size:16px;line-height:1.1}
.bouton span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.78;font-weight:400}
.bouton svg{width:20px;height:20px;flex:none;fill:currentColor}

/* ------------------------------------------------- utilitaires d'entrée
   Ces trois classes sont posées dans le HTML ; site.js les anime au moment
   où elles entrent dans l'écran. Sans JavaScript, tout reste visible. */
.entre{opacity:0;transform:translateY(26px)}
.entre--gauche{opacity:0;transform:translateX(-34px)}
.entre--droite{opacity:0;transform:translateX(34px)}
.js-inactif .entre,.js-inactif .entre--gauche,.js-inactif .entre--droite{opacity:1;transform:none}

/* Mouvement réduit : plus une seule animation, et tout est montré d'emblée. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entre,.entre--gauche,.entre--droite{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.sobre .entre,.sobre .entre--gauche,.sobre .entre--droite{opacity:1;transform:none}

/* ------------------------------------------------------------ la barre */
.barre{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  padding:12px max(var(--gouttiere),env(safe-area-inset-right)) 12px max(var(--gouttiere),env(safe-area-inset-left));
  background:rgba(247,240,226,0);
  border-bottom:1px solid rgba(74,64,56,0);
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.barre.posee{
  background:rgba(247,240,226,.93);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:rgba(74,64,56,.14);
}
.barre-nom{font-family:var(--titre);font-weight:900;font-size:19px;text-decoration:none;margin-right:auto;color:var(--encre)}
.barre-nom em{font-weight:500;font-style:italic;color:var(--terre)}
.barre-liens{display:flex;gap:24px;align-items:center}
.barre-liens a{color:var(--encre-doux);text-decoration:none;font-size:15px;position:relative}
.barre-liens a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--terre);transition:right .25s ease}
.barre-liens a:hover::after,.barre-liens a:focus-visible::after{right:0}
.barre-liens a:hover,.barre-liens a:focus-visible{color:var(--encre)}
.barre-langue{font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--encre-doux);border:1px solid rgba(74,64,56,.3);padding:5px 10px;border-radius:999px}
.barre-langue:hover{color:var(--encre);border-color:var(--encre)}
@media (max-width:880px){ .barre-liens a:not(.barre-langue){display:none} }