/* =======================================================
   RESET MINIMAL
   ======================================================= */
/* Le * signifie : "tous les éléments HTML" */
* {
    /* Garantit que padding + border sont inclus dans width/height */
    box-sizing: border-box;

    /* Supprime les marges par défaut du navigateur */
    margin: 0;
    padding: 0;

    /* Police par défaut pour tout le site */
    font-family: Arial, sans-serif;
}

/* =======================================================
   STRUCTURE GLOBALE
   ======================================================= */

/* body = toute la page */
body {
    color: black; /* Couleur du texte par défaut */
}

/* header = bandeau du haut */
header {
    text-align: center; /* centre le texte */
    padding: 15px;       /* espace interne */
    color: white;         /* texte blanc */
}

/* #logo img = toutes les images dans l’élément id="logo" */
/*#logo img {
    height: auto;
}*/

/* #titre_principal = titre du site */
#titre_principal {
    font-size: 2em;
    font-weight: bold;
    margin-top: 10px;
}

/* =======================================================
   Connexion
   ======================================================= */
#toplogin {
    background: #111;
    color: #ddd;
    height: 20px;
    padding: 0 8px;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;

    font-size: 12px;
}

#toplogin input {
    height: 14px;
    font-size: 11px;
    padding: 0 3px;
}

#toplogin button {
    height: 16px;
    font-size: 11px;
    padding: 0 5px;
    cursor: pointer;
}

/* =======================================================
   MENU
   ======================================================= */

/* #menu = bloc menu */
#menu {
    padding: 5px 0;
    text-align: center;
}

/* #menu ul = liste du menu */
#menu ul {
    list-style: none; /* enlève les puces */
    display: flex;    /* menu horizontal */
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

/* #menu li = chaque bouton */
#menu li {
    display: inline-block;
}

/* #menu a = liens du menu */
#menu a {
    display: block;
    padding: 8px 15px;
    text-decoration: none; /* enlève soulignement */
    border: 2px solid white;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.2s; /* animation douce */
}

/* Hover = quand la souris passe dessus */
#menu a:hover {
    filter: brightness(85%);
}

/* =======================================================
   CONTENU PRINCIPAL
   ======================================================= */

/* #content = zone centrale */
#content {
    padding: 20px;
    border: 2px solid #ccc;
    margin: 10px auto; /* auto = centre horizontalement */
    max-width: 1200px;
}

/* .content h1 = titres dans le contenu */
.content h1 {
    margin-bottom: 10px;
}

/* Paragraphes */
.content p {
    margin: 10px 0;
}

/* Listes */
.content ul {
    margin-left: 20px;
    padding-left: 1.2em;
}

/* Listes */
button,
input[type="submit"] {
    display: inline-block;

    padding: 8px 15px;
    font-size: 14px;
    font-weight: normal;

    border-radius: 5px;
    border-width: 2px;
    border-style: solid;

    text-decoration: none;
    cursor: pointer;

    background-color: transparent;
    transition: 0.2s;
}

/* =======================================================
   IMAGES (CENTRAGE GLOBAL)
   ======================================================= */

/* Centrer seulement les images "classiques" */
.content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Images spécifiques dans ton mémoire */
#image_historique img {
    border: 2px solid #ccc;
    padding: 5px;
}

.images-row {
  display: flex;
  justify-content: center;
  gap: 2px;
}

/* =======================================================
   CODE BLOCKS (NEUTRE PAR DEFAUT)
   ======================================================= */

/* pre = bloc de code */
pre {
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto; /* scroll horizontal */
    font-family: Consolas, monospace;
    background: white;
    color: white;
}

/* code = texte inline */
code {
    font-family: Consolas, monospace;
}

/* =======================================================
   FOOTER
   ======================================================= */

footer {
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    color: white;
}

/* =======================================================
   THEMES PAR FORMAT
   ======================================================= */

/* ===== CV ===== */
body.cv {
    background-color: #ffffff;
}
body.cv header,
body.cv footer {
    background-color: rgb(20, 65, 135);
}
body.cv #menu a {
    background-color: rgb(0, 0, 0);
    color: white;
    border-color: white;
}

body.cv button,
body.cv input[type="submit"] {
    background-color: rgb(0, 0, 0);
    color: white;
    border-color: white;
}
/* Link */
body.cv a         { color: #0B6E4F; }
body.cv a:hover   { color: #14966C; }
body.cv a:visited { color: #08503A; }


/* ===== PYTHON ===== */
body.python {
    background-color: #f0ffe0;
}
body.python header,
body.python footer {
    background-color: rgb(3, 34, 76);
}
body.python #menu a {
    background-color: rgb(3, 34, 76);
    color: white;
    border-color: white;
}

/* Python code sombre */
body.python pre {
    background: #1e1e1e;
    color: #dcdcdc;
}

body.python button,
body.python input[type="submit"] {
    background-color: rgb(3, 34, 76);
    color: white;
    border-color: white;
}

/* highlight.js Python */
body.python .hljs-keyword { color: #569cd6; }
body.python .hljs-title { color: #dcdcaa; }
body.python .hljs-string { color: #ce9178; }
body.python .hljs-comment { color: #6a9955; }
/* Link */
body.python a         { color: #0B6E4F; }
body.python a:hover   { color: #14966C; }
body.python a:visited { color: #08503A; }

/* ===== Python sur Excel ===== */
body.excelpy {
    background-color: #ffffff;
}
body.excelpy header,
body.excelpy footer {
    background-color: rgb(54, 153, 36);
}
body.excelpy #menu a {
    background-color: rgb(3, 34, 76);
    color: white;
    border-color: white;
}

/* Python code sombre */
body.excelpy pre {
    background: #1e1e1e;
    color: #dcdcdc;
}

body.excelpy button,
body.excelpy input[type="submit"] {
    background-color: rgb(3, 34, 76);
    color: white;
    border-color: white;
}

/* highlight.js Python */
body.excelpy .hljs-keyword { color: #569cd6; }
body.excelpy .hljs-title { color: #dcdcaa; }
body.excelpy .hljs-string { color: #ce9178; }
body.excelpy .hljs-comment { color: #6a9955; }
/* Link */
body.excelpy a         { color: #0B6E4F; }
body.excelpy a:hover   { color: #14966C; }
body.excelpy a:visited { color: #08503A; }

/* ===== VBA ===== */
body.vba {
    background-color: #ffffff;
}
body.vba header,
body.vba footer {
    background-color: rgb(54, 153, 36);
}
body.vba #menu a {
    background-color: rgb(54, 153, 36);
    color: white;
    border-color: black;
}

/* VBA style Excel */
body.vba pre {
    background: white;
    color: black;
}

body.vba button,
body.vba input[type="submit"] {
    background-color: rgb(54, 153, 36);
    color: white;
    border-color: black;
}

/* highlight.js VBA */
body.vba .hljs-keyword,
body.vba .hljs-title,
body.vba .hljs-built_in {
    color: #0000FF;
    font-weight: bold;
}
body.vba .hljs-string { color: #A31515; }
body.vba .hljs-comment { color: #008000; }
body.vba .hljs-number { color: black; }

/* ===== MAIN ===== */
body.main {
    background-color: #ffffff;
}
body.main header,
body.main footer {
    background-color: black;
}
body.main #menu a {
    background-color: black;
    color: white;
    border-color: white;
}

/* ===== MECAFLUX ===== */
body.mecaflux {
    background-color: #ffffff;
}
body.mecaflux header,
body.mecaflux footer {
    background-color: rgb(20, 135, 135);
}
body.mecaflux #menu a {
    background-color: rgb(0, 0, 0);
    color: white;
    border-color: white;
}

body.mecaflux button,
body.mecaflux input[type="submit"] {
    background-color: rgb(0, 0, 0);
    color: white;
    border-color: white;
}
/* Link */
body.mecaflux a         { color: #0B6E4F; }
body.mecaflux a:hover   { color: #14966C; }
body.mecaflux a:visited { color: #08503A; }

/* ===== THERMIQUE ===== */
body.thermique {
    background-color: #ffffcc;
}
body.thermique header,
body.thermique footer {
    background-color: black;
}
body.thermique #menu a {
    background-color: black;
    color: white;
    border-color: white;
}

body.thermique button,
body.thermique input[type="submit"] {
    background-color: black;
    color: white;
    border-color: white;
}
/* Link */
body.thermique a         { color: #0B6E4F; }
body.thermique a:hover   { color: #14966C; }
body.thermique a:visited { color: #08503A; }

/* ===== CHECKBUTTON ===== */

.liste-data {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-start;
}

.check-btn {
    cursor: pointer;
}

.check-btn input {
    display: none;
}

.check-btn .btn {
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    background-color: #c0392b;
    color: white;
    font-weight: bold;
    transition: background-color 0.2s ease;

    white-space: nowrap; /* évite les retours à la ligne dans un bouton */
}

/* Quand la checkbox est cochée */
.check-btn input:checked + .btn {
    background-color: #27ae60;
}