/* ==========================================================================
   CITIZEN MOTION — FEUILLE DE STYLE GLOBALE
   ==========================================================================

   SOMMAIRE
     1.  Variables (couleurs, typographie, échelle de profondeur)
     2.  Reset & bases
     3.  Système de couches (z-index)  ← lire avant d'ajouter un décor
     4.  Utilitaires & formes décoratives
     5.  En-tête & navigation
     6.  Boutons
     7.  Bandeau « soutiens »
     8.  Pied de page
     9.  Page d'accueil ................................ body.page-home
     10. Pages de pôle (commun EAM + Productions) ...... body.page-pole
     11. Spécifique Éducation aux médias ............... body.page-eam
     12. Spécifique Productions ........................ body.page-prod
     13. Pages en construction ......................... body.page-empty
     14. Page association .............................. body.page-assoc

   Chaque page porte une classe sur <body> :
     index.html ......... class="page-home"
     eam.html ........... class="page-pole page-eam"
     productions.html ... class="page-pole page-prod"
     association.html ... class="page-assoc"
     actualites.html .... class="page-empty"
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Palette de marque */
  --color-brand-teal: #2AA89B;
  --color-brand-red: #E84A42;
  --color-brand-yellow: #F4B41A;
  --color-brand-dark: #0F1A24;
  --color-brand-blue: #191C35;
  --color-brand-cream: #F4EFE6;

  /* Neutres */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-bg-body: #D1D5DB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;

  /* Typographie */
  --font-heading: 'Articulat CF Normal', sans-serif;
  --font-body: 'Articulat CF Normal', sans-serif;

  /* Échelle de profondeur — voir § 3 */
  --z-deco: 0;
  --z-content: 1;
  --z-float: 2;
  --z-badge: 3;
  --z-header: 50;
}
@font-face {
  font-family: 'Articulat CF Normal';
  src: url('./Articulat\ CF\ Normal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   2. RESET & BASES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-brand-cream);
  color: var(--color-brand-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  /* Empêche le scroll horizontal dû aux formes en position absolue */
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
img.equipe{
  height: auto;
    margin-top: 47vh;
    width: 28vw;
}
/* Les SVG bruts sont bridés pour qu'un SVG sans dimensions n'occupe pas
   toute la largeur. Les décors (.bg-deco) sont exemptés — voir § 3 et § 4. */
svg {

  
  height: auto;
}
.svg-background {
  position: absolute;
  z-index: 0;
}
.svg-hero{
position: absolute;
    z-index: 0;
    opacity: 0.3;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
}
.svg-hero.eam{
 background-image: url(../assets/horrible.svg);
    top: -52%;
    left: -92px;
}
.container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}


/* ==========================================================================
   3. SYSTÈME DE COUCHES (z-index)
   ==========================================================================

   Trois couches, du fond vers l'avant :

     fond de section   background-color de la section (aucun z-index)
     couche 0          .bg-deco  — décors SVG / formes, derrière le contenu
     couche 1          tout le contenu (texte, images, cartes, boutons)
     couche 2          .bg-deco--front — décor qui passe DEVANT le contenu
     couche 3          badges et étiquettes

   Pour glisser un décor derrière le contenu d'une section :

     <section class="hero-section">
       <svg class="bg-deco" style="top: -5%; left: -10%; width: 40vw;">…</svg>
       <div class="hero-grid"> … contenu … </div>
     </section>

   Le décor doit être un enfant direct de la section (ou d'un bloc en
   position: relative). Attention : les sections marquées overflow: hidden
   rognent ce qui dépasse.
   ========================================================================== */

/* Toute section sert de repère de positionnement à ses décors */
header,
section,
footer {
  position: relative;
}

/* COUCHE 1 — le contenu direct d'une section passe au-dessus des décors.
   Les décors, ciblés par une classe (spécificité supérieure), ne sont pas
   affectés par cette règle et restent en position: absolute. */
header > *,
section > *,
footer > * {
  position: relative;
  z-index: var(--z-content);
}

/* COUCHE 0 — les décors : au-dessus du fond, en dessous du contenu */
.bg-deco,
.custom-shape,
.bg-shape-light,
.shape-bg,
.footer-shape-red,
.footer-shape-yellow {
  position: absolute;
  z-index: var(--z-deco);
  pointer-events: none;
}

/* Un décor SVG n'est pas concerné par le bridage à 50px du § 2 */
.bg-deco,
.bg-deco svg {
  max-width: none;
  height: auto;
}

/* COUCHE 2 — décor volontairement placé DEVANT le contenu */
.bg-deco--front {
  z-index: var(--z-float);
}


/* ==========================================================================
   4. UTILITAIRES & FORMES DÉCORATIVES
   ========================================================================== */

/* Conteneur des <clipPath> SVG (masques des formes arrondies) */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Masques diagonaux */
.clip-diag-left {
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.clip-diag-right {
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

/* Trait « feutre » sous les titres */
.brush-underline {
  position: relative;
  display: inline-block;
  width: 9rem;
}

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

.brush-underline::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--color-brand-teal);
  border-radius: 4px;
}

/* Formes PNG de marque (triangles du diaph, manivelle « éclair ») */
.custom-shape,
.brand-shape {
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Formes de fond très atténuées */
.bg-shape-light {
  opacity: 0.06;
}


/* ==========================================================================
   5. EN-TÊTE & NAVIGATION
   ==========================================================================
   Deux variantes d'en-tête coexistent :
     .site-header — pages internes, collante, contenu dans .container
     .main-header — page d'accueil, pleine largeur
   Tout le reste (logo, liens, menu mobile) est commun.
   ========================================================================== */

.site-header {
  width: 100%;
  background-color: var(--color-brand-cream);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.main-header {
  padding: 1.25rem 2rem;
  display: flex;
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Bandeau de catégorie au-dessus de l'en-tête */
.section-tag {
  padding: 0.75rem 2rem;
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 11px;
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  text-transform: uppercase;
}

/* --- Logo : pictogramme caméra + signature --------------------------------- */
.logo-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--color-brand-dark);
  display: flex;
  flex-direction: column;
}

.brand-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--color-brand-dark);
}

.brand-logo-mark {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

/* --- Navigation bureau ----------------------------------------------------- */
.nav-desktop,
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-brand-dark);
}

.nav-desktop a,
.nav-link {
  transition: color 0.2s ease;
}

.nav-desktop a:hover,
.nav-desktop a.active,
.nav-link:hover,
.nav-link.active {
  color: var(--color-brand-teal);
}

@media (min-width: 768px) {

  .nav-desktop,
  .nav-links {
    display: flex;
  }
}

/* --- Bouton burger --------------------------------------------------------- */
.menu-burger,
.menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-brand-dark);
  cursor: pointer;
}

.menu-toggle {
  font-size: 1.25rem;
}

@media (min-width: 768px) {

  .menu-burger,
  .menu-toggle {
    display: none;
  }
}

/* --- Navigation mobile (panneau déroulant) --------------------------------- */
.nav-mobile {
  display: none;
  flex-direction: column;
  padding-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-mobile.is-open {
  display: flex;
}

.nav-mobile a {
  padding: 0.75rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-brand-dark);
  transition: color 0.2s ease;
}

.nav-mobile a:hover,
.nav-mobile a.active {
  color: var(--color-brand-teal);
}

/* L'en-tête de l'accueil n'utilise pas .container : on reprend son padding */
.nav-mobile-pad {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 768px) {
  .nav-mobile {
    display: none !important;
  }
}


/* ==========================================================================
   6. BOUTONS
   ========================================================================== */
.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-brand-teal);
  color: var(--color-white);
  border: 2px solid var(--color-brand-teal);
}

.btn-primary:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-brand-dark);
  border: 2px solid var(--color-brand-dark);
}

.btn-outline:hover {
  background-color: var(--color-brand-dark);
  color: var(--color-white);
}

/* Bouton rond à icône (accueil) */
.btn-icon-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid var(--color-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-dark);
  transition: background-color 0.2s, color 0.2s;
}

.btn-icon-circle:hover {
  background-color: var(--color-brand-dark);
  color: var(--color-white);
}

.btn-icon-circle i {
  font-size: 0.75rem;
}


/* ==========================================================================
   7. BANDEAU « SOUTIENS »
   ========================================================================== */
.supporters-section {
  background-color: var(--color-brand-cream);
  padding: 2.5rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.supporters-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.supporters-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  text-align: center;
}

.supporters-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}

.supporter-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
}

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

/* Placeholder typographique tant que le fichier logo n'est pas fourni */
.supporter-name {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-brand-dark);
  opacity: 0.75;
}

.supporter-item.is-featured {
  height: 4.25rem;
}

.supporter-item.is-featured .supporter-name {
  font-size: 1rem;
  opacity: 1;
}

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


/* ==========================================================================
   8. PIED DE PAGE
   ========================================================================== */
.footer-section {
  background-color: var(--color-brand-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

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

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3rem;
}

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

/* --- Colonne marque -------------------------------------------------------- */
.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .footer-col-brand {
    grid-column: span 5 / span 5;
  }
}

.footer-brand-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.footer-brand-mark {
  width: 144px;
  height: auto;
  flex-shrink: 0;
  filter: invert(1);
  /* le pictogramme est noir : on l'inverse sur fond sombre */
}

.footer-brand-desc {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  line-height: 1.625;
  max-width: 20rem;
}

/* --- Coordonnées ----------------------------------------------------------- */
.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-gray-400);
}

.footer-contact li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.footer-contact i {
  color: var(--color-brand-teal);
  width: 0.9rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.footer-contact a {
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: var(--color-white);
}

.footer-contact strong {
  color: var(--color-gray-300);
  font-weight: 700;
}

/* --- Liens rapides --------------------------------------------------------- */
.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .footer-col-links {
    grid-column: span 4 / span 4;
  }
}

.footer-title-sm {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-300);
  margin-bottom: 0.75rem;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-gray-400);
  font-weight: 500;
}

.footer-nav-list a {
  transition: color 0.2s ease;
}

.footer-nav-list a:hover {
  color: var(--color-white);
}

/* --- Réseaux sociaux ------------------------------------------------------- */
.footer-col-social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .footer-col-social {
    grid-column: span 3 / span 3;
  }
}

.footer-social-icons {
  display: flex;
  gap: 1rem;
  font-size: 1.25rem;
}

.footer-social-icons a {
  transition: color 0.2s ease;
}

.footer-social-icons a:hover {
  color: var(--color-brand-teal);
}

/* --- Formes décoratives du pied de page ------------------------------------ */
.footer-shape-red {
  bottom: 0;
  right: 0;
  width: 12rem;
  height: 6rem;
  background-color: var(--color-brand-red);
  opacity: 0.9;
  clip-path: url(#clip-rounded-triangle-up);
}

.footer-shape-yellow {
  bottom: 0;
  right: 5rem;
  width: 8rem;
  height: 4rem;
  background-color: var(--color-brand-yellow);
  clip-path: url(#clip-rounded-triangle-up);
}


/* ==========================================================================
   9. PAGE D'ACCUEIL — body.page-home
   ========================================================================== */
.page-home {
  background-color: var(--color-bg-body);
}

/* --- Hero ------------------------------------------------------------------ */
.page-home .hero-section {
  background-color: var(--color-brand-cream);
  color: var(--color-brand-dark);
  overflow: hidden;
}

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

@media (min-width: 1024px) {
  .page-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;
  }
}

.page-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) {
  .page-home .hero-title {
    font-size: 2.25rem;
  }
}

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

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

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

@media (min-width: 640px) {
  .page-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;
}

/* --- Composition de formes & photos (colonne droite) ----------------------- */
.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;
  }
}

.shape-teal-triangle {
  top: -1.5rem;
  left: 0.5rem;
  width: 7rem;
  transform: rotate(-12deg);
}

.shape-yellow-hexagon {
  bottom: 2.5rem;
  left: -1rem;
  width: 2.25rem;
}

.shape-red-triangle {
  top: -2.5rem;
  right: 4rem;
  width: 10rem;
  transform: rotate(12deg);
}

.shape-dot-grid {
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.25rem;
  color: rgba(232, 74, 66, 0.7);
  font-size: 8px;
}

/* Ce décor-ci passe volontairement DEVANT les cartes */
.shape-yellow-triangle {
  bottom: -1rem;
  right: -1.5rem;
  width: 3.25rem;
  transform: rotate(180deg);
  z-index: var(--z-float);
}

/* --- 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;
  cursor: pointer;
  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);
}

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

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

.card-shape-accent-teal {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  width: 7rem;
  height: 7rem;
  background-color: var(--color-brand-teal);
  clip-path: url(#clip-rounded-triangle-up);
}

.card-shape-accent-red {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 8rem;
  height: 8rem;
  background-color: var(--color-brand-red);
  transform: rotate(12deg);
  clip-path: url(#clip-rounded-triangle-up);
}

.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 {
  font-size: 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);
}

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

.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 {
  font-size: 0.75rem;
}

/* --- 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);
}

@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);
}

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

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


/* ==========================================================================
   10. PAGES DE PÔLE — body.page-pole (EAM + Productions)
   ========================================================================== */

/* --- Formes décoratives du hero -------------------------------------------- */
.hero-shape-1 {
  width: 32vw;
  top: -52%;
  right: -2%;
  opacity: 0.2;
  transform: rotate(45deg);
  filter: drop-shadow(2px 4px 6px black);
}

.hero-shape-2 {
  width: 54vw;
  bottom: -38%;
  left: -28%;
  opacity: 0.1;
  transform: rotate(9deg);
  filter: drop-shadow(2px 4px 6px black);
}

.hero-shape-3 {
  width: 12vw;
  bottom: -10%;
  right: 15%;
  transform: rotate(-15deg);
  filter: drop-shadow(2px 4px 6px black);
}

.hero-shape-4 {
  width: 130vh;
  top: -16%;
  left: 25%;
  opacity: 0.1;
  transform: rotate(134deg);
  filter: drop-shadow(2px 4px 6px black);
}

.bg-shape-ateliers {
  width: 35vw;
  top: 5%;
  left: -10%;
  transform: rotate(-10deg);
}

.bg-shape-zones {
  width: 20vw;
  bottom: -5%;
  right: -5%;
  transform: rotate(45deg);
}

.bg-shape-process {
  width: 18vw;
  top: 20%;
  left: 45%;
  transform: rotate(180deg);
}

/* --- Hero ------------------------------------------------------------------ */
.page-pole .hero-section,
.page-empty .hero-section {
  padding-top: 3rem;
  position: relative;
}

@media (min-width: 1024px) {

  .page-pole .hero-section,
  .page-empty .hero-section {
    padding-top: 4rem;
  }
}

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

@media (min-width: 1024px) {

  .page-pole .hero-grid,
  .page-empty .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;
}

.page-pole .hero-title,
.page-empty .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) {

  .page-pole .hero-title,
  .page-empty .hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {

  .page-pole .hero-title,
  .page-empty .hero-title {
    font-size: 3.75rem;
  }
}

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

.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%;
  margin-bottom: -25vh;
  opacity: 83%;
  min-height: 68vh;
  background-size: cover;
  background-position: center;
}

/* --- 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);
}

/* 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);
}

/* --- Grille bento (ateliers / productions) --------------------------------- */
.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%;
}

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

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

/* --- Étiquettes ------------------------------------------------------------ */
.badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  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;
}

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

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

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

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

/* --- Contenu superposé aux visuels ----------------------------------------- */
.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);
}

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

/* Icône en filigrane géant */
.atelier-icon-num i {
  font-size: 30rem;
  font-weight: 900;
  opacity: 0.1 !important;
  color: var(--color-white) !important;
  top: -14%;
  position: absolute;
}

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

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

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

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

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

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

/* --- Comment ça se passe ? ------------------------------------------------- */
.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;
}

@media (min-width: 768px) {
  .process-step:not(:last-child)::after {
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 1rem;
    right: -1rem;
    color: rgba(0, 0, 0, 0.1);
    font-size: 1.25rem;
  }
}

/* --- CTA final ------------------------------------------------------------- */
.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;
  }
}

.cta-final-title span {
  color: var(--color-brand-teal);
}

/* Second encadré : accent jaune pour le distinguer du premier */
.cta-final-section.cta-final-alt .cta-final-title span {
  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;
}


/* --- Objectifs : blocs transparents surmontés 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 transparent : la couleur de page — ou un décor SVG — reste visible */
.mission-card {
background-color: #ffffff29;
    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);
}

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


/* ==========================================================================
   11. SPÉCIFIQUE ÉDUCATION AUX MÉDIAS — body.page-eam
   ========================================================================== */
.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);
}

.zone-card.bw {
  border-color: var(--color-brand-red);
}

.zone-card.lge {
  border-color: var(--color-brand-yellow);
}

.zone-card.nmr {
  border-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;
}

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


/* ==========================================================================
   12. SPÉCIFIQUE PRODUCTIONS — body.page-prod
   ========================================================================== */

/* Visuel hero rectangulaire (et non détouré comme sur la page EAM) */
.page-prod .hero-image-box {
  margin-bottom: 0;
  min-height: 30rem;
  opacity: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  filter: none;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.55);
  /* REMPLACER par un visuel Citizen Motion */
  background-image: url('https://images.unsplash.com/photo-1601506521937-0121a7fc2a6b?auto=format&fit=crop&w=1200&q=80');
}


/* ==========================================================================
   13. PAGES EN CONSTRUCTION — body.page-empty
   ========================================================================== */
.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 {
  font-size: 1.75rem;
  color: var(--color-brand-teal);
  margin-bottom: 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;
}

/* Pas de visuel sur ces pages : le texte occupe une colonne plus large */
.page-empty .hero-visual {
  display: none;
}

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

/* Cette forme viendrait se poser sur le texte, le hero étant plus court ici */
.page-empty .hero-shape-3 {
  display: none;
}


/* ==========================================================================
   14. PAGE ASSOCIATION — body.page-assoc
   ==========================================================================
   Cette page réutilise l'ossature des pages de pôle (§ 10) : hero, titres de
   section, bloc « process » (détourné en axes stratégiques) et CTA final.
   Ne sont définis ici que ses blocs propres — frise, mission, valeurs,
   bandeau défilant, équipe, soutien, partenaires institutionnels.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.page-assoc .hero-section {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

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

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

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

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

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

.page-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) {
  .page-assoc .hero-title {
    font-size: 3rem;
  }
}

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

.page-assoc .hero-title span {
  color: var(--color-brand-teal);
}

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

/* --- 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);
}

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

/* --- Rythme des sections de la page ---------------------------------------- */
.assoc-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* --- Mission & valeurs ----------------------------------------------------- */
.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-quote span {
  color: var(--color-brand-teal);
}

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

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

/* --- 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;
}

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

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

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-inner {
    animation: none;
  }
}

/* --- L'é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);
}

/* Aplat de marque, en attendant les portraits de l'équipe */
.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;
}

.team-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, currentColor 0%, transparent 60%);
  opacity: 0.18;
}

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

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

/* --- Ils nous font confiance (Fondation Bernheim) -------------------------- */
.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 {
  max-width: 190px;
  width: 100%;
}

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

.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-quote span {
  color: var(--color-brand-teal);
}

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

/* --- 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);
}