@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&family=Indie+Flower&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* =========================
BACKGROUND SCRAPBOOK
========================= */

body{

font-family:'Press Start 2P',cursive;

background:
radial-gradient(circle at 20% 20%, #f7e7ec 0%, transparent 40%),
radial-gradient(circle at 80% 30%, #ead4da 0%, transparent 40%),
linear-gradient(180deg,#e9c6cf,#c79aa7);

min-height:100vh;

display:flex;
justify-content:center;

padding:60px 20px;

overflow-x:hidden;

}

/* scrapbook border */

body::before{

content:"";

position:fixed;
inset:0;

border:20px solid #fff5f8;

pointer-events:none;

box-shadow:
inset 0 0 20px rgba(0,0,0,0.1);

clip-path: polygon(
5% 0%,95% 0%,100% 5%,100% 95%,95% 100%,5% 100%,0% 95%,0% 5%
);

}

/* CRT scanlines */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

z-index:9999;

background:
repeating-linear-gradient(
to bottom,
transparent,
transparent 2px,
rgba(0,0,0,0.12) 3px
),
linear-gradient(
90deg,
rgba(255,0,0,0.015),
rgba(0,255,0,0.015),
rgba(0,0,255,0.015)
);

background-size:
100% 3px,
3px 100%;

mix-blend-mode:overlay;

}

/* =========================
PAGE
========================= */

.scrapbook-page{

width:100%;
max-width:950px;

display:flex;
flex-direction:column;

gap:50px;

}

/* =========================
HEADER
========================= */

.vibrant-header{

backdrop-filter:blur(10px);

background:rgba(255,255,255,0.25);

border:2px solid rgba(255,255,255,0.6);

padding:30px;

border-radius:6px;

box-shadow:
0 10px 40px rgba(0,0,0,0.15);

text-align:center;

animation:float 6s ease-in-out infinite;

}

.pop-title{

font-size:18px;

color:white;

text-shadow:
2px 2px 0 rgba(0,0,0,0.4);

}

/* =========================
INTRO
========================= */

.trip-intro{

backdrop-filter:blur(10px);

background:rgba(255,255,255,0.2);

border:2px solid rgba(255,255,255,0.4);

border-radius:6px;

padding:30px;

box-shadow:
0 8px 30px rgba(0,0,0,0.15);

}

.intro-content-wrapper{

display:flex;
gap:30px;
align-items:center;

}

.map-frame{

background:white;

padding:12px;

box-shadow:
5px 5px 0 rgba(0,0,0,0.2);

transform:rotate(-3deg);

}

.map-frame img{

width:240px;

}

/* text */

.intro-text h2{

font-family:'Press Start 2P';

font-size:15px;

color:#ff4b7d;

margin-bottom:10px;

}

.intro-text p{

font-family:'Share Tech Mono';

font-size:15px;

line-height:1.7;

color:#ffffff;

text-shadow:1px 1px 3px rgba(0,0,0,0.6);

}

/* =========================
CITY GRID
========================= */

.city-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:40px;

}

/* polaroid */

.city-card{

position:relative;

background:rgba(255,255,255,0.18);

backdrop-filter:blur(10px);

border:2px solid rgba(255,255,255,0.5);

padding:14px 14px 40px;

cursor:pointer;

transition:all .35s cubic-bezier(.25,.8,.25,1);

box-shadow:
0 10px 30px rgba(0,0,0,0.2);

}

.city-card:nth-child(odd){

transform:rotate(-2deg);

}

.city-card:nth-child(even){

transform:rotate(2deg);

}

/* image */

.city-card img{

width:100%;

height:200px;

object-fit:cover;

border:3px solid white;

}

/* name */

.city-card span{

position:absolute;

bottom:12px;
left:0;

width:100%;

text-align:center;

font-size:11px;

color:white;

text-shadow:1px 1px 0 black;

}

/* tape */

.tape{

position:absolute;

top:-10px;
left:40%;

width:70px;
height:22px;

background:#ffe600;

border:2px solid white;

transform:rotate(-8deg);

box-shadow:
3px 3px 0 rgba(0,0,0,0.2);

}

/* hover */

.city-card:hover{

transform:scale(1.06) rotate(0deg) translateY(-12px);

box-shadow:
0 20px 60px rgba(0,0,0,0.3);

z-index:10;

}

/* animation */

@keyframes float{

0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}

}

/* responsive */

@media(max-width:700px){

.intro-content-wrapper{
flex-direction:column;
}

}



/* ================================
MODAL (pour city journal)
================================ */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 1000;
}

/* modal card */
.modal-content {
  width: 100%;
  max-width: 850px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.4);
  padding: 40px;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: pop .4s ease;
}

@keyframes pop {
  0% { transform: scale(.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* container des entrées */
.entries-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.scrapbook-entry {
  display: flex;
  align-items: center;
  gap: 40px;
}

.entry-photo {
  flex-shrink: 0;
  background: white;
  padding: 10px;           /* espace autour de la photo */
  border: 3px solid white; /* bordure */
  box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
}

/* image à gauche par défaut */
.entry-photo img {
  width: 260px;
  display: block;
}

/* texte */
.entry-text {
  flex: 1;
  font-family:'Share Tech Mono';
  font-size: 17px;
  line-height: 1.6;
  color:#ffffff;
  text-shadow:1px 1px 3px rgba(0,0,0,0.6);
}

/* UNE entrée sur deux inversée */
.scrapbook-entry:nth-child(even) {
  flex-direction: row-reverse;
}