/* Body */



:root {
	font-family: Arial, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #0c0c0c;
}

body {
	min-height: 100vh;
    background-image: url("../images/sweb/fondGris.png");
    background-attachment: fixed;
    background-size:cover;
    background-color: #bababa;
  
}


/* texte */

p {  

text-shadow: 0.3px 0.3px 0 #ffffff;
font-weight: 600;

margin:0;
white-space: normal;       /* Retour à la ligne automatique standard */
overflow-wrap: break-word; /* Coupe les mots trop longs proprement */
display: inline-block; /* Nécessaire pour que le transform fonctionne correctement */
transform: scaleY(0.85); /* 0.5 écrase le texte à 50% de sa hauteur originale */
transform-origin: top;  /* Ancre la déformation en haut pour éviter le décalage vers le bas */  
vertical-align: top;    /* Aligne le texte avec la ligne de base */
}

.text-intro {

font-size: 3rem;
text-align: center;
margin:0;
color: #0c0c0c;
z-index: 5;
margin-bottom: 4rem;

}







.titre {  
text-shadow: 0.5px 0.5px 0 #ffffff;
text-align: right;
font-weight: 600;
font-size: 3rem;
line-height: 2.5rem;
margin-top: 0px; margin-bottom: 0px;

}
.autor {
text-shadow: 0.5px 0.5px 0 #ffffff;
text-align: right;
font-weight: 600;
font-size: 2rem;
line-height: 2.5rem;
margin-top: 0px; margin-bottom: 0px;
}
.impression {

color: #000000;
font-size: 1.5rem;
line-height: auto;

}

.details {

color: #545454;
font-size: 1.5rem;
line-height: auto;

}
img { display: block; max-width: 100%; }


/* page d'accueil */

.hero-accueil {
   
    min-height: 100vh;
    margin-bottom:15%;
    
    /* Optionnel : Garde l'image fixe pendant le défilement (effet Parallaxe simple) */
    /* background-attachment: fixed; */ 
    
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: solid 0px black;
    
  
  }

  .img-accueil {
   
    position:absolute;
    z-index: 3;
     min-width: 100vh;
     height:100vh;
     
}
  .fleche {
    position: absolute;
    bottom: 0.5rem; /* Ajustez selon vos besoins */
    width: 50px; /* Ajustez la taille de la flèche */
    height: auto;
    z-index: 5;
  }

/* Bouton lien : info / Archive et Logo */

.fixed-logo { 
    position:fixed; 
    top:0.3rem; 
    right:0.3rem; 
    width:100px; 
    height:auto; 
    max-width:15%; 
    margin:0; 
    padding:0.1rem; 
    z-index:100; 
}

.fixed-info { 
    position:fixed; 
    top:0; 
    left:5px; 
    margin:0; 
    padding: 0.5rem 0.2rem; 
    background:transparent; 
    color:#000;  
    text-shadow: 0.5px 0.5px 0 #ffffff; 
    text-decoration:none; 
    font-weight:600; 
    font-size: 1.25rem; 
    z-index:120; }

.fixed-archive { 
    position:fixed; 
    bottom:0; 
    left:5px; 
    margin:0; 
    padding:0.5rem 0.2rem; 
    background:transparent; 
    color:#000;  
    text-shadow: 0.5px 0.5px 0 #ffffff; 
    text-decoration:none; 
    font-weight:600; 
    font-size: 1.25rem; 
    z-index:110; 
}

.fixed-archive:hover, .fixed-info:hover { 
    background:transparent; 
    color:#ffffff; 
    text-shadow: 0.5px 0.5px 0 #000000; 
}

/* lien */
.main-nav a {
	color: #cbd5e1;
	margin-left: 1.5rem;
	transition: color 0.2s ease;
}

.main-nav a:hover {
	color: #fff;
}


.a:hover {
    color: #fff;
    text-shadow: 0.5px 0.5px 0 #000000;
}   



/* Bloc nouveau livre */
.container {

	width: 100%;
	max-width: 100%;
	margin: 0 auto; 
    margin-bottom: 15%; 
	border: 0px solid rgb(149, 42, 42);
    display: flex;
    flex: 1 1 320px;  
    justify-content:right;
    align-items:center;
    flex-flow: row wrap; 
    
    
}


/* Viewer row and viewer */
.viewer { 
    flex: 1 2 920px; 
    max-width: 1200px; 
    height:fit-content; 
    max-height:auto; 
    position: relative; 
    display:block; 
    width:auto; 
    margin-bottom: 0.5rem;
    border: 0px solid rgb(251, 255, 2);
   min-width: 0; 
    overflow: hidden
    
}

.viewer-main { 
    display:block; 
    width:100%; 
    height: 100%;
    object-fit:contain; 
    border: 0px solid rgb(225, 0, 255); }

.viewer-text { 
    flex: 1 1 400px;
    min-width: auto;
    max-width: 1150px;
    padding:0.3rem 0.3rem 0.3rem 3rem;  
    border: 0px solid #656565; 
    text-align:right;
    font-size: 1.5rem;
    overflow-wrap: break-word; 
    word-wrap: break-word;
 }



/* Viewer navigation buttons (overlay left/right) */
.viewer-button { 
    position:absolute; 
    top:50%;
    transform:translateY(-50%); 
    width:50%; 
    block-size:100%;
    display:grid; 
    place-items:inherit; 
    border:0px solid rgba(0,0,0,0.06); 
    background:transparent; 
    color:#000; 
    cursor:pointer; 
    z-index:5; }

.viewer-button.prev { left:0rem; }
.viewer-button.next { right:0rem; }
.viewer-button:hover:not(:disabled) { background:transparent; transform: translateY(-50%) scale(1); }
.viewer-button:disabled { opacity:0; cursor:default; }



/* bouton paypal */

.buy
{   margin: 0 0 0 auto;
    background:transparent;
    width: 100px;   
    cursor:pointer;
    border: 0px solid rgb(149, 42, 42);
} 
.buy:hover {
  filter: invert(100%);
    cursor:pointer;
}

table {
    display: flex;
    flex-direction: row;
    margin-right: 0;
    margin-left: auto;
    padding: 0;
    justify-content: right;
    align-items: right;
    width: 100%;
 
}
       
/* bas de page */
.footer {
    
    margin-top: 15%;
    text-align: center;
    height: 40px;
    bottom: 0;
  padding: 0;
    background-image: url("../images/sweb/mir.png");
    background-attachment: repeat;
    background-size:auto;  
    
}


@media screen and (max-width:1024px) {
	.viewer-button { width:2.8rem; height:2.8rem; }
	.viewer-button.prev { left:0.35rem; }
	.viewer-button.next { right:0.35rem; }
	.fixed-logo { max-width:20%; }
	.fixed-info, .fixed-archive { padding:0.5rem 0.2rem; font-size:1.25rem;}
    .viewer { flex: 0 0 auto; 
    max-width: 1024px; 
    height:fit-content; 
    max-height:auto;
    position: relative; 
    display:block; 
    width:100%;  }
	.viewer-text { width: 100%; margin-top: 0.5rem;}
    
}

@media screen and (max-width:640px) {
	.viewer-button { width:2.8rem; height:2.8rem; }
	.viewer-button.prev { left:0.35rem; }
	.viewer-button.next { right:0.35rem; }
	.fixed-logo { max-width:20%; }
	.fixed-info, .fixed-archive { padding:0.5rem 0.2rem; font-size:1.25rem;}
    .viewer { flex: 1 1 100%; max-width: 100%; }
	.viewer-text { width: 100%; margin-top: 0.5rem;}
    .titre { font-size:2.25rem; line-height: 1.5rem; }
	.autor { font-size:1.75rem; line-height: 1.5rem; }
	.impression { font-size:1.25rem; line-height: auto; }
	.details { font-size:1.25rem; line-height: auto; }  
}