/* Responsive HTML5/CSS3 template (no deps). Light/Dark toggle via [data-theme] */
:root{
  --bg:#0f172a; --surface:#111827; --muted:#94a3b8; --text:#e5e7eb;
  --accent:#22d3ee; --accent-2:#a78bfa; --border:rgba(148,163,184,.15); --card:rgba(255,255,255,0.04);
  --maxw:1080px;
}
:root[data-theme="light"]{
  --bg:#f8fafc; --surface:#ffffff; --muted:#475569; --text:#0f172a;
  --accent:#0ea5e9; --accent-2:#8b5cf6; --border:rgba(2,6,23,.12); --card:rgba(2,6,23,.03);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}
img{max-width:100%;height:auto;border-radius:12px}
.container{max-width:var(--maxw);margin:0 auto;padding:1.25rem}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:1fr}
@media (min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr}}
.card{background:linear-gradient(180deg,var(--card),transparent);border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.12)}

nav{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:color-mix(in srgb, var(--bg) 80%, transparent);border-bottom:1px solid var(--border);z-index:50}
.navbar{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:.75rem 1.25rem}
.brand{font-weight:700;letter-spacing:.3px}
.brand span{color:var(--accent-2)}
.menu{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.menu a{padding:.5rem .75rem;border-radius:999px}
.menu a.active,.menu a:hover{background:var(--card)}
.burger{display:inline-flex;flex-direction:column;gap:5px;border:0;background:transparent;color:var(--text)}
.burger .bar{width:24px;height:2px;background:var(--text);border-radius:2px}
@media(min-width:900px){.burger{display:none}}

.mobile{display:none;flex-direction:column;padding:0 1.25rem .75rem}
.mobile a{padding:.5rem .75rem;border-radius:8px}
.show{display:flex}

.header{padding:3rem 0 1rem}
.h1{font-size:clamp(1.8rem,3.5vw,3rem);font-weight:800;line-height:1.2;margin:0}
.subtitle{color:var(--muted);margin:.25rem 0 0}

.badge{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:.82rem}
.badge .dot{width:6px;height:6px;border-radius:999px;background:var(--accent)}

.footer{margin-top:3rem;border-top:1px solid var(--border);padding:1rem 0;color:var(--muted);font-size:.9rem}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.6rem;border-bott/* === Sommaire élargi et centré jusqu'à 1600 px === */
@media (min-width: 1200px) {
  /* Contenant du menu */
  nav .navbar {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px; /* petite marge intérieure */
  }
}

/* Liste du sommaire : s'étale mieux, peut passer à la ligne si besoin */
nav .navbar .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem; /* espacement lignes / colonnes */
}

/* Evite la casse sur chaque item du sommaire */
nav .navbar .nav-link {
  white-space: nowrap;
}

/* (Optionnel) Harmonise aussi l'entête et le pied si tu veux qu'ils suivent la même largeur */
@media (min-width: 1200px) {
  .header.container,
  .footer.container {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}
om:1px solid var(--border);text-align:left}
.table th{color:var(--muted);font-weight:600}

.kicker{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;border:1px solid var(--border)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06121f;border:0}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#0f766e}
.toggle{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);cursor:pointer}



/* === ISB layout tuning (1600x900) === */
:root {
  --isb-max-w: 1200px;
  --isb-max-w-xl: 1400px;
}

/* Limit scope to the migrated index content to avoid side effects */
#isb-migrated-index, 
#isb-migrated-index-text {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  max-width: var(--isb-max-w);
  /* responsive font sizing: scales slightly with viewport */
  font-size: clamp(1rem, 1vw + 0.6rem, 1.15rem);
  line-height: 1.75;
}

@media (min-width: 1600px) {
  #isb-migrated-index, 
  #isb-migrated-index-text {
    max-width: var(--isb-max-w-xl);
  }
}

@media (max-width: 768px) {
  #isb-migrated-index, 
  #isb-migrated-index-text {
    max-width: 95%;
    padding: 1rem;
    font-size: 1rem;
  }
}

/* Optional: if the template uses a central .container, widen it safely on large screens */
@media (min-width: 1600px) {
  .container, .content, main, section {
    max-width: max(60vw, 1200px);
  }
}
/* === /ISB layout tuning === */



/* === ISB container widening via CSS variable override === */
/* On large screens, widen global container without breaking layout */
@media (min-width: 1600px) {
  :root { 
    --maxw: 1400px; /* was 1080px */
  }
}
/* === /ISB container widening === */

/* === ISB unified overrides (responsive, 1600x900 friendly) === */
:root {
  /* keep original variables as-is; override container width at large sizes via media query below */
  --isb-maxw: 1200px;
  --isb-maxw-xl: 1400px;
}

/* Text container for migrated content */
#isb-migrated-index,
#isb-migrated-index-text {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  max-width: var(--isb-maxw);
  font-size: clamp(1rem, 1vw + 0.6rem, 1.15rem);
  line-height: 1.75;
}

/* Large screens: widen both the template container and migrated blocks */
@media (min-width: 1600px) {
  :root {
    --maxw: 1400px; /* widen global container (was ~1080px) */
  }
  #isb-migrated-index,
  #isb-migrated-index-text {
    max-width: var(--isb-maxw-xl);
  }
}

/* Small screens: keep it comfortable */
@media (max-width: 768px) {
  #isb-migrated-index,
  #isb-migrated-index-text {
    max-width: 95%;
    padding: 1rem;
    font-size: 1rem;
  }
}
/* === /ISB unified overrides === */


/* ISB sommaire dropdown */
.sommaire-dropdown details {
  margin-top: 0.5rem;
}
.sommaire-dropdown summary {
  cursor: pointer;
  font-weight: 600;
}
.sommaire-dropdown ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0 0;
}
.sommaire-dropdown li {
  margin: 0.25rem 0;
}
.sommaire-dropdown a {
  text-decoration: none;
}
.sommaire-dropdown a:hover {
  text-decoration: underline;
}
/* /ISB sommaire dropdown */


/* === ISB: Sommaire dropdown in header (v2) === */
:root {
  /* fallback colors if not present */
  --header-bg: var(--bg, #0f172a);
  --header-fg: var(--fg, #e5e7eb);
  --accent: var(--accent, #22d3ee);
}

header .sommaire-dropdown {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
}

header .sommaire-dropdown details {
  position: relative;
}
/* === Élargissement du texte sur grands écrans === */

/* Le conteneur principal (main) peut s'étendre jusqu'à 1600px */
@media (min-width: 1200px) {
  main.container.grid.grid-2 {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Le bloc texte (section.card) s'adapte à la largeur disponible */
@media (min-width: 1200px) {
  main.container.grid.grid-2 > section.card {
    max-width: 100%;
  }
}

/* L'image garde sa taille fluide sans dépasser le conteneur */
main.container.grid.grid-2 img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
}

header .sommaire-dropdown summary {
  list-style: none;
  cursor: pointer;
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--header-fg) 20%, transparent);
  background: color-mix(in srgb, var(--header-bg) 85%, black 0%);
  color: var(--header-fg);
  user-select: none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
header .sommaire-dropdown summary::marker { content: ""; }
header .sommaire-dropdown summary::-webkit-details-marker { display: none; }

header .sommaire-dropdown summary:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

header .sommaire-dropdown details[open] summary {
  transform: translateY(0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

header .sommaire-dropdown ul {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  min-width: 260px;
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: color-mix(in srgb, var(--header-bg) 90%, black 0%);
  border: 1px solid color-mix(in srgb, var(--header-fg) 20%, transparent);
  border-top: none;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 20;
}

header .sommaire-dropdown li { margin: 0; }

header .sommaire-dropdown a {
  display: block;
  padding: .5rem .75rem;
  text-decoration: none;
  color: var(--header-fg);
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}

header .sommaire-dropdown a:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: white;
}

/* Mobile: make it full-width and sticky under header */
@media (max-width: 768px) {
  header .sommaire-dropdown {
    margin-top: .75rem;
  }
  header .sommaire-dropdown details {
    width: 100%;
  }
  header .sommaire-dropdown summary {
    width: 100%;
    text-align: left;
  }
  header .sommaire-dropdown ul {
    position: static;
    max-height: 50vh;
    width: 100%;
    border-top: 1px solid color-mix(in srgb, var(--header-fg) 20%, transparent);
    border-radius: .5rem;
  }
}
/* === /ISB: Sommaire dropdown (v2) === */



/* ISB navbar dropdown (no Bootstrap JS) */
.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.navbar .navbar-brand, .navbar .brand, .navbar .logo {
  margin-right: auto;
}
#navigation {
  flex: 1 1 auto;
}
.navbar-nav {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-block;
  padding: .5rem .75rem;
  text-decoration: none;
}
.nav-item.dropdown .dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  min-width: 240px;
  background: color-mix(in srgb, var(--bg, #0f172a) 95%, black 0%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem;
  padding: .25rem 0;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 50;
}
.nav-item.dropdown.open > .dropdown-menu {
  display: block;
}
.dropdown-item {
  display: block;
  padding: .5rem .75rem;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-item:hover {
  background: color-mix(in srgb, var(--accent, #22d3ee) 12%, transparent);
}
/* Hover support on desktop */
@media (hover:hover) {
  .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}
/* Mobile: stack nav */
@media (max-width: 768px) {
  .navbar { gap: .5rem; }
  #navigation { width: 100%; }
  .navbar-nav { justify-content: center; }
}
/* /ISB navbar dropdown */

/* === ISB ARTICLE MAX WIDTH (1600px, excludes index) === */
/* Applies to pages that wrap main text in .article-content.
   Index page is unaffected since it does not use .article-content. */
@media (min-width: 1600px) {
  .article-content {
    max-width: 1600px;
    margin: 0 auto;
  }
}
/* === /ISB ARTICLE MAX WIDTH (1600px, excludes index) === */

/* === Élargissement du texte jusqu'à 1800 px + centrage === */

/* Supprime la limite imposée par .container */
main.container.grid.grid-2 {
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
}

/* Le bloc de texte (section.card) sera centré et limité à 1600 px */
main.container.grid.grid-2 > section.card {
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* L'image reste fluide et centrée */
main.container.grid.grid-2 img {
  display: block;
  margin: 0 auto 1.5rem;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Optionnel : sur écrans très larges, garde le centrage du contenu */
@media (min-width: 1600px) {
  main.container.grid.grid-2 {
    justify-content: center;
  }
}

img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* === Sommaire élargi et centré jusqu'à 1600 px === */
@media (min-width: 1200px) {
  /* Contenant du menu */
  nav .navbar {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px; /* petite marge intérieure */
  }
}

/* Liste du sommaire : s'étale mieux, peut passer à la ligne si besoin */
nav .navbar .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem; /* espacement lignes / colonnes */
}

/* Evite la casse sur chaque item du sommaire */
nav .navbar .nav-link {
  white-space: nowrap;
}

/* (Optionnel) Harmonise aussi l'entête et le pied si tu veux qu'ils suivent la même largeur */
@media (min-width: 1200px) {
  .header.container,
  .footer.container {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* === Agrandissement progressif de la police sur grands écrans === */
@media (min-width: 1200px) {
  body {
    font-size: 1.15rem; /* +15 % dès les écrans larges */
    line-height: 1.8;
  }
}

@media (min-width: 1600px) {
  body {
    font-size: 1.25rem; /* +25 % sur très grands écrans */
    line-height: 1.9;
  }
}

/* === Sommaire étendu jusqu'à 1800 px (sans agrandir la police) === */
@media (min-width: 1200px) {
  nav .navbar {
    max-width: 1800px;   /* largeur maximale du sommaire */
    margin: 0 auto;
    padding: 0 16px;
  }
}

/* Empêche l’agrandissement de la police dans le sommaire */
nav .navbar,
nav .navbar .nav-link {
  font-size: inherit;  /* garde la taille de texte du body */
}

/* Répartition fluide des éléments de menu */
nav .navbar .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
}

/* Évite les coupures de texte */
nav .navbar .nav-link {
  white-space: nowrap;
}

/* === Garde une taille de texte constante dans le sommaire === */
@media (min-width: 1200px) {
  nav .navbar,
  nav .navbar .nav-link,
  nav .navbar .dropdown-item {
    font-size: 1rem !important; /* taille fixe du texte du menu */
    line-height: 1.4;
  }
}

/* === Mise en page spécifique à la page d'accueil === */
body.home main.container.grid.grid-2 {
  display: grid;
  grid-template-columns: 3fr 1fr; /* texte 3/4 – info 1/4 */
  gap: 2rem;
  align-items: start;
}

/* Responsive : sur petits écrans, retour en une colonne */
@media (max-width: 992px) {
  body.home main.container.grid.grid-2 {
    grid-template-columns: 1fr;
  }
}

.centre-total {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;      /* centre verticalement */
  height: 20vh;            /* hauteur de la fenêtre */
}

/* Empiler et espacer proprement le titre, le sous-titre et l'audio */
.article-content .centre-total {
  display: flex;               /* force l'empilement */
  flex-direction: column;      /* vertical */
  align-items: center;         /* centré horizontalement */
  text-align: center;          /* texte centré */
  gap: 1rem;                   /* espace régulier entre chaque ligne */
}

/* Neutralise les <br> qui cassent la mise en page à l'intérieur */
.article-content .centre-total br { display: none; }

/* Optionnel : largeur confortable pour le lecteur audio */
.article-content .centre-total audio {
  width: 100%;
  max-width: 640px;
}

/* Centrage vertical serré du titre, sous-titre et audio */
.article-content .centre-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem; /* espace réduit entre les lignes */
}

/* Supprime les <br> inutiles qui ajoutent trop d’espace */
.article-content .centre-total br { display: none; }

/* Ajuste légèrement l’espace sous le titre */
.article-content .centre-total h4 {
  margin-bottom: 0.2rem;
}

/* Ajuste le lecteur audio pour qu’il reste aligné et fluide */
.article-content .centre-total audio {
  width: 100%;
  max-width: 480px;
}

/* Bloc audio + texte centré et resserré */
.article-content .centre-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem; /* espace très serré entre les lignes */
}

/* Supprime les marges par défaut des paragraphes dans ce bloc */
.article-content .centre-total p {
  margin: 0.2rem 0;
}

/* Taille du lecteur audio fluide et harmonisée */
.article-content .centre-total audio {
  width: 100%;
  max-width: 480px;
  margin-top: 0.4rem; /* petit espace au-dessus du lecteur */
}

/* Texte des crédits sous le titre audio */
.article-content .centre-total .credit {
  font-size: 0.9rem;     /* un peu plus petit que le texte normal */
  color: #cdd9f8;        /* couleur plus douce, harmonieuse avec ton thème */
  margin: 0.1rem 0 0.3rem;
  font-style: italic;    /* optionnel : pour l'effet "crédit musical" */
}