.calendrier {
  background: var(--gris-fond);
  padding-block: 88px;
}

/* Disposition en deux colonnes : visuel (croix d'Agadez) + cartes */
.calendrier__disposition {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 40px;
  align-items: center;
}

.calendrier__visuel {
  text-align: center;
}

.calendrier__visuel img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

/* Grille de cartes « épinglées », en quinconce sur 2 colonnes */
.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 20px;
}

.calendrier__carte-etape:nth-child(odd) {
  --inclinaison: -2.5deg;
}

.calendrier__carte-etape:nth-child(even) {
  margin-top: 64px;
  --inclinaison: 2.5deg;
}

/* Carte façon note autocollante épinglée — photo en fond, superposée d'un
   dégradé dans la couleur de l'étape (même principe que le hero), coins
   presque francs, légèrement inclinée, ombre portée décalée comme un vrai
   papier soulevé de la planche. */
.calendrier__carte-etape {
  position: relative;
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--couleur-etape) 88%, transparent) 0%,
      color-mix(in srgb, var(--couleur-etape) 68%, transparent) 100%),
    var(--image-etape);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  box-shadow: 10px 14px 22px rgba(0, 0, 0, 0.2);
  padding: 32px 24px 26px;
  overflow: hidden;
  transform: rotate(var(--inclinaison));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calendrier__carte-etape:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 12px 20px 30px rgba(0, 0, 0, 0.26);
}

/* Épingle façon punaise ronde et brillante — reste verticale (contre-rotation
   de l'inclinaison de la note) avec une ombre pointue sous la tête, comme
   une vraie punaise plantée dans le papier. */
.calendrier__epingle {
  position: absolute;
  top: -22px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%) rotate(calc(var(--inclinaison) * -1));
  z-index: 1;
}

.calendrier__epingle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--couleur-etape) 55%, white) 0%,
    var(--couleur-etape) 55%,
    color-mix(in srgb, var(--couleur-etape) 65%, black) 100%);
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.25),
    inset 2px 2px 3px rgba(255, 255, 255, 0.5);
}

.calendrier__epingle::after {
  content: "";
  position: absolute;
  top: 78%;
  left: 66%;
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0.28);
  clip-path: polygon(0 0, 100% 30%, 30% 100%);
  filter: blur(1px);
  z-index: -1;
}

.calendrier__numero-etape {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
}

.calendrier__icone-etape {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-etape);
  margin-bottom: 16px;
}

.calendrier__icone-etape svg {
  width: 22px;
  height: 22px;
}

.calendrier__date-etape {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}

.calendrier__titre-etape {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 17px;
  color: var(--blanc);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.calendrier__texte-etape {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Couleurs et photos — couleurs exclusivement issues de la palette du site */
.calendrier__carte-etape--1 {
  --couleur-etape: var(--vert-institutionnel);
  --image-etape: url("../img/card1.jpg");
}

.calendrier__carte-etape--2 {
  --couleur-etape: var(--orange);
  --image-etape: url("../img/card2.jpg");
}

.calendrier__carte-etape--3 {
  --couleur-etape: var(--bleu-fleuve);
  --image-etape: url("../img/card3.jpg");
}

.calendrier__carte-etape--4 {
  --couleur-etape: var(--vert-clair);
  --image-etape: url("../img/card4.jpg");
}

.calendrier__carte-etape--5 {
  --couleur-etape: var(--dore);
  --image-etape: url("../img/card5.jpg");
}

.calendrier__carte-etape--6 {
  --couleur-etape: var(--vert-fonce);
  --image-etape: url("../img/card6.jpg");
}

@media (max-width: 720px) {
  .calendrier__grille {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .calendrier__carte-etape:nth-child(even) {
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  .calendrier__disposition {
    grid-template-columns: 1fr;
  }
}