:root{
  --brand: #fc761f;      /* orange */
  --brand2:#26a2d6;      /* bleu */
  --dark:  #0b1220;      /* fond sombre élégant */
  --soft:  #fff;      /* fond clair */
}

body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #111;
  background: var(--soft);
}

a{ color: var(--brand); }
a:hover{ color: #d61f44; }

.navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}

.hero{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.hero-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.badge-brand{
  background: var(--brand);
}

.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}
.btn-brand:hover{ filter: brightness(.95); }

.card{
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(12,18,32,.06);
}

.footer{
  background: var(--dark);
  color: rgba(255,255,255,.86);
}
.footer a{ color: #fff; }

.spip p{
  margin-bottom: 1.2em;
}

.spip h2{
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: .6em;
}

.spip blockquote{
  border-left: 4px solid var(--brand);
  padding-left: 1rem;
  font-style: italic;
  color: #444;
}

.hero-photo{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 1200px;
  display: flex;
  align-items: center;
}

.hero-overlay{
  position: absolute;
  inset: 0;
}

.hero-photo .card{
  border: 0;
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

/* SURTITRE */
.surtitre{
  display: inline-block;      /* au lieu de inline */
  background-color: #7ed95a;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;

  padding: .45rem .75rem;     /* un peu moins haut */
  margin: 0 0 .75rem 0;       /* espace net avant le titre */
  line-height: 1;             /* évite les effets de hauteur */
  border-radius: 10px;        /* optionnel, plus propre */
}


/* SOUSTITRE */
.soustitre{
  display: inline-block;      /* même logique que le surtitre */
  background: #000;
  color: #fff;

  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;

  padding: .5rem .75rem;
  margin: .25rem 0 0 0;       /* bien séparé du titre */
  border-radius: 10px;
}


.article-logo img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Variante : logo centré (recommandé pour campagne) */
.article-logo{
  text-align: center;
}

/* Empêche les images/medias du texte SPIP de sortir du cadre */
.spip img,
.spip figure,
.spip video,
.spip iframe,
.spip embed,
.spip object {
  max-width: 100%;
  height: auto;
}

/* Si une image a un width/height en attribut HTML, ça aide aussi */
.spip img {
  display: block;
}

.spip .spip_documents_left,
.spip .spip_documents_right,
.spip .spip_documents_center {
  max-width: 100%;
}

.spip .spip_documents_left img,
.spip .spip_documents_right img,
.spip .spip_documents_center img {
  max-width: 100%;
  height: auto;
}