/* =====================================
 * 1. CSS Reset
 * ===================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background-color: #121212;
    color: #e0e0e0;
}

/* =====================================
 * 2. Conteneur principal et mise en page
 * ===================================== */

/* Conteneur principal de la page */
.main-container {
    padding: 1rem; /* p-4 sur mobile */
    background-color: #121212;
    color: #e0e0e0;
}

/* Conteneur de contenu centré et largeur max */
.content-wrapper {
    max-width: 1280px; /* max-w-7xl de Tailwind */
    margin-left: auto;
    margin-right: auto;
}

/* Styles pour le titre et le sous-titre de la page */
.page-title {
    font-size: 2.5rem; /* text-4xl sur mobile */
    font-weight: 800; /* font-extrabold */
    text-align: center;
    margin-bottom: 1rem;
    color: #ffffff;
}

.page-subtitle {
    font-size: 1.125rem; /* text-lg sur mobile */
    text-align: center;
    margin-bottom: 3rem;
    color: #9ca3af; /* text-gray-400 */
}

/* Grille de cartes responsive */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crée une grille flexible */
    gap: 1.5rem; /* gap-6 */
}

/* =====================================
 * 3. Styles des cartes améliorés
 * ===================================== */

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: 1rem; /* rounded-2xl */
    text-decoration: none; /* Supprime le soulignement des liens */
    background-color: #1e1e1e;
    border: 1px solid #2d2d2d;
    margin: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    background-color: #2a2a2a;
}

.card-icon {
    height: 4rem; /* h-16 */
    width: 4rem; /* w-16 */
    color: #FFD700;
    margin-bottom: 1rem;
    transition: color 0.3s;
}

/* Effets de survol sur les icônes */
.card:hover .card-icon {
    color: #ffffff;
}

.card-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

/* Effets de survol sur les titres */
.card:hover .card-title {
    color: #FFD700;
}

.card p {
    font-size: 0.875rem; /* text-sm */
    color: #a0a0a0;
}

/* =====================================
 * 4. Réglages Responsifs
 * ===================================== */

@media (min-width: 768px) { /* md: à partir de 768px */
    .main-container {
        padding: 1rem; /* md:p-8 */
    }
    .page-title {
        font-size: 3rem; /* md:text-5xl */
    }
    .card-grid {
        gap: 2rem; /* md:gap-8 */
    }
}

@media (min-width: 1024px) { /* lg: à partir de 1024px */
    .main-container {
        padding: 1rem; /* lg:p-12 */
    }
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background-color: #121212;
    color: #e0e0e0;
}

/* =====================================
 * 2. Mise en page principale
 * ===================================== */

.flex-container {
    display: flex;
    flex-direction: column; /* Par défaut en colonne pour mobile-first */
    min-height: 100vh;
}

.sidebar {
    width: 100%; /* Occupe toute la largeur sur mobile */
    padding: 1.5rem;
    background-color: #1e1e1e;
    border-right: none;
    flex-shrink: 0;
}

.main-content {
    flex-grow: 1;
    padding: 1.5rem;
}

/* =====================================
 * 3. Formulaires et Boutons
 * ===================================== */

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.sidebar h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #e0e0e0;
}

.sidebar label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #a0a0a0;
}

.input-field,
.select-field {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #1f1f1f;
    border: 1px solid #4b5563;
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus,
.select-field:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    gap: 1rem;
}

/* =====================================
 * 4. Contenu de sortie et pied de page
 * ===================================== */

.main-content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #e0e0e0;
}

.output-box {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    min-height: 50vh;
    overflow-y: auto;
    border: 1px solid #333333;
    margin-bottom: 2rem;
}

.output-box h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #333333;
    padding-bottom: 0.5rem;
}

.output-box h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.output-box ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
}

.output-box li {
    margin-bottom: 0.5rem;
}

.text-error {
    color: #fda4af;
}

.text-placeholder {
    color: #9e9e9e;
    font-style: italic;
}

footer {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    background-color: #1a1a1a;
    border-top: 1px solid #333333;
}

/* =====================================
 * 5. Médias Queries pour la Réactivité
 * ===================================== */

@media (min-width: 768px) {
    .flex-container {
        flex-direction: row; /* Passe en ligne sur les écrans plus larges */
    }

    .sidebar {
        width: 25%; /* Largeur définie pour la barre latérale sur les grands écrans */
        border-right: 1px solid #333333;
    }

    .grid-2-cols {
        grid-template-columns: repeat(2, 1fr); /* Passe à deux colonnes */
    }
}
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background-color: #121212;
    color: #e0e0e0;
}

a {
    color: #ffc107;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #e6b800;
}

header,
footer {
    background: #1f1f1f;
    padding: 1rem 1.5rem;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Boutons et Badges */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #ffc107;
    background: #ffc107;
    color: #111111;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
    background-color: #e6b800;
}

.btn.secondary {
    background: #252525;
    color: #eeeeee;
    border-color: #555555;
}

.btn-primary {
    background: #ffc107;
    color: #111111;
    border: none;
    padding: 12px;
    border-radius: 8px;
}

.btn-primary:hover {
    background: #e6b800;
}

.badge {
    display: inline-block;
    background: #ffc107;
    color: #111111;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
}

.button-link {
    background-color: #4CAF50;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.button-link:hover {
    background-color: #388E3C;
}

/* Navigation et En-tête */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo-link {
    display: flex;
    align-items: center;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.logo-icon {
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
    fill: currentColor;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-item {
    color: #e0e0e0;
    padding: 0.5rem 0.75rem;
    transition: color 0.3s;
}

.nav-item:hover {
    color: #ffc107;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-select {
    display: inline-block;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #1e1e1e;
    color: #f3f4f6;
    border: 1px solid #4b5563;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%23d1d5db' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em;
    cursor: pointer;
}

.lang-select:hover {
    border-color: #facc15;
}

.lang-select:focus {
    border-color: #facc15;
    outline: none;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);
}

/* Layouts flexibles et grilles */
.flex-container {
    display: flex;
    flex-grow: 1;
    min-height: calc(100vh - 6rem);
}

.sidebar {
    width: 25%;
    padding: 1.5rem;
    background-color: #1e1e1e;
    border-right: 1px solid #333;
    display: none;
}

@media (min-width: 768px) {
    .sidebar {
        display: block;
    }
}

.main-content {
    flex-grow: 1;
    padding: 1.5rem;
}

.two-col,
.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Cartes et éléments de contenu */
.card,
.feature-card,
.faq-item {
    background-color: #1e1e1e;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
}

.card:hover,
.feature-card:hover,
.faq-item:hover {
    transform: translateY(-5px);
    background-color: #2a2a2a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Styles spécifiques pour les icônes (y compris celles du menu latéral et des cartes) */
.icon-base { /* Classe de base pour toutes les icônes SVG si vous voulez un style cohérent */
    fill: currentColor; /* Permet à la couleur du texte parent de définir la couleur de l'icône */
    stroke: none;
}

.card-icon,
.feature-card-icon {
    height: 3rem;
    width: 3rem;
    color: #FFD700; /* Jaune primaire */
    margin-bottom: 1rem;
    transition: color 0.3s ease;
    /* Styles SVG */
    fill: currentColor;
    stroke: none;
}

.card-title,
.feature-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.card:hover .card-icon,
.feature-card:hover .feature-card-icon {
    color: white;
}

.card:hover .card-title,
.feature-card:hover .feature-card-title {
    color: #FFD700;
}

.feature-card p {
    color: #a0a0a0;
    font-size: 0.875rem;
}

/* Formulaires et entrées */
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}

.form-card {
    background: #252525;
    border: 1px solid #333333;
    border-radius: 14px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    text-align: center;
}

.form-card h2 {
    color: #ffc107;
    font-size: 2rem;
    margin-bottom: 20px;
}

.form-card label {
    display: block;
    text-align: left;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #aaaaaa;
}

.input-field,
.select-field,
.form-card input,
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 8px;
    border: 1px solid #555555;
    background: #1f1f1f;
    color: #eeeeee;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus,
.select-field:focus,
.form-card input:focus,
.form-group input:focus,
.form-group textarea:focus {
    border-color: #ffc107; /* Revert to yellow as in your initial designs */
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #eeeeee;
    font-weight: bold;
}

.form-group textarea {
    resize: vertical;
    height: 100px;
}

.form-card .error-message,
.text-error {
    color: #fda4af;
    margin-bottom: 10px;
}

.form-card .success-message {
    color: #93c5fd;
    margin-bottom: 10px;
}

.form-card .form-link {
    margin-top: 20px;
    font-size: 0.9rem;
}

.form-card .form-link a {
    color: #ffc107;
}

/* Styles de tableau (Admin) */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 8px;
    border-bottom: 1px solid #333333;
    text-align: left;
}

td select {
    background: #1f1f1f;
    color: #eeeeee;
    border: 1px solid #555555;
    border-radius: 8px;
    padding: 5px;
}

/* Styles pour les pages et conteneurs */
.feature-container,
.faq-container,
.about-container {
    width: 100%;
    max-width: 960px;
    background-color: #1a1a1a;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.about-container {
    text-align: center;
}

/* Styles spécifiques pour la FAQ */
.faq-item {
    cursor: pointer;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    transition: color 0.3s ease;
}

.faq-header-icon {
    width: 2rem;
    height: 2rem;
    color: #FFD700;
    transition: transform 0.3s ease;
    /* Styles SVG pour les icônes de la FAQ */
    fill: currentColor;
    stroke: none;
}

.faq-item.expanded .faq-header-icon {
    transform: rotate(45deg);
}

.faq-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    padding-top: 0;
    margin-top: 0.5rem;
}

.faq-item.expanded .faq-body {
    max-height: 500px;
    opacity: 1;
    padding-top: 1rem;
}

.faq-body p {
    color: #a0a0a0;
}

/* Contenu de sortie */
.output-box {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    min-height: 50vh; /* Utilise min-height au lieu de height pour éviter le tronquage */
    overflow-y: auto;
}

.output-box p {
    color: #a0a0a0;
}

.output-box h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffd700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.output-box h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.output-box ul {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    line-height: 1.5;
    list-style-type: disc;
    margin-left: 1.5rem;
}

.output-box li {
    margin-bottom: 0.5rem;
}

.output-box strong {
    font-weight: 700;
}

/* Styles généraux */
body {
    font-family: 'Inter', sans-serif;
    background-color: #121212;
    color: #e0e0e0;
}

/* Conteneurs principaux et barre latérale */
.flex-container {
    display: flex;
    flex-grow: 1;
    min-height: calc(100vh - 6rem);
}

.sidebar {
    width: 25%;
    padding: 1.5rem;
    background-color: #1e1e1e;
    border-right: 1px solid #333;
    display: none;
}

@media (min-width: 768px) {
    .sidebar {
        display: block;
    }
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.main-content {
    flex-grow: 1;
    padding: 1.5rem;
}

/* Champs de formulaire et boutons */
.input-field,
.select-field {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #2c2c2c;
    border: 1px solid #444;
    color: #e0e0e0;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus,
.select-field:focus {
    border-color: #8c66ff;
    box-shadow: 0 0 0 2px #8c66ff;
}


.button-link {
    background-color: #4CAF50;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.button-link:hover {
    background-color: #388E3C;
}

/* Styles pour les pages et conteneurs */
.feature-container,
.faq-container,
.about-container {
    width: 100%;
    max-width: 960px;
    background-color: #1a1a1a;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.about-container {
    text-align: center;
}

/* Cartes et éléments interactifs */
.card,
.feature-card,
.faq-item {
    background-color: #1e1e1e;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    border: 1px solid #e6b800;
}

.card:hover,
.feature-card:hover,
.faq-item:hover {
    transform: translateY(-5px);
    background-color: #2a2a2a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Titres et icônes des cartes */
.card-icon,
.feature-card-icon {
    transition: color 0.3s ease;
}

.card-title,
.feature-card-title {
    transition: color 0.3s ease;
}

.card:hover .card-icon,
.feature-card:hover .feature-card-icon {
    color: white;
}

.card:hover .card-title,
.feature-card:hover .feature-card-title {
    color: #FFD700;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-card-icon {
    height: 3rem;
    width: 3rem;
    color: #FFD700;
    margin-bottom: 1rem;
}

.feature-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: #a0a0a0;
    font-size: 0.875rem;
}

/* Styles spécifiques pour la FAQ */
.faq-item {
    cursor: pointer;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    transition: color 0.3s ease;
}

.faq-header-icon {
    width: 2rem;
    height: 2rem;
    color: #FFD700;
    transition: transform 0.3s ease;
}

.faq-item.expanded .faq-header-icon {
    transform: rotate(45deg);
}

.faq-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    padding-top: 0;
    margin-top: 0.5rem;
}

.faq-item.expanded .faq-body {
    max-height: 500px;
    opacity: 1;
    padding-top: 1rem;
}

.faq-body p {
    color: #a0a0a0;
}

/* Contenu de sortie */
.output-box {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    height: 100%;
    overflow-y: auto;
}

.output-box p {
    color: #a0a0a0;
}

.output-box h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffd700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.output-box h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.output-box ul {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    line-height: 1.5;
    list-style-type: disc;
    margin-left: 1.5rem;
}

.output-box li {
    margin-bottom: 0.5rem;
}

.output-box strong {
    font-weight: 700;
}

.text-error {
    color: #EF4444;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.button-generate {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    background-image: linear-gradient(to right, #facc15, #eab308); /* Gradient jaune d'origine */
    color: #1f2937;
    transition: transform 0.3s, box-shadow 0.3s, background-image 0.3s; /* Ajout de la transition pour background-image */
    border: none;
    cursor: pointer;
}

.button-generate:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Changement du gradient pour un effet vert */
    background-image: linear-gradient(to right, #90ee90, #32cd32); /* Exemple de gradient vert (vert clair vers vert plus foncé) */
}

.lang-select {
    display: inline-block;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Ajuste le padding pour l'icône de la flèche */
    border-radius: 0.375rem; /* rounded-lg */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #1e1e1e; /* bg-[#1e1e1e] */
    color: #f3f4f6; /* text-gray-50 */
    border: 1px solid #4b5563; /* border-gray-700 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%23d1d5db' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em;
    cursor: pointer;
}

.lang-select:hover {
    border-color: #facc15; /* Couleur de survol jaune */
}

.lang-select:focus {
    border-color: #facc15;
    outline: none;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5); /* Anneau de focus jaune */
}

/*
 * CSS pour la page de tableau de bord
 * Ce code est une conversion des classes Tailwind CSS en CSS standard.
 */

/* Style pour la balise <main> */
.flex-grow {
    flex-grow: 1;
}

.p-4 {
    padding: 1rem; /* 16px */
}

.md\:p-8 {
    padding: 2rem; /* 32px */
}

.lg\:p-12 {
    padding: 3rem; /* 48px */
}

.bg-\[\#121212\] {
    background-color: #121212;
}

.text-gray-200 {
    color: #e5e7eb;
}

/* Style pour le conteneur principal à l'intérieur de <main> */
.max-w-7xl {
    max-width: 80rem; /* 1280px */
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Styles pour les titres et sous-titres */
.text-4xl {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
}

.md\:text-5xl {
    font-size: 3rem; /* 48px */
    line-height: 1;
}

.font-extrabold {
    font-weight: 800;
}

.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 1rem; /* 16px */
}

.text-white {
    color: #ffffff;
}

.text-lg {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
}

.md\:text-xl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}

.text-gray-400 {
    color: #9ca3af;
}

.mb-12 {
    margin-bottom: 3rem; /* 48px */
}

/* Styles pour la grille des cartes */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-6 {
    gap: 1.5rem; /* 24px */
}

.md\:gap-8 {
    gap: 2rem; /* 32px */
}

/* Styles pour les cartes (liens) */
.group {
    /* Utilisé pour les effets au survol du parent */
}

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem; /* 24px */
    border-radius: 1rem; /* 16px */
    background-color: #1a1a1a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #333333;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background-color: #242424;
}

/* Styles des éléments à l'intérieur de la carte */
.h-16 {
    height: 4rem; /* 64px */
}

.w-16 {
    width: 4rem; /* 64px */
}

.text-\[\#FFD700\] {
    color: #ffd700;
}

.mb-4 {
    margin-bottom: 1rem; /* 16px */
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.group:hover .group-hover\:text-white {
    color: #ffffff;
}

.card-title {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

.text-2xl {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

.font-bold {
    font-weight: 700;
}

.mb-2 {
    margin-bottom: 0.5rem; /* 8px */
}

.group:hover .group-hover\:text-\[\#FFD700\] {
    color: #ffd700;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

/* RESPONSIVE DESIGN (Media Queries) */
@media (min-width: 768px) {
    /* Styles pour les écrans à partir de 768px de large (taille md) */
    .md\:p-8 {
        padding: 2rem;
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .md\:gap-8 {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    /* Styles pour les écrans à partir de 1024px de large (taille lg) */
    .lg\:p-12 {
        padding: 3rem;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {
    /* Styles pour les écrans à partir de 640px de large (taille sm) */
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    /* Styles pour les écrans à partir de 1280px de large (taille xl) */
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/*
 * Fichier CSS pour le tableau de bord de génération de contenu
 * S'applique à la structure HTML de votre fichier index.php
 */

/* =====================================
 * 1. Mise en page principale
 * ===================================== */

/* Conteneur principal flexible */
.flex-container {
    display: flex;
    flex-grow: 1;
    min-height: calc(100vh - 6rem); /* S'assure que le contenu principal remplit l'espace */
    background-color: #121212;
    color: #e0e0e0;
}

/* Barre latérale (Sidebar) */
.sidebar {
    width: 25%;
    padding: 1.5rem;
    background-color: #1e1e1e; /* Fond un peu plus clair pour la distinguer */
    border-right: 1px solid #333333;
    display: block; /* Toujours visible sur les écrans larges */
    flex-shrink: 0;
}

/* Espacement vertical des éléments dans la barre latérale */
.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Contenu principal de la page */
.main-content {
    flex-grow: 1;
    padding: 1.5rem;
}

/* =====================================
 * 2. Formulaires et Boutons
 * ===================================== */

/* Titres de section dans la barre latérale */
.sidebar h3 {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem;
    color: #e0e0e0;
}

/* Libellés de formulaire */
.sidebar label {
    display: block;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem;
    color: #a0a0a0;
}

/* Champs de saisie (input et select) */
.input-field,
.select-field {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #1f1f1f;
    border: 1px solid #4b5563;
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus,
.select-field:focus {
    border-color: #ffc107; /* Bordure jaune au focus */
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

/* Grille pour les options avancées */
.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}


/* =====================================
 * 3. Contenu de sortie
 * ===================================== */

/* Titre du contenu de sortie */
.main-content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #e0e0e0;
}

/* Boîte de sortie du contenu généré */
.output-box {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    min-height: 50vh;
    overflow-y: auto;
    border: 1px solid #333333;
}

.output-box p {
    color: #a0a0a0;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.output-box h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #333333;
    padding-bottom: 0.5rem;
}

.output-box h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.output-box ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
}

.output-box li {
    margin-bottom: 0.5rem;
}

/* Styles pour les messages d'erreur ou d'état */
.text-error {
    color: #fda4af;
}

.text-placeholder {
    color: #9e9e9e;
    font-style: italic;
}

/* =====================================
 * 4. Responsivité (pour les appareils mobiles)
 * ===================================== */

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #333333;
    }
}

@media (max-width: 480px) {
    .grid-2-cols {
        grid-template-columns: 1fr; /* Passe à une seule colonne sur les très petits écrans */
    }
}

/*
 * Styles pour le pied de page (footer)
 */

/* Styles mis à jour pour la boîte de contenu et le pied de page */

.output-box {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    min-height: 50vh;
    overflow-y: auto;
    border: 1px solid #333333;
    margin-bottom: 2rem; /* Ajoute une marge en bas pour séparer du footer */
}

footer {
    padding: 2rem 1rem; /* Augmente le padding vertical */
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    background-color: #1a1a1a;
    border-top: 1px solid #333333;
}
/* =====================================
 * 1. CSS Reset
 * ===================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif; /* Police moderne et lisible */
    line-height: 1.6;
    background-color: #111111; /* Fond très sombre */
    color: #eeeeee; /* Texte clair */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex; /* Pour permettre au main de prendre toute la place */
    flex-direction: column;
    min-height: 100vh; /* Assure que le corps prend au moins la hauteur de la fenêtre */
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

/* =====================================
 * 2. Variables CSS (Thème)
 * ===================================== */
:root {
    --primary-bg: #111111; /* Fond principal */
    --secondary-bg: #1a1a1a; /* Fond secondaire (header, footer) */
    --card-bg: #1f1f1f; /* Fond des cartes */
    --text-light: #eeeeee; /* Texte principal clair */
    --text-muted: #aaaaaa; /* Texte atténué */
    --accent-color: #FFD700; /* Jaune doré */
    --danger-color: #dc3545; /* Rouge pour les boutons de danger */
    --primary-button-bg: #FFD700; /* Bouton principal */
    --primary-button-text: #111111; /* Texte sur bouton principal */
    --danger-button-text: #ffffff;
    --border-color: #333333; /* Couleur des bordures */
    --focus-outline: #FFD700; /* Couleur de l'outline au focus */
}

/* =====================================
 * 3. Composants Généraux
 * ===================================== */

/* Conteneur principal pour centrer et limiter la largeur */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}

/* Styles pour le main (contenu principal) */
.content {
    flex-grow: 1; /* Permet au main de prendre l'espace disponible */
    padding-top: 2rem; /* Espace en haut */
    padding-bottom: 3rem; /* Espace en bas */
}

/* Styles pour les titres */
.page-title {
    font-size: 2.5rem; /* 4xl */
    font-weight: 800; /* extrabold */
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.page-subtitle {
    font-size: 1.125rem; /* lg */
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-muted);
}

/* Styles pour les badges (ex: Admin) */
.badge {
    background-color: var(--accent-color);
    color: var(--primary-bg);
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 0.875rem; /* sm */
    text-align: center;
    display: inline-block;
}

/* Styles pour les boutons */
.btn {
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text);
}

.btn-primary:hover {
    background-color: #e6c200; /* Nuance plus foncée du jaune */
}

.btn-danger {
    background-color: var(--danger-color);
    color: var(--danger-button-text);
}

.btn-danger:hover {
    background-color: #c82333; /* Nuance plus foncée du rouge */
}

.btn-outline {
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.btn-outline:hover {
    background-color: var(--accent-color);
    color: var(--primary-bg);
}

/* Styles pour les formulaires */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #222222; /* Fond des champs de formulaire */
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-light);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3); /* Outline jaune au focus */
}

select {
    appearance: none; /* Supprime le style par défaut */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23eeeeee" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75em top 50%;
    background-size: 1em auto;
    padding-right: 2.5rem; /* Espace pour l'icône */
}

/* =====================================
 * 4. Header (Navigation Responsive)
 * ===================================== */

.header {
    background-color: #111111;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: sticky; /* S'accroche en haut lors du défilement */
    top: 0;
    z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    fill: var(--accent-color); /* Assure la couleur de l'icône */
}

.logo-text {
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Espacement entre les éléments */
}

.nav-item {
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.nav-item:hover {
    color: var(--accent-color);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espacement entre les infos utilisateur et les boutons */
}

.user-info span {
    font-weight: 500;
    color: var(--text-light);
}

.lang-form {
    margin-left: 1rem; /* Espace avant le sélecteur de langue */
}

.lang-select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
}

/* Hamburger Menu (Mobile) */
.menu-toggle {
    display: none; /* Caché par défaut sur desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.hamburger {
    width: 100%;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 10px;
    position: absolute;
    transition: all 0.3s linear;
}

.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

.menu-toggle.active .hamburger {
    transform: translateX(-50px);
    background: transparent;
}
.menu-toggle.active .hamburger::before,
.menu-toggle.active .hamburger::after {
    transform: rotate(45deg) translate(35px, 35px);
    top: 0;
}
.menu-toggle.active .hamburger::after {
    transform: rotate(-45deg) translate(35px, -35px);
    top: 0;
}

/* Menu mobile caché */
.mobile-nav {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    right: 0;
    width: 75%; /* Prend 75% de la largeur */
    height: 100%;
    background-color: var(--secondary-bg);
    padding: 4rem 1.5rem 1.5rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    flex-direction: column;
    justify-content: flex-start; /* Aligner en haut */
    align-items: flex-start;
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav .nav-item {
    margin-bottom: 1.5rem;
    width: 100%; /* Prend toute la largeur */
    text-align: left; /* Aligne le texte à gauche */
}

.mobile-nav .btn {
    width: 100%; /* Boutons prennent toute la largeur */
    text-align: center;
    margin-top: 1rem; /* Espace avant les boutons */
}

.mobile-nav .lang-form {
    width: 100%;
    margin-top: 1rem;
}

.mobile-nav .lang-select {
    width: 100%;
}

/* =====================================
 * 5. Section d'accueil et cartes
 * ===================================== */

.welcome-section {
    padding: 4rem 0; /* Espace généreux au-dessus et en dessous */
    text-align: center;
}

.welcome-title {
    font-size: 3rem; /* 5xl */
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.welcome-subtitle {
    font-size: 1.25rem; /* xl */
    color: var(--text-muted);
    max-width: 768px; /* Limite la largeur du texte */
    margin: 0 auto;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonnes flexibles */
    gap: 2rem; /* Espacement entre les cartes */
    margin-top: 3rem;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem; /* rounded-2xl */
    padding: 2rem; /* 1.5rem sur mobile */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-8px) scale(1.02); /* Effet de soulèvement et léger zoom */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color); /* Bordure dorée au survol */
}

.card-icon {
    width: 4rem; /* h-16 */
    height: 4rem; /* w-16 */
    color: var(--accent-color);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.card:hover .card-icon {
    color: var(--text-light); /* Icône devient blanche au survol */
}

.card-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.card:hover .card-title {
    color: var(--accent-color); /* Titre devient doré au survol */
}

.card p {
    font-size: 0.875rem; /* sm */
    color: var(--text-muted);
    flex-grow: 1; /* Permet à la description de remplir l'espace */
}

/* =====================================
 * 6. Footer
 * ===================================== */

.footer {
    background-color: var(--secondary-bg);
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem; /* sm */
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

/* =====================================
 * 7. Responsive Design
 * ===================================== */

/* Medium screens (tablets, 768px and up) */
@media (min-width: 768px) {
    .page-title {
        font-size: 3rem; /* 5xl */
    }

    .welcome-subtitle {
        font-size: 1.25rem; /* xl */
    }

    .content {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Afficher la navigation principale, cacher le hamburger */
    .menu-toggle {
        display: none;
    }
    .mobile-nav {
        display: none;
    }
    .nav-links {
        display: flex; /* Assure que la navigation est visible */
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
        gap: 2rem;
    }
}

/* Large screens (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .page-title {
        font-size: 3.75rem; /* 6xl */
    }

    .card-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
        gap: 2.5rem;
    }
}

/* Extra large screens (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
    }
}

/* Styles spécifiques pour la page de connexion/inscription (si nécessaire) */
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 150px); /* Prend la hauteur disponible moins l'espace du header/footer */
}

.form-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    width: 100%;
    max-width: 450px; /* Largeur fixe pour le formulaire */
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.form-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.form-card label {
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-weight: 500;
}

.form-card input[type="email"],
.form-card input[type="password"] {
    margin-bottom: 1rem;
}

.form-card .btn-primary {
    width: 100%;
    margin-top: 1rem;
}

.form-card .error-message {
    color: var(--danger-color);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.form-card .success-message {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.form-card a {
    color: var(--accent-color);
    font-weight: 500;
}

.form-card a:hover {
    text-decoration: underline;
}

/* RTL Specific Styles */
[dir="rtl"] .logo-link {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .nav-links {
    gap: 1.5rem;
}

[dir="rtl"] .nav-item {
    margin-left: 1.5rem; /* Adjust for RTL */
    margin-right: 0;
}

[dir="rtl"] .user-info {
    gap: 1rem;
}

[dir="rtl"] .lang-form {
    margin-left: 0;
    margin-right: 1rem;
}

[dir="rtl"] .mobile-nav {
    right: auto;
    left: 0;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%); /* Initial state for RTL */
}

[dir="rtl"] .mobile-nav.active {
    transform: translateX(0);
}

[dir="rtl"] .mobile-nav .nav-item {
    text-align: right;
}

[dir="rtl"] .form-card label {
    text-align: right;
}

/* Ensure Arabic text is aligned correctly in inputs */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="search"],
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

/* Adjust select arrow for RTL */
[dir="rtl"] select {
    background-position: left 0.75em top 50%;
    padding-left: 2.5rem;
    padding-right: 0.75rem;
}

/* =====================================
 * 7. Navigation Mobile Responsive
 * ===================================== */

/* Bouton hamburger */
.menu-toggle {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
}
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    display: block;
    height: 3px;
    width: 100%;
    background: #e0e0e0;
    border-radius: 3px;
    position: absolute;
    transition: all 0.3s ease;
}
.menu-toggle .hamburger {
    top: 50%;
    transform: translateY(-50%);
}
.menu-toggle .hamburger::before {
    top: -8px;
}
.menu-toggle .hamburger::after {
    bottom: -8px;
}

/* Animation quand actif (croix) */
.menu-toggle.active .hamburger {
    background: transparent;
}
.menu-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}
.menu-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* Menu mobile */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    height: 100%;
    background: #1e1e1e;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: right 0.3s ease;
    z-index: 999;
}
.mobile-nav.active {
    right: 0;
}

.mobile-nav .nav-item {
    font-size: 1.125rem;
    color: #e0e0e0;
    padding: 0.75rem 0;
}
.mobile-nav .nav-item:hover {
    color: #ffc107;
}

/* Masquer le menu desktop en mobile */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
}

/* Montrer le menu desktop à partir de md */
@media (min-width: 769px) {
    .menu-toggle,
    .mobile-nav {
        display: none;
    }
}

/* Overlay derrière le menu mobile */
.mobile-overlay {
    position: fixed;
    inset: 0; /* top, right, bottom, left: 0 */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998; /* juste sous le menu */
}
.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}
/* Fichier : style.css ou tailwind overrides */

/* Effet card moderne */
.card {
  background: linear-gradient(145deg, #1e1e1e, #161616);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,0,0,0.7);
}
/* Ajustements spécifiques mobile */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr !important; /* toujours 1 colonne */
    gap: 1rem !important; /* espace réduit entre les cards */
  }

  .card {
    padding: 1rem; /* réduit le padding */
    border-radius: 1rem;
  }

  .card h2 {
    font-size: 1.1rem; /* ~18px */
    line-height: 1.4;
  }

  .card p {
    font-size: 0.8rem; /* ~13px */
    line-height: 1.3;
  }

  .card svg {
    height: 2rem;  /* icône plus petite */
    width: 2rem;
    margin-bottom: 0.5rem;
  }

  /* Titre principal */
  h1 {
    font-size: 1.8rem !important; /* ~28px */
  }

  /* Sous-titre */
  p {
    font-size: 0.9rem !important; /* ~14px */
  }
}
/* ==========================================================================
   Styles des Formulaires (Inputs, Selects, Textarea)
   ========================================================================== */

/* Style pour les étiquettes (labels) au-dessus des champs */
label {
    display: block; /* S'assure que le label prend toute la largeur */
    font-weight: 600; /* Met le texte en semi-gras */
    margin-bottom: 0.5rem; /* Espace sous le label */
    font-size: 0.875rem; /* Taille de police légèrement réduite (14px) */
    color: #a0aec0; /* Couleur gris clair pour le texte */
}

/* * Style commun et unifié pour les champs de texte, les zones de texte 
 * et les listes déroulantes. Cible les classes .input-field et .select-field.
 */
.input-field,
.select-field {
    width: 100%; /* Prend toute la largeur de son conteneur */
    background-color: #1a1a1a; /* Fond gris très sombre, tel que demandé */
    border: 1px solid #4a5568; /* Bordure grise subtile */
    border-radius: 8px; /* Bords arrondis pour un look moderne */
    padding: 0.75rem 1rem; /* Espace intérieur pour le confort de saisie */
    color: #e2e8f0; /* Couleur de texte blanc cassé */
    font-size: 1rem; /* Taille de police standard (16px) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Animation douce pour le focus */
}

/* Style pour le texte d'aide (placeholder) dans les champs */
.input-field::placeholder,
textarea.input-field::placeholder {
    color: #718096; /* Couleur grise plus foncée pour le placeholder */
    opacity: 0.8; /* Légère transparence */
}

/* * Effet visuel lorsque l'utilisateur clique sur un champ (focus).
 * La bordure devient jaune/dorée avec une légère lueur extérieure.
 */
.input-field:focus,
.select-field:focus {
    outline: none; /* Supprime le contour bleu par défaut du navigateur */
    border-color: #f6e05e; /* Couleur de la bordure en jaune/or */
    box-shadow: 0 0 0 3px rgba(246, 224, 94, 0.2); /* Lueur extérieure assortie */
}

/* * Style spécifique pour les listes déroulantes (select)
 * afin de personnaliser la flèche.
 */
.select-field {
    appearance: none; /* Supprime le style par défaut de la flèche du navigateur */
    /* Ajout d'une flèche personnalisée en SVG, encodée pour le CSS */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center; /* Positionne la flèche à droite */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: 1.25em 1.25em; /* Taille de l'icône de la flèche */
    padding-right: 2.5rem; /* Ajoute de l'espace à droite pour que le texte ne passe pas sous la flèche */
}

/* ==========================================================================
   Styles des Boutons
   ========================================================================== */

/* Style de base pour les boutons */
.btn {
    padding: 0.6rem 1.5rem; /* Espace intérieur */
    border: none; /* Pas de bordure par défaut */
    border-radius: 8px; /* Bords arrondis */
    font-size: 0.9rem; /* Taille de police */
    font-weight: 700; /* Texte en gras */
    cursor: pointer; /* Curseur main */
    text-align: center;
    text-decoration: none; /* Supprime le soulignement des liens stylés en boutons */
    display: inline-block; /* Comportement de bloc en ligne */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Animations douces */
}
/* Bouton Primaire (Jaune) - Ex: "Montrez la magie" */
.btn-primary {
    background-color: #f6e05e; /* Fond jaune/or */
    color: #1a1a1a; /* Texte sombre pour un bon contraste */
}

.btn-primary:hover {
    background-color: #68d391; /* Vert au survol */
    color: #ffffff; /* Optionnel : changer la couleur du texte pour un meilleur contraste sur fond vert */
}

/* Bouton Danger (Rouge) - Ex: "Déconnexion" */
.btn-danger {
    background-color: #e53e3e; /* Fond rouge */
    color: #ffffff; /* Texte blanc */
}

.btn-danger:hover {
    color: #ffffff; /* Optionnel : conserver le texte blanc */
    transform: translateY(-0.125rem);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Changement du gradient pour un effet vert */
    background-image: linear-gradient(to right, #90ee90, #32cd32); /* Exemple de gradient vert (vert clair vers vert plus foncé) */
}

/* Effet de clic pour tous les boutons */
.btn:active {
    transform: scale(0.97); /* Effet d'enfoncement au clic */
}
/* Styles pour la fenêtre modale */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #333;
    color: white;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.modal-content h3 {
    color: #4CAF50;
    font-size: 1.5em;
    margin-top: 0;
}


/* =====================================
 * 2. Formulaires et mise en page
 * ===================================== */

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}

.form-card {
    background: #252525;
    border: 1px solid #333333;
    border-radius: 14px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    text-align: center;
}

.form-card h2 {
    color: #ffc107;
    font-size: 2rem;
    margin-bottom: 20px;
}

.form-card label {
    display: block;
    text-align: left;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #aaaaaa;
}

.form-card input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 8px;
    border: 1px solid #555555;
    background: #1f1f1f;
    color: #eeeeee;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-card input:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #ffc107;
    background: #ffc107;
    color: #111111;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
    background-color: #e6b800;
}

.error-message {
    color: #fda4af;
    margin-bottom: 10px;
}

.success-message {
    color: #93c5fd;
    margin-bottom: 10px;
}

.form-link {
    margin-top: 20px;
    font-size: 0.9rem;
}

.form-link a {
    color: #ffc107;
}
.two-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 768px) {
    .two-col {
        flex-direction: row;
    }
}
.card {
    background-color: #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    flex: 1;
}
.card h2, .card h3 {
    color: #ffc107;
    margin-top: 0;
}
.card p {
    color: #ccc;
}
.card ul {
    color: #ccc;
    padding-left: 20px;
}
.btn {
    background-color: #ffc107;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 10px;
}
.btn:hover {
    background-color: #e0a800;
}
.secondary {
    background-color: #555;
    color: #fff;
}
.secondary:hover {
    background-color: #777;
}
.current-plan {
    border: 2px solid #0ea5e9;
    background-color: #0d1a26;
}

.profile-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    color: #f1f5f9; /* white */
}
.bg-secondary-dark {
    background-color: #1f2937; /* gray-800 */
}
.text-accent {
    color: #3b82f6; /* blue-500, pour le changement de mdp */
}
.card {
    border: 1px solid #374151; /* gray-700 */
}
.info-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.bg-gradient-gold {
        background-image: linear-gradient(to right, #FFD700, #DAA520);
    }
    .btn-gold-shadow {
        box-shadow: 0 4px 10px -2px rgba(255, 215, 0, 0.6), 0 2px 5px -1px rgba(255, 215, 0, 0.4);
    }
    .shadow-gold {
        box-shadow: 0 10px 15px -3px rgba(255, 215, 0, 0.5), 0 4px 6px -2px rgba(255, 215, 0, 0.3);
    }
    /* === 1. Bouton CTA Hover Effect (Élévation et Glow Doré) === */
    .btn-gold-shadow {
        /* Ombre de base - subtile */
        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition plus dynamique */
    }
    .btn-gold-shadow:hover {
        /* Effet de survol: Léger déplacement et Glow Doré prononcé */
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 15px -3px rgba(255, 215, 0, 0.7), 0 3px 8px -1px rgba(255, 215, 0, 0.5);
    }
    
    /* === 2. Effet Hover des Cartes (Léger Lift 3D et Shadow Boost) === */
    .card-hover-effect {
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        transform: translateZ(0); /* Force l'accélération matérielle */
    }
    .card-hover-effect:hover {
        /* Lift et léger zoom */
        transform: translateY(-5px) scale(1.03);
        /* Ombre plus forte avec une teinte dorée */
        box-shadow: 0 15px 30px -5px rgba(255, 215, 0, 0.4), 0 5px 15px -5px rgba(255, 215, 0, 0.2);
    }

    .shadow-gold {
        /* Ombre dorée prononcée pour l'image */
        box-shadow: 0 15px 25px -5px rgba(255, 215, 0, 0.6), 0 8px 10px -4px rgba(255, 215, 0, 0.4);
    }
    .app-preview-img {
        max-width: 100%;
        height: auto;
        min-height: 250px;
        object-fit: cover;
    }
    .section-title-gold {
        color: #FFD700; 
    }
    /*
 * Styles spécifiques pour la page Article Writer (article_writer.php)
 * Ces styles définissent la mise en page responsive et l'apparence des composants.
 */

/* =====================================
 * 1. Mise en page principale (Mobile-First)
 * ===================================== */

.flex-container {
    /* Sur mobile, les éléments (sidebar et main-content) s'empilent naturellement (flex-direction: column) */
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Espace entre la sidebar et le contenu principal */
}

.sidebar {
    /* Conteneur des contrôles et options */
    padding: 1.5rem;
    background-color: #1e1e1e; /* Fond sombre pour contraster avec le fond de page */
    border-radius: 0.75rem; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.main-content {
    /* Conteneur de l'article généré. Prend toute la largeur disponible. */
    min-height: 50vh; /* Assure une hauteur minimale */
    flex-grow: 1;
}

/* Grille pour les options avancées (2 colonnes sur desktop, empilées sur mobile) */
.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne sur mobile par défaut */
    gap: 1.5rem;
}


/* =====================================
 * 2. Formulaires et Composants UI
 * ===================================== */

.input-field,
.select-field {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #2a2a2a; /* Fond de champ plus clair que la sidebar */
    border: 1px solid #444;
    color: #e0e0e0;
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 1rem;
    resize: vertical; /* Permet le redimensionnement vertical pour les textareas */
}

.input-field:focus,
.select-field:focus {
    border-color: #ffd700;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
}

.select-field {
    /* Style spécifique pour le select */
    appearance: none; /* Cache le style natif */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffd700' d='M9.293 12.95l1.414 1.414L16 9.414V7.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v1.914l5.293 5.293z'/%3E%3C/svg%3E"); /* Icône déroulante personnalisée */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Ajout d'espace pour l'icône */
    cursor: pointer;
}

.button-generate {
    /* Basé sur le style .btn-gold-shadow de style.css */
    display: block;
    width: 100%; /* Pleine largeur sur mobile */
    padding: 0.8rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border: none;
    background-color: #ffd700;
    color: #121212;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button-generate:hover {
    transform: translateY(-2px) scale(1.01);
    background-color: #ffc400;
    box-shadow: 0 6px 15px -3px rgba(255, 215, 0, 0.7), 0 3px 8px -1px rgba(255, 215, 0, 0.5);
}

.output-box {
    /* Conteneur pour le contenu généré */
    padding: 2rem;
    background-color: #1e1e1e;
    border-radius: 0.75rem;
    min-height: 50vh;
    border: 1px solid #333;
    line-height: 1.8;
}

.text-placeholder {
    font-style: italic;
    color: #888;
    text-align: center;
    padding-top: 5rem;
}

/* Styles pour le contenu formaté par JavaScript */
.output-box h2 { /* Titre de l'article */
    color: #ffd700;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-align: center;
}
.output-box h3 { /* Sous-titre principal (##) */
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.output-box h4 { /* Sous-titre secondaire (###) */
    color: #ffd700;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.output-box p {
    color: #c0c0c0;
    margin-bottom: 1rem;
}
.output-box li {
    color: #c0c0c0;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}


/* =====================================
 * 3. Media Query (Tablette et Desktop)
 * ===================================== */

@media (min-width: 768px) {
    .flex-container {
        /* À partir de la tablette (768px), passage à une disposition côte à côte */
        flex-direction: row;
        align-items: flex-start; /* Aligne le haut des deux colonnes */
    }

    .sidebar {
        /* La sidebar prend une largeur fixe ou relative (ici, environ 30%) */
        width: 350px;
        flex-shrink: 0; /* Empêche la sidebar de rétrécir */
        position: sticky; /* Reste en place lors du défilement */
        top: 6rem; /* Décalage pour ne pas être sous l'en-tête */
    }

    .main-content {
        /* Le contenu principal prend le reste de l'espace */
        flex-grow: 1;
        min-width: 0; /* Important pour éviter les dépassements de contenu */
    }

    .grid-2-cols {
        /* Passage à 2 colonnes pour les options avancées */
        grid-template-columns: repeat(2, 1fr);
    }

    .button-generate {
        width: auto; /* Le bouton ne prend plus la pleine largeur de la sidebar */
    }
}
/*
 * Styles spécifiques pour la page Article Writer (article_writer.php)
 * Ces styles définissent la mise en page responsive et l'apparence des composants.
 */

/* =====================================
 * 1. Mise en page principale (Mobile-First)
 * ===================================== */

.flex-container {
    /* Sur mobile, les éléments (sidebar et main-content) s'empilent naturellement (flex-direction: column) */
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Espace entre la sidebar et le contenu principal */
}

.sidebar {
    /* Conteneur des contrôles et options */
    padding: 1.5rem;
    background-color: #1e1e1e; /* Fond sombre pour contraster avec le fond de page */
    border-radius: 0.75rem; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.main-content {
    /* Conteneur de l'article généré. Prend toute la largeur disponible. */
    min-height: 50vh; /* Assure une hauteur minimale */
    flex-grow: 1;
}

/* Grille pour les options avancées (2 colonnes sur desktop, empilées sur mobile) */
.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne sur mobile par défaut */
    gap: 1.5rem;
}


/* =====================================
 * 2. Formulaires et Composants UI
 * ===================================== */

.input-field,
.select-field {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #2a2a2a; /* Fond de champ plus clair que la sidebar */
    border: 1px solid #444;
    color: #e0e0e0;
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 1rem;
    resize: vertical; /* Permet le redimensionnement vertical pour les textareas */
}

.input-field:focus,
.select-field:focus {
    border-color: #ffd700;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
}

.select-field {
    /* Style spécifique pour le select */
    appearance: none; /* Cache le style natif */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffd700' d='M9.293 12.95l1.414 1.414L16 9.414V7.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v1.914l5.293 5.293z'/%3E%3C/svg%3E"); /* Icône déroulante personnalisée */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Ajout d'espace pour l'icône */
    cursor: pointer;
}

.button-generate {
    /* Basé sur le style .btn-gold-shadow de style.css */
    display: block;
    width: 100%; /* Pleine largeur sur mobile */
    padding: 0.8rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border: none;
    background-color: #ffd700;
    color: #121212;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button-generate:hover {
    transform: translateY(-2px) scale(1.01);
    background-color: #ffc400;
    box-shadow: 0 6px 15px -3px rgba(255, 215, 0, 0.7), 0 3px 8px -1px rgba(255, 215, 0, 0.5);
}

.output-box {
    /* Conteneur pour le contenu généré */
    padding: 2rem;
    background-color: #1e1e1e;
    border-radius: 0.75rem;
    min-height: 50vh;
    border: 1px solid #333;
    line-height: 1.8;
}

.text-placeholder {
    font-style: italic;
    color: #888;
    text-align: center;
    padding-top: 5rem;
}

/* Styles pour le contenu formaté par JavaScript */
.output-box h2 { /* Titre de l'article */
    color: #ffd700;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-align: center;
}
.output-box h3 { /* Sous-titre principal (##) */
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.output-box h4 { /* Sous-titre secondaire (###) */
    color: #ffd700;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.output-box p {
    color: #c0c0c0;
    margin-bottom: 1rem;
}
.output-box li {
    color: #c0c0c0;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}


/* =====================================
 * 3. Media Query (Tablette et Desktop)
 * ===================================== */

@media (min-width: 768px) {
    .flex-container {
        /* À partir de la tablette (768px), passage à une disposition côte à côte */
        flex-direction: row;
        align-items: flex-start; /* Aligne le haut des deux colonnes */
    }

    .sidebar {
        /* La sidebar prend une largeur fixe ou relative (ici, environ 30%) */
        width: 350px;
        flex-shrink: 0; /* Empêche la sidebar de rétrécir */
        position: sticky; /* Reste en place lors du défilement */
        top: 6rem; /* Décalage pour ne pas être sous l'en-tête */
    }

    .main-content {
        /* Le contenu principal prend le reste de l'espace */
        flex-grow: 1;
        min-width: 0; /* Important pour éviter les dépassements de contenu */
    }

    .grid-2-cols {
        /* Passage à 2 colonnes pour les options avancées */
        grid-template-columns: repeat(2, 1fr);
    }

    .button-generate {
        width: auto; /* Le bouton ne prend plus la pleine largeur de la sidebar */
    }

    /* Masquer le bouton hamburger et le menu mobile sur desktop */
    .menu-toggle,
    .mobile-nav,
    .mobile-overlay {
        display: none !important;
    }
}

/* =====================================
 * 4. Styles de Navigation Mobile (pour fixer les clics)
 * ===================================== */

.header {
    /* S'assurer que le header est au-dessus du reste du contenu */
    position: sticky;
    top: 0;
    z-index: 100; /* Valeur élevée pour être en tête */
    background-color: #121212; /* Assurer une couleur de fond */
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.menu-toggle {
    /* Assurer que le bouton hamburger est cliquable */
    display: block; /* Visible sur mobile */
    z-index: 150; /* Doit être au-dessus du overlay et du menu */
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
    /* Styles pour l'icône hamburger (simulés) */
}

.mobile-overlay {
    /* L'overlay doit couvrir tout l'écran */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 90; /* En dessous du menu, au-dessus du contenu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    /* Le menu lui-même (slide-in) */
    position: fixed;
    top: 0;
    right: -300px; /* Caché hors écran */
    width: 250px;
    height: 100vh;
    background-color: #1e1e1e;
    padding: 2rem 1.5rem;
    z-index: 100; /* Doit être au-dessus du overlay */
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-out;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav.active {
    right: 0; /* Visible */
}

/* S'assurer que les liens dans le menu mobile sont cliquables */
.mobile-nav a,
.mobile-nav .lang-select {
    display: block;
    color: #e0e0e0;
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid #333;
    transition: color 0.2s;
}

.mobile-nav a:hover {
    color: #ffd700;
}
.mobile-nav .lang-select {
    width: 100%;
}
.mobile-nav .user-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.mobile-nav .btn-danger {
    margin-top: 0.5rem;
}