/* ============================================================
   PARTICULIERS — Réhabiter Strasbourg
   Même logique que notreHistoire.css : ce fichier ne contient
   QUE ce qui est spécifique à cette page. Les <br> parasites et
   le responsive de base viennent de composants.css.
   ============================================================ */

/* ======================================================
   CONTENEUR GÉNÉRIQUE — largeur maximale, centré
   Même principe que .domaines-inner dans accueil.css (technique
   déjà éprouvée sur l'Accueil). Évite que le contenu s'étire à
   l'infini sur très grand écran (photo floue, cartes trop
   écartées, stats disloquées), tout en gardant tout le bloc
   cohérent en interne (texte, photo, séparateur, stats alignés
   ensemble). Sur très grand écran, une marge apparaît de chaque
   côté — c'est volontaire, pour ne pas que le contenu devienne
   démesuré.
   ====================================================== */
.particuliers-inner {
  max-width: 1200px;
  margin: 0 auto;
}


/* ======================================================
   BLOC 1 : HERO — ✅ à valider
   Même technique que .bg-photo-histoire (notreHistoire.css),
   juste une image de fond différente. Les autres réglages
   (taille de titre, couleur blanche, recadrage mobile) sont
   redéfinis ici volontairement car liés à CETTE classe précise,
   propre à cette page.
   ====================================================== */

.section-full.bg-photo-particuliers {
  background-image:
    linear-gradient(to right, rgba(15, 15, 15, 0.72) 0%, rgba(15, 15, 15, 0.55) 45%, rgba(15, 15, 15, 0.35) 100%),
    linear-gradient(rgba(20, 20, 20, 0.35), rgba(20, 20, 20, 0.35)),
    url('/files/particuliers.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;

  min-height: 90vh;
  min-height: 90svh; /* évite les sauts liés à la barre d'adresse mobile */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}

.section-full.bg-photo-particuliers h1,
.section-full.bg-photo-particuliers h2,
.section-full.bg-photo-particuliers h3,
.section-full.bg-photo-particuliers h4,
.section-full.bg-photo-particuliers h5,
.section-full.bg-photo-particuliers h6 {
  font-size: var(--fs-hero-title) !important;
  font-weight: 800 !important;
  max-width: 900px;
}

.section-full.bg-photo-particuliers .eyebrow-rehabiter,
.section-full.bg-photo-particuliers h1,
.section-full.bg-photo-particuliers h2,
.section-full.bg-photo-particuliers h3,
.section-full.bg-photo-particuliers h4,
.section-full.bg-photo-particuliers h5,
.section-full.bg-photo-particuliers h6,
.section-full.bg-photo-particuliers .section-text {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

@media (max-width: 768px) {
  .section-full.bg-photo-particuliers {
    background-position: center 25%;
  }
}


/* ======================================================
   BLOC 2 : HABITER EN COMMUN, C'EST QUOI ? — ✅ à valider
   Enveloppe = section-full.bg-white de composants.css (fond,
   padding, eyebrow orange, titre : déjà gérés automatiquement).
   Ici on ajoute uniquement : la grille 2 colonnes, la liste à
   coches, le bloc photo + bouton, la ligne de séparation, et
   la rangée de stats en dessous.
   ====================================================== */

.habiter-commun-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 8px;
}

.habiter-commun-grid > br,
.habiter-commun-col-text > br,
.habiter-commun-liste > br {
  display: none !important;
}

/* --- Colonne gauche : paragraphe (via .section-text) + liste à coches --- */
.habiter-commun-liste {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

.habiter-commun-liste li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
}

.habiter-commun-liste li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-orange);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Colonne droite : photo + bouton centré en dessous --- */
.habiter-commun-col-photo {
  text-align: left;
}

.habiter-commun-col-photo > *,
.habiter-commun-col-photo .btn-outline-orange {
  margin-left: 0 !important;
}

.habiter-commun-photo {
  width: 100%;
  max-width: 600px; /* évite que la photo devienne énorme et floue sur très grand écran, sans décaler tout le bloc comme le faisait le conteneur global */
  margin: 0 0 24px;
}

.habiter-commun-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Séparateur avant la rangée de stats --- */
.habiter-commun-divider {
  width: 100%;
  height: 1px;
  background: rgba(65,62,60,0.15);
  margin: 56px 0 40px;
}

/* --- Rangée de stats --- */
.habiter-commun-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.habiter-commun-stats > br {
  display: none !important;
}

.habiter-commun-stat-number {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-orange);
  line-height: 1;
  margin-bottom: 8px;
}

.habiter-commun-stat-label {
  font-size: 0.95rem;
  color: var(--color-text-clair);
  line-height: 1.4;
  max-width: 200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .habiter-commun-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .habiter-commun-divider {
    margin: 40px 0 32px;
  }
  .habiter-commun-stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ======================================================
   BLOC 3 : PAR OÙ COMMENCER ? — ✅ à valider
   Enveloppe = section-full.bg-cream (fond, padding, eyebrow,
   titre : déjà gérés par composants.css). Cartes = .card de
   composants.css (fond, radius, ombre, padding réutilisés tels
   quels). Ici on ajoute uniquement : la grille à 4 colonnes et
   la liste de liens courts qui remplace le paragraphe + bouton
   habituels des cartes.
   ====================================================== */

.commencer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

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

/* --- Titre de carte : sélecteur large (h1 à h6) car le niveau
   réel rendu par ==== est imprévisible selon le contexte.
   !important + spécificité égale à la règle .section-full.bg-orange
   du composants.css, placée AVANT dans la cascade → celle-ci gagne
   et garde le texte sombre malgré le fond orange de la section. --- */
.commencer-grid .card h1,
.commencer-grid .card h2,
.commencer-grid .card h3,
.commencer-grid .card h4,
.commencer-grid .card h5,
.commencer-grid .card h6 {
  font-size: 20px !important;
  margin-bottom: 12px !important;
  color: var(--color-text) !important;
}

/* --- Icône de carte : réutilise .card-icone de composants.css
   tel quel (cercle 56px, fond crème) — rien à redéfinir ici --- */

/* --- Liste des ateliers : tags informatifs, PAS des liens
   cliquables (le clic passe par le bouton unique .commencer-cta
   en bas du bloc) --- */
.commencer-liste {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commencer-liste > br {
  display: none !important;
}

.commencer-liste li {
  position: relative;
  background: var(--color-cream);
  border-radius: 10px;
  padding: 10px 14px 10px 32px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.commencer-liste li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-clair);
}

/* --- Bouton unique pour tout le bloc, vers l'agenda global,
   à la place des liens individuels par carte --- */
.commencer-cta {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .commencer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .commencer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ======================================================
   BLOC 4 : CE QU'ON PROPOSE — ✅ à valider
   Enveloppe = section-full.bg-cream + .particuliers-inner (mêmes
   principes que les blocs précédents). Cartes = .card de
   composants.css (fond, radius, ombre, titre : déjà gérés). Ici
   on ajoute uniquement : la grille à 4 colonnes, les infos
   fréquence/lieu, et le style du lien d'action en bas de carte.
   ====================================================== */

.propose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}

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

/* --- Fréquence + lieu : petites lignes d'info sous le texte --- */
.propose-meta {
  margin-bottom: 20px;
}

.propose-meta > br {
  display: none !important;
}

.propose-meta-ligne {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-clair);
  line-height: 1.5;
}

/* --- Lien d'action en bas de carte (pas un bouton : action légère,
   différente sur chaque carte) --- */
.propose-link {
  color: var(--color-teal) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
}

.propose-link:hover {
  text-decoration: underline !important;
}

/* --- Bouton final, centré sous la grille --- */
.propose-cta {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .propose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .propose-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ======================================================
   BLOC 5 : ILS ONT FRANCHI LE PAS — ✅ à valider
   Enveloppe = section-full.bg-teal + .particuliers-inner. Cartes
   témoignage = .citation-card / .citation-guillemet / .citation-texte
   de accueil.css (déjà chargé sur toutes les pages, rien à
   redéfinir). Ici on ajoute uniquement la grille et le nom/rôle
   sous la citation.
   ====================================================== */

.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

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

.temoignage-auteur {
  font-weight: 700;
  color: var(--color-text);
  margin-top: 20px;
  font-size: 0.95rem;
}

.temoignage-role {
  font-size: 0.85rem;
  color: var(--color-text-clair);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .temoignages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .temoignages-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}