body {
    font-family: 'Lato', sans-serif;
    font-weight: 400; /* Normal */
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 700; /* Gras */
    font-size: 48px;
    /*font-style: italic; /* Italique si besoin */
}

h1 {
    margin-left: 30px;
}

/* Conteneur parent pour aligner header et nav côte à côte */
.header-nav-container {
    display: flex;
    justify-content: space-between; /* Espace entre header et nav */
    align-items: center; /* Aligne verticalement au centre */
    width: 100%; /* Prend toute la largeur disponible */
    height: 80px; /* Hauteur fixe (ajuste selon tes besoins) */

    /* Ajoute une bordure orange en bas */
    border-bottom: 4px solid #FF8C00;/*#FFA500;*/ /* Orange plus foncé ou standard */
}

/* ===== Menu ===== */
.main-menu {
    display: flex;
    gap: 24px;
    margin-right: 30px;
}

/* Réinitialisation complète du bouton pour Vivaldi */
.main-menu-item {
    /* Taille */
    font-size: 72px !important; /* Force la taille */

    /* Suppression du fond et des bordures */
    background: transparent !important;
    border: none !important;
    text-decoration: none !important; /* <-- Ajoute cette ligne */
    outline: none !important;
    box-shadow: none !important;
    outline: none !important;

    /* Désactive le style natif du navigateur */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* Style personnalisé */
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    color: inherit;
    padding: 0px 12px; /* Supprime le padding vertical (8px → 0) */
    line-height: 1;
    margin: 0;
    border-radius: 4px;
    height: 62px; /* Hauteur fixe pour éviter le débordement */
    display: inline-flex; /* Permet de contrôler la hauteur */
    align-items: center; /* Centre verticalement le contenu */
}

/* Effet au survol */
.main-menu-item:hover {
    background: #f0f0f0 !important;
}

/* Style spécifique pour la flèche */
.back-arrow {
    font-size: 58px !important; /* Taille réduite pour la flèche */
    height: 58px; /* Hauteur ajustée pour la flèche */
}

/* ===== Image en pleine largeur + texte superposé ===== */
.fullwidth-image {
    position: relative; /* IMPORTANT : Permet de positionner le texte en absolu par rapport à cette section */
    width: 100%;
    margin: 0;
    padding: 0;
    height: 460px; /* Ajuste cette valeur selon tes besoins */
    overflow: hidden; /* Masque le débordement si l'image est trop haute */
    /*overflow: visible;*/
}

.fullwidth-image img {
    width: 100%;
    /*height: auto;*/ /* Conserve les proportions */
    height: 100%; /* Prend toute la hauteur du conteneur */
    display: block;
    object-fit: cover; /* ou 'contain' si tu préfères voir toute l'image sans recadrage */
    /*object-fit: contain;*/
    object-position: center 70%; /* Décale de 100-lepourcentage vers le haut */
}

/* Conteneur pour les deux textes (centré ensemble) */
.image-overlay-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%; /* Largeur maximale du bloc de texte */
}

/* Texte principal */
.image-overlay-text {
    color: white;
    font-size: 48px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0; /* Supprime les marges par défaut */
    padding: 0;
}

/* Sous-texte */
.small-image-overlay-text {
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-top: 10px; /* Espace entre les deux lignes */
    padding: 0;
}

/* ===== Section centrée ===== */
.centered-block {
    width: 98%;
    margin: 20px auto; /* Ajoute un peu d'espace en haut */
}

.section-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crée des colonnes flexibles */
    gap: 20px; /* Espacement entre les notes */
    width: 100%;
    justify-content: space-between; /* Justifie les colonnes */
}

/*.section-container-element {
    padding: 10px 20px;
    border-radius: 4px;
    background: #f0f0f0;
}*/

/* Style des notes (aperçu) */
.section-container-element {
    padding: 15px;
    border-radius: 4px;
    background: #f9f9f9;
    width: 200px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.section-container-element h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.note-date {
    font-size: 12px;
    color: #666;
    margin: 0 0 8px 0;
}

.note-excerpt {
    font-size: 14px;
    margin: 0;
}

.read-more {
    display: block;
    margin-top: 8px;
    color: #0066cc;
    text-decoration: none;
    font-size: 14px;
}

/* Style de la note complète */
.note-content {
    white-space: pre-line;
    line-height: 1.5;
    padding: 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Formulaire de création/édition */
form div {
    margin-bottom: 15px;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-size: 1.2rem; /* Taille de base pour les labels */
    font-weight: bold;
    color: #333;
}

/* Style des champs input et textarea */
form input[type="text"],
    form textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: 'Lato', sans-serif;
        font-size: 1rem; /* Taille de base pour le texte des champs */
        line-height: 1.5;
        resize: vertical; /* Permet de redimensionner verticalement le textarea */
    }

/* Style spécifique pour le textarea */
form textarea {
    min-height: 150px; /* Hauteur minimale pour le contenu */
}

/* Écran en portrait (hauteur > largeur) */
@media (max-width: 768px) and (orientation: portrait) {
    form label {
        font-size: 1.2rem; /* Légèrement réduit */
    }

    form input[type="text"],
        form textarea {
            font-size: 1rem; /* Réduit pour les petits écrans */
            padding: 10px; /* Padding légèrement réduit */
        }
}

/* Smartphone (écran très étroit) */
@media (max-width: 480px) {
    form label {
        font-size: 2.8rem; /* 280% de la taille de base */
    }

    form input[type="text"],
        form textarea {
            font-size: 2.4rem; /* 1.2rem x 2 */
            padding: 24px; /* 12px x 2 */
        }

        form textarea {
            min-height: 360px; /* 180px x 2 */
        }
}

/* ===== Pied de page ===== */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    font-size: 14px;
    color: #666;
}