:root {
  --color-green: #10a80b;
  --color-green-dark: #0b7808;
  --color-green-light: #15dd0e;
  --color-red: #d52815;
  --color-orange: #f7941d;
  --color-blue: #00b0eb;
  --color-blue-dark: #007399;
  --color-bg-sky: #85e0ff;
  --color-bg-sky-light: #d1f4ff;
  --color-ink: #0f3d0c;
  --font-heading: "Fredoka", Verdana, Geneva, sans-serif;
  --font-body: "Nunito Sans", Tahoma, Arial, sans-serif;
  --sheet-width: 1000px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-bg-sky);
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, var(--color-bg-sky-light), var(--color-bg-sky) 70%);
  background-attachment: fixed;
  min-height: 100vh;
}

a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

a:hover {
  color: var(--color-red);
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  line-height: 1.25;
  text-align: left;
}

h1 { color: var(--color-green-dark); font-size: 1.8rem; }
h2 { color: var(--color-green-light); font-size: 1.4rem; }
h3 { color: var(--color-blue); font-size: 1.15rem; margin: 0; }

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

/* --- Sheet: the centered ~1000px card holding the whole site, like art-Sheet --- */
.art-sheet {
  max-width: var(--sheet-width);
  margin: 10px auto 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 40, 60, 0.25);
  overflow: hidden;
}

/* --- Header: full-width banner photo, like art-Header --- */
.art-header {
  position: relative;
}

.art-header__link {
  display: block;
  position: relative;
}

.art-header img {
  width: 100%;
  display: block;
}

.art-header__tagline {
  position: absolute;
  left: 5%;
  bottom: 12%;
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.3rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Nav: individual convex buttons with visible gaps, like the original MenuItem.png --- */
.art-nav {
  background: var(--color-green);
  padding: 0.5rem 0.6rem;
}

.art-menu {
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.art-menu > li {
  position: relative;
}

.art-menu > li > a {
  display: block;
  padding: 0.55rem 0.9rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  border-radius: 5px;
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--color-green-light) 0%, var(--color-green) 45%, #0d8f09 100%);
  border: 1px solid #096606;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, color 0.15s ease;
}

.art-menu > li > a:hover,
.art-menu > li:hover > a {
  background: linear-gradient(to bottom, #ff8a75 0%, var(--color-red) 45%, #a31c0c 100%);
  border-color: #7a150a;
  color: #fff;
}

/* First-level dropdown: wide flyout panel below the tab, not a narrow list */
.art-menu > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fbd9a4;
  border: 1px solid #e0b06e;
  box-shadow: 0 8px 20px rgba(0, 40, 60, 0.25);
  white-space: nowrap;
}

.art-menu > li:hover > ul {
  display: flex;
  flex-direction: column;
  min-width: 240px;
}

/* Les derniers onglets du menu (proches du bord droit) ouvriraient leur sous-menu
   hors de l'écran avec left: 0 — on les aligne plutôt à droite pour qu'ils s'ouvrent
   vers l'intérieur de la page. */
.art-menu > li:last-child > ul,
.art-menu > li:nth-last-child(2) > ul {
  left: auto;
  right: 0;
}

.art-menu > li > ul > li {
  border-bottom: 1px solid #e0b06e;
}

.art-menu > li > ul > li:last-child {
  border-bottom: none;
}

.art-menu > li > ul > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-blue-dark);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  font-family: var(--font-body);
}

.art-menu > li > ul > li > a:hover,
.art-menu > li > ul > li:hover > a {
  background: var(--color-green);
  color: #fff;
}

/* Second-level flyout: opens beside its parent column, like the original site */
.art-menu > li > ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 31;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fbd9a4;
  border: 1px solid #e0b06e;
  box-shadow: 0 8px 20px rgba(0, 40, 60, 0.25);
  white-space: nowrap;
}

.art-menu > li > ul > li:hover > ul {
  display: block;
}

/* Pour les derniers onglets du menu (déjà ancrés à droite au premier niveau, voir
   plus haut), le sous-menu de deuxième niveau doit lui aussi s'ouvrir vers la gauche
   (left: 100% le ferait déborder hors écran, comme au premier niveau). */
.art-menu > li:last-child > ul ul,
.art-menu > li:nth-last-child(2) > ul ul {
  left: auto;
  right: 100%;
}

.art-menu > li > ul ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-blue-dark);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.art-menu > li > ul ul li a:hover {
  background: var(--color-green);
  color: #fff;
}

/* --- Content area --- */
.art-content {
  padding: 1.75rem 2rem 2.5rem;
  min-height: 50vh;
}

.art-footer {
  text-align: center;
  padding: 1rem;
  background: var(--color-bg-sky-light);
  border-top: 1px solid var(--color-bg-sky);
  color: #345;
  font-size: 0.8rem;
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: 0.85rem;
  color: #557;
  margin-bottom: 1rem;
}

/* --- Page hero --- */
.page-hero {
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-bg-sky-light);
  padding-bottom: 0.75rem;
}

.page-hero__eyebrow {
  color: var(--color-orange);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.2rem;
}

/* --- Card grid (categories, BD list, partners) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--color-bg-sky-light);
  border: 1px solid var(--color-bg-sky);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 40, 60, 0.15);
}

.card h3 { color: var(--color-green-dark); }

.card--draft {
  opacity: 0.65;
  border-style: dashed;
}

.card__badge {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-orange);
  color: #fff;
}

/* --- BD article body: preserve legacy inline tables/iframes gracefully --- */
.bd-article__body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Les vieux tableaux Joomla ont une largeur HTML fixe (ex. width="678") calibrée pour
   leurs colonnes-image (souvent sans width propre, juste l'image à l'intérieur avec son
   propre width/height) — forcer le tableau à 100% écrase ces colonnes fines au profit
   de la colonne de texte. On garde donc la largeur d'origine, avec un scroll horizontal
   en secours si elle dépasse le conteneur (mobile, ou tableau plus large que la page). */
.bd-article__body table {
  max-width: 100%;
}

.bd-article__body {
  overflow-x: auto;
}

/* La règle globale img { max-width: 100%; height: auto; } (plus haut dans ce fichier) est
   pensée pour du contenu responsive moderne, mais les images du contenu migré ont déjà
   leurs propres width/height HTML fixes et corrects (calibrées pour ces vieux tableaux
   Joomla) — laisser la contrainte globale s'appliquer ici peut les réduire en dessous de
   leur taille voulue selon la largeur réelle de leur cellule. On les fait ignorer cette
   règle et respecter uniquement leurs attributs HTML natifs.
   Idéalement ces images seraient uniquement dans des <td> sans autre contenu flexible,
   donc ce comportement plus figé (non responsive) reste cohérent avec l'original. */
.bd-article__body img {
  max-width: none;
  height: auto;
}

.bd-article__body iframe {
  max-width: 100%;
}

/* --- Carousel (modern replacement for the old diaporama script) --- */
.carousel {
  position: relative;
  max-width: 480px;
  margin: 1.25rem auto;
  background: var(--color-bg-sky-light);
  border: 1px solid var(--color-bg-sky);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel__slide.is-active {
  opacity: 1;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.carousel__btn {
  background: var(--color-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.carousel__btn:hover {
  background: var(--color-red);
}

.carousel__counter {
  font-weight: 600;
  color: #345;
  font-size: 0.85rem;
}

/* --- Partners --- */
.partner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}

.partner-list a {
  display: block;
  background: var(--color-bg-sky-light);
  border: 1px solid var(--color-bg-sky);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-blue-dark);
}

.partner-list a:hover {
  border-color: var(--color-orange);
  color: var(--color-red);
}

/* --- Partner iframe page --- */
.partner-frame__fallback {
  font-size: 0.85rem;
  color: #557;
  margin-bottom: 0.75rem;
}

.partner-frame {
  border: 1px solid var(--color-bg-sky);
  border-radius: 8px;
  overflow: hidden;
  height: 70vh;
  min-height: 400px;
}

.partner-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 700px) {
  .art-sheet { margin: 0; border-radius: 0; }
  .art-menu { flex-direction: column; }
  .art-menu > li > a { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .art-menu ul { position: static; box-shadow: none; border-radius: 0; }
  .art-content { padding: 1.25rem; }
}

/* --- "Nos actions dans le monde" interactive map widget --- */
.carte-monde__hint {
  font-style: italic;
  color: #557;
  margin-bottom: 1rem;
}

.carte-monde__map-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

.carte-monde__image {
  max-width: 100%;
  height: auto;
}

.carte-monde-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte-monde-modal[hidden] {
  display: none;
}

.carte-monde-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 61, 12, 0.65);
}

.carte-monde-modal__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: min(90vw, 600px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.carte-monde-modal__content h3 {
  margin-top: 0;
  color: var(--color-green-dark);
}

.carte-monde-modal__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.carte-monde-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-ink);
}