/*
Theme Name: VaccinSecure_784
Theme URI: https://monvaccincovidfrance.fr
Author: Dr. Sophie Lambert
Author URI: https://monvaccincovidfrance.fr
Description: Suivi des données et analyses sur la sécurité des vaccins COVID-19 en France
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vaccinsecure784
*/

/* ── Reset & Variables ── */
:root {
  --bleu-minuit: #1B2A4A;
  --bleu-marine: #0F1D36;
  --vert-sauge: #7A9E7E;
  --vert-sauge-clair: #8FB393;
  --blanc-naturel: #F7F5F0;
  --terre-cuite: #C2703E;
  --terre-cuite-hover: #A85C30;
  --gris-ardoise: #9BA4B0;
  --gris-ardoise-clair: #D3D7DD;
  --texte-principal: #2C2C2C;
  --texte-clair: #F0EDE7;
  --ombre-douce: 0 2px 8px rgba(27,42,74,0.10);
  --ombre-carte: 0 4px 16px rgba(27,42,74,0.08);
  --rayon-btn: 4px;
  --transition-std: 0.25s ease;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--texte-principal);
  background: var(--blanc-naturel);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bleu-minuit); text-decoration: none; transition: color var(--transition-std); }
a:hover { color: var(--terre-cuite); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  color: var(--bleu-minuit);
  line-height: 1.3;
  margin-bottom: 0.6em;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1em; }

ul, ol { margin-bottom: 1em; padding-left: 1.4em; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
th, td { border: 1px solid var(--gris-ardoise-clair); padding: 0.6em 0.9em; text-align: left; }
th { background: var(--bleu-minuit); color: var(--texte-clair); font-weight: 600; }
td { background: #fff; }

/* ── Buttons ── */
.bouton-primaire,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  background: var(--bleu-minuit);
  color: var(--texte-clair);
  border: 2px solid var(--bleu-minuit);
  padding: 0.55em 1.6em;
  border-radius: var(--rayon-btn);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(27,42,74,0.15);
  transition: background var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
}
.bouton-primaire:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--bleu-marine);
  border-color: var(--vert-sauge);
  box-shadow: 0 0 0 2px rgba(122,158,126,0.35), 0 2px 8px rgba(27,42,74,0.2);
  color: var(--texte-clair);
}

.bouton-secondaire {
  display: inline-block;
  background: transparent;
  color: var(--vert-sauge);
  border: 2px solid var(--vert-sauge);
  padding: 0.55em 1.6em;
  border-radius: var(--rayon-btn);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-std), color var(--transition-std);
}
.bouton-secondaire:hover {
  background: var(--vert-sauge);
  color: #fff;
}

/* ── Layout ── */
.enveloppe-site {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 1.2em;
}

.contenu-large { width: 85%; margin: 0 auto; }

.disposition-avec-barre {
  display: flex;
  gap: 4%;
  align-items: flex-start;
}
.disposition-avec-barre .zone-principale { flex: 0 0 67%; min-width: 0; }
.disposition-avec-barre .barre-laterale { flex: 0 0 27%; min-width: 0; }

.contenu-sans-barre { width: 85%; margin: 0 auto; }

/* ── Header ── */
.entete-site {
  background: var(--bleu-minuit);
  padding: 0;
  position: relative;
  z-index: 100;
}
.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9em 0;
}
.marque-site {
  display: flex;
  align-items: center;
  gap: 0.8em;
}
.marque-site img,
.marque-site svg {
  height: 48px;
  width: auto;
}
.marque-site .nom-site {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.15rem;
  color: var(--texte-clair);
  font-weight: 700;
  line-height: 1.25;
  max-width: 320px;
}
.marque-site .nom-site a { color: var(--texte-clair); }
.marque-site .nom-site a:hover { color: var(--vert-sauge-clair); }

/* Navigation header */
.navigation-principale { position: relative; }
.navigation-principale ul {
  list-style: none;
  display: flex;
  gap: 0.3em;
  padding: 0;
  margin: 0;
}
.navigation-principale li { position: relative; }
.navigation-principale a {
  display: block;
  color: var(--texte-clair);
  padding: 0.5em 1em;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--rayon-btn);
  transition: background var(--transition-std), color var(--transition-std);
}
.navigation-principale a:hover,
.navigation-principale .current-menu-item > a {
  background: rgba(122,158,126,0.18);
  color: var(--vert-sauge-clair);
}

/* Hamburger */
.declencheur-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4em;
}
.declencheur-menu span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--texte-clair);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform var(--transition-std), opacity var(--transition-std);
}
.declencheur-menu.ouvert span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.declencheur-menu.ouvert span:nth-child(2) { opacity: 0; }
.declencheur-menu.ouvert span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* ── Breadcrumbs ── */
.fil-ariane {
  padding: 1em 0 0.6em;
  font-size: 0.88rem;
  color: var(--gris-ardoise);
}
.fil-ariane a { color: var(--bleu-minuit); }
.fil-ariane a:hover { color: var(--terre-cuite); }
.fil-ariane .separateur-ariane { margin: 0 0.4em; color: var(--gris-ardoise-clair); }

/* ── Expert block (front page) ── */
.bloc-expert {
  background: linear-gradient(135deg, var(--bleu-minuit), var(--bleu-marine));
  color: var(--texte-clair);
  border-radius: 6px;
  padding: 2.4em 2.2em;
  margin-bottom: 2.5em;
  display: flex;
  gap: 2em;
  align-items: center;
  box-shadow: var(--ombre-carte);
  position: relative;
  overflow: hidden;
}
.bloc-expert::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(122,158,126,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.bloc-expert .photo-expert {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--vert-sauge);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--gris-ardoise);
}
.bloc-expert h2 { color: var(--texte-clair); margin-bottom: 0.3em; font-size: 1.4rem; }
.bloc-expert p { color: rgba(240,237,231,0.88); margin-bottom: 0.4em; }
.bloc-expert .date-maj {
  font-size: 0.8rem;
  color: var(--vert-sauge-clair);
  border-top: 1px solid rgba(122,158,126,0.3);
  padding-top: 0.5em;
  margin-top: 0.6em;
}

/* ── Data info blocks (front page) ── */
.grille-donnees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4em;
  margin-bottom: 2.8em;
}
.carte-donnee {
  background: #fff;
  border: 1px solid var(--gris-ardoise-clair);
  border-radius: 6px;
  padding: 1.6em 1.4em;
  transition: box-shadow var(--transition-std), transform var(--transition-std);
  position: relative;
  overflow: hidden;
}
.carte-donnee:hover {
  box-shadow: 0 8px 28px rgba(27,42,74,0.10);
  transform: translateY(-2px);
  backdrop-filter: blur(4px);
}
.carte-donnee .icone-donnee {
  font-size: 2rem;
  margin-bottom: 0.5em;
  display: block;
}
.carte-donnee h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.carte-donnee p { font-size: 0.92rem; color: #555; margin-bottom: 0; }
.carte-donnee .badge-source {
  display: inline-block;
  background: var(--vert-sauge);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  margin-top: 0.7em;
  font-weight: 600;
}

/* ── Post cards ── */
.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6em;
  margin-bottom: 2em;
}
.carte-article {
  background: #fff;
  border: 1px solid var(--gris-ardoise-clair);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow var(--transition-std), transform var(--transition-std);
}
.carte-article:hover {
  box-shadow: var(--ombre-carte);
  transform: translateY(-3px);
}
.carte-article .vignette-article {
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: var(--gris-ardoise-clair);
}
.carte-article .corps-carte {
  padding: 1.2em 1.3em;
}
.carte-article .categorie-article {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terre-cuite);
  font-weight: 600;
  margin-bottom: 0.3em;
  display: block;
}
.carte-article h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4em;
  line-height: 1.35;
}
.carte-article h3 a { color: var(--bleu-minuit); }
.carte-article h3 a:hover { color: var(--terre-cuite); }
.carte-article .extrait-carte {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.7em;
}
.carte-article .meta-carte {
  font-size: 0.82rem;
  color: var(--gris-ardoise);
  display: flex;
  gap: 1em;
  align-items: center;
}

/* ── Single post ── */
.entete-article {
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 2px solid var(--gris-ardoise-clair);
}
.entete-article h1 { margin-bottom: 0.3em; }
.meta-article {
  font-size: 0.88rem;
  color: var(--gris-ardoise);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
}
.contenu-article { margin-bottom: 2em; }
.contenu-article p { margin-bottom: 1em; line-height: 1.78; }
.contenu-article h2 { margin-top: 1.6em; }
.contenu-article h3 { margin-top: 1.3em; }
.contenu-article blockquote {
  border-left: 4px solid var(--vert-sauge);
  padding: 0.8em 1.2em;
  margin: 1.2em 0;
  background: rgba(122,158,126,0.06);
  font-style: italic;
}
.contenu-article img { border-radius: 4px; margin: 1em 0; }

/* ── Sidebar ── */
.barre-laterale .widget {
  background: #fff;
  border: 1px solid var(--gris-ardoise-clair);
  border-radius: 6px;
  padding: 1.3em;
  margin-bottom: 1.4em;
}
.barre-laterale .widget-title,
.barre-laterale .widgettitle {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: var(--bleu-minuit);
  margin-bottom: 0.7em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--vert-sauge);
}
.barre-laterale .widget ul {
  list-style: none;
  padding: 0;
}
.barre-laterale .widget ul li {
  padding: 0.35em 0;
  border-bottom: 1px solid var(--gris-ardoise-clair);
}
.barre-laterale .widget ul li:last-child { border-bottom: none; }
.barre-laterale .widget ul li a { font-size: 0.92rem; }

/* ── Pagination ── */
.navigation-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35em;
  margin: 2em 0;
  flex-wrap: wrap;
}
.navigation-pages a,
.navigation-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6em;
  border: 1px solid var(--gris-ardoise-clair);
  border-radius: var(--rayon-btn);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background var(--transition-std), color var(--transition-std), border-color var(--transition-std);
}
.navigation-pages a {
  background: #fff;
  color: var(--bleu-minuit);
}
.navigation-pages a:hover {
  background: var(--bleu-minuit);
  color: var(--texte-clair);
  border-color: var(--bleu-minuit);
}
.navigation-pages span.current {
  background: var(--bleu-minuit);
  color: var(--texte-clair);
  border-color: var(--bleu-minuit);
  font-weight: 700;
}
.navigation-pages .dots {
  border: none;
  background: none;
  color: var(--gris-ardoise);
}

/* ── Footer ── */
.pied-site {
  background: var(--bleu-minuit);
  color: var(--texte-clair);
  margin-top: 3em;
  padding: 2.5em 0 0;
}
.grille-pied {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  padding-bottom: 2em;
}
.pied-site .widget {
  color: var(--texte-clair);
}
.pied-site .widget-title,
.pied-site .widgettitle {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: var(--vert-sauge-clair);
  margin-bottom: 0.7em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(155,164,176,0.3);
}
.pied-site .widget a { color: rgba(240,237,231,0.8); }
.pied-site .widget a:hover { color: var(--vert-sauge-clair); }
.pied-site .widget ul {
  list-style: none;
  padding: 0;
}
.pied-site .widget ul li {
  padding: 0.3em 0;
  border-bottom: 1px solid rgba(155,164,176,0.15);
}
.pied-site .widget ul li:last-child { border-bottom: none; }
.pied-site .widget p { color: rgba(240,237,231,0.78); font-size: 0.92rem; }

.bloc-methodologie {
  border-top: 1px solid rgba(155,164,176,0.25);
  padding: 1.3em 0;
  margin-top: 0.5em;
}
.bloc-methodologie h4 {
  color: var(--vert-sauge-clair);
  font-size: 0.95rem;
  margin-bottom: 0.6em;
}
.badge-fiabilite {
  display: inline-block;
  background: rgba(122,158,126,0.2);
  color: var(--vert-sauge-clair);
  font-size: 0.75rem;
  padding: 0.2em 0.65em;
  border-radius: 3px;
  margin-right: 0.5em;
  margin-bottom: 0.3em;
  font-weight: 600;
  border: 1px solid rgba(122,158,126,0.35);
}

.barre-copyright {
  border-top: 1px solid rgba(155,164,176,0.25);
  text-align: center;
  padding: 1.1em 0;
  font-size: 0.85rem;
  color: rgba(240,237,231,0.6);
}

/* ── Cookie notice ── */
.avis-cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bleu-marine);
  color: var(--texte-clair);
  padding: 1.1em 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
  z-index: 9999;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.25);
  font-size: 0.9rem;
}
.avis-cookies p { margin: 0; color: var(--texte-clair); }
.avis-cookies .bouton-accepter {
  background: var(--vert-sauge);
  color: #fff;
  border: none;
  padding: 0.5em 1.4em;
  border-radius: var(--rayon-btn);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: background var(--transition-std);
}
.avis-cookies .bouton-accepter:hover { background: var(--vert-sauge-clair); }
.avis-cookies.masque { display: none; }

/* ── Comments ── */
.zone-commentaires { margin-top: 2.5em; padding-top: 1.5em; border-top: 2px solid var(--gris-ardoise-clair); }
.zone-commentaires h2 { font-size: 1.4rem; margin-bottom: 1em; }
.liste-commentaires { list-style: none; padding: 0; }
.liste-commentaires .comment {
  padding: 1em 0;
  border-bottom: 1px solid var(--gris-ardoise-clair);
}
.liste-commentaires .comment-author { font-weight: 700; color: var(--bleu-minuit); }
.liste-commentaires .comment-meta { font-size: 0.82rem; color: var(--gris-ardoise); margin-bottom: 0.4em; }
.formulaire-commentaire label { display: block; margin-bottom: 0.3em; font-weight: 500; }
.formulaire-commentaire input[type="text"],
.formulaire-commentaire input[type="email"],
.formulaire-commentaire input[type="url"],
.formulaire-commentaire textarea {
  width: 100%;
  padding: 0.55em 0.8em;
  border: 1px solid var(--gris-ardoise-clair);
  border-radius: var(--rayon-btn);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.95rem;
  margin-bottom: 1em;
  transition: border-color var(--transition-std);
}
.formulaire-commentaire input:focus,
.formulaire-commentaire textarea:focus {
  outline: none;
  border-color: var(--vert-sauge);
}

/* ── Search form ── */
.formulaire-recherche {
  display: flex;
  gap: 0;
  max-width: 480px;
}
.formulaire-recherche input[type="search"] {
  flex: 1;
  padding: 0.55em 0.9em;
  border: 1px solid var(--gris-ardoise-clair);
  border-right: none;
  border-radius: var(--rayon-btn) 0 0 var(--rayon-btn);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.95rem;
}
.formulaire-recherche input[type="search"]:focus {
  outline: none;
  border-color: var(--vert-sauge);
}
.formulaire-recherche button {
  border-radius: 0 var(--rayon-btn) var(--rayon-btn) 0;
}

/* ── 404 ── */
.page-introuvable { text-align: center; padding: 3em 0; }
.page-introuvable h1 { font-size: 4rem; color: var(--terre-cuite); margin-bottom: 0.2em; }
.page-introuvable p { font-size: 1.1rem; margin-bottom: 1.5em; }

/* ── Section title ── */
.titre-section {
  font-size: 1.5rem;
  margin-bottom: 1.2em;
  padding-bottom: 0.4em;
  border-bottom: 3px solid var(--vert-sauge);
  display: inline-block;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .grille-donnees { grid-template-columns: repeat(2, 1fr); }
  .grille-pied { grid-template-columns: 1fr 1fr; }
  .disposition-avec-barre { flex-direction: column; }
  .disposition-avec-barre .zone-principale,
  .disposition-avec-barre .barre-laterale { flex: 0 0 100%; }
  .contenu-large, .contenu-sans-barre { width: 95%; }
  .bloc-expert { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  html { font-size: 15px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .grille-donnees { grid-template-columns: 1fr; }
  .grille-articles { grid-template-columns: 1fr; }
  .grille-pied { grid-template-columns: 1fr; }
  .entete-interieur { flex-wrap: wrap; }
  .declencheur-menu { display: block; }
  .navigation-principale ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: var(--bleu-marine);
    position: absolute;
    top: 100%;
    right: 0;
    border-radius: 0 0 6px 6px;
    padding: 0.5em 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    z-index: 200;
  }
  .navigation-principale ul.affiche { display: flex; }
  .navigation-principale a { padding: 0.7em 1.4em; }
  .avis-cookies { flex-direction: column; gap: 0.8em; text-align: center; }
  .contenu-large, .contenu-sans-barre { width: 100%; }
}