:root{
  --nav-h: 72px; /* doit être identique à nav.css */
  --container-w: 1100px;
  --blue-band-offset: 108px; /* hauteur approximative de la bande sticky */
}

/* Media Queries */
@media (max-width: 768px){
  :root{
    --nav-h: 64px;
    --blue-band-offset: 96px;
  }
}

/* Typographie globale */
body,
button,
input,
select,
textarea {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}

/* Conteneur générique pour les pages hors home */
.page-shell{
  width: min(var(--container-w), 92vw);
  margin: calc(var(--nav-h) + clamp(1rem, 3vw, 2.25rem)) auto clamp(2.25rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: var(--shadow-md, 0 24px 60px rgba(15, 23, 42, 0.08));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-shell--flat{
  border: none;
  box-shadow: none;
  background: transparent;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.page-shell--flat .grid{
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.page-shell h1{
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.page-shell .grid{
  margin-top: clamp(1rem, 3vw, 1.75rem);
}

/* S’assurer que le premier H1 n’est pas recouvert */
main h1{ margin-top: 0; }

/* Si tu utilises des ancres (#id), on décale le scroll pour la nav fixe */
:target{
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

/* Offset supplémentaire pour "À propos" afin de passer sous la bande sticky */
#about.about-content{
  width: min(var(--container-w), 92vw);
  margin: clamp(1rem, 4vw, 2rem) auto 3rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.about-content .image-container{
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

.about-content .about-contact-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform, box-shadow;
}

.about-content .about-contact-link:hover,
.about-content .about-contact-link:focus-visible{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.offset-anchor{
  display: block;
  height: calc(var(--nav-h) + var(--blue-band-offset));
  margin-top: calc(-1 * (var(--nav-h) + var(--blue-band-offset)));
}

.about-content .centered-image{
  width: clamp(220px, 55vw, 420px);
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.about-content .small-image{
  width: clamp(70px, 10vw, 120px);
  max-width: 120px;
  border-radius: 0;
  box-shadow: none;
}

.about-content .hero-logo{
  width: clamp(240px, 60vw, 680px);
  max-width: min(60vw, 680px);
  border-radius: 0;
  box-shadow: none;
}

/* Grille de tuiles */
.grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tile{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  background: var(--pico-card-background-color, #fff);
}
.tile-link{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.tile:hover{
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.tile img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.tile .content{ padding: 1rem; }

/* -------------------------------
   Cartes Volumes (effet slide-up)
   ------------------------------- */

/* Liens wiki générés par le filtre render_block_text */
.wiki-link{ text-decoration: underline; }