/* =========================================================
   GOLDEN CONFLUENCE — témoignages « é & »
   =========================================================
   Le <style> de temoignages-ampersand.html, repris tel quel,
   mais SCOPÉ sous .temoins-amp. Le fichier d'origine portait
   un reset « * { margin:0; padding:0 } » et une règle sur
   <body> : appliqués globalement, ils démolissaient l'en-tête
   et le pied du site. Ici, rien ne sort du bloc.

   Polices : Cinzel, Cormorant Garamond (dont l'italique) et
   Great Vibes, servies en local par polices.css. Aucun appel
   à fonts.googleapis.com — la règle de vie privée du site
   vaut aussi pour cette page.

   Deux emplois :
     .temoins-amp--page     /temoignages.html — bannière &,
                            section, pied signature
     .temoins-amp--section  l'accueil — section seule, pas de
                            grand & décoratif sous l'en-tête
   ========================================================= */
.temoins-amp {
  --navy: #070b14;
  --gold: #d4b45c;
  --gold-soft: #e8d39a;
  --cream: #f3e6c0;
  --muted: #8b95a8;
  --line: rgba(212, 180, 92, 0.22);
  font-family: Outfit, system-ui, sans-serif;
  color: var(--cream);
}
.temoins-amp *, .temoins-amp *::before, .temoins-amp *::after { box-sizing: border-box; }
/* Le fichier appelait ce conteneur « .page » — nom déjà pris par
   base.css pour la page entière. Renommé, sinon les deux se marchent
   dessus. */
.temoins-amp__page { max-width: 1160px; margin: 0 auto; padding: 24px 20px 80px; }
.temoins-amp h1, .temoins-amp h2, .temoins-amp p,
.temoins-amp blockquote, .temoins-amp figure { margin: 0; padding: 0; }

/* ---------- é calligraphié ---------- */
.temoins-amp .e {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
  display: inline;
}
.temoins-amp h1 .e,
.temoins-amp h2 .e {
  font-size: 1.08em;
  padding: 0 0.02em;
  text-shadow: 0 0 18px rgba(212, 180, 92, 0.25);
}

/* ---------- & calligraphié ---------- */
.temoins-amp .amp {
  font-family: "Great Vibes", "Cormorant Garamond", cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--gold);
  line-height: 0;
  display: inline-block;
}

/* ---------- Bannière ---------- */
.temoins-amp .banner {
  position: relative;
  overflow: hidden;
  padding: 64px 48px 52px;
  text-align: center;
  background:
    radial-gradient(720px 180px at 50% -10%, rgba(212, 180, 92, 0.13), transparent 62%),
    linear-gradient(180deg, #0c1424, #070b14);
  border: 1px solid var(--line);
  border-bottom: none;
}
.temoins-amp .amp-abs {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(140px, 22vw, 240px);
  color: rgba(212, 180, 92, 0.10);
  pointer-events: none;
  user-select: none;
  line-height: 0.8;
  z-index: 0;
}
.temoins-amp .banner .inner { position: relative; z-index: 1; }
.temoins-amp .banner .mark {
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.temoins-amp .banner h1 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.35vw, 46px);
  margin: 18px auto 16px;
  line-height: 1.15;
  color: var(--cream);
  white-space: nowrap;
}
.temoins-amp .banner h1 .amp {
  font-style: normal;
  font-size: 1.15em;
  margin: 0 0.18em;
  transform: translateY(0.08em);
}
.temoins-amp .banner p {
  color: #b7c0d0;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------- Le bloc principal ----------
   Le fichier l'appelait « .section » : nom déjà pris par base.css
   pour les sections du site. Renommé .amp-bloc, rendu identique. */
.temoins-amp .amp-bloc {
  background: var(--navy);
  border: 1px solid var(--line);
  border-top: none;
  padding: 48px 48px 28px;
}
.temoins-amp .eyebrow {
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
}
.temoins-amp .rule { width: 42px; height: 1px; background: var(--gold); margin: 14px 0 16px; opacity: 0.7; }
.temoins-amp .section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--cream);
  margin-bottom: 22px;
}
.temoins-amp .disclaimer {
  border: 1px dashed rgba(212, 180, 92, 0.28);
  border-radius: 999px;
  padding: 10px 18px;
  color: #8b95a8;
  font-size: 13px;
  margin: 0 0 28px;
}

/* ---------- Les trois cartes ---------- */
.temoins-amp .grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  gap: 16px;
}
.temoins-amp .card {
  background: rgba(12, 19, 34, 0.72);
  border: 1px solid rgba(212, 180, 92, 0.16);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.temoins-amp .card.featured { padding: 26px; }
.temoins-amp .who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.temoins-amp .who img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
}
.temoins-amp .card.featured .who img { width: 68px; height: 68px; }
.temoins-amp .who strong {
  display: block; font-family: Cinzel, serif; font-weight: 500;
  font-size: 14px; letter-spacing: 0.04em; color: var(--cream);
}
.temoins-amp .who span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.temoins-amp .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; margin: 0 0 12px; }
.temoins-amp .stars .dim { opacity: 0.28; }
.temoins-amp blockquote {
  font-family: "Cormorant Garamond", serif;
  font-size: 19px; line-height: 1.35; color: var(--cream); margin-bottom: 12px;
}
.temoins-amp .card.featured blockquote { font-size: 23px; }
.temoins-amp .body { color: #9aa3b5; font-size: 14px; line-height: 1.65; flex: 1; }
.temoins-amp .tag {
  margin-top: 16px; font-family: Cinzel, serif; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft);
  border: 1px solid rgba(212, 180, 92, 0.28); border-radius: 999px;
  padding: 6px 10px; width: max-content;
}

/* ---------- Appel ---------- */
.temoins-amp .cta-wrap { text-align: center; margin: 32px 0 8px; }
.temoins-amp .cta {
  display: inline-flex; text-decoration: none; color: var(--cream);
  border: 1px solid rgba(212, 180, 92, 0.45); padding: 13px 22px;
  font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.temoins-amp .cta:hover { border-color: var(--gold); background: rgba(212, 180, 92, 0.08); }
.temoins-amp .cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Pied signature ---------- */
.temoins-amp .sign {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 36px 20px 42px;
  border: 1px solid var(--line);
  border-top: none;
  background: linear-gradient(180deg, #070b14, #0a101c);
}
.temoins-amp .sign .amp-abs {
  top: auto; bottom: -48px;
  font-size: 160px;
  color: rgba(212, 180, 92, 0.08);
}
.temoins-amp .sign .brand {
  position: relative; z-index: 1;
  font-family: Cinzel, serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.temoins-amp .sign .brand .amp {
  font-size: 42px;
  transform: translateY(2px);
}
.temoins-amp .sign .sign-line {
  position: relative; z-index: 1;
  display: block;
  margin-top: 14px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--cream);
  letter-spacing: 0;
  text-transform: none;
}
.temoins-amp .sign small {
  position: relative; z-index: 1;
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- L'accueil : la section seule ----------
   Pas de bannière, donc pas de bord coupé en haut : la
   section reprend son filet complet et ses coins. */
.temoins-amp--section .amp-bloc {
  border-top: 1px solid var(--line);
  border-radius: 16px;
}

/* ---------- Mobile (seuil du fichier) ---------- */
@media (max-width: 900px) {
  .temoins-amp .banner,
  .temoins-amp .amp-bloc { padding: 32px 20px; }
  .temoins-amp .grid { grid-template-columns: 1fr; }
  .temoins-amp .banner h1,
  .temoins-amp .section-head h2 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .temoins-amp .cta { transition: none; }
}
