/* ============================================
   Composants partagés (DA validée sur témoins)
   ============================================ */

/* --- Pilules --- */
.pilule {
  display: inline-block;
  font-family: var(--f-corps);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px 13px;
  border-radius: var(--r-pilule);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  white-space: nowrap;
}
.pilule:hover { transform: translateY(-3px) scale(1.03); }
.pilule--terracotta {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(237, 104, 65, 0.7);
}
.pilule--peche { background: var(--peche); color: var(--encre); }
.pilule--blanche { background: #fff; color: var(--encre); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45); }
.pilule--encre { background: var(--encre); color: #fff; box-shadow: 0 12px 26px -14px rgba(30, 31, 32, 0.6); }

/* --- Section-carte flottante --- */
.section-carte {
  position: relative;
  max-width: var(--largeur);
  margin: 72px auto;
  border-radius: var(--r-section);
  padding: 88px 72px 80px;
  box-shadow: 0 30px 60px -25px rgba(30, 31, 32, 0.16), 0 12px 30px -18px rgba(30, 31, 32, 0.10);
}
.section-carte--peche { background: var(--peche-fond); box-shadow: 0 30px 60px -25px rgba(237, 104, 65, 0.28), 0 12px 30px -18px rgba(30, 31, 32, 0.12); }
.section-carte--rose { background: var(--rose); }
.section-carte--sauge { background: var(--sauge); }
.section-carte--blanche { background: #fff; }
.section-carte--terracotta { background: var(--terracotta); color: #fff; }

/* --- Stickers manuscrits --- */
.sticker {
  position: absolute;
  font-family: var(--f-script);
  font-weight: 600;
  border-radius: var(--r-pilule);
  padding: 10px 24px 12px;
  box-shadow: 0 14px 28px -12px rgba(30, 31, 32, 0.35);
  z-index: 2;
  white-space: nowrap;
}
.sticker--terracotta { background: var(--terracotta); color: #fff; font-size: 27px; box-shadow: 0 14px 28px -12px rgba(237, 104, 65, 0.55); }
.sticker--blanc { background: #fff; color: var(--encre); font-size: 24px; }
.sticker--peche { background: var(--peche-fond); color: var(--encre); font-size: 26px; }
.sticker--jaune { background: var(--jaune); color: var(--encre); font-size: 25px; }

/* --- En-tête de section --- */
.entete { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.entete--gauche { margin: 0 0 40px; text-align: left; }

.surtitre {
  font-family: var(--f-script);
  font-size: 34px;
  font-weight: 600;
  color: var(--terracotta);
  display: block;
  transform: rotate(-2deg);
  margin-bottom: 6px;
}
.surtitre--blanc { color: #fff; }
.surtitre--vert { color: var(--vert); }

.titre {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: 0.5px;
}
.titre--s { font-size: 40px; }

.souligne { position: relative; white-space: nowrap; }
.souligne::after {
  content: '';
  position: absolute;
  left: 2%;
  right: -2%;
  bottom: 2px;
  height: 7px;
  background: var(--terracotta);
  border-radius: 99px;
  transform: rotate(-1.2deg);
}
.souligne--blanc::after { background: #fff; }
.souligne--jaune::after { background: var(--jaune); }

.sous-titre { margin-top: 20px; font-size: 18px; line-height: 1.5; color: var(--brun-doux); }

/* --- Carte blanche générique --- */
.carte {
  position: relative;
  background: #fff;
  border-radius: var(--r-carte);
  box-shadow: 0 18px 40px -22px rgba(30, 31, 32, 0.18);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.carte:hover {
  transform: translateY(-10px) rotate(-0.4deg);
  box-shadow: 0 34px 60px -24px rgba(30, 31, 32, 0.26);
}

/* média à coin organique (alterner via --organique-inverse) */
.media-organique {
  border-radius: var(--r-media) var(--r-media) 120px var(--r-media);
  overflow: hidden;
}
.media-organique--inverse { border-radius: var(--r-media) var(--r-media) var(--r-media) 120px; }
.media-organique img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.carte:hover .media-organique img, a:hover > .media-organique img { transform: scale(1.045); }

/* --- Responsive commun --- */
@media (max-width: 991px) {
  .section-carte { padding: 72px 40px 64px; }
  .titre { font-size: 44px; }
}
@media (max-width: 767px) {
  .section-carte { margin: 56px 14px; padding: 64px 22px 56px; border-radius: 30px; }
  .titre { font-size: 34px; }
  .titre--s { font-size: 28px; }
  .surtitre { font-size: 28px; }
  .sous-titre { font-size: 16px; }
}