/* ============================================================
   RÉHABITER STRASBOURG — PAGE ACCUEIL
   Fichier de travail local — édité dans VS Code, à coller dans
   PageCss après chaque session de travail validée.
   Dernière session : système de règles typo/espacement unifié
   (clamp() pour un responsive fluide, sans dupliquer les tailles
   dans les media queries)
   ============================================================ */

/* ======================================================
   RÈGLES DE BASE — à réutiliser pour TOUS les prochains blocs
   Ne pas recréer de nouvelles tailles ailleurs : piocher ici.
   ====================================================== */
:root {
  /* --- Couleurs --- */
  --color-orange: #FE8C00;
  --color-teal: #1C7B7B;
  --color-lightblue: #9AC0C7;
  --color-text: #413E3C;
  --color-text-clair: #6B655F;
  --color-cream: #F6F1E9;

  /* --- Typographie : chaque taille s'adapte en continu (mobile → desktop) --- */
  --fs-eyebrow: 0.95rem;                                 /* petit label en majuscules au-dessus des titres */
  --fs-hero-title: clamp(1.8rem, 5.5vw, 4rem);           /* très grand titre du bandeau haut */
  --fs-section-title: clamp(1.6rem, 3.5vw, 2.6rem);      /* titre de section (ex : "Trois domaines") */
  --fs-card-title-lg: clamp(1.4rem, 3vw, 2.125rem);      /* titre de carte large (grille à 2 colonnes) */
  --fs-card-title-sm: clamp(1.2rem, 2.2vw, 1.625rem);    /* titre de carte étroite (grille à 3 colonnes) */
  --fs-body: clamp(1rem, 1.4vw, 1.125rem);               /* TOUT texte courant (intro, paragraphes de carte) : 16px → 18px */
  --fs-button: 0.95rem;                                  /* texte de TOUS les boutons du site */

  /* --- Espacements --- */
  --space-block: 120px;         /* marge basse identique entre CHAQUE grand bloc de la page */
  --section-padding-x: clamp(24px, 7vw, 160px); /* marge horizontale : grandit avec l'écran, plus d'air sur grand écran */
  --section-padding-x-mobile: 20px; /* même marge horizontale, version mobile */

  /* --- Composants --- */
  --card-radius: 32px;         /* arrondi identique sur toutes les cartes */
  --btn-radius: 999px;         /* arrondi "pilule" identique sur tous les boutons */
  --btn-padding: 13px 26px;    /* padding identique sur tous les boutons */
}

/* --- Logo Réhabiter dans le menu --- */
.navbar-brand {
  background-image: url('http://www.test.rehabiter.eu/files/logo-blanc.png') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 280px !important;
  height: 64px !important;
  padding: 0 !important;
  overflow: visible !important;
  text-indent: -9999px !important;
}

/* --- Barre de menu en orange --- */
#yw-topnav {
  background-color: var(--color-orange) !important;
  border: none !important;
  min-height: 110px;
}

#yw-topnav .container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
}

.navbar-header {
  display: flex;
  align-items: center;
}

#yw-topnav .include.topnavpage {
  flex: 1;
  display: flex;
  justify-content: center;
}

#yw-topnav .navbar-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  margin: 0 !important;
  gap: 8px;
}

#yw-topnav .navbar-nav > li {
  display: flex;
  align-items: center;
}

#yw-topnav .navbar-nav > li > a:not(.btn) {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

#yw-topnav .navbar-nav > li > a:not(.btn):hover,
#yw-topnav .navbar-nav > li > a:not(.btn):focus {
  color: #ffffff !important;
  background: rgba(255,255,255,0.15) !important;
}

/* --- Page active : pastille blanche, texte orange --- */
#yw-topnav .navbar-nav > li.active > a:not(.btn),
#yw-topnav .navbar-nav > li > a.active:not(.btn) {
  background: #ffffff !important;
  color: var(--color-orange) !important;
}

#yw-topnav .dropdown-menu {
  border: none !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 8px 24px rgba(65,62,60,0.18) !important;
  padding: 12px !important;
  margin-top: 0 !important;
}

#yw-topnav .dropdown-menu > li > a {
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
}

#yw-topnav .dropdown-menu > li > a:hover {
  background: var(--color-cream) !important;
  color: var(--color-orange) !important;
}

/* --- Réseaux sociaux, poussés à droite dans le conteneur flex du menu --- */
.yw-topnav-fast-access {
  margin-left: auto !important;
  float: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

#yw-topnav .yw-topnav-fast-access .btn-icon,
#yw-topnav .yw-topnav-fast-access .btn-default,
#yw-topnav .yw-topnav-fast-access .btn-icon i,
#yw-topnav .yw-topnav-fast-access .btn-default i {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  font-size: 1.3rem !important;
  padding: 6px !important;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
#yw-topnav .yw-topnav-fast-access .btn-icon:hover,
#yw-topnav .yw-topnav-fast-access .btn-default:hover,
#yw-topnav .yw-topnav-fast-access .btn-icon:active,
#yw-topnav .yw-topnav-fast-access .btn-default:active,
#yw-topnav .yw-topnav-fast-access .btn-icon:focus,
#yw-topnav .yw-topnav-fast-access .btn-default:focus,
#yw-topnav .yw-topnav-fast-access .btn-icon:visited,
#yw-topnav .yw-topnav-fast-access .btn-default:visited,
#yw-topnav .yw-topnav-fast-access .btn-icon:hover i,
#yw-topnav .yw-topnav-fast-access .btn-icon:active i,
#yw-topnav .yw-topnav-fast-access .btn-icon:focus i,
#yw-topnav .yw-topnav-fast-access .btn-icon:visited i {
  opacity: 1;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(65,62,60,0.1) !important;
  color: var(--color-text) !important;
}

/* --- Police (Source Sans 3, tout le site) --- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&display=swap');

body, p, a, li {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--color-text);
}
h1, h2, h3, h4, h5 {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
}

/* --- Correctif technique : réserve toujours la place de la barre
   de scroll verticale, avec ou sans elle. Sans ça, "100vw" (utilisé
   partout pour les blocs pleine largeur) compte la largeur de la
   barre de scroll en plus de l'écran visible sur les pages assez
   hautes pour en avoir une, ce qui décale tous ces blocs vers la
   gauche (premier élément coupé). --- */
html {
  scrollbar-gutter: stable;
}

/* --- Correctif technique : empêche le scroll horizontal --- */
/* Nécessaire à cause des blocs en pleine largeur (100vw) --- */
html, body {
  overflow-x: hidden;
}

/* --- Masque tous les <br> parasites insérés par YesWiki entre les grands blocs --- */
/* L'espacement entre blocs est entièrement géré par var(--space-block), pas par ces <br> */
.page > br {
  display: none !important;
}


/* ======================================================
   BLOC 1 : BANDEAU HAUT (HERO)  —  ✅ validé
   ====================================================== */

.hero-rehabiter {
  position: relative;
  text-align: center;
  padding: 120px var(--section-padding-x) 140px;
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 0.65)),
    url('/files/rehabiter.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -32px;
  margin-bottom: var(--space-block);

  /* --- Hauteur adaptée à l'écran (ligne de flottaison), comme
     le Hero photo de Notre Histoire --- */
  min-height: 90vh;
  min-height: 90svh; /* évite les sauts liés à la barre d'adresse mobile */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.hero-rehabiter .inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-rehabiter,
.hero-rehabiter p,
.hero-rehabiter span,
.hero-rehabiter div:not(.btn-rehabiter):not(.btn-outline-rehabiter) {
  color: #ffffff !important;
}

.eyebrow-rehabiter {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.hero-rehabiter h1,
.hero-rehabiter h2 {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: var(--fs-hero-title) !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  line-height: 1.15 !important;
}

.hero-subtitle {
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  color: #ffffff !important;
  margin-bottom: 32px !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

.hero-actions { margin-bottom: 20px; }

.btn-rehabiter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: var(--color-orange) !important;
  color: #ffffff !important;
  border: none !important;
  text-decoration: none !important;
  margin: 0 6px 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-rehabiter:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(254,140,0,0.35); }

.btn-outline-rehabiter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  text-decoration: none !important;
  margin: 0 6px 12px;
  backdrop-filter: blur(2px);
}
.btn-outline-rehabiter:hover { background: #ffffff !important; color: var(--color-text) !important; }

.hero-newsletter-link {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}


/* ======================================================
   BLOC 2 : VOUS ÊTES UN PARTICULIER / ORGANISATION  —  ✅ terminé
   ====================================================== */

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-block);
  padding: 0 var(--section-padding-x);
}

.profile-grid > br {
  display: none !important;
}

.profile-card {
  background: #ffffff;
  border-radius: var(--card-radius);
  padding: 44px 44px 40px;
  box-shadow: 0 4px 24px rgba(65,62,60,0.06);
}

.profile-card > br {
  display: none !important;
}

.profile-card-icone {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 28px;
}

.profile-card h3,
.profile-card h4,
.profile-card h5 {
  font-size: var(--fs-card-title-lg) !important;
  margin-bottom: 18px !important;
  color: var(--color-text) !important;
}

.profile-card-text {
  color: var(--color-text-clair) !important;
  margin-bottom: 32px !important;
  font-size: var(--fs-body) !important;
  line-height: 1.6;
}

/* --- Carte "Particulier" en teinte orange --- */
.profile-card.particulier { background: #FFF1E0 !important; }
.profile-card.particulier .profile-card-icone { background: var(--color-orange) !important; }

/* --- Carte "Organisation" en teinte teal --- */
.profile-card.organisation { background: #E7F1F1 !important; }
.profile-card.organisation .profile-card-icone { background: var(--color-teal) !important; }

/* --- Bouton contour orange --- */
.btn-outline-rehabiter-clair {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: transparent !important;
  color: var(--color-orange) !important;
  border: 1.5px solid var(--color-orange) !important;
  text-decoration: none !important;
}
.btn-outline-rehabiter-clair:hover {
  background: var(--color-orange) !important;
  color: #ffffff !important;
}


/* ======================================================
   BLOC 3 : TROIS DOMAINES D'INTERVENTION  —  ✅ terminé
   ====================================================== */

/* --- Section pleine largeur d'écran (fond edge-to-edge, contenu inset) --- */
.domaines-section {
  background: var(--color-orange);
  padding: 80px var(--section-padding-x);
  text-align: left;
  margin-bottom: var(--space-block);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- Conteneur commun : texte ET grille partagent la même largeur/marge --- */
.domaines-inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* --- Masque les <br> parasites insérés par YesWiki entre l'eyebrow et le titre --- */
.domaines-section > br {
  display: none;
}

/* --- Eyebrow blanc sur fond orange --- */
.eyebrow-dark {
  color: #ffffff !important;
  text-shadow: none !important;
}

.domaines-section h2,
.domaines-section h3,
.domaines-section h4,
.domaines-section h5,
.domaines-section h6 {
  font-size: var(--fs-section-title) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
}

.domaines-intro {
  max-width: 640px;
  margin: 0 0 28px !important;
  color: #ffffff !important;
  font-size: var(--fs-body) !important;
  line-height: 1.6;
}

/* --- Grille à 3 colonnes (même largeur que le texte, pas de centrage séparé) --- */
.domaines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
}

.domaines-grid br {
  display: none;
}

/* --- Carte individuelle --- */
.domaine-card {
  background: #ffffff;
  border-radius: var(--card-radius);
  padding: 40px 32px;
  box-shadow: 0 4px 24px rgba(65,62,60,0.06);
  text-align: left;
}

.domaine-card > br {
  display: none !important;
}

.domaine-card-icone {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
}

.domaine-card h3,
.domaine-card h4,
.domaine-card h5 {
  font-size: var(--fs-card-title-sm) !important;
  margin-bottom: 14px !important;
  color: var(--color-text) !important;
}

.domaine-card-text {
  color: var(--color-text-clair) !important;
  margin-bottom: 24px !important;
  font-size: var(--fs-body) !important;
  line-height: 1.6;
}

/* --- Boutons des cartes : une couleur par carte, même taille/padding partout --- */
.btn-outline-orange {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: transparent !important;
  color: var(--color-orange) !important;
  border: 1.5px solid var(--color-orange) !important;
  text-decoration: none !important;
}
.btn-outline-orange:hover {
  background: var(--color-orange) !important;
  color: #ffffff !important;
}

.btn-outline-teal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: transparent !important;
  color: var(--color-teal) !important;
  border: 1.5px solid var(--color-teal) !important;
  text-decoration: none !important;
}
.btn-outline-teal:hover {
  background: var(--color-teal) !important;
  color: #ffffff !important;
}

.btn-outline-lightblue {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-lightblue) !important;
  text-decoration: none !important;
}
.btn-outline-lightblue:hover {
  background: var(--color-lightblue) !important;
  color: var(--color-text) !important;
}

.btn-outline-charcoal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-padding) !important; border-radius: var(--btn-radius) !important;
  font-weight: 700 !important; font-size: var(--fs-button) !important;
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-text) !important;
  text-decoration: none !important;
}
.btn-outline-charcoal:hover {
  background: var(--color-text) !important;
  color: #ffffff !important;
}


/* ======================================================
   BLOC 4 : PHOTO PLEINE LARGEUR
   ====================================================== */

.photo-pleine-largeur {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--space-block));
  margin-bottom: var(--space-block);
  padding: 0 !important;
  overflow: hidden;
}

.photo-pleine-largeur > br {
  display: none !important;
}

.photo-pleine-largeur-img {
  display: block;
  width: 100%;
  height: auto;
}


/* ======================================================
   BLOC 5 : POURQUOI RÉHABITER + CITATION
   ====================================================== */

.pourquoi-section {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-block);
  padding: 0 var(--section-padding-x) !important;
}

.pourquoi-section > br,
.pourquoi-text > br,
.citation-card > br {
  display: none !important;
}

/* --- Eyebrow orange sur fond blanc --- */
.eyebrow-orange {
  color: var(--color-orange) !important;
  text-shadow: none !important;
}

.pourquoi-text h2,
.pourquoi-text h3,
.pourquoi-text h4,
.pourquoi-text h5,
.pourquoi-text h6 {
  font-size: var(--fs-section-title) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: var(--color-text) !important;
}

.pourquoi-paragraphe {
  font-size: var(--fs-body);
  color: var(--color-text-clair);
  line-height: 1.6;
  margin-bottom: 20px;
}
.pourquoi-paragraphe:last-of-type {
  margin-bottom: 28px;
}

/* --- Carte citation, même famille de teinte que la carte "Organisation" du Bloc 2 --- */
.citation-card {
  background: #E7F1F1;
  border-radius: var(--card-radius);
  padding: 40px 32px;
}

.citation-guillemet {
  display: block;
  font-family: Georgia, serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-teal);
  margin-bottom: 12px;
}

.citation-texte {
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.6;
}


/* ======================================================
   CITATION PLEINE LARGEUR (photo de fond) — entre Bloc 5 et Bloc 6
   ====================================================== */

.citation-fond-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-block);
  padding: 0 !important;
  overflow: hidden;
}

.citation-fond-section > br {
  display: none !important;
}

.citation-fond-img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Texte superposé par-dessus l'image entière, sans voile sur la photo --- */
.citation-fond-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--section-padding-x);
}

.citation-fond-texte {
  position: relative;
  max-width: 1000px;
  margin: 0 !important;
  padding-left: 28px;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2.125rem) !important;
  line-height: 1.5;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 30px rgba(0,0,0,0.6);
}

.citation-fond-texte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 999px;
  background: #ffffff;
}


/* ======================================================
   BLOC 6 : CE QUI NOUS REND DIFFÉRENTS
   ====================================================== */

.differents-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-block);
  padding: 0 var(--section-padding-x) !important;
  text-align: left;
}

.differents-section > br,
.differents-grid > br,
.differents-item > br,
.differents-cta > br {
  display: none !important;
}

.differents-section h2,
.differents-section h3,
.differents-section h4,
.differents-section h5,
.differents-section h6 {
  font-size: var(--fs-section-title) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: var(--color-text) !important;
}

.differents-intro {
  max-width: 640px;
  font-size: var(--fs-body);
  color: var(--color-text-clair);
  line-height: 1.6;
  margin-bottom: 48px;
}

.differents-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.differents-item {
  text-align: center;
  background: #E7F1F1;
  border-radius: 24px;
  padding: 32px 24px 40px;
}

.differents-icone {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
}

.differents-item h3,
.differents-item h4,
.differents-item h5 {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem) !important;
  white-space: nowrap;
  margin-bottom: 8px !important;
  color: var(--color-text) !important;
}

.differents-text {
  font-size: var(--fs-body);
  color: var(--color-text-clair);
  line-height: 1.5;
}

.differents-cta {
  text-align: center;
}


/* ======================================================
   PAGE AGENDA
   ====================================================== */

/* --- Titre et intro de la page --- */
.page h1 {
  font-size: var(--fs-hero-title) !important;
  margin-bottom: 16px !important;
}

/* --- Grille des cartes événements (BazaR template "agenda") --- */
.agenda-container {
  display: flex;
  flex-wrap: wrap;
  gap: 28px !important;
  margin-top: 32px;
}

.agenda-entry-container {
  flex: 1 1 260px;
  max-width: 300px;
}

figure.agenda-entry {
  border-radius: var(--card-radius) !important;
  box-shadow: 0 4px 24px rgba(65,62,60,0.12) !important;
  transition: transform 0.15s ease;
  min-height: 220px;
}

figure.agenda-entry:hover {
  transform: translateY(-4px);
}

/* --- Neutralise les fonds internes du template pour laisser passer la couleur de la carte --- */
figure.agenda-entry .image,
figure.agenda-entry figcaption,
figure.agenda-entry > div {
  background: transparent !important;
}

figure.agenda-entry figcaption {
  padding: 16px !important;
  font-weight: 700 !important;
}

/* --- Couleur par série, à partir de la donnée réelle de la fiche --- */
figure.agenda-entry[data-bf_categorie="rouspette"] { background-color: var(--color-orange) !important; }
figure.agenda-entry[data-bf_categorie="ressourcerie"] { background-color: var(--color-teal) !important; }
figure.agenda-entry[data-bf_categorie="atelier_habiter_en_cooperative"] { background-color: var(--color-lightblue) !important; }
figure.agenda-entry[data-bf_categorie="cafe_echange"] { background-color: #6D84A7 !important; }
figure.agenda-entry[data-bf_categorie="evenement_ponctuel"] { background-color: var(--color-text) !important; }
figure.agenda-entry:not([data-bf_categorie]) { background-color: var(--color-text-clair) !important; }


/* ======================================================
   BLOC 7 : AGENDA — APERÇU SUR L'ACCUEIL
   ====================================================== */

.agenda-preview-section {
  background: var(--color-teal);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-block);
  padding: 80px var(--section-padding-x) !important;
  text-align: left;
}

.agenda-preview-section > br {
  display: none !important;
}

/* --- Eyebrow "Agenda" en #413E3C --- */
.eyebrow-teal {
  color: var(--color-text) !important;
  text-shadow: none !important;
}

.agenda-preview-section > h2,
.agenda-preview-section > h3,
.agenda-preview-section > h4,
.agenda-preview-section > h5,
.agenda-preview-section > h6 {
  font-size: var(--fs-section-title) !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  color: #ffffff !important;
}

.agenda-preview-cta {
  text-align: center;
  margin-top: 32px;
}

/* --- Fond teal de la liste (comme avant), texte blanc à l'intérieur --- */
.agenda-preview-section .bazar-list {
  padding: 8px 0;
}

/* --- Chaque ligne d'événement --- */
.agenda-preview-section .panel.bazar-entry {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.25) !important;
}
.agenda-preview-section .panel.bazar-entry:last-child {
  border-bottom: none !important;
}

.agenda-preview-section .panel-heading {
  background: transparent !important;
  border: none !important;
  padding: 24px 0 !important;
}

.agenda-preview-section .panel-heading::after,
.agenda-preview-section .panel-heading .caret,
.agenda-preview-section .panel-heading [class*="chevron"],
.agenda-preview-section .panel-heading [class*="caret"] {
  display: none !important;
}

/* --- Titre de l'événement : plus petit --- */
.agenda-preview-section .title-area .field-default {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* --- Date : badge visuel sur une seule ligne --- */
.agenda-preview-section .floating-area {
  display: inline-block;
  color: var(--color-teal) !important;
  background: #ffffff;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
}

/* --- Description --- */
.agenda-preview-section .subtitle-area {
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--fs-body) !important;
  margin-top: 8px !important;
}


/* ======================================================
   BLOC 8 : RESSOURCES / PUBLICATIONS
   ====================================================== */

.ressources-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-block);
  padding: 0 var(--section-padding-x) !important;
  text-align: left;
}

.ressources-section > br {
  display: none !important;
}

.ressources-section h2,
.ressources-section h3,
.ressources-section h4,
.ressources-section h5,
.ressources-section h6 {
  font-size: var(--fs-section-title) !important;
  margin-top: 0 !important;
  margin-bottom: 40px !important;
  color: var(--color-text) !important;
}

/* --- Grille de 3 colonnes (même composant BazaR que l'Agenda, réorganisé) --- */
.ressources-section .bazar-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.ressources-section .panel.bazar-entry {
  background: #ffffff !important;
  border: none !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 4px 24px rgba(65,62,60,0.08) !important;
  padding: 8px;
}

.ressources-section .panel-heading {
  background: transparent !important;
  border: none !important;
  padding: 24px !important;
}

.ressources-section .panel-heading::after,
.ressources-section .panel-heading .caret,
.ressources-section .panel-heading [class*="chevron"],
.ressources-section .panel-heading [class*="caret"] {
  display: none !important;
}

/* --- Tag "Type de ressource" --- */
.ressources-section .floating-area {
  display: block;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-orange) !important;
  margin-bottom: 12px !important;
}

/* --- Titre de la ressource --- */
.ressources-section .title-area .field-default {
  font-size: var(--fs-card-title-sm) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

/* --- Description --- */
.ressources-section .subtitle-area {
  font-size: var(--fs-body) !important;
  color: var(--color-text-clair) !important;
  margin-top: 8px !important;
}

.ressources-cta {
  text-align: center;
}


/* ======================================================
   BLOC 9 : CTA FINAL — "ENSEMBLE, RÉHABITONS !"
   ====================================================== */

.cta-final-section {
  background: var(--color-orange);
  text-align: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 100px var(--section-padding-x) !important;
}

.cta-final-section > br {
  display: none !important;
}

/* --- Lien newsletter, placeholder en attendant l'embed Mailchimp --- */
.cta-newsletter-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: var(--fs-button) !important;
  text-decoration: underline !important;
  margin-bottom: 32px;
  padding: 0 !important;
}

.cta-final-section h2,
.cta-final-section h3,
.cta-final-section h4,
.cta-final-section h5,
.cta-final-section h6 {
  font-size: var(--fs-hero-title) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
}

.cta-final-text {
  max-width: 640px;
  margin: 0 auto 40px !important;
  color: #ffffff !important;
  font-size: var(--fs-body) !important;
  line-height: 1.6;
}

.cta-final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.cta-final-social {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.cta-final-social a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.5);
  padding-bottom: 2px;
}
.cta-final-social a:hover {
  border-bottom-color: #ffffff;
}


/* ======================================================
   RESPONSIVE — TABLETTE & MOBILE (tout le site)
   Grâce aux clamp() ci-dessus, les TAILLES DE TEXTE n'ont plus
   besoin d'être redéfinies ici : elles s'adaptent déjà toutes
   seules. Cette section ne gère que ce que clamp() ne peut pas
   faire : nombre de colonnes, padding des blocs, comportement
   des boutons en pleine largeur.
   ====================================================== */

@media (max-width: 768px) {

  /* --- Menu mobile : le JS du thème gère l'ouverture/fermeture, on ne touche
     plus jamais au display de l'élément qu'il bascule (.links-container) --- */
  .navbar-brand {
    width: 170px !important;
    height: 40px !important;
  }

  #yw-topnav .btn-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 1.3rem !important;
  }

  #yw-topnav {
    min-height: auto;
  }

  .navbar-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  #yw-topnav .yw-topnav-fast-access {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: none !important;
    margin: 6px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.3) !important;
    justify-content: center !important;
    gap: 20px !important;
  }

  #yw-topnav .yw-topnav-fast-access .btn-icon,
  #yw-topnav .yw-topnav-fast-access .btn-default,
  #yw-topnav .yw-topnav-fast-access .btn-icon:visited,
  #yw-topnav .yw-topnav-fast-access .btn-default:visited,
  #yw-topnav .yw-topnav-fast-access .btn-icon:hover,
  #yw-topnav .yw-topnav-fast-access .btn-default:hover,
  #yw-topnav .yw-topnav-fast-access .btn-icon:active,
  #yw-topnav .yw-topnav-fast-access .btn-default:active,
  #yw-topnav .yw-topnav-fast-access .btn-icon:focus,
  #yw-topnav .yw-topnav-fast-access .btn-default:focus {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 1rem !important;
    background: transparent !important;
    color: var(--color-text) !important;
  }

  /* IMPORTANT : pas de "display" ici — c'est cette propriété que le JS du
     thème bascule pour ouvrir/fermer le menu. Si on la force, le menu reste
     coincé ouvert (c'est exactement le bug qu'on avait). On ne pilote que
     l'apparence : position en flux normal, largeur, couleurs, espacement. */
  #yw-topnav .include.topnavpage,
  #yw-topnav .links-container {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    padding: 8px var(--section-padding-x-mobile) 16px !important;
  }

  #yw-topnav .navbar-nav {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #yw-topnav .navbar-nav > li,
  #yw-topnav .navbar-nav > li.active,
  #yw-topnav .navbar-nav > li.dropdown,
  #yw-topnav .navbar-nav > li.active-list {
    display: block !important;
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
    margin-bottom: 4px !important;
  }

  #yw-topnav#yw-topnav .navbar-nav > li,
  #yw-topnav#yw-topnav .navbar-nav > li.active,
  #yw-topnav#yw-topnav .navbar-nav > li.dropdown,
  #yw-topnav#yw-topnav .navbar-nav > li.active-list,
  #yw-topnav#yw-topnav .navbar-nav > li > a,
  #yw-topnav#yw-topnav .navbar-nav > li > a:not(.btn) {
    border: none !important;
    box-shadow: none !important;
  }

  #yw-topnav .navbar-nav > li > a:not(.btn) {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 32px;
    text-align: left;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 9px 2px !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
  }

  #yw-topnav .links-container .nav a:not(.btn),
  #yw-topnav .links-container .navbar-nav > li > a:not(.btn) {
    background-color: transparent !important;
    color: #ffffff !important;
  }

  /* --- Sous-menus : indentation, sans trait vertical --- */
  #yw-topnav#yw-topnav .dropdown-menu {
    border: none !important;
  }

  #yw-topnav .dropdown-menu {
    position: static !important;
    display: block !important;
    float: none !important;
    width: calc(100% - 16px) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 4px 16px !important;
    margin: 0 0 0 4px !important;
  }

  #yw-topnav#yw-topnav .dropdown-menu > li > a {
    border: none !important;
  }

  #yw-topnav .dropdown-menu > li > a {
    display: block !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    padding: 4px 0 4px 16px !important;
    border-radius: 0 !important;
  }

  #yw-topnav .dropdown-menu > li > a:hover {
    background: transparent !important;
    color: #ffffff !important;
  }


  .hero-rehabiter {
    padding: 70px var(--section-padding-x-mobile) 80px;
    margin-top: 0;
    background-position: center 25%;
    min-height: 70vh;
    min-height: 70svh;
  }

  .hero-subtitle {
    margin-bottom: 24px !important;
  }

  .btn-rehabiter,
  .btn-outline-rehabiter {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* --- Cartes profils : empilées en 1 colonne (fix : grid, pas flex) --- */
  .profile-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--section-padding-x-mobile);
  }

  .profile-card {
    padding: 28px;
  }

  /* --- Domaines : 3 colonnes → 1 colonne --- */
  .domaines-section {
    padding: 56px var(--section-padding-x-mobile);
  }

  .domaines-grid {
    grid-template-columns: 1fr;
  }

  .domaine-card {
    padding: 28px;
  }

  /* --- Pourquoi Réhabiter : 2 colonnes → 1 colonne --- */
  .pourquoi-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 var(--section-padding-x-mobile) !important;
  }

  .citation-card {
    padding: 28px;
  }

  /* --- Citation pleine largeur : même marge mobile que les autres blocs --- */
  .citation-fond-overlay {
    padding: 0 var(--section-padding-x-mobile);
  }

  /* --- Ce qui nous rend différents : 5 colonnes → 2 colonnes --- */
  .differents-section {
    padding: 0 var(--section-padding-x-mobile) !important;
  }

  .differents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* --- Agenda : la liste reste en 1 colonne (déjà le cas) --- */
  .agenda-preview-section {
    padding: 56px var(--section-padding-x-mobile) !important;
  }

  /* --- Ressources : 3 colonnes → 1 colonne --- */
  .ressources-section {
    padding: 0 var(--section-padding-x-mobile) !important;
  }

  .ressources-section .bazar-list {
    grid-template-columns: 1fr;
  }

  /* --- CTA final : padding réduit, boutons empilés proprement --- */
  .cta-final-section {
    padding: 56px var(--section-padding-x-mobile) !important;
  }

  .cta-final-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-final-actions .btn-rehabiter,
  .cta-final-actions .btn-outline-rehabiter {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-rehabiter {
    padding: 56px 16px 64px;
  }

  .differents-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   FIN RESPONSIVE
   ====================================================== */