/* -----------------------------------------------------------
   FILE: style.css
   ROLE: Mise en page, Typographie, Espacements, Composants UI
   PROJECT: Paysans en Vacances
   DEPENDANCES: colors.css (chargé avant), Bootstrap 5 (base)
   ----------------------------------------------------------- */

.float-left { float: left; }
.float-right { float: right; }
.clearfix { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }

#edit-body-0-format { display:none; }

/* ===========================================================
   1. TYPOGRAPHIE & HIÉRARCHIE
   =========================================================== */

body {
  font-family: var(--bs-font-sans-serif); /* Hérité de Bootstrap ou défini dans colors.css */
  line-height: 1.6;
  font-size: 1.05rem; /* Légèrement plus grand pour la lisibilité "senior/confort" */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em; /* Serre légèrement les titres pour un aspect plus moderne */
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

h2 {
  font-size: 2rem;
  border-left: 5px solid var(--pev-vert-feuille);
  padding-left: 1rem;
  margin-top: 2.5rem;
}

h3 {
  font-size: 1.5rem;
  color: var(--pev-terre-clair);
}

p {
  margin-bottom: 1.5rem;
  color: var(--pev-gris-texte);
}

a { font-weight:500; }


.btn {
    --bs-btn-font-weight: 500;
}


/* ===========================================================
   2. LAYOUT GLOBAL & CONTENEURS
   =========================================================== */

/* Conteneur principal : on évite le full-width trop large sur écrans géants */
.container,
.container-fluid {
  max-width: 1400px; /* Largeur max confortable */
  margin-left: auto;
  margin-right: auto;
}

/* Sections avec fond alterné pour rythmer la lecture */
section {
  padding: 2rem 0;
}

section.bg-light-custom {
  background-color: var(--pev-creme);
}

/* ===========================================================
   3. COMPOSANT : CARTE "FERME" (Profile Teaser)
   =========================================================== */

/* La carte conteneur */
.card-ferme {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
/*  height: 100%; /* Pour aligner les cartes de même hauteur dans une grid */
  display: flex;
  flex-direction: column;
}

.card-ferme:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--pev-vert-feuille);
}

/* Image de la carte */
.card-ferme-image-wrapper {
  position: relative;
/*  height: 220px;*/
  overflow: hidden;
  border-radius: 5px;
}

.card-ferme-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recadre proprement sans déformer */
  transition: transform 0.5s ease;
}

.card-ferme:hover .card-ferme-image {
  transform: scale(1.05); /* Zoom doux au survol */
}

/* Badge "Label" sur l'image (ex: Bio, CIVAM) */
.card-ferme-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--pev-vert-feuille);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Corps de la carte */
.card-ferme-body {
  padding: 1.5rem;
  flex-grow: 1; /* Pousse le footer de la carte vers le bas */
  display: flex;
  flex-direction: column;
}

.card-ferme-title a {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  color: var(--pev-terre-fonce);
  text-align:center;
}

.card-ferme-location {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Liste des caractéristiques (Animaux, Superficie) */
.card-ferme-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-ferme-features li {
  font-size: 0.85rem;
  background: var(--pev-creme);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--pev-gris-leger);
  color: var(--pev-gris-texte);
}

/* Bouton d'action en bas de carte */
.card-ferme-action {
  margin-top: auto; /* Colle le bouton en bas */
  padding-top: 1rem;
  text-align: center;
}

/* ===========================================================
   4. COMPOSANT : FICHES DÉTAILLÉES (Profile Full / Node)
   =========================================================== */

/* Galerie Photo Grid */
.ferme-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 2rem;
}

.ferme-gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.ferme-gallery-item:hover {
  border-color: var(--pev-terre-clair);
}

.ferme-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bloc "Infos Clés" (Sidebar ou encart) */
.infos-cles-box {
  background: var(--pev-creme);
  border-left: 4px solid var(--pev-terre-clair);
  padding: 1.5rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: 2rem;
}

.infos-cles-box h4 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--pev-terre-fonce);
}

.infos-cles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.infos-cles-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
}

.infos-cles-list li:last-child {
  border-bottom: none;
}

/* ===========================================================
   5. FORMULAIRES & FIELD GROUPS (Vertical Tabs)
   =========================================================== */

/* Correction des onglets verticaux de Drupal pour Bootstrap 5 */
.vertical-tabs {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  border: none;
}

.vertical-tabs-menu {
  flex: 0 0 250px; /* Largeur fixe du menu latéral */
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: none;
  padding: 0;
}

.vertical-tabs-menu li {
  list-style: none;
  margin: 0;
}

.vertical-tabs-menu button {
  width: 100%;
  text-align: left;
  padding: 1rem;
  background: #f1f1f1;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  font-weight: 600;
  color: var(--pev-gris-texte);
  transition: all 0.2s;
}

.vertical-tabs-menu button:hover {
  background: #e9ecef;
}

.vertical-tabs-menu button.active {
  background: var(--pev-terre-clair);
  color: #fff;
  border-color: var(--pev-terre-clair);
}

.vertical-tabs-panes {
  flex: 1;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  padding: 2rem;
  min-height: 400px;
}

.vertical-tab-pane {
  display: none; /* Géré par JS Drupal, mais sécurité CSS */
  animation: fadeIn 0.3s ease-in-out;
}

.vertical-tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Champs de formulaire */
.form-control,
.form-select {
  border-radius: 6px;
  border-color: var(--pev-gris-leger);
  padding: 0.75rem;
  font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 0.2rem rgba(85, 139, 47, 0.25);
}

/* ===========================================================
   6. UTILITAIRES & BADGES
   =========================================================== */

/* Badge personnalisé pour les taxonomies */
.badge-ferme {
  display: inline-block;
  padding: 15px 25px;
  font-size: 0.85em;
  font-weight: 600;
  border-radius: 50px; /* Pill shape */
  background-color: var(--pev-creme);
  color: var(--pev-terre-fonce);
  border: 1px solid var(--pev-gris-leger);
}

.badge-ferme.bio {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-color: var(--pev-vert-feuille);
}

/* Espacements utilitaires spécifiques */
.mt-custom { margin-top: 3rem; }
.mb-custom { margin-bottom: 3rem; }

/* ===========================================================
   7. RESPONSIVE AJUSTMENTS
   =========================================================== */

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  
  .vertical-tabs {
    flex-direction: column;
  }
  
  .vertical-tabs-menu {
    flex: none;
    width: 100%;
    flex-direction: row;
    overflow-x: auto; /* Scroll horizontal si trop d'onglets */
    padding-bottom: 10px;
  }
  
  .vertical-tabs-menu button {
    white-space: nowrap;
    width: auto;
  }
  
  .card-ferme-image-wrapper {
    height: 180px;
  }
}


/* -----------------------------------------------------------
   NAVBAR ASSEMBLY (Pour l'assemblage des blocs Drupal)
   ----------------------------------------------------------- */

/* Le conteneur de la région primary_menu devient la navbar Bootstrap */
.region-primary_menu {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo à gauche, Menu à droite */
  width: 100%;
}

/* Si tu veux le logo centré et le menu autour, change par 'center' et gère l'ordre */

/* Ajustement du bloc Logo pour qu'il prenne la classe .navbar-brand */
.region-primary_menu #block-pevbootstrap-branding {
  margin: 0;
}

/* Ajustement du bloc Menu pour qu'il prenne la classe .navbar-nav */
.region-primary_menu #block-pevbootstrap-main-menu {
  margin: 0;
}

/* Force les liens du menu à être des nav-link Bootstrap */
.region-primary_menu ul.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem; /* Espacement entre les items du menu */
}

.region-primary_menu ul.menu li {
  display: flex;
}

.region-primary_menu ul.menu li a {
  /* Hérite de .nav-link via ton CSS global ou ajoute-le ici */
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 4px;
}

/* Gestion du menu mobile (Hamburger) si Drupal ne le sort pas bien */
.navbar-toggler {
  display: none; /* Sera forcé en block par le media query plus bas */
  border-radius: 10px;
}

@media (max-width: 991px) {
  .region-primary_menu {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .region-primary_menu ul.menu {
    flex-direction: column;
    width: 100%;
    display: none; /* Nécessite le JS de Bootstrap pour le toggle */
  }
  
  .navbar-toggler {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

/* Force l'affichage horizontal des listes de termes (même en div) */
.card-ferme-features .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.card-ferme-features .field__item {
  font-size: 0.85rem;
  background: var(--pev-creme);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--pev-gris-leger);
  color: var(--pev-gris-texte);
  display: inline-block; /* Sécurité */
}



/* Formulaire d'inscription */
.alert {
  color: var(--pev-vert-feuille);
  font-size: inherit;
  font-weight: inherit;
}
.alert-success.bg-white  {
  color: var(--pev-vert-feuille);
}
.alert-heading {
  color: var(--pev-vert-feuille);
}
.text-success  {
  color: var(--pev-vert-feuille);
}
.nav-link--inscription-volontaire {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}

.nav-link--inscription-paysan {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* -----------------------------------------------------------
   SEARCH DATES - ALIGNEMENT STYLE AIRBNB
   ----------------------------------------------------------- */
#edit-field-dates-wrapper {
  display: flex;
  gap: 1rem; /* Espace entre les deux dates */
  align-items: flex-end; /* Aligner les labels et inputs proprement */
}

#edit-field-dates-wrapper .form-item-field-dates-min,
#edit-field-dates-wrapper .form-item-field-dates-max {
  flex: 1; /* Chaque champ prend 50% de la largeur dispo */
  margin-bottom: 0;
}

/* Sur mobile, on repasse en colonne pour que ce soit lisible */
@media (max-width: 576px) {
  #edit-field-dates-wrapper {
    flex-direction: column;
    gap: 0.5rem;
  }
}


/* ===========================================================
   RECHERCHE DATES - STYLE AIRBNB
   Objectif : Aligner les deux champs (Début/Fin) côte à côte
   et nettoyer les labels pour un look plus compact.
   =========================================================== */

/* 1. Le Conteneur Principal (Fieldset) */
#edit-field-dates-wrapper {
  display: flex;
  flex-direction: column; /* Par défaut en colonne pour mobile */
  gap: 0.5rem;
  background: #fff; /* Fond blanc pour détacher du fond de page */
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--pev-gris-leger);
}

/* 2. Sur Desktop : On passe en ligne (Côte à côte) */
@media (min-width: 768px) {
  #edit-field-dates-wrapper {
    flex-direction: row;
    align-items: flex-end; /* Aligner les inputs en bas */
    gap: 1rem;
    padding: 0.5rem 1rem; /* Padding plus compact */
  }

  /* On regroupe visuellement les deux inputs comme un seul bloc */
  #edit-field-dates-wrapper::after {
    content: '→'; /* Petite flèche pour indiquer la période */
    font-size: 1.2rem;
    color: var(--pev-terre-clair);
    margin-bottom: 0.5rem; /* Pour aligner avec les inputs */
    font-weight: bold;
  }
}

/* 3. Les conteneurs individuels des inputs (Min et Max) */
#edit-field-dates-wrapper .form-item-field-dates-min,
#edit-field-dates-wrapper .form-item-field-dates-max {
  flex: 1; /* Chaque champ prend 50% de la largeur dispo */
  margin-bottom: 0;
  position: relative;
}

/* 4. Les Labels (Min/Maximum) -> On les transforme en "Placeholder" visuel */
#edit-field-dates-wrapper label {
  position: absolute;
  top: -10px;
  left: 10px;
  background: #fff;
  padding: 0 5px;
  font-size: 0.75rem;
  color: var(--pev-terre-clair);
  font-weight: 600;
  text-transform: uppercase;
  pointer-events: none; /* Permet de cliquer "à travers" le label */
  z-index: 2;
}

/* 5. Les Inputs eux-mêmes */
#edit-field-dates-wrapper input.form-control {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 6px;
  background-color: var(--pev-creme);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#edit-field-dates-wrapper input.form-control:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
}

/* 6. Nettoyage Mobile : On retire la flèche et on empile */
@media (max-width: 767px) {
  #edit-field-dates-wrapper::after {
    display: none;
  }
  #edit-field-dates-wrapper {
    padding: 1rem;
  }
}

/* ===========================================================
   10. MOTEUR DE RECHERCHE : FACETTES & FILTRES (VERSION FINALE)
   Philosophie : Grille unifiée, Dropdown custom, Dates épurées.
   =========================================================== */

/* --- 1. CONTENEUR GLOBAL (La Grille) --- */
/* On cible la région où sont placés tes blocs facettes. 
   Si tes blocs sont dans une région 'content' ou 'filter_bar', adapte le sélecteur.
   Ici, on suppose qu'ils sont directement dans le contenu de la vue ou une région dédiée. */

.view-id-chercher_vacances .view-header,
.region-content .block-facet-block,
.facets-widget-dropdown,
.facets-widget-date_range {
  box-sizing: border-box;
}

/* Création de la grille pour aligner Région et Dates côte à côte */
/* Note : Si tes blocs sont dans des régions différentes, il faudra wrapper le tout 
   dans un <div> custom dans le template, ou utiliser flexbox sur le parent commun.
   Ici, on style les blocs individuellement pour qu'ils s'intègrent dans un flux flex/grid existant. */

/* --- 2. BLOC FACETTE : RÉGION (Dropdown Custom) --- */

/* Le conteneur du bloc (pour l'intégrer dans la grille) */
#block-pev-bootstrap-region,
.block-facet--dropdown {
  flex: 0 0 calc(30% - 1rem); /* Largeur ~30% comme souhaité */
  max-width: calc(30% - 1rem);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Le Titre H2 "Région" */
#block-pev-bootstrap-region h2,
.block-facet--dropdown h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

/* Cacher la liste <ul> native générée par JS (elle est dupliquée en <select>) */
.facets-widget-dropdown ul.facet-inactive,
.facets-widget-dropdown ul.js-facets-dropdown-links {
  display: none !important;
}

/* Le Label (souvent caché mais présent pour l'accessibilité) */
.facets-widget-dropdown label#facet_region_label {
  display: none; /* On utilise le H2 du bloc comme label visuel */
}

/* Le Select (Notre belle dropdown custom) */
.facets-widget-dropdown select.facets-dropdown,
.facets-widget-dropdown select.item-list__dropdown {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* Espace pour la flèche */
  font-size: 1rem;
  font-weight: 500;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Cache la flèche native */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Flèche custom SVG (Couleur Terre) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235D4037' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* Hover & Focus Région */
.facets-widget-dropdown select.facets-dropdown:hover,
.facets-widget-dropdown select.facets-dropdown:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
}

/* --- 3. BLOC FACETTE : PÉRIODE CONCERNÉE (Dates) --- */

#block-pev-bootstrap-periodeconcernee-2,
.block-facet--date-range {
  flex: 0 0 calc(30% - 1rem); /* Même largeur que Région */
  max-width: calc(30% - 1rem);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Le Titre H2 "Période concernée" */
#block-pev-bootstrap-periodeconcernee-2 h2,
.block-facet--date-range h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

/* La liste <ul> qui contient les deux dates */
.facets-widget-date_range ul.item-list__date_range {
  display: -webkit-inline-box;
  flex-direction: column; /* L'un sous l'autre (Du / Au) */
  gap: 0.8rem; /* Espacement entre les deux champs */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Les items de liste (li) */
.facets-widget-date_range ul.item-list__date_range li {
  margin: 0 15px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Les conteneurs de formulaire internes (js-form-item) */
.facets-widget-date_range .js-form-item,
.facets-widget-date_range .form-type-date {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Les Labels "Du" et "Au" */
.facets-widget-date_range label[for$="_min"],
.facets-widget-date_range label[for$="_max"] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pev-vert-feuille); /* Touche de vert pour les dates */
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: block;
}

/* Les Inputs Date */
.facets-widget-date_range input.form-control[type="date"],
.facets-widget-date_range input.facet-date-range {
  width: 100%;
  padding: 0.75rem;
  font-size: 0.95rem;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  transition: all 0.3s ease;
  font-family: inherit; /* Hérite de la police du site */
}

/* Hover & Focus Dates */
.facets-widget-date_range input.form-control[type="date"]:hover,
.facets-widget-date_range input.facet-date-range:hover {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
}

.facets-widget-date_range input.form-control[type="date"]:focus,
.facets-widget-date_range input.facet-date-range:focus {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
  background-color: #fff;
}

/* --- 4. WRAPPER DE GRILLE (À ajouter si nécessaire) --- */
/* Si tes blocs ne s'alignent pas automatiquement, ajoute cette classe 
   à un bloc "Conteneur" dans Drupal ou via un petit hook_preprocess, 
   ou applique ce style à la région qui contient les facettes. */

.region-content, 
.view-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* Espace entre Région, Dates et autres filtres */
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 2rem;
}

/* --- 5. RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
  /* Tablette : 2 colonnes (Région et Dates côte à côte) */
  #block-pev-bootstrap-region,
  .block-facet--dropdown,
  #block-pev-bootstrap-periodeconcernee-2,
  .block-facet--date-range {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

@media (max-width: 768px) {
  /* Mobile : 1 colonne (Tout empilé) */
  .region-content, 
  .view-header {
    flex-direction: column;
    gap: 1rem;
  }

  #block-pev-bootstrap-region,
  .block-facet--dropdown,
  #block-pev-bootstrap-periodeconcernee-2,
  .block-facet--date-range {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  
  /* Ajustement des inputs dates sur mobile */
  .facets-widget-date_range input.form-control[type="date"] {
    font-size: 1rem; /* Évite le zoom auto sur iOS */
  }
}

/* ===========================================================
   11. ALIGNEMENT FACETTES (RÉGION & DATES) - BASÉ SUR SAMPLE-STYLE
   Réutilisation de la logique .search-filters-wrapper adaptée aux blocs
   =========================================================== */

/* 1. COMPORTEMENT GLOBAL (Inspiré de ta section 9) */
/* On applique le comportement "horizontal" directement à nos blocs */
.facet-filter-item {
  display: inline-block !important;       /* Comme tes anciens filtres */
  vertical-align: top !important;         /* Alignement en haut */
  margin-bottom: 1.5rem !important;
  margin-right: 1.5rem !important;        /* Espace entre Région et Dates */
  box-sizing: border-box;
}

/* 2. LARGEURS SPÉCIFIQUES (Inspiré de ta section 9 - Ligne 2) */
/* Région prend ~30% (comme dans ton exemple ajusté) */
.facet-filter-item.block-facet--dropdown {
  width: calc(30% - 1rem) !important;
  max-width: calc(30% - 1rem) !important;
}

/* Dates prend ~30% aussi pour être aligné */
.facet-filter-item.block-facet--date-range {
  width: calc(30% - 1rem) !important;
  max-width: calc(30% - 1rem) !important;
}

/* 3. STYLE INTERNE : RÉGION (Dropdown) */
/* On reprend ton style select de la section "STYLE DU FILTRE RÉGION" */
.facet-filter-item.block-facet--dropdown h2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

.facet-filter-item.block-facet--dropdown ul.facet-inactive,
.facet-filter-item.block-facet--dropdown ul.js-facets-dropdown-links {
  display: none !important;
}

.facet-filter-item.block-facet--dropdown select.facets-dropdown,
.facet-filter-item.block-facet--dropdown select.item-list__dropdown {
  width: 100% !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235D4037' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.facet-filter-item.block-facet--dropdown select.facets-dropdown:focus {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
  background-color: #fff;
}

/* 4. STYLE INTERNE : DATES (Date Range) */
/* On reprend ton style inputs de la section 9 */
.facet-filter-item.block-facet--date-range h2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

.facet-filter-item.block-facet--date-range ul.item-list__date_range {
  padding: 0;
  margin: 0;
  list-style: none;
}

.facet-filter-item.block-facet--date-range .js-form-item,
.facet-filter-item.block-facet--date-range .form-type-date {
  display: -webkit-inline-box;
  margin-bottom: 0.8rem; /* Espace entre Du et Au */
}

.facet-filter-item.block-facet--date-range label[for$="_min"],
.facet-filter-item.block-facet--date-range label[for$="_max"] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pev-vert-feuille);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: block;
  padding-top: 15px;
  padding-right: 7px;
}

.facet-filter-item.block-facet--date-range input.form-control[type="date"],
.facet-filter-item.block-facet--date-range input.facet-date-range {
  width: 100% !important;
  padding: 0.75rem;
  font-size: 0.95rem;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.facet-filter-item.block-facet--date-range input.form-control[type="date"]:focus {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
  background-color: #fff;
}

/* 5. CLEARFIX (Pour la carte qui passe dessous) */
/* Puisque tu as ajouté la classe clearfix au contenu, on s'assure que ça nettoie bien */
main.main-content#content::after {
  content: "";
  display: table;
  clear: both;
}

/* 6. RESPONSIVE (Inspiré de ta section 9) */
@media (max-width: 991px) {
  .facet-filter-item {
    width: calc(48% - 1rem) !important; /* 2 par ligne */
    max-width: calc(48% - 1rem) !important;
  }
}

@media (max-width: 768px) {
  .facet-filter-item {
    width: 100% !important; /* 1 par ligne */
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}


/* ===========================================================
   COMPOSANT : FACETTES (FILTRES DE RECHERCHE) - VERSION FINALE
   Transformation des checkboxes en boutons pilules
   =========================================================== */

/* 1. Conteneur de la liste (ul) */
.facets-widget-checkbox ul.facet-inactive,
.facets-widget-checkbox ul.js-facets-checkbox-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.facets-widget-checkbox .form-check {
  padding: 0;
}


/* 2. L'élément de liste (li) - C'est lui qui porte le style de fond/bordure */
.facets-widget-checkbox li.facet-item {
  margin: 0;
  display: inline-block;
  position: relative; /* Pour le positionnement si besoin */
}

/* 3. Cacher la checkbox native */
.facets-widget-checkbox input.facets-checkbox,
.facets-widget-checkbox input.form-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

/* 4. Le Label : On retire bordure et fond pour laisser le LI gérer le visuel 
   OU on style le label comme le bouton complet mais sans double bordure */
.facets-widget-checkbox label.form-check-label {
  display: inline-flex; /* Flex pour aligner texte et compteur */
  align-items: center;
  gap: 4px; /* Espace entre le texte et le compteur */
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none !important;
  margin: 0; /* Reset margin Bootstrap */
}

.facets-widget-checkbox .facets-reset label.form-check-label {
  color: red;
  border: 1px solid red;
}

/* 5. Le Span "Value" : On s'assure qu'il n'a PAS sa propre bordure/fond */
.facets-widget-checkbox .facet-item__value {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font-weight: inherit; /* Hérite du gras du label */
  color: inherit; /* Hérite de la couleur du label */
}

/* 6. Le Compteur : Style discret */
.facets-widget-checkbox .facet-item__count {
  font-size: 0.8em;
  opacity: 0.8;
  font-weight: 400;
  color: inherit; /* Même couleur que le texte */
  margin-left: 2px;
}

/* 7. État HOVER (Survol) */
.facets-widget-checkbox li.facet-item:hover label.form-check-label {
  background-color: var(--pev-vert-clair);
  border-color: var(--pev-vert-feuille);
  color: #2e5c1f;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 8. État ACTIF / COCHÉ (Le plus important !)
   On cible le LI qui a la classe .active (ajoutée par JS Facettes)
   ET on force le style sur le label à l'intérieur */
.facets-widget-checkbox li.facet-item.active label.form-check-label {
  background-color: var(--pev-vert-feuille) !important;
  border-color: var(--pev-vert-feuille) !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(85, 139, 47, 0.3);
}

/* Fallback : Si le module utilise aussi le :checked natif */
.facets-widget-checkbox input.facets-checkbox:checked + label.form-check-label {
  background-color: var(--pev-vert-feuille) !important;
  border-color: var(--pev-vert-feuille) !important;
  color: #fff !important;
}

/* 9. Titre de la facette (h2) */
.block-facet-block h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1rem;
  border-left: 4px solid var(--pev-terre-clair);
  padding-left: 0.8rem;
  display: block;
}

/* 10. Mobile */
@media (max-width: 768px) {
  .facets-widget-checkbox ul.facet-inactive {
    gap: 0.4rem;
  }
  .facets-widget-checkbox label.form-check-label {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}


/* ===========================================================
   COMPOSANT : GRILLE DE CARTES "VACANCES" (VIEW LIST)
   Application du style .card-ferme à la vue de liste
   =========================================================== */

/* 1. Le Conteneur de la Vue (La Grille)
   On cible le .view-content de ta vue spécifique pour ne pas casser ailleurs
*/
.view-id-chercher_vacances.view-display-id-search_list .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Grille auto-adaptive */
  gap: 2rem; /* Espacement entre les cartes */
  padding: 2rem 0;
  margin: 0;
  list-style: none;
}

/* 2. La Carte Individuelle (.views-row)
   On transforme la row Drupal en une carte complète
*/
.view-id-chercher_vacances.view-display-id-search_list .views-row {
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color, #e0e0e0);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%; /* Pour que toutes les cartes aient la même hauteur dans la grille */
  position: relative;
}

/* Effet de survol sur la carte */
.view-id-chercher_vacances.view-display-id-search_list .views-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--pev-vert-feuille);
}

/* 3. L'Image de la carte
   On force l'image à prendre toute la largeur et une hauteur fixe
*/
.view-id-chercher_vacances.view-display-id-search_list .card-ferme-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px; /* Hauteur fixe pour uniformiser */
  overflow: hidden;
  background-color: var(--pev-gris-leger); /* Fond gris si pas d'image */
  margin: 0;
}

.view-id-chercher_vacances.view-display-id-search_list .card-ferme-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recadre l'image sans la déformer */
  transition: transform 0.5s ease;
  display: block;
}

/* Zoom doux sur l'image au survol de la carte */
.view-id-chercher_vacances.view-display-id-search_list .views-row:hover .card-ferme-image {
  transform: scale(1.05);
}

/* Correction pour les images manquantes (si le champ est vide) */
.view-id-chercher_vacances.view-display-id-search_list .card-ferme-image:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
  background: #f9f9f9;
}
.view-id-chercher_vacances.view-display-id-search_list .card-ferme-image:empty::after {
  content: "Pas de photo";
}

/* 4. Le Corps de la carte (Contenu textuel)
   On padding tout ce qui n'est pas l'image
*/
.view-id-chercher_vacances.view-display-id-search_list .views-row > div:not(.card-ferme-image-wrapper) {
  padding: 1.5rem;
}

/* Titre de l'annonce */
.view-id-chercher_vacances.view-display-id-search_list .card-ferme-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  display: block;
}

.view-id-chercher_vacances.view-display-id-search_list .card-ferme-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.view-id-chercher_vacances.view-display-id-search_list .card-ferme-title a:hover {
  color: var(--pev-terre-clair);
}

/* Dates */
.view-id-chercher_vacances.view-display-id-search_list .views-field-field-dates {
  font-size: 0.9rem;
  color: var(--pev-vert-feuille);
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

/* Type d'échange & Type de ferme (Tags/Badges) */
.view-id-chercher_vacances.view-display-id-search_list .views-field-field-type-echange,
.view-id-chercher_vacances.view-display-id-search_list .views-field-field-vac-type-ferme {
  font-size: 0.85rem;
  color: var(--pev-gris-texte);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Si le contenu est une liste de termes séparés par des virgules, on peut essayer de les transformer en badges si besoin, 
   mais pour l'instant, gardons le texte simple et lisible. */

/* 5. Responsive : Ajustement Mobile */
@media (max-width: 768px) {
  .view-id-chercher_vacances.view-display-id-search_list .view-content {
    grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
    gap: 1.5rem;
    padding: 1rem 0;
  }
  
  .view-id-chercher_vacances.view-display-id-search_list .card-ferme-image-wrapper {
    height: 180px; /* Image un peu plus petite sur mobile */
  }
  
  .view-id-chercher_vacances.view-display-id-search_list .views-row > div:not(.card-ferme-image-wrapper) {
    padding: 1rem;
  }
  
  .view-id-chercher_vacances.view-display-id-search_list .card-ferme-title {
    font-size: 1.2rem;
  }
}


/* ===========================================================
   COMPOSANT : BANDEAU DE RECHERCHE UNIFIÉ (CARTE & LISTE)
   Cible : .page-view-chercher-vacances (présent sur les 2 pages)
   =========================================================== */

/* 1. Le Conteneur du Formulaire (Commun aux 2 affichages) */
.page-view-chercher-vacances .views-exposed-form {
  background-color: var(--pev-blanc);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* Aligner les éléments en bas */
  gap: 1rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 2. Fieldset Dates : Nettoyage et Structure */
.page-view-chercher-vacances fieldset#edit-field-dates-wrapper {
  border: none;
  padding: 0;
  margin: 0;
  flex: 2; /* Prend plus de place (2 parts) */
  min-width: 250px;
}

.page-view-chercher-vacances legend.fieldset-legend {
  display: none; /* Cache le texte "Dates" */
}

.page-view-chercher-vacances .fieldset-wrapper {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  border: none;
}

/* 3. Inputs Dates (Min et Max) */
.page-view-chercher-vacances .form-item-field-dates-min,
.page-view-chercher-vacances .form-item-field-dates-max {
  flex: 1; /* Chaque champ prend 50% du fieldset */
  margin: 0;
}

.page-view-chercher-vacances label[for^="edit-field-dates"] {
  display: none; /* Cache les labels "Min" et "Maximum" */
}

.page-view-chercher-vacances input[name*="field_dates"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  background-color: var(--pev-creme);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.page-view-chercher-vacances input[name*="field_dates"]:focus {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
  background-color: #fff;
}

/* 4. Le champ "Lieu" */
.page-view-chercher-vacances .form-item-locality {
  flex: 1; /* Prend 1 part */
  min-width: 200px;
  margin: 0;
}

.page-view-chercher-vacances label[for="edit-locality"] {
  display: none; /* Cache le label "Lieu" */
}

.page-view-chercher-vacances input[name="locality"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  background-color: var(--pev-creme);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.page-view-chercher-vacances input[name="locality"]:focus {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.15);
  outline: none;
  background-color: #fff;
}

/* 5. Le Bouton "Chercher" */
.page-view-chercher-vacances .form-actions {
  margin: 0;
  flex: 0 0 auto; /* Ne s'étire pas */
}

.page-view-chercher-vacances input[type="submit"] {
  padding: 0.75rem 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: all 0.2s;
  height: 100%; /* S'aligne avec la hauteur des inputs */
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* 6. Responsive Mobile */
@media (max-width: 768px) {
  .page-view-chercher-vacances .views-exposed-form {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }
  
  .page-view-chercher-vacances .fieldset-wrapper {
    flex-direction: column;
  }
  
  .page-view-chercher-vacances .form-item-field-dates-min,
  .page-view-chercher-vacances .form-item-field-dates-max,
  .page-view-chercher-vacances .form-item-locality {
    width: 100%;
    flex: none;
  }
  
  .page-view-chercher-vacances input[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* ===========================================================
   PAGE : FICHE DÉTAILLÉE ANNONCE (NODE VACANCES - VIEW MODE)
   Version : "Magie PEV" (Juillet 2026)
   Philosophie : Structure claire, lecture fluide, confiance.
   =========================================================== */
.node-vacances-form .col-xl-8,
.node-vacances-edit-form .col-xl-8 {
  width: 100%;
}
.node-vacances-form .col-xl-4,
.node-vacances-edit-form .col-xl-4 {
  width: 0;
}

/* 0. RESET & CONTENEUR GLOBAL */
/* On s'assure que le contenu de l'article ne subit pas de conflits */
.node--type-vacances.node--view-mode-full {
  background-color: transparent;
}

.node--type-vacances.node--view-mode-full .node__content {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr; /* 60% Contenu / 40% Sidebar */
  gap: 3rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
  position: relative;
}

/* 1. STYLE DES SECTIONS (FIELDSETS "PEV-SECTION") */
/* C'est la clé : transformer les fieldsets Drupal en cartes élégantes */
fieldset.pev-section {
  background: var(--pev-blanc);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.04);
  border-left: 5px solid var(--pev-terre-clair); /* Touche de couleur */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

fieldset.pev-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(93, 64, 55, 0.08);
  border-left-color: var(--pev-vert-feuille);
}

/* Légendes (Titres de section : "L'Annonce", "Dates", etc.) */
fieldset.pev-section legend,
fieldset.pev-section .fieldset-legend {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pev-gris-leger);
  width: 100%;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 2. GESTION DE LA GRILLE (DISTRIBUTION GAUCHE / DROITE) */
/* On force les fieldsets à se placer dans la bonne colonne */

/* COLONNE GAUCHE (Contenu Principal) */
fieldset.pev-section:nth-of-type(1), /* L'Annonce */
fieldset.pev-section:nth-of-type(3)  /* La Mission au Quotidien */
{
  grid-column: 1 / 2;
}

/* COLONNE DROITE (Sidebar Technique) */
fieldset.pev-section:nth-of-type(2), /* Dates & Type d'Échange */
fieldset.pev-section:nth-of-type(4) /* Conditions & Logistique */ {
  grid-column: 2 / 3;
}

/* 3. LE BLOC FINAL (Notre Ferme) : TOUTE LARGEUR */
/* On cible soit le 5ème, soit notre classe custom si l'ordre change */
fieldset.pev-section:nth-of-type(5),
fieldset.pev-section-ferme {
  grid-column: 1 / -1; /* Force la pleine largeur */
  border-left-color: var(--pev-terre-fonce); /* Couleur distinctive */
  background-color: var(--pev-creme); /* Fond légèrement teinté */
  /*text-align: center;*/ /* Centre le contenu */
  padding: 2.5rem;
}

fieldset.pev-section-ferme legend {
  color: var(--pev-terre-fonce);
  font-size: 1.5rem;
  border-bottom-color: var(--pev-terre-fonce);
  text-align: center;
  justify-content: center;
}

/* 4. STYLE DU LIEN "BOUTON" DANS LE BLOC FERME */
.btn-ferme-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--pev-terre-clair);
  color: #fff;
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.3);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-ferme-link:hover {
  background-color: var(--pev-terre-fonce);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(93, 64, 55, 0.4);
  color: #fff;
  text-decoration: none;
}

.btn-ferme-link .icon {
  font-size: 1.5rem;
}

/* 5. RESPONSIVE MOBILE */
@media (max-width: 991px) {
  fieldset.pev-section,
  fieldset.pev-section-ferme {
    grid-column: 1 / -1 !important; /* Tout en colonne unique */
  }
}



/* 3. CONTENU SPÉCIFIQUE : TEXTE & DATES */

/* Corps du texte (Body) */
.node--type-vacances .field--name-body p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--pev-gris-texte);
  margin-bottom: 1.5rem;
}

/* Bloc Dates (Mise en évidence forte) */
.node--type-vacances .field--name-field-dates {
  background-color: var(--pev-vert-clair);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--pev-vert-feuille);
  margin-bottom: 2rem;
  text-align: center;
}

.node--type-vacances .field--name-field-dates .field__label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--pev-vert-feuille);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.node--type-vacances .field--name-field-dates .field__item {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2e5c1f;
  display: block;
}

/* Consignes Spéciales (Encart alerte douce) */
.node--type-vacances .field--name-field-consignes-speciales {
  background-color: var(--pev-creme);
  border-left: 5px solid var(--pev-terre-clair);
  padding: 1.5rem;
  border-radius: 0 8px 8px 0;
  margin: 2rem 0;
}

.node--type-vacances .field--name-field-consignes-speciales .field__label {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 0.5rem;
  display: block;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* 4. BADGES & TAXONOMIES (Le style "Pilule") */
/* Cible tous les champs de liste (Animaux, Labels, Hébergement, etc.) */

.node--type-vacances .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0.5rem 0 0 0;
  list-style: none;
}

.node--type-vacances .field__item {
  display: inline-block;
}

.node--type-vacances .field__item a {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px; /* Forme pilule */
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover sur les badges */
.node--type-vacances .field__item a:hover {
  background-color: var(--pev-vert-clair);
  border-color: var(--pev-vert-feuille);
  color: #2e5c1f;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Style spécifique pour les Labels "Bio/Valeurs" (Déjà vert par défaut) */
.node--type-vacances .field--name-field-vac-label-valeurs .field__item a {
  background-color: rgba(85, 139, 47, 0.08);
  border-color: rgba(85, 139, 47, 0.3);
  color: #2e5c1f;
}

.node--type-vacances .field--name-field-vac-label-valeurs .field__item a:hover {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  border-color: var(--pev-vert-feuille);
}

/* 5. LIEN VERS LA FERME (En-tête) */
.node--type-vacances .field--name-field-ferme-reference {
  grid-column: 1 / -1; /* Pleine largeur en haut */
  margin-bottom: 2rem;
}

.node--type-vacances .field--name-field-ferme-reference .field__label {
  display: none; /* Cache le label "Ferme concernée" */
}

.node--type-vacances .field--name-field-ferme-reference a {
  font-size: 1.1rem;
  color: var(--pev-vert-feuille);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pev-blanc);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--pev-vert-clair);
  transition: all 0.3s;
}

.node--type-vacances .field--name-field-ferme-reference a::before {
  content: "🏡";
  font-size: 1.3rem;
}

.node--type-vacances .field--name-field-ferme-reference a:hover {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  border-color: var(--pev-vert-feuille);
}

/* 6. BOUTON CONTACT (En bas) */
.node--type-vacances .field--name-field-contactez-nous {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px dashed var(--pev-gris-leger);
}

.node--type-vacances .field--name-field-contactez-nous a {
  display: inline-block;
  background-color: var(--pev-terre-clair);
  color: #fff;
  padding: 1rem 3rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.3);
  transition: all 0.3s ease;
}

.node--type-vacances .field--name-field-contactez-nous a:hover {
  background-color: var(--pev-terre-fonce);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(141, 110, 99, 0.4);
  color: #fff;
}

/* 7. RESPONSIVE MOBILE (Stack Vertical) */
@media (max-width: 991px) {
  .node--type-vacances.node--view-mode-full .node__content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Tout passe en colonne 1 */
  fieldset.pev-section {
    grid-column: 1 / -1 !important;
  }

  .node--type-vacances .field--name-field-ferme-reference,
  .node--type-vacances .field--name-field-contactez-nous {
    grid-column: 1 / -1;
  }
  
  fieldset.pev-section {
    padding: 1.5rem;
  }
  
  .node--type-vacances .field__items {
    gap: 0.4rem;
  }
  
  .node--type-vacances .field__item a {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}

/**** BADGES & TAXONOMIES (Le style "Pilule") - KIT COMMUNICATION ****/

.block-block-contenteae017e2-4db3-4679-ab81-7a8d75727c1e {
  text-align: center;
}

.block-block-contenteae017e2-4db3-4679-ab81-7a8d75727c1e .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0.5rem 0 0 0;
  list-style: none;
}

.block-block-contenteae017e2-4db3-4679-ab81-7a8d75727c1e .field__item {
  display: inline-block;
}

.block-block-contenteae017e2-4db3-4679-ab81-7a8d75727c1e .field__item a {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px; /* Forme pilule */
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover sur les badges */
.block-block-contenteae017e2-4db3-4679-ab81-7a8d75727c1e .field__item a:hover {
  background-color: var(--pev-vert-clair);
  border-color: var(--pev-vert-feuille);
  color: #2e5c1f;
  transform: translateY(-2px);
  text-decoration: none;
}

/* ===========================================================
   FORMULAIRE D'ÉDITION "VACANCES" (/node/**/edit)
   Philosophie : Un parcours fluide, pas une administration.
   =========================================================== */
.entity-content-form-revision-information {}

.node--type-vacances .pev-sidebar-agri .field__item a,
.node--type-vacances .pev-sidebar-agri .field__item {
  display: block;
}
.pev-sidebar-agri .collapsiblockContent,
.pev-sidebar-volontaire .collapsiblockContent {
  display: block;
}


/* 1. CONTENEUR PRINCIPAL & FOND */
/* On remplace le fond blanc/gris admin par notre crème, avec une ombre douce */
.path-node-edit-vacances #content,
.path-node-add-vacances #content {
  background-color: var(--pev-creme);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 8px 24px rgba(93, 64, 55, 0.08);
  margin-top: 2rem;
  margin-bottom: 3rem;
}

/* 2. TITRE DE PAGE & ONGLETS (TABS) */
.path-node-edit-vacances h1.title,
.path-node-add-vacances h1.title {
  color: var(--pev-terre-fonce);
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Nettoyage des onglets "Voir / Modifier / Supprimer" */
.nav-tabs {
  border-bottom: 2px solid var(--pev-gris-leger);
  margin-bottom: 2.5rem;
  justify-content: center;
  gap: 1rem;
}

.nav-tabs .nav-link {
  border: none;
  color: var(--pev-gris-texte);
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: 50px; /* Forme pilule */
  transition: all 0.3s ease;
  background-color: transparent;
}

.nav-tabs .nav-link:hover {
  background-color: var(--pev-vert-clair);
  color: var(--pev-terre-fonce);
}

.nav-tabs .nav-link.active {
  background-color: var(--pev-terre-clair);
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.3);
}

/* 3. FIELDSETS (GROUPES DE CHAMPS) */
/* Transformation des boîtes grises en sections claires et aérées */
fieldset.field-group-fieldset {
  background: var(--pev-blanc);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  border-left: 5px solid var(--pev-vert-feuille); /* Touche de couleur PEV */
}

/* Légendes des fieldsets (Titres de section) */
fieldset legend,
fieldset .fieldset-legend {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1.5rem;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid var(--pev-gris-leger);
  padding-bottom: 0.5rem;
}

/* Descriptions globales des sections (le petit texte en bas de fieldset) */
fieldset .description.text-muted {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--pev-gris-leger);
  color: var(--pev-terre-clair);
  font-style: italic;
  font-size: 0.95rem;
}

/* 4. CHAMPS DE SAISIE (INPUTS & TEXTAREAS) */
/* Labels : plus gras, plus clairs */
label.form-required,
label:not(.visually-hidden) {
  color: var(--pev-terre-fonce);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

/* Inputs texte et Dates */
input.form-control,
input.form-date,
textarea.form-control {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  background-color: var(--pev-creme);
  color: var(--pev-gris-texte);
  transition: all 0.3s ease;
  font-size: 1rem;
}

input.form-control:focus,
input.form-date:focus,
textarea.form-control:focus {
  background-color: var(--pev-blanc);
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.15);
  outline: none;
}

/* Zone de texte riche (CKEditor) */
.ck-content {
  min-height: 150px;
  border-radius: 8px !important;
  border: 1px solid var(--pev-gris-leger) !important;
  background-color: var(--pev-creme) !important;
  padding: 1rem !important;
}

.ck-content:focus {
  border-color: var(--pev-vert-feuille) !important;
  background-color: var(--pev-blanc) !important;
}

/* 5. CHECKBOXES (STYLE "SWITCH" OU PILULE) */
/* On garde le style "switch" de Bootstrap mais on l'adoucit */
.form-check-input[type="checkbox"] {
  width: 1.4em;
  height: 1.4em;
  border-color: var(--pev-gris-leger);
  cursor: pointer;
  margin-left: auto;
}

.form-check-input:checked[type="checkbox"] {
  background-color: var(--pev-vert-feuille);
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.2);
}

.form-check-label {
  color: var(--pev-gris-texte);
  font-weight: 500;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* Regrouper les checkboxes visuellement si nécessaire (optionnel) */
.fieldset-wrapper .checkbox {
  margin-bottom: 0.8rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.fieldset-wrapper .checkbox:hover {
  background-color: rgba(85, 139, 47, 0.03);
}

/* 6. BOUTONS D'ACTION (ENREGISTRER / APERÇU) */
/* Ciblage spécifique des boutons de fin de formulaire */
#edit-submit,
#edit-preview,
.form-actions .btn {
  padding: 0.85rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px; /* Pilule */
  transition: all 0.3s ease;
  border: none;
  margin-right: 1rem;
  margin-top: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Bouton Enregistrer (Primaire) */
#edit-submit,
button[type="submit"].btn-primary {
  background-color: var(--pev-terre-clair);
  color: #fff;
}

#edit-submit:hover,
button[type="submit"].btn-primary:hover {
  background-color: var(--pev-terre-fonce);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.2);
}

/* Bouton Aperçu (Secondaire) */
#edit-preview,
button[type="submit"].btn-secondary {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border: 1px solid var(--pev-vert-feuille);
}

#edit-preview:hover {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  transform: translateY(-2px);
}

/* 7. PETITS DÉTAILS & AIDES */
small.description,
.form-text {
  color: var(--pev-terre-clair);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

/* Image upload widget */
.image-widget-data {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.image-widget-data input[type="file"] {
  padding: 0.5rem;
  background: var(--pev-blanc);
  border: 1px dashed var(--pev-gris-leger);
  border-radius: 6px;
  width: auto;
  max-width: 100%;
}

/* 8. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .path-node-edit-vacances #content,
  .path-node-add-vacances #content {
    padding: 1.5rem;
    border-radius: 8px;
  }

  fieldset.field-group-fieldset {
    padding: 1.5rem;
  }

  .nav-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  #edit-submit,
  #edit-preview {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* ===========================================================
   BLOC : APPEL À L'ACTION (DÉPOSER UNE ANNONCE)
   Cible : Blocs ayant la classe .vacances
   Style : Encart centré, cadre pointillé, bouton "pilule"
   =========================================================== */

/* 1. Le Conteneur du Bloc */
.block-content.vacances,
.vacances.settings-tray-editable {
  margin: 1rem auto;
  max-width: 800px; /* On limite la largeur pour que ce soit lisible */
}

/* 2. Le Paragraphe Conteneur (L'encart) */
.vacances .field--name-body p.text-align-center {
  text-align: center;
  padding: 1.2rem 1rem;
  margin: 0;
  background-color: var(--pev-creme);
  border: 2px dashed var(--pev-terre-clair);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

/* Petit effet décoratif optionnel : un fond subtil */
.vacances .field--name-body p.text-align-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(141, 110, 99, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* 3. Le Texte "Déposer mon annonce" */
.vacances .field--name-body p.text-align-center strong,
.vacances .field--name-body p.text-align-center {
  font-size: 1.1rem;
  color: var(--pev-terre-fonce);
  font-weight: 600;
  margin-bottom: 0; /* Reset margin */
  display: block;
}

/* 4. Le Bouton "Vacances" */
.vacances .field--name-body p.text-align-center a.btn {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  margin-left: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px; /* Forme pilule */
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 6px rgba(141, 110, 99, 0.2);
}

/* Style spécifique si c'est un btn-primary (héritage Bootstrap écrasé) */
.vacances .field--name-body p.text-align-center a.btn.btn-primary {
  background-color: var(--pev-terre-clair);
  border-color: var(--pev-terre-clair);
  color: #fff;
}

/* Hover : Le bouton se soulève et fonce */
.vacances .field--name-body p.text-align-center a.btn.btn-primary:hover {
  background-color: var(--pev-terre-fonce);
  border-color: var(--pev-terre-fonce);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(141, 110, 99, 0.3);
}

/* Focus pour l'accessibilité */
.vacances .field--name-body p.text-align-center a.btn:focus {
  outline: 2px solid var(--pev-vert-feuille);
  outline-offset: 2px;
}

/* 5. Responsive Mobile */
@media (max-width: 768px) {
  .block-content.vacances {
    margin: 1.5rem auto;
  }
  
  .vacances .field--name-body p.text-align-center {
    padding: 1.5rem 1rem;
  }
  
  .vacances .field--name-body p.text-align-center a.btn {
    width: 100%; /* Bouton pleine largeur sur mobile */
    box-sizing: border-box;
  }
}

/* ===========================================================
   COMPOSANT : BOUTON CONTACT (PRIVATEMSG)
   Cible : Le lien dans le champ field_contactez_nous
   =========================================================== */

/* 1. Le Conteneur du champ (pour l'espacement) */
.node--type-vacances .field--name-field-contactez-nous,
.profile--view-mode--full .field--name-field-contactez-nous {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* 2. Le Lien transformé en Bouton */
.node--type-vacances .field--name-field-contactez-nous a,
.profile--view-mode--full .field--name-field-contactez-nous a {
  display: inline-block;
  width: 100%; /* Bouton pleine largeur sur mobile/fiche */
  max-width: 300px; /* Mais pas trop large sur desktop */
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important; /* Force pas de soulignement */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--pev-terre-clair); /* Terre cuite */
  border: 2px solid var(--pev-terre-clair);
  border-radius: 50px; /* Forme pilule */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(141, 110, 99, 0.2);
  cursor: pointer;
}

/* 3. État Hover (Survol) */
.node--type-vacances .field--name-field-contactez-nous a:hover,
.profile--view-mode--full .field--name-field-contactez-nous a:hover {
  background-color: var(--pev-terre-fonce); /* Marron foncé */
  border-color: var(--pev-terre-fonce);
  color: #fff;
  transform: translateY(-3px); /* Le bouton se soulève */
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.3);
  text-decoration: none;
}

/* 4. État Active (Clic) */
.node--type-vacances .field--name-field-contactez-nous a:active,
.profile--view-mode--full .field--name-field-contactez-nous a:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(93, 64, 55, 0.2);
}

/* 5. Responsive Mobile */
@media (max-width: 768px) {
  .node--type-vacances .field--name-field-contactez-nous a,
  .profile--view-mode--full .field--name-field-contactez-nous a {
    max-width: 100%; /* Pleine largeur sur mobile */
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
  }
}

/* 6. Variation "Secondaire" (Si tu veux un bouton vert pour certains contextes)
   Ajoute la classe .btn-secondary-manual dans le champ texte si besoin, 
   sinon on reste sur le style Terre par défaut.
*/
.node--type-vacances .field--name-field-contactez-nous a.btn-vert,
.profile--view-mode--full .field--name-field-contactez-nous a.btn-vert {
  background-color: var(--pev-vert-feuille);
  border-color: var(--pev-vert-feuille);
}

.node--type-vacances .field--name-field-contactez-nous a.btn-vert:hover,
.profile--view-mode--full .field--name-field-contactez-nous a.btn-vert:hover {
  background-color: #33691E;
  border-color: #33691E;
}

/* ===========================================================
   SECTION : PROFILS (FERME & VOLONTAIRE)
   Philosophie : Le HTML structure, le CSS sublime.
   =========================================================== */

/* --- 1. STYLES COMMUNS (AFFICHAGE & ÉDITION) --- */

/* A. Accordéons (Details/Summary) - UNIVERSEL */
/* S'applique à l'affichage Full ET aux formulaires d'édition */
.profile--view-mode--full details,
.profile-ferme-edit-form details,
.profile-volontaire-edit-form details {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

/* Hover sur l'accordéon (Uniquement pour l'affichage, pas l'édition si trop lourd) */
.profile--view-mode--full details:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(93, 64, 55, 0.1);
  border-color: var(--pev-vert-clair);
}

/* Summary (Titre de section) */
.profile--view-mode--full summary,
.profile-ferme-edit-form summary,
.profile-volontaire-edit-form summary {
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--pev-creme);
  border-bottom: 1px solid transparent;
}

/* État Ouvert */
.profile--view-mode--full details[open] summary,
.profile-ferme-edit-form details[open] summary,
.profile-volontaire-edit-form details[open] summary {
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--pev-vert-feuille);
  background-color: #fff;
}

/* Le "+" animé */
.profile--view-mode--full summary::after,
.profile-ferme-edit-form summary::after,
.profile-volontaire-edit-form summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--pev-vert-feuille);
  transition: transform 0.3s ease;
  line-height: 0.8;
}

.profile--view-mode--full details[open] summary::after,
.profile-ferme-edit-form details[open] summary::after,
.profile-volontaire-edit-form details[open] summary::after {
  transform: rotate(45deg);
  color: var(--pev-terre-clair);
}

.profile--view-mode--full summary::-webkit-details-marker,
.profile-ferme-edit-form summary::-webkit-details-marker,
.profile-volontaire-edit-form summary::-webkit-details-marker {
  display: none;
}

/* Wrapper intérieur */
.profile--view-mode--full .details-wrapper,
.profile-ferme-edit-form .details-wrapper,
.profile-volontaire-edit-form .details-wrapper {
  padding: 2rem 1.5rem;
  animation: fadeIn 0.3s ease-in-out;
}

/* Description sous le titre */
.details-description {
  display: block;
  font-size: 0.9rem;
  color: var(--pev-gris-texte);
  margin-top: 0.5rem;
  font-style: italic;
}

/* B. Typographie & Champs Généraux (Affichage) */
.profile--view-mode--full .field__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: block;
}

.profile--view-mode--full .field__item {
  color: var(--pev-gris-texte);
  line-height: 1.6;
  font-size: 1.05rem;
}

/* C. Badges & Pilules (Taxonomies) - UNIQUE */
/* Regroupe tous les champs de taxonomy (Labels, Type Ferme, Animaux, etc.) */
.profile--view-mode--full .field--name-field-label-valeurs .field__items,
.profile--view-mode--full .field--name-field-type-ferme .field__items,
.profile--view-mode--full .badge-ferme .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0;
  /*margin: 0.5rem 0 1.5rem 0;*/
  list-style: none;
}

.profile--view-mode--full .field--name-field-label-valeurs .field__item,
.profile--view-mode--full .field--name-field-type-ferme .field__item,
.profile--view-mode--full .badge-ferme .field__item {
  display: inline-block;
  width: fit-content;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease;
  background-color: var(--pev-creme);
  color: var(--pev-terre-fonce);
  border: 1px solid var(--pev-gris-leger);
}

/* Hover Badges */
.profile--view-mode--full .field--name-field-label-valeurs .field__item:hover,
.profile--view-mode--full .field--name-field-type-ferme .field__item:hover,
.profile--view-mode--full .badge-ferme .field__item:hover {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-color: var(--pev-vert-feuille);
  transform: translateX(5px);
}

/* Style spécifique Bio */
.profile--view-mode--full .field--name-field-label-valeurs .field__item {
  background-color: rgba(85, 139, 47, 0.1);
  border-color: rgba(85, 139, 47, 0.3);
  color: #2e5c1f;
}

/* D. Galerie Photo - UNIQUE & RESPONSIVE */
.profile--view-mode--full .field--name-field-galerie-photos .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.profile--view-mode--full .field--name-field-galerie-photos .field__item {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .profile--view-mode--full .field--name-field-galerie-photos .field__item {
    flex: 0 0 calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
  }
}

@media (min-width: 992px) {
  .profile--view-mode--full .field--name-field-galerie-photos .field__item {
    flex: 0 0 calc(33.333% - 1.5rem);
    max-width: calc(33.333% - 1.5rem);
  }
}

.profile--view-mode--full .field--name-field-galerie-photos img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

.profile--view-mode--full .field--name-field-galerie-photos .field__item:hover img {
  transform: scale(1.03);
  box-shadow: 0 8px 15px rgba(0,0,0,0.12);
}

/* E. Carte Géolocalisation - UNIQUE */
.profile--view-mode--full .geolocation-map-wrapper {
  height: 400px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  margin-top: 1rem;
  background: #f8f9fa;
}

.profile--view-mode--full .geolocation-map-wrapper .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}

/* F. Adresse (Style discret) */
.profile--view-mode--full .field--name-field-adresse .field__item {
  display: inline-block;
  background: var(--pev-creme);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--pev-terre-clair);
  margin-top: 0.5rem;
  font-weight: 500;
}

/* --- 2. STYLES SPÉCIFIQUES ÉDITION (FORMULAIRES) --- */

/* A. Conteneurs Globaux */
.profile-ferme-edit-form,
.profile-volontaire-edit-form {
  background: var(--pev-blanc);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 1000px;
  margin: 2rem auto;
}

/* B. Inputs & Textareas (Formulaire) */
.profile-ferme-edit-form .form-control,
.profile-ferme-edit-form .form-textarea,
.profile-ferme-edit-form .form-select,
.profile-volontaire-edit-form .form-control,
.profile-volontaire-edit-form .form-textarea,
.profile-volontaire-edit-form .form-select {
  border: 2px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  transition: all 0.2s;
  background-color: #fafafa;
}

.profile-ferme-edit-form .form-control:focus,
.profile-ferme-edit-form .form-textarea:focus,
.profile-volontaire-edit-form .form-control:focus,
.profile-volontaire-edit-form .form-textarea:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.1);
  outline: none;
}

/* C. Options (Radios/Checkboxes) en mode "Pilules" */
.profile-ferme-edit-form .form-type-radio,
.profile-ferme-edit-form .form-type-checkbox,
.profile-volontaire-edit-form .form-type-radio,
.profile-volontaire-edit-form .form-type-checkbox {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  background: #fff;
}
/* Note: Pour le volontaire, tu peux surcharger avec border-radius: 50px si tu préfères le style "tag" */

.profile-ferme-edit-form .form-type-radio:hover,
.profile-ferme-edit-form .form-type-checkbox:hover,
.profile-volontaire-edit-form .form-type-radio:hover,
.profile-volontaire-edit-form .form-type-checkbox:hover {
  border-color: var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
}

/* D. Boutons d'Enregistrement */
.profile-ferme-edit-form #edit-submit,
.profile-volontaire-edit-form #edit-submit {
  background-color: var(--pev-terre-clair); /* Marron pour Ferme */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.3);
  transition: all 0.3s;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 2rem auto 0;
  text-align: center;
}

/* Spécifique Volontaire (Bouton Vert) */
.profile-volontaire-edit-form #edit-submit {
  background-color: var(--pev-vert-feuille);
  box-shadow: 0 4px 10px rgba(85, 139, 47, 0.3);
}

.profile-ferme-edit-form #edit-submit:hover,
.profile-volontaire-edit-form #edit-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* E. Galerie dans le Formulaire (Tableau) */
.profile-ferme-edit-form table#edit-field-galerie-photos-table,
.profile-volontaire-edit-form table {
  width: 100%;
  border: none;
  background: transparent;
}

/* --- 3. RESPONSIVE GLOBAL --- */
@media (max-width: 768px) {
  .profile--view-mode--full .geolocation-map-wrapper { height: 300px; }
  .profile--view-mode--full .field--name-field-galerie-photos img { height: 200px; }
  
  .profile-ferme-edit-form,
  .profile-volontaire-edit-form {
    padding: 1rem;
  }
  .profile-ferme-edit-form #edit-submit,
  .profile-volontaire-edit-form #edit-submit {
    width: 100%;
    max-width: none;
  }
}



/* ===========================================================
   FORMULAIRE D'ÉDITION PROFIL FERME - STYLE "TERRE & LIEN"
   Objectif : Rendre la saisie aussi agréable que la lecture.
   =========================================================== */

/* 1. CONTENEUR GLOBAL & GROUPES (DETAILS) */
.profile-ferme-add-form {
  background: var(--pev-blanc);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 1000px;
  margin: 2rem auto;
}

/* Stylisation des accordéons (Details/Summary) dans le formulaire */
.profile-ferme-add-form details.field-group-details-sidebar {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--pev-blanc);
  transition: all 0.3s ease;
}

.profile-ferme-add-form details[open] {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 4px 12px rgba(85, 139, 47, 0.1);
}

.profile-ferme-add-form summary {
  background-color: var(--pev-creme);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  border-bottom: 1px solid transparent;
}

.profile-ferme-add-form details[open] summary {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-bottom: 1px solid var(--pev-gris-leger);
}

/* Le petit "+" animé */
.profile-ferme-add-form summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s;
}

.profile-ferme-add-form details[open] summary::after {
  transform: rotate(45deg);
}

.profile-ferme-add-form summary::-webkit-details-marker {
  display: none;
}

/* Wrapper intérieur */
.profile-ferme-add-form .details-wrapper {
  padding: 2rem 1.5rem;
  background: #fff;
  animation: fadeIn 0.4s ease-in-out;
}

/* Petite description sous le titre de l'accordéon */
.profile-ferme-add-form .details-description {
  display: block;
  font-size: 0.9rem;
  color: var(--pev-gris-texte);
  margin-top: 0.5rem;
  font-style: italic;
}

/* 2. CHAMPS DE TEXTE & INPUTS */
.profile-ferme-add-form .form-control,
.profile-ferme-add-form .form-textarea,
.profile-ferme-add-form .form-select {
  border: 2px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  transition: all 0.2s;
  background-color: #fafafa;
}

.profile-ferme-add-form .form-control:focus,
.profile-ferme-add-form .form-textarea:focus,
.profile-ferme-add-form .form-select:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.1);
  outline: none;
}

/* Labels des champs */
.profile-ferme-add-form label {
  font-weight: 600;
  color: var(--pev-terre-fonce);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  display: block;
}

/* Textes d'aide (Descriptions) */
.profile-ferme-add-form .description,
.profile-ferme-add-form small.text-muted {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.4rem;
  display: block;
}

/* 3. BOUTONS RADIO & CHECKBOXES (Style "Switch" ou "Pilule") */
/* On transforme les listes de options en grilles de boutons */
.profile-ferme-add-form fieldset.form-composite {
  border: none;
  padding: 0;
  margin: 0;
}

.profile-ferme-add-form fieldset legend {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1rem;
  font-size: 1rem;
  padding: 0;
}

/* Grille pour les options */
.profile-ferme-add-form .form-type-radio,
.profile-ferme-add-form .form-type-checkbox {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  background: #fff;
}

.profile-ferme-add-form .form-type-radio:hover,
.profile-ferme-add-form .form-type-checkbox:hover {
  border-color: var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
}

/* Quand c'est coché */
.profile-ferme-add-form input:checked + label {
  font-weight: 700;
  color: var(--pev-vert-feuille);
}

/* Style spécifique pour les inputs radio/checkbox eux-mêmes */
.profile-ferme-add-form .form-radio,
.profile-ferme-add-form .form-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--pev-vert-feuille); /* Couleur native moderne */
}

/* 4. GALERIE PHOTO (Tableau de gestion) */
.profile-ferme-add-form table#edit-field-galerie-photos-table {
  width: 100%;
  border: none;
  background: transparent;
}

.profile-ferme-add-form table thead {
  display: none; /* On cache les titres de colonnes moches */
}

.profile-ferme-add-form table tbody tr {
  background: var(--pev-creme);
  margin-bottom: 1rem;
  border-radius: 8px;
  display: flex; /* Flex pour aligner image et inputs */
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--pev-gris-leger);
}

.profile-ferme-add-form table tbody tr td {
  border: none;
  padding: 0.5rem;
  background: transparent;
}

/* L'image de prévisualisation */
.profile-ferme-add-form .image-preview img {
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Le bouton "Retirer" */
.profile-ferme-add-form .button--danger,
.profile-ferme-add-form button[name*="remove_button"] {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* 5. BOUTON D'ENREGISTREMENT (Le "Call to Action") */
.profile-ferme-add-form #edit-submit {
  background-color: var(--pev-terre-clair);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.3);
  transition: all 0.3s;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 2rem auto 0;
  text-align: center;
}

.profile-ferme-add-form #edit-submit:hover {
  background-color: var(--pev-terre-fonce);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(141, 110, 99, 0.4);
}

/* 6. CARTE GÉOLOCALISATION */
.profile-ferme-add-form .geolocation-map-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--pev-gris-leger);
  margin-top: 1rem;
}

/* 7. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .profile-ferme-add-form {
    padding: 1rem;
  }
  
  .profile-ferme-add-form table tbody tr {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .profile-ferme-add-form #edit-submit {
    width: 100%;
    max-width: none;
  }
}

/* ===========================================================
   FORMULAIRE D'ÉDITION PROFIL VOLONTAIRE - STYLE "COMPAGNON"
   Objectif : Rendre la candidature aussi chaleureuse que l'accueil.
   =========================================================== */

/* 1. CONTENEUR GLOBAL & GROUPES (DETAILS) */
.profile-volontaire-add-form {
  background: var(--pev-blanc);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 1000px;
  margin: 2rem auto;
}

/* Accordéons (Details/Summary) */
.profile-volontaire-add-form details.field-group-details-sidebar {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--pev-blanc);
  transition: all 0.3s ease;
}

.profile-volontaire-add-form details[open] {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 4px 12px rgba(85, 139, 47, 0.1);
}

.profile-volontaire-add-form summary {
  background-color: var(--pev-creme);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  border-bottom: 1px solid transparent;
}

.profile-volontaire-add-form details[open] summary {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-bottom: 1px solid var(--pev-gris-leger);
}

/* Le "+" animé */
.profile-volontaire-add-form summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s;
}

.profile-volontaire-add-form details[open] summary::after {
  transform: rotate(45deg);
}

.profile-volontaire-add-form summary::-webkit-details-marker {
  display: none;
}

/* Wrapper intérieur */
.profile-volontaire-add-form .details-wrapper {
  padding: 2rem 1.5rem;
  background: #fff;
  animation: fadeIn 0.4s ease-in-out;
}

/* Description sous-titre */
.profile-volontaire-add-form .details-description {
  display: block;
  font-size: 0.9rem;
  color: var(--pev-gris-texte);
  margin-top: 0.5rem;
  font-style: italic;
}

/* 2. CHAMPS DE TEXTE & TEXTAREA */
.profile-volontaire-add-form .form-control,
.profile-volontaire-add-form .form-textarea,
.profile-volontaire-add-form .form-select {
  border: 2px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  transition: all 0.2s;
  background-color: #fafafa;
}

.profile-volontaire-add-form .form-control:focus,
.profile-volontaire-add-form .form-textarea:focus,
.profile-volontaire-add-form .form-select:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.1);
  outline: none;
}

/* Labels */
.profile-volontaire-add-form label {
  font-weight: 600;
  color: var(--pev-terre-fonce);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  display: block;
}

/* Textes d'aide */
.profile-volontaire-add-form .description,
.profile-volontaire-add-form small.text-muted {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.4rem;
  display: block;
}

/* 3. OPTIONS (RADIOS & CHECKBOXES) - STYLE "TAGS CLIQUABLES" */
/* Pour les volontaires, on a beaucoup de choix multiples. On les rend plus ludiques. */

.profile-volontaire-add-form fieldset.form-composite {
  border: none;
  padding: 0;
  margin: 0;
}

.profile-volontaire-add-form fieldset legend {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1rem;
  font-size: 1rem;
  padding: 0;
}

/* Grille pour les options (pour éviter une liste interminable) */
.profile-volontaire-add-form .form-type-radio,
.profile-volontaire-add-form .form-type-checkbox {
  display: inline-flex; /* Pour mettre côte à côte si possible */
  margin: 0.5rem 0.5rem 0.5rem 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px; /* Forme pilule */
  transition: all 0.2s;
  cursor: pointer;
  background: #fff;
  font-size: 0.9rem;
  align-items: center;
  gap: 8px;
}

/* Effet Hover */
.profile-volontaire-add-form .form-type-radio:hover,
.profile-volontaire-add-form .form-type-checkbox:hover {
  border-color: var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
  transform: translateY(-2px);
}

/* Quand c'est coché */
.profile-volontaire-add-form input:checked + label {
  font-weight: 700;
  color: var(--pev-vert-feuille);
}

/* Inputs natifs */
.profile-volontaire-add-form .form-radio,
.profile-volontaire-add-form .form-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--pev-vert-feuille);
  margin: 0; /* Reset margin */
}

/* Cas spécifique : Les Radios (Choix unique) doivent parfois rester en bloc si le texte est long, 
   mais ici la forme pilule fonctionne bien pour des niveaux d'autonomie courts. */

/* 4. GESTION DU CHAMP ADRESSE (Spécifique Volontaire) */
/* Souvent l'adresse est juste une ville, on allège le style */
.profile-volontaire-add-form .address-container-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-volontaire-add-form .address-container-inline .form-item {
  flex: 1;
  min-width: 150px;
}

/* 5. BOUTON D'ENREGISTREMENT */
.profile-volontaire-add-form #edit-submit {
  background-color: var(--pev-vert-feuille); /* Vert pour l'action volontaire */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 10px rgba(85, 139, 47, 0.3);
  transition: all 0.3s;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 2rem auto 0;
  text-align: center;
}

.profile-volontaire-add-form #edit-submit:hover {
  background-color: #33691E; /* Vert plus foncé */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(85, 139, 47, 0.4);
}

/* 6. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .profile-volontaire-add-form {
    padding: 1rem;
  }
  
  /* Sur mobile, les pilules prennent 100% de largeur pour être faciles à toucher */
  .profile-volontaire-add-form .form-type-radio,
  .profile-volontaire-add-form .form-type-checkbox {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  
  .profile-volontaire-add-form .address-container-inline {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .profile-volontaire-add-form #edit-submit {
    width: 100%;
    max-width: none;
  }
}

/* ===========================================================
   FORMULAIRE D'ÉDITION PROFIL FERME - STYLE "TERRE & LIEN"
   Objectif : Rendre la saisie aussi agréable que la lecture.
   =========================================================== */

/* 1. CONTENEUR GLOBAL & GROUPES (DETAILS) */
.profile-ferme-edit-form {
  background: var(--pev-blanc);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 1000px;
  margin: 2rem auto;
}

/* Stylisation des accordéons (Details/Summary) dans le formulaire */
.profile-ferme-edit-form details.field-group-details-sidebar {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--pev-blanc);
  transition: all 0.3s ease;
}

.profile-ferme-edit-form details[open] {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 4px 12px rgba(85, 139, 47, 0.1);
}

.profile-ferme-edit-form summary {
  background-color: var(--pev-creme);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  border-bottom: 1px solid transparent;
}

.profile-ferme-edit-form details[open] summary {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-bottom: 1px solid var(--pev-gris-leger);
}

/* Le petit "+" animé */
.profile-ferme-edit-form summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s;
}

.profile-ferme-edit-form details[open] summary::after {
  transform: rotate(45deg);
}

.profile-ferme-edit-form summary::-webkit-details-marker {
  display: none;
}

/* Wrapper intérieur */
.profile-ferme-edit-form .details-wrapper {
  padding: 2rem 1.5rem;
  background: #fff;
  animation: fadeIn 0.4s ease-in-out;
}

/* Petite description sous le titre de l'accordéon */
.profile-ferme-edit-form .details-description {
  display: block;
  font-size: 0.9rem;
  color: var(--pev-gris-texte);
  margin-top: 0.5rem;
  font-style: italic;
}

/* 2. CHAMPS DE TEXTE & INPUTS */
.profile-ferme-edit-form .form-control,
.profile-ferme-edit-form .form-textarea,
.profile-ferme-edit-form .form-select {
  border: 2px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  transition: all 0.2s;
  background-color: #fafafa;
}

.profile-ferme-edit-form .form-control:focus,
.profile-ferme-edit-form .form-textarea:focus,
.profile-ferme-edit-form .form-select:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.1);
  outline: none;
}

/* Labels des champs */
.profile-ferme-edit-form label {
  font-weight: 600;
  color: var(--pev-terre-fonce);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  display: block;
}

/* Textes d'aide (Descriptions) */
.profile-ferme-edit-form .description,
.profile-ferme-edit-form small.text-muted {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.4rem;
  display: block;
}

/* 3. BOUTONS RADIO & CHECKBOXES (Style "Switch" ou "Pilule") */
/* On transforme les listes de options en grilles de boutons */
.profile-ferme-edit-form fieldset.form-composite {
  border: none;
  padding: 0;
  margin: 0;
}

.profile-ferme-edit-form fieldset legend {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1rem;
  font-size: 1rem;
  padding: 0;
}

/* Grille pour les options */
.profile-ferme-edit-form .form-type-radio,
.profile-ferme-edit-form .form-type-checkbox {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  background: #fff;
}

.profile-ferme-edit-form .form-type-radio:hover,
.profile-ferme-edit-form .form-type-checkbox:hover {
  border-color: var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
}

/* Quand c'est coché */
.profile-ferme-edit-form input:checked + label {
  font-weight: 700;
  color: var(--pev-vert-feuille);
}

/* Style spécifique pour les inputs radio/checkbox eux-mêmes */
.profile-ferme-edit-form .form-radio,
.profile-ferme-edit-form .form-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--pev-vert-feuille); /* Couleur native moderne */
}

/* 4. GALERIE PHOTO (Tableau de gestion) */
.profile-ferme-edit-form table#edit-field-galerie-photos-table {
  width: 100%;
  border: none;
  background: transparent;
}

.profile-ferme-edit-form table thead {
  display: none; /* On cache les titres de colonnes moches */
}

.profile-ferme-edit-form table tbody tr {
  background: var(--pev-creme);
  margin-bottom: 1rem;
  border-radius: 8px;
  display: flex; /* Flex pour aligner image et inputs */
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--pev-gris-leger);
}

.profile-ferme-edit-form table tbody tr td {
  border: none;
  padding: 0.5rem;
  background: transparent;
}

/* L'image de prévisualisation */
.profile-ferme-edit-form .image-preview img {
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Le bouton "Retirer" */
.profile-ferme-edit-form .button--danger,
.profile-ferme-edit-form button[name*="remove_button"] {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* 5. BOUTON D'ENREGISTREMENT (Le "Call to Action") */
.profile-ferme-edit-form #edit-submit {
  background-color: var(--pev-terre-clair);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 10px rgba(141, 110, 99, 0.3);
  transition: all 0.3s;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 2rem auto 0;
  text-align: center;
}

.profile-ferme-edit-form #edit-submit:hover {
  background-color: var(--pev-terre-fonce);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(141, 110, 99, 0.4);
}

/* 6. CARTE GÉOLOCALISATION */
.profile-ferme-edit-form .geolocation-map-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--pev-gris-leger);
  margin-top: 1rem;
}

/* 7. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .profile-ferme-edit-form {
    padding: 1rem;
  }
  
  .profile-ferme-edit-form table tbody tr {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .profile-ferme-edit-form #edit-submit {
    width: 100%;
    max-width: none;
  }
}

/* ===========================================================
   FORMULAIRE D'ÉDITION PROFIL VOLONTAIRE - STYLE "COMPAGNON"
   Objectif : Rendre la candidature aussi chaleureuse que l'accueil.
   =========================================================== */

/* 1. CONTENEUR GLOBAL & GROUPES (DETAILS) */
.profile-volontaire-edit-form {
  background: var(--pev-blanc);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 1000px;
  margin: 2rem auto;
}

/* Accordéons (Details/Summary) */
.profile-volontaire-edit-form details.field-group-details-sidebar {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--pev-blanc);
  transition: all 0.3s ease;
}

.profile-volontaire-edit-form details[open] {
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 4px 12px rgba(85, 139, 47, 0.1);
}

.profile-volontaire-edit-form summary {
  background-color: var(--pev-creme);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  border-bottom: 1px solid transparent;
}

.profile-volontaire-edit-form details[open] summary {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-bottom: 1px solid var(--pev-gris-leger);
}

/* Le "+" animé */
.profile-volontaire-edit-form summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s;
}

.profile-volontaire-edit-form details[open] summary::after {
  transform: rotate(45deg);
}

.profile-volontaire-edit-form summary::-webkit-details-marker {
  display: none;
}

/* Wrapper intérieur */
.profile-volontaire-edit-form .details-wrapper {
  padding: 2rem 1.5rem;
  background: #fff;
  animation: fadeIn 0.4s ease-in-out;
}

/* Description sous-titre */
.profile-volontaire-edit-form .details-description {
  display: block;
  font-size: 0.9rem;
  color: var(--pev-gris-texte);
  margin-top: 0.5rem;
  font-style: italic;
}

/* 2. CHAMPS DE TEXTE & TEXTAREA */
.profile-volontaire-edit-form .form-control,
.profile-volontaire-edit-form .form-textarea,
.profile-volontaire-edit-form .form-select {
  border: 2px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  transition: all 0.2s;
  background-color: #fafafa;
}

.profile-volontaire-edit-form .form-control:focus,
.profile-volontaire-edit-form .form-textarea:focus,
.profile-volontaire-edit-form .form-select:focus {
  border-color: var(--pev-vert-feuille);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.1);
  outline: none;
}

/* Labels */
.profile-volontaire-edit-form label {
  font-weight: 600;
  color: var(--pev-terre-fonce);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  display: block;
}

/* Textes d'aide */
.profile-volontaire-edit-form .description,
.profile-volontaire-edit-form small.text-muted {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.4rem;
  display: block;
}

/* 3. OPTIONS (RADIOS & CHECKBOXES) - STYLE "TAGS CLIQUABLES" */
/* Pour les volontaires, on a beaucoup de choix multiples. On les rend plus ludiques. */

.profile-volontaire-edit-form fieldset.form-composite {
  border: none;
  padding: 0;
  margin: 0;
}

.profile-volontaire-edit-form fieldset legend {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 1rem;
  font-size: 1rem;
  padding: 0;
}

/* Grille pour les options (pour éviter une liste interminable) */
.profile-volontaire-edit-form .form-type-radio,
.profile-volontaire-edit-form .form-type-checkbox {
  display: inline-flex; /* Pour mettre côte à côte si possible */
  margin: 0.5rem 0.5rem 0.5rem 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px; /* Forme pilule */
  transition: all 0.2s;
  cursor: pointer;
  background: #fff;
  font-size: 0.9rem;
  align-items: center;
  gap: 8px;
}

/* Effet Hover */
.profile-volontaire-edit-form .form-type-radio:hover,
.profile-volontaire-edit-form .form-type-checkbox:hover {
  border-color: var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
  transform: translateY(-2px);
}

/* Quand c'est coché */
.profile-volontaire-edit-form input:checked + label {
  font-weight: 700;
  color: var(--pev-vert-feuille);
}

/* Inputs natifs */
.profile-volontaire-edit-form .form-radio,
.profile-volontaire-edit-form .form-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--pev-vert-feuille);
  margin: 0; /* Reset margin */
}

/* Cas spécifique : Les Radios (Choix unique) doivent parfois rester en bloc si le texte est long, 
   mais ici la forme pilule fonctionne bien pour des niveaux d'autonomie courts. */

/* 4. GESTION DU CHAMP ADRESSE (Spécifique Volontaire) */
/* Souvent l'adresse est juste une ville, on allège le style */
.profile-volontaire-edit-form .address-container-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-volontaire-edit-form .address-container-inline .form-item {
  flex: 1;
  min-width: 150px;
}

/* 5. BOUTON D'ENREGISTREMENT */
.profile-volontaire-edit-form #edit-submit {
  background-color: var(--pev-vert-feuille); /* Vert pour l'action volontaire */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 10px rgba(85, 139, 47, 0.3);
  transition: all 0.3s;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 2rem auto 0;
  text-align: center;
}

.profile-volontaire-edit-form #edit-submit:hover {
  background-color: #33691E; /* Vert plus foncé */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(85, 139, 47, 0.4);
}

/* 6. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .profile-volontaire-edit-form {
    padding: 1rem;
  }
  
  /* Sur mobile, les pilules prennent 100% de largeur pour être faciles à toucher */
  .profile-volontaire-edit-form .form-type-radio,
  .profile-volontaire-edit-form .form-type-checkbox {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  
  .profile-volontaire-edit-form .address-container-inline {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .profile-volontaire-edit-form #edit-submit {
    width: 100%;
    max-width: none;
  }
}

/* ===========================================================
   COMPOSANT : SIDEBAR UTILISATEUR (DASHBOARD)
   =========================================================== */

.pev-user-sidebar {
  background-color: var(--pev-creme);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid var(--pev-gris-leger);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 100px; /* Reste visible au scroll si la page est longue */
}

/* Titres de groupes dans la sidebar */
.nav-group-title {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  font-weight: 700;
  padding: 1rem 1rem 0.5rem 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.nav-group-title:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* --- Header Profil --- */
.pev-sidebar-header {
  text-align: center;
  border-bottom: 1px solid var(--pev-gris-leger);
  padding-bottom: 1.5rem;
}

.pev-avatar-wrapper {
  margin-bottom: 1rem;
}

.pev-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pev-blanc);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pev-user-name {
  display: block;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.pev-user-role {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-agri {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border: 1px solid var(--pev-vert-feuille);
}

.badge-volontaire {
  background-color: #E3F2FD;
  color: #1565C0;
  border: 1px solid #90CAF9;
}

/* --- Navigation --- */
.pev-sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: block;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 1rem;
  color: var(--pev-gris-texte);
  text-decoration: none;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-link .icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

/* Hover & Active States */
.nav-link:hover {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-left-color: var(--pev-vert-feuille);
}

/* Simuler l'état actif (à gérer via Drupal 'is-active' class si possible) */
.nav-link.active,
li.active > .nav-link {
  background-color: var(--pev-vert-clair);
  color: #2e5c1f;
  border-left-color: var(--pev-vert-feuille);
  font-weight: 700;
}

/* Bouton d'action spécifique (Déposer annonce) */
.nav-link.btn-action {
  background-color: var(--pev-terre-clair);
  color: #fff;
  justify-content: center;
  margin: 0.5rem 0;
  box-shadow: 0 2px 5px rgba(141, 110, 99, 0.2);
}

.nav-link.btn-action:hover {
  background-color: var(--pev-terre-fonce);
  color: #fff;
  border-left-color: transparent;
  transform: translateY(-2px);
}

/* Compteur de messages */
.badge-count {
  margin-left: auto; /* Pousse à droite */
  background-color: var(--pev-terre-clair);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* Déconnexion */
.nav-logout {
  margin-top: 1rem;
  color: #d32f2f;
  justify-content: center;
  border: 1px solid transparent;
}

.nav-logout:hover {
  background-color: #ffebee;
  color: #b71c1c;
  border-color: #ef9a9a;
}

/* --- Responsive Mobile --- */
@media (max-width: 991px) {
  .pev-user-sidebar {
    position: relative;
    top: 0;
    margin-bottom: 2rem;
  }
  
  .pev-sidebar-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .nav-link {
    padding: 0.5rem;
    font-size: 0.9rem;
    flex-direction: column;
    text-align: center;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .nav-link:hover {
    border-left-color: transparent;
    border-bottom-color: var(--pev-vert-feuille);
  }
  
  .nav-link.btn-action {
    width: 100%;
    margin: 0.5rem 0;
  }
}

/* Style commun aux deux */
.pev-sidebar-agri, 
.pev-sidebar-volontaire {
  /* Tes styles de base (fond, padding, etc.) */
  background-color: var(--pev-creme);
  border-radius: 12px;
}

/* Spécificité Agriculteur */
.pev-sidebar-agri .pev-user-role {
  border-color: var(--pev-vert-feuille);
  color: #2e5c1f;
}

/* Spécificité Volontaire */
.pev-sidebar-volontaire .pev-user-role {
  border-color: var(--pev-bleu-eau);
  color: #0277BD;
}

/* -----------------------------------------------------------
   COMPOSANT : ACCORDÉONS (STYLE FUN & BIENVEILLANT)
   Cible : .collapsiblockTitle button (Module Collapsiblock ou custom)
   Philosophie : Remplacer le triangle froid par un "+" chaleureux.
   ----------------------------------------------------------- */

/* 1. Le Conteneur du Titre (Le Bouton) */
div .collapsiblockTitleCollapsed button,
.collapsiblockTitle button {
    background-image: none;
}

.collapsiblockTitleCollapsed {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
 }

.collapsiblockTitle button {
  /* On garde tes styles de base si tu en as */
  background-color: var(--pev-creme); /* Fond crème doux */
  color: var(--pev-terre-fonce);
  font-weight: 700;
  padding: 1rem 1.5rem;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--pev-gris-leger);
  width: 100%;
  text-align: left;
  position: relative; /* Pour positionner l'icône */
  display: flex;
  justify-content: space-between; /* Écarte le texte de l'icône */
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.collapsiblockTitleCollapsed {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
 }
 
.collapsiblockContent {
  /* On garde tes styles de base si tu en as */
  background-color: var(--pev-creme); /* Fond crème doux */
  color: var(--pev-terre-fonce);
  font-weight: 700;
  padding: 1rem 1.5rem;
  border-radius: 0 0 8px 8px;
  border: 1px solid var(--pev-gris-leger);
  width: 100%;
  text-align: left;
  position: relative; /* Pour positionner l'icône */
  display: flex;
  justify-content: space-between; /* Écarte le texte de l'icône */
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 2. L'Icône "Plus" (+) Personnalisée
   On utilise un pseudo-élément ::after pour dessiner le "+" sans image externe.
   C'est plus léger et ça se colore automatiquement.
*/
.collapsiblockTitle button::after {
  content: '+'; /* Le caractère Plus */
  font-size: 1.8rem; /* Taille généreuse */
  font-weight: 300; /* Trait fin pour l'élégance */
  color: var(--pev-vert-feuille); /* Notre vert naturel */
  line-height: 0.5;
  transition: transform 0.3s ease, color 0.3s ease;
  margin-left: 1rem; /* Espace entre le texte et le symbole */
  display: block;
  min-width: 30px; /* Évite que le bouton ne bouge quand ça tourne */
  text-align: center;
}

/* 3. État : SURVOL (Hover)
   On rend le tout un peu plus vivant au passage de la souris.
*/
.collapsiblockTitle button:hover {
  background-color: var(--pev-vert-clair); /* Fond vert pâle */
  border-color: var(--pev-vert-feuille);
  color: #2e5c1f; /* Texte vert foncé */
}

.collapsiblockTitle button:hover::after {
  color: #2e5c1f; /* L'icône fonce aussi */
  transform: scale(1.1); /* Petit effet de grossissement */
}

/* 4. État : OUVERT (Active / Expanded)
   Quand le bloc est ouvert, on tourne le "+" pour former une croix (x).
   C'est le signal visuel clair que "c'est déplié".
*/
.collapsiblockTitle button[aria-expanded="true"]::after,
.collapsiblockTitle button.active::after {
  transform: rotate(45deg); /* Rotation de 45 degrés = une croix */
  color: var(--pev-terre-clair); /* Couleur terre quand ouvert */
}

/* 5. Responsive Mobile
   Ajustement si nécessaire sur petit écran.
*/
@media (max-width: 768px) {
  .collapsiblockTitle button {
    font-size: 0.95rem;
    padding: 0.8rem 1rem;
  }
  
  .collapsiblockTitle button::after {
    font-size: 1.5rem;
  }
}

/* ===========================================================
   NETTOYAGE : MASQUER LES ONGLETS NATIFS DRUPAL
   Objectif : Laisser la Sidebar gérer la navigation.
   =========================================================== */

/* Cible les onglets sur les pages utilisateur (/user/ID) */
.path-user .nav-tabs,
.path-user .primary {
  display: none !important;
}

/* Optionnel : Si tu veux garder un titre "Mon Compte" mais pas les onglets,
   on peut styliser le conteneur parent, mais pour l'instant, on coupe tout. */

/* Ajustement du padding du contenu principal maintenant que les onglets ont disparu */
.path-user .node__content,
.path-user .page-content {
  margin-top: 0; /* Supprime l'espace réservé aux onglets */
}

/* -----------------------------------------------------------
   COMPOSANT : TARIF ADHÉSION (STYLE "CONTRIBUTION JUSTE")
   Cible : .field--name-price sur la page produit
   Philosophie : Rendre le prix visible, chaleureux et transparent.
   ----------------------------------------------------------- */

/* 1. Le Conteneur Global (Label + Valeur) */
.product--variation-field--variation_price,
.field--name-price {
  display: flex;
  flex-direction: column; /* Empile le label et le prix */
  align-items: center;    /* Centre tout horizontalement */
  justify-content: center;
  margin: 2rem 0;         /* Respiration haut et bas */
  padding: 1.5rem;
  background-color: var(--pev-creme); /* Fond crème doux */
  border-radius: 12px;
  border: 2px solid var(--pev-terre-clair); /* Bordure terre cuite */
  box-shadow: 0 4px 10px rgba(93, 64, 55, 0.1);
}

/* 2. Le Label "Prix" (On le rend discret mais présent) */
.product--variation-field--variation_price .field__label,
.field--name-price .field__label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pev-terre-clair); /* Couleur terre cuite */
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

/* 3. La Valeur (Le Montant : 15,00 €) */
.product--variation-field--variation_price .field__item,
.field--name-price .field__item {
  font-size: 2.5rem;        /* Grand et lisible */
  font-weight: 700;
  color: var(--pev-terre-fonce); /* Marron terreux fort */
  line-height: 1.2;
  display: flex;
  align-items: baseline;    /* Aligner l'euro avec le chiffre */
  gap: 2px;
}

/* 4. Le Symbole Euro (Optionnel : un peu plus petit) */
.product--variation-field--variation_price .field__item span,
.field--name-price .field__item span {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--pev-vert-feuille); /* Touche de vert pour l'économie circulaire */
}

/* 5. Petite touche "Bienveillante" sous le prix */
.product--variation-field--variation_price::after,
.field--name-price::after {
  content: "Contribution annuelle unique";
  display: block;
  font-size: 0.85rem;
  color: var(--pev-gris-texte);
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

/* 6. Responsive Mobile */
@media (max-width: 768px) {
  .product--variation-field--variation_price .field__item,
  .field--name-price .field__item {
    font-size: 2rem; /* Un peu plus petit sur mobile */
  }
}

/* -----------------------------------------------------------
   COMPOSANT : BOUTON D'AJOUT AU PANIER (STYLE "INVITATION")
   Cible : Boutons Commerce sur page produit
   Philosophie : Une main tendue, pas un ordre d'achat.
   ----------------------------------------------------------- */

/* 1. Le Bouton Principal (Ajouter au panier) */
.button--add-to-cart,
.btn-commerce-add-to-cart,
form[name^="commerce_order_item_add_to_cart"] button[type="submit"],
form[name^="commerce_order_item_add_to_cart"] input[type="submit"] {
  /* Forme & Structure */
  display: inline-block;
  padding: 1rem 3rem;          /* Plus large et plus aéré */
  font-size: 1.1rem;           /* Texte plus grand */
  font-weight: 700;            /* Gras pour l'assurance */
  text-transform: uppercase;   /* Solennel */
  letter-spacing: 0.05em;      /* Respiration entre les lettres */
  border-radius: 50px;         /* Forme pilule (ronde) */
  border: none;                /* Pas de bordure brute */
  
  /* Couleurs (Charte PEV) */
  background-color: var(--pev-terre-clair); /* Terre cuite (Action principale) */
  color: #ffffff;              /* Texte blanc */
  
  /* Ombre & Profondeur */
  box-shadow: 0 4px 15px rgba(141, 110, 99, 0.3); /* Ombre douce teintée terre */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition fluide et naturelle */
  
  /* Curseur */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

/* 2. État : SURVOL (Hover) - L'Appel du Lien */
.button--add-to-cart:hover,
form[name^="commerce_order_item_add_to_cart"] button[type="submit"]:hover,
form[name^="commerce_order_item_add_to_cart"] input[type="submit"]:hover {
  background-color: var(--pev-terre-fonce); /* Devient marron foncé (Terre profonde) */
  color: #ffffff;
  transform: translateY(-3px); /* Se soulève légèrement */
  box-shadow: 0 8px 20px rgba(93, 64, 55, 0.4); /* L'ombre grandit */
  text-decoration: none;       /* Pas de soulignement */
}

/* 3. État : ACTIF / CLICK (L'Engagement) */
.button--add-to-cart:active,
form[name^="commerce_order_item_add_to_cart"] button[type="submit"]:active,
form[name^="commerce_order_item_add_to_cart"] input[type="submit"]:active {
  transform: translateY(1px); /* S'enfonce légèrement */
  box-shadow: 0 2px 10px rgba(93, 64, 55, 0.3);
  background-color: var(--pev-vert-feuille); /* Touche de vert pour valider l'action */
}

/* 4. État : FOCUS (Accessibilité) */
.button--add-to-cart:focus,
form[name^="commerce_order_item_add_to_cart"] button[type="submit"]:focus {
  outline: 3px solid var(--pev-vert-clair); /* Cercle vert pâle pour le clavier */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(85, 139, 47, 0.2);
}

/* 5. Petit Effet "Lueur" (Optionnel - Très chic) */
/* Ajoute un reflet subtil qui passe sur le bouton au survol */
.button--add-to-cart::before,
form[name^="commerce_order_item_add_to_cart"] button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.button--add-to-cart:hover::before,
form[name^="commerce_order_item_add_to_cart"] button[type="submit"]:hover::before {
  left: 100%;
}

/* 6. Responsive Mobile */
@media (max-width: 768px) {
  .button--add-to-cart,
  form[name^="commerce_order_item_add_to_cart"] button[type="submit"],
  form[name^="commerce_order_item_add_to_cart"] input[type="submit"] {
    width: 100%; /* Pleine largeur sur mobile pour faciliter le clic */
    padding: 1.2rem 2rem;
    font-size: 1rem;
  }
}

/* -----------------------------------------------------------
   UNIFORMISATION DES BOUTONS COMMERCE (PANIER & CHECKOUT)
   Cible : Tous les boutons d'action Drupal Commerce
   Philosophie : Cohérence visuelle du début à la fin du parcours.
   ----------------------------------------------------------- */

/* 1. Bouton "Procéder au paiement" (Checkout) */
#edit-checkout-flow,
.form-actions input[type="submit"].button--primary,
a.button--primary {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
  border: none;
  background-color: var(--pev-vert-feuille); /* Vert pour valider l'étape */
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(85, 139, 47, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  text-align: center;
}

/* Hover Vert */
#edit-checkout-flow:hover,
.form-actions input[type="submit"].button--primary:hover,
a.button--primary:hover {
  background-color: #33691E; /* Vert plus foncé */
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(85, 139, 47, 0.4);
  text-decoration: none;
}

/* 2. Bouton "Continuer les achats" ou "Retour" (Secondaire) */
.form-actions input[type="submit"].button--secondary,
a.button--secondary,
.btn-secondary {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  border: 2px solid var(--pev-gris-leger);
  background-color: transparent;
  color: var(--pev-gris-texte);
  transition: all 0.3s ease;
}

/* Hover Secondaire */
.form-actions input[type="submit"].button--secondary:hover,
a.button--secondary:hover {
  border-color: var(--pev-terre-clair);
  color: var(--pev-terre-clair);
  background-color: rgba(141, 110, 99, 0.05);
  text-decoration: none;
}

/* 3. Suppression des styles natifs moches de Drupal */
.button, 
.btn,
input[type="submit"] {
  /* On s'assure que nos styles prennent le dessus */
  border-radius: 50px !important; 
}

/* Force le style sur les boutons spécifiques du Checkout */
#edit-actions-next,
button[name="op"][value="Payer et terminer votre achat"],
button[name="op"][value="Continuer vers le récapitulatif de la commande"] {
  background-color: var(--pev-vert-feuille) !important;
  border-radius: 50px !important;
  padding: 1rem 2.5rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 15px rgba(85, 139, 47, 0.3) !important;
  border: none !important;
}
#edit-actions-next:hover {
  background-color: #33691E !important;
  transform: translateY(-2px) !important;
}


/* ===========================================================
   MESSAGERIE PEV : NAVIGATION & UX PURIFIÉE
   =========================================================== */

/* 1. CACHER LES ONGLETS NATIFS DRUPAL (MOCHES) */
.page-messages .tabs,
.page-messages .nav-tabs {
  display: none !important;
}

/* 2. LA NOUVELLE BARRE DE NAVIGATION "PEV MESSENGER" */
.pev-messenger-nav {
  background-color: var(--pev-blanc);
  border-bottom: 2px solid var(--pev-vert-feuille);
  padding: 1rem 0;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pev-messenger-nav .container {
  display: flex;
  justify-content: center; /* Centré pour plus de solennité */
  gap: 1rem;
  flex-wrap: wrap;
}

/* Les Boutons */
.pev-messenger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pev-gris-texte);
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px; /* Forme pilule */
  text-decoration: none;
  transition: all 0.3s ease;
}

.pev-messenger-btn:hover {
  background-color: var(--pev-vert-clair);
  border-color: var(--pev-vert-feuille);
  color: #2e5c1f;
  transform: translateY(-2px);
}

/* État Actif */
.pev-messenger-btn.active {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  border-color: var(--pev-vert-feuille);
  box-shadow: 0 4px 8px rgba(85, 139, 47, 0.3);
}

/* Icônes (optionnel, si tu veux ajouter des SVG) */
.pev-messenger-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ===========================================================
   MESSAGERIE PEV : NAVIGATION & UX PURIFIÉE
   =========================================================== */

/* 1. CACHER LES ONGLETS NATIFS DRUPAL */
.page-messages .tabs,
.page-messages .nav-tabs {
  display: none !important;
}

/* 2. NETTOYAGE DU FORMULAIRE DE MESSAGE */
/* On cache le champ Convention dans le flux principal (il sera dans la modale) */
#edit-field-convention-signee-wrapper {
  display: none !important;
}

/* Style épuré pour la zone de texte */
.privatemsg-message-add-form .form-textarea-wrapper {
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  overflow: hidden;
}

.privatemsg-message-add-form .ck-editor__top {
  background-color: var(--pev-creme);
  border-bottom: 1px solid var(--pev-gris-leger);
}

/* 3. LA MODALE DE DÉPÔT (BOOTSTRAP 5) */
.modal-convention .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.modal-convention .modal-header {
  background-color: var(--pev-vert-clair);
  border-bottom: 2px solid var(--pev-vert-feuille);
  border-radius: 12px 12px 0 0;
}

.modal-convention .modal-title {
  color: var(--pev-terre-fonce);
  font-weight: 700;
  font-size: 1.25rem;
}

.modal-convention .btn-close {
  filter: invert(0.5);
}

.modal-convention .modal-body {
  padding: 2rem;
  text-align: center;
}

/* 4. ZONE DE DÉPÔT (DROP ZONE) */
.convention-drop-zone {
  border: 2px dashed var(--pev-terre-clair);
  background-color: var(--pev-creme);
  padding: 2rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative; /* CRUCIAL pour le positionnement absolute du child */
  text-align: center;
  min-height: 150px; /* Hauteur minimale de sécurité */
}

.convention-drop-zone:hover {
  border-color: var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
  transform: scale(1.02);
}

/* 5. LE INPUT FILE "FANTÔME" */
/* On cible le input à l'intérieur du wrapper déplacé */
#convention-field-target #edit-field-convention-signee-wrapper input[type="file"],
#edit-field-convention-signee-wrapper input[type="file"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 6. ÉLÉMENTS UI DIVERS */
/* Cacher le bouton "Transférer" natif de Drupal */
#edit-field-convention-signee-0-upload-button {
  display: none !important;
}

/* Message de confirmation (fichier sélectionné) */
.convention-file-selected {
  margin-top: 10px;
  font-weight: 700;
  color: var(--pev-vert-feuille);
  display: none;
}

/* S'assurer que la cible a bien une hauteur si elle est vide */
#convention-field-target {
  position: relative;
  display: block;
  width: 100%;
  min-height: 150px;
}

/* ===========================================================
   MOBILE : Optimisation de la zone de dépôt Convention
   =========================================================== */
@media (max-width: 768px) {
  #convention-drop-area {
    /* On réduit la taille pour que ce soit moins invasif sur petit écran */
    min-height: 120px; 
    padding: 1rem;
    font-size: 0.9rem;
  }

  /* On s'assure que le texte ne dépasse pas */
  #convention-drop-area p {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Si la modale est trop large, on l'adapte */
  .modal-convention .modal-dialog {
    margin: 1rem;
    max-width: 95%;
  }
}

/* ===========================================================
   COMPOSANT : CALENDRIER FULLCALENDAR (VERSION "BRILLANCE PEV")
   Palette : Crème, Terre, Vert Feuille
   =========================================================== */
tr {
  background: var(--pev-creme) !important;
}

/* 1. STRUCTURE & GRILLE (Fond Crème & Bordures Douces) */
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--pev-gris-leger) !important;
}

/* Fond général du calendrier : Blanc ou Crème très léger */
.fc-view-harness {
  background-color: var(--pev-blanc);
}

/* 2. EN-TÊTE DES JOURS (Lun, Mar, Mer...) : BLANC SUR TERRE FONCÉ */
.fc-col-header-cell {
  background-color: var(--pev-terre-fonce) !important; /* #5D4037 */
  color: var(--pev-blanc) !important;
  padding: 0.8rem 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--pev-terre-clair) !important;
}

.fc-col-header-cell-cushion {
  color: var(--pev-blanc) !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
}

/* 3. NUMÉROS DES JOURS : STYLE & VISIBILITÉ */
.fc-daygrid-day-number {
  color: var(--pev-terre-fonce) !important; /* Texte marron foncé */
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 6px 8px;
  display: inline-block;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* Effet de survol sur le numéro du jour */
.fc-daygrid-day-number:hover {
  background-color: var(--pev-vert-clair);
  color: var(--pev-terre-fonce);
  text-decoration: none;
}

/* Jour actuel (Aujourd'hui) : Mis en valeur */
.fc-day-today .fc-daygrid-day-number {
  background-color: var(--pev-vert-feuille);
  color: var(--pev-blanc) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Jours autres (mois précédent/suivant) : Discrets */
.fc-day-other .fc-daygrid-day-number {
  color: #999;
  font-weight: 400;
  background-color: transparent;
}

/* Fond des jours "autres" */
.fc-day-other {
  background-color: #fcfcfc;
}

/* Fond du jour actuel : Très subtil */
.fc-day-today {
  background-color: rgba(220, 237, 200, 0.15) !important; /* Vert clair très transparent */
}

/* 4. LES ÉVÉNEMENTS (ANNONCES) : ÉLÉGANCE & LISIBLE */
.fc-daygrid-event {
  border-radius: 8px !important;
  border: 1px solid var(--pev-vert-feuille) !important;
  background-color: var(--pev-vert-clair) !important; /* Fond Vert Pâle */
  padding: 4px 6px !important;
  margin-bottom: 4px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.fc-event-title {
  color: var(--pev-terre-fonce) !important; /* Titre Marron Foncé */
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Effet de survol sur un événement : Il se soulève et s'éclaire */
.fc-daygrid-event:hover {
  transform: translateY(-3px) scale(1.01);
  background-color: var(--pev-blanc) !important;
  box-shadow: 0 6px 12px rgba(93, 64, 55, 0.15);
  border-color: var(--pev-terre-clair) !important;
  cursor: pointer;
  z-index: 10;
}

/* 5. BOUTONS & NAVIGATION (TOOLBAR) */
.fc-toolbar-title {
  color: var(--pev-terre-fonce) !important;
  font-size: 1.6rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fc-button-primary {
  background-color: var(--pev-terre-clair) !important;
  border-color: var(--pev-terre-clair) !important;
  color: var(--pev-blanc) !important;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  transition: all 0.3s ease;
}

.fc-button-primary:hover {
  background-color: var(--pev-terre-fonce) !important;
  border-color: var(--pev-terre-fonce) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.fc-button-active {
  background-color: var(--pev-vert-feuille) !important;
  border-color: var(--pev-vert-feuille) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.fc-button-primary:disabled {
  background-color: var(--pev-gris-leger) !important;
  border-color: var(--pev-gris-leger) !important;
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 6. RESPONSIVE MOBILE : OPTIMISATION MAXIMALE */
@media (max-width: 768px) {
  .fc-toolbar {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .fc-toolbar-title {
    font-size: 1.3rem !important;
    order: -1; /* Le titre passe tout en haut */
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  .fc-button-group {
    justify-content: center;
    width: 100%;
  }
  
  .fc-button {
    flex: 1;
    max-width: 100px;
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }
  
  .fc-col-header-cell {
    font-size: 0.75rem;
    padding: 0.4rem 0;
  }
  
  .fc-daygrid-day-number {
    font-size: 0.9rem;
    padding: 4px;
  }
  
  .fc-event-title {
    font-size: 0.75rem;
  }
}

/* Conteneur du menu utilisateur */
.pev-user-menu {
  display: flex;
  align-items: center;
  gap: 20px; /* Espace entre les éléments */
  margin-left: auto; /* Pousse tout le menu à droite */
  padding: 0 10px;
}

/* Style général des liens */
.pev-nav-item {
  display: flex;
  align-items: center;
  gap: 8px; /* Espace entre l'icône et le texte */
  text-decoration: none;
  color: var(--pev-gris-texte, #3B3B3B); /* Utilise ta variable couleur */
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 50px; /* Forme de pilule */
  background-color: transparent;
}

/* Style des icônes (Émojis) */
.pev-icon {
  font-size: 1.4rem; /* Un peu plus grand que le texte */
  line-height: 1;
  transition: transform 0.3s ease;
}

/* Effet au Survol (Hover) */
.pev-nav-item:hover {
  background-color: var(--pev-vert-clair, #DCEDC8); /* Fond vert très pâle */
  color: var(--pev-vert-feuille, #558B2F); /* Texte vert foncé */
}

.pev-nav-item:hover .pev-icon {
  transform: scale(1.2) rotate(5deg); /* L'icône grossit et penche un peu */
}

/* Responsive Mobile : On cache le texte si l'écran est trop petit, juste les icônes */
@media (max-width: 768px) {
  .pev-label {
    display: none;
  }
  .pev-user-menu {
    gap: 15px;
  }
  .pev-icon {
    font-size: 1.6rem;
  }
}
/* ===========================================================
   RESPONSIVE : MENU UTILISATEUR MOBILE
   Objectif : Aligner les icônes côte à côte et centrées sur mobile
   =========================================================== */

@media (max-width: 768px) {
  .pev-user-menu {
    /* On s'assure que le conteneur prend toute la largeur disponible */
    width: 100%; 
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 25px; /* Un peu plus d'espace entre les icônes pour le tactile */
    padding: 10px 0; /* Petit espace vertical pour ne pas coller aux bords */
    margin-left: 0; /* Annule le margin-left: auto du desktop */
  }

  .pev-nav-item {
    /* On s'assure que le lien ne prend pas trop de place */
    flex: 0 0 auto; 
    padding: 5px; /* Réduit le padding pour que ce soit compact */
  }

  .pev-label {
    display: none; /* Cache le texte sur mobile, on garde que l'icône */
  }

  .pev-icon {
    font-size: 2rem; /* Grossit un peu les icônes pour le tactile */
    display: block;
    margin: 0 auto; /* Centre l'icône dans son lien */
  }
  
  /* Effet de survol adapté au tactile */
  .pev-nav-item:active .pev-icon {
    transform: scale(0.9); /* Petit effet de clic */
  }
}

/* ===========================================================
   COMPOSANT : BANDEAU PARTENAIRE "EL COTTAGE DU COIN" (V2)
   Avec accroche pour propriétaires de gîtes
   =========================================================== */

.ecdc-footer-band {
  background-color: var(--pev-terre-fonce);
 /* border-top: 1px solid rgba(255, 255, 255, 0.1);*/
  padding: 1rem 0; /* Un peu plus d'espace vertical */
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}

.ecdc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem; /* Espace entre l'accroche et le lien */
}

/* --- NOUVEAU : LA PHRASE D'ACCROCHE (HOOK) --- */
.ecdc-hook {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85); /* Plus visible que le label */
  font-weight: 400;
  line-height: 1.5;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.05); /* Fond très subtil pour détacher */
  padding: 0.8rem 1.5rem;
  border-radius: 50px; /* Forme pilule douce */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ecdc-hook-icon {
  font-size: 1.1rem;
  animation: ecdc-pulse 2s infinite ease-in-out;
}

/* Petite animation de pulsation pour l'icône clé (subtile) */
@keyframes ecdc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.ecdc-hook strong {
  color: #fff;
  font-weight: 700;
}

/* --- BLOC SIGNATURE (Ancienne structure adaptée) --- */
.ecdc-signature-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ecdc-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

/* Le Lien Principal */
.ecdc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--pev-vert-clair);
  font-size: 1rem; /* Légèrement plus grand */
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 6px 16px;
  border-radius: 25px;
  border: 1px solid transparent;
}

.ecdc-icon {
  font-size: 1.1rem;
  opacity: 0.9;
}

.ecdc-arrow {
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.3s ease;
  color: #fff;
}

/* --- ÉTATS : HOVER & FOCUS --- */
.ecdc-link:hover,
.ecdc-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

.ecdc-link:hover .ecdc-arrow,
.ecdc-link:focus .ecdc-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* L'accroche réagit aussi au survol du lien (optionnel, pour lier les deux) */
.ecdc-link:hover ~ .ecdc-hook,
.ecdc-container:hover .ecdc-hook {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.08);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
  .ecdc-footer-band {
    padding: 1.5rem 0;
    margin-top: 1.5rem;
  }
  
  .ecdc-hook {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px; /* Moins rond sur mobile pour gagner de la place */
  }
  
  .ecdc-hook-icon {
    animation: none; /* On désactive l'anim sur mobile pour perf */
  }
  
  .ecdc-label {
    font-size: 0.65rem;
  }
  
  .ecdc-link {
    font-size: 0.9rem;
  }
}

/* ===========================================================
   COMPOSANT : BANDEAU ECDC - PHRASE FUSIONNÉE
   Style : Fluide, Intégré, Lisible
   =========================================================== */


section .region-footer-fifth,
.site-footer__bottom .block,
.site-footer p,
.site-footer__bottom .region,
.region-footer-fifth {
	margin : 0;
	padding: 0;
}

.ecdc-footer-band {
  background-color: var(--pev-terre-fonce);
/*  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 0;
  margin-top: 2rem;*/
  width: 100%;
}

.ecdc-container {
  max-width: 1100px; /* Un peu plus étroit pour que la ligne ne soit pas trop longue */
  margin: 0 auto;
  padding: 0 20px;
}

/* Le Paragraphe Unique */
.ecdc-unique-hook {
  margin: 0;
  font-size: 1rem; /* Taille de base lisible */
  line-height: 1.6; /* Interligne aéré pour la lisibilité */
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  display: flex;
  flex-wrap: wrap; /* Permet au texte de passer à la ligne proprement */
  justify-content: center;
  align-items: center;
  gap: 8px; /* Espacement constant entre les éléments */
}

/* Icône Clé */
.ecdc-hook-icon {
  font-size: 1.2rem;
  display: inline-block;
  animation: ecdc-pulse 2.5s infinite ease-in-out;
}

@keyframes ecdc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Texte d'intro "la solution web par" */
.ecdc-intro {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  font-weight: 400;
}

/* Texte de fin "l'outil 100% autonome..." */
.ecdc-outro {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* --- LE LIEN INTÉGRÉ (Le cœur du design) --- */
.ecdc-inline-link,
a.ecdc-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.1); /* Fond subtil pour détacher le lien */
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--pev-vert-clair);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  white-space: nowrap; /* Empêche le nom de se couper en deux */
  margin: 0 2px;
}

.ecdc-inline-link .ecdc-icon {
  font-size: 1rem;
}

.ecdc-inline-link .ecdc-arrow {
  font-size: 0.8rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.3s ease;
  color: #fff;
}

/* États Hover/Focus du Lien */
.site-footer .ecdc-inline-link:hover, 
.site-footer .ecdc-inline-link:focus {
  background-color: var(--pev-vert-clair) !important;
  color: var(--pev-terre-fonce) !important; /* Force le marron foncé au survol */
  border-color: var(--pev-vert-clair) !important;
  gap: 8px;
}

.ecdc-inline-link:hover .ecdc-arrow,
.ecdc-inline-link:focus .ecdc-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
  .ecdc-unique-hook {
    flex-direction: column; /* Empile les éléments sur mobile */
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  .ecdc-intro, .ecdc-outro {
    font-size: 0.9rem;
    display: block; /* Force le retour à la ligne pour aérer */
  }
  
  .ecdc-inline-link {
    width: auto;
    justify-content: center;
    padding: 6px 16px;
    font-size: 1rem; /* Un peu plus grand pour le doigt */
  }
  
  .ecdc-hook-icon {
    animation: none;
  }
}

/* ===========================================================
   COMPOSANT : TABLEAUX DE DASHBOARD (VIEWS)
   Style : Épuré, Lisible, "Terre & Nature"
   Cible : Vues comme "Mes Annonces", "Mes Réservations", etc.
   =========================================================== */

/* 1. Conteneur Global & Responsive */
.view-mes-annonces-vacances .table-responsive,
.view-id-mes_annonces_vacances .table-responsive {
  border-radius: 12px;
  overflow: hidden; /* Pour les bords arrondis */
  box-shadow: 0 4px 15px rgba(93, 64, 55, 0.08);
  background-color: var(--pev-blanc);
 /* border: 1px solid var(--pev-gris-leger);*/
  margin-top: 1.5rem;
}

/* 2. Le Tableau lui-même */
.view-mes-annonces-vacances table.views-table,
.view-id-mes_annonces_vacances table.views-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse; /* Supprime les doubles bordures */
  background-color: var(--pev-blanc);
  border-radius: 12px;
  border: 1px solid var(--pev-gris-leger);
}

/* 3. En-têtes (Thead) */
.view-mes-annonces-vacances table.views-table thead th,
.view-id-mes_annonces_vacances table.views-table thead th {
  background-color: var(--pev-terre-fonce); /* Fond marron foncé */
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  padding: 1rem 1.5rem;
  border:none;
  text-align: left;
  white-space: nowrap; /* Empêche le texte de se couper bizarrement */
}

/* Liens de tri dans les en-têtes (couleur blanche) */
.view-mes-annonces-vacances table.views-table thead th a,
.view-id-mes_annonces_vacances table.views-table thead th a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.view-mes-annonces-vacances table.views-table thead th a:hover,
.view-id-mes_annonces_vacances table.views-table thead th a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* 4. Lignes du corps (Tbody) */
.view-mes-annonces-vacances table.views-table tbody tr,
.view-id-mes_annonces_vacances table.views-table tbody tr {
  border-bottom: 1px solid var(--pev-gris-leger);
  transition: background-color 0.2s ease;
}

.view-mes-annonces-vacances table.views-table tbody tr:last-child,
.view-id-mes_annonces_vacances table.views-table tbody tr:last-child {
  border-bottom: none;
}

/* Effet de survol sur la ligne (Table Hover) */
.view-mes-annonces-vacances table.views-table tbody tr:hover,
.view-id-mes_annonces_vacances table.views-table tbody tr:hover {
  background-color: var(--pev-vert-clair); /* Vert très pâle au survol */
}

/* 5. Cellules (Td) */
.view-mes-annonces-vacances table.views-table tbody td,
.view-id-mes_annonces_vacances table.views-table tbody td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
  color: var(--pev-gris-texte);
  font-size: 0.95rem;
  border: none;
}

/* Colonne Titre (Gras et plus grand) */
.view-mes-annonces-vacances table.views-table td.views-field-title,
.view-id-mes_annonces_vacances table.views-table td.views-field-title {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  font-size: 1.05rem;
}

.view-mes-annonces-vacances table.views-table td.views-field-title a,
.view-id-mes_annonces_vacances table.views-table td.views-field-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.view-mes-annonces-vacances table.views-table td.views-field-title a:hover,
.view-id-mes_annonces_vacances table.views-table td.views-field-title a:hover {
  color: var(--pev-terre-clair);
  text-decoration: underline;
}

/* 6. Boutons d'Action (Modifier / Supprimer) */
/* On transforme les liens texte en petits badges/boutons */

.view-mes-annonces-vacances table.views-table td.views-field-edit-node a,
.view-id-mes_annonces_vacances table.views-table td.views-field-edit-node a {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--pev-creme);
  color: var(--pev-terre-clair);
  border: 1px solid var(--pev-terre-clair);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.view-mes-annonces-vacances table.views-table td.views-field-edit-node a:hover,
.view-id-mes_annonces_vacances table.views-table td.views-field-edit-node a:hover {
  background-color: var(--pev-terre-clair);
  color: #fff;
}

.view-mes-annonces-vacances table.views-table td.views-field-delete-node a,
.view-id-mes_annonces_vacances table.views-table td.views-field-delete-node a {
  display: inline-block;
  padding: 4px 12px;
  background-color: transparent;
  color: #d9534f; /* Rouge doux pour supprimer */
  border: 1px solid #d9534f;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  margin-left: 5px;
}

.view-mes-annonces-vacances table.views-table td.views-field-delete-node a:hover,
.view-id-mes_annonces_vacances table.views-table td.views-field-delete-node a:hover {
  background-color: #d9534f;
  color: #fff;
}

/* 7. Statut (Publié / Non publié) */
/* On crée une pastille visuelle automatique */
.view-mes-annonces-vacances table.views-table td.views-field-status,
.view-id-mes_annonces_vacances table.views-table td.views-field-status {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Si le texte est "Oui" (Publié) -> Vert */
.view-mes-annonces-vacances table.views-table td.views-field-status:contains("Oui"),
.view-id-mes_annonces_vacances table.views-table td.views-field-status:contains("Oui") {
  color: var(--pev-vert-feuille);
}
/* Note : Le sélecteur :contains() ne marche pas en CSS pur standard, 
   mais Drupal ajoute souvent des classes .status-publish ou .status-unpublished sur la ligne ou la cellule.
   Si ce n'est pas le cas, on utilise une approche visuelle globale ou on ajoute une classe via Twig.
   CI-DESSOUS : Solution de repli visuelle simple si pas de classe spécifique */
   
/* Alternative : On style le texte tel quel, mais on peut ajouter un petit rond via CSS si besoin */
.view-mes-annonces-vacances table.views-table td.views-field-status::before,
.view-id-mes_annonces_vacances table.views-table td.views-field-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--pev-vert-feuille); /* Vert par défaut */
  margin-right: 6px;
}

/* Si le statut contient "Non" ou "Brouillon", on change la couleur (nécessite souvent du JS ou une classe Drupal)
   Pour faire simple en CSS pur sans classe spécifique, on laisse le vert pour "Oui" et on gère le reste manuellement si besoin.
   MAIS, Drupal Views ajoute souvent la classe .status-0 ou .status-1 à la ligne <tr>.
*/

/* Cible les lignes avec statut non publié (si Drupal ajoute la classe) */
.view-mes-annonces-vacances table.views-table tr.status-0 td.views-field-status::before,
.view-id-mes_annonces_vacances table.views-table tr.status-0 td.views-field-status::before {
  background-color: #999; /* Gris pour non publié */
}
.view-mes-annonces-vacances table.views-table tr.status-0 td.views-field-status,
.view-id-mes_annonces_vacances table.views-table tr.status-0 td.views-field-status {
  color: #999;
}

/* 8. Responsive Mobile */
@media (max-width: 768px) {
  .view-mes-annonces-vacances .table-responsive,
  .view-id-mes_annonces_vacances .table-responsive {
    border: none;
    box-shadow: none;
    background: transparent;
  }
  
  .view-mes-annonces-vacances table.views-table thead,
  .view-id-mes_annonces_vacances table.views-table thead {
    display: none; /* Cache les en-têtes sur mobile */
  }
  
  .view-mes-annonces-vacances table.views-table tbody tr,
  .view-id-mes_annonces_vacances table.views-table tbody tr {
    display: block;
    background: var(--pev-blanc);
    border: 1px solid var(--pev-gris-leger);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  
  .view-mes-annonces-vacances table.views-table tbody td,
  .view-id-mes_annonces_vacances table.views-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pev-creme);
    text-align: right;
  }
  
  .view-mes-annonces-vacances table.views-table tbody td:last-child,
  .view-id-mes_annonces_vacances table.views-table tbody td:last-child {
    border-bottom: none;
  }
  
  /* Ajout d'un label avant chaque cellule pour savoir ce que c'est (via data-label si possible, ou CSS) */
  /* Ici, on force l'affichage en bloc pour que ce soit lisible */
  .view-mes-annonces-vacances table.views-table tbody td.views-field-title,
  .view-id-mes_annonces_vacances table.views-table tbody td.views-field-title {
    text-align: left;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--pev-terre-clair);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    display: block; /* Le titre prend toute la largeur */
  }
}

/* ===========================================================
   COMPOSANT : MESSAGERIE PRIVÉE (PRIVATEGMSG VIEWS) - V2
   Corrections : Compteur discret, Convention visible, Switch compact
   =========================================================== */

.vbo-view-form .js-form-type-select {
  margin-top: 27px;
}


/* 1. Conteneur Global & Filtres (Inchangé, c'est bon) */
.view-all-privatemsg-threads .table-responsive {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(93, 64, 55, 0.08);
  background-color: var(--pev-blanc);
  border: 1px solid var(--pev-gris-leger);
  margin-top: 1.5rem;
}

.view-all-privatemsg-threads details.form-wrapper {
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.view-all-privatemsg-threads summary {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.view-all-privatemsg-threads summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--pev-vert-feuille);
  font-weight: 300;
}

.view-all-privatemsg-threads details[open] summary::after {
  content: '-';
}

.view-all-privatemsg-threads .form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-top: 1rem;
}

.view-all-privatemsg-threads .form-item {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0 !important;
}

/* 2. Le Tableau de Messages */
.view-all-privatemsg-threads table.views-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--pev-blanc);
}

/* En-têtes : Plus compacts */
.view-all-privatemsg-threads table.views-table thead th {
  background-color: var(--pev-terre-fonce);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem; /* Plus petit */
  padding: 0.8rem 1rem; /* Moins de padding */
  border: none;
  text-align: left;
  vertical-align: middle;
}

/* Lignes */
.view-all-privatemsg-threads table.views-table tbody tr {
  border-bottom: 1px solid var(--pev-gris-leger);
  transition: all 0.2s ease;
}

.view-all-privatemsg-threads table.views-table tbody tr:last-child {
  border-bottom: none;
}

/* Effet de survol */
.view-all-privatemsg-threads table.views-table tbody tr:hover {
  background-color: var(--pev-vert-clair);
}

/* Ligne NON-LUE (Si Drupal ajoute la classe .privatemsg-unread) */
.view-all-privatemsg-threads table.views-table tbody tr.privatemsg-unread {
  background-color: #fff;
  border-left: 4px solid var(--pev-vert-feuille);
  font-weight: 600;
}

/* Cellules : Plus compactes */
.view-all-privatemsg-threads table.views-table tbody td {
  padding: 0.8rem 1rem;
  vertical-align: middle;
  color: var(--pev-gris-texte);
  font-size: 0.9rem;
  border: none;
}

/* 3. Colonnes Spécifiques (CORRECTIONS) */

/* A. Checkbox (VBO) - Switch plus compact */
.view-all-privatemsg-threads td.views-field-views-bulk-operations-bulk-form {
  width: 30px;
  text-align: center;
  padding-left: 0.5rem;
}

/* On réduit la taille du switch natif Bootstrap si possible, ou on le centre mieux */
.view-all-privatemsg-threads td.views-field-views-bulk-operations-bulk-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* B. Participants (Gras) */
.view-all-privatemsg-threads td.views-field-members-target-id {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  width: 20%;
  font-size: 0.95rem;
}

/* C. Objet (Le lien principal) */
.view-all-privatemsg-threads td.views-field-subject {
  width: 35%;
}

.view-all-privatemsg-threads td.views-field-subject a {
  color: var(--pev-terre-fonce);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
  display: block;
}

.view-all-privatemsg-threads td.views-field-subject a:hover {
  color: var(--pev-vert-feuille);
  text-decoration: underline;
}

/* D. Date (Discrète) */
.view-all-privatemsg-threads td.views-field-updated-custom {
  color: #888;
  font-size: 0.8rem;
  white-space: nowrap;
  width: 15%;
}

/* E. Compteur de Messages (CORRECTION : Plus discret) */
.view-all-privatemsg-threads td.views-field-privatemsg-messages-counter-views-field {
  text-align: center;
  width: 8%;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--pev-terre-clair);
}

/* On enlève le gros background, on met juste le chiffre en gras et coloré */
.view-all-privatemsg-threads td.views-field-privatemsg-messages-counter-views-field {
  background: transparent;
  border: none;
  padding: 0;
}

/* F. Convention Signée (CORRECTION : Ciblage robuste) */
.view-all-privatemsg-threads td.views-field-field-convention-signee {
  text-align: center;
  width: 10%;
  font-size: 1.2rem;
}

/* Si le champ contient un lien (fichier PDF) */
.view-all-privatemsg-threads td.views-field-field-convention-signee a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--pev-vert-clair);
  color: var(--pev-vert-feuille);
  border-radius: 50%;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.2s;
  border: 1px solid var(--pev-vert-feuille);
}

/* Ajout d'une icône PDF via CSS si le lien contient "pdf" dans le href ou le texte */
.view-all-privatemsg-threads td.views-field-field-convention-signee a::before {
  content: '📄'; /* Émoji document */
  font-size: 0.9rem;
}

.view-all-privatemsg-threads td.views-field-field-convention-signee a:hover {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  transform: scale(1.1);
}

/* Si le champ est vide (pas de convention), on affiche un tiret très discret */
.view-all-privatemsg-threads td.views-field-field-convention-signee:empty::before {
  content: '-';
  color: #eee;
  font-size: 1.5rem;
  font-weight: 300;
}

/* 4. Barre d'Action (Bulk Operations) - Plus compacte */
.view-all-privatemsg-threads .vbo-view-form > div:first-child {
  background-color: var(--pev-creme);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.view-all-privatemsg-threads .vbo-view-form select.form-select {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  border-color: var(--pev-gris-leger);
  font-size: 0.9rem;
}

.view-all-privatemsg-threads .vbo-view-form button.btn-primary {
  background-color: var(--pev-terre-clair);
  border-color: var(--pev-terre-clair);
  padding: 0.4rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.view-all-privatemsg-threads .vbo-view-form button.btn-primary:hover:not(:disabled) {
  background-color: var(--pev-terre-fonce);
  border-color: var(--pev-terre-fonce);
}

.view-all-privatemsg-threads .vbo-view-form button.btn-primary:disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 5. Responsive Mobile (Ajusté) */
@media (max-width: 768px) {
  .view-all-privatemsg-threads .table-responsive {
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .view-all-privatemsg-threads table.views-table thead {
    display: none;
  }

  .view-all-privatemsg-threads table.views-table tbody tr {
    display: block;
    background: var(--pev-blanc);
    border: 1px solid var(--pev-gris-leger);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
  }
  
  .view-all-privatemsg-threads table.views-table tbody tr.privatemsg-unread {
    border-left: 4px solid var(--pev-vert-feuille);
  }

  .view-all-privatemsg-threads table.views-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--pev-creme);
    text-align: right;
    font-size: 0.9rem;
  }
  
  .view-all-privatemsg-threads table.views-table tbody td:last-child {
    border-bottom: none;
  }
  
  /* Checkbox en absolu en haut à droite */
  .view-all-privatemsg-threads table.views-table tbody td.views-field-views-bulk-operations-bulk-form {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    padding: 0;
  }

  /* Sujet en premier, pleine largeur */
  .view-all-privatemsg-threads table.views-table tbody td.views-field-subject {
    width: 100%;
    text-align: left;
    border-bottom: 2px solid var(--pev-terre-clair);
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    display: block;
  }
  
  .view-all-privatemsg-threads table.views-table tbody td.views-field-subject a {
    font-size: 1.05rem;
  }

  .view-all-privatemsg-threads .form--inline {
    flex-direction: column;
  }
  
  .view-all-privatemsg-threads .form-item {
    width: 100%;
  }
}

/* ===========================================================
   COMPOSANT : FIL DE DISCUSSION (PRIVATEGMSG THREAD)
   Style : Bulles de conversation modernes, claires et chaleureuses
   Cible : Page de lecture d'un message (/messages/view/[ID])
   =========================================================== */

/* 1. Conteneur Principal du Fil */
.privatemsg-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Espace entre chaque message */
  padding: 1rem 0;
  max-width: 900px; /* Largeur de lecture confortable */
  margin: 0 auto;
}

/* 2. Le Bloc Message Individuel */
.privatemsg-message {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  animation: fadeInMessage 0.4s ease-out;
}

@keyframes fadeInMessage {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Avatar (Gauche) */
.privatemsg-avatar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}

.privatemsg-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Rond parfait */
  object-fit: cover;
  border: 2px solid var(--pev-gris-leger);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: border-color 0.3s;
}

.privatemsg-message:hover .privatemsg-avatar img {
  border-color: var(--pev-vert-feuille);
}

/* 4. Colonne de Contenu (Droite) */
.privatemsg-message-column {
  flex-grow: 1;
  background-color: var(--pev-blanc);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.privatemsg-message:hover .privatemsg-message-column {
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.1);
  transform: translateY(-2px);
  border-color: var(--pev-vert-clair);
}

/* Petite flèche décorative vers l'avatar (Optionnel, style "bulle") */
.privatemsg-message-column::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--pev-gris-leger); /* Couleur de la bordure */
}
.privatemsg-message-column::after {
  content: '';
  position: absolute;
  top: 15px;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid var(--pev-blanc); /* Couleur du fond */
}

/* 5. En-tête du Message (Auteur, Date, Actions) */
.privatemsg-message-information {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--pev-creme);
  font-size: 0.85rem;
}

/* Nom de l'auteur */
.privatemsg-author-name a {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.privatemsg-author-name a:hover {
  color: var(--pev-terre-clair);
}

/* Date */
.privatemsg-message-date {
  color: #888;
  font-style: italic;
  font-size: 0.8rem;
}

/* Marqueurs "New" / "Unread" (Si affichés dans le fil) */
.privatemsg-message-unread-marker,
.privatemsg-message-recipient-unread-marker {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Lien Supprimer (Discret) */
.privatemsg-message-delete {
  margin-left: auto; /* Pousse à droite */
  color: #999;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid #eee;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.privatemsg-message-delete:hover {
  color: #d9534f;
  border-color: #d9534f;
  background-color: #fff5f5;
}

/* 6. Corps du Message */
.privatemsg-message-body {
  color: var(--pev-gris-texte);
  line-height: 1.7;
  font-size: 1rem;
}

.privatemsg-message-body p {
  margin-bottom: 1rem;
}
.privatemsg-message-body p:last-child {
  margin-bottom: 0;
}

/* 7. Pièce Jointe (Convention Signée) - Mise en valeur */
.privatemsg-message-body .field--name-field-convention-signee {
  margin-top: 1.5rem;
  background-color: var(--pev-creme);
  border: 1px dashed var(--pev-terre-clair);
  border-radius: 8px;
  padding: 1rem;
  display: inline-block; /* Prend juste la place nécessaire */
  min-width: 200px;
}

.privatemsg-message-body .field--name-field-convention-signee .field__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--pev-terre-fonce);
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: block;
}

/* Le lien du fichier PDF */
.privatemsg-message-body .field--name-field-convention-signee .file--application-pdf a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pev-vert-feuille);
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  background-color: var(--pev-blanc);
  border: 1px solid var(--pev-vert-clair);
  border-radius: 6px;
  transition: all 0.2s;
}

.privatemsg-message-body .field--name-field-convention-signee .file--application-pdf a:hover {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  border-color: var(--pev-vert-feuille);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(85, 139, 47, 0.2);
}

/* Icône PDF avant le texte (si le thème ne le fait pas) */
.privatemsg-message-body .field--name-field-convention-signee .file--application-pdf a::before {
  content: '📄';
  font-size: 1.2rem;
}

/* 8. Responsive Mobile */
@media (max-width: 768px) {
  .privatemsg-message {
    flex-direction: column;
    gap: 0.5rem;
  }

  .privatemsg-avatar {
    width: 40px;
    height: 40px;
  }

  .privatemsg-message-column {
    width: 100%;
    padding: 1rem;
  }
  
  /* On retire la flèche sur mobile pour gagner de la place */
  .privatemsg-message-column::before,
  .privatemsg-message-column::after {
    display: none;
  }

  .privatemsg-message-information {
    gap: 0.5rem;
  }
  
  .privatemsg-message-delete {
    margin-left: 0;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* ===========================================================
   COMPOSANT : LISTE DES PARTICIPANTS (THREAD MEMBERS)
   Méthode : Masquage visuel de "Between" + Uniformisation des noms
   =========================================================== */

/* 1. Le Conteneur Principal (La "Pilule") */
.privatemsg-thread-members {
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  margin-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pev-gris-texte);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  position: relative; /* Nécessaire pour le masque */
  overflow: hidden;   /* Pour que le masque ne dépasse pas des bords arrondis */
}

/* 2. Le Masque "Anti-Between" */
/* On peint un rectangle beige par-dessus le début du bloc pour cacher le mot "Between" */
.privatemsg-thread-members::before {
    content: 'Participants :';
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 0;
    width: 110px;
    background-color: var(--pev-creme);
    z-index: 1;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

/* 3. Uniformisation de TOUS les noms (Liens ET Texte brut) */
/* On cible tout ce qui n'est pas une virgule pour lui donner le style "Nom" */
.privatemsg-thread-members a,
.privatemsg-thread-members text, /* Pour le texte brut si interprété */
.privatemsg-thread-members {     /* Fallback pour le texte brut direct */
  /* On force la couleur et la graisse pour tout le contenu texte */
  color: var(--pev-terre-clair);
  font-weight: 700;
}

.privatemsg-thread-members a {
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-left: 25px;
}

.privatemsg-thread-members a:hover {
  color: var(--pev-vert-feuille);
  background-color: var(--pev-blanc);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style pour le texte brut (comme "mchamps-ap" sans lien) */
/* Comme on ne peut pas cibler un nœud texte directement, on s'appuie sur l'héritage du parent (point 3)
   et on s'assure que le z-index global permet la lecture. */
   
/* 4. Les Délimiteurs (Virgules) */
.privatemsg-thread-members .delimiter {
  position: relative;
  z-index: 2; /* Au-dessus du masque */
  color: var(--pev-gris-leger);
  font-weight: 300;
  font-size: 1.1rem;
  margin: 0 -2px; /* Resserre un peu les virgules */
}

/* 5. Ajustement Mobile */
@media (max-width: 768px) {
  .privatemsg-thread-members {
    width: 100%;
    justify-content: center;
    border-radius: 12px; /* Moins arrondi sur mobile */
    padding: 0.75rem 1rem;
  }
  
  /* Sur mobile, le mot "Between" peut passer à la ligne, on ajuste le masque ou on le retire */
  /* Si "Between" reste à gauche, on garde le masque. S'il passe au centre, le masque peut gêner.
     Ici, on suppose qu'il reste à gauche grâce au flex-wrap. */
  .privatemsg-thread-members::before {
    width: 65px; /* Un peu plus petit sur mobile */
  }
}

/* ===========================================================
   NETTOYAGE : Suppression du label "Message"
   Cible : Labels redondants dans la zone de saisie
   =========================================================== */

/* 1. Cacher le label spécifique "Message" par son attribut 'for' */
label[for*="-value"].form-required,
label[for*="message"][class*="form-required"] {
  display: none !important;
}

/* 2. Si le label a le texte exact "Message" (Sécurité supplémentaire) */
label.js-form-required:contains("Message") {
  display: none !important;
}
/* Note: :contains() ne marche pas dans tous les navigateurs, 
   donc on privilégie la méthode par attribut 'for' ci-dessus. */

/* 3. Ciblage direct par ID si nécessaire (pour le message 0, 1, 2...) */
#edit-message-0-value-label,
#edit-message-1-value-label,
#edit-message-2-value-label {
  display: none !important;
}

/* 4. Nettoyage global pour tous les labels de champ 'message' dans privatemsg */
.privatemsg-reply-form label[for*="message"],
.form-item-message label.form-required {
  display: none !important;
}

/* ===========================================================
   NETTOYAGE : Suppression radicale de "À propos des formats de texte"
   Cible : Tous les blocs d'aide liés au format de texte
   =========================================================== */

/* 1. Cibler par l'ID partiel (Le plus robuste) */
/* Cela cible tout élément dont l'ID contient "format-help" */
[id*="format-help"] {
  display: none !important;
}

/* 2. Cibler aussi le conteneur parent si nécessaire (le wrapper) */
[id*="format"][id*="-wrapper"] .help-block,
[id*="format"][id*="-wrapper"] .form-text {
  display: none !important;
}

/* 3. Ciblage spécifique pour l'ID exact que tu as montré (Sécurité) */
#edit-message-0-format-help,
#edit-message-0-format-guidelines {
  display: none !important;
}

/* 4. Si le lien est dans un bloc "js-filter-wrapper" */
.js-filter-wrapper a[href="/filter/tips"] {
  display: none !important;
}

/* ===========================================================
   COMPOSANT : CONVENTION D'ÉCHANGE (PAGE & IMPRESSION)
   Charte : Terre & Nature - Optimisé N&B pour impression
   =========================================================== */

/* --- VARIABLES LOCALES (Si pas déjà globales) --- */
.convention-wrapper {
  --pev-terre-fonce: #5D4037;
  --pev-terre-clair: #8D6E63;
  --pev-vert-feuille: #558B2F;
  --pev-vert-clair: #DCEDC8;
  --pev-creme: #F9F7F2;
  --pev-gris-texte: #3B3B3B;
  --pev-alerte: #d9534f;
  --pev-bleu-eau: #0277BD;
}

/* --- CONTENEUR PRINCIPAL --- */
.convention-wrapper {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--pev-gris-texte);
  background-color: #fff;
  max-width: 850px;
  margin: 40px auto;
  padding: 40px;
  border: 1px solid var(--pev-gris-leger);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  position: relative;
}

/* --- EN-TÊTE & INSTRUCTIONS --- */
.convention-header {
  text-align: center;
  border-bottom: 3px solid var(--pev-vert-feuille);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.convention-header h1 {
  color: var(--pev-terre-fonce);
  font-size: 1.8rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.convention-subtitle {
  color: var(--pev-terre-clair);
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.instructions-box {
  background-color: var(--pev-bleu-eau);
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.instructions-box h3 {
  margin-top: 0;
  color: #fff;
  font-size: 1.1rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.instructions-box ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

.instructions-box li {
  margin-bottom: 8px;
}

/* --- TIPO & STRUCTURE --- */
.convention-section-title {
  color: var(--pev-vert-feuille);
  font-size: 1.3rem;
  border-left: 5px solid var(--pev-terre-clair);
  padding-left: 15px;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 700;
}

.convention-subtitle-section {
  color: var(--pev-terre-fonce);
  font-size: 1.1rem;
  margin-top: 20px;
  font-weight: 600;
}

.convention-wrapper p {
  margin-bottom: 15px;
  text-align: justify;
}

.convention-wrapper ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.convention-wrapper li {
  margin-bottom: 8px;
}

/* --- ZONES DE SAISIE --- */
.input-line {
  display: inline-block;
  border-bottom: 1px solid var(--pev-terre-fonce);
  min-width: 150px;
  padding: 0 5px;
  color: var(--pev-terre-fonce);
  font-weight: 600;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
}

.input-line:focus {
  outline: none;
  border-bottom: 2px solid var(--pev-vert-feuille);
  background-color: var(--pev-vert-clair);
}

.input-block {
  background-color: var(--pev-creme);
  padding: 15px;
  border-radius: 8px;
  border: 1px dashed var(--pev-terre-clair);
  margin-bottom: 20px;
}

.input-block label {
  display: block;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 5px;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* --- ZONE DE TEXTE LIBRE --- */
.free-text-area {
  width: 100%;
  min-height: 120px;
  background-color: var(--pev-creme);
  border: 1px solid var(--pev-gris-leger);
  border-radius: 8px;
  padding: 15px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--pev-gris-texte);
  resize: vertical;
  margin-top: 10px;
  box-sizing: border-box;
}

.free-text-area:focus {
  outline: 2px solid var(--pev-vert-feuille);
  background-color: #fff;
}

/* --- ALERTES & INTERDITS --- */
.alert-box {
  background-color: #fff3cd;
  border-left: 5px solid #ffc107;
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
  color: #856404;
}

.alert-box strong {
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #664d03;
}

.interdit-box {
  background-color: #f8d7da;
  border-left: 5px solid var(--pev-alerte);
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
  color: #721c24;
}

.interdit-box strong {
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #58151c;
}

.interdit-box ul {
  margin-bottom: 0;
}

/* --- SIGNATURES --- */
.signatures {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  gap: 40px;
  page-break-inside: avoid;
}

.signature-block {
  flex: 1;
  border-top: 1px solid var(--pev-gris-texte);
  padding-top: 10px;
  text-align: center;
}

.signature-block p {
  text-align: center;
  font-weight: 700;
  color: var(--pev-terre-fonce);
  margin-bottom: 5px;
}

.date-sign {
  text-align: right;
  font-size: 0.9rem;
  margin-top: 10px;
  color: #666;
}

/* --- BOUTON IMPRIMER --- */
.print-btn-container {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px dashed var(--pev-gris-leger);
}

.btn-print {
  background-color: var(--pev-vert-feuille);
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(85, 139, 47, 0.3);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-print:hover {
  background-color: #33691E;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(85, 139, 47, 0.4);
}

.btn-print svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

  textarea {
    resize: vertical;
    width: 100%;
    height: 200px;
}


/* ===========================================================
   CSS D'IMPRESSION SPÉCIFIQUE PEV
   Objectif : Pleine page A4, haut de page, N&B, sans éléments du site
   =========================================================== */

@media print {
  /* 1. RESET GLOBAL POUR L'IMPRESSION */
  @page {
    margin: 1.5cm 1cm; /* Marges physiques minimales pour l'imprimante */
    size: A4;
  }

  body, html {
    width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt; /* Taille lisible pour le papier */
  }

  /* 2. MASQUAGE RADICAL DES ÉLÉMENTS DU SITE (Thème Drupal) */
  /* On cache TOUT ce qui n'est pas la convention */
  header.site-header, 
  footer.site-footer, 
  nav, 
  .navbar, 
  .sidebar, 
  .block-page-title-block, 
  .field--name-title, /* C'est lui qui affichait "Modèle de convention" */
  .contextual, 
  .toolbar, 
  .admin-menu, 
  .skip-link,
  .breadcrumb,
  #main-wrapper > header,
  #page-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }


  /* 3. CONTENEUR DE LA CONVENTION : PLEINE LARGEUR & HAUT DE PAGE */
  .convention-wrapper {
    width: 22cm !important;
    max-width: 22cm !important;
    margin: 0 !important; /* Supprime les marges auto du site */
    padding: 0 !important; /* On gère l'aération interne, pas externe */
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    display: block !important;
    position: relative !important;
    top: -5cm !important; /* Force le collage en haut */
    left: 1.5cm !important;
  }

  /* 4. STYLE DU CONTENU EN N&B */
  * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    /* Force l'impression des couleurs de fond si vraiment nécessaire (ex: alertes), mais en gris */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* On garde les bordures pour structurer le doc */
  .input-block, 
  .free-text-area, 
  .alert-box, 
  .interdit-box, 
  .signature-block {
    border: 1px solid #999 !important; /* Gris foncé pour bien voir */
    background: #fff !important;
  }

  /* Ajustement des zones de texte pour qu'elles ne dépassent pas */
  .input-line {
    border-bottom: 1px solid #000 !important;
    color: #000 !important;
    font-weight: bold;
  }

  .free-text-area {
    border: 1px solid #999 !important;
    resize: none;
    background: #fff !important;
  }

  /* 5. MASQUAGE DES ÉLÉMENTS UI INUTILES */
  .instructions-box, 
  .print-btn-container, 
  .convention-footer-note {
    display: none !important;
  }

  /* 6. GESTION DES SAUTS DE PAGE */
  h2.convention-section-title {
    page-break-after: avoid; /* Évite de couper un titre en bas de page */
    margin-top: 20px;
  }
  
  .signatures, 
  .input-block {
    page-break-inside: avoid; /* Évite de couper un bloc signature ou un bloc nom en deux */
  }

  /* 7. LIENS */
  a {
    text-decoration: none;
    color: #000;
  }
  a[href]:after {
    content: none !important; /* Évite d'afficher l'URL après le lien */
  }
}

/* ===========================================================
   COMPOSANT : LEXIQUE ACCORDÉON (VUE TAXONOMIE)
   Style : Header marron cliquable, contenu collapsible
   Philosophie : "On n'affiche pas tout, on révèle à la demande."
   =========================================================== */

/* 1. CONTENEUR GLOBAL & TABLEAU DE BASE */
/* On reset le style Bootstrap par défaut pour prendre le contrôle total */
.page-view-taxono table.table,
.view-taxono table.table,
.view-id-taxono table.table {
  border: none;
  background: transparent;
  width: 100%;
  margin-bottom: 2rem; /* Espacement entre les différents vocabulaires */
  border-collapse: separate; /* Nécessaire pour les border-radius */
  border-spacing: 0;
}

/* 2. LE CAPTION (TITRE NATIF DRUPAL) */
/* On le cache car le titre est maintenant injecté/géré dans le THEAD par le JS */
.page-view-taxono caption,
.view-taxono caption,
.view-id-taxono caption {
  display: none;
}

/* 3. LE HEADER (THEAD) TRANSFORMÉ EN BOUTON ACCORDÉON */
/* C'est lui qui joue le rôle de <summary> */
.page-view-taxono thead,
.view-taxono thead,
.view-id-taxono thead {
  background-color: var(--pev-terre-fonce) !important; /* Marron foncé PEV */
  color: #fff !important;
  cursor: pointer;
  border-radius: 8px 8px 0 0; /* Arrondi seulement en haut */
  transition: background-color 0.3s ease, transform 0.2s;
  position: relative;
  display: flex; /* Flex pour aligner texte et flèche */
  align-items: center;
  justify-content: space-between;
  user-select: none; /* Empêche la sélection du texte au clic rapide */
}

/* Effet de survol sur le header */
.page-view-taxono thead:hover,
.view-taxono thead:hover,
.view-id-taxono thead:hover {
  background-color: #4a332a !important; /* Légèrement plus foncé */
}

/* Le titre du vocabulaire (injecté par JS dans une span ou directement) */
.lexique-group-title,
.page-view-taxono thead th,
.view-taxono thead th,
.view-id-taxono thead th {
  flex-grow: 1;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none; /* On garde la casse originale (ex: "Labels & Valeurs") */
  letter-spacing: normal;
  color: #fff !important;
  pointer-events: none; /* Le clic traverse pour atteindre le THEAD */
  border: none;
  background: transparent;
}

/* La petite flèche (+) à droite - Création via pseudo-élément */
.page-view-taxono thead::after,
.view-taxono thead::after,
.view-id-taxono thead::after {
  content: '+';
  font-size: 1.8rem;
  font-weight: 300;
  color: #fff;
  margin-right: 1.5rem;
  line-height: 0.8;
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* État "OUVERT" : Rotation de la flèche */
.page-view-taxono thead.open::after,
.view-taxono thead.open::after,
.view-id-taxono thead.open::after {
  transform: rotate(45deg); /* Devient une croix */
  color: var(--pev-vert-clair); /* Petit clin d'œil vert quand ouvert */
}

/* État "OUVERT" : Légère ombre pour détacher le bloc */
.page-view-taxono thead.open,
.view-taxono thead.open,
.view-id-taxono thead.open {
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* 4. LE CORPS DU TABLEAU (TBODY) - LE CONTENU COLLAPSIBLE */
/* Caché par défaut */
.page-view-taxono tbody,
.view-taxono tbody,
.view-id-taxono tbody {
  display: none; /* La magie opère ici */
  background-color: var(--pev-creme); /* Fond crème doux */
  border-radius: 0 0 8px 8px; /* Arrondi seulement en bas */
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.04); /* Ombre portée douce */
}

/* État "OUVERT" : Affichage avec animation */
.page-view-taxono tbody.open,
.view-taxono tbody.open,
.view-id-taxono tbody.open {
  display: table-row-group; /* Rétablit l'affichage tableau */
  animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 5. STYLE DES LIGNES (TR) ET CELLULES (TD) */
.page-view-taxono tbody tr,
.view-taxono tbody tr,
.view-id-taxono tbody tr {
  border-bottom: 1px solid var(--pev-gris-leger);
  transition: background-color 0.2s;
}

.page-view-taxono tbody tr:last-child,
.view-taxono tbody tr:last-child,
.view-id-taxono tbody tr:last-child {
  border-bottom: none;
}

/* Hover sur la ligne : Vert très pâle pour guider l'œil */
.page-view-taxono tbody tr:hover,
.view-taxono tbody tr:hover,
.view-id-taxono tbody tr:hover {
  background-color: var(--pev-vert-clair);
}

.page-view-taxono tbody td,
.view-taxono tbody td,
.view-id-taxono tbody td {
  padding: 1rem 1.5rem;
  vertical-align: top;
  color: var(--pev-gris-texte);
  border: none;
  font-size: 1rem;
  line-height: 1.6;
}

/* Colonne "NOM" (Le terme) : Mise en valeur */
.page-view-taxono tbody td.views-field-name,
.view-taxono tbody td.views-field-name,
.view-id-taxono tbody td.views-field-name {
  font-weight: 700;
  color: var(--pev-terre-fonce);
  width: 30%; /* Largeur fixe pour alignement */
}

.page-view-taxono tbody td.views-field-name a,
.view-taxono tbody td.views-field-name a,
.view-id-taxono tbody td.views-field-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
  border-bottom: 1px dotted transparent;
}

.page-view-taxono tbody td.views-field-name a:hover,
.view-taxono tbody td.views-field-name a:hover,
.view-id-taxono tbody td.views-field-name a:hover {
  color: var(--pev-vert-feuille);
  border-bottom-color: var(--pev-vert-feuille);
  text-decoration: none;
}

/* Colonne "DESCRIPTION" : Lisibilité maximale */
.page-view-taxono tbody td.views-field-description__value,
.view-taxono tbody td.views-field-description__value,
.view-id-taxono tbody td.views-field-description__value {
  color: var(--pev-gris-texte);
}

.page-view-taxono tbody td.views-field-description__value p,
.view-taxono tbody td.views-field-description__value p,
.view-id-taxono tbody td.views-field-description__value p {
  margin-bottom: 0; /* Reset Bootstrap */
}

/* 6. RESPONSIVE MOBILE */
@media (max-width: 768px) {
  /* Empilement des cellules pour une lecture verticale */
  .page-view-taxono tbody td,
  .view-taxono tbody td,
  .view-id-taxono tbody td {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
  }
  
  /* La colonne Nom prend toute la largeur et sert de sous-titre */
  .page-view-taxono tbody td.views-field-name,
  .view-taxono tbody td.views-field-name,
  .view-id-taxono tbody td.views-field-name {
    width: 100%;
    border-bottom: 1px solid var(--pev-gris-leger);
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    font-size: 1.05rem;
    color: var(--pev-terre-clair); /* Couleur terre claire pour distinguer */
  }
  
  /* Ajustement du header mobile */
  .page-view-taxono thead th,
  .view-taxono thead th,
  .view-id-taxono thead th {
    font-size: 0.95rem;
    padding: 0.8rem 1rem;
  }
  
  .page-view-taxono thead::after,
  .view-taxono thead::after,
  .view-id-taxono thead::after {
    margin-right: 1rem;
    font-size: 1.5rem;
  }
}

/* ===========================================================
   FOOTER GLOBAL : STRUCTURE & IMAGE DE FOND
   Cible : Tous les menus du footer (.site-footer)
   =========================================================== */

/* --- 1. IMAGE DE FOND SUR TOUT LE FOOTER --- */
.site-footer {
  position: relative;
  background-color: var(--pev-terre-fonce); /* Couleur de secours (#5D4037) */
  
  /* REMPLACE L'URL CI-DESSOUS PAR TON IMAGE */
  background-image: url('https://paysans-en-vacances.fr/public/background-footer.png');
  
  background-size: cover;       /* L'image couvre toute la zone */
  background-position: center;  /* Centrée horizontalement et verticalement */
  background-repeat: no-repeat;
  background-attachment: scroll;
  
  /* Filtre assombrissant pour garantir la lisibilité du texte blanc */
  /* rgba(93, 64, 55, 0.9) = 90% de marron par-dessus l'image */
  box-shadow: inset 0 0 0 1000px rgba(93, 64, 55, 0.9);
  
  color: var(--pev-blanc);
  padding: 3rem 0 2rem 0; /* Espacement haut/bas */
  margin-top: 3rem;
}

/* --- 2. MISE EN PAGE DES COLONNES (RÉGIONS) --- */
/* On s'assure que les régions (first, second, third) s'affichent bien côte à côte sur Desktop */
.site-footer .region-footer-first,
.site-footer .region-footer-second,
.site-footer .region-footer-third {
  margin-bottom: 2rem;
}

/* Sur Desktop, on utilise le grid/flex de Bootstrap pour les mettre côte à côte */
@media (min-width: 768px) {
  .site-footer .row {
    display: flex;
    flex-wrap: wrap;
  }
  .site-footer .region-footer-first,
  .site-footer .region-footer-second,
  .site-footer .region-footer-third {
    flex: 1 1 30%; /* Chaque colonne prend ~30% */
    margin-bottom: 0;
    padding: 0 15px;
  }
}

/* --- 3. TRANSFORMATION DES MENUS EN COLONNE VERTICALE --- */
/* On cible TOUTES les listes ul dans le footer */
.site-footer ul.nav,
.site-footer ul.menu {
  display: flex !important;
  flex-direction: column !important; /* FORCE LA VERTICALE */
  gap: 0.8rem; /* Espacement entre chaque lien */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Les items de liste prennent toute la largeur */
.site-footer ul.nav li,
.site-footer ul.menu li {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

/* --- 4. STYLE DES LIENS --- */
.site-footer ul.nav li a,
.site-footer ul.menu li a {
  display: inline-block;
  color: var(--pev-blanc) !important; /* Texte blanc */
  text-decoration: none;
  padding: 0.3rem 0; /* Espacement vertical léger */
  font-size: 1rem;
  transition: all 0.2s ease;
  border-left: 2px solid transparent; /* Pour l'effet de survol */
  padding-left: 0.5rem;
}

.site-footer ul.nav li.active a,
.site-footer ul.menu li.active a {
  color: var(--pev-vert-feuille) !important;
}

/* Effet au survol : Bordure verte et déplacement */
.site-footer ul.nav li a:hover,
.site-footer ul.menu li a:hover {
  color: var(--pev-vert-clair) !important; /* Vert clair au survol */
  border-left-color: var(--pev-vert-feuille);
  padding-left: 1rem; /* Glissement vers la droite */
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.05); /* Très léger fond blanc */
  border-radius: 4px;
}

/* --- 5. TITRES DES COLONNES (H2) --- */
.site-footer h2 {
  color: var(--pev-blanc) !important;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--pev-vert-feuille); /* Ligne verte sous le titre */
  display: inline-block;
}

/* --- 6. BAS DE FOOTER (Copyright & ECDC) --- */
.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__bottom a {
  color: var(--pev-vert-clair) !important;
  text-decoration: none;
  font-weight: 600;
}

.site-footer__bottom a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* --- 7. RESPONSIVE MOBILE --- */
@media (max-width: 767px) {
  .site-footer {
    padding: 2rem 0;
    background-size: contain; /* Image moins agressive sur mobile */
  }
  
  .site-footer h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .site-footer ul.nav li a,
  .site-footer ul.menu li a {
    font-size: 0.95rem;
  }
}