/* ==========================================================
   Sous-menus du menu principal (override nicolian.com)
   ========================================================== */

/* --- Ordinateur : menu déroulant au survol --- */
#nav {
  overflow: visible;      /* laisse dépasser le sous-menu */
  z-index: 10;            /* passe au-dessus du contenu (#main) */
}
#nav ul.links li {
  position: relative;
}

/* Élément sans lien (séparateur) */
#nav ul.links li > .is-separator {
  display: block;
  font-size: 0.8rem;
  padding: 0 2rem;
  cursor: default;
}

/* Petite flèche sur les éléments qui ont des sous-éléments */
#nav ul.links > li > [aria-haspopup]::after {
  content: "";
  display: inline-block;
  margin-left: 0.6em;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Le sous-menu lui-même */
#nav .nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: rgba(225, 229, 233, 0.88);   /* gris clair légèrement transparent */
  -webkit-backdrop-filter: blur(6px);       /* floute ce qui est derrière */
  backdrop-filter: blur(6px);
  color: #1e252d;
  line-height: 1.5;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 100;
}

/* Affichage au survol (souris) ou au focus (clavier / tactile) */
#nav ul.links li:hover > .nav__submenu,
#nav ul.links li:focus-within > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

#nav ul.links .nav__submenu li {
  display: block;
  background: none;
}
#nav ul.links .nav__submenu li a,
#nav ul.links .nav__submenu li .is-separator {
  color: #1e252d;
  padding: 0.6rem 1.5rem;
  white-space: nowrap;
}
#nav ul.links .nav__submenu li a:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--color) !important;
}
#nav ul.links .nav__submenu li.active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* --- Mobile / tablette : panneau latéral --- */
#navPanel .links .nav__submenu {
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding-left: 1rem;
}
#navPanel .links .nav__submenu li {
  border-top: 0;
}
#navPanel .links .nav__submenu li a {
  font-size: 0.8rem;
  padding: 0.4rem 0;
}
#navPanel .links .is-separator {
  display: block;
  font-family: var(--menu-font);
  font-size: 0.9rem;
  letter-spacing: 0.075em;
  padding: 0.75rem 0;
  text-transform: uppercase;
}

/* ==========================================================
   Mise en page en cartes arrondies, une seule colonne, compacte
   ========================================================== */
:root {
  /* fond des cartes : blanc, transparence réglée par
     « Transparence du fond des articles et pages » */
  --carte-fond: rgba(255, 255, 255, calc(1 - var(--card-transparency, 0) / 100));
  --carte-rayon: 14px;     /* arrondi des angles */
  --carte-espace: 1.25rem; /* espace entre les cartes */
}

/* Barre de menu arrondie, détachée du contenu */
#nav {
  border-radius: var(--carte-rayon);
  margin-bottom: var(--carte-espace);
}
#nav ul.links li a {
  border-bottom: 0;          /* supprime le pointillé sous les liens du menu */
}

/* Le grand bloc blanc devient transparent : chaque élément est une carte */
#main {
  background: transparent;
}
#main > * {
  background: var(--carte-fond);
  border-radius: var(--carte-rayon);
  border-top: 0;
  margin-bottom: var(--carte-espace);
}

/* Flou de l'image de fond derrière les cartes transparentes (lisibilité) */
#main > *:not(.posts),
#main > .posts > article {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Liste des articles : une carte par article, l'une sous l'autre */
#main > .posts {
  background: transparent;
  padding: 0;
  gap: var(--carte-espace);
}
#main > .posts > *,
#main > .posts > article:nth-child(n) {
  width: 100%;
  border: 0;
  background: var(--carte-fond);
  border-radius: var(--carte-rayon);
  text-align: left;
}

/* Marge intérieure des cartes : réglée par « Pourcentage de remplissage des articles »
   (les % de padding sont calculés sur la largeur de la carte, en haut comme sur les côtés) */
#main > .posts > article:nth-child(n),
#main > .post {
  padding: max(1rem, calc((100 - var(--article-fill, 92)) / 2 * 1%));
}

/* En-tête d'article plus serré */
#main > .posts > article header .date {
  margin-bottom: 0.4rem;
}
#main > .posts > article header h2 {
  margin-bottom: 1rem;
}

/* Paragraphes : alignés à gauche (le justifié créait de grands espaces
   entre les mots) et moins d'espace entre eux */
#main p {
  text-align: left;
  margin-bottom: var(--para-space, 1.25rem);   /* réglé par « Espace entre les paragraphes » */
}
#main > .posts > article ul.actions {
  margin-bottom: 0;
  justify-content: flex-start;
}
#main > .posts > article ul.actions li {
  padding-left: 0;
}

/* Image de l'article : limitée à 768 px (taille des images générées) */
#main > .posts > article .image.fit {
  max-width: 48rem;
}

/* Téléphone : cartes et espaces un peu plus serrés */
@media screen and (max-width: 736px) {
  :root {
    --carte-rayon: 10px;
    --carte-espace: 0.75rem;
  }
}

/* Largeur du site : réglée par « Pourcentage de remplissage de la page » (ordinateur) */
@media screen and (min-width: 981px) {
  #nav,
  #main,
  #footer,
  #copyright {
    width: calc(var(--page-fill, 90) * 1%);
    max-width: none;
  }
}

/* Petit téléphone : garde une marge de chaque côté pour voir les coins arrondis */
@media screen and (max-width: 480px) {
  #main,
  #footer {
    width: calc(100% - 1.5rem);
  }
}

/* ==========================================================
   Article complet sur la page d'accueil
   ========================================================== */
.post__fulltext {
  text-align: left;          /* texte courant aligné à gauche (le thème centre la liste) */
  margin-bottom: 2rem;
}
.post__fulltext img {
  max-width: 100%;
  height: auto;
}