/* polices */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@200;300;350;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

* ==========================================================
   ACCESSIBILITÉ — Réduction des animations pour utilisateurs sensibles
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ==========================================================
   STRUCTURE — Mise en page des sections principales
   ========================================================== */
section.resume-section {
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 75rem;
  /* padding-top et padding-bottom supprimés car neutralisés par la surcharge */
}

/* ==========================================================
   STRUCTURE — Contenu interne des sections
   ========================================================== */
section.resume-section .resume-section-content {
  width: 100%;
}



/* ==========================================================
   STRUCTURE — Adaptation tablette (≥768px)
   ========================================================== */
@media (min-width: 768px) {
  section.resume-section {
    min-height: min-content;
    /* padding-top et padding-bottom supprimés car neutralisés par la surcharge */
  }
}


/* ==========================================================
   STRUCTURE — Adaptation desktop (≥992px)
   ========================================================== */
@media (min-width: 992px) {
  section.resume-section {
    padding-left: 3rem;
    padding-right: 3rem;
    /* padding-top et padding-bottom supprimés car neutralisés par la surcharge */
  }
}


/* ==========================================================
   LISTES — Style global des listes
   ========================================================== */
ul {
  list-style-type: none;   /* supprime les puces par défaut */
  margin: 0;               /* neutralise la marge externe */
  padding: 0;              /* neutralise le padding interne */
}


/* ==========================================================
   STRUCTURE — Billets (post)
   ========================================================== */
.post {
  position: relative;              /* utile pour positionner des éléments internes */
  margin: 3em 0;                   /* garde l’espacement vertical entre les billets */
  padding: 0;                      /* supprime tout espace interne */
  text-align: left;               /* texte aligné à gauche */
}

/* ==========================================================
   MENUS — Liens du menu latéral (simple-menu)
   ========================================================== */
#sideNav .simple-menu li.nav-item a {
  display: block;                     /* occupe toute la largeur */
  padding: 0.5em 1em;                 /* espacement interne */
  color: var(--bs-dark);              /* couleur du texte */
  text-decoration: none;              /* supprime le soulignement */
  transition: transform 0.3s ease;    /* animation fluide pour le zoom */
}


@media (min-width: 992px) {
#sideNav .simple-menu li.nav-item a:hover,
#sideNav .simple-menu li.nav-item a:focus {
  transform: scale(1.05);             /* zoom léger au survol/focus */
}
}

/* ==========================================================
   BILLETS — Images cliquables dans les posts
   ========================================================== */
.post a img {
  max-width: 100%;                 /* image responsive */
  height: auto;                    /* conserve les proportions */
  border: none;                    /* supprime la bordure */
  transition: transform 0.3s ease; /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.post a img:hover {
  transform: scale(1.05);          /* zoom léger au survol */
}
}


/* ==========================================================
   BILLETS — Titres des billets (h2)
   ========================================================== */
.post h2 {
  font-size: 2em;                   /* taille ajustée pour plus de présence */
  margin: 0;                        /* aucune marge, pas d’espace supplémentaire */
  font-weight: bold;                /* texte en gras */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

.post h2 a {
  color: var(--bs-dark);            /* couleur du texte */
  text-decoration: none;            /* supprime le soulignement */
}

@media (min-width: 992px) {
.post h2 a:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}

/* ==========================================================
   BILLETS — Bouton/Lien "Lire la suite"
   ========================================================== */
.post .read-more {
  display: inline-block;            /* bouton en ligne */
  margin-top: 1em;                  /* espacement au-dessus */
  font-size: 0.9em;                 /* taille réduite */
  color: var(--bs-primary);         /* couleur primaire */
  text-decoration: none;            /* supprime le soulignement */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}


@media (min-width: 992px) {
.post .read-more:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}

/* ==========================================================
   BILLETS — Navigation entre articles (précédent / suivant)
   ========================================================== */
.post-navigation {
  display: flex;                    /* liens disposés en flex */
  justify-content: space-between;   /* espacés aux extrémités */
  margin: 2em 0;                    /* marge verticale */
  font-size: 0.9em;                 /* taille réduite */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

.post-navigation a {
  color: var(--bs-dark);            /* couleur sombre */
  text-decoration: none;            /* supprime le soulignement */
}

@media (min-width: 992px) {
.post-navigation a:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}

/* ==========================================================
   BILLETS — Zone des commentaires
   ========================================================== */
.comments {
  margin-top: 2em;                  /* espace au-dessus de la zone */
}

.comments h3 {
  font-size: 1.3em;                 /* titre légèrement agrandi */
  margin-bottom: 1em;               /* espace sous le titre */
}

.comments .comment {
  margin-bottom: 1.5em;             /* espace entre les commentaires */
  padding: 1em;                     /* espacement interne */
  background-color: #f9f9f9;        /* fond léger au lieu de bordure */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.comments .comment:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}

.comments .comment-author {
  font-weight: bold;                /* auteur en gras */
  margin-bottom: 0.5em;             /* espace sous le nom */
}

.comments .comment-content {
  line-height: 1.8;                 /* interligne plus aéré */
}

/* ==========================================================
   BILLETS — Formulaire de commentaires
   ========================================================== */
.comment-form {
  margin-top: 2em;                  /* espace au-dessus du formulaire */
}

.comment-form label {
  display: block;                   /* labels sur une ligne entière */
  margin-bottom: 0.5em;             /* espace sous le label */
  font-weight: bold;                /* texte en gras */
}

.comment-form button {
  padding: 0.5em 1em;               /* taille du bouton */
  background-color: var(--bs-primary); /* couleur primaire */
  color: #fff;                      /* texte blanc */
  border: none;                     /* pas de bordure */
  cursor: pointer;                  /* curseur main */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.comment-form button:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}


/* ==========================================================
   BILLETS — Pagination
   ========================================================== */
.pagination {
  display: flex;                    /* liens disposés en flex */
  justify-content: center;          /* centrés horizontalement */
  margin: 2em 0;                    /* marge verticale */
}

.pagination a {
  padding: 0.5em 1em;               /* taille des liens */
  margin: 0 0.25em;                 /* espacement horizontal */
  border: none;                     /* suppression de la bordure grise */
  background-color: #f9f9f9;        /* fond léger */
  color: var(--bs-dark);            /* couleur sombre */
  text-decoration: none;            /* supprime le soulignement */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.pagination a:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}

.pagination .active a {
  background-color: var(--bs-primary); /* couleur primaire pour la page active */
  color: #fff;                      /* texte blanc */
}

/* ==========================================================
   SITE — Pied de page global
   ========================================================== */
footer {
  background-color: #fff;           /* fond neutre */
  padding: 2em 0;                   /* espacement vertical */
  text-align: center;               /* contenu centré */
  font-size: 0.9em;                 /* taille réduite */
  color: #444;                      /* gris plus doux */
}

footer a {
  color: #444;                      /* liens homogènes avec le texte */
  text-decoration: none;            /* supprime le soulignement */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
footer a:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}


/* ==========================================================
   SITE — Barre de navigation principale
   ========================================================== */
.navbar {
  background-color: #fff;           /* fond neutre */
  padding: 0.5em 1em;               /* espacement global */
}

.navbar a {
  color: var(--bs-dark);            /* couleur sombre */
  text-decoration: none;            /* supprime le soulignement */
  padding: 0.5em;                   /* espacement interne des liens */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.navbar a:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}

/* ==========================================================
   SITE — Menus déroulants (dropdowns)
   ========================================================== */
.navbar .dropdown-menu {
  background-color: #e9ecef;        /* fond gris clair */
  border: none;                     /* suppression de la bordure */
}

.navbar .dropdown-menu a {
  color: var(--bs-dark);            /* couleur sombre */
  text-decoration: none;            /* supprime le soulignement */
  padding: 0.75em 1.25em;           /* espacement interne plus généreux */
  display: block;                   /* liens en bloc */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.navbar .dropdown-menu a:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}


/* Barre de navigation compacte */
.navbar {
  position: relative;       /* référence pour le bouton */
  background-color: #fff;
  padding: 0;               /* supprime tout padding vertical */
  margin: 0;                /* supprime toute marge externe */
  min-height: 3.5rem;       /* fixe une hauteur minimale propre */
  display: flex;
  align-items: center;      /* contenu centré verticalement */
}


/* Bouton hamburger en haut à droite */
.navbar-toggler {
  position: absolute;
  top: 1.5rem;
  right: 0.5rem;
  margin: 0 !important;
  z-index: 1000;
  background-color: #fafcfe;
  border: none;
  transition: transform 0.3s ease;
  padding: 0.6em 0.9em;
  font-size: 1.3rem;
}

@media (min-width: 992px) {
.navbar-toggler:hover {
  transform: scale(1.05);
}
}


/* Supprimer toute marge/padding en haut du site */
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.container-fluid.p-0 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

section.resume-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}



.navbar-toggler-icon {
  width: 1.5em;                     /* largeur intermédiaire de l’icône */
  height: 1.5em;                    /* hauteur intermédiaire de l’icône */
}


/* ==========================================================
   SITE — Icône hamburger (traits)
   ========================================================== */
.navbar-toggler-icon {
  width: 2em;
  height: 1.5em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  /* traits en gris (#6c757d) */
}

.navbar-toggler {
  border: 2px solid #fafcfe !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================
   SITE — Formulaire de recherche
   ========================================================== */
.search-form {
  margin-top: 1em;                  /* espace au-dessus du formulaire */
}

.search-form input[type="text"] {
  width: 250px;                     /* champ plus large */
  padding: 0.75em;                  /* espacement interne plus confortable */
  border: none;                     /* suppression de la bordure grise */
  background-color: #f9f9f9;        /* fond léger */
}

.search-form button {
  padding: 0.5em 1em;               /* taille du bouton */
  background-color: var(--bs-primary); /* couleur primaire */
  color: #fff;                      /* texte blanc */
  border: none;                     /* pas de bordure */
  cursor: pointer;                  /* curseur main */
  transition: transform 0.3s ease;  /* animation fluide pour le zoom */
}

@media (min-width: 992px) {
.search-form button:hover {
  transform: scale(1.05);           /* zoom léger au survol */
}
}


/* ==========================================================
   dates des billets
   ========================================================== */

.day-date {
  display: none;
}



/* ==========================================================
   styles pour les citations
   ========================================================== */

blockquote {
  font-size: 0.9em;
  line-height: 1.4;
  quotes: "“" "”";
  margin: 1.5em 0;
  font-style: italic;
  color: #444;
}

blockquote:before,
blockquote:after {
  margin: 0;
  font-size: 2.5em;
  display: inline-block;
  line-height: 1;
  color: #ccc; /* gris plus doux */
}

blockquote:before {
  content: open-quote;
  margin-right: .25em;
}

blockquote:after {
  content: close-quote;
  margin-left: .25em;
}

blockquote p:first-child {
  margin-top: 0;
}


/* === Bloc Images de contenu === */

.post-content img,
.post-excerpt img {
  max-width: 100%;
  height: auto;
  display: inline-block; /* ou supprime display:block */
  vertical-align: middle; /* optionnel pour aligner avec le texte */
}

/* === Bloc Notes de bas de page === */

.footnotes {
  font-size: 0.875em;   /* ~19px si base 22px */
  line-height: 1.4;
  color: #444;          /* cohérence avec texte global */
  margin-top: 2em;      /* espace avant les notes */
}

.footnotes h4 {
  font-variant: normal;
  font-weight: 600;     /* semi-gras pour élégance */
  font-family: 'League Spartan', sans-serif;
  margin-bottom: 0.5em;
  color: #222;          /* cohérence avec titres */
}


/* === Bloc Lien "Read it" / Lire la suite === */
.read-it {
  margin: 0 0 1em;
  font-size: 1.5em;       /* ~33px si base 22px */
  font-weight: 500;       /* semi-gras pour visibilité */
  color: #444;            /* cohérence avec palette */
  text-decoration: none;  /* pas de soulignement */
  display: inline-block;  /* permet marges verticales */
}
.read-it:hover {
  color: #000;            /* effet au survol */
  text-decoration: underline;
}

/* === Bloc Pièces jointes === */

#attachments {
  margin: 3em 0;
}

#attachments ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#attachments li {
  margin: 0.5em 0;
  font-size: 1.1em;       /* légèrement réduit pour cohérence */
  color: #444;
}

#attachments li a {
  text-decoration: none;
  color: #444;
}

#attachments li a:hover {
  text-decoration: underline;
  color: #000;
}


/* === Bloc Commentaires & Formulaire === */

#comments,
#ping-url,
#comment-form,
#comments-feed {
  color: #444;       /* cohérence avec texte global */
  clear: both;
}

#comment-form,
#ping-url {
  padding: 1.5em;
  margin-top: 2em;
  color: #444;
  border: 1px solid #e9ecef;
  background-color: #fafafa; /* fond clair pour lisibilité */
  border-radius: 4px;        /* angles adoucis */
}


/* === Bloc Encadré #pr === */

#pr {
  padding: 1em;
  margin-bottom: 1.5em;
  border: 1px dashed #e9ecef;
  border-radius: 4px;       /* angles adoucis */
  background-color: #fafafa; /* fond clair pour contraste */
  color: #444;              /* cohérence avec texte global */
}


/* === Bloc Commentaires === */
#comments,
#ping-url,
#comment-form,
#comments-feed {
  color: #444;
  clear: both;
  font-size: 1em;
}

#comments h3,
#ping-url h3,
#pr h3,
#comment-form h3 {
  margin-top: 2em;
  color: #666;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
}

#comment-form h3,
#ping-url h3 {
  margin-top: 0;
}

#comments>ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

.comment,
.ping {
  clear: left;
  margin-left: 0;
  border-top: 1px solid #e9ecef;
  padding: 1em 0;
}

.comment-info {
  padding-bottom: .5em;
  line-height: 1.4;
  color: #495057;
  font-size: 0.9em;
}

#comments .me {
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 0.75em;
  margin: 1.5em 0;
  background-color: #fafafa;
}

#comments dl {
  font-size: 1.1em;
  margin: 2em 1em;
}

#comments dd {
  margin-left: 1.2em;
  color: #666;
  font-size: 0.875em;
}

#post-comments,
#pings,
#attachments,
#pr {
  padding-top: 3em;
}


/* === Bloc Formulaire (champs & labels) === */

.field {
  margin-bottom: 1.5em;
}

.field label {
  display: block;
  font-size: 0.875em;   /* ~19px */
  color: #666;          /* gris cohérent NG */
  text-indent: 6px;
  line-height: 1.4;
}


.field textarea {
  display: block;
  font-size: 100%;
  border: 1px solid #ced4da !important;
  padding: 0.75em 1em;
  background: #fff;
  border-radius: 4px;
  color: #444;
  width: 100%;
  max-width: 95%;               /* repris de #c_content */
}

.field textarea:focus {
  background: #fff;
  border-color: #868e96;
  outline: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.1); /* repris de #c_content */
}


/* === Bloc Formulaire de recherche === */

#search p {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  vertical-align: middle;
  padding: 0.25em 0.5em;
  display: inline-block;
}

#search input {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0.25em;
  font-size: 1em;
  color: #444;
}

#q:focus,
#q:hover {
  background: #fff;
  outline: none;
}

#search .submit {
  background-color: var(--bs-primary);
  color: #fff;
  vertical-align: middle;
  font-variant: small-caps;
  height: 2em;
  padding: 0 1em;
  border-radius: 4px;
  transition: all .3s ease-in-out;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

#search .submit:focus {
  background: var(--bs-primary);
  outline: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.2); /* feedback visuel */
}

#search .submit:hover {
  background: #495057;
}



/* === Bloc Recherche (widget) === */

#search.widget p {
  max-width: 20rem;
  margin: 0 auto; /* centré si nécessaire */
}


/* === Boutons d’action (Preview & Submit) === */
button.preview,
button.submit {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Spécifique au bouton Preview */
button.preview {
  background-color: var(--resume-accent);
  color: #fff;
}
button.preview:hover {
  background-color: #e85c5c;
}

/* Spécifique au bouton Submit */
button.submit {
  background-color: #222;
  color: #fff;
}
button.submit:hover {
  background-color: #444;
}

/* === Mise en évidence des mots-clés dans la recherche === */

.dc-search em {
  font-weight: 600;         /* semi-gras */
  color: #000;              /* noir pour contraste */
}

.dc-search em:before {
  content: '«';             /* guillemet français ouvrant */
}

.dc-search em:after {
  content: '»';             /* guillemet français fermant */
}


/* === Image de profil responsive === */

.img-profile {
  object-fit: cover;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;       /* cercle parfait */
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Adaptation sur écrans plus petits */

@media (max-width: 768px) {
  .img-profile {
    width: 10rem;
    height: 10rem;
  }
}

@media (max-width: 480px) {
  .img-profile {
    width: 8rem;
    height: 8rem;
  }
}


/* COLOR SWITCHER */

a {
  color: var(--bs-primary);
  text-decoration: none;
}


/* COLOR fond menu */

.bg-primary {
  background-color: var(--bs-primary) !important;
}


/* === Sélection de texte personnalisée === */
::selection {
  color: #000;
  background-color: var(--bs-primary);
}

::-moz-selection {
  color: #000;
  background-color: var(--bs-primary); /* compatibilité Firefox */
}

/* === Typographie globale === */

body {
  text-align: left !important;
}


/* Texte normal (exclut le menu latéral) */
body:not(#sideNav),
p,
span:not(#sideNav span),
div:not(#sideNav div),
.post,
.post-content {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #6c747e;
}

/* Titres spécifiques */
h1,
.resume-section h1,
.post-title h1 {
  font-family: 'League Spartan', Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: #6c747e;
  text-transform: none;   /* respecte la casse du HTML */
  font-variant: normal;   /* évite les small-caps forcés */
}

h2,
.resume-section h2,
.post-title h2 {
  font-family: 'League Spartan', Arial, sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: #444444;
  text-transform: none;   /* respecte la casse du HTML */
  font-variant: small-caps;
}

h3,
.resume-section h3,
.post-title h3 {
  font-family: 'League Spartan', Arial, sans-serif;
  font-size: 25px;
  font-weight: 500;       /* force le gras */
  color: #444444;
  text-transform: none;   /* empêche les majuscules automatiques */
  font-variant: normal;   /* empêche les small-caps */
}


/* === Structure du blog : suppression des infos === */

.site-title, .site-title__link, .site-title__text, #blog-title,
.lead.mb-5, .subheading.mb-5,
.dc-meta, .post-info, .post-author, .post-date, .post-permalink,
.navlinks, .post-nav,
#top, .top, .back-to-top,
#footer, .footer, .powered-by,
#navSpacer {
  display: none !important;
}

section.resume-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

hr {
  display: none !important;
}

.container-fluid.p-0 {
  background-color: #fafcfe !important;
}

/* Masquer visuellement les titres courants */
.entry-title, .post-title, .page-title,
.article-title, .header-title, .single-title {
  display: none !important;
}


/* ===========================
   IMAGES
   =========================== */
img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

a img {
  transition: transform 0.3s ease !important;
}

/* Zoom uniquement au survol, mais seulement sur grand écran */
@media (min-width: 992px) {
  a:hover img {
    transform: scale(1.05) !important;
  }
}
/* Empêche tout filtre parasite */
#content a:hover {
  filter: none !important;
}

.image-row-1 { display: flex; flex-wrap: wrap; width: 100% !important; }
.image-row-1 img { flex: 0 0 100% !important; max-width: 100% !important; height: auto !important; display: block !important; }

.image-row.image-row-2 { display: flex; flex-wrap: wrap; justify-content: center; box-sizing: border-box; }
.image-row.image-row-2 a { flex: 0 0 46%; max-width: 46%; margin: 1%; box-sizing: border-box; display: block; }
@media (min-width: 992px) {
  .image-row.image-row-2 a { flex: 0 0 22.5%; max-width: 22.5%; margin: 0.5%; }
}
.image-row.image-row-2 a img { width: 100%; height: auto; display: block; }

.image-row.image-row-3 { display: flex; flex-wrap: wrap; justify-content: center; box-sizing: border-box; }
.image-row.image-row-3 a { flex: 0 0 46%; max-width: 46%; margin: 1%; box-sizing: border-box; display: block; }
@media (min-width: 992px) {
  .image-row.image-row-3 a { flex: 0 0 21%; max-width: 21%; margin: 1%;
  }
}


/* Ne pas laisser d'espace a cause des images cachées */
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* optionnel, pour l’esthétique */
}


/* ==========================================================
   MENU — STYLE GLOBAL
   ========================================================== */

/* Liens du menu */
#sideNav .simple-menu li.nav-item a,
#sideNav .simple-menu li.nav-item a:visited {
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #828689 !important;
  text-decoration: none !important;
  display: inline-flex;
  transition: transform 0.15s ease-out !important;
  text-transform: none !important;
}

/* Effet zoom */

@media (min-width: 992px) {
#sideNav .simple-menu li.nav-item a:hover,
#sideNav .simple-menu li.nav-item a:focus {
  transform: scale(1.15) !important;
}
}

/* État actif */
#sideNav .simple-menu li.nav-item.active a,
#sideNav .simple-menu li.nav-item.active a:visited {
  color: #828689 !important;
}

/* Logo rond → carré */
img.rounded-circle {
  border-radius: 0 !important;
}

/* Image de profil */
.img-profile {
  width: 80% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Espacement vertical des liens */
#sideNav .simple-menu.navbar-nav li.nav-item a {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 2 !important;
}

/* Version compacte si faible hauteur */
@media (max-height: 1000px) {
  #sideNav .simple-menu.navbar-nav li.nav-item a {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.8 !important;
  }
}


/* ==========================================================
   GRAND ÉCRAN (≥ 992px)
   ========================================================== */

@media (min-width: 992px) {

  /* Bloc marque (logo + image) */
  #sideNav .navbar-brand {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
  }

  #sideNav .navbar-brand .img-profile {
    max-width: 100% !important;
    max-height: none !important;
    border: none !important;
  }

  .social-icons {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Positionnement vertical du menu */
  .navbar-collapse {
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 10vh !important;
  }

  /* Alignement des items */
  .navbar-nav,
  .nav-item,
  .nav-link {
    display: flex !important;
    align-items: center !important;
  }

  .nav-link {
    padding: 0.5em 1em !important;
  }
}


/* ==========================================================
   PETIT ÉCRAN (< 992px)
   ========================================================== */

/* Taille du texte */
@media (max-width: 992px) {
  #sideNav .simple-menu li.nav-item a {
    font-size: 22px !important;
  }
}

/* Alignement + structure */
@media (max-width: 992px) {
  #sideNav .simple-menu li.nav-item {
    text-align: right !important;
    display: block !important;
  }

  #sideNav .navbar-brand {
    display: inline-block !important;
    width: auto !important;
    text-align: left !important;
  }

  #sideNav .simple-menu li.nav-item:last-child {
    margin-bottom: 20px !important;
  }
}

/* Fond blanc cassé */
@media (max-width: 992px) {
  #sideNav {
    background: linear-gradient(to bottom, #fafcfe, #fafcfe) !important;
    border-bottom: 2px solid #fafcfe !important;
  }
}

/* Réduction des marges du contenu */
@media (max-width: 992px) {
  .page,
  .post,
  section.resume-section .resume-section-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* ==========================================================
   SÉPARATEURS
   ========================================================== */

/* Séparateurs grand écran */
#sideNav .simple-menu li.nav-item:nth-of-type(3) a,
#sideNav .simple-menu li.nav-item:nth-of-type(8) a {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1px solid #ccc;
  margin: 10px 0;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* Séparateurs petit écran */
@media (max-width: 992px) {
  #sideNav .simple-menu li.nav-item:nth-of-type(3) a,
  #sideNav .simple-menu li.nav-item:nth-of-type(8) a {
    width: 100px !important;
    margin-left: auto !important;
    margin-right: 30px !important;
    border-top: 1px solid #ccc;
    height: 0;
    display: block;
  }
}


/* ==========================================================
   COULEURS SPÉCIFIQUES DES ITEMS 4–5-6-7
   ========================================================== */

#sideNav .simple-menu li.li4 a .simple-menu-label {
  color: #679f5a !important;
  font-weight: 600;
  font-family: "Arial Rounded MT Regular", Arial, sans-serif !important;
  display: inline-block;
  white-space: normal;
  max-width: 5.5em;
  word-break: break-word;
  line-height: 1.2;
  margin-bottom: 0.4em;
}

#sideNav .simple-menu li.li5 a .simple-menu-label {
  color: #8bb9e6 !important;
  font-weight: 600;
  font-family: "Arial Rounded MT Regular", Arial, sans-serif !important;
}

#sideNav .simple-menu li.li6 a .simple-menu-label {
  color: #e7c379 !important;
  font-weight: 600;
  font-family: "Arial Rounded MT Regular", Arial, sans-serif !important;
}

#sideNav .simple-menu li.li7 a .simple-menu-label {
  color: #f28b82 !important;
  font-weight: 600;
  font-family: "Arial Rounded MT Regular", Arial, sans-serif !important;
}


/* ==========================================================
   TITRE DU BLOG (mobile)
   ========================================================== */

@media (max-width: 991.98px) {
  .d-block.d-lg-none {
    display: block !important;
    width: 300px !important;
    height: 80px !important;
    background: url("/dotclear/public/charte_g/jean23_mobil.png") no-repeat left center !important;
    background-size: contain !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}


/* --- Conteneur principal : hauteur qui évite toute coupe --- */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 400px;
  margin: 20px 0;
}

/* --- Track --- */
.carousel-track {
  display: flex;
  gap: 0px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

/* --- Cases --- */
.carousel-track a {
  flex: 0 0 auto;
  height: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* --- Images : jamais coupées --- */
.carousel img {
  height: 100%;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* --- Flèches --- */
.carousel-btn {
  background: none;
  border: none;
  color: #6c757d;
  font-size: 48px;
  cursor: pointer;
  padding: 0 10px;
  line-height: 1;
  z-index: 3;
  transition: color 0.2s ease;
}

.carousel-btn:hover {
  color: #679f5a !important;
}

/* --- GRAND ÉCRAN : images un peu plus grandes (≈4.5 visibles) --- */
@media (min-width: 800px) {
  .carousel-track a {
    flex: 0 0 calc((100% - 3 * 0px) / 4);
  }
}

/* --- PETIT ÉCRAN : images un peu plus grandes (≈2.5 visibles) --- */
@media (max-width: 801px) {
  .carousel-track a {
    flex: 0 0 calc((100% - 0px) / 2);
  }
}

/* --- Flèches masquées --- */
.carousel-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Avant que JS soit chargé : on masque la flèche gauche */
html:not(.js-enabled) .carousel-btn.left {
  opacity: 0;
  pointer-events: none;
}