/* ==========================================
   GOOGLE FONTS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================
   VARIABLES
========================================== */

:root{

--vert:#0B6E4F;
--vert-clair:#15805d;
--bleu:#102A43;
--or:#D4AF37;
--blanc:#ffffff;
--gris:#f5f7fa;
--texte:#2d3436;
--ombre:0 10px 35px rgba(0,0,0,.12);

}

/* ==========================================
   RESET
========================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;
background:#f8fafc;
color:var(--texte);
line-height:1.8;

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--vert);
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#eee;

}

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

header{

height:80vh;

background:

linear-gradient(rgba(10,30,30,.70),
rgba(10,30,30,.70)),

url("../images/mecque.jpg");

background-size:cover;
background-position:center;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

color:white;

position:relative;

}

/* ==========================================
   TITRE
========================================== */

.hero{

width:90%;
max-width:900px;

}

.hero h1{

font-family:"Cinzel",serif;

font-size:65px;

font-weight:bold;

letter-spacing:2px;

margin-bottom:30px;

text-shadow:0 5px 20px rgba(0,0,0,.5);

}

.hero p{

font-size:23px;

font-weight:300;

max-width:700px;

margin:auto;

}

/* ==========================================
   MENU
========================================== */

nav{

position:absolute;

top:0;

left:0;

width:100%;

padding:20px 0;

background:rgba(0,0,0,.25);

backdrop-filter:blur(10px);

z-index:999;

}

nav ul{

display:flex;

justify-content:center;

align-items:center;

gap:35px;

list-style:none;

}

nav a{

text-decoration:none;

color:white;

font-size:16px;

font-weight:500;

transition:.3s;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--or);

transition:.4s;

}

nav a:hover{

color:var(--or);

}

nav a:hover::after{

width:100%;

}

/* ==========================================
   MAIN
========================================== */

main{

width:90%;

max-width:1200px;

margin:auto;

}

/* ==========================================
   SECTION
========================================== */

section{

padding:90px 0;

}

section h2{

font-family:"Cinzel",serif;

font-size:42px;

color:var(--bleu);

text-align:center;

margin-bottom:50px;

position:relative;

}

section h2::after{

content:"";

width:90px;

height:4px;

background:var(--or);

display:block;

margin:18px auto;

border-radius:20px;

}

/* ==========================================
   ARTICLE
========================================== */

article{

background:white;

padding:45px;

margin-top:35px;

border-radius:18px;

box-shadow:var(--ombre);

transition:.35s;

}

article:hover{

transform:translateY(-8px);

}

article h3{

font-family:"Cinzel",serif;

font-size:30px;

color:var(--vert);

margin-bottom:25px;

}

article p{

font-size:18px;

text-align:justify;

margin-bottom:20px;

}

/* ==========================================
   BLOCKQUOTE
========================================== */

blockquote{

background:linear-gradient(90deg,var(--vert),var(--bleu));

color:white;

padding:35px;

margin:40px 0;

border-left:8px solid var(--or);

border-radius:15px;

font-size:25px;

font-style:italic;

text-align:center;

}

/* ==========================================
   SOMMAIRE
========================================== */

.sommaire{

background:white;

padding:45px;

margin:70px auto;

border-radius:20px;

box-shadow:var(--ombre);

}

.sommaire h2{

margin-bottom:30px;

}

.sommaire ol{

columns:2;

}

.sommaire li{

padding:10px;

font-size:18px;

}

/* ==========================================
   LISTES
========================================== */

ul,ol{

margin-left:25px;

}

li{

margin-bottom:12px;

font-size:18px;

}

/* ==========================================
   FOOTER
========================================== */

footer{

margin-top:100px;

background:#081C15;

color:white;

padding:60px;

text-align:center;

}

footer p{

font-size:17px;

letter-spacing:1px;

}

/* ==========================================
   ANIMATION
========================================== */

section{

animation:fadeUp 1s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}