/* Typographie, liens, images, éléments HTML de base. */


/* Définition des polices personnalisées */
/* -------------------------------------- */
@font-face {
    font-family: 'MaPolice1';
    src: url('../fonts/open-sans/OpenSans-Regular-webfont.woff2') format("woff2"), 
         url('../fonts/open-sans/OpenSans-Regular.woff') format("woff"),
	     url('../fonts/open-sans/OpenSans-Regular.ttf') format("truetype");
	font-display: swap; /* Utilisation de 'swap' pour afficher rapidement le texte */
}

@font-face {
    font-family: 'MaPolice2';
    src: url('../fonts/Lato2OFL/Lato-Medium.woff2') format("woff2"),
         url('../fonts/Lato2OFL/Lato-Medium.ttf');
	font-display: swap; /* Utilisation de 'swap' pour afficher rapidement le texte */
}

/*@font-face {
    font-family: 'MaPolice2-Gras';
    src: url('../fonts/Lato2OFL/Lato-Bold.woff2') format("woff2"),
         url('../fonts/Lato2OFL/Lato-Bold.woff') format("woff"),
	     url('../fonts/Lato2OFL/Lato-Bold.ttf') format("truetype");
	font-display: swap;
}*/

@font-face {
    font-family: 'Gabriola';
    src: url('../fonts/gabriola-font/Gabriola.woff2') format("woff2"),
         url('../fonts/gabriola-font/Gabriola.woff') format("woff"),
	     url('../fonts/gabriola-font/Gabriola.ttf') format("truetype");
	font-display: swap; /* Utilisation de 'swap' pour afficher rapidement le texte */
}

@font-face {
    font-family: 'SocialFont';
    src: url('../fonts/social_media_circled/SocialMediaCircled.woff2') format("woff2"),
         url('../fonts/social_media_circled/SocialMediaCircled.woff') format("woff"),
         url('../fonts/social_media_circled/SocialMediaCircled.otf');
	font-display: swap; /* Utilisation de 'swap' pour afficher rapidement le texte */
}

/*
@font-face {
    font-family: 'BaseLine';
    src: url('../fonts/Amsterdam_Four/amsterdam-four.woff2') format("woff2"),
         url('../fonts/Amsterdam_Four/amsterdam-four.woff') format("woff"),
         url('../fonts/Amsterdam_Four/amsterdam-four.ttf');
	font-display: swap;
}
 */

/*
@font-face {
    font-family: 'Menu_title';
    src: url('../fonts/Georgia/georgia.woff2') format("woff2"),
        url('../fonts/Georgia/georgia.woff') format("woff"),
        url('../fonts/Georgia/georgia.ttf') format("truetype");
	font-display: swap;  
}
*/

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.woff2') format("woff2"),
        url('../fonts/Georgia/Inter-VariableFont_opsz,wght.woff') format("woff"),
        url('../fonts/Georgia/Inter-VariableFont_opsz,wght.ttf') format("truetype");
	font-display: swap; /* Utilisation de 'swap' pour afficher rapidement le texte */
}
/* -------------------------------------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* -------------------------------------- */
/* LES VARIABLES COULEURS ET AUTRES */
/* -------------------------------------- */
/* ===== Réinitialisation ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Variables de couleurs ===== */
:root {
    /* Couleurs */
    --color-primary: #2A303B; /* Titres et texte */
    --color-secondary: #3C5176; /* Section bleue */
    --color-accent: #DA514F; /* Liens */
    --color-accent-dark: #A91D1B; /* Bouton Hover */
    --color-gold: #D7B65D; /* Détails premium */
    --color-gold-light: #E5DABC; /* Détails premium */
    
    /* Neutres */
    --color-white: #FFFFFF; /* Texte sur section bleu */
    --color-alt: #FFFCFA; /* Fond alternatif */
    --color-bg: #FFFCFA; /* Fond alternatif */
    --color-grey : grey;

    /* États */
    --overlay-color: rgba(0, 0, 0, 0.2); /* Overlay pour la vidéo */
    --gap-size: 15px;  
    --header-height: 100px;
}

/* ===== COMPOSANTS ===== */
:root {
    --background-main: var(--color-bg);
    --background-second: var(--color-bg);
    --background-third: var(--color-secondary);
    --dark-bg: var(--color-primary);
    
    --color-highlight: var(--color-accent);
    
    --text-color : var(--color-primary);
    --text-color-white : var(--color-white);
    
    --button-primary-bg: var(--color-accent);
    --button-primary-text: var(--color-white);
    --button-primary-hover: var(--color-accent-dark);

    --button-secondary-bg: var(--color-white);
    --button-secondary-text: var(--color-white);
    --button-secondary-hover: var(--color-primary);
    
    --section-title-color: var(--color-primary);
    --section-text-color: var(--color-primary);
}

.light {
  --section-title-color: var(--color-primary);
  --section-text-color: var(--color-primary);
}

.dark {
  --section-title-color: var(--color-alt);
  --section-text-color: var(--color-alt);
}

.highlight{
	color: var(--color-highlight);
    font-weight: bold;
}
.grey_color{
	color: grey;
}
/* -------------------------------------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* -------------------------------------- */
body{
  overflow-x:hidden;
	
  background-color:  var(--background-main);
  color: var(--section-text-color);
	padding-top: calc(var(--header-height) + 10px);
}

/* POLICE D'ECRITURE PAR DEFAUT SUR LES PARAGRAPHES INCLUS DANS LES DIV */
h1, h2, h3, p {
  margin-top: 0;
  font-family: 'Gabriola', serif;
  color:var(--section-text-color);
}

body, p, a, button, input {
    font-family: 'Inter', sans-serif;
	color: var(--section-text-color);
	
}

div p{
	font-size: 1rem;
	line-height: 1.7rem;
	text-align : justify;
    margin-bottom: 1em;
}

div span{
	line-height: 1.2rem;
}


h1{
  font-weight:bold;
  font-size:3rem;
  text-align:center;
  letter-spacing: 4px;
  border-bottom:2px solid var(--color-gold);
  line-height: 50px;	
  margin: 0 0 15px;
}

/* POLICE D'ECRITURE PAR DEFAUT SUR LES TITRES h2 */
h2{
	border-bottom: 2px solid var(--color-gold);
	font-size: 1.8rem;
	font-weight: bold;
    margin:0 0 0.5em 0;
    color:var(--section-title-color);
	letter-spacing: 1px;
}

.h2_sous_h1{
/*  font-family:MaPolice2-Gras, sans-serif;*/
  display: block;
  font-weight:bold;
  font-size:1rem;
  text-align:center;
  margin:0 0 25px 0;
  border: none;
	letter-spacing: 1px;
  color: var(--color-gold);
}

/* POLICE D'ECRITURE PAR DEFAUT SUR LES TITRES h3 */
h3{
/*	font-family:MaPolice2-Gras, sans-serif;*/
	text-align:left;
	font-size : 1.5rem;
    margin:0.6em 0 0.3em 0;
	letter-spacing: 1px;
	border-bottom: 1px solid var(--color-gold);
}

.lien_div{
    text-decoration: none;
}

/* -------------------------------------- */				/* -------------------------------------- */
/* -------------------------------------- RESPONSIVE DESIGN -------------------------------------- */
/* -------------------------------------- */				/* -------------------------------------- */

@media screen and (max-width: 1024px)
{
	h1{
      font-size: 2rem;
	}
    
	h2{
      font-size: 1.5rem;
	}
	
    div p{
      font-size: 0.8rem;
	}
}

/* SMARTPHONE */
@media screen and (max-width: 720px)
{
	h3{
	font-size : 1.2rem;
    }
}