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
}
a.TAG {
  display: inline-block;
  font-size: 0.85rem;         /* ≈ 13.5px */
  font-weight: 400;
  color: #fff;
  background-color: #B5BFC7;  /* ← gris modernisé */
  padding: 2px 6px;
  line-height: 1.3;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

a.TAG:hover {
  background-color: #F70D1A;
}
.IL {
	line-height: 36px
}
/* 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: 2.2rem;     /* ↓ 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 */
}
/* Séparateur inclus dans h2 avec début rouge */
h2.hr-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
}
h2.hr-titre::after {
  content: "";
  flex-grow: 1;
  height: 3px;
  background: linear-gradient(to right, #F70D1A 60px, #657383 60px);
}
/* 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;
}
/* 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;
}

/* === 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;
  background: #dfe3e8;
   display: block;
  overflow: hidden;
}
.thumb-32 img {
  width: 100%;
  height: 100%;
  display: block;
}
/* 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;
}
.hp-vignette-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #F70D1A;
}
.hp-vignette-top img {
  display: block;
}