/*
Cette CSS a été écrite initialement pae Derek Salmon (Pikselkraft) pour Katzele
Puis adaptée par Guillaume Porte en 2024 pour Estrades
Puis adaptée par Arthur Pons pour Catium
Puis adapté par Virgile Jarrige pour utiliser Hugo, la police unistra et le rendre responsive

- https://www.pikselkraft.com/
- http://katzele.netlib.re/
- https://estrades.huma-num.fr/
- http://catium.bebou.netlib.re
*/

/* Déclaration des polices Unistra A */
@font-face {
    font-family: 'Unistra A';
    src: url('/fonts/UnistraA-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Unistra A';
    src: url('/fonts/UnistraA-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Unistra A';
    src: url('/fonts/UnistraA-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Unistra A';
    src: url('/fonts/UnistraA-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

:root {
    --header-height: 80px;
    --transition-speed: 0.3s;
    --primary: #3b82f6;
    --secondary: #10b981;
    --dark: #1e293b;
    --light: #f8fafc;
}

body {
    font-family: 'Unistra A', sans-serif;
    background-color: var(--light);
    color: var(--dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 150%;
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Les styles du menu ont été déplacés vers menu.css */

main {
    flex: 1;
    width: 100%;
    margin: 2rem auto;
    padding: 0;
}

.homepage-content {
    width: 90%;
    margin: 0 auto;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
}

h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--dark);
    margin: 2rem 0 1rem;
}

p {
    margin-bottom: 1.25rem;
    color: #475569;
}

/* Styles des liens dans le contenu principal */
main a {
    color: var(--dark);
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    position: relative;
    transition: all var(--transition-speed) ease;
}

main a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--primary);
    transform: scaleX(0);
    transition: transform var(--transition-speed) ease;
}

main a:hover::after {
    transform: scaleX(1);
}

footer {
    background-color: var(--light);
    color: var(--dark);
    padding: 2rem 0;
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#footer-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

#footer-menu ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

#footer-menu a {
    color: var(--dark);
    opacity: 0.7;
    transition: opacity var(--transition-speed) ease;
    text-decoration: none;
}

#footer-menu a:hover {
    opacity: 1;
    color: var(--primary);
}

.logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.logos img {
    height: 50px;
    opacity: 0.8;
    transition: opacity var(--transition-speed) ease;
}

.logos img:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}