/* Feuille de style unique du site. Thème sombre, sans JavaScript.
   Plan : 1. couleurs  2. base  3. en-tête et menu  4. texte courant
          5. accueil  6. panneaux et titres de section  7. cartes et étiquettes
          8. frises  9. listes de pages  10. pied de page
          11. impression, petits écrans, animations  12. CV */

/* 1. Couleurs — modifier ici pour changer l'apparence du site. */
:root {
  --fond: #0a0f14;
  --fond-bloc: #0f161e;
  --fond-creux: #070b0f;
  --texte: #dbe4ee;
  --texte-discret: #8696a8;
  --trait: #1d2935;
  --accent: #2ab7b2;        /* teal clair : textes, liens, traits */
  --accent-fort: #008080;   /* teal : boutons et aplats */
  --accent-sombre: #0b2626;
  --cv-taille-pdf: 10.4pt;     /* taille du texte du CV mis en page, en PDF */
  --cv-taille-ats: 10pt;  /* taille du texte du CV pour logiciels de tri, en PDF */
  --en-cours: #e0a84a;      /* ambre : ce qui est en cours d'étude */
  --largeur: 72rem;
  --mono: "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
}

/* 2. Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--fond);
}

/* Fond : un quadrillage discret et une lueur en haut de page. */
body {
  margin: 0 auto;
  padding: 0 1.25rem;
  max-width: var(--largeur);
  background-image:
    radial-gradient(60rem 28rem at 70% -6rem, rgb(42 183 178 / 0.09), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--texte);
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Lien "Aller au contenu" : invisible sauf au clavier. */
.evitement {
  position: absolute;
  left: -100rem;
}

.evitement:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  background: var(--fond-bloc);
}

/* 3. En-tête et menu */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  border-radius: 12px;
  font-family: var(--mono);
}

.nom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texte);
  font-weight: 700;
  text-decoration: none;
}

.entete nav {
  flex: 1;
}

/* Le menu est numéroté automatiquement : 01. 02. 03. */
.entete ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: menu;
  font-size: 0.85rem;
}

.entete nav a {
  display: block;
  padding: 0.3rem 0.6rem;
  border-bottom: 2px solid transparent;
  color: var(--texte-discret);
  text-decoration: none;
}

.entete nav a::before {
  counter-increment: menu;
  content: counter(menu, decimal-leading-zero) ". ";
  color: var(--accent);
}

.entete nav a:hover,
.entete nav a[aria-current] {
  color: var(--texte);
}

.entete nav a[aria-current] {
  border-bottom-color: var(--accent);
}

/* 4. Texte courant */
main {
  padding: 2.5rem 0 3rem;
}

h1,
h2,
h3 {
  font-family: var(--mono);
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 2.1rem;
}

h1::before {
  content: "> ";
  color: var(--accent);
}

h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.3rem;
}

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.05rem;
}

.titre-page {
  margin-bottom: 1rem;
}

/* Les paragraphes restent étroits pour rester lisibles, même sur un grand écran. */
.texte {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

code,
pre {
  font-family: var(--mono);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.3em;
  background: var(--accent-sombre);
  border-radius: 3px;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

pre code {
  padding: 0;
  background: none;
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--trait);
  color: var(--texte-discret);
}

table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* 5. Accueil */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2.5rem;
  padding: 1.5rem 0 2.5rem;
}

.surtitre {
  margin: 0 0 1rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.surtitre span {
  color: var(--texte-discret);
}

.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  letter-spacing: -0.02em;
}

.hero-texte > p {
  max-width: 32rem;
  font-size: 1.15rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.bouton {
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--accent-fort);
  border-radius: 6px;
  background: var(--accent-fort);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.bouton.secondaire {
  border-color: var(--accent);
  background: none;
  color: var(--accent);
}

.bouton.petit {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

.bouton:hover {
  box-shadow: 0 0 0 3px rgb(42 183 178 / 0.25);
}

/* Ligne "En ce moment" : une pastille à halo teal, avec un voyant qui pulse. */
.hero-texte > .statut {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 1.75rem 0 0;
  padding: 0.45rem 1rem 0.45rem 2.2rem;
  border: 1px solid var(--accent);
  border-radius: 1.2rem;
  background: var(--accent-sombre);
  box-shadow:
    0 0 0 1px rgb(42 183 178 / 0.25),
    0 0 18px rgb(42 183 178 / 0.45),
    inset 0 0 12px rgb(42 183 178 / 0.18);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.statut a {
  color: inherit;
  text-decoration-style: dotted;
}

.statut span {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 10px rgb(42 183 178 / 0.7);
}

.statut::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 0.9rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px rgb(42 183 178 / 0.8);
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 8px 2px rgb(42 183 178 / 0.8), 0 0 0 0 rgb(42 183 178 / 0.6);
  }

  100% {
    box-shadow: 0 0 8px 2px rgb(42 183 178 / 0.8), 0 0 0 0.7rem rgb(42 183 178 / 0);
  }
}

/* Fenêtre de terminal. Son contenu vient de la liste "terminal" de content/_index.md. */
.terminal {
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.5), 0 0 0 1px rgb(42 183 178 / 0.08);
  font-family: var(--mono);
  font-size: 0.9rem;
}

.terminal-barre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--trait);
  color: var(--texte-discret);
  font-size: 0.8rem;
}

.terminal-barre span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--trait);
}

.terminal-barre span:last-of-type {
  margin-right: 0.6rem;
}

.terminal-corps {
  padding: 1rem 1.1rem 1.25rem;
}

.terminal-corps p {
  margin: 0;
  white-space: pre-wrap;
}

.t-commande {
  color: var(--accent);
}

.t-commande:not(:first-child) {
  margin-top: 0.7rem;
}

.t-commande::before {
  content: "$ ";
  color: var(--texte-discret);
}

.t-sortie {
  padding-left: 1.2rem;
}

/* Message d'erreur du terminal, en ambre. */
.t-erreur {
  color: var(--en-cours);
}

/* Terminal pleine largeur, pour un texte plus long (page Homelab). */
.terminal-large {
  max-width: 54rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.terminal-large .t-sortie {
  line-height: 1.6;
}

.terminal-large .t-sortie + .t-sortie {
  margin-top: 0.3rem;
}

/* Curseur clignotant sur la dernière ligne. */
.t-curseur::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 1.1rem;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: clignote 1.1s steps(1) infinite;
}

@keyframes clignote {
  50% {
    opacity: 0;
  }
}

/* Bandeau des domaines, numéroté automatiquement. */
.domaines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--trait);
  list-style: none;
  counter-reset: domaine;
}

.domaines li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.domaines p {
  margin: 0;
  color: var(--texte-discret);
  font-size: 0.85rem;
  line-height: 1.45;
}

.domaines p::before {
  counter-increment: domaine;
  content: counter(domaine, decimal-leading-zero);
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.domaines strong {
  display: block;
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.9rem;
}

/* 6. Panneaux et titres de section. Les sections sont numérotées automatiquement. */
main {
  counter-reset: section;
}

.panneau {
  margin-top: 1.25rem;
  padding: 1.5rem;
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  border-radius: 12px;
}

.section-tete {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-tete h2 {
  margin: 0;
}

.section-tete h2::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero) ". ";
  color: var(--accent);
  font-size: 0.85em;
}

/* Trait qui prolonge le titre jusqu'au lien de droite. */
.section-tete::after {
  content: "";
  flex: 1;
  order: 1;
  border-top: 1px solid var(--trait);
  transform: translateY(-0.3em);
}

.section-tete a {
  order: 2;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
}

.section-tete a::after {
  content: " →";
}

.section-tete a:hover {
  text-decoration: underline;
}

/* 7. Cartes et étiquettes */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

/* Cartes empilées par colonnes, chacune à sa hauteur : pas de vide sous les plus courtes. */
.empilees {
  columns: 4 14rem;
  column-gap: 0.9rem;
}

.empilees > .carte {
  margin-bottom: 0.9rem;
  break-inside: avoid;
}

.sans-puce {
  list-style: none;
}

.carte {
  padding: 1rem 1.1rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 10px;
}

/* Hors d'un panneau, les cartes prennent la couleur des panneaux. */
main > .grille > .carte,
main > .grille > li > .carte {
  background: var(--fond-bloc);
}

.carte-tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.carte-titre {
  display: block;
  margin: 0;
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

h3.carte-titre {
  margin-bottom: 0.8rem;
}

.carte-tete .carte-titre {
  margin: 0;
}

.carte-detail {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--texte-discret);
  font-size: 0.9rem;
}

/* Carte entièrement cliquable (contact). */
.carte-lien {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.carte-lien:hover {
  border-color: var(--accent);
}

.icone {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.45rem;
  border: 1px solid rgb(42 183 178 / 0.25);
  border-radius: 8px;
  background: var(--accent-sombre);
  color: var(--accent);
}

.nom .icone {
  width: 2rem;
  height: 2rem;
  padding: 0.3rem;
}

/* Bloc "Ce qui m'intéresse" de l'accueil : un libellé teal, une phrase. */
.panneau > .brouillon {
  margin: 0 0 1.25rem;
}

.interets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.interets dt {
  margin-bottom: 0.2rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.interets dd {
  margin: 0;
}

/* Tuiles : une icône et un nom, pour le résumé du homelab sur l'accueil. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tuiles li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.tuiles .icone {
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
}

/* Variante où chaque tuile est un lien (sommaire de la page Compétences). */
.tuiles.liens {
  margin-bottom: 0.25rem;
}

.tuiles.liens li {
  padding: 0;
}

.tuiles.liens a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--texte);
  text-decoration: none;
}

.tuiles.liens li:hover {
  border-color: var(--accent);
}

/* Page Compétences : les domaines sur deux colonnes quand l'écran le permet. */
.domaines-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 0 1.25rem;
}

/* Le menu reste visible en haut : un domaine atteint par son lien ne se cache pas dessous. */
.domaines-grille .panneau {
  scroll-margin-top: 1rem;
}

.domaine-texte {
  margin: -0.5rem 0 1rem;
  color: var(--texte-discret);
}

/* Étiquettes : noms d'outils et de technologies. */
.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.puces li {
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 0.8rem;
  background: var(--fond-bloc);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* Pastille de contexte devant une étiquette ou une ligne de légende :
   pleine = en entreprise, creuse = au homelab, cerclée = les deux,
   ambre en pointillés = en cours d'étude. */
.c-entreprise::before,
.c-homelab::before,
.c-deux::before,
.c-cours::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.c-entreprise::before {
  background: var(--accent);
}

.c-deux::before {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--fond-bloc), 0 0 0 3.5px var(--accent);
  margin-right: 0.6rem;
  margin-left: 0.15rem;
}

.c-cours::before {
  border: 1.5px dashed var(--en-cours);
}

.puces .c-cours {
  border-style: dashed;
  border-color: var(--en-cours);
}

/* Point fort : étiquette pleine, mise en avant. */
.puces .fort {
  border-color: var(--accent);
  background: var(--accent-sombre);
  font-weight: 700;
}

.c-fort::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  border: 1.5px solid var(--accent);
  border-radius: 0.3rem;
  background: var(--accent-sombre);
}

/* Légende placée après un panneau plutôt que dans un panneau. */
.legende.sous-panneau {
  margin: 1.5rem 0 1rem;
}

/* Dans un panneau, la liste de faits prend la couleur du texte courant. */
.panneau > .faits {
  margin: 0;
  color: var(--texte);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.date {
  margin: 0 0 0.3rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* 8. Frises */

/* Frise horizontale de l'accueil : une année par colonne, reliées par un trait. */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.reperes li {
  position: relative;
  padding: 1.25rem 1rem 0.75rem 0;
  border-top: 2px solid var(--trait);
  color: var(--texte-discret);
  font-size: 0.9rem;
  line-height: 1.4;
}

.reperes li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond-bloc);
}

.reperes li:last-child::before {
  background: var(--accent);
}

.reperes-annee {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--texte);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
}

/* Frise verticale du parcours : un point par poste, relié par un trait. */
.frise {
  margin: 0 0 0 0.4rem;
  padding: 0 0 0 1.75rem;
  border-left: 2px solid var(--trait);
  list-style: none;
}

.frise > li {
  position: relative;
  padding-bottom: 1.5rem;
}

.frise > li:last-child {
  padding-bottom: 0;
}

.frise > li::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: calc(-1.75rem - 8px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond-bloc);
}

/* Le poste actuel a un point plein. */
.frise > li:first-child::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(42 183 178 / 0.2);
}

/* Intitulé du poste à gauche, période à droite. */
.frise-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
}

.frise h3 {
  margin: 0;
  font-size: 1.05rem;
}

.frise p {
  margin: 0;
}

/* Les faits d'un poste : des puces carrées, sur deux colonnes. */
.faits {
  margin: 0.4rem 0 0;
  padding: 0;
  columns: 2 20rem;
  column-gap: 2.5rem;
  list-style: none;
  color: var(--texte-discret);
}

.faits li {
  position: relative;
  padding-left: 1rem;
  break-inside: avoid;
}

.faits li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 0.35em;
  height: 0.35em;
  background: var(--accent);
}

/* 9. Listes de pages, dates et états */
.liste {
  margin: 0;
  padding: 0;
  max-width: 46rem;
  list-style: none;
}

.liste li {
  padding: 1rem 0;
  border-top: 1px solid var(--trait);
}

.liste li:first-child {
  padding-top: 0;
  border-top: 0;
}

.liste p {
  margin: 0.25rem 0 0;
}

.titre-lien {
  font-family: var(--mono);
  font-weight: 700;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0;
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.etat {
  padding: 0 0.4rem;
  border: 1px solid var(--trait);
  border-radius: 3px;
}

.brouillon {
  margin: 1rem 0 0;
  padding: 0.5rem 0.75rem;
  max-width: 44rem;
  background: var(--accent-sombre);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
}

/* Carnet : les étapes d'une note, reliées par un trait vertical. */
.etapes {
  max-width: 48rem;
  margin: 1.75rem 0 0 0.45rem;
  padding: 0 0 0 1.9rem;
  list-style: none;
}

.etapes li {
  position: relative;
  margin-bottom: 1.9rem;
}

.etapes li:last-child {
  margin-bottom: 0;
}

/* Le trait qui relie une étape à la suivante. Il s'arrête à la dernière. */
.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: -2.2rem;
  left: calc(-1.9rem - 2px);
  border-left: 2px solid var(--trait);
}

/* Un point sur le trait, en face de chaque étape. */
.etapes li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: calc(-1.9rem - 8px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond);
}

.etapes h2 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.etapes p {
  margin: 0;
  font-size: 1.1rem;
}

.etapes p + p {
  margin-top: 0.75rem;
}

/* La solution : un cadre teal lumineux, et un point plein. */
.etapes .etape-solution {
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-sombre);
  box-shadow: 0 0 18px rgb(42 183 178 / 0.2);
}

/* Le point reste sur l'axe du trait malgré la bordure du cadre. */
.etapes .etape-solution::before {
  top: 1.15rem;
  left: calc(-1.9rem - 9px);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(42 183 178 / 0.2);
}

/* Quand une étape suit la solution, le trait repart du cadre en restant sur son axe. */
.etapes .etape-solution::after {
  left: calc(-1.9rem - 3px);
}

/* Renvoi entre une note et son domaine de compétences. */
.notes-liees {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

/* Thèmes d'une note, sous son titre ou en bas de sa carte. */
.themes {
  margin-top: 0.75rem;
}

.notes {
  display: grid;
  gap: 0.9rem;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notes .carte {
  background: var(--fond-bloc);
}

.notes .carte > p {
  margin: 0.6rem 0 0;
  color: var(--texte-discret);
}

.note-etiquette {
  margin-right: 0.4rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Liens de navigation d'un article : retour à la rubrique, page précédente et suivante. */
.retour {
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.retour a,
.suite a {
  text-decoration: none;
}

.retour a:hover,
.suite a:hover {
  text-decoration: underline;
}

.retour a::before,
.suite-avant::before {
  content: "← ";
}

.suite-apres::after {
  content: " →";
}

.suite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  max-width: 44rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* Le retour à la rubrique se place à droite. */
.retour-bas {
  margin-left: auto;
}

/* 10. Pied de page */
.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.25rem 0 2.5rem;
  border-top: 1px solid var(--trait);
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.pied p {
  margin: 0;
}

.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 11. Impression : noir sur blanc, sans menu, sans fond ni terminal. */
@media print {
  :root {
    --fond: #ffffff;
    --fond-bloc: #ffffff;
    --fond-creux: #ffffff;
    --texte: #000000;
    --texte-discret: #333333;
    --trait: #999999;
    --accent: #000000;
    --accent-sombre: #ffffff;
  }

  html {
    color-scheme: light;
  }

  body {
    max-width: none;
    background-image: none;
    font-size: 11pt;
  }

  .entete nav,
  .entete .bouton,
  .pied,
  .evitement,
  .terminal,
  .actions {
    display: none;
  }

  .entete,
  .panneau {
    padding: 0;
    border: 0;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .carte,
  .frise li {
    break-inside: avoid;
  }
}

/* Petits écrans : l'accueil passe sur une colonne. */
@media (max-width: 52rem) {
  /* Le nom et le bouton restent sur la première ligne, le menu passe dessous. */
  .entete {
    justify-content: space-between;
  }

  .entete nav {
    flex-basis: 100%;
    order: 1;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 0.5rem;
  }

  .panneau {
    padding: 1.1rem;
  }

  /* Sur téléphone, l'accueil est raccourci : le bandeau des domaines, qui résume la
     page Compétences, n'est pas affiché, et la frise passe sur deux colonnes. */
  .domaines {
    display: none;
  }

  .reperes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Pas d'animation pour les lecteurs qui l'ont désactivée dans leur système. */
@media (prefers-reduced-motion: reduce) {
  .t-curseur::after,
  .statut::before {
    animation: none;
  }
}

/* 12. CV (layouts/cv.html).
   À l'écran : la charte sombre du site. À l'impression et dans le PDF : un bandeau
   sombre en tête, puis un corps clair qui reste lisible une fois imprimé. */
.cv-actions {
  margin: 0 0 1.25rem;
}

.cv-actions.actions {
  margin-top: 0;
}

.cv {
  --cv-texte: var(--texte);
  --cv-discret: var(--texte-discret);
  --cv-trait: var(--trait);
  --cv-accent: var(--accent);
  --cv-bloc: var(--fond);
  padding: 1.75rem;
  background: var(--fond-bloc);
  border: 1px solid var(--cv-trait);
  border-radius: 12px;
  color: var(--cv-texte);
  font-size: 0.95rem;
  line-height: 1.45;
}

.cv p {
  margin: 0;
}

.cv ul,
.cv ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv a {
  color: inherit;
  text-decoration: none;
}

.cv h1 {
  margin: 0;
  font-size: 2.3em;
}

/* Titres de rubrique : une marque teal, puis un trait jusqu'au bord. */
.cv h2 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 1.5em 0 0.8em;
  color: var(--cv-texte);
  font-size: 1em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cv h2::before {
  content: "//";
  color: var(--cv-accent);
}

.cv h2::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--cv-trait);
}

.cv h3 {
  margin: 0;
  font-size: 1.05em;
}

.cv-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.9em;
  border-bottom: 2px solid var(--cv-accent);
}

.cv-metier {
  color: var(--cv-accent);
  font-family: var(--mono);
  font-size: 1.15em;
}

/* Poste occupé, rappelé sous le titre quand celui-ci est le poste visé. */
.cv-actuel {
  color: var(--cv-discret);
  font-size: 0.95em;
}

/* Le lieu, à la suite du métier sur la même ligne. */
.cv-lieu {
  color: var(--cv-discret);
  font-size: 0.85em;
  white-space: nowrap;
}

.cv-contact {
  color: var(--cv-discret);
  font-family: var(--mono);
  font-size: 0.85em;
  text-align: right;
}

/* L'objectif, mis en avant par un filet teal. */
.cv-objectif {
  margin-top: 1.1em;
  padding: 0.6em 0.9em;
  border-left: 3px solid var(--cv-accent);
  background: var(--cv-bloc);
}

/* Expérience : une frise, un point par poste. */
.cv-frise {
  margin-left: 0.35em;
  padding-left: 1.3em;
  border-left: 2px solid var(--cv-trait);
}

.cv-frise > li {
  position: relative;
  padding-bottom: 0.9em;
  break-inside: avoid;
}

.cv-frise > li:last-child {
  padding-bottom: 0;
}

.cv-frise > li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: calc(-1.3em - 6px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--cv-accent);
  border-radius: 50%;
  background: var(--cv-bloc);
}

.cv-frise > li:first-child::before {
  background: var(--cv-accent);
}

/* Intitulé du poste à gauche, période à droite. */
.cv-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1em;
}

.cv-date {
  color: var(--cv-accent);
  font-family: var(--mono);
  font-size: 0.82em;
  white-space: nowrap;
}

/* Les puces d'un poste se répartissent sur deux colonnes. */
.cv-faits {
  margin-top: 0.25em;
  columns: 2;
  column-gap: 2.5em;
  color: var(--cv-discret);
}

.cv-faits li {
  position: relative;
  padding-left: 0.95em;
  break-inside: avoid;
}

.cv-faits li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.35em;
  height: 0.35em;
  background: var(--cv-accent);
}

/* Formations : une rangée de cartes. */
.cv .cv-formations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.7em;
}

.cv-formations li {
  padding: 0.5em 0.7em;
  border: 1px solid var(--cv-trait);
  border-left: 3px solid var(--cv-accent);
  border-radius: 4px;
  background: var(--cv-bloc);
  break-inside: avoid;
}

.cv-formations strong,
.cv-formations span {
  display: block;
}

.cv-formations span:last-child {
  color: var(--cv-discret);
}

/* Compétences : une carte par domaine. Les cartes s'empilent par colonnes,
   chacune à sa hauteur, sans laisser de vide sous les plus courtes. */
.cv-domaines {
  columns: 4 13rem;
  column-gap: 0.7em;
}

.cv-domaine {
  margin-bottom: 0.7em;
  padding: 0.65em 0.75em;
  border: 1px solid var(--cv-trait);
  border-radius: 6px;
  background: var(--cv-bloc);
  break-inside: avoid;
}

.cv-domaine-tete {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 0.45em;
}

.cv-domaine .icone {
  width: 1.9em;
  height: 1.9em;
  padding: 0.3em;
}

.cv-domaine h3 {
  font-size: 0.95em;
}

.cv-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

/* Point fort : en gras, et cerclé de teal à l'écran. */
.cv-outils .fort {
  border-color: var(--cv-accent);
  color: var(--cv-texte);
  font-weight: 700;
}

.cv-outils li {
  padding: 0.05em 0.5em;
  border: 1px solid var(--cv-trait);
  border-radius: 0.7em;
  color: var(--cv-discret);
  font-size: 0.86em;
}

@page {
  size: A4;
  margin: 7mm 8mm;
}

/* CV mis en page (cv-ludovic-belloni.pdf) : bandeau, colonnes et cartes, pour un lecteur humain. */
@media print {
  .page-cv .entete,
  .cv-actions {
    display: none;
  }

  .page-cv main {
    padding: 0;
  }

  .cv {
    --cv-texte: #17202a;
    --cv-discret: #46525f;
    --cv-trait: #cdd5dd;
    --cv-accent: #007373;
    --cv-bloc: #f3f6f8;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    font-size: var(--cv-taille-pdf);
    line-height: 1.35;
  }

  /* Les fonds (bandeau, cartes, icônes) doivent être imprimés tels quels. */
  .cv,
  .cv * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cv-tete {
    padding: 3.5mm 6mm;
    border-bottom: 0;
    border-radius: 2mm;
    background: #0a0f14;
    color: #dbe4ee;
  }

  .cv-tete h1::before,
  .cv-tete .cv-metier {
    color: #2ab7b2;
  }

  .cv-tete .cv-contact,
  .cv-tete .cv-lieu {
    color: #b8c4d0;
  }

  .cv-domaines {
    columns: 4;
    column-gap: 2mm;
  }

  .cv .cv-formations {
    grid-template-columns: repeat(5, 1fr);
    gap: 2mm;
  }

  /* Pas d'icônes sur la feuille : les titres de domaine tiennent alors sur une ligne. */
  .cv-domaine .icone {
    display: none;
  }

  .cv-domaine {
    border-top: 2px solid #007373;
  }

  .cv-domaine-tete {
    margin-bottom: 1mm;
  }

  .cv-objectif {
    margin-top: 3mm;
    padding: 1.5mm 3mm;
  }

  /* Sur la feuille, les outils d'un domaine se suivent sur une ligne, séparés par un point. */
  .cv-outils {
    display: block;
  }

  .cv-outils li {
    display: inline;
    padding: 0;
    border: 0;
    font-size: 1em;
  }

  /* Espace insécable avant le point : il reste collé à l'outil qui le précède. */
  .cv-outils li:not(:last-child)::after {
    content: " · ";
    color: #007373;
  }

  .cv-frise > li {
    padding-bottom: 1.6mm;
  }

  .cv h2 {
    margin: 3mm 0 1.8mm;
  }

  .cv-formations li {
    padding: 1.2mm 2mm;
  }

  .cv-domaine {
    margin-bottom: 2mm;
    padding: 1.4mm 2mm;
  }
}

/* CV pour les logiciels de tri de candidatures (cv-ludovic-belloni-ats.pdf).
   Tout est sur une seule colonne, dans l'ordre de lecture, avec une police courante et
   sans signe décoratif dans le texte. Ces règles ne s'appliquent qu'à la page /cv-ats/. */
@page ats {
  margin: 11mm 13mm;
}

@media print {
  .cv-ats .cv {
    page: ats;
  }

  .cv-ats .entete,
  .cv-ats .cv-actions {
    display: none;
  }

  .cv-ats main {
    padding: 0;
  }

  .cv-ats .cv {
    --cv-texte: #17202a;
    --cv-discret: #3d4854;
    --cv-trait: #cdd5dd;
    --cv-accent: #007373;
    --cv-bloc: #f3f6f8;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: var(--cv-taille-ats);
    line-height: 1.34;
  }

  .cv-ats .cv h1,
  .cv-ats .cv h2,
  .cv-ats .cv h3,
  .cv-ats .cv-metier,
  .cv-ats .cv-contact,
  .cv-ats .cv-date,
  .cv-ats .cv-domaine strong {
    font-family: inherit;
  }

  /* En-tête sans fond : le nom, le métier, puis les coordonnées sur une ligne. */
  .cv-ats .cv-tete {
    display: block;
    padding: 0 0 2.5mm;
    border-bottom: 1.5px solid var(--cv-accent);
    border-radius: 0;
    background: none;
    color: var(--cv-texte);
  }

  .cv-ats .cv-contact {
    margin-top: 1.5mm;
    text-align: left;
  }

  .cv-ats .cv-contact li {
    display: inline;
  }

  .cv-ats .cv-contact li:not(:last-child)::after {
    content: "  |  ";
  }

  /* Pas de chevron ni de barres obliques : ils se retrouveraient dans le texte extrait. */
  .cv-ats .cv h1::before,
  .cv-ats .cv h2::before {
    content: none;
  }

  .cv-ats .cv-tete .cv-metier {
    color: var(--cv-accent);
  }

  .cv-ats .cv-tete .cv-contact,
  .cv-ats .cv-tete .cv-lieu {
    color: var(--cv-discret);
  }

  .cv-ats .cv-objectif {
    margin-top: 3mm;
    padding: 0;
    border: 0;
    background: none;
  }

  .cv-ats .cv h2 {
    display: block;
    margin: 2.6mm 0 1.2mm;
    padding-bottom: 0.5mm;
    border-bottom: 1.5px solid var(--cv-accent);
    color: var(--cv-accent);
    letter-spacing: 0.04em;
  }

  .cv-ats .cv h2::after {
    content: none;
  }

  /* Expérience : l'intitulé, l'employeur puis la période, chacun sur sa ligne.
     Les logiciels de tri découpent mal ces trois informations quand elles se suivent. */
  .cv-ats .cv-frise {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .cv-ats .cv-frise > li {
    padding-bottom: 1.2mm;
  }

  .cv-ats .cv-frise > li::before {
    content: none;
  }

  .cv-ats .cv-ligne {
    display: block;
  }

  .cv-ats .cv-ligne h3,
  .cv-ats .cv-ligne .cv-employeur,
  .cv-ats .cv-ligne .cv-date {
    display: block;
    margin: 0;
  }

  .cv-ats .cv-ligne .cv-date {
    color: var(--cv-discret);
  }

  .cv-ats .cv-date {
    font-size: 1em;
  }

  .cv-ats .cv-faits {
    margin-top: 0.4mm;
    columns: 1;
  }

  /* Compétences : une ligne par domaine, "Domaine : outil, outil, outil". */
  .cv-ats .cv-domaines {
    columns: 1;
  }

  .cv-ats .cv-domaine {
    margin-bottom: 0.7mm;
    padding: 0;
    border: 0;
    background: none;
  }

  .cv-ats .cv-domaine .icone {
    display: none;
  }

  .cv-ats .cv-domaine-tete,
  .cv-ats .cv-domaine h3,
  .cv-ats .cv-outils,
  .cv-ats .cv-outils li {
    display: inline;
  }

  .cv-ats .cv-domaine h3 {
    font-size: 1em;
  }

  .cv-ats .cv-domaine h3::after {
    content: " : ";
  }

  .cv-ats .cv-outils li {
    padding: 0;
    border: 0;
    font-size: 1em;
  }

  .cv-ats .cv-outils li:not(:last-child)::after {
    content: ", ";
  }

  /* Formations : une ligne par diplôme, "Année · Intitulé, organisme". */
  .cv-ats .cv .cv-formations {
    display: block;
  }

  .cv-ats .cv-formations li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .cv-ats .cv-formations strong,
  .cv-ats .cv-formations span {
    display: inline;
  }

  .cv-ats .cv-formations .cv-date::after {
    content: " · ";
  }

  .cv-ats .cv-formations strong::after {
    content: ", ";
    font-weight: 400;
  }
}

/* "screen" : à l'impression, la feuille A4 est étroite mais garde ses colonnes. */
@media screen and (max-width: 52rem) {
  .cv {
    padding: 1.1rem;
  }

  .cv-faits {
    columns: 1;
  }

  .cv-contact {
    text-align: left;
  }
}

/* 13. Homelab : état de chaque outil, par une pastille devant son nom.
   Pleine = en service, creuse = à l'essai, ambre en pointillés = en pause. */
.e-service::before,
.e-essai::before,
.e-pause::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.e-service::before {
  background: var(--accent);
}

.e-pause::before {
  border: 1.5px dashed var(--en-cours);
}

.puces .e-pause {
  border-style: dashed;
  border-color: var(--en-cours);
}

/* Phrase d'intention d'un domaine, entre son titre et ses outils. */
.carte-phrase {
  margin: -0.2rem 0 0.8rem;
}

/* 14. Terminal de la page Contact : un libellé, puis le lien, alignés en colonnes. */
.t-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: 0.25rem 0 0.25rem 1.2rem;
  font-size: 1.05rem;
}

.t-cle {
  flex: none;
  width: 6rem;
  color: var(--texte-discret);
}

/* 15. Homelab : une grille de petits terminaux, un par domaine. */
.terminaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.terminaux .terminal {
  box-shadow: none;
  font-size: 0.85rem;
}

.terminaux .terminal-barre {
  padding: 0.5rem 0.8rem;
  color: var(--accent);
}

.terminaux .terminal-corps {
  padding: 0.75rem 0.9rem 0.9rem;
}

/* Commentaire en tête d'un terminal : la phrase du domaine. */
.t-commentaire {
  margin-bottom: 0.5rem;
  color: var(--texte-discret);
}

.t-commentaire::before {
  content: "# ";
}

/* Sortie de "ls" : les outils côte à côte, comme des noms de fichiers. */
.t-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0.35rem 0 0;
  padding: 0 0 0 1.2rem;
  list-style: none;
}

.t-liste .e-pause {
  color: var(--en-cours);
}

.t-liste .e-pause::after {
  content: "  (en pause)";
  color: var(--texte-discret);
}

/* 16. Homelab : deux zones encadrées, comme sur un schéma de cloisonnement.
   "En service" en teal, trait plein. "Expérimentations" en ambre, trait pointillé. */
.groupe {
  position: relative;
  margin-top: 3rem;
  padding: 1.75rem 1.25rem 1.25rem;
  border: 1px solid rgb(42 183 178 / 0.45);
  border-radius: 14px;
  background: rgb(42 183 178 / 0.03);
}

/* Le titre est posé sur le bord supérieur de la zone, comme une étiquette. */
.groupe h2 {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  margin: 0;
  padding: 0.1rem 0.75rem;
  border: 1px solid rgb(42 183 178 / 0.45);
  border-radius: 999px;
  background: var(--fond);
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.groupe-detail {
  margin: 0 0 1rem;
  color: var(--texte-discret);
  font-size: 0.95rem;
}

/* La zone d'expérimentation : tout ce qui était teal y devient ambre. */
.groupe-essai {
  border: 1px dashed rgb(224 168 74 / 0.6);
  background: rgb(224 168 74 / 0.04);
}

.groupe-essai h2 {
  border: 1px dashed rgb(224 168 74 / 0.6);
  color: var(--en-cours);
}

.groupe-essai .terminal {
  border-color: rgb(224 168 74 / 0.3);
}

.groupe-essai .terminal-barre,
.groupe-essai .t-commande {
  color: var(--en-cours);
}

/* Outil prévu, pas encore installé. */
.t-liste .e-prevu {
  color: var(--texte-discret);
}

.t-liste .e-prevu::after {
  content: "  (prévu)";
}

/* 17. Carnet : le terminal qui liste les notes. Pour chacune, une ligne avec la date,
       le thème et le titre, puis le problème et la solution en retrait. */
.terminal-carnet {
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.t-notes {
  margin: 0;
  padding: 0 0 0 1.2rem;
  list-style: none;
}

.t-notes li {
  margin-top: 0.9rem;
}

.t-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.t-note time {
  color: var(--texte-discret);
}

.t-theme {
  color: var(--en-cours);
}

/* Mention d'un brouillon, visible seulement dans l'aperçu local. */
.t-brouillon {
  color: var(--en-cours);
}

.t-brouillon::before {
  content: "[";
}

.t-brouillon::after {
  content: "]";
}

/* Le titre ressort en clair et en gras ; il prend la couleur d'accent au survol. */
.t-note a {
  color: var(--texte);
  font-weight: 700;
}

.t-note a:hover {
  color: var(--accent);
}

/* Le problème et la solution s'alignent sous le thème, après la colonne de la date.
   L'étiquette et son texte forment deux colonnes : un texte long reste à droite de l'étiquette. */
.terminal-corps .t-detail {
  display: flex;
  gap: 0 1rem;
  margin-top: 0.3rem;
  padding-left: calc(10ch + 1rem);
  color: var(--texte-discret);
  line-height: 1.6;
}

.t-etiquette {
  flex: none;
  width: 8ch;
  color: var(--texte);
}

/* La solution, point d'arrivée de la note, est plus lumineuse que le problème. */
.terminal-corps .t-solution {
  color: var(--texte);
}

.t-solution .t-etiquette {
  color: var(--accent);
}

@media (max-width: 40rem) {
  .terminal-corps .t-detail {
    padding-left: 0;
  }
}

/* 18. Projets : captures d'écran d'une application, côte à côte. */
.captures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.25rem;
  max-width: 60rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.captures figure {
  margin: 0;
}

.captures img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--trait);
  border-radius: 14px;
}

.captures figcaption {
  margin-top: 0.6rem;
  color: var(--texte-discret);
  font-size: 0.9rem;
}