/* ============================================================================
   Thème "Europe" pour SPIP 4.4.13
   Surcharge propre, posée dans squelettes/css/perso.css
   Chargée automatiquement par squelettes-dist/inclure/head.html via #CHEMIN.

   Couleurs officielles (sources : guide graphique de l'emblème européen,
   Commission européenne, european-union.europa.eu) :
     - Reflex Blue  : #003399  (RVB 0/51/153)
     - Pantone Yellow : #FFCC00 (RVB 255/204/0)

   Le drapeau européen est affiché à 1200×800 (rapport 3:2 officiel, charte
   graphique de l'emblème européen), centré et fixe. Le pourtour de la
   fenêtre est rempli avec le même bleu Reflex (#003399) que le drapeau,
   ce qui masque visuellement les bords du SVG : on a l'impression d'un
   fond entièrement bleu avec les douze étoiles d'or au centre.
   Pour préserver la lisibilité du texte par-dessus, le conteneur principal
   .main reçoit un fond blanc translucide.
   ============================================================================ */

:root {
	--eu-bleu:        #003399;
	--eu-bleu-fonce:  #002266;
	--eu-bleu-clair:  #4d6dbf;
	--eu-jaune:       #FFCC00;
	--eu-jaune-clair: #fff3b0;
	--eu-texte:       #1a1a1a;
	--eu-fond:        #ffffff;
	--eu-bordure:     #d9dee8;
}

/* ----------- Fond bleu Reflex sur toute la fenêtre -----------
   Identique au bleu intérieur du SVG, donc les bords du drapeau
   se fondent dans le fond. */
html, body {
	background-color: var(--eu-bleu);
	color: var(--eu-texte);
}

/* ----------- Drapeau européen 1200×800 centré, opacité pleine ----------- */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("../img/drapeau-europeen.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1200px 800px;
	background-attachment: fixed;
	opacity: 1;
}

/* ----------- Conteneur principal : bleu Reflex semi-transparent -----------
   Pour permettre le texte jaune sur fond suffisamment foncé (contraste
   WCAG AA ≈ 7:1 entre #FFCC00 et #003399). */
.main,
main[role="main"],
#contenu,
.contenu,
.content,
.wrapper {
	background-color: rgba(0, 51, 153, 0.85);
	border-radius: 4px;
	padding: 1.5em;
	color: var(--eu-jaune);
}

/* ----------- Texte par défaut en jaune Pantone partout -----------
   Couvre paragraphes, listes, cellules de tableau, abbr, dates, breadcrumb,
   titres d'article, etc. Sans !important : un style en ligne ou une classe
   du plugin couleurs_spip prendra le dessus naturellement. */
body,
p, span, li, td, th, dt, dd, label, abbr, time,
blockquote, figcaption, summary, details,
article, .article, .texte, .cartouche,
.arbo, .info-publi, .colophon, .surlignable,
.entry-title, .vcard, .auteurs {
	color: var(--eu-jaune);
}

/* ----------- Code, blocs préformatés, tableaux : inversion lisible -----------
   Texte bleu foncé sur fond jaune clair pour rester confortable à lire. */
code, pre,
.spip_code, .spip_code_inline,
.spip_cadre {
	background-color: var(--eu-jaune-clair);
	color: var(--eu-bleu-fonce);
	padding: 0.1em 0.4em;
	border-radius: 3px;
	border: 1px solid var(--eu-jaune);
	font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

pre code,
pre.spip_code {
	display: block;
	padding: 0.75em;
	white-space: pre-wrap;
	overflow-x: auto;
}

table.spip {
	border-collapse: collapse;
	margin: 1em 0;
	background-color: rgba(255, 243, 176, 0.95);
	color: var(--eu-bleu-fonce);
}

table.spip th,
table.spip td {
	padding: 0.5em 0.75em;
	border: 1px solid var(--eu-bleu);
}

table.spip th,
table.spip tr.row_first {
	background-color: var(--eu-bleu);
	color: var(--eu-jaune);
}

/* ----------- Typographie & liens -----------
   Couleur de base des liens : NOIR. Contraste maximal sur tout fond,
   sauf en-tête/menu/pied qui ont leurs propres règles de couleur. */
a,
a:link,
a:visited {
	color: #000000;
	text-decoration-color: var(--eu-jaune);
	text-decoration-thickness: 2px;
}

a:hover,
a:focus,
a:active {
	color: #000000;
	background-color: var(--eu-jaune);
	text-decoration-color: #000000;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--eu-jaune);
}

h1, .h1 {
	border-bottom: 3px solid var(--eu-jaune);
	padding-bottom: 0.25em;
}

h2, .h2 {
	border-left: 4px solid var(--eu-jaune);
	padding-left: 0.5em;
}

/* ----------- Bandeau d'en-tête (header.html du dist) -----------
   Le squelette dist applique class="header" (et non "entete"). On couvre
   les deux conventions historiques + role="banner". */
#entete,
.page header[role="banner"],
.page .header,
header.header,
header.entete,
#header {
	background-color: var(--eu-bleu);
	color: var(--eu-jaune);
	border-bottom: 4px solid var(--eu-jaune);
	padding: 1em 1.5em;
}

#entete a,
.page header[role="banner"] a,
.page .header a,
header.header a,
header.entete a,
#header a,
.spip_logo_site a {
	color: var(--eu-jaune);
	text-decoration: none;
}

#entete a:hover,
.page header[role="banner"] a:hover,
.page .header a:hover,
.spip_logo_site a:hover {
	color: #ffffff;
	background-color: transparent;
}

/* ----------- Navigation principale -----------
   Couleurs du drapeau européen au repos : fond bleu Reflex, texte jaune
   Pantone, bordure jaune. Visibles SANS survol. Au survol : inversion
   (fond jaune, texte bleu). Sélecteurs élargis pour couvrir aussi les
   menus de rub