/* ════════════════════════════════════════════════════════════════════
   CONFIGURATION GÉNÉRALE DU SITE - Image de fond - Police
═══════════════════════════════════════════════════════════════════════ */
body {
    background: url(../images/fondusite01.jpg) no-repeat fixed; /* image de fond fixe, non répétée */
    background-color: #fcfbfb; /* Définit la couleur de fond principale */
    background-size: cover; /* L’image couvre tout l’écran sans déformation */
    font-family: "Lora", serif; /* Définit la police (style d'écriture) principale du site */
    text-align: center; /* Centre le texte par défaut */
    color: #070707; /* Couleur de texte principale */
    margin: 0; /* Supprime les marges par défaut du navigateur */
    padding: 0; /* Supprime tous les espacements internes par défaut du navigateur */
    width: 100%; height: 100%;
}
* {
    box-sizing: border-box; /* Inclut bordure et padding dans le calcul de la taille */
    margin: 0; /* Supprime toutes les marges par défaut */
    padding: 0; /* Supprime tous les espacements internes par défaut */
}
/* ════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION --- LOGO, TITRE --- Responcive
══════════════════════════════════════════════════════════════════════ */
.navtitrestructure {  /* structure du module */
    margin: 5px;              /* Ajoute un espace extérieur autour du bloc */
    padding: 5px;             /* Ajoute un espace intérieur autour du contenu */
    display: flex;            /* Active Flexbox pour organiser les éléments */
    justify-content: center;  /* Centre tout horizontalement */
    align-items: center;      /* Centre tout verticalement */
    width: 100%;              /* Le conteneur prend toute la largeur */
    text-align: center;       /* Centre le texte (utile si un texte seul apparaît) */
}
.navtitre {   /* réglage du module */
    display: flex;                      /* Conteneur flex pour aligner logo + titre */
    flex-wrap: wrap;                    /* Permet au contenu de passer à la ligne si manque d’espace */
    justify-content: center;            /* Centre horizontalement les éléments internes */
    align-items: center;                /* Centre verticalement les éléments internes */
    gap: clamp(20px, 1vw, 30px);        /* Espace adaptatif entre logo et titre (responsive) */
    padding: 0.3em 0.6em;               /* Légère marge interne pour aérer le bloc */
    font-weight: 500;                   /* Légère mise en gras du texte contenu */
    width: fit-content;                 /* S'adapte exactement à la taille du contenu */
    line-height: 1;                     /* Réduit l’espace vertical inutile autour du texte */
}
.navtitrelogo {  /* réglage du logo */
    height: 1em;         /* Taille du logo proportionnelle à la taille du texte */
    width: auto;         /* Garde les proportions originales de l'image */
    display: block;      /* Évite que l’image crée un petit espace sous elle */
}
.navtitre > a { /* Style général des liens dans .navtitre */
    color: #e0f806;       /* Couleur jaune-vert fluorescente du texte */
    font-weight: 800;     /* Très gras pour donner de l’importance au titre */
    font-size: clamp(20px, 5vw, 40px);  /* Taille adaptative du titre selon l'écran */
    text-shadow:          /* Contour noir pour améliorer la lisibilité */
        2px 2px 0 black,
       -2px 2px 0 black,
        2px -2px 0 black,
       -2px -2px 0 black;
    text-decoration: none; /* Retire le soulignement du lien */
    line-height: 1;        /* Supprime l’espace vertical inutile */
}
/* ════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION — CONTENEUR DES BOUTONS --- Responcive
══════════════════════════════════════════════════════════════════════ */
.navboutonstructure {   /* Structure générale   */
    margin: 5px;                 /* Espace autour du bloc navigation   */
    padding: 5px;                /* Espace interne autour du contenu   */
    display: flex;               /* Active Flexbox pour centrage       */
    justify-content: center;     /* Centre horizontalement              */
    align-items: center;         /* Centre verticalement                */
    width: 100%;                 /* Prend toute la largeur disponible   */
    text-align: center;          /* Centre le texte si nécessaire        */
}
.navbouton {   /* CONTENEUR DES BOUTONS  */
    display: inline-flex;        /* Met les éléments sur une seule ligne (si possible) */
    flex-wrap: wrap;             /* Permet le retour à la ligne sur petits écrans      */
    justify-content: center;     /* Centre les boutons horizontalement                 */
    align-items: center;         /* Centre verticalement                               */
    gap: clamp(20px, 1vw, 30px); /* Espace réactif entre boutons (20→30px)             */
    padding: 0.3em 0.6em;        /* Espace interne léger                               */
    font-weight: 500;            /* Légèrement gras                                    */
    width: fit-content;          /* S'adapte au contenu                                */
    height: fit-content;         /* Idem pour la hauteur                               */
    line-height: 1;              /* Hauteur de ligne compacte                          */
}
/* ═════════ BOUTONS DE LA BARRE DE NAVIGATION ═════════ */
.bouton1, .bouton1fix {  /* BOUTONS — Base commune (style partagé)  */
    display: inline-flex;        /* Permet centrage interne + zone cliquable complète  */
    align-items: center;         
    justify-content: center;

    padding: 3px 16px;           /* Taille du bouton (fixe)                             */
    border-radius: 8px;          /* Coins arrondis                                      */

    font-weight: 700;            /* Texte plus visible                                  */
    text-align: center;          
    text-decoration: none;       /* Retire le soulignement des liens                    */

    border: 1px solid #000;      /* Bordure noire                                       */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8); /* Ombre forte                          */

    cursor: pointer;             /* Curseur “main”                                      */
    transition: all 0.25s ease-in-out; /* Animation sur hover                            */

    font-size: clamp(12px, 2.5vw, 18px); /* Taille responsive (mobile → grand écran)    */
}
.bouton1 {  /* BOUTON CLASSIQUE  */
    background: rgba(250, 247, 247, 0.8); /* Gris très clair légèrement transparent     */
    color: rgb(8, 8, 8);                  /* Texte noir/gris foncé                      */
}
.bouton1fix { /* BOUTON FIXE / MISE EN ÉVIDENCE  */
    background: rgba(255, 255, 0, 0.9); /* Jaune opaque                               */
    color: #000;                        /* Texte noir                                 */
}
.bouton1:hover { /* EFFET AU SURVOL (hover)  */
    background: rgba(255, 255, 0, 0.9);  /* Couleur du bouton fix au hover             */
    color: rgb(5, 5, 5);                 /* Texte légèrement plus foncé                */
}
/* ═══════════════════════════════════
 --- MAIN --- GLOBAL --- TOUT LE MAIN
══════════════════════════════════════ */
main#main-content {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box; /* pour que le padding soit inclus dans la largeur */
}
/* ════════════════════════════════════════
 --- Flèche gauche - Titre - Flèche droite 
═══════════════════════════════════════════ */
.flechetitrestructure {
    margin-top: 15px; /* espace plus grand au-dessus du message */
    margin-bottom: 30px; /* espace plus grand en dessous du message */    display: flex;        /* garde tout sur une ligne, mais reste inline */
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;           /* empêche le wrap */
    padding: 0.5rem 0;
    gap: 10px;                   /* espace entre texte et flèches */
}
.flechetitre {
    font-size: clamp(10px, 2.5vw, 18px); /* Taille de texte responsive */
    display: inline-block;       /* texte reste inline */
    overflow: hidden;
    text-overflow: ellipsis;     /* si texte trop long, on coupe */
    padding: 5px 50px;
    background: rgb(5, 5, 5, 0.5);
    font-family: 'Lora', serif; /* même écriture élégante */
    color: #e0f806; 
    border: 1px solid #000000;
    border-radius: 12px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}
.fleche {  /* Effet hover sur les flèches */
    width: 32px;   /* optionnel : fixe une taille uniforme */
    height: auto;
    transition: 0.2s ease;
    cursor: pointer;
}
.fleche-gauche:hover {  /* Gauche → change d’image au survol */
    content: url("../images/flechegauche2.png");
}
.fleche-droite:hover {  /* Droite → change d’image au survol */
    content: url("../images/flechedroite2.png");
}















/* ══════════════════════════════════
   ── Bloc Photo + Article Scroll ──
═════════════════════════════════════ */
.blocarticle1 {
    margin: 20px auto;          /* Centre horizontalement la section */
    padding: 2px;               /* Petit espace interne */
    width: 80%;                 /* Largeur standard des blocs du site */
    display: flex;              /* Active le modèle flexbox */
    flex-direction: column;     /* Empile les éléments verticalement */
    align-items: flex-start;    /* Aligne à gauche dans le conteneur */
    text-align: left;           /* Texte aligné à gauche */
}

:root {
    --gap: 1rem;                /* Espace entre image et texte */
    --bg: rgba(255,255,255,0.5);/* Fond blanc translucide */
    --max-width: 1100px;        /* Largeur max du bloc article */
    --image-height: 300px;      /* Hauteur fixe de l’image et du texte */
}

.article-wrap {
    width: 100%;                /* Occupe toute la largeur disponible */
    max-width: var(--max-width);/* Ne dépasse pas la largeur max */
}

.article {
    display: flex;              /* Place image et texte côte à côte */
    gap: var(--gap);            /* Espace entre les deux blocs */
    align-items: stretch;       /* Etire les deux à la même hauteur */
    box-sizing: border-box;     /* Inclut padding/border dans largeur */
}

.media {                        /* Bloc image */
    flex: 0 0 40%;              /* Largeur fixe : 40% */
    display: flex;              /* Centre l’image */
    align-items: center;        /* Centre verticalement */
    justify-content: center;    /* Centre horizontalement */
    border-radius: 12px;        /* Arrondit les coins */
    overflow: hidden;           /* Coupe les débordements */
    height: var(--image-height);/* Hauteur de l’image */
    background: var(--bg);      /* Fond translucide */
    box-shadow: 0 6px 18px rgba(15,30,50,0.08); /* Ombre légère */
}

.media img {
    width: 100%;                /* L’image remplit la largeur */
    height: 100%;               /* L’image remplit la hauteur */
    object-fit: cover;          /* Recadre proprement l’image */
    display: block;             /* Supprime l’espace sous l’image */
    border: 1px solid #000000;  /* Bordure noire */
    border-radius: 12px;        /* Coins arrondis */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8); /* Ombre forte */
}

.content {                      /* Bloc texte */
    flex: 1 1 60%;              /* Occupe l’espace restant (60%) */
    min-width: 0;               /* Autorise le rétrécissement */
    display: flex;              /* Colonne interne pour les textes */
    flex-direction: column;     /* Empile les paragraphes */
    gap: 0.5rem;                /* Espace entre paragraphes */
    padding: 1rem;              /* Espace interne */
    background: var(--bg);      /* Fond translucide */
    border: 1px solid #000000;  /* Bordure noire */
    border-radius: 12px;        /* Coins arrondis */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8); /* Ombre forte */
    overflow-y: auto;           /* Scroll vertical si contenu long */
    max-height: var(--image-height); /* Même hauteur que l’image */
    scrollbar-width: thin;      /* Réduit largeur sur Firefox */
    scrollbar-color: #bbb transparent; /* Style scroll Firefox */
}

.content::-webkit-scrollbar {
    width: 6px;                 /* Largeur de la barre de défilement */
}
.content::-webkit-scrollbar-thumb {
    background: #aaa;           /* Couleur du slider */
    border-radius: 3px;         /* Coins arrondis du slider */
}

.content h1 {
    margin: 0;                  /* Supprime marges par défaut */
    font-size: 1.25rem;         /* Taille du titre */
}

.content p {
    margin: 0;                  /* Supprime marges par défaut */
    line-height: 1.5;           /* Meilleure lisibilité */
    color: #0b1b2a;             /* Bleu foncé élégant */
}

/* Empiler sur mobile */
@media (max-width: 768px) {
    .article {
      flex-direction: column;   /* Passe image + texte en vertical */
    }
    .media,
    .content {
      width: 100%;              /* Occupe toute la largeur */
      max-height: none;         /* Supprime hauteur fixe */
      height: auto;             /* S'adapte au contenu */
      overflow: visible;        /* Désactive le scroll */
    }
}


















/* ════════════════════════════════════════════════════════════════════
   --- BLOCS Présentation du MODULE  ---
═══════════════════════════════════════════════════════════════════════ */
.blocpresentemodulestructure {   /* Zones contenant les blocs de texte */
    margin: 0;                     /* Supprime l’espace externe autour de la section */
    margin-top: 30px; /* espace plus grand au-dessus du message */
    padding: 0;                    /* Supprime l’espace interne */
    width: 100%;                   /* La section prend toute la largeur disponible */
    display: flex;                 /* Active Flexbox pour une mise en page fluide */
    flex-direction: column;        /* Empile les éléments verticalement */
    align-items: center;           /* Centre horizontalement les éléments internes */
    justify-content: center;       /* Centre verticalement si hauteur définie (pas ici) */
    text-align: center;            /* Centre tout le texte à l’intérieur */
    box-sizing: border-box;        /* Inclut bordure/padding dans width = 100% */
}
.blocpresentemodule {  /* BLOCS DE TEXTE */
    width: 90%;                    /* Largeur limitée pour une lecture confortable */
    max-width: 900px;              /* Empêche les textes d’être trop étirés sur grands écrans */
    margin: 15px auto;             /* Centre le bloc + espace vertical plus harmonieux */
    padding: 15px 20px;            /* Plus de padding pour mieux aérer */
    background: rgba(0, 0, 0, 0.5);/* Fond semi-transparent pour lisibilité sur image */
    border: 1px solid #000;        /* Fine bordure noire autour du bloc */
    border-radius: 10px;           /* Arrondit légèrement les angles */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); /* Ombre douce et moderne */
    backdrop-filter: blur(2px);    /* (Optionnel) Effet de flou derrière le bloc */
}
.blocpresentemodule p {  /* PARAGRAPHES */
    color: #f2f6f8;                /* Couleur du texte (blanc bleuté) */
    font-size: 1.3rem;             /* Taille adaptative (~20–22px) */
    line-height: 1.6;              /* Espacement entre lignes pour améliorer la lecture */
    margin: 0;                     /* Évite les marges par défaut inutiles */
}
/* ═════════════════════════════════════════════════════════════
   ── Bouton : Retour en haut de page ── scroll contrôlée par JS
═════════════════════════════════════════════════════════════════ */
.bouton-retour {
    position: fixed; /* Fixé à l'écran */
    bottom: 25px; /* Distance du bas */
    right: 25px; /* Distance du bord droit */
    width: 40px; /* Largeur du bouton */
    height: 40px; /* Hauteur du bouton */
    opacity: 0; /* Caché par défaut */
    pointer-events: none; /* Désactive les clics tant qu’il est invisible */
    transition: opacity .25s ease, transform .25s ease; /* Animation d’apparition/disparition */

    cursor: pointer; /* Curseur main au survol */
    z-index: 1000; /* Au-dessus des autres éléments */
    border-radius: 8px; /* Coins arrondis */
}
.bouton-retour.visible {
    opacity: 0.7; /* Visible */
    pointer-events: auto; /* Clics activés */
}
.bouton-retour:hover {
    opacity: 1; /* Complètement visible au survol */
    transform: translateY(-4px); /* Léger déplacement vers le haut */
}
.bouton-retour img {  /* Images interne du bouton */
    width: 100%; /* S'adapte à la taille du bouton */
    height: 100%; /* S'adapte à la taille du bouton */
    position: absolute; /* Superposées */
    transition: opacity .25s ease; /* Animation de changement d’image */
}
.img-normal { opacity: 1; } /* Image normale visible */
.img-hover  { opacity: 0; } /* Image hover cachée */
.bouton-retour:hover .img-normal { opacity: 0; } /* Disparaît au survol */
.bouton-retour:hover .img-hover  { opacity: 1; } /* Apparaît au survol */
/* ════════════════════════════════════════
   ─ Bandeau supérieur des blocs de code ──
═══════════════════════════════════════════ */
.bloccode {
    margin-top: 30px; /* espace plus grand au-dessus du message */
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center; /* ✅ Centre le contenu horizontalement */
    text-align: center;  /* ✅ Centre le texte */
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px 0;
}
.bandeau {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #e0f806;
    display: flex;
    justify-content: space-between; /* titre à gauche, bouton à droite */
    align-items: center;
    padding: 8px 12px;
    font-weight: bold;
    border-bottom: 1px solid black;
}
.bandeau h4 {
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
}
/* ──  bloc Code pour afficher du code html/css/js via des fichier externe  ──── */
.bloccodestructure {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}
.bloccode1, .bloccode2, .bloccode3, .bloccode4 {
    background: rgba(255, 255, 255, 0.5);
    color: #24292f;
    border : 1px solid black;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    border-radius: 10px;
    width: 95%;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: "Fira Code", "Consolas", "Courier New", monospace;
    box-sizing: border-box;
    line-height: 1.25;
    font-weight: normal;
    margin-top: 10px;
    overflow-wrap: break-word;
    margin-bottom: 20px;
    white-space: pre-wrap; /* important pour .bloccode1 */
}
.bloccode2 p, .bloccode3 p, .bloccode4 p {  /* Paragraphes dans Markdown */
    margin: 0.3em 0;
}
.bloccode2 h1, .bloccode3 h1, .bloccode4 h1 {  /* Titres Markdown */
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0.5em 0 0.3em 0;
    color: #0366d6;
}
.bloccode2 h2, .bloccode3 h2, .bloccode4 h2 {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0.4em 0 0.2em 0;
    color: #005cc5;
}
.bloccode2 ul, .bloccode3 ul, .bloccode4 ul {  /* Listes Markdown */
    margin: 0.3em 0 0.3em 1.2em;
    padding: 0;
}
.bloccode2 a, .bloccode3 a, .bloccode4 a {  /* Liens Markdown */
    color: #0366d6;
    text-decoration: underline;
}
.bloccode2 code, .bloccode3 code, .bloccode4 code {  /* Code inline dans Markdown */
    background: rgba(27,31,35,0.05);
    padding: 2px 5px;
    border-radius: 5px;
    font-family: "Fira Code", monospace;
}
.bloccode2 pre, .bloccode3 pre, .bloccode4 pre {  /* Blocs de code Markdown */
    background: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.5em 0;
}
/* ────────── Bouton Copier ────────── */
.copy-btn {
    align-self: flex-end;
    background-color: #e0f806;
    border: none;
    color: #000;
    border : 1px solid black;
    padding: 5px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
  .copy-btn:hover {
    background-color: #c9e705;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* ────────── Scroll vertical dans les blocs de code ────────── */
.bloccode1, .bloccode2, .bloccode3, .bloccode4 {
    max-height: 400px;          /* Hauteur max avant scroll */
    overflow-y: auto;           /* Barre de défilement verticale */
    position: relative;
    scrollbar-width: thin;      /* Barre discrète (Firefox) */
    scrollbar-color: #ccc #f6f8fa;
}
/* Personnalisation de la scrollbar pour Chrome / Edge */
.bloccode1::-webkit-scrollbar,
.bloccode2::-webkit-scrollbar,
.bloccode3::-webkit-scrollbar,
.bloccode4::-webkit-scrollbar {
    width: 8px;
}
.bloccode1::-webkit-scrollbar-thumb,
.bloccode2::-webkit-scrollbar-thumb,
.bloccode3::-webkit-scrollbar-thumb,
.bloccode4::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 6px;
}
/* Responsive */
@media (max-width: 768px) {
.bloccode1, .bloccode2, .bloccode3, .bloccode4 {
        width: 90%;
}
.bloccode {
    width: 90%;
}
}