@media (max-width: 700px) {
    .site-titles h1,
    .overlay-title,
    .blog-post .post-title {
        font-family: 'Lobster', cursive !important;
    }
    .image-and-text-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .image-and-text-container .page-hero-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
    }
    .image-and-text-container .description-text {
        width: 100%;
        max-width: 100%;
        text-align: left;
        box-sizing: border-box;
    }
}
/* Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); /* Assurez-vous que Lobster est bien là */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); /* Ajout de Montserrat pour le corps de texte */

/* Harmonisation Lobster sur tous les titres */
.main-title,
.site-titles h1,
.overlay-title,
.blog-post .post-title,
.blog-post h3,
.password-form-container h2 {
    font-family: 'Lobster', cursive !important;
}

/* Footer social icons style */
.main-footer .social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: var(--accent-color-complementary);
    color: var(--text-light);
    padding: 0.6rem 1.2rem;
    margin: 0 0.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color var(--transition-speed) ease;
}
.main-footer .social-links a:hover {
    background: var(--accent-color-primary);
}
.main-footer .social-links img {
    height: 22px;
    width: 22px;
    margin-right: 0.3em;
    vertical-align: middle;
}

/* Responsive stacking for image-and-text-container */
.image-and-text-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 700px) {
    .image-and-text-container {
        flex-direction: column !important;
        align-items: stretch;
        gap: 0.8rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .image-and-text-container .page-hero-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
    }
    .image-and-text-container .description-text {
        width: 100%;
        max-width: 100%;
        text-align: left;
        box-sizing: border-box;
    }
}


/* Variables CSS pour faciliter la gestion des couleurs et tailles */
:root {
    --primary-color: #ffcccc; /* Rose clair pour l'arrière-plan ou éléments légers */
    --accent-color-primary: #ff6699; /* Rose plus foncé, couleur principale des accents */
    --accent-color-complementary: #8844aa; /* Violet pour un contraste agréable */
    --main-title-color: #ff3366; /* Rose vif pour les titres principaux */
    --subtitle-color: #666; /* Gris pour les sous-titres */
    --text-dark: #333; /* Couleur de texte foncée */
    --text-light: #f9f9f9; /* Couleur de texte claire */
    --background-light: #f9f9f9; /* Arrière-plan général clair */
    --background-dark: #333; /* Arrière-plan foncé pour certains éléments */
    --border-color: #eee; /* Couleur des bordures */
    --box-shadow-light: 0 4px 8px rgba(0,0,0,0.1); /* Ombre légère pour les cartes/tuiles */
    --box-shadow-medium: 0 6px 12px rgba(0,0,0,0.15); /* Ombre moyenne */
    --border-radius: 12px; /* Rayon de bordure général */
    --transition-speed: 0.3s; /* Vitesse de transition pour les animations */
}

/* Réinitialisation de base pour tous les éléments */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Défilement doux */
}

body {
    font-family: 'Montserrat', sans-serif; /* Changement de police pour le corps */
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    overflow-x: hidden; /* Empêche le défilement horizontal non désiré */
}

/* Styles pour le header principal (pour index.html) */
.main-header {
    background-color: var(--accent-color-primary);
    color: var(--text-light);
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: var(--box-shadow-medium);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    display: flex; /* Utilisé pour aligner header-content et main-nav */
    flex-direction: column; /* Les éléments internes sont en colonne par défaut */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet le retour à la ligne pour les petits écrans */
}

.header-content { /* Ce conteneur est pour le logo et les titres côte à côte */
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Espace entre le logo et les titres */
    max-width: 1200px;
    width: 100%;
    justify-content: center; /* Centre le contenu du header */
}

.site-logo {
    height: 90px; /* Taille du logo */
    width: auto;
    border-radius: 50%; /* Rend le logo rond */
    border: 3px solid var(--text-light);
    object-fit: cover;
}

.site-titles h1 {
    font-family: 'Lobster', cursive !important;
    font-size: 3.5rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}


.site-titles .subtitle {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-top: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}



/* Styles pour le menu de navigation (pour les pages internes) */
.main-nav {
    width: 100%;
    max-width: 1200px; /* Aligné avec le contenu du header */
    margin-top: 1rem; /* Espace sous le titre */
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Séparateur subtil */
    padding-top: 1rem;
}

.main-nav .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    gap: 1.2rem;
    white-space: nowrap; /* Empêche le retour à la ligne dans les titres */
}

.main-nav .nav-links li a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: bold;
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    font-size: 1.1rem;
    white-space: nowrap;
@media (max-width: 1000px) {
    .main-nav .nav-links li a {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }
    .main-nav .nav-links {
        gap: 0.8rem;
    }
}
}

.main-nav .nav-links li a:hover,
.main-nav .nav-links li a.active { /* Pour le lien actif */
    background-color: rgba(0, 0, 0, 0.2); /* Légèrement plus foncé au survol/actif */
    color: var(--primary-color); /* Couleur claire au survol */
}


/* Styles pour le contenu principal (la grille de tuiles et le contenu des pages) */
.main-content {
    padding: 2.5rem 1rem;
    max-width: 1200px; /* Largeur maximale pour le contenu */
    margin: 0 auto; /* Centrage automatique */
}

/* Styles spécifiques à la section de grille de tuiles */
.grid-section {
    padding: 0;
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Tuiles responsives */
    gap: 2rem; /* Espace entre les tuiles */
    justify-content: center; /* Centrer les tuiles dans la grille */
}

.tile {
    display: block; /* Pour que le lien prenne toute la zone */
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    height: 300px; /* Hauteur fixe pour les tuiles */
}

.tile:hover {
    transform: translateY(-8px); /* Effet de soulèvement au survol */
    box-shadow: var(--box-shadow-medium);
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre la tuile sans être déformée */
    display: block;
    transition: transform var(--transition-speed) ease;
}

.tile:hover img {
    transform: scale(1.05); /* Zoom léger de l'image au survol */
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)); /* Dégradé pour le texte */
    color: var(--text-light);
    padding: 1.5rem 1rem;
    min-height: 50%; /* L'overlay prend au moins 50% de la hauteur */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Texte aligné en bas */
    transition: background var(--transition-speed) ease;
}

.tile:hover .overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1)); /* Dégradé plus prononcé au survol */
}

.overlay-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-family: 'Lobster', cursive; /* Police Lobster pour les titres d'overlay */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.tile .overlay-subtitle {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tile:hover .overlay-subtitle,
.tile:focus .overlay-subtitle {
    opacity: 1;
}
    .overlay-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    }

/* Styles pour le footer */
.main-footer {
    background-color: var(--background-dark);
    color: var(--text-light);
    padding: 2rem 1rem;
        text-align: center;
    margin-top: 3rem;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
    }

.footer-content p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.footer-content a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.footer-content a:hover {
    color: var(--accent-color-primary);
}

.social-links a {
    display: inline-block;
    background-color: var(--accent-color-complementary);
    color: var(--text-light);
    padding: 0.6rem 1.2rem;
    margin: 0 0.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color var(--transition-speed) ease;
}

.social-links a:hover {
    background-color: var(--accent-color-primary);
}


/* --- NOUVEAUX STYLES POUR LE CONTENU DES PAGES SPÉCIFIQUES --- */

/* Image principale de la page (hero image) */
.page-hero-image {
    width: 100%;
    max-width: 800px; /* Ajustez selon le design souhaité */
    height: auto;
    display: block;
    margin: 2rem auto; /* Centre l'image et ajoute de l'espace */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    object-fit: cover;
}

/* Conteneur pour les sections de contenu spécifique (listes, embeds, etc.) */
.specific-content-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.05); /* Ligne de séparation subtile */
}

.specific-content-section h3 {
    color: var(--accent-color-primary);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.specific-content-section ul {
    list-style: none; /* Enlève les puces par défaut */
    padding: 0;
}

.specific-content-section ul li {
    background-color: #f0f0f0;
    margin-bottom: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    color: var(--text-dark);
}

.specific-content-section ul li::before {
    content: '•'; /* Puce personnalisée */
    color: var(--accent-color-complementary);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: 0.5em;
}

/* Styles pour les embeds (audio/video) */
.specific-content-section iframe {
    max-width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* --- Styles pour les posts dynamiques (section "Actualités et Articles") --- */
.dynamic-posts-section {
    margin-top: 3rem;
    padding-top: 2rem;
    /* La bordure supérieure peut rester si elle sert de séparateur visuel entre la section précédente et les posts */
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* Retrait du style du titre H2 puisque nous ne voulons plus de titre */
.dynamic-posts-section h2 {
    display: none; /* Cache complètement le titre si un h2 est généré */
}

#posts-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Espacement entre les posts */
}


.blog-post {
    background-color: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    overflow: hidden; /* S'assure que le contenu est bien à l'intérieur des bordures arrondies */
    display: flex; /* Utilise Flexbox pour la mise en page interne du post */
    flex-direction: column; /* Par défaut, empile les éléments */
    position: relative; /* Pour le positionnement des éléments internes si besoin */
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-medium);
}

/* Styles pour le wrapper interne du post, pour la disposition média/texte */
.blog-post .post-wrapper {
    display: flex;
    flex-direction: row; /* Média et texte côte à côte */
    align-items: flex-start; /* Aligne le texte en haut de la boîte média */
    gap: 1.5rem;
    padding: 1.5rem; /* Padding interne pour le contenu du post */
}

.blog-post .media {
    flex-shrink: 0;
    width: 33%;
    min-width: 180px;
    background: none; /* Suppression du fond rose, boîte neutre */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.blog-post .media img,
.blog-post .media iframe {
    width: 100%; /* Ne dépasse pas la boîte media */
    max-width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border: none;
    border-radius: var(--border-radius); /* Tous les coins arrondis */
    margin-bottom: 10px;
    /* Aucun filtre, affichage couleur naturel */
}

.blog-post .text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne le texte en haut de la boîte média */
    text-align: justify;
    padding-left: 1.5rem;
}

.blog-post h3 {
    color: var(--accent-color-complementary); /* Couleur pour le titre du post */
    font-family: 'Lobster', cursive;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}

.blog-post .post-date {
    font-size: 0.9rem;
    color: var(--subtitle-color);
    margin-bottom: 1rem;
    align-self: flex-start; /* Aligne la date à gauche */
}

.blog-post p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

/* Ajout d'un bouton "Lire la suite" ou similaire pour une bonne UX */

/* Multi-illustrations layout for posts with multiple images/videos */
.multi-illustrations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.illustration-block {
  flex: 0 1 calc(33% - 20px);
  max-width: 300px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.illustration-block img,
.illustration-block iframe {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.video-subtitle {
  margin-top: 8px;
  font-size: 0.95em;
  color: #555;
  text-align: center;
}
.blog-post .read-more {
    display: inline-block;
    background-color: var(--accent-color-primary);
    color: var(--text-light);
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color var(--transition-speed) ease;
    align-self: flex-end; /* Aligne le bouton à droite */
}

.blog-post .read-more:hover {
    background-color: var(--main-title-color);
}


/* --- Styles pour la page Partitions --- */
    .password-form-container {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    max-width: 500px;
    margin: 3rem auto;
        text-align: center;
    }

/* Responsive pour les pages de partitions et Flat.io */
.main-content iframe {
  width: 100% !important;
  max-width: 100vw;
  min-width: 0;
  height: 480px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

@media (max-width: 900px) {
  .main-content {
    max-width: 100vw !important;
    padding: 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .main-content iframe {
    height: 340px !important;
  }
}

@media (max-width: 600px) {
  .main-content {
    max-width: 100vw !important;
    padding: 2px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .main-content iframe {
    height: 220px !important;
  }
}

.password-form-container h2 {
    font-family: 'Lobster', cursive;
    color: var(--main-title-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.password-form-container p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.password-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.password-input-group label {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.password-input-group input[type="password"] {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    width: 100%;
    max-width: 300px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.password-input-group input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-color-primary);
    box-shadow: 0 0 0 3px rgba(255, 102, 153, 0.2);
}

.password-input-group button {
    background-color: var(--accent-color-complementary);
    color: var(--text-light);
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, transform 0.2s ease;
}

.password-input-group button:hover {
    background-color: var(--accent-color-primary);
    transform: translateY(-2px);
}

#password-message {
    font-weight: bold;
}

.partitions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    background-color: #fff;
    box-shadow: var(--box-shadow-light);
    border-radius: var(--border-radius);
    overflow: hidden; /* Assure que les coins arrondis sont respectés */
}

.partitions-table th,
.partitions-table td {
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.partitions-table th {
    background-color: var(--accent-color-primary);
    color: var(--text-light);
    font-weight: bold;
    cursor: pointer;
    position: relative; /* Pour les indicateurs de tri */
    white-space: nowrap; /* Empêche le texte de se couper */
}

.partitions-table th[data-sort]:hover {
    background-color: #e05282; /* Légèrement plus foncé au survol */
}

/* Indicateurs de tri asc/desc */
.partitions-table th[data-sort][data-order="asc"]::after {
    content: ' ▲';
    font-size: 0.8em;
    vertical-align: super;
}

.partitions-table th[data-sort][data-order="desc"]::after {
    content: ' ▼';
    font-size: 0.8em;
    vertical-align: sub;
}


.partitions-table tr:nth-child(even) {
    background-color: #f5f5f5; /* Rayures pour la lisibilité */
}

.partitions-table td a {
    color: var(--accent-color-complementary);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.partitions-table td a:hover {
    color: var(--accent-color-primary);
}

.image-and-text-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.image-and-text-container .page-hero-image {
    width: 50%;
    height: auto;
    object-fit: cover;
}

.image-and-text-container .description-text { /* Ajout de cette classe */
    width: 50%;
    text-align: justify;
}

.image-and-text-container .description-text p { /* Style pour les paragraphes dans le div */
    margin-bottom: 1rem; /* Espacement entre les paragraphes */
}


/* --- Media Queries pour le Responsive Design --- */

/* Pour les écrans de taille moyenne (tablettes, petits ordinateurs) */
@media (max-width: 992px) {
    /* Le .header-content de l'index devient colonne */
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    .site-titles h1 {
        font-size: 3rem;
    }
    .site-titles .subtitle {
        font-size: 1.2rem;
    }
    .tiles-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    .main-content {
        padding: 2rem 1rem;
    }
    .page-hero-image {
        margin: 1.5rem auto;
    }
    /* Les posts sur des écrans plus petits peuvent passer en une seule colonne */
    #posts-container {
        grid-template-columns: 1fr;
    }

    /* Le média et le texte peuvent passer côte à côte sur les tablettes si désiré */
    .blog-post .post-wrapper {
        flex-direction: row; /* Média et texte côte à côte */
        align-items: flex-start;
    }
    .blog-post .media {
        width: 40%; /* Le média prend 40% de la largeur */
        max-height: 180px; /* Ajuster la hauteur pour une vue latérale */
    }
    .blog-post .text-content {
        width: 60%; /* Le texte prend 60% de la largeur */
        padding-left: 1.5rem; /* Espacement entre média et texte */
    }


    .dynamic-posts-section h2 {
        font-size: 2.5rem;
    }
    .blog-post h3 {
        font-size: 1.6rem;
    }
    .partitions-table th,
    .partitions-table td {
        padding: 0.8rem 1rem;
        font-size: 0.9em;
    }

    /* Ajustements pour les pages internes sur mobile: */
    body.internal-page .main-nav {
        /* Pas de changement de style particulier ici, il s'adapte avec .main-nav */
    }
}

/* Pour les petits écrans (smartphones) */
@media (max-width: 768px) {
    .main-header {
        padding: 1rem 0.5rem;
    }
    .site-logo {
        height: 70px;
    }
    .site-titles h1 {
        font-size: 2.5rem;
    }
    .site-titles .subtitle {
        font-size: 1rem;
    }
    .tiles-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 1rem;
    }
    .tile {
        height: 250px;
    }
    .overlay-title {
        font-size: 1.5rem;
    }
    .overlay-subtitle {
        font-size: 1rem;
    }
    .main-content {
        padding: 1.5rem 0.8rem;
    }
    .social-links a {
        padding: 0.5rem 0.8rem;
        margin: 0 0.3rem;
        font-size: 0.9rem;
    }
    .page-hero-image {
        margin: 1rem auto;
    }
    .dynamic-posts-section h2 {
        font-size: 2rem;
    }
    .blog-post {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    .blog-post h3 {
        font-size: 1.4rem;
    }

    /* Sur les très petits écrans, les posts reviennent à une colonne unique */
    .blog-post .post-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    .blog-post .media {
        width: 100%;
        max-height: 200px;
    }
    .blog-post .text-content {
        width: 100%;
        padding-left: 0; /* Pas de padding latéral quand c'est en colonne */
    }


    .password-form-container {
        padding: 1.5rem;
        margin: 2rem 1rem;
    }
    .password-form-container h2 {
        font-size: 2rem;
    }
    .password-input-group input[type="password"] {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    .password-input-group button {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }
    /* Rendre le tableau des partitions défilable horizontalement sur petits écrans */
    .partitions-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .partitions-table {
        min-width: 600px; /* Largeur minimale pour éviter un trop grand rétrécissement */
    }

    /* Réajustement des liens de navigation pour mobile */
    .main-nav .nav-links {
        flex-direction: column; /* Les liens du menu deviennent verticaux sur mobile */
        gap: 0.5rem; /* Réduit l'espace */
    }
    .main-nav .nav-links li a {
        width: 100%; /* Les liens prennent toute la largeur */
        text-align: center;
    }
}