body {
	color: #657383;
	background-color: #FFFFFF;
}
.table {
	table-layout: fixed;
}
.CEN {
	text-align: center;
	line-height: normal
}
.DRO {
	text-align: right;
}
A {
	font-weight: 400;
	font-size: 16px;
	color: #F70D1A;
	text-decoration: none
}
A:hover {
	font-weight: 400;
	color: #F70D1A;
	text-decoration: none
}
.RO {
	font-weight: 400;
	font-size: 16px;
	color: #F70D1A
}
.GRA {
	font-weight: 600;
	font-size: 16px;
	color: #657383
}
.ACC {
	font-weight: 500;        /* un peu moins lourd que 600 */
	font-size: 1.1rem;       /* ≈ 17.5px → légèrement au-dessus du texte */
	line-height: 1.5;
	color: #657383;
	margin-bottom: 1.5rem;
}
/* Crédit photo */
.CRE {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem; /* ≈ 12px */
	color: #657383;
	letter-spacing: 0.01em;
}
.CRE a {
	color: #F70D1A;
	text-decoration: none;
	font-size: inherit;
}
/* Légende */
.LE {
	display: block;
	margin-top: 0.2rem;
	font-weight: 600;
	font-size: 0.9rem; /* ≈ 16px */
	line-height: 1.4;
	color: #657383;
}
/* Meta */
.meta {
	font-size: 0.8rem; /* ≈ 13px */
	color: #657383;
	letter-spacing: 0.01em;
	margin-bottom: 1rem;
	line-height: 1.4;
}
.meta a {
	color: #F70D1A;
	text-decoration: none;
	font-size: inherit;
}
P {
	margin-top: 0;
	margin-bottom: 16px
}
p.CEN.p-break {
  margin: 2.5rem 0 3.5rem 0;
}
/* BASE COMMUNE Tag et Label */
a.TAG,
.hp-label {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;   /* ≈ 13.5px */
	line-height: 1.2;
	padding: 3px 6px;
	margin: 3px 0;
	vertical-align: middle;
	letter-spacing: 0.01em;
}

a.TAG {
	color: #fff;
	background-color: #B5BFC7;  /* ← gris modernisé */
	text-decoration: none;
}
a.TAG:hover {
	background-color: #F70D1A;
}
.IL {
	line-height: 1.8rem;
}
/* Labels */
.hp-label {
	border-radius: 0px;
}
.hp-label-reportage {
	background: #F70D1A;
	color: #fff;
}
.hp-label-guide {
	background: #657383;
	color: #fff;
}
.hp-en-block {
	margin: 18px 0 18px 24px;
	padding-left: 18px;
	border-left: 3px solid #d8d8d8;
}
/* Items nouveaux */
ul {
	margin: 0 0 1.8rem 0;
	padding-left: 16px;
	list-style-type: disc;
}
ul li {
	margin: 0;
}
ul li + li {
	margin-top: 0;
}
p + ul {
	margin-top: -0.8rem;
}
.TI {
	font-size: 24px;
	font-weight: 600;
	color: #657383
}
.TIACT {
	font-size: 24px;
	font-weight: 600;
	color: #F70D1A
}
A.TI:hover {
	font-size: 24px;
	font-weight: 600;
	color: #657383;
	text-decoration: none
}
A.TIACT:hover {
	font-size: 24px;
	font-weight: 600;
	color: #F70D1A;
	text-decoration: none
}
.ACT {
	color: #F70D1A
}
A.FOO {
	font-size: 16px;
	font-weight: 400;
	color: #657383
}
A.FOO:hover {
	font-size: 16px;
	font-weight: 400;
	color: #F70D1A;
	text-decoration: none
}
.footer-bottom {
	font-size: 0.75rem;
	line-height: 1.4;
	color: #657383;
}
.footer-bottom a {
	font-size: inherit;
}
h1 {
	font-size: 32px;
	font-weight: 600;
	color: #657383;
	margin-top: 0;
	margin-bottom: 0.6rem;
	line-height: 1.25;
}
h2 {
	font-size: 22px;
	font-weight: 600;
	color: #657383;
	margin-top: 1.4rem;     /* ↓ légèrement réduit */
	margin-bottom: 1rem;    /* ↓ plus compact */
	line-height: 1.3;
	scroll-margin-top: 120px;
}
/* uniquement le vrai premier h2 de page */
.uk-container h2:first-child {
	margin-top: 0;
}
h3 {
	font-size: 19px;
	font-weight: 600;
	color: #657383;
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.35;
	letter-spacing: 0.01em;
}
.h3-cta {
	font-size: 20px;
	font-weight: 600;
	color: #F70D1A;
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.35;
}
.uk-width-expand > section hr + h3, .uk-width-expand > section hr + .h3-cta {
	margin-top: 0;
}
/* Navigation secondaire: sidebar + mobile + footer + offcanvas */
aside a, footer a, .uk-offcanvas-bar a {
	color: #657383;
}
aside a:hover, footer a:hover, .uk-offcanvas-bar a:hover {
	color: #F70D1A;
}
.sidebar-block .link-cta {
	color: #F70D1A;
}
.sidebar-block .link-cta:hover {
	color: #F70D1A;
}
hr {
	border: 0;
	height: 3px;
	background: #657383;
	margin: 1.2rem 0;
}
/* hr avec début rouge */
hr.hr-intra {
	border: 0;
	height: 3px;
	margin: 1.8rem 0 0.8rem 0;
	background: linear-gradient(to right, #F70D1A 60px, #657383 60px);
}
.hr-intra + p {
	margin-top: 2rem;
}
hr.hr-intra + h2 {
	margin-top: 0;
}
hr.hr-intra + div[uk-grid] {
	margin-top: 2.2rem;
}
/* Petit séparateur en l'absence d'h2 */
hr.hr-mini {
	border: none;
	border-top: 3px solid #F70D1A;
	width: 40px;
	margin: 2rem 0 2rem;
	height: 0;            /* IMPORTANT */
	background: none;     /* IMPORTANT */
}
/* Petit séparateur rouge après h2 ou h3 */
.hr-titre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 2.4rem;
	margin-bottom: 1.2rem;
}
.hr-titre::after {
	content: "";
	width: 55px;
	height: 3px;
	background: #F70D1A;
	flex: 0 0 auto;
	transform: translateY(3px); /* ajuste ici */
}
/* Marge après photo d'ouverture */
.hero-block {
	margin-bottom: 1.8rem;
}
/* Marge entre paragraphe et image */
p + p.CEN {
	margin-top: 1.8rem;
}
/* Marge après image */
p.CEN {
	margin-bottom: 1.8rem;
}
/* Marge entre paragraphe et div (grid) */
p + div[uk-grid], p + div[data-uk-grid] {
	margin-top: 1.6rem;
}
/* Marge entre tableau et paragraphe */
table + p, table + h3 {
	margin-top: 1.5rem;
}
/* Marge entre 2 colonnes et image */
.uk-grid + p.CEN {
	margin-top: 1.8rem;
}
/* Marge autour d'illustrations */
.hp-visual-block {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.hp-visual-block table + table {
	margin-top: 0.8rem;
}
/* Marge en fin d'article */
.uk-width-expand section + nav {
	margin-top: 48px !important;
}
/* Marge après A lire aussi */
.uk-width-expand > aside:last-of-type {
	margin-bottom: 32px;
}
/* Marge après Réagir */
.uk-width-expand {
	padding-bottom: 0;
}
/* Marge entre 2 sections de footer */
.footer-section + .footer-section {
	margin-top: 1.5rem;
}
/* Espace entre icônes RS */
.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.footer-quote {
	font-size: 14px;
	font-weight: 500;
	color: #657383;
	margin-bottom: 1.2rem;
	line-height: 1.5;
}
/* OffCanvas */
.uk-offcanvas-bar {
	background: #f8f8f8;
	color: #657383;
	border-left: 1px solid #e6e6e6;
}
.uk-offcanvas-bar .uk-offcanvas-close, .uk-offcanvas-bar .uk-close {
	color: #657383 !important;
}
.uk-offcanvas-bar .uk-offcanvas-close svg, .uk-offcanvas-bar .uk-close svg {
	color: #657383 !important;
	fill: #657383 !important;
}
/* liens menu */
.uk-offcanvas-bar .uk-nav-default > li > a {
	color: #657383;
}
.uk-offcanvas-bar .uk-nav-default > li > a:hover {
	color: #F70D1A;
}
/* intro */
.uk-offcanvas-bar .offcanvas-intro {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 1.2rem;
}
/* label */
.uk-offcanvas-bar .offcanvas-label {
	font-size: 15px;
	font-weight: 600;
	margin: 1.2rem 0 0.5rem;
}
/* listes recherche (reprend ton système ul global) */
.uk-offcanvas-bar .offcanvas-search {
	margin: 0 0 0.8rem 0;
	padding-left: 0;
}
/* espacement autour de la search box */
.uk-offcanvas-bar .hp-pse {
	margin: 0.4rem 0 0.8rem;
}
/* Offcanvas: désactive les puces rouges du menu principal */
.uk-offcanvas-bar .uk-nav.uk-nav-default li {
	padding-left: 0;
}
.uk-offcanvas-bar .uk-nav.uk-nav-default li::before {
	content: none;
}
/* titres sidebar&footer */
.sidebar-block {
	margin-bottom: 1.8rem;
}
/* sidebar */
aside ul, footer ul, .uk-offcanvas-bar ul {
	list-style: none;
	padding-left: 0;
}
aside ul li, footer ul li, .uk-offcanvas-bar ul li {
	position: relative;
	padding-left: 14px;
}
aside ul li::before, footer ul li::before, .uk-offcanvas-bar ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	background: #F70D1A;
	border-radius: 50%;
}
aside .offcanvas-search, .uk-offcanvas-bar .offcanvas-search {
	margin: 0 0 0.6rem 0;
	padding-left: 0;
}
aside .offcanvas-search + .hp-pse, .uk-offcanvas-bar .offcanvas-search + .hp-pse {
	margin-top: 0;
	margin-bottom: 0.6rem;
}
ins.adsbygoogle {
	background: transparent !important;
}
.map-responsive {
	overflow: hidden;
	padding-bottom: 100%;
	position: relative;
	height: 0
}
.map-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute
}
.video-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 0;
	position: relative;
	height: 0
}
.video-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute
}
.video-responsive-vertical {
	position: relative;
	width: 100%;
	max-width: 360px;
	margin: 1.5rem auto 0;
	overflow: hidden;
	background: #000;
	aspect-ratio: 9 / 16;
}
.video-responsive-vertical iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.instagram-media {
	width: 100% !important;
	max-width: 100% !important;
	display: flex;
	justify-content: center;
	align-items: center
}
/* ===== HP HEADER ===== */
.site-title {
	display: flex;
	align-items: center
}
.site-title .hp-brand {
	display: flex;
	align-items: center;
	gap: 8px;       /* espace image ↔ texte */
	text-decoration: none
}
/* Icône header */
.site-title .hp-logo {
	height: 28px;     /* desktop */
	width: auto;
	display: block
}
/* Colle Helico + passion (pas d'espace entre les 2) */
.site-title .hp-text {
	display: inline-flex;
	gap: 0
}
/* Texte (header uniquement) */
.site-title .TI, .site-title .TIACT {
	line-height: 1
}
/* Hover */
.site-title .hp-brand:hover {
	text-decoration: none;
}
.site-title .hp-brand:hover .TI {
	color: #657383;
}
.site-title .hp-brand:hover .TIACT {
	color: #F70D1A;
}
/* Mobile */
@media (max-width: 768px) {
.site-title .hp-logo {
	height: 24px
}
}
/* Compacter la hauteur réelle du bandeau UIkit */
.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle {
	min-height: 52px;
	height: 52px;
	line-height: 52px;
}
/* ===== HP - Google Programmable Search Engine ==== */
.hp-pse .gsc-control-cse {
	padding: 0 !important;
}
/* Structure générale */
.hp-pse table.gsc-search-box {
	width: 100% !important;
	border-collapse: collapse !important;
}
/* Colonne input */
.hp-pse td.gsc-input {
	width: 100% !important;
}
/* Colonne bouton: largeur réservée (évite le bouton minuscule) */
.hp-pse td.gsc-search-button {
	width: 60px !important;
	min-width: 60px !important;
	display: table-cell !important;
	vertical-align: middle !important;
}
/* Conteneur du champ: c’est souvent lui qui affiche la loupe */
.hp-pse .gsc-input-box, .hp-pse .gsc-input-box-hover, .hp-pse .gsc-input-box-focus {
	background: none !important;
	background-image: none !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}
/* La cellule interne de l’input (Google utilise gsib_a / gsib_b) */
.hp-pse .gsib_a {
	background: none !important;
	background-image: none !important;
}
/* Champ: on supprime toute déco “search icon” et on évite les overrides */
.hp-pse input.gsc-input {
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	line-height: normal !important;
}
/* Supprime le bouton clear interne */
.hp-pse .gsib_b {
	display: none !important;
}
/* Bouton: taille stable sans figer la hauteur */
.hp-pse .gsc-search-button-v2 {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 60px !important;      /* clé: évite le bouton “tout petit” */
	min-height: 34px !important;    /* pas un height: reste “fluide” */
	padding: 6px 0 !important;     /* donne du corps au bouton */
	border: 0 !important;
	background: #F70D1A !important;
	border-radius: 0 !important;
	cursor: pointer;
}
/* Icône loupe du bouton */
.hp-pse .gsc-search-button-v2 svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
}
.hp-pse .gsc-search-button-v2 svg * {
	fill: #ffffff !important;
}
/* Champ et bouton séparés (mobile & desktop) */
/* Pas d’arrondis côté champ */
.hp-pse .gsc-input-box, .hp-pse .gsc-input-box-hover, .hp-pse .gsc-input-box-focus, .hp-pse input.gsc-input {
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
/* Séparation visuelle entre champ et bouton */
.hp-pse td.gsc-search-button {
	padding-left: 6px !important;  /* espace entre les deux */
}
/* Chrome PC: l'input doit occuper tout l'espace restant */
/* On s'assure que la cellule input prend vraiment tout */
.hp-pse td.gsc-input {
	width: 100% !important;
}
/* Le conteneur interne ne doit pas réduire la largeur */
.hp-pse .gsc-input-box {
	width: 100% !important;
}
/* L'input lui-même */
.hp-pse input.gsc-input {
	width: 100% !important;
}
/* Fond blanc du champ (tous contextes)*/
.hp-pse .gsc-input-box, .hp-pse .gsc-input-box-hover, .hp-pse .gsc-input-box-focus {
	background: #ffffff !important;
	border: 1px solid #ccc !important;
	box-sizing: border-box !important;
}
.hp-pse input.gsc-input {
	background: transparent !important;
	color: #111 !important;
	margin: 0 !important;
}
.hp-pse input.gsc-input::placeholder {
 color: #666 !important;
}
/* Chrome PC: le champ doit occuper tout l’espace */
.hp-pse table.gsc-search-box {
	table-layout: fixed !important;
	width: 100% !important;
}
.hp-pse td.gsc-input {
	width: 100% !important;
}
.hp-pse .gsc-input-box, .hp-pse .gsib_a, .hp-pse input.gsc-input {
	width: 100% !important;
}
.hp-pse + p {
	margin-top: 0.6rem;
}

/* === Nouveaux tableaux === */
.table-hp {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}
.table-hp th, .table-hp td {
	border: 1px solid #E1E6EA;
	padding: 8px 10px;
}
.table-hp th {
	background-color: #f5f5f5;
	font-weight: 600;
	text-align: center;
}
.table-hp td {
	text-align: center;
}
.table-hp td.hp-label {
	text-align: left;
	font-weight: 600;
}
.table-hp tbody tr:hover td {
	background-color: #f6e2e2;
}
.table-hp tbody tr:hover td.hp-label {
	border-left: 3px solid #cc0000;
}
.table-hp {
	margin-bottom: 1.8rem;
}
/* === Images correction hauteur et reduction largeur === */
.CEN .js-lightbox {
	display: inline-block;
	line-height: 0;
}
.CEN img {
	max-width: 100%;
	height: auto !important;
	aspect-ratio: auto !important;
}
.CEN img.img-portrait {
	max-width: 360px !important;
	height: auto !important;
	aspect-ratio: auto !important;
}
/* === Encart === */
.encart-box {
	margin: 1.8rem 0 2rem;
	padding: 1rem 1.2rem;
	border-left: 4px solid #F70D1A;
	background: #f5f5f5;
}
.encart-label {
	font-size: 20px;      /* ≈ 12px → cohérent avec .CRE */
	font-weight: 600;
	letter-spacing: 0.04em;  /* ↓ plus subtil */
	color: #F70D1A;
	margin-bottom: 0.5rem;
	line-height: 1.35;
}
.encart-box p {
	margin: 0;
}
/* === Trait rouge vertical sur vignette === */
.hp-vignette {
	position: relative;
	display: inline-block;
}
.hp-vignette::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #F70D1A;
}
.hp-vignette img {
	display: block;
}
/* === espacement entre 2 vignettes d'un même lien === */
/* uniquement dans la colonne image des grilles */
/* Espacement entre vignettes uniquement dans les blocs <article class="uk-margin-medium-bottom"> */
article.uk-margin-medium-bottom > .uk-grid-small > div:first-child a {
	display: block;
	line-height: 0;
}
article.uk-margin-medium-bottom > .uk-grid-small > div:first-child a + a {
	margin-top: 0.8rem;
}
article.uk-margin-medium-bottom > .uk-grid-small > div:first-child a > img {
	display: block;
	margin-bottom: 0.8rem;
}
article.uk-margin-medium-bottom > .uk-grid-small > div:first-child a > img:last-of-type {
	margin-bottom: 0;
}
/* === Pas d'espace sous 2 colonnes et légende === */
div[uk-grid] + p.CEN {
	margin-top: 0rem;
}
/* === Vignette en 3 2 === */
.thumb-32 {
	width: 100%;
	aspect-ratio: 3 / 2;
	display: block;
	overflow: hidden;
}
.thumb-32 img {
	width: 100%;
	height: 100%;
	display: block;
}
.thumb-32.contain {
  background: #e1e5ea;
}
/* Variante: image entière */
.thumb-32.contain img {
	object-fit: contain;
}
/* Variante: recadrage */
.thumb-32.cover img {
	object-fit: cover;
	object-position: center;
}
a.thumb-32 {
	text-decoration: none;
}
/* === Trait rouge horizontal sur vignette === */
.hp-vignette-top {
  position: relative;
  display: inline-block; /* important pour coller à la largeur de l’image */
  padding-top: 3px;
}
.hp-vignette-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #F70D1A;
}
.hp-vignette-top img {
  display: block;
}
/* === Grille pour mise en page === */
.hp-grid {
	display: grid;
	gap: 20px;
	text-align: center;
	margin: 1.8rem 0;
}
/* === Marge basse du dernier image-texte === */
.hp-list article {
	margin-bottom: 1.4rem !important; /* au lieu de ~1.8rem UIKit */
}
.hp-list article:last-child {
	margin-bottom: 0.6rem !important;
}
.hp-more-link {
	margin: 0 0 2rem 0;
}