/* Variables CSS pour les couleurs (pas de changement ici) */
:root {
    --primary-color: #FF6B6B; /* Rouge doux pour l'accent */
    --secondary-color: #4ECDC4; /* Cyan pour le fond ou autres accents */
    --text-color: #333;
    --light-bg-color: #f4f4f4;
    --dark-bg-color: #333;
    --nav-item-hover: #555;
    --nav-mobile-bg: #444; /* Fond du menu mobile ouvert */
    --border-radius: 8px; /* Rayon pour les coins arrondis */
    --navbar-height: 70px; /* NOUVEAU: Hauteur de la barre de navigation */
}

/* Styles Généraux (pas de changement ici) */
html {
    box-sizing: border-box;
    
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    display: flex;
    flex-direction: column;
    grid-template-areas: "header" "main" "aside" "footer";
    font-family: 'Comic Sans MS', 'Arial', sans-serif; /* Une police simple et lisible */
    min-height: 50vh;
    margin: 0;
    background-color: var(--light-bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}



header {
  width: 100%;
 
}
main{
    margin: 1%;
    padding: 1%;
	border: 1px solid green;
    border-radius: 10px;     
}


aside {
    margin: 1%;
    padding: 1%;
	border: 1px solid green;
    border-radius: 10px;  
}

footer {
width: 98%;
background-color: #484428;
border-radius: 10px; 
padding :1%;
margin:1%;
color: white;
    text-align: center;
}
/* Header / Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Utilisation de la nouvelle variable pour la hauteur */
    height: var(--navbar-height); /* DÉFINIR UNE HAUTEUR FIXE POUR LA NAVBAR SUR MOBILE */
}

.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-brand .logo {
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.navbar-brand .site-name {
    color: white;
    font-size: 1.8em;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
}

/* Icône Hamburger (Mobile uniquement) */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: block;
    color: white;
    font-size: 2em;
    z-index: 1001;
}

/* Menu de navigation (Mobile First) */
.nav-links {
    position: fixed;
    /* IMPORTANT : Le menu commence APRÈS la barre de navigation */
    top: var(--navbar-height); /* Commence juste en dessous de la navbar */
    left: 0;
    width: 100%;
    /* La hauteur est maintenant le reste de la vue */
    height: calc(100vh - var(--navbar-height));
    background-color: var(--nav-mobile-bg);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre les liens verticalement dans l'espace disponible */
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    
}

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

.nav-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 80%;
}

.nav-links li {
    margin: 15px 0;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-links a:hover {
    background-color: #63d4cd;
    transform: translateY(-2px);
}

.nav-links .icon445444 {
    margin-right: 10px;
    font-size: 1.5em;
    color: white;
}

/* Contenu principal de la page (pas de changement ici) */

.conteneur-card {
	display:grid;
	grid-row-gap :30px;
}

.card {
  border: 1px solid #e0e0e0; /* Bordure légère */
  border-radius: 8px; /* Coins arrondis */
  overflow: hidden; /* Pour contenir les éléments internes */
  box-shadow: 5px 5px 6px 6px rgba(0, 0, 0, 0.5); /* Ombre légère */
}

.card-title {
  background-color: #8a49a2; /* Fond coloré pour le titre */
  color: white; /* Texte en blanc */
  padding: 12px; /* Espacement interne */
  
  font-size: 1.25rem; /* Taille du texte */
}


.card-text {
  padding: 12px; /* Espacement interne */
  
  color: #333; /* Couleur du texte */
  font-size: 0.9rem; /* Taille du texte */
}

.card-link {
  display: block; 
  padding: 12px; 
  background-color: #f8f9fa; 
  color: darkblue; 
  text-decoration: none; /* Supprime le soulignement */
  text-align: center; 
  font-size: 1.1rem; 
  border-top: 1px solid #e0e0e0; /* Bordure supérieure */
}

.card-link:hover {
  background-color: #e9ecef; /* Changement de fond au survol */
}


/* --- Styles pour H1 --- */
h1 {
    font-family: cursive; /* Ou 'Bangers', 'Fredoka One' pour un côté plus ludique */
    font-size: 2.5em; /* Grande taille pour le titre principal */
    color: #FF6347; /* Un rouge-orangé vif et accueillant (Tomate) */
    text-align: center;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.2); /* Ombre pour un effet 3D subtil */
    margin-bottom: 30px;
    padding: 10px 0;
    border-bottom: 5px dashed #FFD700; /* Une ligne tiretée joyeuse en bas */
}

/* --- Styles pour H2 --- */
h2 {
    font-family:  cursive; /* Une police ronde et amicale */
    font-size: 2.5em;
    color: #4682B4; /* Un bleu acier doux */
    text-align: left;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 8px solid #9ACD32; /* Une bordure latérale verte vive */
}

/* --- Styles pour H3 --- */
h3 {
    font-family:  sans-serif; /* Une police moderne et claire */
    font-size: 1.8em;
    color: #32CD32; /* Un vert citron éclatant */
    text-align: left;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* --- Styles pour H4 --- */
h4 {
    font-family: 'Open Sans', sans-serif; /* Une police simple et très lisible */
    font-size: 1.3em;
    color: #8A2BE2; /* Un violet-bleu vibrant */
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
    font-style: italic; /* Pour les sous-titres plus informatifs */
}


.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000; /* Fond noir pendant le chargement */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.policeCursiveFR {
  font-family: "Playwrite FR Trad", cursive;
  font-optical-sizing: auto;
  font-weight: 300; /*de 100 à 400*/
  font-style: normal;
  line-height: 2.5; 
}

.affichage {
 margin: 5px auto; /* Centre le div horizontalement */
padding: 5px ;
border: 1px solid green;
border-radius: 5px;
background-color: white;
}

.poeme-container {
    /* Propriétés de base du conteneur, comme précédemment */
    display: inline-block;
    background-color: #FFF9E6; /* Un jaune crème très doux pour le fond */
    
    text-align: center;
    margin: 30px auto; /* Centre le div horizontalement */
    max-width: 700px; /* Limite la largeur maximale */
    padding: 30px 40px;
    /* --- Style de bordure Classique et Enfantin --- */
    border: 3px solid #FFCC00; /* Bordure unie jaune vif */
    border-radius: 15px; /* Coins légèrement arrondis pour la douceur */
    

    box-shadow: 
        0 0 0 5px #ADD8E6, /* La "seconde bordure" */
        0 0 0 8px transparent, /* L'espace transparent */
        5px 5px 15px rgba(0, 0, 0, 0.1); /* L'ombre */
}

.poeme-container p {
    margin: 0;
    font-size: 1.3em; /* Taille de police confortable */
    line-height: 2; /* Espacement généreux entre les lignes pour la lisibilité */
    color: #4A4A4A; /* Un gris foncé doux pour le texte du poème */
}

.poeme-titre {
    font-family: 'Fredoka One', cursive; /* Même police que H2 pour la cohérence */
    font-size: 1.8em;
    font-weight: bold;
    color: #FF8C00; /* Orange vif pour le titre du poème */
    margin-bottom: 20px;
    border-bottom: 2px dotted #FFD700; /* Ligne pointillée sous le titre */
    padding-bottom: 10px;
}
.noirversblanc {
  background: linear-gradient(to right, black, rgba(255, 255, 255, 0)); 
-webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; 
  color: transparent;
}




.grille{display: grid;grid-column-gap: 15px;align-items: center; }

.grille input { width: 97%;}
.grille select {width: 97%;}
.grille label{ width: 97%; }

.grille2col11{grid-template-columns: 1fr 1fr;}
.grille2col12{grid-template-columns: 1fr 2fr;}
.grille2col21{grid-template-columns: 2fr 1fr;}
.grille2col32{grid-template-columns: 3fr 2fr;}
.grille3col111{grid-template-columns: 1fr 1fr 1fr;}
.grille3col133{grid-template-columns: 1fr 3fr 3fr;}
.grille3col211{grid-template-columns: 2fr 1fr 1fr;}

.scrolh{
	overflow-x:auto;
}
th, td {
border: 1px solid;
padding: 4px;
text-align: center;
}

th {
background-color: silver;
}
table {
border-collapse: collapse;
background-color: white;
/*margin: 10px auto; incompatible avec domtoimage */
padding:2rem 1rem;
}
.largeur100{
	width: 100%;
}
caption{
  font-weight: bold;
  color:#1a5276;
background-color: white;
}


.masquer {
    display: none !important;
}

form {
background-color: beige;
margin:5px;
    padding: 5px;
    border-radius: 15px;
    border:solid 1px  green;
}

button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #400d9fff;
            color: aliceblue
        }
        button:hover {
            background-color: #152d93;
        }

.download-button {
    display: block; /* Permet d'aligner l'icône et le texte */
    align-items: center; /* Centre verticalement le texte et l'icône */
    gap: 8px; /* Espace entre le texte et l'icône */
    padding: 12px 25px; /* Espacement intérieur du bouton */
    background-color: #FF6F61; /* Une couleur vive et chaleureuse (rouge orangé) */
    color: white; /* Couleur du texte et de l'icône */
    text-decoration: none; /* Supprime le soulignement par défaut du lien */
    border-radius: 30px; /* Bords très arrondis pour un look enfantin */
    cursor: pointer; /* Indique que c'est cliquable */
    align-content: center;
    margin: auto;
    width: fit-content;
}

.download-button:hover {
     font-weight: bold; /* Texte en gras */
}

.share-buttons {
    margin-top: 30px;
    text-align: center; /* Centrer le bouton si souhaité */
}
.share-button {
    display: inline-flex; /* Pour aligner l'icône et le texte */
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    margin: 5px; /* Pour espacer si vous avez plusieurs boutons */
}
.fb {
    background-color: #3b5998; /* Couleur bleue de Facebook */
    color: white;
}
.yt{
    background-color: #FF0000; /* Rouge vif de YouTube */
    color: white;
}
.share-button:hover {
    transform: translateY(-2px); /* Petit effet de soulèvement au survol */
}

input[type="button"],input[type="submit"]{
    display: block; /* Permet d'aligner l'icône et le texte */
    padding: 12px 12px; /* Espacement intérieur du bouton */
    background-color: darkolivegreen; /* Une couleur vive et chaleureuse (rouge orangé) */
    color: white; /* Couleur du texte et de l'icône */
    border-radius: 15px; /* Bords très arrondis pour un look enfantin */
    align-content: center;
    margin: auto;
    width: fit-content;
}




.icon {
    display: inline-block; /* Permet d'aligner l'icône avec le texte */
    width: 1.2em;            /* Largeur par défaut : 1 "em" (prend la taille de police du parent) */
    height: 1.2em;           /* Hauteur par défaut : 1 "em" */
    vertical-align: middle; /* Alignement vertical pour centrer l'icône avec le texte */
    overflow: hidden;      /* Masque tout débordement si l'icône n'est pas parfaitement alignée */
}

.icon > use { fill: currentColor; stroke: currentColor; /* Si vos icônes ont un contour a envlever */ 
}
.icon:hover { opacity: 0.8;}

textarea {
  width: 100%; /* Makes the textarea take up 100% of its parent's width */
  border: 1px solid green; /* Sets a 1px solid green border */
  box-sizing: border-box; /* Ensures padding and border are included in the 100% width */
}


/* Conteneur du menu latéral */
.side-menu {
    background-color: #ffe082; /* Jaune pastel joyeux */
    border-radius: 10px; /* Coins arrondis pour un aspect plus doux */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Ombre douce et amusante */
    padding: 5px 0;
    width: 100%; /* Une largeur légèrement plus généreuse */
    box-sizing: border-box; /* Inclure padding et border dans la largeur */
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu li {
    margin-bottom: 2px; /* Un peu moins d'espace entre les éléments pour un aspect plus compact */
}

/* En-tête des rubriques principales et sous-rubriques déroulantes */
.side-menu .menu-item-header {
    padding: 12px 20px; /* Plus de padding pour des zones cliquables plus grandes */
    cursor: pointer;
    background-color: #a7d9f2; /* Bleu ciel doux */
    color: #4b0082; /* Violet foncé pour le texte, bien contrasté */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Bordure interne plus discrète */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold; /* Texte en gras pour les titres */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4); /* Petite ombre pour le texte */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Transitions douces */
    border-radius: 10px; /* Arrondir les coins des en-têtes aussi */
    margin: 0 10px 2px 10px; /* Marges pour que les coins arrondis soient visibles */
}

.side-menu .menu-item-header:hover {
    background-color: #8ed0f5; /* Bleu un peu plus foncé au survol */
    transform: translateY(-2px); /* Léger effet de soulèvement */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Ombre subtile au survol */
}

/* Styles pour les sous-menus repliés */
.side-menu .submenu {
    display: none; /* Cache les sous-menus par défaut */
    padding-left: 15px; /* Indentation pour le niveau 2 */
    background-color: #fff9c4; /* Fond jaune très clair pour les sous-menus */
    margin: 0 10px 2px 10px; /* Correspondre aux marges de l'en-tête */
    border-radius: 0 0 10px 10px; /* Arrondir juste les coins du bas quand déplié */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); /* Petite ombre interne */
}

/* Styles pour les sous-menus du 3ème niveau */
.side-menu .third-level-submenu {
    padding-left: 5px; /* Indentation supplémentaire pour le niveau 3 */
    background-color: #e0f2f7; /* Fond bleu très clair pour le 3ème niveau */
}

/* Styles pour l'icône de toggle (flèche) */
.side-menu .toggle-icon {
    font-size: 0.9em; /* Légèrement plus grand */
    transition: transform 0.2s;
    color: #4b0082; /* Couleur de l'icône */
}

/* Lorsque l'élément est ouvert */
.side-menu .menu-item-header.open .toggle-icon {
    transform: rotate(90deg); /* Change la flèche pour indiquer l'ouverture */
}

/* Pour le texte des liens */
.side-menu a {
    display: block;
    padding: 10px 20px; /* Plus de padding pour des zones cliquables */
    text-decoration: none;
    color: #6a1b9a; /* Violet foncé pour les liens */
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6); /* Bordure en pointillé, plus ludique */
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 5px; /* Petits coins arrondis pour les liens aussi */
    margin: 2px 0; /* Petit espace entre les liens */
}

/* Retirer la bordure du dernier lien de chaque liste pour un rendu propre */
.side-menu .submenu li:last-child a {
    border-bottom: none;
}

/* Style pour l'élément actif */
.side-menu a.active {
    background-color: #ff9800; /* Orange vif pour l'élément actif */
    color: white;
    font-weight: bold;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Ombre interne pour l'effet actif */
}

.side-menu a:hover {
    background-color: #cddc39; /* Vert citron clair au survol */
    color: #333; /* Texte plus sombre au survol */
}

/* Spécifique pour les liens directs (Accueil, Contact) */
.side-menu > ul > li > a {
    background-color: #ffccbc; /* Rouge-orange doux pour les liens de premier niveau */
    margin: 0 10px 2px 10px; /* Pour avoir les mêmes marges que les headers */
    border-radius: 10px;
}

.side-menu > ul > li > a:hover {
    background-color: #ffab91; /* Un peu plus foncé au survol */
}

/* Ajustement des bordures et arrondis pour les listes imbriquées */
.side-menu .menu-item-header.open + .submenu {
    border-radius: 0 0 10px 10px; /* Arrondi seulement en bas lorsque déplié */
    overflow: hidden; /* Assure que les contenus ne dépassent pas */
}



/* ====================================================== */
/* Media Queries pour le Desktop (Largeur > 768px) (pas de changement ici) */
/* ====================================================== */
@media (min-width: 768px) {
    
   
      
body {
    flex-direction: row; /* Les éléments sont en ligne */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
	align-items: flex-start; /* Alignement en haut pour éviter les espaces vides */
  }

  header {
    order: 1; /* Ordre d'affichage */
    width: 100%;
	  display: flex;
  }

  main {
    order: 3;
    width: 70%; /* Ajustez la largeur selon vos besoins */
  }

  aside {
    order: 2;width: 25%; /* Ajustez la largeur selon vos besoins */
  }

  footer { order: 4;}	
    
    
    
    
    .hamburger-menu {
        display: none;
    }

    .nav-links {
        position: static;
        width: auto;
        height: auto;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        transform: translateX(0);
        transition: none;
        z-index: auto;
    }

    .nav-links ul {
        display: flex;
        width: auto;
    }

    .nav-links li {
        margin: 0 8px;
    }

    .nav-links a {
        background-color: transparent;
        box-shadow: none;
        color: white;
        font-size: 1.1em;
        padding: 8px 12px;
        justify-content: flex-start;
    }

    .nav-links a:hover {
        background-color: var(--nav-item-hover);
        transform: translateY(0);
    }

    .nav-links .material-symbols-outlined {
        margin-right: 8px;
        font-size: 1.2em;
        color: white;
    }
}