/* ============================================================
   RÉHABITER STRASBOURG — COMPOSANTS RÉUTILISABLES
   À charger sur TOUTES les pages, après accueil.css (qui contient
   les variables :root dont ce fichier a besoin).
   Objectif : ces classes s'utilisent telles quelles, sans jamais
   les renommer ni les redéfinir pour un nouveau bloc.
   ============================================================ */


/* ======================================================
   SECTIONS PLEINE LARGEUR
   Usage :
   ""<section class="section-full bg-orange">""
   ""<span class="eyebrow-rehabiter eyebrow-dark">""Eyebrow""</span>""
   ====Titre====
   ""<p class="section-text">""Texte.""</p>""
   ""</section>""
   Variantes de fond : bg-orange / bg-teal / bg-cream / bg-white
   ====================================================== */

.section-full {
  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;
}

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

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

.section-text {
  max-width: 640px;
  font-size: var(--fs-body) !important;
  line-height: 1.6;
  margin-bottom: 28px !important;
}

/* --- Variantes de fond --- */
.section-full.bg-orange { background: var(--color-orange); }
.section-full.bg-teal { background: var(--color-teal); }
.section-full.bg-cream { background: var(--color-cream); }
.section-full.bg-white { background: #ffffff; }

/* --- Couleur de texte automatique selon le fond --- */
.section-full.bg-orange h2, .section-full.bg-orange h3, .section-full.bg-orange h4,
.section-full.bg-orange h5, .section-full.bg-orange h6, .section-full.bg-orange .section-text,
.section-full.bg-teal h2, .section-full.bg-teal h3, .section-full.bg-teal h4,
.section-full.bg-teal h5, .section-full.bg-teal h6, .section-full.bg-teal .section-text {
  color: #ffffff !important;
}

.section-full.bg-cream h2, .section-full.bg-cream h3, .section-full.bg-cream h4,
.section-full.bg-cream h5, .section-full.bg-cream h6, .section-full.bg-cream .section-text,
.section-full.bg-white h2, .section-full.bg-white h3, .section-full.bg-white h4,
.section-full.bg-white h5, .section-full.bg-white h6 {
  color: var(--color-text) !important;
}
.section-full.bg-cream .section-text, .section-full.bg-white .section-text {
  color: var(--color-text-clair) !important;
}

/* --- Eyebrow : couleur automatique selon le fond --- */
.section-full.bg-orange .eyebrow-rehabiter,
.section-full.bg-teal .eyebrow-rehabiter { color: #ffffff !important; text-shadow: none !important; }
.section-full.bg-cream .eyebrow-rehabiter,
.section-full.bg-white .eyebrow-rehabiter { color: var(--color-orange) !important; text-shadow: none !important; }


/* ======================================================
   GRILLES DE CARTES
   Usage :
   ""<div class="card-grid card-grid-3">""
   ""<article class="card">""
   ""<div class="card-icone">""🏠""</div>""
   ====Titre====
   ""<p class="card-text">""Texte.""</p>""
   {{button class="btn-outline-orange" link="NomPage" text="Découvrir"}}
   ""</article>""
   ""</div>""
   Nombre de colonnes : card-grid-2 / card-grid-3 / card-grid-5
   ====================================================== */

.card-grid {
  display: grid;
  gap: 28px;
  margin-bottom: 40px;
}
.card-grid > br { display: none !important; }

.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: #ffffff;
  border-radius: var(--card-radius);
  padding: 40px 32px;
  box-shadow: 0 4px 24px rgba(65,62,60,0.08);
  text-align: left;
}
.card > br { display: none !important; }

.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;
}

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

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


/* ======================================================
   RESPONSIVE — activé (était en commentaire jusqu'ici, donc inactif :
   aucune page ne bénéficiait du padding réduit ni du repli en 1 colonne
   sur mobile). Détecté et corrigé sur NotreHistoire, reporté ici pour
   que ce soit valable automatiquement sur toutes les pages.
   ====================================================== */
@media (max-width: 768px) {
  .section-full {
    padding: 56px var(--section-padding-x-mobile) !important;
  }
  .card-grid-2,
  .card-grid-3,
  .card-grid-5 {
    grid-template-columns: 1fr;
  }
}


/* ======================================================
   BR PARASITES — YesWiki insère un <br> entre chaque section quand il
   y a une ligne vide dans l'éditeur (comportement systématique, pas
   propre à une page). Sans ce correctif, ça ajoute un vide non prévu
   entre les blocs en plus de var(--space-block).
   Le sélecteur ".page" cible le conteneur de contenu généré par
   YesWiki — à ajuster si ton thème utilise un autre nom de classe.
   Un <br class="force-break"> reste possible pour un retour à la
   ligne volontaire (ex: dans un titre de Hero).
   ====================================================== */
.page br:not(.force-break) {
  display: none !important;
}