/* Variables de couleurs pour une gestion facile */
:root {
    --couleur-body-pastel: #f0e6f2; /* Un lilas clair */
    --couleur-texte-fonce: #333;
    --couleur-entete-sombre: #2a2a2a;
    --couleur-entete-texte: #fff;
    --couleur-liens-fonce: #0c8ec2; /* Un bleu ciel */
}

/* Styles de base pour le corps et la police */
body {
    font-family: Arial, sans-serif;
    background-color: var(--couleur-body-pastel);
    color: var(--couleur-texte-fonce);
    margin: 0;
    padding:0;
    line-height: 1.6;
}

/* En-tête */
.header {
    background-color: var(--couleur-entete-sombre);
    color: var(--couleur-entete-texte);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
    margin-right: 15px;
}
/* Styles généraux pour tous les écrans (approche Mobile-First) */
.conteneur {
    width: 100%;
    padding: 10px;
}

/* Styles spécifiques pour les écrans plus grands que 768px (tablettes et plus) */
@media (min-width: 768px) {
    .conteneur {
        max-width: 960px;
        margin: 0 auto;
    }
}

.header h1 {
    margin: 0;
    font-size: 1.5em;
}

/* Navigation */
.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
li {
  font-size: 14px;
}

.navigation li {
      margin-left: 20px;
}

.blog{
couleur-texte-fonce: #333;
color: var(--couleur-liens-fonce);
}

.navigation a {

    color: #0c8ec2;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.navigation a:hover,
.navigation a.active {
    color:var(--couleur-entete-texte);
}
/* Exemple de styles à ajouter à votre fichier CSS */



/* Contenu principal */
.main-content {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    color: var(--couleur-liens-fonce);
    border-bottom: 2px solid var(--couleur-liens-fonce);
    padding-bottom: 5px;
}

/* Placeholders pour les images */
.image-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.clickable-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.clickable-image:hover {
    transform: scale(1.05);
}

/* Pied de page */
.footer {
    background-color: var(--couleur-entete-sombre);
    color: var(--couleur-entete-texte);
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

.footer .social-links a {
    color: var(--couleur-entete-texte);
    text-decoration: none;
    margin: 0 10px;
}

.footer .social-links a:hover {
    color: var(--couleur-liens-fonce);
}

/* Style du formulaire de contact - exemple */
.contact-form {
    display: grid;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form label {
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form button {
    background-color: var(--couleur-liens-fonce);
    color: white;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #550460;
}
/* Styles pour la page Blog et Histoires */
.articles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.blog-post {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.post-content {
    padding: 1.5rem;
}

.post-content h3 {
    margin-top: 0;
    color: var(--couleur-liens-fonce);
}

.post-content p {
    font-size: 0.9em;
    color: #666;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    color: var(--couleur-liens-fonce);
    text-decoration: none;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}
/* Styles pour la page Boutique */
.shop-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    justify-content: center;
}

.shop-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.shop-item-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 5px;
}

.shop-item-title {
    color: var(--couleur-liens-fonce);
    margin: 15px 0 10px;
}

.shop-item-price {
    font-size: 1.2em;
    color: var(--couleur-texte-fonce);
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}

.btn-primary {
    background-color: var(--couleur-liens-fonce);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #550460;
}
/* Styles pour la page Paiement */
.payment-message {
    text-align: center;
    padding: 50px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 50px auto;
}
/* Styles pour la page À propos */
.about-section {
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

.about-section p {
    margin-bottom: 20px;
}
.image-jour {
    display: none; /* Cache toutes les images par défaut */
}
a {
    text-decoration: none;
}
{
 //Liste des jours de la semaine en anglais, qui correspondent aux valeurs de JavaScript
const joursSemaine = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];

//Récupère la date actuelle
const dateActuelle = new Date();

// Obtient le numéro du jour de la semaine (0 pour dimanche, 1 pour lundi, etc.)
const numeroJour = dateActuelle.getDay();

// Trouve l'identifiant de l'image du jour
const idJour = joursSemaine[numeroJour];

// Trouve l'élément de l'image du jour en utilisant son identifiant
const imageJour = document.getElementById(idJour);

// Si l'image existe, on la rend visible
if (imageJour) {
    //imageJour.style.display = 'block';

//};
 L'objet Date de JavaScript est une fonctionnalité intégrée qui permet de travailler avec les dates et les heures. Quand vous créez une nouvelle instance de cet objet avec new Date(), elle capture la date et l'heure exactes de l'ordinateur de l'utilisateur.

//Ensuite, on utilise une autre fonction de cet objet :

//JavaScript

//const numeroJour = dateActuelle.getDay();
La fonction .getDay() renvoie un numéro qui représente le jour de la semaine :

0 pour Dimanche

1 pour Lundi

//2 pour Mardi

//... et ainsi de suite jusqu'à 6 pour Samedi.

//C'est ce numéro qui nous permet de faire le lien avec l'image correspondante. Chaque jour, le numéro change automatiquement, ce qui active la bonne image sans que vous ayez à modifier le code. Le système est donc complètement dynamique et autonome!