/* ==========================================================
   Patrimoine Fondjomekwet — feuille de style reconstruite
   d'après le thème WordPress « air-Fondjo-2 » (Anamarilla, 2015)
   ========================================================== */

@font-face {
  font-family: 'harlequinflfregular';
  src: url('../fonts/harlequinflf-webfont.woff2') format('woff2'),
       url('../fonts/harlequinflf-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* Couleurs des rubriques (reprises du thème d'origine) */
:root {
  --accueil: #006699;
  --pouvoir: #993333;
  --economie: #333300;
  --environnement: #009966;
  --habitat: #cc3300;
  --culture: #993366;   /* « vieQuotidienne » dans le thème */
  --histoire: #009999;
  --diaspora: #336699;
  --interactivite: #006699;
  --titre-font: 'harlequinflfregular', 'Trebuchet MS', sans-serif;
  --texte-font: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  margin: 0;
  background-color: #003333;
  background-image:
    linear-gradient(to bottom, #9ad9f2 0, #b9e7f7 300px, transparent 300px),
    linear-gradient(to bottom, #00b85c 300px, #007a5a 900px, #003333 1600px);
  background-repeat: no-repeat;
  min-height: 100%;
}
body {
  margin: 0;
  font-family: var(--texte-font);
  font-size: 1rem;
  line-height: 1.45;
  color: #000;
  position: relative;
}
/* collines (remplace bg_illustration.png, absent de la sauvegarde) */
.collines {
  position: absolute; top: 170px; left: 0; width: 100%; height: 160px;
  z-index: 0; pointer-events: none;
}

a { color: #006699; }
img { max-width: 100%; height: auto; }

#wrapper {
  position: relative; z-index: 1;
  max-width: 1280px; width: 90%; margin: 0 auto;
}

/* ---------- En-tête ---------- */
#header {
  display: flex; align-items: center; gap: 1.5%;
  padding: 1.5em 0 1.2em;
}
#logo { flex: 0 0 19%; }
#logo img { display: block; width: 100%; }

#mainnav-rubriques { flex: 1; }
#mainnav-rubriques > ul {
  display: flex; gap: 1%; margin: 0; padding: 0; list-style: none;
}
#mainnav-rubriques > ul > li {
  position: relative; flex: 1 1 0; max-width: 12.5%;
}
#mainnav-rubriques > ul > li > a {
  display: block; border-radius: 50%; background: #fff; padding: 4%;
  transition: transform .2s;
}
#mainnav-rubriques > ul > li > a:hover,
#mainnav-rubriques > ul > li > a:focus { transform: rotate(7deg); }
#mainnav-rubriques > ul > li.actif > a { box-shadow: 0 0 0 4px #ffcc00; }
#mainnav-rubriques img { display: block; width: 100%; }
/* sous-menu déroulant */
#mainnav-rubriques li ul {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); min-width: 13em; z-index: 20;
  margin: .3em 0 0; padding: .4em 0; list-style: none;
  border-radius: .6em; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
#mainnav-rubriques li:hover > ul,
#mainnav-rubriques li:focus-within > ul { display: block; }
#mainnav-rubriques li ul a {
  display: block; padding: .35em 1em; color: #fff; text-decoration: none;
  font-size: .9em;
}
#mainnav-rubriques li ul a:hover { background: rgba(255,255,255,.18); }

/* ---------- Bloc de page ---------- */
#wrap { background: #fff; border-radius: 1em 1em 0 0; overflow: hidden; }

.page-title {
  display: flex; align-items: center; gap: 1%;
  padding: .5em 2%; color: #fff;
}
.page-title h2 {
  margin: 0; font-family: var(--titre-font); font-weight: normal;
  font-size: 1.375em; letter-spacing: .02em;
}
.page-title h2 a { color: #fff; text-decoration: none; }
.page-title h2 a:hover { text-decoration: underline; }
.page-title .sep { opacity: .75; margin: 0 .3em; }
.icone-titre-rubriques {
  width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; padding: 2px;
}

#titre-accueil, #titre-blog, #titre-interactivite { background: var(--accueil); }
#titre-pouvoir { background: var(--pouvoir); }
#titre-economie { background: var(--economie); }
#titre-environnement { background: var(--environnement); }
#titre-habitat { background: var(--habitat); }
#titre-vieQuotidienne { background: var(--culture); }
#titre-histoire { background: var(--histoire); }
#titre-diaspora { background: var(--diaspora); }

.content { padding: 1.5em 2.5% 2em; }
.content::after { content: ""; display: block; clear: both; }

h3, h4 { font-family: var(--titre-font); font-weight: normal; }
.content h3 { font-size: 1.313em; color: var(--couleur, #006699); margin: 1.2em 0 .5em; }
.content p { text-align: justify; margin: 0 0 .8em; }

/* couleur de la rubrique courante, utilisée par les composants */
body.r-accueil { --couleur: var(--accueil); }
body.r-pouvoir { --couleur: var(--pouvoir); }
body.r-economie { --couleur: var(--economie); }
body.r-environnement { --couleur: var(--environnement); }
body.r-habitat { --couleur: var(--habitat); }
body.r-culture { --couleur: var(--culture); }
body.r-histoire { --couleur: var(--histoire); }
body.r-diaspora { --couleur: var(--diaspora); }
body.r-interactivite, body.r-blog { --couleur: var(--accueil); }

/* Texte principal encadré (texte-principal-pouvoir, texte-accueil…) */
.texte-principal {
  border: .18em solid var(--couleur); border-radius: .8em;
  padding: 3% 4%; color: var(--couleur); margin-bottom: 1.5em;
}
.texte-principal p { color: #222; }

/* Sous-titre en bandeau (soustitre-accueil, soustitre-auxiliaire…) */
.soustitre {
  background: var(--couleur); color: #fff; text-align: center;
  border-radius: .8em .8em 0 0; margin: 1.5em 0 0;
}
.soustitre h3 { color: #fff !important; margin: 0; padding: .45em 0 .25em; font-size: 1.2em; }
.bloc-sous-titre { border: .15em solid var(--couleur); border-top: 0;
  border-radius: 0 0 .8em .8em; padding: 1em 3%; margin-bottom: 1.5em; }

/* Menu de sous-rubriques (menu-pouvoir, menu-histoire, …) */
.menu-sous-rubriques {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
  gap: 1em; margin: 1em 0 2em; padding: 0; list-style: none;
}
.menu-sous-rubriques a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 5.5em; padding: 1em; border-radius: .8em;
  background: var(--couleur); color: #fff; text-decoration: none;
  font-family: var(--titre-font); font-size: 1.15em;
  transition: transform .15s, box-shadow .15s;
}
.menu-sous-rubriques a:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }

/* Menu interactivité (page d'accueil) */
.menu-interactivite {
  display: grid; grid-template-columns: repeat(6, minmax(0, 9em)); justify-content: center; gap: 1.2em;
  list-style: none; padding: 0; margin: .5em 0;
}
.menu-interactivite a {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  border-radius: 50%; border: .2em solid var(--accueil); color: var(--accueil);
  font-family: var(--titre-font); text-decoration: none; text-align: center; padding: .5em;
  transition: transform .2s, background .2s;
}
.menu-interactivite a:hover { background: var(--accueil); color: #fff; transform: rotate(7deg); }

/* Grille 2 colonnes (accueil : derniers articles / vidéo) */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }

/* Zones à compléter */
.a-completer {
  border: 2px dashed #c9a400; background: #fffbe6; color: #6b5800;
  border-radius: .6em; padding: 1em 1.2em; margin: 0 0 1em;
  font-size: .95em;
}
.a-completer strong { display: block; margin-bottom: .2em; }
.media-a-completer {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16 / 9; max-height: 22em; width: 100%; background: repeating-linear-gradient(45deg,#f2f2f2 0 12px,#e8e8e8 12px 24px);
  border: 2px dashed #bbb; border-radius: .6em; color: #777; margin: 0 0 1em; padding: 1em;
}

/* Vidéos */
.video-container { margin: 0 0 1.5em; }
.video-container video { width: 100%; border-radius: .6em; background: #000; display: block; }

/* Recherche */
.recherche { display: flex; gap: .5em; margin: 0 0 1.5em; }
.recherche input { flex: 1; padding: .5em .8em; border: 1px solid #aaa; border-radius: .4em; font: inherit; }
.recherche button { padding: .5em 1.2em; border: 0; border-radius: .4em; background: var(--accueil); color: #fff; font: inherit; cursor: pointer; }

/* Article de blog */
.article { border: 1px solid #6699cc; border-radius: .8em; padding: 2em 4%; }
.article h1 { font-family: var(--titre-font); font-weight: normal; color: var(--accueil); font-size: 1.5em; margin: 0 0 1em; }
.article h4 { font-size: 1.15em; margin: 1.6em 0 .4em; }
.retourner {
  float: right; background: var(--accueil); color: #fff; text-decoration: none;
  font-family: var(--titre-font); padding: .3em .9em; border-radius: .2em; margin: 0 0 1em 1em;
}
.galerie { display: flex; justify-content: center; gap: 1.5em; flex-wrap: wrap; margin: 1.5em 0; }
.galerie img { width: 280px; border: 3px solid #1f5f9e; }
.liste-articles { list-style: none; padding: 0; }
.liste-articles li { padding: .8em 0; border-bottom: 1px solid #ddd; }
.liste-articles a { font-family: var(--titre-font); font-size: 1.1em; color: #6699cc; text-decoration: none; }

/* Plan du site */
.plan-du-site ul { list-style: none; padding-left: 1.2em; border-left: 2px solid #ddd; }
.plan-du-site > ul { border: 0; padding: 0; }
.plan-du-site li { margin: .3em 0; }
.plan-du-site .pastille { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .4em; vertical-align: middle; }

/* ---------- Pied de page ---------- */
.footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1em;
  color: #fff; padding: .8em 2%; border-radius: 0 0 1em 1em; margin-bottom: 2em;
}
.footer nav { flex: 1; }
.footer nav ul { display: flex; flex-wrap: wrap; gap: .3em 2em; margin: 0; padding: 0; list-style: none; }
.footer a { color: #fff; text-decoration: none; font-size: .9em; }
.footer a:hover { text-decoration: underline; }
#credit-link { font-size: .875em; text-align: right; }

#footer-accueil { background: var(--accueil); }
#footer-pouvoir { background: var(--pouvoir); }
#footer-economie { background: var(--economie); }
#footer-environnement { background: var(--environnement); }
#footer-habitat { background: var(--habitat); }
#footer-vieQuotidienne { background: var(--culture); }
#footer-histoire { background: var(--histoire); }
#footer-diaspora { background: var(--diaspora); }

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  #wrapper { width: 96%; }
  #header { flex-direction: column; }
  #logo { flex: none; width: 60%; max-width: 260px; }
  #mainnav-rubriques { width: 100%; }
  #mainnav-rubriques > ul { flex-wrap: wrap; justify-content: center; gap: .5em; }
  #mainnav-rubriques > ul > li { flex: 0 0 22%; max-width: 22%; }
  #mainnav-rubriques li ul { display: none !important; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .menu-interactivite { grid-template-columns: repeat(3, 1fr); font-size: .85em; }
  #credit-link { text-align: left; }
}

/* ===== Contenu issu de l'ancien site ===== */
.content h3.widget-title, .content .widget-title { color: var(--couleur); }
.content h6 { font-size: 1.05em; margin: .6em 0; font-family: var(--titre-font); font-weight: normal; }
.content h6 a, .content a.lien-vers-article { color: var(--couleur); }
.content ul { padding-left: 1.4em; }
.content img { border-radius: .3em; }
.content img.alignleft { float: left; margin: 0 1em 1em 0; max-width: 40%; }
/* menus d'images (sous-rubriques) */
.content ul.menu { list-style: none; padding: 0; margin: 1.5em 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 1em; }
.content ul.menu a { display: block; text-decoration: none; }
.content ul.menu a:hover img { background: var(--couleur); }
/* images introuvables */
.img-manquante { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 6em; padding: 1em; margin: .3em 0 1em; border: 2px dashed #bbb; border-radius: .5em;
  background: repeating-linear-gradient(45deg,#f5f5f5 0 10px,#ececec 10px 20px); color: #666; font-size: .85em; }
.img-manquante.img-lien { background: var(--couleur); border: 0; color: #fff; min-height: 4.5em;
  font-family: var(--titre-font); font-size: 1.1em; }
.img-manquante small { word-break: break-all; }
/* vidéos et présentations externes */
a.video-externe { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; max-height: 22em;
  margin: 1em 0; border-radius: .6em; background: #222; color: #fff; text-decoration: none; font-size: 1.15em; }
a.video-externe:hover { background: var(--couleur); }
.content iframe { max-width: 100%; }
/* galeries (anciens diaporamas) */
.galerie-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: .7em; margin: 1em 0 1.5em; }
.galerie-photos figure { margin: 0; }
.galerie-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.galerie-photos figcaption { font-size: .8em; color: #555; margin-top: .2em; }
.galerie-photos .img-manquante { aspect-ratio: 4/3; min-height: 0; margin: 0; }
/* calendrier traditionnel */
#calendrier { width: 100%; border-collapse: separate; border-spacing: 0 .4em; margin: 1em 0; }
#calendrier caption { font-family: var(--titre-font); font-size: 1.2em; color: var(--couleur); padding: .5em; }
#calendrier th { text-align: left; vertical-align: top; font-weight: normal; padding: .6em .8em; }
#calendrier th.jour { background: var(--couleur); color: #fff; font-family: var(--titre-font); width: 9em; border-radius: .5em 0 0 .5em; }
#calendrier th.description-jour { background: #f6eef2; border-radius: 0 .5em .5em 0; }
a.bouton-loges { background: var(--couleur); color: #fff; padding: .05em .5em; border-radius: .3em; text-decoration: none; }
/* quiz */
.quiz { border: .18em solid var(--accueil); border-radius: .8em; padding: 1.2em 4%; margin: 1em 0 1.5em; }
.quiz-num { color: #777; font-size: .85em; margin: 0; }
.quiz h4 { color: var(--accueil); margin: .3em 0 .8em; }
.quiz-reponses { list-style: none; padding: 0; display: grid; gap: .5em; }
.quiz button { font: inherit; cursor: pointer; border-radius: .4em; }
.quiz-reponses button { width: 100%; text-align: left; padding: .6em .9em; border: 1px solid #aac; background: #fff; }
.quiz-reponses button:hover:not(:disabled) { background: #eef5fb; }
.quiz-reponses button.bon { background: #dff3e4; border-color: #2e8b57; }
.quiz-reponses button.faux { background: #fbe3e3; border-color: #c0392b; }
.quiz-retour.ok { color: #2e8b57; font-weight: bold; } .quiz-retour.ko { color: #c0392b; font-weight: bold; }
.quiz-suivant, .quiz-fin button { background: var(--accueil); color: #fff; border: 0; padding: .5em 1.2em; }
/* menu principal : niveaux du sous-menu */
#mainnav-rubriques li ul li.niv0 a { font-weight: bold; }
#mainnav-rubriques li ul li.niv1 a { padding-left: 1.8em; font-size: .85em; }
#mainnav-rubriques li ul li.niv2 a { padding-left: 2.6em; font-size: .8em; opacity: .9; }
#mainnav-rubriques li ul { min-width: 16em; }
/* formulaire de recherche de l'accueil */
#searchform { display: flex; gap: .5em; margin: 1em 0 1.5em; }
#searchform br { display: none; }
#searchform input[type=text] { flex: 1; padding: .5em .8em; border: 1px solid #aaa; border-radius: .4em; font: inherit; }
#searchform input[type=submit] { padding: .5em 1.2em; border: 0; border-radius: .4em; background: var(--accueil); color: #fff; font: inherit; cursor: pointer; }
.content .post-date { display: block; color: #777; font-size: .85em; }
/* formulaires */
.formulaire { display: grid; gap: .8em; max-width: 34em; margin: 1em 0; }
.formulaire label { display: grid; gap: .25em; font-weight: bold; color: var(--couleur); }
.formulaire input, .formulaire textarea { font: inherit; font-weight: normal; padding: .5em .7em; border: 1px solid #aaa; border-radius: .4em; }
.formulaire button { justify-self: start; font: inherit; padding: .5em 1.4em; border: 0; border-radius: .4em; background: var(--couleur); color: #fff; cursor: pointer; }
.form-note { color: #6b5800; background: #fffbe6; padding: .6em .8em; border-radius: .4em; }
.a-completer { border: 2px dashed #c9a400; background: #fffbe6; color: #6b5800; border-radius: .6em; padding: 1em 1.2em; }
.a-completer strong { display: block; }
.content img.so-widget-image[width="400"] { max-width: 280px; float: right; margin: 0 0 1em 1.5em; }
.content img.icone-rubrique { width: 150px; height: 150px; border-radius: 50%; display: inline-block !important; margin: .4em; transition: transform .2s; }
.content a:hover img.icone-rubrique { transform: rotate(7deg); }
.content a:has(img.icone-rubrique) { display: inline-block; }
.en-construction { padding: 2.5em 1em; text-align: center; border: .18em dashed var(--couleur); border-radius: .8em; color: var(--couleur); font-family: var(--titre-font); font-size: 1.3em; margin: 1em 0; }
/* vidéos YouTube intégrées */
.video-integree { position: relative; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; margin: 1em 0 1.5em;
  border-radius: .6em; overflow: hidden; background: #000; }
.video-integree iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }