/* ==========================================================================
   CITIZEN MOTION — STYLES DES COMPOSITIONS
   ==========================================================================

   Porté des sections 9 et 10 de la feuille du prototype. Deux écarts assumés :

   1. SCOPE PAR COMPOSITION, PAS PAR PAGE
      Le prototype scopait par classe de <body> : .page-home .hero-title.
      Une composition doit pouvoir être insérée sur n'importe quelle page, le
      scope est donc porté par la racine de la composition elle-même
      (.hero-home .hero-title). Un héros d'accueil posé sur une page interne
      reste correct.

   2. RACCORDS POUR core/image
      Le bloc image de WordPress enveloppe l'<img> dans un <figure>. Les
      règles du prototype qui ciblaient directement l'image sont donc
      doublées pour traverser ce conteneur.

   SOMMAIRE
     1. Héros d'accueil
     2. Cartes des deux pôles
     3. Titres de section
     4. Grille bento
     5. Étiquettes et contenu superposé
   ========================================================================== */


/* ==========================================================================
   0. NEUTRALISATION DES MARGES DE FLUX DE WORDPRESS
   ==========================================================================

   Un bloc de groupe en disposition « flux » reçoit la classe is-layout-flow,
   et WordPress applique alors margin-block-start: 24px à chacun de ses
   enfants. Dans ces compositions, c'est faux à deux titres :

     • les espacements sont déjà portés par le CSS du prototype (gap, margin)
       et se retrouvaient donc doublés ;
     • la marge s'applique aussi aux enfants en position: absolute, ce qui
       décalait .project-overlay de 24 px vers le bas et le raccourcissait
       d'autant — l'overlay ne couvrait plus sa carte.

   La règle du cœur est écrite avec :where(), donc de spécificité nulle : un
   simple sélecteur de classe suffit à la neutraliser, sans !important.

   Principe retenu dans tout le thème : le CSS gouverne la mise en page, les
   blocs gouvernent le contenu.
   ========================================================================== */
.hero-home .is-layout-flow > *,
.projects-section .is-layout-flow > *,
.supporters-section .is-layout-flow > * {
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ==========================================================================
   1. HÉROS D'ACCUEIL
   ========================================================================== */

/* Fond gris de la page d'accueil, visible entre les sections.
   Seule règle encore liée à une classe de <body> : un fond de page ne peut
   pas être posé par une composition. */


.hero-home {
  background-color: var(--color-brand-cream);
  color: var(--color-brand-dark);
  overflow: hidden;
}

.hero-home .hero-grid {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-home .hero-grid {
    padding: 3rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .hero-content {
    grid-column: span 4 / span 4;
  }
}

.hero-home .hero-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-brand-dark);
}

@media (min-width: 640px) {
  .hero-home .hero-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .hero-home .hero-title {
    font-size: 3rem;
  }
}

/* Trait « feutre » plus court que sur les pages internes */
.hero-home .brush-underline {
  width: 8rem;
}

.hero-home .brush-underline::after {
  height: 6px;
  border-radius: 999px;
}

@media (min-width: 640px) {
  .hero-home .brush-underline {
    width: 8rem;
  }
}

.hero-description {
  font-size: 0.75rem;
  color: var(--color-gray-700);
  font-weight: 600;
  line-height: 1.625;
  padding-top: 0.5rem;
}

@media (min-width: 640px) {
  .hero-description {
    font-size: 0.875rem;
  }
}

.cta-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.cta-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-visuals {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-visuals {
    grid-column: span 8 / span 8;
  }
}


/* ==========================================================================
   2. CARTES DES DEUX PÔLES
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  position: relative;
  z-index: var(--z-content);
  width: 100%;
}

@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-wrapper:hover {
  transform: translateY(-2px);
}

.card-wrapper:hover .card-btn-action.teal {
  background-color: var(--color-brand-dark);
}

.card-wrapper.offset-top {
  padding-top: 1rem;
}

@media (min-width: 640px) {
  .card-wrapper.offset-top {
    padding-top: 0;
  }
}

.card-image-box {
  position: relative;
  height: 16rem;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background-color: var(--color-black);
}

/* L'image : règle doublée pour traverser le <figure> de core/image. */
.card-image-box img,
.card-image-box .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.5s ease;
}

.card-image-box .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
}

.card-image-box:hover img {
  transform: scale(1.05);
}

.badge-or {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  background-color: var(--color-white);
  color: var(--color-brand-dark);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: var(--z-badge);
}

/* --- Mini-cartes d'information --------------------------------------------- */
.card-info {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-info-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-info-header.teal {
  color: var(--color-brand-teal);
}

.card-info-header.red {
  color: var(--color-brand-red);
}

.card-info-header i,
.card-info-header .icon {
  font-size: 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}

.card-info-header h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-dark);
  margin: 0;
}

.card-info-desc {
  font-size: 11px;
  color: var(--color-gray-600);
  line-height: 1.25;
  margin: 0;
}

.card-btn-action {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: var(--color-white);
  transition: background-color 0.2s;
}

.card-btn-action.teal {
  background-color: var(--color-brand-teal);
}

.card-btn-action.red {
  background-color: var(--color-brand-red);
}

.card-btn-action:hover {
  background-color: var(--color-brand-dark);
}

.card-btn-action i,
.card-btn-action .icon {
  font-size: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}


/* ==========================================================================
   3. TITRES DE SECTION
   ========================================================================== */
.section-title-wrap {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.section-main-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-brand-dark);
  margin: 0;
}

/* Chapeau sous un titre de section */
.section-intro {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: -1rem 0 2rem 0;
  position: relative;
  z-index: var(--z-content);
}


/* ==========================================================================
   4. GRILLE BENTO
   ========================================================================== */
.projects-section {
  padding-bottom: 4rem;
  padding-top: 2rem;
  position: relative;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  position: relative;
  z-index: var(--z-content);
}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 280px;
  }

  .card-col-2 {
    grid-column: span 2 / span 2;
    grid-row: span 1 / span 1;
  }

  .card-row-2 {
    grid-column: span 1 / span 1;
    grid-row: span 2 / span 2;
  }

  .card-col-1 {
    grid-column: span 1 / span 1;
    grid-row: span 1 / span 1;
  }
}

.project-card {
  background-color: var(--color-white);
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  height: 280px;
}

@media (min-width: 768px) {
  .project-card {
    height: 100%;
  }
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.project-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Image de fond : règle doublée pour traverser le <figure> de core/image. */
.project-card img.cover-img,
.project-card .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.5s ease;
}

.project-card .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
}

.project-card:hover img.cover-img,
.project-card:hover .wp-block-image img {
  transform: scale(1.05);
}


/* ==========================================================================
   5. ÉTIQUETTES ET CONTENU SUPERPOSÉ
   ========================================================================== */
/* L'etiquette est devenue un bloc libre : posee seule, elle doit se comporter
   comme un element en ligne. Ce n'est qu'a l'interieur d'une carte qu'elle se
   cale en absolu dans son coin — voir la regle suivante. */
.badge {
  position: relative;
  display: inline-flex;
  width: auto;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  z-index: var(--z-badge);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Posee sur une carte : coin superieur gauche, au-dessus du visuel. */
.project-card-inner > .badge,
.card-image-box > .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.badge-teal   { background-color: var(--color-brand-teal); }
.badge-red    { background-color: var(--color-brand-red); }
.badge-dark   { background-color: var(--color-brand-dark); }
.badge-yellow {
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-dark);
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--color-white);
  overflow: hidden;
}

.atelier-icon-num {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

/* Icône en filigrane géant, derrière le texte de la carte.
   Le sprite SVG dimensionne en em : font-size pilote donc toujours la taille,
   exactement comme avec la police d'icônes du prototype. */
.atelier-icon-num i,
.atelier-icon-num .icon {
  font-size: 30rem;
  width: 1em;
  height: 1em;
  font-weight: 900;
  opacity: 0.1;
  color: var(--color-white);
  top: -14%;
  position: absolute;
  pointer-events: none;
}

.atelier-icon-num .num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  opacity: 0.4;
  line-height: 1;
  display: none;
}

.project-title-lg {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  position: relative;
}

.project-title-md {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  position: relative;
}

.project-desc {
  font-size: 0.875rem;
  color: #E5E7EB;
  line-height: 1.5;
  margin-bottom: 1rem;
  position: relative;
}

.project-desc-sm {
  font-size: 0.8rem;
  color: var(--color-gray-300);
  margin-bottom: 1rem;
  position: relative;
}

.atelier-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  position: relative;
}

.meta-tag {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}


/* ==========================================================================
   RACCORD — BANDEAU « SOUTIENS »
   ==========================================================================
   Le gabarit du bandeau vit dans style.css (§ 7, global). Seul le traversage
   du <figure> de core/image est ajouté ici.
   ========================================================================== */
.supporter-item .wp-block-image {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supporter-item .wp-block-image img {
  max-height: 100%;
  max-width: 150px;
  width: auto;
  object-fit: contain;
}

.supporter-item.is-featured .wp-block-image img {
  max-width: 200px;
}