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

:root{
    --gold:#f1d18a;
    --gold-dark:goldenrod;
    --radius-lg:24px;
    --radius-xl:28px;
}

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

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

body {
	background:linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)),
	url("frame/fond.jpg") center/cover fixed;
	font-family: Verdana, Arial, sans-serif;
	color: white;
	line-height: 1.7;
}

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

.check{max-width:90%;margin:auto;padding:1rem}

.hero{text-align:center;padding:30px}

.hero-overlay {
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(8px);
	border-radius: 24px;
	max-width: 100%;
	box-shadow:
    0 0 25px rgba(218,165,32,0.25);
    margin-top: 1em;
    margin-bottom: 2em;
}

.bar-interactive {
    position: sticky;
    top: 0;
    z-index: 1000;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(8px);
	border-radius: 24px;
    max-width: 100%;
    height: 130px;
	box-shadow:
    0 0 25px rgba(218,165,32,0.25);
    padding-top: 1em;
    margin-bottom: 2em;
}

.titreh1,
.titreh2 {
	color: #f1d18a;
	text-align: center;
	text-shadow:
	-2px -2px 0 black,
	 2px -2px 0 black,
	-2px  2px 0 black,
	 2px  2px 0 black,
	0 0 15px goldenrod;
}

.titreh1 {
	font-size: 3em;
	margin-bottom: 0.5em;
}

.titreh2 {
	font-size: 2em;
	margin-bottom: 1em;
}

/* ===================================================== */
/* ===================== RESPONSIVE ==================== */
/* ===================================================== */

@media screen and (max-width:768px) {
	.bar-interactive {
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 170px;
    }
	}

/* ===================================================== */
/* ==================== Deco Lien ====================== */
/* ===================================================== */

/* Liens en savoir plus */
.bouton{
    background-color: #555555;
    display:inline-block;

    padding:8px 14px;
    border-radius:20px;
    text-decoration:none;
    color:#f1d18a;
    border:1px solid rgba(218,165,32,.5);
}

.bouton:hover{
    box-shadow:0 0 15px rgba(218,165,32,.4);
}

/* ===================================================== */
/* ======================  Barre ======================= */
/* ===================================================== */


.actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content: center;
    align-items: center;
}

.actions .bouton{order:1}
.actions .txt{order:2}

.actions.ready{
    flex-direction:column;
    text-align:center;
}

.actions.ready .txt{order:1}
.actions.ready .bouton{order:2}

.progress{margin: 1em; height:22px;background:#555555;border-radius:11px;overflow:hidden}

.bar{height:100%;width:0;background:#4caf50}

.txt{text-align: center;}

.txt-ready{
    text-align:center;
    color:#f1d18a;
    font-size:1.2em;
    font-weight:bold;
    text-shadow:0 0 10px rgba(218,165,32,.5);
}

/* ===================================================== */
/* ===================== PDF Lien ====================== */
/* ===================================================== */

.pdf{
    display:inline-block;
    margin-top:12px;
    padding:8px 14px;
    border-radius:20px;
    text-decoration:none;
    color:#f1d18a;
    border:1px solid rgba(218,165,32,.5);
    box-shadow:0 0 15px rgba(218,165,32,.4);
}

.pdf:hover{
    border:0.5px solid rgba(255, 99, 71, 1);
    box-shadow:0 0 15px rgba(0, 0, 255, 0.5);
    transform:translateY(-2px);
}
a:not(.bouton):not(.back-to-top):hover{
    color:#f0d48a;
    text-shadow:
      1px 1px 2px red,
      0 0 1em blue,
      0 0 0.2em blue;
    }

/* ===================================================== */
/* =================== Retour Haut ===================== */
/* ===================================================== */

/* Bouton retour haut */
.back-to-top{
    position:fixed;
    right:100px;
    bottom:60px;
    padding:12px 18px;
    border-radius:30px;
    text-decoration:none;
    background:rgba(20,20,20,.9);
    color:#f1d18a;
    border:1px solid goldenrod;
    z-index:9999;
}

.back-to-top:hover{
    box-shadow:0 0 15px rgba(218,165,32,.5);
}

/* ===================================================== */
/* ===================== RESPONSIVE ==================== */
/* ===================================================== */

@media screen and (max-width:768px) {
	.back-to-top{
        right:60px;
        bottom:60px;
        zoom: 90%;
    }
	}

/* ===================================================== */
/* =============== Vignette Cliquable ================== */
/* ===================================================== */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem}

.card{
    background: rgba(0,0,0,0.55); 
    backdrop-filter: blur(8px); 
    border:1px solid rgba(218,165,32,.5);
    border-radius:10px;
    box-shadow:
    0 0 25px rgba(218,165,32,0.25);
    padding:1rem}

.card h2{
    margin-top:0
}

label{
    display:block;
    margin:0.5em 0em 0.5em 0em;
}

label input{
    margin-right:0.6em;
}

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

.footer-premium{
    margin:40px auto;
    max-width:1200px;
    width:90%;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);

    border-radius:24px;

    border:1px solid rgba(218,165,32,.35);

    box-shadow:0 0 25px rgba(218,165,32,.20);

    padding:25px;
}

.footer-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

.footer-nav .pdf{

    margin:0;

    min-width:210px;

    text-align:center;

    transition:.25s;
}

.footer-nav .pdf:hover{

    transform:translateY(-3px);

}

.footer-copy{

    margin-top:25px;

    text-align:center;

    color:#bcbcbc;

    font-size:1rem;
}

@media (max-width:768px){

.footer-premium{

    width:95%;

    padding:18px;
}

.footer-nav{

    flex-direction:column;

    gap:12px;
}

.footer-nav .pdf{

    width:100%;
}
}