/* ==========================================================================
   CITIZEN MOTION — STYLES DES MODULES DE PAGES INTERNES
   ==========================================================================

   Porté des sections 10 à 14 de la feuille du prototype (pages de pôle,
   éducation aux médias, productions, association, pages en construction).

   Même principe que patterns.css : le prototype scopait par classe de <body>
   (.page-pole, .page-assoc, .page-empty), ce qui interdisait de réutiliser un
   module ailleurs. Le scope est ici porté par la racine de la composition, de
   sorte qu'un héros de pôle reste correct sur n'importe quelle page.

   SOMMAIRE
     1. Héros de pôle
     2. Héros association
     3. Étapes de processus
     4. Objectifs (cartes à icône)
     5. Zones d'activité
     6. Chiffres clés
     7. Mission & valeurs
     8. Frise chronologique
     9. Bandeau défilant
    10. Équipe
    11. Ils nous font confiance
    12. Partenaires institutionnels
    13. Appels à l'action
    14. Page en construction
   ========================================================================== */

/* Neutralisation des marges de flux de WordPress — même raison qu'au § 0 de
   patterns.css : le CSS gouverne la mise en page, les blocs le contenu. */
.hero-pole .is-layout-flow > *,
.hero-assoc .is-layout-flow > *,
.process-section .is-layout-flow > *,
.zones-section .is-layout-flow > *,
.stats-section .is-layout-flow > *,
.assoc-section .is-layout-flow > *,
.cta-final-grid .is-layout-flow > *,
.empty-section .is-layout-flow > * {
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ==========================================================================
   1. HÉROS DE PÔLE  (.hero-pole)
   ==========================================================================
   Deux variantes, par classe additionnelle sur la racine :
     .is-text-only    pas de visuel, le texte occupe une colonne plus large
     .is-wide-visual  visuel rectangulaire plein (page Productions)
   ========================================================================== */
.hero-pole {
  padding-top: 3rem;
  position: relative;
}

@media (min-width: 1024px) {
  .hero-pole {
    padding-top: 4rem;
  }
}

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

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

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: var(--z-content);
}

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

.pole-tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--color-brand-teal);
  letter-spacing: 0.05em;
  margin: 0;
}

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

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

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

.hero-desc {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 32rem;
  color: var(--color-gray-700);
  margin: 0;
}

.hero-desc-alt {
  font-size: 1rem;
  color: var(--color-gray-600);
  margin-top: -0.5rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

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

.hero-image-box {
  position: relative;
  z-index: var(--z-content);
  max-width: 37rem;
  width: 100%;
  opacity: 0.83;
}

.hero-image-box .wp-block-image {
  margin: 0;
}

/* --- Variante sans visuel -------------------------------------------------- */
.hero-pole.is-text-only .hero-visual {
  display: none;
}

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

/* --- Variante à visuel rectangulaire plein (Productions) -------------------
   Le prototype chargeait ici une photo Unsplash en dur dans le CSS. Le visuel
   vient désormais d'un bloc Image de la composition : éditable, servi depuis
   le site, et aucune requête vers un tiers. */
.hero-pole.is-wide-visual .hero-image-box {
  opacity: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.55);
}

.hero-pole.is-wide-visual .hero-image-box .wp-block-image img {
  width: 100%;
  min-height: 30rem;
  object-fit: cover;
}


/* ==========================================================================
   2. HÉROS ASSOCIATION  (.hero-assoc)
   ========================================================================== */
.hero-assoc {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

@media (min-width: 1024px) {
  .hero-assoc {
    padding-top: 4rem;
  }
}

.hero-assoc .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

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

  .hero-assoc .hero-text {
    grid-column: span 7 / span 7;
  }

  .hero-assoc .hero-visual {
    grid-column: span 5 / span 5;
  }
}

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

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

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

/* Le prototype colorait une partie du titre avec un <span>. L'éditeur de blocs
   produit plutôt un <em> ou un <mark> : les trois sont acceptés. */
.hero-assoc .hero-title :is(span, em, mark),
.mission-quote :is(span, em, mark),
.trust-quote :is(span, em, mark),
.cta-final-title :is(span, em, mark) {
  color: var(--color-brand-teal);
  font-style: normal;
  background: none;
}

/* Le visuel de droite est ici un bloc de contenu, pas une image */
.hero-assoc .hero-visual {
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}


/* ==========================================================================
   3. ÉTAPES DE PROCESSUS
   ========================================================================== */
.process-section {
  background: var(--color-white);
  padding: 4rem 0;
  margin-bottom: 4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

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

@media (min-width: 768px) {
  .process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.process-step {
  display: flex;
  flex-direction: column;
  position: relative;
}

.step-num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3rem;
  color: var(--color-brand-yellow);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.step-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--color-brand-dark);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.step-desc {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Flèche entre deux étapes. Le prototype affichait ici un glyphe de la police
   Font Awesome ; le caractère flèche donne le même résultat sans dépendance. */
@media (min-width: 768px) {
  .process-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 0.75rem;
    right: -1rem;
    color: rgba(0, 0, 0, 0.15);
    font-size: 1.5rem;
    line-height: 1;
  }
}


/* ==========================================================================
   4. OBJECTIFS — cartes translucides surmontées d'une icône
   ========================================================================== */
.missions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3.5rem;
  position: relative;
  z-index: var(--z-content);
}

@media (min-width: 768px) {
  .missions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Fond translucide : la couleur de page — ou un décor — reste visible */
.mission-card {
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(15, 26, 36, 0.15);
  border-radius: 0.75rem;
  padding: 2.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.mission-card:hover {
  border-color: var(--color-brand-teal);
  transform: translateY(-4px);
}

.mission-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  border: 2px solid var(--color-brand-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-teal);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mission-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-brand-dark);
  margin: 0;
}

.mission-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}


/* ==========================================================================
   5. ZONES D'ACTIVITÉ
   ========================================================================== */
.zones-section {
  padding-bottom: 4rem;
  position: relative;
}

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

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

@media (min-width: 1024px) {
  .zones-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.zone-card {
  background: var(--color-white);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-top: 4px solid var(--color-brand-teal);
}

/* Le prototype nommait ces variantes d'après les villes (.bw, .lge, .nmr).
   Nommées ici d'après la couleur : réutilisable pour n'importe quelle zone. */
.zone-card.is-red    { border-top-color: var(--color-brand-red); }
.zone-card.is-yellow { border-top-color: var(--color-brand-yellow); }
.zone-card.is-dark   { border-top-color: var(--color-brand-dark); }

/* Code de zone en filigrane */
.zone-num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  opacity: 0.1;
  position: absolute;
  top: 1rem;
  right: 1rem;
  line-height: 1;
  margin: 0;
}

.zone-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-brand-dark);
  margin-bottom: 0.75rem;
}

.zone-desc {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  position: relative;
  z-index: var(--z-float);
  margin: 0;
}


/* ==========================================================================
   6. CHIFFRES CLÉS
   ========================================================================== */
.stats-section {
  background-color: var(--color-brand-teal);
  color: var(--color-black);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.stats-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

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

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

.stats-text-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .stats-text-col {
    grid-column: span 5 / span 5;
    border-bottom: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 0;
    padding-right: 1.5rem;
  }
}

.stats-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1.25;
  color: var(--color-black);
  margin: 0;
}

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

.stats-subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.375;
  color: var(--color-black);
  margin: 0;
}

@media (min-width: 640px) {
  .stats-subtitle {
    font-size: 1.125rem;
  }
}

.stats-metrics-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .stats-metrics-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .stats-metrics-col {
    grid-column: span 7 / span 7;
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-icon {
  font-size: 2.25rem;
  color: var(--color-white);
  margin-bottom: 0.25rem;
  line-height: 1;
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  color: var(--color-black);
}

@media (min-width: 640px) {
  .stat-number {
    font-size: 3rem;
  }
}

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


/* ==========================================================================
   7. MISSION & VALEURS
   ========================================================================== */
.assoc-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .mission-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

.mission-quote {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--color-brand-dark);
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .mission-quote {
    font-size: 2.125rem;
  }
}

.mission-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-gray-600);
  max-width: 34rem;
  margin: 0;
}

.values-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.values-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.value-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.value-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border: 2px solid var(--color-brand-teal);
  color: var(--color-brand-teal);
  font-size: 1rem;
}

/* Chaque valeur prend une couleur de la palette, dans l'ordre */
.value-row:nth-child(2) .value-icon {
  border-color: var(--color-brand-red);
  color: var(--color-brand-red);
}

.value-row:nth-child(3) .value-icon {
  border-color: var(--color-brand-yellow);
  color: var(--color-brand-yellow);
}

.value-row:nth-child(4) .value-icon {
  border-color: var(--color-brand-dark);
  color: var(--color-brand-dark);
}

.value-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-brand-dark);
  margin-bottom: 0.25rem;
}

.value-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}


/* ==========================================================================
   8. FRISE CHRONOLOGIQUE
   ========================================================================== */
.timeline {
  width: 100%;
  border-left: 2px solid rgba(15, 26, 36, 0.12);
  padding-left: 1.75rem;
}

.timeline-item {
  position: relative;
  padding: 0.875rem 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1.75rem - 8px);
  top: 1.15rem;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: var(--color-brand-cream);
  border: 3px solid var(--color-brand-teal);
}

/* Le dernier jalon est plein : c'est là qu'on en est */
.timeline-item:last-child::before {
  background-color: var(--color-brand-teal);
}

.timeline-year {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-brand-teal);
  margin-bottom: 0.3rem;
}

.timeline-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-gray-600);
  margin: 0;
}

.timeline-text strong {
  color: var(--color-brand-dark);
  font-weight: 700;
}


/* ==========================================================================
   9. BANDEAU DÉFILANT
   ========================================================================== */
.ticker {
  background-color: var(--color-brand-dark);
  color: var(--color-brand-cream);
  overflow: hidden;
  padding: 0.9rem 0;
}

.ticker-inner {
  display: flex;
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
}

/* Deux pistes rigoureusement identiques : la boucle passe inaperçue */
.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.ticker-sep {
  color: var(--color-brand-teal);
  margin: 0 1.1rem;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .ticker-inner {
    animation: none;
  }
}


/* ==========================================================================
   10. ÉQUIPE
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-card {
  background-color: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.team-avatar {
  height: 14rem;
  position: relative;
  overflow: hidden;
  background-color: var(--color-brand-blue);
  color: var(--color-brand-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
}

/* Aplat de marque visible tant qu'aucun portrait n'est fourni */
.team-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, currentColor 0%, transparent 60%);
  opacity: 0.18;
  pointer-events: none;
}

.team-avatar i,
.team-avatar .icon {
  position: relative;
  z-index: var(--z-content);
}

/* Le prototype calait les portraits avec margin-top: 47vh, ce qui les sortait
   du cadre à toute autre hauteur de fenêtre. object-fit fait le travail. */
.team-avatar .wp-block-image,
.team-avatar .wp-block-image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center top;
}

.team-card.is-red .team-avatar    { color: var(--color-brand-red); }
.team-card.is-yellow .team-avatar { color: var(--color-brand-yellow); }

.team-body {
  padding: 1.5rem;
  border-top: 4px solid var(--color-brand-teal);
}

.team-card.is-red .team-body    { border-top-color: var(--color-brand-red); }
.team-card.is-yellow .team-body { border-top-color: var(--color-brand-yellow); }

.team-name {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--color-brand-dark);
  margin-bottom: 0.25rem;
}

.team-role {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand-teal);
  margin-bottom: 0.75rem;
}

.team-card.is-red .team-role { color: var(--color-brand-red); }

/* Le jaune de marque manque de contraste sur fond blanc : version foncée */
.team-card.is-yellow .team-role { color: #A87905; }

.team-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}


/* ==========================================================================
   11. ILS NOUS FONT CONFIANCE
   ========================================================================== */
.trust-block {
  background-color: var(--color-white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .trust-block {
    grid-template-columns: 4fr 8fr;
  }
}

.trust-brand {
  padding: 2.5rem 2rem;
  background-color: var(--color-brand-cream);
  border-bottom: 4px solid var(--color-brand-yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 900px) {
  .trust-brand {
    border-bottom: none;
    border-right: 4px solid var(--color-brand-yellow);
  }
}

.trust-logo,
.trust-brand .wp-block-image {
  max-width: 190px;
  width: 100%;
  margin: 0;
}

.trust-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
  margin: 0;
}

.trust-body {
  padding: 2.5rem 2rem;
}

.trust-quote {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-brand-dark);
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .trust-quote {
    font-size: 1.75rem;
  }
}

.trust-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-gray-600);
  margin: 0;
}


/* ==========================================================================
   12. PARTENAIRES INSTITUTIONNELS
   ========================================================================== */
.instit-block {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.instit-label {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  margin-bottom: 1rem;
}

.instit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.instit-tag {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  background-color: var(--color-white);
  border: 2px solid rgba(15, 26, 36, 0.12);
  color: var(--color-gray-600);
}

/* Partenaires structurels : mis en avant */
.instit-tag.is-strong {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-white);
}


/* ==========================================================================
   13. APPELS À L'ACTION
   ========================================================================== */
.cta-final-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

@media (min-width: 900px) {
  .cta-final-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Variante à un seul encadré, pleine largeur */
.cta-final-grid.is-single {
  grid-template-columns: 1fr;
}

.cta-final-section {
  background-color: var(--color-brand-blue);
  padding: 4rem 2rem;
  border-radius: 1rem;
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-final-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .cta-final-title {
    font-size: 2.5rem;
  }
}

/* Second encadré : accent jaune pour le distinguer du premier */
.cta-final-section.cta-final-alt .cta-final-title :is(span, em, mark) {
  color: var(--color-brand-yellow);
}

.cta-final-desc {
  font-size: 1rem;
  color: var(--color-gray-400);
  max-width: 32rem;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}


/* ==========================================================================
   14. PAGE EN CONSTRUCTION
   ========================================================================== */
.empty-section {
  padding-top: 1rem;
  padding-bottom: 5rem;
}

.empty-block {
  background-color: var(--color-white);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 0.75rem;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--color-gray-500);
}

.empty-block i,
.empty-block .icon {
  font-size: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-brand-teal);
  margin: 0 auto 1rem;
  display: block;
}

.empty-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--color-brand-dark);
  margin-bottom: 0.5rem;
}

.empty-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 34rem;
  margin: 0 auto;
}


/* ==========================================================================
   15. BLOC « ICÔNE CIMO »
   ==========================================================================
   Le bloc icon peut se poser nu, dans un cercle, ou en filigrane geant. Les
   trois reprennent les apparences deja utilisees par les modules
   (.mission-icon, .value-icon, .atelier-icon-num) mais sans dependre d'eux :
   l'icone doit pouvoir servir n'importe ou.
   ========================================================================== */
.cimo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Cercle : meme dessin que .mission-icon et .value-icon. Le diametre suit la
   taille de l'icone, pour que le bloc reste coherent quelle que soit celle-ci. */
.cimo-icon--circle {
  width: 2.8em;
  height: 2.8em;
  border-radius: 9999px;
  border: 2px solid currentColor;
  flex-shrink: 0;
}

/* Filigrane : la forme passe derriere le texte de sa carte. */
.cimo-icon--watermark {
  position: absolute;
  top: -14%;
  left: 0;
  opacity: 0.1;
  pointer-events: none;
  z-index: var(--z-deco);
}

.cimo-icon .icon {
  width: 1em;
  height: 1em;
}


/* ==========================================================================
   SILOS — grille des familles d'activité
   ==========================================================================
   Section + grille (variations des blocs Section et Grille) et le bloc Tuile
   (blocks/tile/).

   POURQUOI CETTE FORME

   1. L'aplat de couleur pleine est le geste du catalogue imprimé 2026 — une
      page = un champ de couleur. Le site et l'imprimé se répondent.
   2. Le fond sombre de la section n'est pas décoratif : c'est lui qui fait
      tenir ensemble cinq couleurs de marque qui, sur du crème, se
      disputeraient.
   3. Chaque tuile porte en fond une forme de marque habillée d'une photo,
      très atténuée. Même geste que le héros à une autre échelle : la page
      entière parle alors un seul vocabulaire.
   ========================================================================== */

.silos-section {
  background-color: var(--color-brand-dark);
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}

/* Filet de marque en tête de section : rappel du trait, et rupture nette avec
   le crème de la section précédente. */
.silos-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--color-brand-teal) 0%,
    var(--color-brand-teal) 20%,
    var(--color-brand-red) 20%,
    var(--color-brand-red) 40%,
    var(--color-brand-yellow) 40%,
    var(--color-brand-yellow) 60%,
    var(--color-brand-cream) 60%,
    var(--color-brand-cream) 80%,
    var(--color-brand-teal) 80%
  );
}

/* La section qui suit démarrait collée au bas du champ sombre. */
.silos-section + .zones-section {
  padding-top: 4.5rem;
}


/* --- La grille ------------------------------------------------------------
   Trois colonnes : une tuile en double largeur occupe deux colonnes, les
   autres une seule. Cinq silos remplissent ainsi deux rangées sans trou. */
.silos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
  z-index: var(--z-content);
}

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

  .silos-grid .silo-card.is-wide {
    grid-column: span 2;
  }
}

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


/* --- La tuile ------------------------------------------------------------- */
.silo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: 1.75rem;
  color: var(--color-white);
  background-color: var(--color-brand-teal);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 1024px) {
  .silo-card.is-wide {
    min-height: 20rem;
    padding: 2.25rem;
  }
}

.silo-card:hover,
.silo-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.45);
}

.silo-card.is-teal   { background-color: var(--color-brand-teal); }
.silo-card.is-red    { background-color: var(--color-brand-red); }
.silo-card.is-yellow { background-color: var(--color-brand-yellow); }
.silo-card.is-cream  { background-color: var(--color-brand-cream); }
.silo-card.is-dark   { background-color: var(--color-brand-blue); }

/* Posée par le bloc d'après la couleur, jamais à la main : sur jaune et sur
   crème, le texte blanc ne passe pas. */
.silo-card.is-ink { color: var(--color-brand-dark); }


/* --- Le fond : une forme habillée d'une photo -----------------------------
   La forme occupe TOUTE la tuile, et non un coin. Posée en vignette elle se
   lisait comme un tampon ajouté après coup ; étirée au cadre, elle devient la
   structure de la tuile — l'angle de l'éclair découpe le champ de couleur et
   c'est ce tracé qu'on lit d'abord.

   `aspect-ratio: auto` est indispensable : sur un élément en position absolue
   aux quatre décalages nuls, les dimensions restent « auto », donc le rapport
   d'origine de la forme continue de s'appliquer et elle dépasse la tuile.
   Mesuré — 372 px de forme pour 322 px de carte, l'excédent rogné en silence
   par l'overflow. La forme paraissait en place alors qu'elle était tronquée.

   Le masque lui-même vient de .cimo-decor--image (§ 4 de style.css) : seule
   l'adresse du fichier est posée en ligne, par --cimo-mask. */
.silo-figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  z-index: var(--z-deco);
  pointer-events: none;
}

/* --- Le fond : photographie pleine ----------------------------------------
   Réservée au silo principal. Même traitement que les cartes bento. */
.silo-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
}

.silo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.5s ease;
}

.silo-card.has-media { background-color: var(--color-brand-blue); }

.silo-card.has-media:hover .silo-media img {
  transform: scale(1.05);
}

/* Dégradé teinté — et non noir — pour relier la carte au reste de la palette. */
.silo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 26, 36, 0.94) 0%,
    rgba(15, 26, 36, 0.74) 45%,
    rgba(42, 168, 155, 0.5) 100%
  );
}


/* --- Le contenu de la tuile ----------------------------------------------- */
.silo-body {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}

.silo-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
}

@media (min-width: 1024px) {
  .silo-card.is-wide .silo-title {
    font-size: 2.25rem;
    max-width: 18ch;
  }
}

.silo-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.92;
}

@media (min-width: 1024px) {
  .silo-card.is-wide .silo-desc {
    font-size: 1.0625rem;
    max-width: 44ch;
  }
}

/* Les mentions deviennent ici des étiquettes à filet, reprises des badges
   « contour » du catalogue : elles disent ce qu'on produit, pas ce qu'on
   étudie. Le bloc reste « Rangée de mentions » — seul le contexte change. */
.silo-card .atelier-meta {
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.silo-card .meta-tag {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.2rem 0.6rem 0.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}


/* --- L'appel à l'action ---------------------------------------------------
   Le lien est rendu dans la carte, puis étendu à sa surface entière par
   ::after. Envelopper la carte dans un <a> aurait rendu son contenu
   inéditable dans le canevas et placé un titre et un paragraphe entiers dans
   l'intitulé annoncé par les lecteurs d'écran. */
.silo-link {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.silo-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-float);
}

.silo-link .icon {
  transition: transform 0.25s ease;
}

.silo-card:hover .silo-link .icon {
  transform: translateX(4px);
}


/* ==========================================================================
   HÉROS À COMPOSITION DE FORMES
   ==========================================================================

   Le héros de pôle coupe la largeur en deux : texte à gauche, photo à droite.
   Partage lisible mais attendu, et qui enferme la photo dans un rectangle —
   alors que toute l'identité de l'association tient dans une forme anguleuse.

   Ici la photographie n'est plus posée À CÔTÉ du texte : elle est découpée
   DANS les formes de marque, à pleine hauteur. Le texte revient au centre.

   CE FICHIER NE POSITIONNE AUCUNE FORME.

   Taille, décalages, rotation, opacité et profondeur de chaque forme sont des
   réglages du bloc Décor, visibles et modifiables dans l'éditeur. Les écrire
   aussi ici créerait deux sources de vérité, dont une invisible à la personne
   qui compose. Seules les corrections par palier ci-dessous font exception :
   personne ne règle à la main une composition pour chaque largeur d'écran.

   LE RÉGLAGE QUI TIENT TOUT : l'opacité des photographies, autour de 35 %.
   À pleine intensité elles imposent de dégager le centre, donc de rapetisser
   les formes, et la page perd son impact. En fantôme elles passent sous le
   texte, ce qui les libère d'occuper toute la hauteur.
   ========================================================================== */

.hero-shapes {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4.5rem 0 5rem;
  min-height: 34rem;
}

@media (min-width: 1024px) {
  .hero-shapes {
    min-height: 42rem;
    padding: 6rem 0 6.5rem;
  }
}

.hero-shapes-content {
  position: relative;
  z-index: var(--z-content);
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hero-shapes .hero-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-brand-dark);
  margin: 0;
  text-wrap: balance;
}

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

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

/* .hero-desc est bornée à 32rem et calée à gauche par le module d'origine :
   recentrée ici, sans toucher au module. */
.hero-shapes .hero-desc {
  margin-left: auto;
  margin-right: auto;
  max-width: 34rem;
}

.hero-shapes .hero-buttons {
  justify-content: center;
  margin-top: 0.75rem;
}


/* --- Corrections par palier -----------------------------------------------
   La composition est réglée pour un grand écran, où le texte n'occupe que le
   tiers central. Dès que la colonne de texte s'élargit par rapport à la
   fenêtre, les formes PLEINES — opaques — viennent mordre le titre. Les
   masses photographiques, elles, sont en fantôme et peuvent rester.

   Les formes sont désignées par la classe que la composition leur donne
   (champ « Classe(s) CSS additionnelle(s) » du panneau Avancé), et non par
   leur position dans le markup : on doit pouvoir en ajouter une sans décaler
   les règles.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero-shapes .is-hero-bolt { left: 1%; }
  .hero-shapes .is-hero-mass { left: -26%; }
}

@media (max-width: 767px) {
  .hero-shapes .is-hero-bolt {
    left: -8%;
    top: -4%;
    height: 108%;
  }

  /* Sous 768 px, la masse pleine et le plan atténué n'ont plus la place de se
     déployer : ils encombreraient au lieu de composer.

     Sélecteur descendant volontaire — le bloc Décor pose lui-même un display
     sur son élément, avec une spécificité supérieure à celle d'une classe
     seule. Une règle en `.is-hero-mass { display: none }` serait
     silencieusement perdue. Constaté à l'écran. */
  .hero-shapes .is-hero-mass,
  .hero-shapes .is-hero-ghost {
    display: none;
  }
}


/* --- En-tête de la section des silos --------------------------------------
   Posé après coup dans ce fichier plutôt qu'au milieu du bloc ci-dessus : il
   appartient à la section, pas à la tuile. */
.silos-header {
  position: relative;
  z-index: var(--z-content);
  margin-bottom: 3rem;
  max-width: 46rem;
}

.silos-eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-teal);
  margin-bottom: 1rem;
}

/* Titre posé dans un cartouche crème : le geste exact du catalogue imprimé
   2026 (« Ateliers ponctuels », « Projets & résidences »). C'est ce qui fait
   se répondre le site et le papier. */
.silos-title {
  display: inline-block;
  background-color: var(--color-brand-cream);
  color: var(--color-brand-dark);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.1;
  padding: 0.5rem 1.25rem 0.6rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .silos-title { font-size: 2.75rem; }
}

.silos-intro {
  color: var(--color-brand-cream);
  font-size: 1.125rem;
  line-height: 1.65;
  opacity: 0.85;
}

.silos-intro strong {
  color: var(--color-white);
  font-weight: 700;
}


/* ==========================================================================
   SORTIE DE GOUTTIÈRE
   ==========================================================================
   Le gabarit `templates/page.html` enferme le contenu dans un `.container`
   centré. La plupart des sections s'en accommodent — elles portent elles-mêmes
   `.container`. Mais deux d'entre elles sont des CHAMPS DE COULEUR : un héros
   dont les formes doivent saigner par les bords, et la bande sombre des silos.
   Enfermées, elles se lisent comme des boîtes posées au milieu de la page.

   Mesuré : 1232 px de section dans une fenêtre de 1396 px.

   `100vw` inclut la barre de défilement, d'où un dépassement de quelques
   pixels — absorbé par l'`overflow-x: hidden` déjà posé sur <body> au § 2 de
   style.css. C'est la raison d'être de cette règle ; ne pas la retirer.
   ========================================================================== */
.hero-shapes,
.silos-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* `100vw` compte la barre de défilement, ce qui laisse dépasser quelques
   pixels — 8 px mesurés. `clip` et non `hidden` : `hidden` ferait de ce
   conteneur un contexte de défilement, ce qui casserait tout `position:
   sticky` posé à l'intérieur. `clip` coupe sans rien rendre défilable. */
.wp-site-blocks {
  overflow-x: clip;
}

/* Le contenu, lui, reste dans la gouttière : c'est le fond qui s'étend, pas
   le texte. Les enfants portent déjà `.container`. */


/* ==========================================================================
   TEXTE ET VISUEL CÔTE À CÔTE
   ==========================================================================
   Deux tiers de texte, un tiers d'image. Sert aux pages de compte-rendu, où
   la description et la preuve doivent se lire d'un seul regard.

   Une image pleine largeur mettait la photographie et le texte en file
   indienne : il fallait faire défiler pour relier l'un à l'autre. Côte à côte,
   le rapport est immédiat.
   ========================================================================== */
.texte-visuel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

/* 900 px et non 768 : à 768, le tiers réservé à l'image tombe sous 240 px et
   la légende s'y empile sur quatre lignes. */
@media (min-width: 900px) {
  .texte-visuel {
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
  }
}

.texte-visuel .hero-buttons {
  margin-top: 1.5rem;
}


/* ==========================================================================
   VISUEL ENCADRÉ
   ==========================================================================
   Une photographie surmontant sa légende, posée sur un bandeau de couleur.

   LA PHOTOGRAPHIE N'EST PAS DÉSATURÉE, à l'inverse de toutes les autres du
   thème. Le noir et blanc sert partout ailleurs à faire tenir ensemble des
   images d'origines diverses, en fond ou en vignette. Ici l'image n'est pas un
   fond : c'est la preuve de ce qui a été fait. La traiter comme les autres
   reviendrait à dire qu'elle est décorative.

   LE BANDEAU REMPLACE LE FILET. Une légende en gris sous une image se lit
   comme une mention légale ; sur un aplat de marque, elle fait partie de
   l'objet.
   ========================================================================== */
.visuel-encadre {
  position: relative;
  overflow: hidden;
  align-self: start;
}

.visuel-encadre img,
.visuel-encadre .wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
}

.visuel-encadre .wp-block-image {
  margin: 0;
}

.visuel-encadre .visuel-legende {
  margin: 0;
  background-color: var(--color-brand-teal);
  color: var(--color-brand-cream);
  padding: 0.85rem 1.1rem 0.95rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Le bandeau peut suivre la couleur du silo d'où vient la page — rouge pour
   Audio, jaune pour Vidéo… Sur jaune et sur crème, le texte repasse en sombre. */
.visuel-encadre.is-red .visuel-legende { background-color: var(--color-brand-red); }
.visuel-encadre.is-dark .visuel-legende { background-color: var(--color-brand-blue); }

.visuel-encadre.is-yellow .visuel-legende {
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-dark);
}