/* questrial-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  src: url('../polices/questrial-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../polices/dm-sans-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* LES VARIABLES CSS */
:root { 
    --font-titre: 'DM Sans', Arial, Helvetica, sans-serif; 
    --font-contenu: 'Questrial', Arial, Helvetica, sans-serif; 
    --coul-fond: #063046;
    --coul-texte: #fff9e2;
    --coul-emphase: #b67a56;
    --largeur-s: 650px ;
    --largeur: 1200px ;
    --duree-transition: 0.2s ;
    --marge: 1rem;
    --marge-s: calc( var(--marge) / 2) ;
    --marge-l: calc( var(--marge) * 2) ;
    --marge-xl: calc( var(--marge) * 5) ;
    --marge-xxl: calc( var(--marge) * 9) ;
    --border-radius: .25em ;
}

html { font-size: clamp(80%, calc(-.8em + 3.8vw), 100%); }
body { background: var(--coul-fond); font-family: sans-serif; }

h1, .h1, h2, .h2 { font-family: var(--font-titre); line-height: 1em; text-wrap: balance; text-transform: uppercase; font-weight: 700; }
h1 small, h2 small, h3 small { font-family: var(--font-contenu); font-weight: 400; font-size: .5em; }
h1, .h1 { font-size: 2.75rem; }
h2, .h2 { font-size: 2.25rem; }
h3, .h3 { font-size: 1.5rem; font-weight: 700; line-height: 1em; }

.page { font-size: 1.125rem; color: var(--coul-texte); font-family: var(--font-contenu); }
.container { margin:auto; padding:0.5rem; width: var(--largeur); max-width: 100%; }

.chapo a, .texte a {color: ; text-decoration: underline;}
.chapo a:hover, .chapo a:active, .chapo a:focus,
.texte a:hover, .texte a:active, .texte a:focus { color: var(--coul-emphase) ; }

header.cartouche { margin: 0 auto var(--marge-xl) auto; max-width: 750px; text-align: center; }

/* *** ACCUEIL *** */
.page_sommaire body { background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; }
#accueil li.bulle { display: flex; flex-direction: column; justify-content: space-around; margin: auto; padding: var(--marge-l); overflow: hidden;
  width: 300px; height: 300px; background: var(--coul-fond); border-radius: 50%; border: 2px solid;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
#accueil .vignette_zcm { margin-bottom: var(--marge-s); margin-left: -50px; margin-right: -50px; }
#accueil li.bulle:nth-of-type(1) { border-radius: 30% 40% 30% 20% / 60% 30% 70% 40%;}
#accueil li.bulle:nth-of-type(2) { border-radius: 60% 30% 40% 30% / 40% 70% 30% 60%;}
#accueil li.bulle:nth-of-type(3) { border-radius: 30% 60% 60% 30% / 70% 40% 30% 30%;}
#accueil li.bulle:nth-of-type(3) .wrapper { margin: auto; max-width: 300px;}
#accueil .wrapper a { display: block;}
#accueil h2 { margin: 0; font-size: 1.625rem; }
#accueil h3 { font-size: 1.5rem; }
#accueil h3, #accueil p { margin-bottom: .5em; }

/* bandeau BFM TV */
#bandeaudefilant { position: sticky; z-index: 1; bottom: 0; overflow: hidden; width: 100%;  }
#bandeaudefilant > div { display: inline-flex; align-items: center; padding-right: 2em; white-space: nowrap;
    animation: defilement-rtl 15s infinite linear;}
#jack { display: inline-block; margin-right: var(--marge); width: 75px; animation: jack2 .5s infinite linear; }

#texte-bandeaudefilant { position: relative; padding: 0 var(--marge); background: var(--coul-fond); color: var(--coul-emphase); }
#texte-bandeaudefilant::before, #texte-bandeaudefilant::after { position: absolute; left: 0; top: 0; display: block; content: ''; width: 1px; height: 100%; 
  background: var(--coul-texte); transform-origin: top left;
  transform: rotate3d(0,0,1,60deg); }
#texte-bandeaudefilant::after { transform-origin: bottom left; transform: rotate3d(0,0,1,-60deg);}

/* Agenda */
.article_agenda h1 { font-size: 5rem; }
.date-evenement { margin-bottom: .5em; font-size: 1rem; }
.liste-evenements h2, .liste-evenements h3 { margin-bottom: var(--marge); font-size: 1.5rem; font-family: var(--font-titre); }
.liste-evenements li { margin-bottom: var(--marge-xl); line-height: 1.25em;}
.page_evenement .contenu { margin: var(--marge-l) auto; max-width: var(--largeur-s); }
#prochains-rdv { margin-top: var(--marge-xl); padding-top: var(--marge-xl); border-top: 4px solid; }
#prochains-rdv h2 { margin-bottom: var(--marge-xl) ; text-align: center; }

/* Présentation */
.onepage > li:not(:last-of-type) { margin-bottom: var(--marge-xl); }
/* *** HAPPY PLUIE *** */
.pluie { position: relative; overflow: hidden;  }
#happypluie { text-align: center; }
.page_article #happypluie { display: grid; place-content: center; margin: var(--marge-l) auto; padding: 0 var(--marge-l); width: 250px; height: 250px; border-radius: 50%; color: var(--coul-fond); background: var(--coul-texte);}
#happypluie div { line-height: 1.2em;}
#happypluie strong { display: block; }
#happypluie small { display: block; font-size: .75rem; }

/*** Happy pluie *** */
.goutte {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
	width:1px;
	height:50px;
	position: absolute;
	bottom:200px;
	animation: fall .8s linear infinite;  
}

/* animate the drops*/
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}

/* *** AUTRES PAGES *** */
.page_404 .chapo { font-size: 1.25rem; text-align: center; }

/* *** PIED DE PAGE *** */
#sociaux li { margin: 0 var(--marge); }
#footer .wrapper { padding-top: var(--marge-l); font-size: 1rem; border-top: 4px solid; }