/* ============================================================================
 *
 * marieleapouliquen.github.io/wiki-cap-nature — Feuille de style unifiée
 * Direction : Ultra-épuré, clair, académique & minimal. 
 * Palette : Structures fines, accents Vert / Teal pour les fiches.
 * Largeur maximale optimisée : 800px (Confort de lecture)
 *
 * ============================================================================ */


/* ============================================================================
   1. VARIABLES & TOKENS VIA LE SITE PRINCIPAL
   ============================================================================ */

:root {
  /* Charte épurée de base */
  --color-text:        #111111;
  --color-muted:       #666666;
  --color-light:       #999999;
  --color-bg:          #ffffff;
  --color-bg-alt:      #fafafa;
  --color-border:      #e5e5e5;
  --color-link:        #000000;
  --color-link-hover:  #666666;

  /* Palette thématique Cap Nature (Fiches & Wiki) */
  --teal:              #1f8a8a;
  --teal-deep:         #156b6b;
  --teal-dark:         #0e4d4d;
  --green:             #4a9d6e;
  --green-soft:        #7bbd97;
  --mint:              #e6f4f0;
  --mint-deep:         #d3eae3;

  /* Typographies et calibrage fin */
  --font-serif:        'Newsreader', 'EB Garamond', Georgia, serif;
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         'SF Mono', Consolas, Monaco, monospace;

  --maxw:              1000px;  /* Largeur de page maximale stricte */
  --readw:             820px;  /* Largeur de ligne de lecture optimale */
  --text-base:         15px;
  --line-height:       1.6;
}


/* ============================================================================
   2. RENDU DE BASE (RESET & BALISES NATIVES)
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--text-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--teal-dark);
  font-weight: 500;
  line-height: 1.2;
  margin: 1.5em 0 0.5em 0;
}

h1 { font-size: clamp(2rem, 4.5vw, 2.5rem); margin-top: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.6rem; margin-top: 2em; color: var(--teal-dark); }
h3 { font-size: 1.25rem; color: var(--teal-deep); }
h4 { font-size: 1.05rem; color: var(--green); }

p, ul, ol { margin: 0 0 1em 0; }

a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover { color: var(--teal-deep); }

strong { color: var(--color-text); font-weight: 600; }
em     { font-style: italic; }

code {
  font-family: var(--font-mono);
  background: var(--color-bg-alt);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--teal-deep);
  border: 1px solid var(--color-border);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

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

.content em, 
p em, 
li em {
  font-style: italic !important;
  text-decoration: none !important;  /* Supprime tout soulignement ou trait de texte */
  border-top: none !important;       /* Supprime toute bordure supérieure parasite */
  padding-right: 0.18em !important;  /* Espace de sécurité optimal pour la lettre "e" */
  display: inline-block !important;  /* Permet l'application propre du padding */
  line-height: 1 !important;         /* Stabilise la hauteur pour éviter les lignes fantômes */
}

/* ============================================================================
   3. STRUCTURATION SÉMANTIQUE (LAYOUT CENTRÉ)
   ============================================================================ */

/* En-tête */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.2rem 0;
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: flex-start;     /* Aligne le menu sur le haut du titre principal */
  justify-content: space-between;
  gap: 3rem;                   /* Crée un espace de sécurité entre le titre et le menu */
}

.brand {
  display: flex !important;
  flex-direction: column !important; /* Force l'alignement vertical */
  align-items: flex-start;          /* Aligne le titre et le sous-titre à gauche */
  text-decoration: none;
  line-height: 1.2;
  flex: 1;
}

.brand-title {
  display: block !important;        /* Interdit tout alignement en ligne */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
  margin: 0;
}

.brand-sub {
  display: block !important;        /* Force le retour à la ligne automatique */
  font-size: 0.85rem;
  color: var(--green) !important;
  font-weight: 600;
  margin-top: 0.3rem;
  max-width: 480px;
}

/* Bouton hamburger responsive */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--teal-dark);
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
}

.main-nav {
  flex-shrink: 0;              /* Empêche le menu de se rétrécir ou de se déformer */
  margin-top: 0.2rem;          /* Aligne parfaitement les boutons du menu sur la ligne du grand titre */
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.main-nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;         /* Empêche les mots du menu (ex: "A propos") de se couper en deux */
}

.main-nav a:hover {
  color: var(--teal-deep);
  background: var(--mint);
}

.main-nav a.active {
  color: var(--teal-dark);
  font-weight: 500;
  background: var(--mint-deep);
}

/* --- Conteneurs de pages globaux --- */
.site-main {
  width: 100%;
  padding: 2rem 0;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 2rem;
}

.page-content {
  width: 100%;
  margin: 0 auto;
}

/* Zone double colonne (uniquement sur grands écrans, sinon s'empile) */
.page-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 2.5rem;
}
.page-wrapper[style*="1fr"] { display: block; max-width: none; padding: 0; }

.page-wrapper main.content {
  max-width: none;
  margin: 0;
}

/* Menu latéral (Sidebar) */
.sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.sidebar h3 { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); font-weight: 700; margin: 1.5rem 0 0.5rem; }
.sidebar h3:first-child { margin-top: 0; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar a { display: block; padding: 0.3rem 0 0.3rem 0.8rem; color: var(--color-muted); text-decoration: none; font-size: 0.9rem; border-left: 1px solid var(--color-border); transition: all 0.15s ease; }
.sidebar a:hover { color: var(--teal-deep); border-left-color: var(--green-soft); }
.sidebar a.current { color: var(--teal-dark); border-left-color: var(--teal); font-weight: 600; }

/* Centrage et calibrage strict de la zone de contenu */
main.content, .content {
  min-width: 0;
  max-width: var(--readw);
  margin: 0 auto;
}

/* On force tous les blocs descendants du contenu à rester centrés et proportionnels */
.content > p, .content > h2, .content > h3, .content > h4,
.content > ul, .content > ol, .content > .callout,
.content > blockquote, .content > hr, .content > form, .content > table,
.page-lead {
  max-width: var(--readw);
  margin-left: auto;
  margin-right: auto;
}

.page-lead {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0 auto 2rem auto;      /* Le "auto" à gauche et à droite gère le centrage */
  max-width: var(--readw);       /* Force la même largeur que le reste du texte (720px) */
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

/* Pied de page */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0;
  margin-top: 4rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
}
.site-footer p { max-width: 65ch; margin: 0.4rem auto; }
.site-footer a { color: var(--color-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-text); text-decoration: underline; }


/* ============================================================================
   4. COMPOSANTS ACADÉMIQUES & ÉLÉMENTS DU WIKI
   ============================================================================ */

blockquote {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--teal);
  margin: 1.5rem 0;
  padding: 1rem 1.3rem;
  border-radius: 4px;
  font-style: normal;
}
blockquote p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--color-text); }
blockquote strong { font-family: var(--font-serif); color: var(--teal-dark); font-size: 1.1rem; display: inline-block; margin-bottom: 0.2rem; }

.callout { padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 4px; border: 1px solid var(--color-border); border-left: 3px solid var(--teal); background: var(--color-bg-alt); }
.callout-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--teal-deep); }
.callout.tip { border-left-color: var(--green); }
.callout.tip .callout-title { color: var(--green); }
.callout.warning { border-left-color: #e0962f; }
.callout.warning .callout-title { color: #b97a2e; }

table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.92rem; }
th { border-bottom: 1px solid var(--color-text); color: var(--color-text); text-align: left; padding: 0.6rem 0.8rem; font-weight: 600; }
td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-muted); }
tr:hover td { color: var(--color-text); }

.content ul, .content ol { padding-left: 1.2rem; }
.content li { margin: 0.4rem 0; }
.content li::marker { color: var(--green); }


/* ============================================================================
   5. EXTENSIONS DE RENDU DES FICHES TECHNIQUES (AUDIONATURALISME)
   ============================================================================ */

main.content > p > em, main.content > em {
  display: block; font-size: 0.85rem; color: var(--color-light); margin-top: 3rem; border-top: 1px dashed var(--color-border); padding-top: 1rem;
}

.content input[type="checkbox"], .content input[type="radio"] {
  accent-color: var(--teal); margin-right: 0.5rem; transform: scale(1.02); vertical-align: middle;
}
.content li:has(input[type="checkbox"]), .content li:has(input[type="radio"]) {
  list-style: none; margin-left: -1.2rem;
}
.content li em:contains("Réponse"), .content li strong:has(+ em) {
  color: var(--green); font-size: 0.88rem; font-weight: 500;
}

/* Repères Décibels */
.db-chart { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.db-row { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; align-items: center; }
.db-label { font-size: 0.88rem; color: var(--color-text); text-align: right; }
.db-track { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; height: 1.6rem; }
.db-fill { display: flex; align-items: center; height: 100%; padding-left: 0.8rem; color: #ffffff; font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.db-danger { background: #c94c4c; }
.db-warning { background: #e0962f; }
.db-ok { background: var(--green); }


/* ============================================================================
   6. INTERFACES GRILLES & CARTES DE MODULES
   ============================================================================ */

.card-grid, .fiche-grid, .concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  width: 100%;
}

.card, .fiche-card, .concept-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.3rem;
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
}
.card:hover, .fiche-card:hover, .concept-card:hover { border-color: var(--color-text); transform: translateY(-1px); }
.card-title, .fiche-title, .concept-title { font-family: var(--font-serif); font-weight: 600; color: var(--teal-dark); font-size: 1.1rem; margin: 0 0 0.4rem; }
.card-desc, .fiche-desc, .concept-desc { font-size: 0.88rem; color: var(--color-muted); margin: 0; line-height: 1.4; flex: 1; }

.btn, .fiche-btn {
  display: inline-flex; align-items: center; background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text);
  text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.85rem; font-weight: 500; transition: all 0.15s ease; align-self: flex-start; margin-top: 1rem;
}
.btn:hover, .fiche-btn:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

/* Blocs Statistiques de l'Accueil */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  width: 100%;
}
.stat-item {
  text-align: center; padding: 1rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-alt);
}
.stat-num { display: block; font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600; color: var(--green); line-height: 1; margin-bottom: 0.3rem; }
.stat-label { font-size: 0.85rem; color: var(--color-muted); line-height: 1.3; }
.source-note { font-size: 0.8rem; color: var(--color-light); font-style: italic; margin-top: -0.5rem; margin-bottom: 1.5rem; }

/* Sonogrammes */
.sono-frame { border: 1px solid var(--color-border); background: var(--color-bg); padding: 1rem; margin: 1.5rem 0; }
.sono-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.sono-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: 1rem; border-radius: 4px; }
.sono-card h4 { margin: 0 0 0.2rem; }
.sono-card .latin { font-style: italic; color: var(--color-muted); font-size: 0.82rem; display: block; margin-bottom: 0.6rem; }
.sono-card .pattern { font-size: 0.85rem; margin-top: 0.6rem; padding: 0.4rem 0.6rem; background: var(--mint); border-left: 2px solid var(--green); color: var(--teal-dark); }

/* Grille pour les fiches ressources */
.resource-links {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Force 3 colonnes égales */
  gap: 1.25rem !important;                           /* Espace de sécurité entre les cartes */
  margin: 2rem auto !important;
  width: 100% !important;
  clear: both;
}

/* Ajustement de la carte pour éviter les collisions de texte */
.resource-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.25rem !important;
  margin: 2rem auto !important;
  width: 100% !important;
  clear: both;
}

.resource-link:hover {
  border-color: var(--teal) !important; /* Devient Teal au survol pour rappeler le menu */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.resource-link .resource-link-label {
  display: block !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--green) !important;       /* Label en vert pour rappeler la charte */
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
}

.resource-link .resource-link-title {
  display: block !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  color: var(--teal-dark) !important;  /* Titre en teal foncé */
  margin: 0 0 0.5rem 0 !important;
}

.resource-link .resource-link-desc {
  display: block !important;
  font-size: 0.88rem !important;
  color: var(--color-muted) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* --- BANDE DE PHOTOS D'OISEAUX (ALIGNÉE EN LIGNE) --- */
.photo-band {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important; /* Force les 6 images sur la même ligne */
  gap: 4px !important;                               /* Espace minimal et épuré entre les photos */
  width: 100% !important;
  max-width: var(--maxw) !important;                 /* S'aligne sur la largeur des 1000px du site */
  margin: 0 auto 2.5rem auto !important;              /* Centre la bande et ajoute de l'espace en dessous */
}

.photo-band figure {
  margin: 0 !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;                     /* Force un format carré parfait pour l'uniformité */
  overflow: hidden !important;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.photo-band img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;                       /* Centre et recadre proprement l'image dans son carré */
  display: block !important;
  transition: transform 0.3s ease;
}

/* Effet de zoom très discret au survol */
.photo-band figure:hover img {
  transform: scale(1.04);
}

/* Légende discrète qui apparaît au survol de l'oiseau */
.photo-band figcaption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0.4rem !important;
  font-size: 0.75rem !important;
  font-style: italic !important;
  color: #ffffff !important;
  background: linear-gradient(transparent, rgba(14, 77, 77, 0.85)) !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.photo-band figure:hover figcaption {
  opacity: 1;
}

/* Adaptation pour les tablettes et mobiles */
@media (max-width: 768px) {
  .photo-band {
    grid-template-columns: repeat(3, 1fr) !important; /* Passe à 2 lignes de 3 images sur petit écran */
    gap: 4px !important;
  }
}

/* --- BANNIÈRE DE PAGE (image large + crédit) --- */
.page-banner {
  position: relative;
  margin: 0 auto 2rem auto;      /* Centré, avec une marge basse harmonisée à 2rem */
  width: 100%;                   /* Occupe toute la largeur disponible du conteneur */
  max-width: var(--maxw);        /* Aligné parfaitement sur la colonne large du wiki (1000px) */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.page-banner-img {
  width: 100%;
  height: clamp(240px, 40vh, 440px); /* Légèrement réhaussé pour garder un super ratio sur grand écran */
  object-fit: cover;
  object-position: center 70%;   /* Garde les sujets, en bas de l'image, visibles */
  display: block;
}

.page-banner-credit {
  position: absolute;
  right: 0.6rem;
  bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* --- BLOC TEXTE + IMAGE EN MIROIR --- */
.text-image-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;       /* centre verticalement l'image par rapport au texte */
  margin: 1.5rem 0;
}
.text-image-split .tis-text > *:first-child { margin-top: 0; }
.tis-image { margin: 0; }
.tis-image img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  display: block;
}
.tis-image figcaption {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-light);
  margin-top: 0.4rem;
  text-align: center;
}

/* Empilement sur mobile : image sous le texte */
@media (max-width: 700px) {
  .text-image-split { grid-template-columns: 1fr; gap: 1rem; }
}

/* --- Sections pleine largeur, contenu ramené à la largeur de lecture --- */
.section-full-bleed { width: 100%; }
.section-pad { padding: 2.5rem 0; margin: 0; }
.section-full-bleed > .container { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; }
.section-full-bleed .page-content { max-width: var(--readw); margin: 0 auto; }

/* Sections de la page atelier (layout page + sidebar) */
.page-section { padding: 2rem 1.75rem; border-radius: 6px; margin: 0 0 1rem 0; }
.page-section > *:first-child { margin-top: 0; }

/* Alternance automatique : 1re blanche, 2e sable, etc. */
.page-section:nth-of-type(odd)  { background: #ffffff; }
.page-section:nth-of-type(even) { background: #f7f4e9; }

/* Fonds alternés */
.band-white { background: var(--color-bg); }
.band-alt   { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.band-sand  { background: #f7f4e9; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

/* --- Blocs dépliables --- */
.disclosure { border: 1px solid var(--color-border); border-radius: 4px; margin: 1.5rem 0; background: var(--color-bg); }
.disclosure > summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; transition: color 0.15s ease; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "\25B8"; color: var(--green); font-size: 0.9rem; transition: transform 0.15s ease; align-self: center; }
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure > summary:hover { color: var(--teal-deep); }
.disclosure-title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--teal-deep); font-weight: 500; }
.disclosure-hint { font-size: 0.9rem; color: var(--color-muted); font-weight: normal; }
.disclosure-body { padding: 0 1.25rem 1.25rem; }
.disclosure-body > *:first-child { margin-top: 0; }


/* --- Gallerie Photos Retours Ateliers --- */
.reflexion-gallery { margin: 1.5rem 0 0; }
.reflexion-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.reflexion-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  display: block;
}
.reflexion-gallery figcaption {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-light);
  margin-top: 0.4rem;
  text-align: right;
}
/* Sur mobile : les 3 vignettes passent en colonne */
@media (max-width: 600px) {
  .reflexion-gallery .gallery-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   7. RESPONSIVE GLOBAL & ADAPTATION DU LAYOUT DOUBLE COLONNE
   ============================================================================ */

/* Point de rupture anticipé (940px) car la page globale fait maintenant 800px au maximum */
@media (max-width: 1040px) {
  .page-wrapper {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.2rem;
    gap: 2rem;
  }
  
  .sidebar {
    position: static;
    max-height: none;
    background: var(--color-bg-alt);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
  }
  
  .nav-toggle { display: block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0.8rem; padding-top: 1rem; }
}

@media (max-width: 600px) {
  :root { --text-base: 15px; }
  .header-inner { padding: 0 1.2rem; }
  .db-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .db-label { text-align: left; }
  h1 { font-size: 1.8rem; }
}


/* ============================================================================
   8. RENDU POUR L'IMPRESSION (FICHES PÉDAGOGIQUES PHYSIQUES)
   ============================================================================ */

@media print {
  .site-header, .sidebar, .site-footer, .nav-toggle, .btn, .fiche-btn { display: none !important; }
  .page-wrapper { display: block; padding: 0; }
  body { font-size: 12pt; background: #fff; color: #000; }
  main.content { max-width: 100%; }
  a { color: #000; text-decoration: underline; }
  blockquote, .callout, .sono-card { box-shadow: none !important; background: #fff !important; border: 1px solid #000 !important; }
}

/* ============================================================================
   9. LOGOS INSTITUTIONNELS
   ============================================================================ */

.partner-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 1rem;
}
.partner-banner img {
  height: 60px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: all 0.2s ease;
}
.partner-banner img:hover {
  filter: grayscale(0%);
  opacity: 1;
}