/* Copyright Maxdecours.com */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
}


@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

/* ARTICLE EN LUI-MËME */
body {

    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    padding: 0;
    background: #f4f4f4;
    color: #333;
}
.container {
    max-width: 800px;
    margin: 30px auto; /* Centre horizontalement */
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* Media query pour les petits écrans */
@media (max-width: 600px) {
    .container {
        /*margin: 1em 0.1em;  Marge  à gauche et à droite */
        margin-left: -0.3em;
        padding: 20px; /* Padding inchangé */
    }
}



h1, h2, h3 {
    font-family: 'Roboto', sans-serif;
}
h1 {
    color: #29527a; /* Dark blue */
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.2em;
    font-weight: 700;
}


h2 {
    color: #fff; /* Couleur du texte */
    background: #2c7be5; /* Couleur de fond */
    padding: 10px 20px; /* Ajustez les valeurs de padding pour obtenir la forme ovale souhaitée */
    display: inline-block; /* Permet au conteneur de s'adapter à la largeur du texte */
    border-radius: 20px; /* Donne une forme ovale */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre subtile */
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
}
h2.centrer {
    display: block;
    color: #fff;
    background: #2c7be5;
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}


h3 {
    color: #2c7be5;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.4em;
    font-weight: 600;
    text-align: justify;
}

/* POUR DU DETAIL */

.center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}


/* TAGS DE l'ARTICLE */ 

.article-tags {
    text-align: center; /* Centrer les éléments à l'intérieur */
}

.tag {
    display: inline-block;
    background-color: #f0f0f0;
    color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px; /* Ajoute un espacement de 5px autour de chaque tag */
    font-size: 0.8em;
    transition: background-color 0.3s, color 0.3s; /* Ajouter une transition pour l'effet de survol */
}

.tag a {
    color: inherit; /* Hériter de la couleur du parent */
    text-decoration: none; /* Supprimer le soulignement */
}

.tag:hover {
    background-color: #333; /* Changer la couleur de fond au survol */
    color: #fff; /* Changer la couleur du texte au survol */
}

.tag:hover a {
    color: #fff; /* S'assurer que le lien hérite de la couleur de texte au survol */
}





ul {
    list-style-type: none;
    padding-left: 20px;
}

li {
    margin-bottom: 0.7em;
    text-align: justify;

}



ul li::before {
    content: '•';
    color: #2c7be5;
    margin-right: 10px;
    font-size: 1em;
    vertical-align: middle;
}


ol {
    counter-reset: list-counter; /* Initialiser un compteur personnalisé */
    list-style-type: none; /* Enlever les numéros par défaut */
    padding-left: 0; /* Enlever le padding par défaut */
    margin-left: 1em; /* Ajouter une marge à gauche pour de l'espace */
}

ol li {
    counter-increment: list-counter; /* Incrémenter le compteur pour chaque élément li */
    position: relative; /* Position relative pour le positionnement absolu des pseudo-éléments */
    padding-left: 40px; /* Ajouter du padding pour laisser de la place aux numéros personnalisés */
    margin-bottom: 0.5em; /* Espacement entre les éléments de la liste */
    line-height: 1.6; /* Ligne hauteur pour un meilleur espacement vertical */
}


ol li::before {
    content: counter(list-counter) '.'; /* Afficher le compteur comme contenu */
    position: absolute; /* Positionner absolument par rapport à son parent li */
    left: 0; /* Aligner à gauche */
    font-size: 1.2em; /* Taille de la police pour les numéros */
    font-weight: bold; /* Rendre les numéros gras */
    color: #2c7be5; /* Utiliser une couleur personnalisée pour les numéros */
    background-color: #e7f5ff; /* Fond derrière les numéros */
    border-radius: 50%; /* Rendre le fond circulaire */
    width: 30px; /* Largeur du fond circulaire */
    height: 30px; /* Hauteur du fond circulaire */
    text-align: center; /* Centrer le texte dans le cercle */
    line-height: 30px; /* Aligner le numéro verticalement dans le cercle */
}

/* Ajouter un effet de survol pour les numéros */
ol li:hover::before {
    background-color: #2c7be5; /* Changer la couleur de fond au survol */
    color: #fff; /* Changer la couleur du numéro au survol */
}
ul ul li::before {
    content: '—';
    color: #999;
    margin-right: 10px;
    font-size: 0.9em;
    vertical-align: middle;
}
.advice {
    background-color: #e7f5ff;
    padding: 10px;
    border-left: 4px solid #2c7be5;
    margin-top: 20px;
    font-style: italic;
    color: #555;
    border-radius: 5px;
    font-size: 0.9em;
}
@media screen and (max-width: 768px) {
    .container {
        width: 95%;
        padding: 15px;
    }
    h1 {
        font-size: 1.75em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.2em;
    }
}

p{
    text-align: justify;
}

.advice .highlight {
color: #2c7be5; /* Couleur de texte bleue, cohérente avec les autres titres */
font-weight: 700; /* Épaisseur de la police */
}


.advice-section {
background: #f9f9f9;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: justify;

}

.advice-list {
list-style-type: none;
padding: 0;
}

.advice-list li {
margin-bottom: 15px;
}

.advice-list li strong {
color: #2c7be5;
}

.advice-list li p {
margin: 5px 0 0 20px;
}

.highlighted {
    font-weight: bold; /* Texte en gras */
    font-style: italic; /* Texte en italique */
    font-size: 1.05em; /* Taille de police légèrement augmentée */
    color: rgba(44, 123, 229, 0.9); /* Couleur bleue avec un peu de transparence */
}

/* .highlighted {
    font-weight: bold; 
    color: #2c7be5; 
    padding: 0; 
}*/





.example {
    background: #f0f7ff;
    color: #0366d6;
    padding: 5px;
    border-radius: 5px;
    font-style: italic;
    }




/* IMAGES */


.imgmaxwidth {
    max-width: 100%;
}

.img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
  }