/* style.css - Pain de vie | Parole de vie - Version finale propre et centrée */

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

body {
  font-family: Georgia, serif;
  color: #fffef9;
  background: #000;
  overflow-x: hidden;
  text-align: center;
  min-height: 100vh;
  position: relative;
}

/* Fond + symboles (comme ta version d'origine) */
.fond {
  position: fixed;
  inset: 0;
  background: url("foi.jpg") center/cover no-repeat;
  z-index: 1;
}

.croix {
  position: fixed;
  inset: 0;
  background: url("croix.png") center/cover no-repeat;
  filter: blur(4px);
  opacity: 0.75;
  z-index: 2;
  animation: zoom-in-zoom-out 12s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

.cloud3 {
  position: fixed;
  inset: 0;
  background: url("foi-rayon.png") center/cover no-repeat;
  filter: blur(6px);
  opacity: 0.55;
  z-index: 3;
  animation: rotation 90s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

/* Conteneur global */
.container {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 12px;
}

/* Texte d'accueil : arrive au milieu puis remonte vite en haut */
.welcome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 90%;
  max-width: 800px;
  text-align: center;
  opacity: 0;
  animation: appear 0.6s forwards 0.3s, moveUp 0.7s forwards 0.9s;
}

@keyframes appear {
  to { opacity: 1; }
}

@keyframes moveUp {
  to {
    top: 2%;
    transform: translate(-50%, 0);
  }
}

/* Ombre + lisibilité renforcée sur tous les textes */
.welcome h1, .welcome h2, .pain1, .pain2 h2, .pain2 p, .win7-btn {
  text-shadow: 
    1px 1px 1px #000, 
    -1px -1px 3px #000,
    0 0 7px #000,
    0 0 7px #111,
    0 0 7px #fff,
    0 0 7px #eee;
  
  padding: 12px 18px;
  border-radius: 12px;
  backdrop-filter: blur(3px);
  margin: 8px auto;
  max-width: 95%;
}

/* Verset : reste au milieu, apparaît après que l'accueil est monté */
.verse-container {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;               /* plus de margin fixe, centrage auto */
  max-width: 90%;
  width: 100%;
  opacity: 0;
  animation: fadeIn 1s forwards 2.8s;
  text-align: center;
  z-index: 15;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Bouton + Prière + Footer : apparaissent en bas, centrés */
.action-zone {
  margin-top: auto;
  width: 100%;
  max-width: 600px;
  text-align: center;
  opacity: 0;
  animation: fadeIn 1s forwards 4s;
}

.win7-btn {
  display: inline-block;
  margin: 20px auto;
  padding: 14px 28px;
  background: linear-gradient(#9370db, #7b68ee);
  border: 1px solid #5a4ab8;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.prayer {
  background: rgb(255 255 255 / 44%);
  padding: 20px;
  border-radius: 12px;
  color: #222;
  margin: 20px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

footer {
  padding: 15px;
  font-size: 0.85rem;
  opacity: 0.8;
  padding: 12px 18px;
  border-radius: 12px;
  backdrop-filter: blur(3px);
  margin: 8px auto;
  max-width: 95%;
}

@keyframes zoom-in-zoom-out {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

.verse-link {
  color: #ffd86b;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.verse-link:hover {
  opacity: 0.85;
}


@media (max-width: 768px) {
  html, body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    text-align: center;
  }

  /* Fond OK, mais on évite les effets trop lourds sur mobile si besoin */
  .fond,
  .croix,
  .cloud3 {
    position: fixed;
    inset: 0;
    background-position: center center;
    background-size: cover;
  }

  .container {
    position: relative;
    z-index: 10;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 12px 30px;
    gap: 18px;
  }

  /* L'accueil ne doit plus flotter au-dessus de tout */
  .welcome {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    animation: none;
    margin-top: 8px;
    margin-bottom: 6px;
  }

  .welcome h1,
  .welcome h2 {
    padding: 4px 10px;
    margin: 4px auto;
    max-width: 100%;
    font-size: 1.25rem;
    line-height: 1.2;
    text-shadow:
      1px 1px 3px #000,
      -1px -1px 3px #000,
      0 0 8px #000,
      0 0 10px #111;
  }

  .welcome h2 {
    font-size: 1.05rem;
  }

  /* Le verset repasse dans le flux normal */
  .verse-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    animation: none;
    margin: 10px auto 0;
    padding: 0 4px;
    z-index: 15;
  }

  .pain1 {
    font-size: 15px;
    line-height: 1.15;
    padding: 6px 10px;
    margin: 0 auto;
    max-width: 100%;
    text-shadow:
      1px 1px 3px #000,
      -1px -1px 3px #000,
      0 0 10px #000,
      0 0 12px #111;
    word-break: break-word;
  }

  /* Zone du bas = bloc normal scrollable */
  .action-zone {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    animation: none;
    text-align: center;
  }

  .win7-btn {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 10px auto 14px;
    padding: 12px 18px;
    font-size: 0.98rem;
    line-height: 1.2;
    text-align: center;
  }

  .prayer {
    width: 100%;
    max-width: 100%;
    padding: 40px 30px;
    margin: 0 auto 14px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  }

  .prayer h2 {
    font-size: 1.4rem;
    line-height: 1.1;
    margin-bottom: 8px;
    color: #222;
    text-shadow: none;
  }

  .prayer p {
    font-size: 1rem;
    line-height: 1.45;
    color: #222;
    text-shadow: none;
  }

  footer {
    position: relative;
    padding: 10px 8px 20px;
    font-size: 0.82rem;
    line-height: 1.35;
    opacity: 1;
    margin-top: 6px;
    text-shadow:
      1px 1px 2px #000,
      -1px -1px 2px #000,
      0 0 6px #000;
  }

  footer a {
    color: #9ecbff;
  }
}

/*

    @media (min-width: 1200px){
    body {
       
        height: 100%;
		display: block; 
		text-align: center;  
        overflow-x: hidden;
        overflow-y: hidden;  
		z-index: 1;
		margin: 0px;  
    }
	 }
	 
	 @media (max-width: 500px){
    body {
       
        height: 100%;
		display: block; 
		text-align: center;  
        overflow-x: hidden;
        overflow-y: scroll;  
		z-index: 1;
		margin: 0px;  
    }
	 }
	
	
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
    
    
	.fond {
        width: 100%;  
		height: 100%;
		margin-left: auto;
        margin-right: auto;
        display: block;
		overflow: hidden;
		position: absolute;
		background: url("foi.jpg"); 
        background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		animation: fadein 5s;    
		z-index: 2;
        margin-top: -21px;
		
    }
	
	.cloud1 {
        background: url("http://pngimg.com/uploads/cloud/cloud_PNG24.png");
        width: 100%;
        height: 100%;
        position: absolute;
        background-repeat: no-repeat;
        animation: move 20s infinite;
		z-index: 2;
    }
    
    .croix {
        background: url("croix.png");
        width: 99%;
        height: 100%;
		margin-left: auto;
        margin-right: auto;
		background-size: cover;
        position: absolute;
        background-repeat: no-repeat;
		background-position: top center;
	    animation: zoom-in-zoom-out 7s ease infinite; 
		filter: blur(4px);
		z-index: 3; 
    }
    
    .cloud3 {
        background: url("foi-rayon.png");
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;		
        position: absolute;
		background-size: cover; 
        background-repeat: no-repeat;
		background-position: top center;
		animation: fadein 7s;
        animation: rotation 77s infinite;
        filter: blur(4px);
		z-index: 4;
    }
	
	
	.cercle {
        background: url("cercles.png");
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;		
        position: absolute;
		background-size: contain; 
        background-repeat: no-repeat;
		background-position: top center;
		animation: fadein 7s;
        animation: rotation 40s infinite;
        filter: blur(21px);
		z-index: 4;
    }
	
	.pp {
         
		font-style: italic;
		font-weight: bold;
		}
	
	.pain {
    display: block;
    position: relative;
	color: #fefdfa;
	text-shadow: #000000 0px 1px 5px;
    width: 100%;
    height: 100%;
    z-index: 777;
	animation: fadein 5s;
    }
	
	.pain1 {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 777;
	animation: fadein 7s;
	text-shadow: #ffffff 0px 1px 10px;  
    padding: 33px 0px 33px 0px;      	  
    }
	
	.pain2 {
    display: block;
    position: relative;
	margin-top: 300px;  
    width: 100%;
    height: 100%;
    z-index: 777;
	text-shadow: #ffffff 0px 1px 10px;  
	animation: fadein 11s;
      	  
    }
	
	.pain3 {
    display: block;
    position: relative;
    width: 100%;  
    height: 100%;
    z-index: 777;
	animation: fadein 11s;
    	
      	  
    }
	
	.ann7 {
	
	animation: fadein 7s;
	}
	
	@media (min-width: 1200px){  
.container {
    width: 1200px;
    max-width: 100%; 
} }  
	
	.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
	z-index: 777;
}
	
	.row {
    margin-right: -15px;
    margin-left: -15px;
}
	 
	.rotate {
  width: 100px;
  animation: rotation 2s infinite linear;
  z-index: 4; 
}
    
    @keyframes move {
        from {transform: translateX(1500px);}
        to {transform: translateX(-1100px);}
		} 
		
	@keyframes rotation {
         from {transform: rotate(0deg);}
        to {transform: rotate(359deg);}
        }
		
		@keyframes zoom-in-zoom-out {
  0% {transform: scale(1, 1);}
  50% {transform: scale(1.1, 1.1);}
  100% {transform: scale(1, 1);}
}

@keyframes fadein {
    0% {opacity:0;}
    50%{opacity:0.5;}
    100% {opacity:1;}
}
		
    .win7-btn {
  margin-right: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  padding: 3px 15px 3px 15px;
  background: #f2f2f2;
  background: -moz-linear-gradient(top, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%);
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%);
  background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cfcfcf', GradientType=0);
  transition: all 0.1s ease-in;
  border: 1px solid #707070;
  text-decoration: none; 
}

.win7-btn:hover,
.win7-btn:focus {
  outline: 0;
  background: #eaf6fd;
  background: -moz-linear-gradient(top, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%);
  background: -webkit-linear-gradient(top, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%);
  background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#eaf6fd', endColorstr='#a7d9f5', GradientType=0);
  border: 1px solid #3C7FB1;
  box-shadow: 0 0 3px #A7D9F5;
  -o-box-shadow: 0 0 3px #A7D9F5;
  -webkit-box-shadow: 0 0 3px #A7D9F5;
  -moz-box-shadow: 0 0 3px #A7D9F5;
}

.win7-btn:active {
  box-shadow: inset 0 -1px 6px rgba(0, 0, 0, 0.2), inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
  -o-box-shadow: inset 0 -1px 6px rgba(0, 0, 0, 0.2), inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
  -webkit-box-shadow: inset 0 -1px 6px rgba(0, 0, 0, 0.2), inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
  -moz-box-shadow: inset 0 -1px 6px rgba(0, 0, 0, 0.2), inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}

footer {
    display: block;
    z-index: 777;
    position: relative;
    margin: 50px;
}
*/