.cl-culture { position: relative; isolation: isolate; overflow-x: clip; padding: 104px 16px 0; font-family: var(--ha-sans); color: var(--ha-noir); }

/* 1. L'en-tête, comme celui du carnet de route */
.cl-tete { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 960px; margin: 0 auto; text-align: center; }
.cl-tete-decor { position: absolute; z-index: -1; left: 50%; top: -56px; width: 1400px; height: 300px; margin-left: -700px; pointer-events: none; }
.cl-tete-decor svg { display: block; width: 100%; height: 100%; }
.cl-kicker { font-size: 14px; letter-spacing: .02em; }
.cl-titre { margin: 18px 0 0; font-weight: 900; font-size: 54px; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }

/* 2. Les quatre cartes : deux par deux, gris clair, l'illustration sur une feuille blanche pointée */
.cl-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1280px; margin: 48px auto 0; padding: 0; list-style: none; }
.cl-carte { display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 34px; border-radius: 28px; background: var(--ha-fond); color: var(--ha-noir); outline: none; }
.cl-carte:focus-visible { box-shadow: 0 0 0 2px var(--ha-fond), 0 0 0 4px var(--ha-noir); }
.cl-visuel {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 20px; background-color: var(--ha-blanc);
  background-image: radial-gradient(circle, rgba(24, 25, 27, .085) 1px, transparent 1.3px);
  background-size: 18px 18px; background-position: center;
}
.cl-dessin { position: absolute; left: 4%; top: 7%; display: block; width: 92%; height: 86%; overflow: visible; }
.cl-carte-titre { margin: 28px 22px 0; font-weight: 700; font-size: 28px; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.cl-carte-texte { margin: 12px 22px 0; max-width: 36em; font-size: 17px; line-height: 1.55; color: var(--ha-texte-2); text-wrap: pretty; }

/* 3. Les éléments du dessin : leur centre pour toute transformation */
.cl-dessin .cl-apparait, .cl-dessin .cl-allume, .cl-dessin .cl-onde { transform-box: fill-box; transform-origin: center; }
.cl-dessin .cl-remplit { transform-box: fill-box; transform-origin: left center; }
.cl-dessin .cl-onde { opacity: 0; }   /* l'onde n'existe qu'en mouvement : l'image finale ne la montre pas */

.cl-pret .cl-carte:not(.cl-joue) .cl-trace { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cl-pret .cl-carte:not(.cl-joue) .cl-apparait, .cl-pret .cl-carte:not(.cl-joue) .cl-allume { opacity: 0; }
.cl-pret .cl-carte:not(.cl-joue) .cl-remplit { transform: scaleX(0); }

/* le mouvement réduit : l'image finale, même si le script a posé ses classes */
@media (prefers-reduced-motion: reduce) {
  .cl-pret .cl-carte .cl-trace { stroke-dasharray: none; stroke-dashoffset: 0; }
  .cl-pret .cl-carte .cl-apparait, .cl-pret .cl-carte .cl-allume { opacity: 1; }
  .cl-pret .cl-carte .cl-remplit { transform: none; }
}

/* 5. Les tailles */
@media (max-width: 1024px) {
  .cl-carte-titre { font-size: 24px; }
  .cl-carte-texte { font-size: 16px; }
}
@media (max-width: 760px) {
  .cl-culture { padding: 72px 8px 0; }
  .cl-tete-decor { top: -40px; width: 900px; height: 200px; margin-left: -450px; }
  .cl-titre { font-size: 36px; }
  .cl-grille { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-top: 32px; gap: 10px; }
  .cl-carte { padding-bottom: 26px; border-radius: 24px; }
  .cl-visuel { aspect-ratio: 16 / 10; border-radius: 16px; }
  .cl-carte-titre { margin: 22px 14px 0; font-size: 23px; }
  .cl-carte-texte { margin: 10px 14px 0; }
}