/* =========================================================
   GOLDEN CONFLUENCE — accueil public (index.html seulement)
   =========================================================
   Navy #030814, or #E8C56A. Chargé par index.html uniquement :
   les autres pages du site gardent leurs couleurs. L'écran
   d'entrée (#gate), l'en-tête et l'anneau vidéo ne sont pas
   restylés ici.
   ========================================================= */
body.a-gate:has(.accueil) {
  --or: #E8C56A;
  --or-clair: #f1d98f;
  background-color: #030814;
}

.accueil { --acc-navy: #030814; --acc-or: #E8C56A; }
.or-nom { color: var(--acc-or); }

/* --- Icônes : trait or 1.4, 36 px ------------------------ */
.acc-ico { display: block; width: 36px; height: 36px; color: var(--acc-or); }

/* --- 1. Héros ------------------------------------------- */
.accueil__h1 {
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.4vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.accueil__h1 em { display: block; font-style: italic; color: var(--acc-or); }
.accueil__refus {
  margin: -0.3rem 0 2rem;
  color: var(--acc-or);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.accueil .heros__actions { margin-bottom: 1.6rem; }
.accueil__risque { max-width: 52ch; margin: 0; color: var(--texte-doux); font-size: 0.8rem; line-height: 1.55; }

/* --- 2. Quatre piliers : 4 / 2 / 1 ----------------------- */
.piliers4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 1080px) { .piliers4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .piliers4 { grid-template-columns: 1fr; } }
.pilier4 {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 22px;
  background: rgba(12, 23, 40, 0.7);
  border: 1px solid rgba(232, 197, 106, 0.16);
  border-radius: 16px;
}
.pilier4__ico {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 1px solid rgba(232, 197, 106, 0.3);
  border-radius: 50%;
}
.pilier4 h3 { margin: 6px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.pilier4 p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.6; }
.pilier4 .pilier4__ligne { color: var(--acc-or); font-size: 0.88rem; }

/* --- 3. Sans ces fondements : 2 colonnes ----------------- */
.deux-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 880px) { .deux-col { grid-template-columns: 1fr; } }

/* --- 4. Qui sommes-nous — la légende --------------------- */
.legende__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.legende__titre {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
}
.legende__texte p { color: var(--texte); font-size: 1.02rem; line-height: 1.75; }
.legende__chute { color: var(--ivoire) !important; font-family: var(--serif); font-size: 1.22rem !important; }
.legende__lien { margin-top: 1.8rem; }

/* Mobile : l'image AU-DESSUS du texte, 56 vw de haut au plus. */
@media (max-width: 880px) {
  .legende__grille { grid-template-columns: 1fr; }
  .ph--rainman { max-height: 56vw; }
}

/* --- 5. Le système --------------------------------------- */
.systeme .entete-section { margin-bottom: clamp(40px, 5vw, 64px); }
.systeme__pieces { gap: clamp(26px, 3.4vw, 44px); }
.systeme__pieces .pilier { gap: 1rem; }
.systeme__liens { margin-top: clamp(40px, 5vw, 64px); }

/* --- 6. Témoignages -------------------------------------- */
.avis__bandeau {
  margin: -1.6rem 0 2rem;
  padding: 10px 14px;
  border: 1px dashed rgba(232, 197, 106, 0.45);
  border-radius: 10px;
  color: var(--acc-or);
  font-size: 0.84rem;
}
.avis__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.avis {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  background: rgba(12, 23, 40, 0.7);
  border: 1px solid rgba(232, 197, 106, 0.16);
  border-radius: 14px;
}
.avis__initiale {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(232, 197, 106, 0.4);
  border-radius: 50%;
  color: var(--acc-or);
  font-family: "Cormorant Garamond", var(--serif);
  font-size: 1.3rem;
}
.avis__texte { margin: 0; color: var(--ivoire); font-family: var(--serif); font-size: 1.22rem; line-height: 1.45; }
.avis__qui { margin: 0; color: var(--texte-doux); font-size: 0.86rem; }
.avis__qui b { color: var(--acc-or); font-weight: 400; margin-right: 4px; }

/* --- 7. Partenaires : 4 emplacements --------------------- */
.partenaires { text-align: center; }
.partenaires .surtitre { margin-bottom: 1.4rem; }
.partenaires__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 760px) { .partenaires__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   Emplacements d'image — <figure class="ph">
   =========================================================
   Image présente : elle remplit le cadre. Image absente
   (data-vide, posé par onerror et par site.js) : cadre tireté
   or « Image à déposer », jamais d'icône d'image cassée. */
.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(12, 23, 40, 0.5);
}
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph figcaption .ph__vide { display: none; }
.ph figcaption:not(:has(.ph__legende)) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ph[data-vide="true"] {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(232, 197, 106, 0.55) !important;
  background: rgba(232, 197, 106, 0.03);
}
.ph[data-vide="true"]::after { display: none; }
.ph[data-vide="true"] img { display: none; }
.ph[data-vide="true"] figcaption {
  position: static !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  padding: 10px;
  background: none;
  text-align: center;
}
.ph[data-vide="true"] .ph__legende { display: none; }
.ph[data-vide="true"] .ph__vide {
  display: block;
  color: var(--acc-or, #E8C56A);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.ph--large { aspect-ratio: 4 / 3; }
.ph--logo { aspect-ratio: 3 / 2; border-radius: 10px; }
.ph--logo img { object-fit: contain; padding: 12%; }
.ph--logo[data-vide="true"] .ph__vide { font-size: 0.64rem; }

/* Rain Man : coins 20 px, filet or 30 %, cover, 520 px au plus,
   voile bas navy 40 % et légende or posée dessus. */
.ph--rainman {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  border-radius: 20px;
  border: 1px solid rgba(232, 197, 106, 0.3);
}
.ph--rainman img { object-fit: cover; object-position: 50% 30%; }
.ph--rainman::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(3, 8, 20, 0), rgba(3, 8, 20, 0.4));
  pointer-events: none;
}
.ph--rainman figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 16px 20px;
}
.ph--rainman .ph__legende {
  color: var(--acc-or);
  font-family: "Cormorant Garamond", var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

/* Vidéo de la légende : sous le texte, filet or, 420 px au plus.
   Carrée à la source : cover la recadre sans bande noire. */
.ph--video {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 420px;
  margin: 2rem 0 0;
  border-radius: 20px;
  border: 1px solid rgba(232, 197, 106, 0.3);
  background: #030814;
}
.ph--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--video[data-vide="true"] video { display: none; }