@import url(https://db.onlinewebfonts.com/c/5ce9655f6b33e1aaa1c62de0397a79dc?family=Juana+Regular);
@font-face {
    font-family: "Juana Regular";
    src: url("https://db.onlinewebfonts.com/t/5ce9655f6b33e1aaa1c62de0397a79dc.eot");
    src: url("https://db.onlinewebfonts.com/t/5ce9655f6b33e1aaa1c62de0397a79dc.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/5ce9655f6b33e1aaa1c62de0397a79dc.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/5ce9655f6b33e1aaa1c62de0397a79dc.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/5ce9655f6b33e1aaa1c62de0397a79dc.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/5ce9655f6b33e1aaa1c62de0397a79dc.svg#Juana Regular")format("svg");
}
/* ----------------------------------------------------- */
/* 0. VARIABLES & RÉINITIALISATION DE BASE (RESET)       */
/* ----------------------------------------------------- */
:root {
    /* Couleurs principales */
    --color-orange: #e7ae79; /* Orange vif pour les accents */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-cream: #fff8e9; /* Couleur crème pour Section 2 */
    --color-beige: #efe0c4; /* Beige clair pour Section 3 & 6 */
    --color-dark-gray: #423c38; /* Gris sombre pour Section 4 et Footer */
    --text:#2c2826;

    /* Tailles */
    --nav-height: 75px;
    --max-content-width: 1200px; /* Largeur maximale du contenu */
}

/* Réinitialisation de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Inclusion du padding et border dans la taille totale */
}

body {
    line-height: 1.6;
    color: var(--text);
    /*font-family: 'Courier New', Courier, monospace;*/
    /*font-family: 'Courier Prime', monospace;*/
    /*font-family: "Juana Regular";*/
    font-family: 'Courier Prime', monospace;
}

a {
    text-decoration: none;
    color: inherit; /* Les liens héritent de la couleur de leur parent */
}

/* ----------------------------------------------------- */
/* 1. CLASSES UTILITAIRES GÉNÉRALES                      */
/* ----------------------------------------------------- */

/* Couleurs de fond et de texte */
.cream-bg { background-color: var(--color-cream); }
.beige-bg { background-color: var(--color-beige); }
.beige-bg-light { background-color: var(--color-beige); } /* Une nuance différente pour le support */
.dark-gray-bg { background-color: var(--color-dark-gray); }
.white-bg { background-color: var(--color-white); }
.orange-bg { background-color: var(--color-orange); }

.black-text { color: var(--color-black); }
.white-text { color: var(--color-white); }

/* Sections */
.full-width-section {
    width: 100%;
    padding: 40px 0; /* Padding vertical par défaut */
    min-height: 300px;
}

/* Boutons génériques */
.button {
    padding: 10px 20px;
    border: 2px solid var(--color-orange); /* Bordure par défaut */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    border-radius:3px;
}
.button:hover {
    opacity: 0.8;
}

/* Accessibilité: Texte caché pour les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ----------------------------------------------------- */
/* 2. BARRE DE NAVIGATION (NAVBAR)                       */
/* ----------------------------------------------------- */
#main-navbar {
    height: var(--nav-height);
    background-color: var(--color-dark-gray); /* Fond gris sombre */
    width: 100%;
    display: flex; /* Utilisation de Flexbox */
    justify-content: space-between; /* ÉLÉMENT CLÉ : [logo] ... [liens] ... [connexion] */
    align-items: center;
    padding: 0 30px; /* Espace sur les côtés */
    box-sizing: border-box; /* S'assure que le padding n'augmente pas la largeur */
    z-index: 1000;
    transition: top 0.3s ease-out;
    opacity: 0.85; /* Opacité légèrement ajustée */
    font-family: "Juana Regular";
    font-size: 20px;
    
}

/* Positionnement fixe en haut de la page */
.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
}

/* Classe ajoutée par JS pour masquer la barre de navigation */
.nav-hidden {
    top: calc(0px - var(--nav-height));
}

/* Case 1: Logo */
.nav-logo {
    flex-shrink: 0; /* Empêche le logo de rétrécir */
}
.nav-logo img {
    display: block;
    height: 50px;
    width: auto;
}

/* Case 2: Liens de navigation (partie la plus large) */
.nav-links {
    display: flex;
    list-style: none;
    gap: 80px;
    /* CORRECTION : flex-grow: 1 est suffisant (au lieu de 3) */
    /* Il prendra tout l'espace restant au milieu */
    flex-grow: 1; 
    justify-content: center; /* Centre les liens dans l'espace */
    font-size:20px;
    margin: 0;
    padding: 0;
}
.nav-links a {
    padding: 10px 15px;
    font-weight: bold;
    transition: color 0.3s;
    text-decoration: none; /* Correction : "none" en minuscules */
}
.white-link { color: var(--color-white); }
.orange-link { color: var(--color-orange); }

.nav-links a:hover {
    color: var(--color-orange);
}
.orange-link:hover {
    color: var(--color-white); 
}

/* Dropdown (Liste déroulante de l'Article) */
.dropdown-link {
    position: relative;
    padding: 0;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background-color: var(--color-dark-gray);
    list-style: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1001;
    padding: 5px 0; /* Ajout d'un léger padding */
    border-radius: 4px; /* Ajout de bords arrondis */
}
.dropdown-link:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: var(--color-white);
    white-space: nowrap;
    text-decoration: none; /* Ajouté */
    font-size: 20px;
}
.dropdown-menu li a:hover {
    color: var(--color-orange);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Case 3: Lien de Connexion */
.nav-connexion {
    /* AJOUTS CLÉS POUR ALIGNER LES DEUX ICÔNES */
    flex-shrink: 0; /* Empêche ce bloc de rétrécir */
    display: flex; /* Aligne les icônes à l'intérieur */
    align-items: center; /* Centre verticalement les icônes */
    justify-content: flex-end; /* Colle les icônes à droite */
    gap: 20px; /* Espace entre l'icône profil et déconnexion */
}
.nav-connexion a {
    color: var(--color-white);
    transition: color 0.3s;
    font-size: 1.5rem;
    text-decoration: none;
}
.nav-connexion a:hover {
    color: var(--color-orange);
}

/* ----------------------------------------------------- */
/* 3. SECTION PRINCIPALE (MAIN BANNER)                   */
/* ----------------------------------------------------- */
#main-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: var(--nav-height); /* Décale le contenu sous la nav bar fixe */
    text-align: start;
}

/* Espace Grand Logo */
.banner-logo-space {
    flex-grow: 1; /* Prend l'espace disponible */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:90vh;
    padding: 20px;
}

.banner-logo-space img{
        width:90%;
        height:100%;
}

/* Barre horizontale fine et noire (non pleine largeur) */
.thin-black-line {
    width: 50%; /* Ne prend pas toute la largeur */
    height: 1px;
    background-color: var(--color-black);
    border: none;
    margin: 20px 0;
}

/* Contenu de présentation */
.presentation-content {
    max-width: var(--max-content-width);
    margin: 20px auto;
    padding: 0 20px;
}
.presentation-content h2 { margin-bottom: 15px; }

/* Conteneur des deux boutons */
.banner-buttons-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espace entre les deux boutons */
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: var(--max-content-width);
    width: 100%;
    padding: 0 20px;
}

/* Les deux boutons ont la même taille */
.banner-buttons-container .button {
    width: 200px; /* Taille fixe */
    border-radius: 5px;
    font-size: 1.1em;
}

/* Styles spécifiques pour l'inversion des couleurs au survol */
.orange-bg.white-text:hover {
    background-color: var(--color-cream);
    color: var(--color-black);
}

.orange-bg.white-text{
    border-radius:3px;
    font-weight: 100;
}

.white-bg.black-text:hover {
    background-color: var(--color-orange);
    color: var(--color-white);
    border-color:var(--color-orange);
}

.white-bg.black-text {
    background-color: var(--color-cream);
    color: var(--color-black);
    border-color:var(--text);
    border-radius:3px;
    font-weight: 100;
    border-width: 2px;
}

h2{
    font-size:60px;
}

/* ----------------------------------------------------- */
/* 4. CARROUSEL AUTOMATIQUE (SECTION 3)                  */
/* ----------------------------------------------------- */
#auto-carousel-section {
    padding-top: 20px;
    padding-bottom: 60px;
    text-align: center;
}

/* Navigation par titres */
.carousel-nav-titles {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    position: relative; /* Pour positionner l'underline */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    max-width: var(--max-content-width);
    margin: 0 auto 30px;
}
.carousel-title {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-black);
    transition: color 0.3s;
    flex-grow: 1;
    max-width: 25%; /* 4 titres, donc max 25% chacun */
    font-family: "Juana Regular";
    font-size: 25px;
    font-weight: 500;
}
.carousel-title:hover {
    color: var(--color-orange);
}

/* Soulignement actif */
#nav-underline {
    position: absolute;
    bottom: -1px; /* Pour être juste sous la bordure de .carousel-nav-titles */
    height: 3px;
    background-color: navy;
    transition: transform 0.5s ease, width 0.5s ease; /* Transition pour le déplacement et la taille */
    width: 0; /* Géré par JS */
    left: 0;
}
.carousel-title.active {
    color: black;
}

/* Conteneur des slides */
.carousel-container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    overflow: hidden; /* Masque les slides non visibles */
    position: relative;
    height: 150px; /* Hauteur fixe pour le carrousel */
}
.carousel-slide {
    display: none; /* Masqué par défaut, JS gère l'affichage */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: ttransform 0.5s ease, width 0.5s ease; 
}
.carousel-slide.active {
    display: flex;
    opacity: 1;
}

.carousel-slide p {
    margin-bottom: 15px;
}
.carousel-slide .button {
    min-width: 150px;
    background-color: var(--color-dark-gray);
    border-color:var(--color-dark-gray);
    border-radius:3px;
    color:var(--color-white);
}

.carousel-slide .button:hover {
    min-width: 150px;
    background-color: var(--color-orange);
    border-color:var(--color-orange);
    border-radius:3px;
    color:var(--color-white);
}

/* ----------------------------------------------------- */
/* 5. CARROUSEL MANUEL (SECTION 4)                       */
/* ----------------------------------------------------- */
#manual-carousel-section {
    text-align: start;
    padding-top: 60px;
    padding-bottom: 120px;
}

.fixed-content-above {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
}
.fixed-content-above h2 { color: var(--color-white); margin-bottom: 10px; }

.manual-carousel-wrapper {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.manual-carousel-container {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth; /* Pour la transition de défilement */
    flex-grow: 1; /* Prend tout l'espace entre les flèches */
}

.carousel-item {
    min-width: 25%; /* 4 éléments visibles sur 5 */
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-white);
    transition: opacity 0.3s;
}
.carousel-item:hover {
    opacity: 0.8;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    border-radius: 5px;
}
.carousel-item span {
    font-weight: bold;
    color: var(--color-white);
}

/* Flèches de navigation */
.carousel-arrow {
    background: none;
    border: none;
    color: var(--color-orange);
    font-size: 2.5em;
    cursor: pointer;
    padding: 0 15px;
    transition: color 0.3s;
}
.carousel-arrow:hover {
    color: var(--color-white);
}

/* ----------------------------------------------------- */
/* 6. CADRE FLOTTANT (SECTION 5) & SUPPORT (SECTION 6)   */
/* ----------------------------------------------------- */

/* Le support est juste là pour l'espace */
#support-section {
    min-height: 200px;
    padding: 100px 0; /* Ajout de padding pour l'espace */
    height:550px;
}


/* Conteneur pour le positionnement du cadre */
#floating-box-wrapper {
    /* Utiliser position: relative sur le parent pour contrôler le flux normal */
    /* et ajuster le positionnement du cadre flottant */
    position: relative;
    /* On utilise une marge négative pour faire remonter le cadre au dessus de la section précédente */
    margin-top: -600px; 
    margin-bottom: 100px; /* Ajout de marge négative pour chevauchement */
    z-index: 10; /* Assure qu'il est au-dessus des sections */
    display: flex;
    justify-content: center;
}

/* Le Cadre Flottant lui-même */
#floating-box {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    padding: 100px;
    width: 90%;
    max-width: 1400px; /* Ne prend pas toute la largeur */
    text-align: start;
    position: relative;
}
#floating-box h2 { color: var(--color-dark-gray); margin-bottom: 5px; }
#floating-box h3 { margin-bottom: 15px; color: var(--color-orange); font-size:30px}

.separator-line {
    width: 60%;
    height: 1px;
    background-color: var(--color-dark-gray);
    border: none;
    margin-bottom: 15px;
}
.floating-frame p {
    margin-bottom: 20px;
}

/* Flèche de lien en bas à droite */
.action-arrow {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: var(--color-orange);
    transition: color 0.3s;
}
.action-arrow:hover {
    color: var(--color-dark-gray);
}

/* ----------------------------------------------------- */
/* 7. SECTION CONTENU AVEC IMAGE (SECTION 7)             */
/* ----------------------------------------------------- */
.content-with-image {
    display: flex;
    max-width: var(--max-content-width);
    margin: 50px auto; /* Centrage et espace après la section flottante */
    padding: 20px;
    align-items: center;
    gap: 40px;
}

.content-text {
    flex: 3; /* Prend la moitié de l'espace */
    padding-right: 20px;
}
.content-text h2 {
    color: var(--color-dark-gray);
    margin-bottom: 15px;
}
.content-text p {
    margin-bottom: 10px;
}

.content-image {
    flex: 1; /* Prend l'autre moitié de l'espace */
}
.content-image img {
    width: 60%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------- */
/* 8. FOOTER (PIED DE PAGE)                              */
/* ----------------------------------------------------- */
.dark-footer {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
    padding: 40px 20px 10px;
    text-align: center;
}

.footer-top {
    max-width: var(--max-content-width);
    margin: 0 auto 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    text-align: left;
}


/* Newsletter (Partie Gauche) */
.footer-newsletter {
    padding-left:10%;
    width:60%;
}
.footer-newsletter h4 { color: var(--color-orange); margin-bottom: 10px; font-size:20px;}
.footer-newsletter form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-newsletter input[type="email"] {
    padding: 10px;
    border: none;
    flex-grow: 1;
    border-radius: 3px;
    max-width: 300px;
    border-radius: 3px;
    margin-top:30px;
}
.footer-newsletter button {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-weight: bold;
    transition: opacity 0.3s;
    max-width: 300px;
    border-radius: 3px;
    margin-top:10px;
}

/* Liens d'information (Partie Droite) */
.footer-links {
   width: 40%;
}
.footer-links h4 { color: var(--color-orange); margin-bottom: 10px; font-size:25px;}
.footer-links ul { list-style: none; }
.footer-links li a { display: block; padding: 5px 0; transition: color 0.3s; }
.footer-links li a:hover { color: var(--color-orange); }

/* Séparation */
.footer-separator {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: var(--max-content-width);
    margin: 20px auto;
}

/* Réseaux Sociaux */
.footer-social {
    max-width: var(--max-content-width);
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    gap: 60px;
}
.footer-social a {
    color: var(--color-white);
    transition: color 0.3s;
}
.footer-social a:hover {
    color: var(--color-orange);
}

/* Texte Obligatoire */
.footer-bottom-text {
    font-size: 0.8em;
    padding-top: 10px;
}

/* ----------------------------------------------------- */
/* 9. MEDIA QUERIES (pour l'adaptabilité)                */
/* ----------------------------------------------------- */
@media (max-width: 768px) {
    /* Adaptation de la Navbar */
    .nav-links {
        gap: 15px;
    }
    .nav-links a {
        padding: 5px 10px;
        font-size: 0.9em;
    }
    .dropdown-menu {
        min-width: 150px;
    }

    /* Adaptation de la Section Principale */
    .banner-buttons-container {
        flex-direction: column;
        align-items: center;
    }
    .banner-buttons-container .button {
        width: 80%;
        max-width: 300px;
    }
    
    /* Adaptation du Carrousel Auto */
    .carousel-title {
        font-size: 0.9em;
        padding: 10px 5px;
    }

    /* Adaptation du Carrousel Manuel */
    .carousel-item {
        min-width: 50%; /* 2 éléments visibles sur mobile */
    }

    /* Adaptation de la Section Image */
    .content-with-image {
        flex-direction: column;
    }
    .content-text, .content-image {
        padding-right: 0;
    }

    /* Adaptation du Footer */
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-newsletter, .footer-links {
        max-width: 100%;
    }
    .footer-newsletter form {
        flex-direction: column;
    }
    #floating-box {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    padding: 20px;
    width: 90%;
    max-width: 1400px; /* Ne prend pas toute la largeur */
    text-align: start;
    position: relative;
}
.nav-logo img {
    display:none;
}

.content-image img {
    width: 50%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-left:25%;
}

#support-section {
    min-height: 200px;
    padding: 100px 0; /* Ajout de padding pour l'espace */
    height:950px;
}

/* Conteneur pour le positionnement du cadre */
#floating-box-wrapper {
    /* Utiliser position: relative sur le parent pour contrôler le flux normal */
    /* et ajuster le positionnement du cadre flottant */
    position: relative;
    /* On utilise une marge négative pour faire remonter le cadre au dessus de la section précédente */
    margin-top: -1000px; 
    margin-bottom: 100px; /* Ajout de marge négative pour chevauchement */
    z-index: 10; /* Assure qu'il est au-dessus des sections */
    display: flex;
    justify-content: center;
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 40px; /* Espace entre les liens */
    flex-grow: 2; /* Pour prendre plus de place que les autres sections */
    justify-content: center;
    font-size: 13px;
}
}
h1,h2,h3,h4{
    font-weight: 100; 
    font-family: "Juana Regular";
}




/* ==========================================================
// FICHIER: style.css - Section Formulaires Authentification (V3)
// Rôle: Conteneur plus grand, une seule ligne de séparation sous les champs.
// ========================================================== */

/* --- 1. Isolation et Conteneur Principal --- */

/* Applique ces styles au body des pages de connexion/inscription */
.page-connexion,
.page-inscription {
    font-family: Arial, sans-serif;
    background-color: var(--color-cream); 
    margin: 0;
    
    /* Centrage du container au milieu de la page */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    position: relative; 
}

/* --- 2. Flèche de Retour (Logo) --- */

.page-connexion .back-arrow,
.page-inscription .back-arrow,
.back-arrow{
    position: absolute;
    top: 30px; /* Légèrement plus bas */
    left: 30px; /* Légèrement plus à droite */
    font-size: 5em;
    text-decoration: none;
    color: #000;
    line-height: 1; 
    transition: opacity 0.3s;
    z-index: 10;
}

.page-connexion .back-arrow:hover,
.page-inscription .back-arrow:hover {
    opacity: 0.7;
}

/* --- 3. Conteneur du Formulaire (Rectangulaire et plus Grand) --- */

.page-connexion .container,
.page-inscription .container {
    background: None;
    padding: 60px 80px; /* Augmentation massive du padding pour agrandir le rectangle */
    border-radius: 12px;
    
    /* Le conteneur prend 80% de la largeur du viewport */
    width: 80%; 
    max-width: 900px; /* Augmentation de la limite max */
    box-sizing: border-box;
}

/* --- 4. Titre (Aligné à Gauche et Gros) --- */

.page-connexion .form-title,
.page-inscription .form-title {
    text-align: left; 
    margin-bottom: 50px; /* Plus d'espace sous le titre */
    color: #000;
    font-size: 4em; /* Titre très très gros */
    font-weight: 800;
    letter-spacing: 1px;
}

/* --- 5. Champs d'Input (Une seule ligne et Police Courier New) --- */

.page-connexion .input-group,
.page-inscription .input-group {
    position: relative;
    margin-bottom: 40px; /* Plus d'espace entre les champs */
    padding-top: 15px; 
}

/* Style commun aux champs */
.page-connexion .input-group input,
.page-inscription .input-group input {
    width: 100%;
    border: none;
    padding: 8px 0;
    font-size: 1.1em;
    box-sizing: border-box;
    background: transparent; 
    
    /* SEULEMENT LA LIGNE DU BAS */
    border-top: none; /* ENLÈVE LA LIGNE DU HAUT */
    border-bottom: 1px solid #000; 
    
    /* Police Courier New pour l'écriture */
    font-family: "Courier New", Courier, monospace;
    letter-spacing: 0.5px; 
}

/* Retrait du contour par défaut au focus */
.page-connexion .input-group input:focus,
.page-inscription .input-group input:focus {
    outline: none;
    /* On renforce la ligne du bas au focus */
    border-bottom: 2px solid #000; 
}

/* Le label qui "flotte" */
.page-connexion .input-group label,
.page-inscription .input-group label {
    position: absolute;
    top: 0; 
    left: 0;
    font-size: 0.85em; 
    color: #000;
    transition: all 0.2s ease-out;
    pointer-events: none; 
    transform-origin: left top;
}

/* État du label lorsque l'input est rempli ou en focus */
.page-connexion .input-group input:focus + label,
.page-connexion .input-group input:not(:placeholder-shown) + label,
.page-inscription .input-group input:focus + label,
.page-inscription .input-group input:not(:placeholder-shown) + label {
    top: -15px; /* Déplace le label au-dessus du champ */
    font-size: 0.7em; 
    color: #555;
    transform: scale(0.9);
}

/* --- 6. Boutons (Styles Génériques) --- */

.page-connexion [class^="btn-"],
.page-inscription [class^="btn-"] {
    padding: 12px 20px; /* Padding ajusté pour l'effet grand rectangle */
    border-radius: 4px;
    font-size: 1.1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, opacity 0.3s;
    font-weight: bold;
    font-family: "Courier New", Courier, monospace;
    font-weight: 100;
}

/* Bouton Noir */
.page-connexion .btn-black,
.page-inscription .btn-black { 
    background-color: #000;
    color: white;
    border: 2px solid #000;
    display: block; 
}

.page-connexion .btn-black:hover,
.page-inscription .btn-black:hover {
    background-color: #333;
    border-color: #333;
}

/* Bouton Blanc (Connexion) */
.page-connexion .btn-white { 
    background-color: None;
    color: #000;
    border: 2px solid #000;
    line-height: normal; 
    display: block; 
}

.page-connexion .btn-white:hover {
    background-color: #f0f0f0;
}

/* Conteneur des deux boutons pour la page Connexion */
.page-connexion .button-group-duo {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px; /* Plus d'espace entre les boutons */
    margin-top: 50px; /* Plus d'espace avant les boutons */
}

/* Bouton pleine largeur (Inscription) */
.page-inscription .btn-full-width {
    width: 100%;
    margin-top: 50px;
}

/* --- 7. Messages et Liens --- */

.page-connexion .forgot-link {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
}

.page-connexion .forgot-link a {
    color: #000;
    text-decoration: none;
}

.page-connexion .forgot-link a:hover {
    text-decoration: underline;
}

/* From Uiverse.io by Maximinodotpy */ 
.inputGroup {
  font-family: 'Segoe UI', sans-serif;
  margin: 1em 0 1em 0;
  max-width: 800px;
  position: relative;
  
}

.inputGroup input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 2px solid var(--color-dark-gray);
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
}

.inputGroup label {
  font-size: 100%;
  position: absolute;
  left: 0;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: var(--color-dark-gray);
}

.inputGroup :is(input:focus, input:valid)~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
  background-color: var(--color-cream);
}

.inputGroup :is(input:focus, input:valid) {
  border-color: var(--color-orange);
}



/* ==========================================================
// FICHIER: style.css - Styles pour la Page archive.php
// ========================================================== */
/* --- Global Layout & Reset --- */

.page-archives {
    margin: 0;
    display: flex; 
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-cream);
}

.archive-main-layout {
    display: flex;
    flex-grow: 1; 
    width: 100%;
    overflow: hidden;
}

/* --- 1. Colonne Gauche : Catégories (200px de large) --- */

.archive-sidebar {
    width: 200px; 
    min-width: 200px;
    background-color: var(--color-text);
    padding: 20px; 
    overflow-y: auto; 
    flex-shrink: 0; 
    transition: width 0.3s;
    margin-top:60px;
    box-shadow: 3px 0 3px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
    font-size: 1.1em; 
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 15px; 
    font-weight: 700;
}

/* Styles des liens de catégories (simples et peu gros) */
.category-link {
    text-decoration: none;
    color: var(--color-dark-gray);
    padding: 6px 0; 
    display: block;
    font-size: 0.9em; 
    transition: color 0.2s;
    font-weight: 500;
}


.category-link:hover {
    color: var(--text);
}

.category-link.active-filter {
    font-weight: bold;
    color: var(--text);
}

.home-link {
    font-weight: bold;
    color: var(--color-orange);
    padding: 10px 0;
}

.home-link:hover {
    font-weight: bold;
    padding: 10px 0;
    opacity: 0.6;
}

.home-icon {
    margin-right: 8px;
    color: var(--color-orange);
}

.category-separator {
    border: none;
    border-top: 1px solid var(--color-dark-gray); 
    margin: 5px 0; 
    opacity: 0.2;
}

/* Sous-catégories (très discrètes) */
.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-icon {
    cursor: pointer;
    color: #ccc;
    padding: 5px;
    font-size: 0.75em; 
}

.sub-categories {
    list-style: none;
    padding: 5px 0 5px 15px;
    margin: 0;
    width: 100%;
}

.sub-categories li a {
    color: #888;
    font-size: 0.85em; 
    padding: 3px 0; 
    display: block;
}

.sub-categories li a:hover {
    color: var(--color-orange);
    font-size: 0.85em; 
    padding: 3px 0; 
    display: block;
}


/* --- 2. Colonne Droite : Contenu (3/4) --- */

.archive-content-area {
    flex-grow: 1; 
    padding: 0px;
    display: flex;
    flex-direction: column;
    height:100vh;
}

.content-title {
    font-size: 3.5em;
    margin-top: 5px;
    font-weight: 800;
    color: var(--text);
    font-weight: 100; 
}

.content-intro {
    font-size: 1em;
    color: var(--text);
    margin-bottom: 2px;
    margin-top:-25px;
}

/* Barre de Recherche */

.search-form {
    display: flex;
    /* justify-content: space-between; n'est plus strictement nécessaire 
       si l'input a flex-grow: 1, mais ne fait pas de mal */
    justify-content: flex-start; /* S'assure que tout commence à gauche */
    align-items: stretch; /* Assure que l'input et le bouton ont la même hauteur */
    
    border: 1px solid #ccc;
    border-radius: 6px;

    overflow: hidden;
    max-width: 500px;
    margin-bottom: 0px;
    background-color: var(--color-cream);
    height:50px;
}

.search-input {
    /* CORRECTION CLÉ : L'input prend tout l'espace disponible et pousse le bouton à droite */
    flex-grow: 1; 
    /* Assurance que le texte commence bien à gauche */
    text-align: left;
    padding: 12px 15px;
    border: none;
    font-size: 1em;
    outline: none;
    background-color: var(--color-cream); 
    width:1000%;
}

.search-button {
    /* Assure que le bouton ne prend que l'espace nécessaire (par défaut, mais explicite) */
    
    background-color: var(--color-orange);
    color: white;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    width:50%;
    border-radius:50px;
    height:80%;
    margin-top:5px;
}

.articles-scroll-area {
    flex-grow: 1; 
    overflow-y: auto; 
    padding-right: 20px; 
    height:50vh;
}

/* --- 3. Style des Cartes Articles (Cliquable et Photo à droite) --- */

.article-card-link {
    text-decoration: none; /* Enlève le soulignement du lien */
    display: block; /* Prend toute la largeur disponible */
    margin-bottom: 25px;
}

.article-card {
    display: flex;
    flex-direction: row-reverse; /* Place l'image à droite */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: var(--color-white); 
    transition: box-shadow 0.3s, transform 0.2s;
}

.article-card-link:hover .article-card {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px); /* Léger effet de soulèvement */
}

.article-image-container-right {
    /* Fixe une largeur, par exemple 180px. Changez cette valeur à votre goût. */
    width: 200px; 
    /* Fixe une hauteur, par exemple 120px. Changez cette valeur. */
    height: 150px;
    /* Empêche le conteneur de grandir ou rétrécir si vous utilisez flexbox. */
    flex-shrink: 0; 
    /* Cache les parties de l'image qui dépassent. */
    overflow: hidden; 
    /* Optionnel : ajoute une légère bordure arrondie. */
    border-radius: 8px; 
}

.article-image {
    /* L'image prend 100% de la largeur de son conteneur. */
    width: 100%;
    /* L'image prend 100% de la hauteur de son conteneur. */
    height: 100%;
    /* C'EST LA PROPRIÉTÉ MAGIQUE : */
    /* L'image va couvrir tout l'espace disponible en gardant ses proportions, */
    /* même si cela signifie qu'une partie de l'image est rognée (comme un zoom). */
    object-fit: cover;
}

.article-card-link:hover .article-image {
    transform: scale(1.05); 
}

.article-info-left {
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    width: 70%; /* Le texte prend 70% */
}

.article-title {
    margin-top: 0;
    font-size: 1.6em;
    color: var(--text);
    margin-bottom: 5px;
}

.article-description {
    color: var(--text);
    margin-bottom: 10px;
    font-size: 0.95em;
    /* Limiter à 3 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    align-self: flex-start;
    font-size: 0.9em;
}

.page-archives{
    overflow : hidden;
}


/* ==========================================================
   STYLES POUR LA PAGE FACT (fact.php)
   ========================================================== */

.fact-page {
    background-color: #f4f4f9;
    font-family: 'Georgia', serif; /* Ou votre police principale */
    color: #333;
    line-height: 1.7;
    margin: 0;
    padding: 20px;
}

.fact-container {
    max-width: 1200px; /* Largeur du contenu principal */
    margin: 40px auto; /* Centre la boîte */
    padding: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.fact-header {
    text-align: center;
    margin-bottom: 30px;
}

.fact-header h1 {
    font-size: 2.5em; /* Taille du titre principal */
    margin: 0 0 10px 0;
    color: #1a1a1a;
}

.fact-header h2 {
    font-size: 1.5em; /* Taille du sous-titre */
    margin: 0;
    color: #555;
    font-style: italic;
    font-weight: normal; /* Sous-titre moins gras */
}

.fact-separator {
    border: none;
    border-top: 1px solid #eee; /* Ligne fine de séparation */
    margin: 30px 0;
}

.fact-content {
    font-size: 1.1em; /* Taille du texte principal */
    margin-bottom: 40px;
}

.fact-content p {
    margin-bottom: 1.5em; /* Espace entre les paragraphes générés */
}

/* Style pour les liens des sources dans le texte */
.fact-content a sup {
    font-weight: bold;
    color: #007bff; /* Couleur bleue pour les liens */
    text-decoration: none; /* Pas de soulignement sur l'exposant */
    vertical-align: super; /* Assure un bon alignement vertical */
    font-size: 0.8em; /* Exposant légèrement plus petit */
    margin-left: 2px; /* Petit espace avant l'exposant */
}
.fact-content a:hover sup {
    text-decoration: underline; /* Souligne au survol */
}


/* --- Section des Sources --- */
.fact-sources {
    margin-top: 40px;
    padding: 30px;
    background-color: #2c2c2c; /* Fond sombre */
    color: #e0e0e0; /* Texte clair */
    border-radius: 8px;
}

.fact-sources h2 {
    color: #ffffff; /* Titre blanc */
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

/* Style de la liste ordonnée (<ol>) */
.fact-sources ol {
    list-style-type: decimal; /* Numérotation standard 1. 2. 3. */
    list-style-position: inside; /* Met le numéro à l'intérieur de la puce */
    padding-left: 0; /* Retire le padding par défaut */
    margin: 0;
}

.fact-sources li {
    padding: 8px 0;
    border-bottom: 1px solid #444; /* Séparateur plus subtil */
    margin-left: 0; /* Assure qu'il n'y a pas de marge ajoutée par le navigateur */
}

.fact-sources li::marker { /* Style optionnel pour le numéro lui-même */
   font-weight: bold;
   color: #ffae00; /* Orange pour le numéro */
   padding-right: 5px; /* Espace après le numéro */
}


.fact-sources li:last-child {
    border-bottom: none;
}

/* Style pour les messages d'erreur si le fact n'est pas trouvé */
.error-message {
    color: #dc3545;
    text-align: center;
    font-weight: bold;
    padding: 20px;
}

/* Styles pour les messages de la newsletter */
.newsletter-message {
    font-size: 0.7em;
    padding: 8px;
    border-radius: 4px;
    text-align: center; /* Centre le message */
    display: none; /* Caché par défaut */
    width:300px;
}
.newsletter-message.loading { display: block; color: #666; } /* Style pendant le chargement */
.newsletter-message.success { display: block; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.newsletter-message.info   { display: block; background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.newsletter-message.error  { display: block; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }