.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 10px; height: 0; overflow: hidden;
}
 
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

:root {
	/*1. Fond*/
	--body-bg: #fafdfd;
	/*2. Texte noir*/
	--body-color: #000000;
	/*3. couleurs de Cassiopeia*/
	--cassiopeia-color-primary: #000000;
	--cassiopeia-color-link: #047281;
	--cassiopeia-color-hover: #fc9f2d;
}

/* Police utilisée sur l'ensemble du site */

body {
    font-family: 'Georama', sans-serif;
}

/* Couleur et taille du header */

.header {
    background: #0595a8;
    border: 4px solid #1ab0c4;
}

Smaller banner
.container-banner .banner-overlay {
    height: 40vh;
}

/* Ombre des modules Les modules ont la carte de classe, vous les contrôlez donc avec .card - si vous souhaitez contrôler uniquement un module spécifique, vous pouvez donner au module sa propre classe CSS dans les paramètres, puis le contrôler avec cela */

.card {
    box-shadow: 6px 4px 8px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 6px 4px 8px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 6px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

/*Les modules sont sur différentes positions de module dans le modèle Cassiopeia, puis les modules obtiennent en plus de la carte également la position en tant que nom de classe, par exemple main-top - donc si vous voulez changer tous les modules en main top, vous prenez .main-top.card */
.main-top.card {
    background: #0595a8;
}

/* Couleur des boutons Dans Joomla, la plupart des boutons ont la classe btn-primary - dans l'inspecteur d'éléments, vous pouvez vérifier si le bouton que vous souhaitez colorer a vraiment cette couleur.
*/

.btn-primary {
    background: #1dbbd0;
    border: 2px solid #016473;
}

/* Couleur des boutons au survol.
*/

.btn-primary:hover {
    background: #048899;
}

/* Dans Joomla, toutes les images d'articles ont la classe item-image, si vous souhaitez contrôler uniquement une image spécifique, vous devez donner à l'image à l'intérieur de l'article sa propre classe CSS.
*/

.item-image {
    border: 2px solid #fc9f2d;
}

/* Le pied de page de Cassiopeia a la classe "footer" donc vous le contrôlez avec .footer */

.footer {
    background: #0595a8;
    border: 2px solid #1ab0c4;
}

/* tailles des lettres des titres */
h1, .h1 {
font-size: calc(0.8rem + 0.9vw);
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 1.6rem;
}
}
h1,.h1 {color: #078b9c;}

h2, .h2 {
font-size: calc(0.6rem + 0.7vw);
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 1.4rem;
}

/* couleur fond fil d'ariane*/
.breadcrumb {
background-color: #f1fdfe;
border: 3px solid #e8fcfe;
}
}