/* Captures d'écran : un liseré discret pour les détacher du fond de la page */
.md-typeset img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
}

/* Visionneuse (glightbox). Les captures sont en double résolution : sans plafond, elles
   s'afficheraient au double de la taille réelle de l'interface. On les montre donc au plus à
   1000 px de large (la fenêtre de capture), et une capture plus haute que l'écran défile
   verticalement au lieu d'être réduite jusqu'à l'illisible. Une capture plus étroite s'ouvre à
   la moitié de sa largeur en pixels (javascripts/zoom-visionneuse.js). */
.glightbox-container .gslide-image img {
  max-width: min(100vw, 1000px);
  max-height: none;
}
.glightbox-container .gslide.current {
  /* sans hauteur imposée, la diapositive grandit à la taille de l'image et ne défile pas */
  align-self: stretch;
  height: 100%;
  overflow-y: auto;
  align-items: flex-start; /* centrage par la marge ci-dessous : le haut d'une image trop haute reste visible */
}
.glightbox-container .gslide.current .gslide-inner-content {
  margin: auto;
}

/* Deux captures côte à côte (ex. menu et sous-menu) ; l'une sous l'autre sur écran étroit */
.md-typeset .cote-a-cote {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}
.md-typeset .cote-a-cote > p {
  flex: 1 1 16rem;
  margin: 0;
}

/* Trois captures de téléphone côte à côte (largeur d'un écran de téléphone chacune) */
.md-typeset .cote-a-cote.trois > p {
  flex: 1 1 10rem;
}

/* Légende des pastilles numérotées posées sur les captures (①, ②…) */
.md-typeset .legende {
  list-style: none;
  padding-left: 0;
}
/* Pastille pleine : cercle de la couleur du thème, chiffre blanc en gras */
.md-typeset .pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
}
/* Une ligne par repère : sans cela, Markdown colle ① ② ③… en un seul paragraphe */
.md-typeset .legende p {
  white-space: pre-line;
}

/* Captures du site public en fenêtre étroite (menu, pages sur téléphone) : à la taille d'un écran de téléphone,
   pas étirées à la largeur de la colonne */
.md-typeset img.capture-menu,
.md-typeset img.capture-mobile {
  max-width: 320px;
  width: 100%;
  height: auto;
}

/* Défilement doux vers une ancre, et surlignage temporaire de la cible pour qu'on voie où l'on a atterri */
html {
  scroll-behavior: smooth;
}
.md-typeset :target {
  scroll-margin-top: 4rem;
}
.md-typeset h1:target,
.md-typeset h2:target,
.md-typeset h3:target,
.md-typeset h4:target,
.md-typeset li:target,
.md-typeset p:target,
.md-typeset .admonition:target,
.md-typeset details:target,
.md-typeset .footnote li:target,
.md-typeset tr:has(:target) td {
  animation: cible-surlignee 5s ease-out;
  border-radius: 4px;
}
@keyframes cible-surlignee {
  0%, 60% { background-color: rgba(255, 193, 7, 0.45); box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.45); }
  100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Sélecteur de langue : liste entière visible (6 langues) et petit drapeau devant chaque nom.
   Drapeaux en SVG intégrés (les émojis de drapeaux ne s'affichent pas sous Windows). */
.md-select:hover .md-select__inner,
.md-select:focus-within .md-select__inner {
  max-height: min(22rem, 80vh);
}
.md-select__link::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: .75rem;
  margin-right: .5rem;
  vertical-align: -.05rem;
  background: var(--drapeau) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.md-select__link[hreflang="en"],
.md-select__bouton[data-lang="en"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30l-60 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30l-60 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.md-select__link[hreflang="fr"],
.md-select__bouton[data-lang="fr"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23ED2939'/%3E%3C/svg%3E"); }
.md-select__link[hreflang="es"],
.md-select__bouton[data-lang="es"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.md-select__link[hreflang="de"],
.md-select__bouton[data-lang="de"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' fill='%23000'/%3E%3Crect y='1' width='5' height='1' fill='%23DD0000'/%3E%3Crect y='2' width='5' height='1' fill='%23FFCE00'/%3E%3C/svg%3E"); }
.md-select__link[hreflang="it"],
.md-select__bouton[data-lang="it"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E"); }
.md-select__link[hreflang="pt"],
.md-select__bouton[data-lang="pt"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FF0000'/%3E%3Crect width='2' height='3' fill='%23006600'/%3E%3Ccircle cx='2' cy='1.5' r='.55' fill='%23FFCC00'/%3E%3C/svg%3E"); }
.md-select__link[hreflang="pt-BR"],
.md-select__bouton[data-lang="pt-BR"] .md-langue__drapeau { --drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23009C3B'/%3E%3Cpath d='M10 1.5L18.5 7L10 12.5L1.5 7z' fill='%23FFDF00'/%3E%3Ccircle cx='10' cy='7' r='3.3' fill='%23002776'/%3E%3C/svg%3E"); }

/* Bouton de langue : drapeau + code + flèche à la place de l'icône (src/javascripts/langue-courante.js). */
.md-select__bouton > svg { display: none; }
.md-select__bouton { width: auto; }
.md-langue { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; line-height: 1.2rem; }
.md-langue__drapeau {
  width: 1.1rem;
  height: .75rem;
  background: var(--drapeau) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
.md-langue__code { font-weight: 700; }
.md-langue__fleche {
  border: .28rem solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
}
@media screen and (max-width: 29.9375em) {
  .md-langue__code { display: none; }
}