/* === BANDEAU COOKIES === */
.eu-cookie-compliance-content {
    max-width: 100%;}

.sliding-popup-bottom, .sliding-popup-top {
    z-index: 2400000000;}

/* === POLICES PERSONNALISÉES === */
@font-face {
  font-family: 'BlackoutOldSkull';
  src: url('../fonts/blackoutoldskull-2vrmk-webfont.woff2') format('woff2'),
       url('../fonts/blackoutoldskull-2vrmk-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
    font-family: 'WsParadose';
    src: url('../fonts/Ws Paradose.woff') format('woff'), 
         url('../fonts/Ws Paradose.woff2') format('woff2'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


@font-face {
  font-family: 'ArbutusSlab';
  src: url('../fonts/arbutusslab-regular-webfont.woff2') format('woff2'),
       url('../fonts/arbutusslab-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-hyperlegible-regular-102-webfont.woff2') format('woff2'),
       url('../fonts/atkinson-hyperlegible-regular-102-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


body.path-frontpage {
  overflow-x: hidden;
}

/* === TITRE DU SITE === */
.navbar-brand {
  margin-right: 2rem;
  padding-left: 1rem;
}

.navbar-brand .site-title {
   font-family: "WsParadose", Georgia;
  font-size: 2.2rem;
  letter-spacing: 0px;
  text-transform: capitalize;
	font-weight: normal;
}

/* === NAVBAR FIXE ET EFFET SCROLL === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Décalage du contenu à cause de la navbar fixe */
body {
  padding-top: 70px;
}

/* === STRUCTURE DE LA NAVBAR === */
.navbar .container-fluid {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.navbar-collapse {
  justify-content: flex-start !important;
}

/* === LIENS DE NAVIGATION === */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar-nav .nav-link {
  font-family: 'ArbutusSlab', serif;
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 1.8rem; /* espace pour ligne.svg */
	  line-height: 1; /* Évite les décalages liés à la hauteur de ligne */
  padding-top: 1.7rem;
  display: flex;
  align-items: center;
}

.path-frontpage #block-lesmotsperdus-test h2 {
  display: none;
}

/* Bloc HERO avec carrousel en background */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  animation: heroBackgroundSlider 18s infinite;
	 margin-top: -70px; /* Ajuste selon la hauteur réelle de ta navbar */
  z-index: 0;
}

/* Conteneur du contenu centré */
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.4); /* assombrit un peu le fond pour le texte */
}

/* Titre */
.hero-carousel h1 {
  font-family: "WsParadose", Georgia;
  font-size: 9rem;
  text-transform: capitalize;
}

/* Description */
.hero-description {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
text-transform: uppercase;
}

.hero-carrousel {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.region.region-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Lien */
.hero-link {
  font-family: 'ArbutusSlab', serif;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  border: 1px solid white;
  padding: 0.6rem 1.2rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-link:hover {
  background-color: white;
  color: black;
}

/* Animation des fonds */
@keyframes heroBackgroundSlider {
  0%    { background-image: url('../img/home1.webp'); }
  33%   { background-image: url('../img/home2.webp'); }
  66%   { background-image: url('../img/home3.webp'); }
  100%  { background-image: url('../img/home1.webp'); }
}

/* Conteneur du lien avec texte + plume */
.hero-link-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  text-decoration: none;
 font-family: "WsParadose", Georgia;
  font-size: 2.5rem;
  color: #fff;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "kern" 0;
}

/* Texte du lien avec ligne animée au hover */
.hero-link-text {
  position: relative;
  display: inline-block;
}

.hero-link-text::after {
  content: '';
  position: absolute;
	
  left: 50%;
  bottom: -20px;
  width: 100%;         /* largeur du parent */
  height: 30px;        /* hauteur fixe, ajuste selon l’épaisseur de ton SVG */
  transform: translateX(-50%);
  background-image: url('/themes/lesmotsperdus/img/ligne2.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* ou cover, selon rendu voulu */
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}



.hero-link-wrap:hover .hero-link-text::after {
  opacity: 1;
}

  
.custom-card {
  position: relative;
  height: 450px;
  background-size: cover;
  background-position: 20% 20%;
  filter: grayscale(100%);
  transition: transform 0.5s ease, filter 0.5s ease;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.custom-card:hover {
  transform: scale(1.03) rotate(-1.2deg);
  filter: grayscale(0%);
  z-index: 2;
}

.custom-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: white;
  font-family: 'Dancing Script', cursive;
  transition: background 0.3s ease;
}

.custom-overlay h3 {
  font-family: "WsParadose", Georgia;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #fff;
 text-transform: uppercase;
}

.custom-overlay p {
  font-size: 1.1rem;
  margin-bottom: 0;
  font-family: "WsParadose", Georgia;
	font-weight: 400;
}

/* Conteneur pleine largeur, sans padding parasite */
.cartes-postales-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Suppression des marges internes sur la ligne Bootstrap */
.cartes-postales-wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.vuecartesaccueil {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #fff;
  text-transform: uppercase;
}

/* Effet de survol */
.cartes-postales-slider {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
  background-repeat: no-repeat;
}

.cartes-postales-slider img {
  border-radius: 0px;
	transition: filter 0.2s ease-in;
}

/* Effet au survol : seulement mouvement */
.cartes-postales-slider:hover {
  z-index: 2;
	border: none;
}

.cartes-postales-slider .field-content:hover img {
    filter: grayscale(80%) sepia(50%) contrast(120%); 

}

.hero-carousel-sub {
  font-family: "WsParadose", Georgia;
  font-size: 3.5rem;
  text-transform: capitalize;
  line-height: 0.5;
  text-align: center;
  margin-top: 6rem;
}

/* ---------- Titres des cartes postales ---------- */
h4.field-content.viewstitle1 {
  font-family: "WsParadose", Georgia;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
margin-top: 1rem;
  color: #f5cb4e;
  text-transform: capitalize;
  text-align: center;                /* centre le texte dans le bloc */
}



/* Si le titre est un lien, on garde le même rendu et on facilite le centrage */
h4.field-content.viewstitle1 a {
  color: inherit;        /* hérite du blanc défini plus haut */
  text-decoration: none; /* enlève le soulignement (optionnel) */
  display: inline-block; /* garantit la prise en compte du centrage */
}


/* ---------- Ligne Période + Pays / Ville / Région ---------- */
.views-field-field-periode,
.views-field-field-pays-ville-ou-region {
  display: flex;             /* place label + valeur sur une même ligne */
  justify-content: center;   /* centre horizontalement l’ensemble */
  align-items: center;       /* centre verticalement le texte */
  gap: .25rem;               /* petit espace entre label et valeur */
  margin-bottom: 0px;
  font-size: 1.1rem;          /* taille plus petite que le titre */
  color: #fff;                /* texte blanc comme les titres */
  text-align: center;         /* au cas où le flex passe en colonne */
}

/* Optionnel : s’assure que les labels gardent l’espace après “ : ” */
.views-label-field-periode,
.views-label-field-pays-ville-ou-region {
  margin-right: .25rem;
}

.views-field.views-field-field-nombre-de-vues
{
  display: flex;             /* place label + valeur sur une même ligne */
  justify-content: center;   /* centre horizontalement l’ensemble */
  align-items: center;       /* centre verticalement le texte */
  gap: .25rem;               /* petit espace entre label et valeur */
  
  font-family: 'ArbutusSlab', serif; /* même typo que les H4 */
  font-size: 1.1rem;          /* taille plus petite que le titre */
  color: #fff;                /* texte blanc comme les titres */
  text-align: center;         /* au cas où le flex passe en colonne */
  margin-bottom: 10px;
}

.views-field-field-evenement {
  display: flex;
  justify-content: center;
  text-align: center;
	 gap: .25rem;               /* petit espace entre label et valeur */  
  font-family: 'ArbutusSlab', serif; /* même typo que les H4 */
  font-size: 1.1rem;          /* taille plus petite que le titre */
  color: #fff;                /* texte blanc comme les titres */       
  margin-bottom: 10px;
}



/* ---------- Liens des blocs cartes postales ---------- */
.cartes-postales-slider a {          /* cible tous les <a> du bloc */
  color: #fff;                       /* texte blanc */
  text-decoration: none;             /* enlève le soulignement natif */
  position: relative;                /* nécessaire pour le ::after */
  display: inline-block;             /* + fiable pour le centrage / survol */
  font-family: "WsParadose", Georgia;
}

/* ---------- Liens dans "Période" et "Pays, ville ou région" ---------- */
.views-field-field-periode .field-content > a,
.views-field-field-pays-ville-ou-region .field-content > a {
color: #f5cb4e;
    text-decoration: none;
    position: relative;
    display: inline;
    font-family: "WsParadose", Georgia;
}



/* Affichage uniquement au survol (ou focus clavier) */
.views-field-field-periode .field-content > a:hover::after,
.views-field-field-periode .field-content > a:focus-visible::after,
.views-field-field-pays-ville-ou-region .field-content > a:hover::after,
.views-field-field-pays-ville-ou-region .field-content > a:focus-visible::after {
  opacity: 1;
}


div#block-lesmotsperdus-3blocsdereassurancepourlaccueil, div#views-bootstrap-vue-pour-les-cartes-postales-block-1, div#views-bootstrap-vue-pour-les-cartes-postales-block-2, div#views-bootstrap-vue-pour-les-cartes-postales-block-3
 {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
}

h2.hero-carousel-sub.nbrevues {
    margin-top: 4rem;
}

.enveloppe-bloc {
  background-image: url('/themes/lesmotsperdus/img/envel.png');
  background-size: contain; /* respect proportions exactes */
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  min-height: 564px; /* hauteur réelle de ton image */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem;

  transform: rotate(-2deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.enveloppe-bloc:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}


/* Effet flottement carte */
.carte-flottante {
  transform: rotate(-2deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.carte-flottante:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Police manuscrite */
.font-script {
 font-family: "WsParadose", Georgia;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
color: #333333;
}


@keyframes effet-encre {
  0%, 100% {
    text-shadow: 0 0 0 rgba(51,51,51,0.5);
    opacity: 1;
  }
  50% {
    text-shadow:
      2px 2px 3px rgba(51,51,51,0.3),
      4px 4px 4px rgba(51,51,51,0.2),
      6px 6px 6px rgba(51,51,51,0.1);
    opacity: 0.85;
    transform: scale(1.02);
  }
}


.enveloppe-link {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-family: "WsParadose", Georgia;
  font-size: 2.3rem;
  color: #333333;
  text-decoration: none;
  outline: none;
  animation: effet-encre 4s infinite alternate ease-in-out;
  transition: color 0.3s ease;
}

.enveloppe-link:hover,
.enveloppe-link:focus {
  color: #fff;
}



.titre-vertical {
position: absolute;
    top: 80%;
    left: 11rem;
    transform: rotate(268deg) translateY(-50%);
    transform-origin: left top;
    font-size: 4.5rem;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}



/* Flèche : position absolue, masquée par défaut */
.arrow-wrapper {
  position: absolute;
  top: auto;
  left: 53%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.6s ease-out;
  z-index: 5;
  pointer-events: none;
}

/* Apparition de la flèche (déclenchée par JS avec .visible) */
.arrow-wrapper.visible {
  opacity: 1;
}

/* Conteneur animé à l'intérieur : glisse à l'entrée puis flotte */
.arrow-inner {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-150%); /* ← la flèche est hors de l’écran */
  will-change: transform, opacity;
}

.arrow-inner.arrow-animate {
  visibility: visible;
  animation: arrowEntrance 0.8s ease-out forwards, arrowFloat 3.5s ease-in-out infinite;
  animation-delay: 0s, 0.8s;
}


/* Image de la flèche */
.img-arrow {
  width: 230px;
  height: auto;
  transition: transform 0.4s ease;
}

/* Effet survol : zoom subtil */
.arrow-wrapper:hover .img-arrow {
  transform: rotate(-2deg) scale(1.03);
}

/* Entrée fluide de la flèche depuis la gauche */
@keyframes arrowEntrance {
  0% {
    opacity: 0;
    transform: translateX(-80%) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateX(-20%) rotate(-2deg);
  }
}

/* Flottement léger après l'entrée */
@keyframes arrowFloat {
  0% {
    transform: translateX(-20%) rotate(-2deg);
  }
  50% {
    transform: translateX(-23%) rotate(-2.5deg);
  }
  100% {
    transform: translateX(-20%) rotate(-2deg);
  }
}



.hero-carousel-sub::after {
  content: "";
  display: block;
  margin: 1rem auto 0 auto;
  max-width: 600px;
  height: auto;
  aspect-ratio: 10 / 1;
  background-image: url('/themes/lesmotsperdus/img/divider.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
}

/* Cas spécifique : heading dans colonne étroite */
.sidebar .hero-carousel-sub::after,
.col-3 .hero-carousel-sub::after,
.col-md-4 .hero-carousel-sub::after {
  width: 80%;  /* s’adapte mieux dans petit espace */
}

.bloc-hero-histoire {
  width: 100%;
  padding: 4rem 2rem;
  background-image: url('/themes/lesmotsperdus/img/paper-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bloc-hero-histoire h2.hero-carousel-sub {
  font-size: 4.5rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.bloc-hero-histoire img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
}

.bloc-hero-histoire img:hover {
  transform: rotate(0deg) scale(1.02);
}

.hero-description {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  margin-top: 1.5rem;
}

.bloc-lettre-familiale {
  position: relative;
  z-index: 2;
  margin-top: -6rem; /* mord sur la carte au-dessus */
}

.lettre-bg {
  background-image: url('/themes/lesmotsperdus/img/fondlettre.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 6rem 1rem;
  max-width: 680px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Classe déclenchée via JS quand visible */
.lettre-bg.visible {
  opacity: 1;
  transform: translateY(0);
}

.lettre-contenu {
  color: #222;
  text-shadow: 0 0 1px rgba(255,255,255,0.8);
}

.footer-site {
  color: #fff;
}

.footer-site .container-fluid {
  padding: 0;
  margin: 0;
}

.footer-site .row {
  padding: 1rem;
  margin: 0;
  justify-content:flex-start;
  text-align: left;
}

.footer-site h5 {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-site ul {
  padding-left: 0;
  list-style: none;
}

.footer-site li {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  position: relative;
}

.footer-site a {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.3rem;
  color: #fff!important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
	line-height: 2.2;          
}



/* Supprime les padding latéraux sur les régions de layout */
.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Supprime le padding vertical par défaut sur <footer> */
footer {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

footer.footer-site::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;   /* plus large, ajuste selon ton design */
  height: 80px;   /* plus haut si nécessaire */
  top: -30px;     /* ajuste pour qu’elle déborde harmonieusement */
  background: url('/themes/lesmotsperdus/img/footerligne.svg') no-repeat center;
  background-size: contain;
  z-index: 50;
  pointer-events: none;
  /* Optionnel : animation douce à l’apparition */
  opacity: 1;
  transition: opacity 0.4s;
}

/* Pour garantir que le contexte est bien relatif */
footer.footer-site {
  position: relative;
  z-index: 1200000000;
}


/* Survol : apparition + zoom */
.footer-site a:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.15); /* zoom léger */
}

.parallax-section {
  position: relative;
  height: 100vh;
  background-image: url('/themes/lesmotsperdus/img/bizolon1.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: filter 0.8s ease;
  filter: grayscale(1) blur(1.5px);
  overflow: hidden;
}

@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
  }
	
  .parallax-section {
    filter: grayscale(1) blur(0);
  }
}

.parallax-section:hover {
  filter: none;
  cursor: pointer;
}

/* Overlay sombre semi-transparent */
.parallax-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* tu peux ajuster l’opacité ici */
  z-index: 1;
}

/* Contenu au-dessus de l’overlay */
.parallax-content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  color: #ffffff;
}


.parallax-content p {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}



#map {
  height: 600px; /* Ou la hauteur que vous souhaitez */
  width: 100%;
  background: #f0f0f0; /* Couleur de fond optionnelle */
}
.map-popup h3 {
  margin-top: 0;
  font-size: 1.2em;
}
.map-popup p {
  margin-bottom: 0.5em;
}
.map-popup a {
  display: block;
  margin-top: 10px;
}



.sidebarregions {
  background: none !important;
  padding: 1rem;
}

.sidebarregions ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.sidebarregions li {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.3rem;
  color: white;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

.sidebarregions li a {
  color: white;
  text-decoration: none;
}

.sidebarregions li a:hover {
  text-decoration: underline;
}

.sidebarregions li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1rem;
  height: 1rem;
  background-image: url('/themes/lesmotsperdus/img/icone-blanche.svg'); /* à adapter */
  background-size: contain;
  background-repeat: no-repeat;
}

.sidebarregions h2 {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: white;
  margin-bottom: 1rem;}

/* Appliquer le style "H2" aux labels uniquement sur les nodes carte_postale */
.page-node-type-carte-postale .field__label {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: white;
  margin-bottom: 1rem;
}

.page-node-type-carte-postale .field__item {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.3rem;
  color: #d3d3d3; /* gris clair */
  text-transform: lowercase;
  margin-bottom: 1rem;
}

/* Rend la première lettre en majuscule */
.page-node-type-carte-postale .field__item::first-letter {
  text-transform: uppercase;
}

.page-node-type-carte-postale .field__item a {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.3rem;
  color: #d3d3d3;
  text-decoration: underline;
  text-transform: lowercase;
}

.page-node-type-carte-postale .field__item a::first-letter {
  text-transform: uppercase;
}

/* Optionnel : effet au survol */
.page-node-type-carte-postale .field__item a:hover {
  color: white;
  text-decoration: underline;
}

.page-node-type-carte-postale .node__content {
margin-bottom: 4rem;
}

.page-node-type-carte-postale .node__content .field--name-field-nombre-de-vues {
    text-align: center !important;
}

.page-node-type-carte-postale .node__content .field--name-field-nombre-de-vues .field__label {
    display: block;
    text-align: center;
    width: 100%;
}

.counterviews.views-row .field-content {
  animation: zoom-blur 2.7s ease-in-out infinite;
  transition: filter 0.3s, transform 0.3s;
  font-variant-numeric: tabular-nums;
}

@keyframes zoom-blur {
  0% {
    transform: scale(1);
    filter: blur(0px);
  }
  40% {
    transform: scale(1.14);
    filter: blur(1.5px);
  }
  60% {
    transform: scale(1.14);
    filter: blur(1.5px);
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
  }
}

.page-node-type-carte-postale .node__content .field--name-field-nombre-de-vues .field__item {
  display: inline-block;
  animation: zoom-blur 2.7s ease-in-out infinite;
  transition: filter 0.3s, transform 0.3s;
  font-variant-numeric: tabular-nums;
}

/* Afficher les items sur la même ligne */
.page-node-type-carte-postale .field__items {
    display: inline-flex;
    gap: 3.5rem;
    flex-wrap: wrap;
    width: 97%;
}

/* S’assurer que chaque image occupe bien une part équitable */
.page-node-type-carte-postale .field__items > .field__item {
  flex: 1 1 48%;
}

/* Adapter les images */
.page-node-type-carte-postale .field__items img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive : empilement automatique */
@media (max-width: 768px) {
  .page-node-type-carte-postale .field__items > .field__item {
    flex: 1 1 100%;
  }
}

/* Style de base sur chaque image */
.page-node-type-carte-postale .field--name-field-image img,
.page-node-type-carte-postale .field--name-field-image2 img {
  border-radius: 6px;
  transition: transform 0.3s ease, filter 0.3s ease;
  z-index: 1;
}

/* Effet au survol déclenché uniquement par l'image elle-même */
.page-node-type-carte-postale .field--name-field-image img:hover,
.page-node-type-carte-postale .field--name-field-image2 img:hover {
  transform: scale(1.03) rotate(-1.2deg);
  filter: grayscale(0%);
  z-index: 2;
}


.motsperdus-header-int__wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-top: -5rem;
}

.motsperdus-header-int__background {
   
  background-size: cover;
  background-position: center;
  position: absolute;
  inset: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 1;
}





.motsperdus-header-int__content {
  position: relative;
  z-index: 2;
  padding-top: 30vh; /* ou ajuste à ton goût : 32–38vh fonctionne souvent bien */
}

@media (max-width: 768px) {
  .motsperdus-header-int__content {
    padding-top: 15vh;
  }
}

.motsperdus-header-int.scrolled .motsperdus-header-int__background {
  opacity: 0;
  transform: translateY(-30px);
}

/* Flèche animée */
.motsperdus-header-int__arrow {
  font-size: 2rem;
  margin-top: 2rem;
  animation: motsperdus-bounce 1.8s infinite;
  display: inline-block;
}

@keyframes motsperdus-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* H1 stylisé */
.motsperdus-header-int__content h1 {
   font-family: "WsParadose", Georgia;
  font-size: 3.7rem;
  text-transform: capitalize;
  line-height: 1.1;
  margin-bottom: 1rem;
max-width: 95%; /* ajuste ici selon ton goût : 60%, 50rem, etc. */
  margin: 0 auto;
  text-align: center; /* garde le texte centré */
}

/* Description */
.motsperdus-header-int__content p {
  font-family: "WsParadose", Georgia;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
}

.motsperdus-header-int__content p::first-letter {
  text-transform: uppercase;
  font-size: 2.2rem;    /* optionnel, pour la rendre plus grande */
  font-weight: 600;     /* optionnel, pour la rendre plus marquée */
  letter-spacing: 0.03em;
}

.motsperdus-header-int__scrolled-title {
  margin-top: 2rem;
  font-family: 'ArbutusSlab', serif;
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.motsperdus-header-int.scrolled .motsperdus-header-int__scrolled-title {
  opacity: 1;
  transform: translateY(0);
}

/* 1. Row layout : une ligne avec deux colonnes */
.view-cartes-diptyque .row {
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 2rem;
  overflow-x: auto;
}

/* 2. Colonnes bootstrap */
.view-cartes-diptyque .col-lg-6,
.view-cartes-diptyque .col-md-6 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 3. Images : base */
.view-cartes-diptyque img {
  height: auto;
  width: auto;
  max-height: 80vh;
  max-width: 100%;
  display: block;
  border-radius: 0.5rem;
  transition: transform 0.6s ease-in, filter 0.6s ease-in;
  filter: grayscale(0.05);
}

/* 4. Image 1 : flottement vers le haut + rotation gauche */
.view-cartes-diptyque .views-field-field-image1 img {
  animation: flottement-gauche 5s ease-in-out infinite;
}

/* 5. Image 2 : flottement vers le bas + rotation droite */
.view-cartes-diptyque .views-field-field-image2 img {
  animation: flottement-droite 5s ease-in-out infinite;
}

/* 6. Hover : zoom + filtre */
.view-cartes-diptyque img:hover {
  transform: translateY(-14px) scale(1.03) rotateZ(-1.3deg);
  filter: sepia(0.15) contrast(1.1);
}

/* 7. Keyframes : gauche/droite inversés */
@keyframes flottement-gauche {
  0%, 100% { transform: translateY(0px) rotateZ(0deg); }
  50%     { transform: translateY(-14px) rotateZ(-1.4deg); }
}

@keyframes flottement-droite {
  0%, 100% { transform: translateY(0px) rotateZ(0deg); }
  50%     { transform: translateY(14px) rotateZ(1.4deg); }
}

.view-cartes-diptyque .col-lg-6,
.view-cartes-diptyque .col-md-6 {
  display: contents !important;
  width: 50%; /* conserve le layout Bootstrap */
}

.view-cartes-diptyque img.img-fluid {
  width: 100% !important;
  height: auto;
  max-width: 100%;
  display: block;
}

span.views-field.views-field-field-image1, span.views-field.views-field-field-image2 {
    padding: 2rem 0rem 2rem 0rem;
} 

div#block-lesmotsperdus-content {

	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* Associe chaque colonne à un titre en pseudo-élément */
@media (max-width: 767px) { /* Appliquer ces styles pour les écrans jusqu'à 767px de large (généralement les mobiles) */
  td[data-label]:before {
    content: attr(data-label) " : ";
    font-weight: 700;
    color: #fff;
    display: block;
    background: #23272b;
    padding: 0.4em 0.7em;
    border-radius: 0.2em 0.2em 0 0;
    margin-bottom: 0.2em;
  }
}

/* Style de la cellule */
td {
  background: #343a40;
  color: #f8f9fa;
  text-align: center;
  padding: 1.1em 1em;
}

/* Pour une belle séparation des cellules */
td, th {
  border: 1px solid #444 !important;
	border-bottom: none!important;
}

/* Responsive : deux colonnes */
@media (max-width: 900px) {
  table,
  tbody,
  tr,
  td,
  th {
    display: block !important;
    width: 100%;
  }
  td {
    margin-bottom: 1em;
  }
}

/* Cible tous les th du tableau de ta vue */
.tableinfocard th {
    background: #212529;
    color: #fff;
    text-align: center!important;
    font-family: 'ArbutusSlab', serif;
    font-size: 1.1rem;
	padding: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid #2e3338;
}

.tableinfocard table td {
    text-align: center !important;
    vertical-align: middle;
}


/* Border-radius général sur le tableau */
.tableinfocard table {
    border-radius: 0.5em;
    overflow: hidden;
    /* Astuce pour forcer l’arrondi même si le tableau déborde */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Arrondi sur les coins du haut (thead) */
.tableinfocard table thead tr th:first-child {
    border-top-left-radius:  0.5em;
}
.tableinfocard table thead tr th:last-child {
    border-top-right-radius:  0.5em;
}

/* Arrondi sur les coins du bas (tbody) */
.tableinfocard table tbody tr:last-child td:first-child {
    border-bottom-left-radius:  0.5em;
}
.tableinfocard table tbody tr:last-child td:last-child {
    border-bottom-right-radius:  0.5em;
}

.tableinfocard table {
    border-radius: 0 0 0.5em 0.5em;
    border: 2px solid #23272b !important;  /* force la bordure */
    border-collapse: separate;              /* pour l'arrondi */
    border-spacing: 0;
    background-clip: padding-box;
	max-width: 87%;
	margin-left: auto;
	margin-right: auto;
	background: #212529;
}

.tableinfocard th,
.tableinfocard td {
    border-left: 1px solid #444;
    border-top: none;
    border-bottom: none;
}

/* Supprime la bordure à gauche de la première colonne */
.tableinfocard th:first-child,
.tableinfocard td:first-child {
    border-left: none;
}


.views-field.views-field-field-transcription .field-content p {
    text-align: center;
     font-family: "WsParadose", Georgia;
    font-size: 1.2rem;
    padding: 1rem;
    text-transform: none;
    position: relative;
}

/* Met la première lettre en capitale */
.views-field.views-field-field-transcription .field-content p::first-letter {
    text-transform: uppercase;
}



/* Style général de la popup */
.leaflet-popup-content-wrapper {
  background: #fffbe7;
  border-radius: 6px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.18);
  border: 2px solid #d0c9b5;
}

.leaflet-popup-content {
  color: #40351b;
   font-family: "WsParadose", Georgia;
  font-size: 1.1rem;
  line-height: 1.5;
}

.map-popup h3 {
  margin-top: 0;
  font-size: 1.4rem;
   font-family: "WsParadose", Georgia;
  color: #6c4826;
  font-weight: bold;
}

.map-popup a {
  display: inline-block;
  margin-top: 12px;
  color: #3388ff;
  text-decoration: none;
  font-weight: bold;
  background: #fffbe7;
  border: 1px solid #b1a57d;
  padding: 4px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.map-popup a:hover {
  background: #ffeabf;
}

.hero-inline-logo {
  width: 180px;          /* ou 80px si tu veux plus discret */
  height: auto;
  display: block;
}

.hero-inline-logo2 {
  width: 220px;          /* ou 80px si tu veux plus discret */
  height: auto;
  display: block;
 margin-left: auto;
margin-right: auto;
margin-top: 0.3rem;
}

@keyframes spin-constant {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

body.path-frontpage .hero-inline-logo {
  animation: spin-constant 5s linear infinite;
}

.view-recherche-cartes-postales td {
    min-height: 90px;
	margin-bottom: 0px!important;
}


/* ========== CHAMPS DE FORMULAIRE ========== */
.views-exposed-form input[type="text"],
.views-exposed-form input[type="search"],
.views-exposed-form select,
.views-exposed-form textarea {
    /* Style de base */
    background: #f9f5e9;
    border: 2px solid #d6c7a5;
    color: #5a4a3a;
    padding: 12px 15px;
    margin: 0 5px 10px 0;
    transition: all 0.3s ease;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px !important; /* Bord arrondi important */
    font-size: 1rem;
}

/* Effet de survol (bordure + halo) */
.views-exposed-form input[type="text"]:hover,
.views-exposed-form input[type="search"]:hover,
.views-exposed-form select:hover,
.views-exposed-form textarea:hover {
    background: #fff8e8;
    border: 2px solid #b3a07a;
    box-shadow: 
        0 0 0 4px rgba(179, 160, 122, 0.3),
        inset 0 0 8px rgba(179, 160, 122, 0.2);
    transform: scale(1.02);
    border-radius: 8px !important; /* Maintien du radius */
}

/* Effet focus */
.views-exposed-form input[type="text"]:focus,
.views-exposed-form input[type="search"]:focus,
.views-exposed-form select:focus,
.views-exposed-form textarea:focus {
    outline: none;
    border-color: #9c8b6e;
    box-shadow: 
        0 0 0 4px rgba(156, 139, 110, 0.4),
        inset 0 0 10px rgba(156, 139, 110, 0.2);
    border-radius: 8px !important;
}

/* ========== LABELS ========== */
.views-exposed-form label {
    font-family: 'ArbutusSlab', serif;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #fff;
    display: block; /* Pour empilement vertical */
}

/* ========== PLACEHOLDERS ========== */
.views-exposed-form input::placeholder,
.views-exposed-form textarea::placeholder {
    font-family: 'ArbutusSlab', serif;
    font-size: 1rem;
    color: #a99e88;
    font-style: italic;
    opacity: 1;
}

/* ========== STRUCTURE PRINCIPALE ========== */
.views-exposed-form {
    /* Conteneur global */
    display: flex;
    flex-direction: column;
}

/* ========== VERSION MOBILE ========== */
@media (max-width: 767px) {
    .views-exposed-form .form--inline {
        display: block;
		margin-bottom: 30px;
		
    }
    
    .views-exposed-form .form-item {
        display: block;
        width: 80%;
        max-width: 300px;
        margin: 0 auto 15px;
    }
    
    .views-exposed-form .form-actions {
        margin-top: 15px;
    }
}

/* ========== STYLE DE BASE ========== */
.views-exposed-form .form-actions input[type="submit"] {
    /* Typographie */
    font-family: 'ArbutusSlab', serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
	margin-bottom: 2rem;
    
    /* Couleurs vintage */
    background: #c04e3a; /* Rouge-terre rappelant les cachets postaux */
    color: #fff8e8 !important;
    
    /* Forme */
    padding: 12px 35px;
    border: none;
    border-radius: 30px; /* Forme organique */
    cursor: pointer;
    
    /* Effets */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.2),
        inset 0 1px 1px rgba(255,255,255,0.3);
    
    /* Transition */
    transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    overflow: hidden;
}

/* ========== EFFET DE SURVOL ========== */
.views-exposed-form .form-actions input[type="submit"]:hover {
    background: #a83d2b; /* Rouge plus foncé */
    transform: translateY(-2px);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        inset 0 2px 2px rgba(255,255,255,0.2);
    
    /* Effet "vieilli" */
    background-image: 
        linear-gradient(
            to right,
            rgba(0,0,0,0) 0%,
            rgba(255,255,255,0.1) 50%,
            rgba(0,0,0,0) 100%
        );
}

/* ========== EFFET ACTIF ========== */
.views-exposed-form .form-actions input[type="submit"]:active {
    transform: translateY(1px);
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 0 5px rgba(0,0,0,0.3);
}

/* ========== ANIMATION OPTIONNELLE ========== */
/* Effet de "cachet postal" au survol */
.views-exposed-form .form-actions input[type="submit"]::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s ease;
}

.views-exposed-form .form-actions input[type="submit"]:hover::after {
    transform: scale(1);
}


p.messagenone {
    text-align: center;
    font-size: 1.2rem;
	font-family: "WsParadose", Georgia;
}


/* --- Styles pour les tableaux responsives empilables --- */
/* Appliqué à la classe 'table-responsive-stack' ajoutée dans le template Twig */

@media (max-width: 767px) { /* Pour les écrans de taille mobile. Ajustez si besoin. */
    .table-responsive-stack {
        width: 100%;
        display: block;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .table-responsive-stack thead {
        display: none;
    }

    /* TRÈS IMPORTANT : Annulation agressive des styles de tableau Bootstrap 5 */
    /* Cible directement les classes de tableau et les pseudo-classes de Bootstrap */
    .table-responsive-stack.table.table-striped tbody tr,
    .table-responsive-stack.table.table-striped tbody tr:nth-of-type(odd),
    .table-responsive-stack.table.table-striped tbody tr:nth-of-type(even) {
        background-color: transparent !important;
    }
	
	 .table-responsive-stack.table.table-striped td {
    --bs-table-bg-type: transparent !important;
    --bs-table-color-type: inherit !important;
  }
	
	  .table-responsive-stack td {
    color: #ffffff !important;
  }
	
  .tableinfocard table.table-responsive-stack {
    border: none !important;
    border-bottom: 2px solid #ffffff !important; /* Blanc ou couleur de ton choix */
    border-radius: 0 0 6px 6px;
    box-shadow: none !important; /* Optionnel : annule d'éventuels effets */
  }

    .table-responsive-stack tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        padding: 0.75rem;
        background-color: transparent !important; /* S'assure que le fond des "lignes" empilées est transparent */
    }

    .table-responsive-stack td {
        border: none;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        color: #1D1C1C; /* Texte du contenu du tableau en blanc */
    }

    .table-responsive-stack td:last-child {
        margin-bottom: 0;
    }

    .table-responsive-stack td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        white-space: normal;
        background: #212529;
        font-family: 'ArbutusSlab';
        margin: 0.5rem 0rem 0.5rem 0rem;
        padding: 0.25rem 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Styles spécifiques pour les images, si nécessaire */
    .table-responsive-stack td.views-field-field-image2 {
        align-items: center;
    }
    .table-responsive-stack td.views-field-field-image2 img {
        max-width: 120px;
        height: auto;
        display: block;
        margin: 0.25rem auto 0;
    }

    /* Ajustements pour les boutons ou autres éléments dans les cellules du tableau */
    .table-responsive-stack .form-actions {
        text-align: center;
        padding-top: 0.5rem;
    }  

    /* Modifications pour le mobile seulement */

    /* Logo */
    .hero-inline-logo2 {
        width: 130px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Titres */
    .hero-carousel-sub, .hero-description {
        font-size: 1.7rem;
		line-height: 35px;
    }
	
	.parallax-content p {
    max-width: 99%;}
	
	.hero-description
	
	{
        font-size: 1.1rem;
    }
	
	.hero-link-wrap {
    font-size: 1.8rem;
	
		}

    .hero-carousel-sub::after {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .motsperdus-header-int__content h1, .hero-carousel h1 {
        font-size: 2.5rem;
		margin-top: 0rem;
    }
	
	#block-colonnes-du-blog-bloc, div#block-lesmotsperdus-views-block-colonnes-du-blog-block-1, div#block-lesmotsperdus-views-block-colonnes-du-blog-block-1-2, #block-lesmotsperdus-views-block-articles-recents-block-1, div#block-lesmotsperdus-views-block-articles-recents-block-1-2, div#block-lesmotsperdus-views-block-articles-recents-block-1-3
	{margin-left: 1rem;}
	
.view-articles-recents .views-row, .view-id-18_vues_pages_regions .views-field-title, .view-id-18_vues_pages_regions .views-field-field-destinataire, .view-id-18_vues_pages_regions .views-field-field-nom-du-destinataire {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}
	
.footer-site .row {
    padding: 1rem 0rem 1rem 0rem;}
	
	.view-id-18_vues_pages_regions .grid.views-view-grid
	{margin-right: 2px;}

    .motsperdus-header-int__content p {
        font-size: 1.3rem;
        max-width: 90%;
    }
	
	.region-sidebar-second
	{margin-left: 1rem;}

    /* Footer */
    footer.footer-site::before {
        width: 300px;
        top: -20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Centrage du formulaire exposé */
    .view-filters {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Cibler spécifiquement le formulaire */
    #views-exposed-form-recherche-cartes-postales-block-search-cards {
        width: 100%;
        max-width: 400px;
    }

    /* Assurer que les éléments internes du formulaire s'empilent et sont centrés */
    .views-exposed-form .form--inline {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Chaque div de champ individuel (plus spécifique pour contrer d'autres styles) */
    .views-exposed-form .form--inline > div.form-item,
    .views-exposed-form .form--inline > div.form-type-textfield,
    .views-exposed-form .form--inline > div.form-type-select,
    .views-exposed-form .form-item { /* Cible aussi les form-item génériques */
        width: 90%;
        margin-bottom: 1rem;
        background-color: transparent !important; /* Force le fond transparent pour la div englobante du champ */
    }

    /* Labels des champs du formulaire */
    .views-exposed-form label {
        text-align: center;
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
        color: #ffffff;
    }

    /* Champs de saisie (input, select, textarea) du formulaire exposé - PAR DÉFAUT */
    /* On vise les types d'input spécifiques et les classes form-control/form-select de Bootstrap */
    .views-exposed-form input[type="text"].form-control,
    .views-exposed-form select.form-select,
    .views-exposed-form textarea.form-control,
    .views-exposed-form .form-text,
    .views-exposed-form .form-select {
        background-color: transparent !important; /* Fond transparent par défaut */
        color: #ffffff !important; /* Texte en blanc par défaut */
        border: 1px solid #ffffff !important; /* Bordure blanche par défaut */
        padding: 0.75rem 0.5rem;
        width: 100%;
        box-sizing: border-box;
        text-align: center; /* Centrer le texte par défaut */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        box-shadow: none !important; /* Supprime toute ombre interne */
    }

    /* Styles des champs au focus (quand on clique/tape dedans) */
    .views-exposed-form input[type="text"].form-control:focus,
    .views-exposed-form select.form-select:focus,
    .views-exposed-form textarea.form-control:focus,
    .views-exposed-form .form-text:focus,
    .views-exposed-form .form-select:focus {
        background-color: #ffffff !important; /* Fond BLANC au focus */
        color: #000000 !important; /* Texte NOIR au focus */
        border: 1px solid #000000 !important; /* Bordure noire au focus */
        outline: none !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Garde une ombre de focus Bootstrap si vous voulez, sinon mettez none */
    }

    /* Pour les options dans le select (quand le select est ouvert) */
    .views-exposed-form select option {
        background-color: #212529 !important; /* Fond des options du select (assure la visibilité du texte blanc) */
        color: #ffffff !important; /* Texte des options en blanc */
    }
    .views-exposed-form select option:checked,
    .views-exposed-form select option:hover {
        background-color: #007bff !important; /* Fond des options sélectionnées/survolées */
        color: #ffffff !important; /* Texte des options sélectionnées/survolées */
    }

    /* Boutons d'action du formulaire exposé */
    .views-exposed-form .form-actions {
        width: 90%;
        margin-top: 1rem;
        text-align: center;
    }

    .views-exposed-form .form-actions input[type="submit"] {
        width: auto;
        min-width: 150px;
        padding: 0.75rem 1.5rem;
        background-color: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: 1rem;
    }

}

@media (max-width: 767px) {
  .table-responsive-stack tr,
  .table-responsive-stack td {
    background-color: transparent !important; /* Ou ta couleur */
  }

  .table-responsive-stack td::before {
    background-color: #212529 !important; /* Fond des labels */
  }
}


/* Media query pour les écrans mobiles (max-width: 767px est un breakpoint courant) */
@media (max-width: 767px) {
  /* Cible les colonnes DIRECTEMENT dans le conteneur de tes images */
  .view-field-images .col-6,
  .view-field-images .col-sm-6,
  .view-field-images .col-md-6,
  .view-field-images .col-lg-6 {
    width: 100% !important;        /* Force la largeur à 100% */
    flex: 0 0 100% !important;     /* Indispensable pour Bootstrap Flexbox */
    max-width: 100% !important;    /* Assure la compatibilité */
  }

  /* Assure-toi que la rangée (row) se comporte correctement si elle est présente */
  /* Ceci est une précaution, si les colonnes ne s'empilent pas à cause de la rangée */
  .view-field-images .row {
    display: block; /* Peut aider si la rangée a un display flex qui empêche l'empilement */
  }
}


@media (max-width: 768px) {
  /* 1. On autorise les colonnes à s'empiler */
  .view-cartes-diptyque .row {
    flex-wrap: wrap !important;
    flex-direction: column; /* au cas où */
    gap: 1rem;
    overflow-x: visible;
  }

  /* 2. Colonnes prennent toute la largeur */
  .view-cartes-diptyque .col-lg-6,
  .view-cartes-diptyque .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
  }

  /* 3. Images ajustées */
  .view-cartes-diptyque img {
    max-width: 85%!important;
    height: auto;
	  margin-left: auto;
	  margin-right: auto;
  }
}


@media (min-width: 768px) {
  .views-exposed-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    max-width: 100%;
    margin: 0 auto;
  }

  .views-exposed-form .form--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
  }

  .views-exposed-form .form-item {
    flex: 0 0 auto;
  }

  .views-exposed-form input,
  .views-exposed-form select {
    min-width: 180px;
  }

  .views-exposed-form .form-actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}



.form-item-nom-expediteur label {
  position: relative;
  padding-left: 2.4rem; /* espace réservé pour l’icône */
  display: inline-block;
}


.form-item-nom-expediteur label::before {
  content: "";
  position: absolute;
  left: 0; /* bien collée à gauche */
  bottom: 0.1rem;
  width: 1.8rem; /* largeur explicite de l’icône */
  height: 3rem;
  background-image: url('../img/expediteur.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.form-item-nom-destinataire label {
  position: relative;
  padding-left: 2.4rem; /* espace réservé pour l’icône */
  display: inline-block;
}


.form-item-nom-destinataire label::before {
  content: "";
  position: absolute;
  left: 0; /* bien collée à gauche */
  bottom: 0.1rem;
  width: 1.8rem; /* largeur explicite de l’icône */
  height: 3rem;
  background-image: url('../img/destinataire.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.form-item-periode-choisie label {
  position: relative;
  padding-left: 2.4rem; /* espace réservé pour l’icône */
  display: inline-block;
}


.form-item-periode-choisie label::before {
  content: "";
  position: absolute;
  left: 0; /* bien collée à gauche */
  bottom: 0.1rem;
  width: 1.9rem; /* largeur explicite de l’icône */
  height: 2.5rem;
  background-image: url('../img/periode.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.form-item-type-evenement label {
  position: relative;
  padding-left: 2.4rem; /* espace réservé pour l’icône */
  display: inline-block;
}


.form-item-type-evenement label::before {
  content: "";
  position: absolute;
  left: 0; /* bien collée à gauche */
  bottom: 0.1rem;
  width: 1.8rem; /* largeur explicite de l’icône */
  height: 3rem;
  background-image: url('../img/evenement.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


.form-item-region-selectionnee label {
  position: relative;
  padding-left: 2.4rem; /* espace réservé pour l’icône */
  display: inline-block;
}


.form-item-region-selectionnee label::before {
  content: "";
  position: absolute;
  left: 0; /* bien collée à gauche */
  bottom: 0.1rem;
  width: 1.9rem; /* largeur explicite de l’icône */
  height: 2.5rem;
  background-image: url('../img/region.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.form-item-ville-selectionnee label::before {
  content: "";
  position: absolute;
  left: 0; /* bien collée à gauche */
  bottom: 0.1rem;
  width: 1.9rem; /* largeur explicite de l’icône */
  height: 2.5rem;
  background-image: url('../img/ville.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.form-item-ville-selectionnee label {
  position: relative;
  padding-left: 2.4rem; /* espace réservé pour l’icône */
  display: inline-block;
}


@media (max-width: 768px) {
  .views-exposed-form label {
    padding-left: 0;
    padding-top: 2.4rem;
    text-align: center;
    display: block;
  }

  .views-exposed-form label::before {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: auto;
    width: 1.4rem;
    height: 1.4rem;
  }
}


/* --- Bouton toggle stylisé --- */
.custom-toggler {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
  padding: 0.5rem;
  position: relative;
  z-index: 1001;
  transition: background-color 0.3s ease;
}

/* Changement de fond au clic */
.custom-toggler.active {
  background-color: rgba(245, 203, 78, 0.1); /* Jaune rétro transparent */
  border-radius: 0.5rem;
}

/* Barres du hamburger */
.custom-toggler .bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  margin: 5px auto;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Changement de couleur au clic */
.custom-toggler.active .bar {
  background-color: #f5cb4e; /* Jaune rétro */
}

/* Animation hamburger -> croix */
.custom-toggler.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.custom-toggler.active .bar:nth-child(2) {
  opacity: 0;
}

.custom-toggler.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

@media (max-width: 767.98px) {
  .navbar .container-fluid {
    justify-content: space-between; /* conserve l'espacement logo ↔ bouton */
    padding-right: 1rem;
  }

  .navbar-toggler.custom-toggler {
    margin-right: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  /* Décalage à gauche de tous les liens */
  .navbar-collapse .navbar-nav {
    align-items: flex-start !important;
    padding-left: 1.5rem; /* ou la même valeur que ton logo */
    width: 100%;
  }

  .navbar-collapse .nav-link {
    text-align: left;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }
}

@media (max-width: 767.98px) {
  .navbar-collapse .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
	  padding-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .navbar-collapse .nav-link {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0; /* supprime l'espacement ajouté */
    line-height: 1.3;
    font-size: 1.15rem;
	color: #fff;
  }
}

.table-cartes-zebree {
  width: 100%;
  background-color: #f4f4f0;
  border-collapse: collapse;
}

.table-cartes-zebree th {
  background-color: #c04e3a;
  color: #f9f5e9;
  padding: 0.75rem;
  font-family: 'ArbutusSlab', serif;
  text-transform: uppercase;
  font-size: 1rem;
}

.table-cartes-zebree td {
  background-color: #f9f5e9;
  color: #000;
  padding: 0.1rem;
  text-align: center;
}

/* =========== HOVER STYLING POUR TABLEAU "Recherche Cartes Postales" ========== */
.view-recherche-cartes-postales .views-field-field-image2 a {
  position: relative;
  display: inline-block;
}

.view-recherche-cartes-postales .views-field-field-image2 a img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 4px;
    width: 80%;
    height: auto;
}

.table-cartes-zebree td:empty::after {
    content: "–";
    visibility: hidden;
    display: block;
    height: 1em;
}

.champ-inconnu {
  font-style: italic;
  color: #cd4646;
}


.view-recherche-cartes-postales .views-field-field-image2 a:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Tooltip à droite */
.view-recherche-cartes-postales .views-field-field-image2 a::after {
  content: "Visualiser cette carte";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(0.75rem);
  background-color: #c04e3a;
  color: #fff8e8;
  font-family: 'ArbutusSlab', serif;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

/* Petite flèche décorative pointant vers l'image */
.view-recherche-cartes-postales .views-field-field-image2 a::before {
  content: "";
  position: absolute;
  top: 32%;
  left: 100%;
  transform: translateY(50%) translateX(-1px);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #c04e3a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9;
}

/* Affichage au survol ou focus clavier */
.view-recherche-cartes-postales .views-field-field-image2 a:hover::after,
.view-recherche-cartes-postales .views-field-field-image2 a:hover::before,
.view-recherche-cartes-postales .views-field-field-image2 a:focus::after,
.view-recherche-cartes-postales .views-field-field-image2 a:focus::before {
  opacity: 1;
}

/* ===== Pagination personnalisée pour toutes les vues ===== */

/* Liens de pagination généraux */
ul.pagination.js-pager__items li.page-item .page-link {
  background-color: #f9f5e9; /* jaune rétro */
  color: #000;
  border: none;
  font-family: 'ArbutusSlab', serif;
  font-size: 1.2rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  margin: 0 0.2rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Page active (actuelle) */
ul.pagination.js-pager__items li.page-item.is-active .page-link {
  background-color: #c04e3a;
  color: #fff8e8;
  font-weight: bold;
}

/* Survol des autres pages */
ul.pagination.js-pager__items li.page-item:not(.is-active) .page-link:hover {
  background-color: #f9f5e9;
  color: #000;
}

.pagination {
    margin-bottom: 3rem;
}

/* ===== Styles unifiés pour la sidebar droite ===== */
.region-sidebar-second {
  font-family: 'ArbutusSlab', serif;
  color: #f9f5e9;
  line-height: 2.5;
  font-size: 1.3rem;
}

/* Titres dans la sidebar */
.region-sidebar-second h1,
.region-sidebar-second h2,
.region-sidebar-second h3,
.region-sidebar-second h4,
.region-sidebar-second h5,
.region-sidebar-second h6 {
  font-family: "WsParadose", Georgia, serif;
  font-size: 2.2rem;
  text-transform: capitalize;
  line-height: 1;
  text-align: left;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: #f9f5e9;
}

/* Responsive (mobile) */
@media (max-width: 767px) {
  .region-sidebar-second h1,
  .region-sidebar-second h2,
  .region-sidebar-second h3,
  .region-sidebar-second h4,
  .region-sidebar-second h5,
  .region-sidebar-second h6 {
    font-size: 1.6rem;
    margin-top: 2rem;
    line-height: 1.2;
  }
}

/* Listes sans puces */
.region-sidebar-second ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.region-sidebar-second li {
  margin-bottom: 1rem;
  padding-left: 0;
}

/* Liens */
.region-sidebar-second a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

.region-sidebar-second a:hover,
.region-sidebar-second a:focus {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}

/* === Ajustements spécifiques à la vue "Articles récents" dans la sidebar === */
.view-articles-recents.view-id-articles_recents {
  /* Pas de redondance : on hérite des styles de .region-sidebar-second */
}

/* Espacement entre les articles */
.view-articles-recents .views-row {
  margin-bottom: 2rem;
}

/* Réduction de l’interligne uniquement pour cette vue */
.view-articles-recents .views-field {
  line-height: 1.4;
}

/* Pas besoin de redéfinir la couleur ou le style de lien, ils sont hérités */

/* Espace entre la grille d'articles et la barre latérale */
.view-id-grille_d_articles .grid.articlegrid {
  margin-right: 4rem;
	margin-top: 3rem;
}

@media (max-width: 991px) {
  .view-id-grille_d_articles .grid.articlegrid {
    margin-right: 0;
  }
}

/* === Desktop : espacement à droite si sidebar présente === */
.view-id-grille_d_articles .grid.articlegrid {
  margin-right: 4rem;
	margin-left: 2rem;
}

/* === Mobile : recentrage et respiration === */
@media (max-width: 991px) {
  .view-id-grille_d_articles .grid.articlegrid {
    margin-right: auto;
    margin-left: auto;
    padding: 0 1rem; /* espace global autour de la grille */
  }

  /* Bloc individuel dans la grille */
  .view-id-grille_d_articles .articlecolstyle {
    padding: 1rem; /* léger padding autour de chaque bloc */
  }

  /* S'assurer que l’image prend bien 100% de largeur dispo */
  .view-id-grille_d_articles img.img-fluid {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* === Conteneur image === */
.view-id-grille_d_articles .views-field-field-image {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

/* Image */
.view-id-grille_d_articles .views-field-field-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}

/* Overlay texte centré (masqué par défaut) */
.view-id-grille_d_articles .views-field-field-image a::after {
  content: "Visualiser la carte";
  position: absolute;
  inset: 0;
  background-color: rgba(192, 78, 58, 0.8); /* rouge rétro */
  color: #f9f5e9;
  font-family: "WsParadose", Georgia, serif;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background-color 0.4s ease;
  z-index: 2;
}

/* Hover : fondu + changement de couleur */
.view-id-grille_d_articles .views-field-field-image a:hover::after {
  opacity: 1;
  background-color: rgba(192, 78, 58, 0.8); /* rouge rétro au survol */
}


/* === TEXTE AUTOUR DE L'IMAGE === */
.view-id-grille_d_articles .views-field-title,
.view-id-grille_d_articles .views-field-field-categories,
.view-id-grille_d_articles .views-field-created {
  font-family: 'ArbutusSlab', serif;
  color: #f9f5e9;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 1rem;
}

/* Marge entre les éléments */
.view-id-grille_d_articles .views-field-field-categories {
  margin-top: 0.3rem;
}

.view-id-grille_d_articles .views-field-created {
  margin-top: 0.3rem;
  font-size: 1.1rem;
    margin-bottom: 3rem;
    text-align: center;
}

/* Forcer la date à passer à la ligne sous le titre dans les articles récents */
.view-articles-recents .views-field-created {
  display: block;
  margin-top: 0.3rem; /* léger espace entre le titre et la date */
  text-align: left; /* ou left selon ton design */
  font-size: 1.1rem;
}

/* === TITRE (LIEN) === */
.view-id-grille_d_articles .views-field-title a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

.view-id-grille_d_articles .views-field-title a:hover {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}


/* Alignement horizontal de l’étiquette et du contenu */
.view-id-grille_d_articles .views-field-field-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
    justify-content: center;
}

/* Étiquette (Catégorie :) */
.view-id-grille_d_articles .views-field-field-categories .views-label {
  margin: 0;
  font-weight: 600;
  flex-shrink: 0;
}

/* Contenu de la catégorie */
.view-id-grille_d_articles .views-field-field-categories .field-content {
  margin: 0;
  font-weight: normal;
  color: inherit;
}

#block-colonnes-du-blog-bloc, div#block-lesmotsperdus-views-block-colonnes-du-blog-block-1, div#block-lesmotsperdus-views-block-colonnes-du-blog-block-1-2 {
  position: relative;
  padding-bottom: 4rem; /* espace pour la séparation */
}

#block-colonnes-du-blog-bloc::after, div#block-lesmotsperdus-views-block-colonnes-du-blog-block-1::after, div#block-lesmotsperdus-views-block-colonnes-du-blog-block-1-2::after {
  content: "";
  display: block;
  width: 70%;
  height: 40px; /* hauteur du séparateur */
  background-image: url('../img/interligne.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}


#block-lesmotsperdus-views-block-articles-recents-block-1, div#block-lesmotsperdus-views-block-articles-recents-block-1-2, div#block-lesmotsperdus-views-block-articles-recents-block-1-3 {
  position: relative;
  padding-bottom: 4rem;
}

#block-lesmotsperdus-views-block-articles-recents-block-1::after, div#block-lesmotsperdus-views-block-articles-recents-block-1-2::after, div#block-lesmotsperdus-views-block-articles-recents-block-1-3::after {
  content: "";
  display: block;
  width: 70%;
  height: 40px;
  background-image: url('../img/interligne.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Style des liens dans les teasers d’articles (taxonomie, page d'accueil, etc.) */
article.node.node--type-article.node--promoted.node--view-mode-teaser h2 a {
  font-family: 'ArbutusSlab', serif;
  color: #f9f5e9;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 1rem;
  display: inline-block;
  border-bottom: 1px dotted #f9f5e9;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

article.node.node--type-article.node--promoted.node--view-mode-teaser h2 a:hover,
article.node.node--type-article.node--promoted.node--view-mode-teaser h2 a:focus {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}


/* === Conteneur image dans les teasers === */
article.node--view-mode-teaser .field--name-field-image {
  position: relative;
  overflow: hidden;
}

/* Overlay sur l'image uniquement */
article.node--view-mode-teaser .field--name-field-image a {
  display: inline-block;
  position: relative;
}

/* Overlay texte masqué par défaut */
article.node--view-mode-teaser .field--name-field-image a::after {
  content: "Visualiser la carte";
  position: absolute;
  inset: 0;
  background-color: rgba(192, 78, 58, 0.8); /* rouge rétro */
  color: #f9f5e9;
  font-family: "WsParadose", Georgia, serif;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background-color 0.4s ease;
  z-index: 2;
}

/* Hover uniquement sur le lien contenant l'image */
article.node--view-mode-teaser .field--name-field-image a:hover::after {
  opacity: 1;
  background-color: rgba(192, 78, 58, 0.85);
}

/* === Titre (h3) dans le teaser de la vue taxonomy (catégories) */
article.node.node--type-article.node--promoted.node--view-mode-teaser h3 {
  font-family: 'ArbutusSlab', serif;
  color: #f9f5e9;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

/* Hyperlien dans le titre h3 */
article.node.node--type-article.node--promoted.node--view-mode-teaser h3 a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

article.node.node--type-article.node--promoted.node--view-mode-teaser h3 a:hover {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}


/* Cibler uniquement le champ dans le row de la vue nombre de vues */
.counterviews.views-row .field-content {
  font-size: 2rem; /* ajustement spécifique ici */
}

/* On rend .field-content positionné pour pouvoir y placer des coins */
.views-field.views-field-field-transcription .field-content {
  position: relative;
}

/* Le paragraphe contient deux coins : haut gauche et bas droite */
.views-field.views-field-field-transcription .field-content p {
  position: relative;
  padding: 4rem; /* espace intérieur pour ne pas chevaucher le contenu */
}

/* Coin haut gauche */
.views-field.views-field-field-transcription .field-content p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3rem;
  width: 60px;
  height: 60px;
  background: url('../img/corner.svg') no-repeat;
  background-size: contain;
}

/* Coin bas droite */
.views-field.views-field-field-transcription .field-content p::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 3rem;
  width: 60px;
  height: 60px;
  background: url('../img/corner.svg') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

/* Coin haut droite (sur .field-content) */
.views-field.views-field-field-transcription .field-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 3rem;
  width: 60px;
  height: 60px;
  background: url('../img/corner.svg') no-repeat;
  background-size: contain;
  transform: scaleX(-1);
}

/* Coin bas gauche (sur .field-content) */
.views-field.views-field-field-transcription .field-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 3rem;
  width: 60px;
  height: 60px;
  background: url('../img/corner.svg') no-repeat;
  background-size: contain;
  transform: scaleY(-1);
}

.views-field.views-field-field-transcription {
    width: 90%;
    margin: auto;
  
}

/* Adaptation mobile */
@media screen and (max-width: 600px) {
  .views-field.views-field-field-transcription {
    width: 100%;
  }

}

.views-element-container.h2postsgrid h2 {
  font-family: "WsParadose", Georgia, serif;
  text-transform: capitalize;
  line-height: 1;
  text-align: left;
  color: #f9f5e9;
  margin-left: 2rem;
  position: relative;
  display: inline-block; /* nécessaire pour centrer l'élément décoratif en ::after */
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4 [data-block="sidebar_second"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4[data-collapsed="false"] [data-block="sidebar_second"] {
  max-height: 2000px;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4 [data-block="sidebar_second"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4[data-collapsed="false"] [data-block="sidebar_second"] {
  max-height: 2000px;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4 h2 {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4 h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  background-image: url('../img/arrow2.svg'); /* ← adapte ce chemin */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.4s ease;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-4[data-collapsed="false"] h2::before {
  transform: translateY(-50%) rotate(90deg);
}




#block-lesmotsperdus-views-block-colonnes-du-blog-block-2 [data-block="sidebar_second"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-2[data-collapsed="false"] [data-block="sidebar_second"] {
  max-height: 2000px;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-2 h2 {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-2 h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  background-image: url('../img/arrow2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.4s ease;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-2[data-collapsed="false"] h2::before {
  transform: translateY(-50%) rotate(90deg);
}

/* Bloc 6 : collapsable */
#block-lesmotsperdus-views-block-colonnes-du-blog-block-6 [data-block="sidebar_second"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-6[data-collapsed="false"] [data-block="sidebar_second"] {
  max-height: 2000px;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-6 h2 {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-6 h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  background-image: url('../img/arrow2.svg'); /* adapte le chemin si besoin */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.4s ease;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-6[data-collapsed="false"] h2::before {
  transform: translateY(-50%) rotate(90deg);
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-5 [data-block="sidebar_second"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-5[data-collapsed="false"] [data-block="sidebar_second"] {
  max-height: 2000px;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-5 h2 {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-5 h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  background-image: url('../img/arrow2.svg'); /* ajuste ce chemin au besoin */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.4s ease;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-5[data-collapsed="false"] h2::before {
  transform: translateY(-50%) rotate(90deg);
}

.tableinfocard.view.view-recherche-cartes-postales
 {
    margin-bottom: 3rem;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-7 [data-block="sidebar_second"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-7[data-collapsed="false"] [data-block="sidebar_second"] {
  max-height: 2000px;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-7 h2 {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-7 h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  background-image: url('../img/arrow2.svg'); /* adapte ce chemin si besoin */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.4s ease;
}

#block-lesmotsperdus-views-block-colonnes-du-blog-block-7[data-collapsed="false"] h2::before {
  transform: translateY(-50%) rotate(90deg);
}

/* Bloc global du breadcrumb */
#block-lesmotsperdus-breadcrumbs {
  margin: 2rem 0;
  font-family: "WsParadose", Georgia, serif;
  background-color: transparent;
}

/* Conteneur de navigation */
#block-lesmotsperdus-breadcrumbs nav[aria-label="breadcrumb"] {
  padding-left: 2rem;
}

/* Liste du fil d'Ariane */
#block-lesmotsperdus-breadcrumbs ol.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

/* Éléments individuels */
#block-lesmotsperdus-breadcrumbs .breadcrumb-item {
  font-size: 1rem;
  color: #f9f5e9;
  text-transform: lowercase;
}

/* Séparateur entre les éléments */
#block-lesmotsperdus-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #f9f5e9;
  margin: 0 0.4rem;
}

/* Lien actif dans le fil d'Ariane */
#block-lesmotsperdus-breadcrumbs .breadcrumb-item a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

/* Effet au survol */
#block-lesmotsperdus-breadcrumbs .breadcrumb-item a:hover,
#block-lesmotsperdus-breadcrumbs .breadcrumb-item a:focus {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}


.field--name-field-longitude,
.field--name-field-latitude {
  display: none !important;
}

/* === IMAGE avec overlay (champ field-image2) === */
.view-id-18_vues_pages_regions .views-field-field-image2 {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
	margin-top: 1rem;
}

.view-id-18_vues_pages_regions .views-field-field-image2 img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}

.view-id-18_vues_pages_regions .views-field-field-image2 a {
  position: relative;
  display: block;
}

.view-id-18_vues_pages_regions .views-field-field-image2 a::after {
  content: "Visualiser la carte";
  position: absolute;
  inset: 0;
  background-color: rgba(192, 78, 58, 0.8);
  color: #f9f5e9;
  font-family: "WsParadose", Georgia, serif;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background-color 0.4s ease;
  z-index: 2;
}

.view-id-18_vues_pages_regions .views-field-field-image2 a:hover::after {
  opacity: 1;
  background-color: rgba(192, 78, 58, 0.8);
}

/* === TITRE (LIEN) === */
.view-id-18_vues_pages_regions .views-field-title a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

.view-id-18_vues_pages_regions .views-field-title a:hover {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}

/* === STYLE TEXTE GÉNÉRAL === */
.view-id-18_vues_pages_regions .views-field-title,
.view-id-18_vues_pages_regions .views-field-field-destinataire {
  font-family: 'ArbutusSlab', serif;
  color: #f9f5e9;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 1rem;
}

/* === PÉRIODE et ÉVÉNEMENT en ligne === */
.view-id-18_vues_pages_regions .views-field-field-periode,
.view-id-18_vues_pages_regions .views-field-field-evenement {
  font-family: 'ArbutusSlab', serif;
  color: #f9f5e9;
  line-height: 1.5;
  margin-top: 0;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.view-id-18_vues_pages_regions .views-field-field-periode .field-content > a,
.view-id-18_vues_pages_regions .views-field-field-evenement .field-content > a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  font-family: 'ArbutusSlab', serif;
  transition: all 0.3s ease-in-out;
}

.view-id-18_vues_pages_regions .views-field-field-periode .field-content > a:hover,
.view-id-18_vues_pages_regions .views-field-field-evenement .field-content > a:hover {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}

/* === GRILLE === */
.view-id-18_vues_pages_regions .grid.views-view-grid {
  margin-right: 4rem;
  margin-left: 2rem;
  margin-top: 3rem;
	margin-bottom: 2rem;
    text-align: center;
}

/* === LIENS généraux === */
.view-id-18_vues_pages_regions .views-field-title a,
.view-id-18_vues_pages_regions .views-field-field-periode a,
.view-id-18_vues_pages_regions .views-field-field-evenement a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

.view-id-18_vues_pages_regions .views-field-title a:hover,
.view-id-18_vues_pages_regions .views-field-field-periode a:hover,
.view-id-18_vues_pages_regions .views-field-field-evenement a:hover {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}

/* === DESTINATAIRE sur une nouvelle ligne === */
.view-id-18_vues_pages_regions .views-field-field-nom-du-destinataire {
  display: block; /* Forcer saut de ligne */
  font-family: 'ArbutusSlab', serif;
  font-size: 1.1rem;
  color: #f9f5e9;
  position: relative;
    margin-bottom: 2rem;
}


.view-empty {
    font-family: "WsParadose", Georgia;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
	margin: 0rem 1rem 0rem 1rem;
  
}

p.accroche
{
    font-family: "WsParadose", Georgia;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}	
	

/*body des pages et articles*/

.node--type-page .field--name-body,
.node--type-article .field--name-body {
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #f9f5e9;
  font-family: 'Atkinson Hyperlegible';
}

/* === TITRES dans le corps des pages et articles === */
.node--type-page .field--name-body h1,
.node--type-page .field--name-body h2,
.node--type-page .field--name-body h3,
.node--type-page .field--name-body h4,
.node--type-page .field--name-body h5,
.node--type-page .field--name-body h6,
.node--type-article .field--name-body h1,
.node--type-article .field--name-body h2,
.node--type-article .field--name-body h3,
.node--type-article .field--name-body h4,
.node--type-article .field--name-body h5,
.node--type-article .field--name-body h6,
h4.text-center.genalogy
{
  font-family: "WsParadose", Georgia, serif;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* === Adaptation mobile === */
@media (max-width: 767px) {
  .node--type-page .field--name-body h1,
  .node--type-page .field--name-body h2,
  .node--type-page .field--name-body h3,
  .node--type-page .field--name-body h4,
  .node--type-page .field--name-body h5,
  .node--type-page .field--name-body h6,
  .node--type-article .field--name-body h1,
  .node--type-article .field--name-body h2,
  .node--type-article .field--name-body h3,
  .node--type-article .field--name-body h4,
  .node--type-article .field--name-body h5,
  .node--type-article .field--name-body h6,
	h4.text-center.genalogy
	{
    font-size: 1.5rem;
    line-height: 1.3;
  }
}


p.regionacc {
    text-align: center;
}

/* === Liens globaux === */
a,
footer.footer-dark a {
  color: #f9f5e9;
  text-decoration: none;
  border-bottom: 1px dotted #f9f5e9;
  transition: all 0.3s ease-in-out;
}

a:hover,
footer.footer-dark a:hover {
  color: #c04e3a!important;
  border-bottom-color: #c04e3a;
}

/* Neutralise Bootstrap pour le menu secondaire en sidebar */
nav#block-lesmotsperdus-menusecondaire ul.navbar-nav {
  display: block !important;
  align-items: unset !important;
  gap: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* Forcer le style uniquement sur les <li> du menu secondaire */
nav#block-lesmotsperdus-menusecondaire ul.navbar-nav > li {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

/* Liens du menu secondaire dans la sidebar */
nav#block-lesmotsperdus-menusecondaire .navbar-nav .nav-link {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.3rem;
  line-height: 2.5;
  text-transform: none;
  font-weight: normal;
  letter-spacing: normal;
  color: #f9f5e9;
  padding: 0;
  margin: 0;
  border-bottom: 1px dotted #f9f5e9;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

/* Hover cohérent */
nav#block-lesmotsperdus-menusecondaire .navbar-nav .nav-link:hover,
nav#block-lesmotsperdus-menusecondaire .navbar-nav .nav-link:focus {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}

.signature-bloc {
  display: flex;
  align-items: flex-start; /* Aligné sur le haut du texte */
  gap: 2rem;
  margin: 2rem 0;
}

.signature-logo {
  flex-shrink: 0;
}

.signature-logo img {
  width: 140px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1); /* Optionnel, pour fond sombre */
}

@media (max-width: 768px) {
  .signature-bloc {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .signature-texte {
    margin-top: 1rem;
  }
}

.signature-texte {
  color: #f9f5e9;
  font-family: 'ArbutusSlab', serif;
  line-height: 1.6;
}

.signature-nom {
  font-family: 'WsParadose', Georgia, serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.signature-nom .lettrine {
  font-size: 2.6rem;
  vertical-align: baseline;
  line-height: 1;
  display: inline-block;
}

.signature-texte em {
  font-style: italic;
}

.signature-texte a {
  color: #f9f5e9;
  border-bottom: 1px dotted #f9f5e9;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.signature-texte a:hover {
  color: #c04e3a;
  border-bottom-color: #c04e3a;
}

strong {
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  color: #f3e2bd;
  font-family: 'ArbutusSlab', serif;
}

ul.iconlist {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.iconlist li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 1rem;
}

ul.iconlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background-image: url('/themes/lesmotsperdus/img/list.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.section-webmaster img {
  max-width: 98%;
}

@media (min-width: 992px) {
  .section-webmaster img {
    max-width: 70%;
  }
}

.section-webmaster p {
  font-size: 1.3rem;
  text-align: left; /* ou simplement rien : par défaut */
  line-height: 1.8;
}

.survol {
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: none;
  z-index: 1;
}

.survol:hover {
  transform: scale(1.02) rotate(-0.5deg);
  filter: sepia(20%) brightness(105%) contrast(105%);
  z-index: 2;
}


.divider-webmaster {
  width: 100%;
  height: 48px;
  background-image: url('/themes/lesmotsperdus/img/dividerwebmaster.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.6;
}

/* Initial state */
.reveal-from-left,
.reveal-from-right {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(8px);
  transition: all 0.8s ease-out;
}

.reveal-from-left {
  transform: translateX(-40px);
}

/* Activated when in view */
.reveal-from-left.in-view, 
.reveal-from-right.in-view {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-from-left.in-view,
.reveal-from-right.in-view {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  padding: 0;
  margin: 0;
}


.image-comment {
  border-left: 4px solid #c04e3a;
  padding-left: 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color:rgba(165,165,165,1.00);
}

.scroll-reveal-text > * {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: all 0.8s ease-out;
}
.scroll-reveal-text.in-view > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


.scroll-reveal-text img {
  transition: transform 0.4s ease, filter 0.3s ease;
  transform-origin: center center;
}

.scroll-reveal-text img:hover {
  transform: scale(1.03);
}

/*TIMELINE*/

.timeline-page {
  position: relative;
}

.timeline-page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  z-index: 0;
}

.timeline-block {
  position: relative;
  padding: 2rem 0;
}

/* ✅ Écarte les contenus texte de la ligne centrale */
.timeline-block .timeline-content {
  padding-left: 2rem;
}

.timeline-block.flex-md-row-reverse .timeline-content {
  padding-left: 0;
  padding-right: 2rem;
}

.timeline-date span {
  font-size: 0.95rem;
  color: #aaa;
  font-style: italic;
}

.timeline-heading {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.timeline-divider {
  background-image: url(/themes/lesmotsperdus/img/dividerwebmaster.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 40px;
  margin-top: 1.5rem;
}

.timeline-period {
  position: relative;
  text-align: center;
  margin: 2rem 0;
  z-index: 1;
}

.timeline-period span {
  display: inline-block;
  background-color: #c04e3a;
	font-family: 'ArbutusSlab', serif;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
  animation: floatLabel 6s ease-in-out infinite;
}

@keyframes floatLabel {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-6px) rotate(-2deg);
  }
}

.timeline-page img {
  max-height: 600px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.timeline-date-description {
  font-size: 0.95rem;
  font-style: italic;
  color:rgba(165,165,165,1.00);
}

.timeline-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}


@media (max-width: 767px) {
  .timeline-heading {
    text-align: center;
  }
	
	  .timeline-page .timeline-divider {
    margin-left: auto;
    margin-right: auto;
  }
	
}



/* CSS */
#floating-names {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
	
}

#floating-names .name {
  position: absolute;
  display: inline-block;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
	border-bottom: none;
  font-size: 2rem;
  animation:
    drift 8s ease-in-out infinite alternate,
    glow 4s ease-in-out infinite alternate;
	  font-family: "WsParadose", Georgia, serif;
	 opacity: 0.3;
  pointer-events: none;       /* pas cliquable */
  cursor: default;            /* curseur normal */
  transition: opacity 0.3s ease;
}

/* Le seul nom actif : Leclerc */
#floating-names .name.featured {
  opacity: 1;
  pointer-events: auto;       /* cliquable */
  cursor: pointer;            /* main au hover */
	 transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Hover : couleur et lueur */
#floating-names .name.featured:hover {
  color: #f3e2bd!important;
  text-shadow: 0 0 10px #ddd;
	
}


#floating-names .name::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
  width: 1em;    /* ajuste selon la taille voulue */
  height: 1em;
  background-image: url("/themes/lesmotsperdus/img/beforename.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Flottement entre deux points définis par JS */
@keyframes drift {
  from { transform: translate(var(--x1), var(--y1)); }
  to   { transform: translate(var(--x2), var(--y2)); }
}

/* Lueur subtile en boucle */
@keyframes glow {
  from { text-shadow: 0 0 2px rgba(255,255,255,0.5); }
  to   { text-shadow: 0 0 8px rgba(255,200,150,0.8); }
}

/* ========== FORMULAIRE STYLÉ (existant) ========== */
.lmpformcss input[type="text"],
.lmpformcss input[type="email"],
.lmpformcss textarea,
.lmpformcss input[type="file"] {
  background: #f9f5e9;
  border: 2px solid #d6c7a5;
  color: #5a4a3a;
  padding: 12px 15px;
  margin: 0 5px 50px 0;
  transition: all 0.3s ease;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 8px !important;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.lmpformcss input[type="text"]:hover,
.lmpformcss input[type="email"]:hover,
.lmpformcss textarea:hover,
.lmpformcss input[type="file"]:hover {
  background: #fff8e8;
  border: 2px solid #b3a07a;
  box-shadow:
    0 0 0 4px rgba(179, 160, 122, 0.3),
    inset 0 0 8px rgba(179, 160, 122, 0.2);
  transform: scale(1.02);
}

.lmpformcss input[type="text"]:focus,
.lmpformcss input[type="email"]:focus,
.lmpformcss textarea:focus {
  outline: none;
  border-color: #9c8b6e;
  box-shadow:
    0 0 0 4px rgba(156, 139, 110, 0.4),
    inset 0 0 10px rgba(156, 139, 110, 0.2);
}

.lmpformcss label,
.lmpformcss .webform-label {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #fff;
  display: inline-block;
  margin-left: 0.7rem;
}

.lmpformcss h2,
.lmpformcss legend,
.lmpformcss .js-form-wrapper > h2 {
  text-align: center;
  width: 100%;
  font-family: "WsParadose", Georgia;
  font-size: 2rem;
}

.lmpformcss input::placeholder,
.lmpformcss textarea::placeholder {
  font-family: 'ArbutusSlab', serif;
  font-size: 1rem;
  color: #a99e88;
  font-style: italic;
  opacity: 1;
}

.lmpformcss input[type="submit"],
.lmpformcss button[type="submit"] {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  margin-top: 1.5rem;
  background: #c04e3a;
  color: #fff8e8 !important;
  padding: 12px 35px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  overflow: hidden;
}

.lmpformcss input[type="submit"]:hover,
.lmpformcss button[type="submit"]:hover {
  background: #a83d2b;
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2);
  background-image:
    linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(0, 0, 0, 0) 100%);
}

/* ========== CENTRAGE ========== */
.lmpformcss label,
.lmpformcss .webform-label {
  display: block;       /* labels prennent toute la largeur */
  text-align: center;   /* et sont centrés */
  margin-left: 0;       /* annule le margin-left précédent */
}

.lmpformcss .form-actions,
.lmpformcss .webform-actions {
  text-align: center;   /* centre tout le contenu du conteneur */
}

.lmpformcss .form-actions input[type="submit"],
.lmpformcss .form-actions button[type="submit"],
.lmpformcss .webform-actions input[type="submit"],
.lmpformcss .webform-actions button[type="submit"] {
  display: inline-block; /* pour que margin auto fonctionne */
  margin: 0 auto;        /* centre le bouton */
}

/* ========== MOBILE ========== */
@media (max-width: 767px) {
  .lmpformcss .form-item,
  .lmpformcss .webform-element {
    display: block;
    width: 90%;
    max-width: 340px;
    margin: 0 auto 15px;
  }
  .lmpformcss .form-actions,
  .lmpformcss .webform-actions {
    text-align: center;
  }
}

/* ========== CONTENEUR GÉNÉRAL ========== */
.lmpformcss {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: transparent;
  box-sizing: border-box;
}

/* Texte principal des paragraphes */
p.webformtexts, .webform-confirmation__message {
  font-size: 1.2rem;
  text-align: left;
  font-family: 'ArbutusSlab', serif;
}

/* Adaptation mobile */
@media (max-width: 767px) {
  p.webformtexts, .webform-confirmation__message {
    font-size: 0.8rem;
  }
}

.webform-confirmation__back {
  display: inline-block;             /* pour se comporter comme un bouton */
  font-family: 'ArbutusSlab', serif;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  margin-top: 1.5rem;
  background: #c04e3a;
  color: #fff8e8 !important;
  padding: 12px 35px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  text-decoration: none;             /* si c’est un lien */
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  overflow: hidden;
}

.webform-confirmation__back:hover {
  background: #a83d2b;
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2);
  background-image:
    linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(0, 0, 0, 0) 100%);
}

.bootstraptexts.webform-confirmation {
    text-align: center;
    margin-bottom: 50px;
}

/* Masquer le throbber dans le lien “Revenir au formulaire” */
.webform-confirmation__back .ajax-progress,
.webform-confirmation__back .ajax-progress-throbber,
.webform-confirmation__back .webform-ajax-indicator {
  display: none !important;
}

/* grise et désactive les liens marqués .link-disabled */
.footer-site a.link-disabled {
  color: #bbbbbb !important;        /* gris clair */
  text-decoration: none !important; /* retire le soulignement */
  pointer-events: none !important;  /* empêche le clic */
  cursor: default !important;       /* curseur normal */
}

@media (max-width: 767px) {
  p.accroche {
    font-size: 1.2rem;
    max-width: 100%;
  }
	
	.hero-inline-logo {
    width: 130px;
}

	
}

@media (max-width: 767px) {
  /* 1) Faire apparaître l’icône à gauche du label */
  .views-exposed-form .form-item label {
    display: none;
  }

  /* 2) Forcer le style du bouton “Rechercher” à être le même que sur desktop */
  .views-exposed-form .form-actions input[type="submit"],
  .views-exposed-form .form-actions button[type="submit"] {
    font-family: 'ArbutusSlab', serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.5px !important;
    margin-top: 1.5rem !important;
    background: #c04e3a !important;
    color: #fff8e8 !important;
    padding: 12px 35px !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    box-shadow:
      0 2px 5px rgba(0,0,0,0.2),
      inset 0 1px 1px rgba(255,255,255,0.3) !important;
    transition: all 0.4s cubic-bezier(0.65,0,0.35,1) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .views-exposed-form .form-actions input[type="submit"]:hover,
  .views-exposed-form .form-actions button[type="submit"]:hover {
    background: #a83d2b !important;
    transform: translateY(-2px) !important;
    box-shadow:
      0 4px 8px rgba(0,0,0,0.3),
      inset 0 2px 2px rgba(255,255,255,0.2) !important;
    background-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(0,0,0,0) 100%) !important;
  }
}


/* 1) Neutraliser le display:block sur toutes les tables sous 900px */
/*
@media (max-width: 900px) {
  table,
  table tbody,
  table thead,
  table tr,
  table th,
  table td {
    display: table !important;
    width: auto   !important;
  }
}$/

/* 2) Empilement “cartes” uniquement pour .table-cartes-zebree sous 767px */
@media (max-width: 767px) {
  /* on masque l’entête classique */
  .table-cartes-zebree thead {
    display: none !important;
  }

  /* chaque ligne devient un bloc indépendant */
  .table-cartes-zebree tbody {
    display: block !important;
  }
  .table-cartes-zebree tbody tr {
    display: block !important;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    overflow: hidden;
  }

  /* chaque cellule devient un “row” à l’intérieur de la carte */
  .table-cartes-zebree td {
    display: block !important;
    padding: .75rem 1rem;
    border-bottom: 1px solid #ccc;
    position: relative;
    text-align: left;
    background: #f9f5e9; /* ou votre couleur de fond */
  }
  .table-cartes-zebree td:last-child {
    border-bottom: none;
  }

  /* injecter l’étiquette de colonne avant chaque donnée */
  .table-cartes-zebree td:nth-of-type(1)::before { content: "Carte"          ; font-weight: bold; margin-bottom: .5rem; display: block; }
  .table-cartes-zebree td:nth-of-type(2)::before { content: "Expéditeur"     ; font-weight: bold; margin-bottom: .5rem; display: block; }
  .table-cartes-zebree td:nth-of-type(3)::before { content: "Destinataire"   ; font-weight: bold; margin-bottom: .5rem; display: block; }
  .table-cartes-zebree td:nth-of-type(4)::before { content: "Période"        ; font-weight: bold; margin-bottom: .5rem; display: block; }
  .table-cartes-zebree td:nth-of-type(5)::before { content: "Région"         ; font-weight: bold; margin-bottom: .5rem; display: block; }
  .table-cartes-zebree td:nth-of-type(6)::before { content: "Ville"          ; font-weight: bold; margin-bottom: .5rem; display: block; }
  .table-cartes-zebree td:nth-of-type(7)::before { content: "Date (cachet)"  ; font-weight: bold; margin-bottom: .5rem; display: block; }
}


@media (max-width: 991.98px) {
  .navbar-nav .nav-item .nav-link {
    position: relative;
    padding-left: 36px;
  }

  .navbar-nav .nav-item .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('/themes/lesmotsperdus/img/list.svg');
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* ▌ BANNIÈRE FLEX SUR DESKTOP ▐ */
.eu-cookie-compliance-banner.eu-cookie-compliance-banner-info.eu-cookie-compliance-banner--opt-in {
  background-color: #212529;
  width: 90%;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  box-sizing: border-box;
  
  /* NEW: flex layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* pour le responsive */
  gap: 20px;
  text-align: left;
}

/* ▌ TEXTE ▐ */
.eu-cookie-compliance-message {
  font-family: 'ArbutusSlab', serif;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 70%;
  margin: 0;
  text-align: left;
  flex: 1 1 auto;
}

/* ▌ CONTENEUR BOUTONS ▐ */
.eu-cookie-compliance-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  flex-shrink: 0;
}

/* ▌ BOUTONS (STYLE COMMUN) ▐ */
.eu-cookie-compliance-buttons button {
  font-family: 'ArbutusSlab', serif;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  background: #c04e3a;
  color: #fff8e8 !important;
  padding: 12px 35px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  text-decoration: none;
}

/* ▌ BOUTON REFUS ▐ */
.eu-cookie-compliance-buttons .decline-button {
  background: #6c757d;
}

.eu-cookie-compliance-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* ▌ RESPONSIVE : empile sur petit écran ▐ */
@media (max-width: 768px) {
  .eu-cookie-compliance-banner.eu-cookie-compliance-banner-info.eu-cookie-compliance-banner--opt-in {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
	
	
	
.eu-cookie-compliance-banner.eu-cookie-compliance-banner-info.eu-cookie-compliance-banner--default {
    PADDING: 15px;
    margin: 0px 20px 0px 20px;
    background-color: oklch(0.15 0 0 / 0.60);
	-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
  
  .eu-cookie-compliance-message {
    max-width: 100%;
    text-align: center;
  }
  
  .eu-cookie-compliance-buttons {
    justify-content: center;
    margin-top: 20px;
  }
.hero-carousel-sub {

    margin-top: 1rem;/*petits styles supplémentaires ajoutés ici et là*/
}
	
	.view-recherche-cartes-postales .views-field-field-image2 a::after,
  .view-recherche-cartes-postales .views-field-field-image2 a::before {
    display: none !important;
  }
	.image-comment {
 
    margin-bottom: 2rem;
  }
	.cartes-postales-slider a
	{font-size: 1.4rem;}
	
	
	.timeline-block .timeline-content {
    padding-left: 0rem;
}
	
	.timeline-block.flex-md-row-reverse .timeline-content {
    padding-right: 0rem;
}
	.timeline-block .timeline-content
 {
    padding-left: 0.8rem;
}

  }


.cartes-postales-slider .field-content {
  position: relative;
  display: inline-block;
}

.cartes-postales-slider .field-content img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; /* image en dessous */
  border: 1px solid #212529;
}

.cartes-postales-slider .field-content:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/masque.webp') center/cover no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

.views-field.views-field-title {
    text-align: center;
}


/* iPad portrait (768px et moins) */
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .tes-cartes-container,  /* remplace par la classe parent qui contient tes 3 blocs */
  .row-cartes,            /* si tu utilises .row de Bootstrap, garde cette ligne */
  .bloc-cartes-wrapper {  /* ou le conteneur spécifique de tes 3 colonnes */
    display: flex;
    flex-direction: column;
    align-items: center; /* pour les centrer si tu veux */
  }

  .bloc-carte,            /* ta classe individuelle de carte */
  .col-md-4,              /* si tu utilises Bootstrap */
  .card-custom {          /* ta classe personnalisée */
    width: 100%;
    max-width: 600px; /* optionnel : pour limiter la largeur */
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
  .cartes-container,
  .row-cartes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .bloc-carte,
  .col-md-4,
  .card-custom {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .custom-card
  {margin-bottom: 2rem;}
  
}

/* Forcer la navbar à passer en version mobile à 1024px (iPad portrait) */
@media (max-width: 1024px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    flex-wrap: wrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }

  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }

  .navbar-expand-lg .navbar-collapse.collapse.show {
    display: block !important;
  }
}



/* -------------------------------
   TÉLÉPHONES MOBILES (jusqu’à 767px)
   ------------------------------- */
@media only screen and (max-width: 767px) {

  .views-field.views-field-field-transcription .field-content p {
    text-align: left!important;
      line-height: 2.2rem;
      padding: 2rem!important;
  }

  p.regionacc {
    text-align: left!important;
    padding: 1rem 1rem 0 2rem!important;
    font-size: 1.2rem!important;
    line-height: 2.1rem!important;
  }
    

  #block-lesmotsperdus-breadcrumbs ol.breadcrumb {
    flex-direction: column;
  }
        /* Coin haut gauche */
.views-field.views-field-field-transcription .field-content p::before {

  left: 1rem!important;
}

/* Coin bas droite */
.views-field.views-field-field-transcription .field-content p::after {

  right: 1rem!important;
}

/* Coin haut droite (sur .field-content) */
.views-field.views-field-field-transcription .field-content::before {

  right: 1rem!important;
}

/* Coin bas gauche (sur .field-content) */
.views-field.views-field-field-transcription .field-content::after {

  left: 1rem!important;

}
}



@media only screen and (min-width: 768px) and (max-width: 1023px) {

  div#views-bootstrap-images-field-image2-block-1 {
    padding: 3rem!important;
  }
      .views-field.views-field-field-transcription .field-content p {
    text-align: left!important;
          line-height: 2.2rem;
          padding: 2rem!important;
  }

  p.regionacc {
    text-align: left!important;
    padding: 1rem 1rem 0 2rem!important;
    font-size: 1.2rem!important;
    line-height: 2.1rem!important;
  }
    
    /* Coin haut gauche */
.views-field.views-field-field-transcription .field-content p::before {

  left: 0rem!important;
}

/* Coin bas droite */
.views-field.views-field-field-transcription .field-content p::after {

  right: 0rem!important;
}

/* Coin haut droite (sur .field-content) */
.views-field.views-field-field-transcription .field-content::before {

  right: 0rem!important;
}

/* Coin bas gauche (sur .field-content) */
.views-field.views-field-field-transcription .field-content::after {

  left: 0rem!important;

}
    
    
}



/* === EXTRA CSS FIXES === */
.node--type-article .field--name-body h4 {
    font-size: 2rem!important;
    margin: 2rem 0 2rem 0;
}

/* Centrer les images uniquement dans le contenu principal */
body.page-node-type-article .image-wrapper-with-corners {
  text-align: center;
}

body.page-node-type-article .image-wrapper-with-corners img {
  display: inline-block;
  margin: 0 auto;
}

/* Aligner à gauche les images de la sidebar */
.region-sidebar-second .image-wrapper-with-corners,
.region-sidebar-second .image-wrapper-with-corners img {
  text-align: left;
  margin: 0;
  display: block;
}


/* =========================================================
   TABLES STACK – VERSION STABLE iPHONE / iPAD
   ========================================================= */
@media only screen and (max-width: 1023px) {

  /* On neutralise totalement le comportement "table" */
  table.table-cartes-zebree,
  .table-responsive-stack {
    display: block !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
  }

  table.table-cartes-zebree thead,
  .table-responsive-stack thead {
    display: none !important;
  }

  table.table-cartes-zebree tbody,
  .table-responsive-stack tbody {
    display: block !important;
    width: 100% !important;
  }

  table.table-cartes-zebree tr,
  .table-responsive-stack tr {
    display: block !important;
    border: 1px solid #4f4f4f !important;
    border-radius: 0.25rem !important;
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
    background-color: transparent !important;
  }

  table.table-cartes-zebree td,
  .table-responsive-stack td {
    display: flex !important; /* clé pour l'empilement iPad */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    border: none !important;
    padding: 0.5rem 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  table.table-cartes-zebree td::before,
  .table-responsive-stack td::before {
    content: attr(data-label);
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    font-weight: bold;
    background: #212529;
    color: #fff;
    font-family: 'ArbutusSlab';
    text-align: center;
    margin-bottom: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
  }

  table.table-cartes-zebree td img,
  .table-responsive-stack td img {
    max-width: 120px !important;
    height: auto !important;
    display: block !important;
    margin: 0.25rem auto 0 !important;
  }
}

@media only screen and (max-width: 1023px) {
  .table-cartes-zebree td:nth-child(1)::before { content: "Carte"; background: #c04e3a; }
  .table-cartes-zebree td:nth-child(2)::before { content: "Expéditeur"; }
  .table-cartes-zebree td:nth-child(3)::before { content: "Destinataire"; }
  .table-cartes-zebree td:nth-child(4)::before { content: "Période"; }
  .table-cartes-zebree td:nth-child(5)::before { content: "Région"; }
  .table-cartes-zebree td:nth-child(6)::before { content: "Ville"; }
  .table-cartes-zebree td:nth-child(7)::before { content: "Date (cachet)"; }
}

/* =============================
   STYLE UNIFIÉ – TABLES EMPILÉES
   ============================= */
@media only screen and (max-width: 1023px) {
  .table-cartes-zebree,
  .table-responsive-stack {
      width: 100% !important;
      display: block !important;
      border-collapse: collapse !important;
      border-spacing: 0 !important;
      background: #272b2f !important;
  }

  .table-cartes-zebree tr,
  .table-responsive-stack tr {
      display: block !important;
      margin-bottom: 1.2rem !important;
      border: 1px solid rgba(255,255,255,0.2) !important;
      border-radius: 0.6rem !important;
      background: rgba(20, 20, 20, 0.9) !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.4);
      padding: 0.75rem 1rem !important;
  }

  .table-cartes-zebree td,
  .table-responsive-stack td {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100% !important;
      text-align: center !important;
      border: none !important;
      color: #e5e0d5 !important; /* ton beige doux */
      font-family: 'ArbutusSlab', serif;
      font-size: 1.1rem;
      line-height: 1.6rem;
      padding: 0.4rem 0.6rem !important;
      background: transparent !important;
      box-sizing: border-box;
  }

  .table-cartes-zebree td::before,
  .table-responsive-stack td::before {
      content: attr(data-label);
      display: block;
      font-weight: 700;
      font-style: italic;
      color: #d5cdbb;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 0.6rem;
      padding: 0.5rem 1rem;
      margin-bottom: 0.5rem;
      background: #333335; /* gris légèrement plus clair */
      text-align: center;
      font-family: 'ArbutusSlab', serif;
  }

  .table-cartes-zebree td.views-field-field-image2 img,
  .table-responsive-stack td.views-field-field-image2 img {
      max-width: 120px !important;
      height: auto !important;
      display: block !important;
      margin: 0.5rem auto !important;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.2);
  }
}