.fa-facebook:before {
    content: "\f39e";
}

.mod-header-logo{
max-width: inherit;
}

.social-link.newsletter {
    background-color: white;
    border-radius: 50%; /* rend le bouton parfaitement rond */
    height: 40px;
    width: 40px;
    padding: 5px;
    text-align: center;
    display: inline-block;
    transition: all 73ms ease-in-out;
}
.social-link.newsletter .social-link:hover [class*=icon-] {
    color: #569ab8 !important;
}
.social-link.newsletter .fa-envelope-open-text {
    font-size: 20px;
    color: #1a3663;
    line-height: 30px; /* centrage vertical */
}

.event-jumbotron__contact-wrapper .email a{
color: #ffffff;
}
#T7lby8cxiGRLqZ0DyvdlZmhw > div > div > div > ul > li.header-ext.header-ext-login > a {
font-size:0px;
}
#T7lby8cxiGRLqZ0DyvdlZmhw > div > div > div > ul > li.header-ext.header-ext-login > a:before {
content:"Espace membre";
font-size:18px;
margin-left:-3px;
}

.image-box {
  float: right;              /* place la box à droite du texte */
  margin-left: 15px;         /* espace entre l’image et le texte */
  margin-bottom: 15px;
  max-width: 400px;          /* largeur maximale */
  max-height: 300px;         /* hauteur maximale */
  overflow: hidden;          /* cache ce qui dépasse */
}

.image-box img {
  width: 100%;               /* l’image s’adapte à la largeur de la box */
  height: auto;              /* conserve les proportions */
  display: block;
  object-fit: contain;       /* ajuste l’image sans la déformer */
  max-height: 300px;         /* limite la hauteur */
}
.contact-box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.contact-columns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* permet de passer en ligne suivante si pas assez de place */
}

.contact-col {
  flex: 1;
  min-width: 250px; /* largeur minimale pour forcer le passage en colonne sur mobile */
}

.contact-col img {
  width: 20px;
  height: auto;
  margin-right: 5px;
  vertical-align: middle;
}

.contact-col h5 {
  color: #1a3663;
  margin-top: 10px;
}
.contact-item {
  display: flex;              /* aligne image + texte sur la même ligne */
  align-items: center;
  gap: 8px;                   /* espace entre l’icône et le texte */
  word-break: break-word;     /* coupe le texte si trop long */
  overflow-wrap: anywhere;    /* permet de passer à la ligne */
}

.contact-item img {
  width: 20px;
  height: auto;
  flex-shrink: 0;             /* empêche l’icône de se réduire */
}

.contact-item a, 
.contact-item span {
  flex: 1;                    /* occupe l’espace restant */
}

<style>
p { text-indent: 2em; }
</style>

.shadow-in .mod-banner__img {
    position: relative;
}

.shadow-in .mod-banner__img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35); /* ajuste l’opacité ici */
    z-index: 1;
}

/* Pour que le texte reste visible */
.shadow-in .mod-banner__content {
    position: relative;
    z-index: 2;
}


|!!!!! 404 !!!!! |
:root{
  --primary: #1a3663;
  --secondary: #569AB8;
  --accent: #0ca3a3;
  --white: #ffffff;
  --icon-light: rgba(86,154,184,0.22); /* icônes plus claires */
}

/* Conteneur central */
.c{
  text-align: center;
  position: relative;
  width: 90%;
  max-width: 980px;
  margin: 80px auto;
  z-index: 3;
}

/* Ligne séparatrice plus fine */
.hr-404{
  border: none;
  border-top: 2px solid var(--primary);
  width: 420px;
  margin: 0.6rem auto;
  height: 0;
  position: relative;
}

.hr-404::after{
  content: "";
  position: relative;
  top: -0.85em;
  font-size: 1.2em;
  color: var(--white);
  background: var(--white);
  padding: 0 0.18em;
}

/* Zone des icônes (pistes invisibles) */
#trees{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Icônes communes */
.tree{
  position: absolute;
  color: var(--icon-light-1);
  opacity: 0.9;
  transform-origin: center;
  will-change: transform, opacity, left, top;
  pointer-events: none;
  left: 110%;
}

/* Pistes invisibles (valeurs top) */
.piste-1 { top: 6%; }
.piste-2 { top: 18%; }
.piste-3 { top: 30%; }
.piste-4 { top: 44%; }
.piste-5 { top: 58%; }

/* Tailles variées et teintes plus claires */
.size-xs { font-size: 48px; color: rgba(86,154,184,0.12); opacity: .55; }
.size-sm { font-size: 72px; color: rgba(86,154,184,0.14); opacity: .62; }
.size-md { font-size: 96px; color: rgba(86,154,184,0.18); opacity: .74; }
.size-lg { font-size: 120px; color: rgba(12,163,163,0.20); opacity: .86; }
.size-xl { font-size: 150px; color: rgba(26,54,99,0.22); opacity: .92; }

/* Animation : translation horizontale + léger flottement vertical */
@keyframes slideAcross {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateX(-120vw) translateY(-8px) rotate(-1.5deg); }
  92%  { opacity: 1; }
  100% { transform: translateX(-240vw) translateY(0) rotate(1.5deg); opacity: 0; }
}

/* Appliquer animation avec durées et délais différents */
.x1  { animation: slideAcross 22s linear infinite; animation-delay: 0s; left:100%; }
.x1_5{ animation: slideAcross 26s linear infinite; animation-delay: 3s; left:120%; }
.x2  { animation: slideAcross 30s linear infinite; animation-delay: 6s; left:140%; }
.x3  { animation: slideAcross 24s linear infinite; animation-delay: 1.5s; left:160%; }
.x4  { animation: slideAcross 28s linear infinite; animation-delay: 4.2s; left:180%; }
.x5  { animation: slideAcross 32s linear infinite; animation-delay: 8s; left:200%; }

/* Optionnel : léger bob vertical superposé (ajouter classe bob) */
@keyframes bob { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }
.tree.bob { animation-name: slideAcross, bob; animation-duration: var(--d1, 24s), 4s; animation-iteration-count: infinite, infinite; animation-timing-function: linear, ease-in-out; }

/* Responsive : désactiver animations sur petits écrans pour lisibilité */
@media (max-width: 768px){
  ._404{ font-size: 110px; letter-spacing: 8px; }
  #trees{ display: block; top: 0; height: 220px; }
  .tree { animation: none !important; left: auto !important; position: absolute; opacity: .7; }
  .x1 { left: 6%; top: 8%; font-size: 64px; }
  .x1_5 { left: 22%; top: 14%; font-size: 48px; }
  .x2 { left: 40%; top: 6%; font-size: 72px; }
  .x3 { left: 60%; top: 12%; font-size: 68px; }
  .x4 { left: 78%; top: 8%; font-size: 56px; }
  .x5 { left: 88%; top: 16%; font-size: 64px; }
}

/* Très petits écrans : masquer icônes si nécessaire */
@media (max-width: 420px){
  .tree { display: none; }
}