/* ======================================================================
   FULLCODE — PAGES INTERNES
   Dépend de /assets/css/general.css

   Usage :
   - À propos
   - Pages légales
   - Pages éditoriales / contenus standards
   - Pages projets simples
   - Pages de présentation internes

   Les polices, couleurs, header, footer, boutons globaux et utilitaires
   restent définis dans general.css.
   ====================================================================== */


/* ----------------------------------------------------------------------
   PAGE
   ---------------------------------------------------------------------- */

.content-page {
  position: relative;
  padding-top: var(--header-height);
  overflow: hidden;

  background:
    radial-gradient(circle at 88% 7%,
      rgba(138, 36, 118, 0.10),
      transparent 29%),
    radial-gradient(circle at 10% 22%,
      rgba(251, 207, 79, 0.10),
      transparent 27%),
    var(--paper);
}


/* ----------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */

.page-hero {
  position: relative;

  min-height: 64vh;

  padding:
    clamp(105px, 12vw, 165px) clamp(24px, 7vw, 120px) clamp(72px, 9vw, 120px);

  display: grid;
  align-items: end;
}

.page-hero-inner,
.content-section {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.page-kicker {
  margin: 0 0 18px;

  color: var(--plum);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 1050px;
  margin: 0;

  color: var(--purple);

  font-family: var(--font-display);
  font-size: clamp(3.1rem, 4vw, 7rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.page-hero .lead {
  max-width: 760px;
  margin: 30px 0 0;

  color: var(--muted);

  font-size: clamp(1.02rem, 1.55vw, 1.3rem);
  line-height: 1.68;
}


/* ----------------------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------------------- */

.content-section {
  position: relative;

  padding:
    clamp(64px, 8vw, 110px) clamp(24px, 3vw, 42px);

  color: var(--muted);

  font-size: 1rem;
  line-height: 1.75;
}

.content-section+.content-section {
  border-top: 1px solid var(--border-soft);
}

.content-section h2 {
  max-width: 900px;
  margin: 0 0 28px;

  color: var(--purple);

  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 4.2rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.015em;
}

.content-section h3 {
  margin: 0 0 12px;

  color: var(--ink);

  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}



.content-section p:first-child {
  margin-top: 0;
}


/* ----------------------------------------------------------------------
   COLONNES
   ---------------------------------------------------------------------- */

.two-col {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 0.85fr);

  gap: clamp(40px, 8vw, 120px);

  align-items: start;
}


/* ----------------------------------------------------------------------
   CARTES
   ---------------------------------------------------------------------- */

.card-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.info-card,
.project-card,
.contact-card,
.legal-card {
  position: relative;

  padding: clamp(26px, 4vw, 46px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius);

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.80),
      rgba(250, 234, 221, 0.42));

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 50px rgba(47, 30, 51, 0.08);

  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.info-card p,
.project-card p,
.contact-card p,
.legal-card p {
  margin-bottom: 0;
}


/* ----------------------------------------------------------------------
   TAGS
   ---------------------------------------------------------------------- */

.tag-list {
  margin-top: 28px;

  display: flex;
  flex-wrap: wrap;

  gap: 9px;
}

.tag-list span {
  padding: 8px 13px;

  border: 1px solid rgba(138, 36, 118, 0.12);
  border-radius: var(--radius-pill);

  background: rgba(255, 255, 255, 0.62);

  color: var(--purple);

  font-size: 0.78rem;
  font-weight: 600;
}


/* ----------------------------------------------------------------------
   GRILLE PROJETS
   ---------------------------------------------------------------------- */

.project-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.project-card {
  min-height: 330px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-4px);

  border-color: rgba(138, 36, 118, 0.18);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 24px 58px rgba(47, 30, 51, 0.13);
}

.project-card .project-kicker {
  margin-bottom: 10px;

  color: var(--plum);

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.project-card h2,
.project-card h3 {
  margin: 0 0 12px;

  color: var(--purple);

  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2vw, 2.8rem);
  font-weight: 400;
  line-height: 0.95;
}

.project-card a::after {
  content: "";

  position: absolute;
  inset: 0;
}


/* ----------------------------------------------------------------------
   VISUELS
   ---------------------------------------------------------------------- */

.project-visual {
  margin: 34px 0 0;

  padding: clamp(26px, 5vw, 70px);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: clamp(24px, 4vw, 46px);

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.90),
      rgba(250, 234, 221, 0.34));

  box-shadow: var(--shadow);
}

.project-visual img {
  max-height: 560px;
  margin-inline: auto;

  object-fit: contain;
}

.project-visual.pair {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  align-items: center;
}



/* ----------------------------------------------------------------------
   CONTACT / INFOS
   ---------------------------------------------------------------------- */

.contact-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.contact-card a {
  color: var(--purple);

  font-weight: 700;

  transition: color 180ms ease;
}

.contact-card a:hover,
.contact-card a:focus-visible {
  color: var(--plum);
}


/* ----------------------------------------------------------------------
   PAGES LÉGALES
   ---------------------------------------------------------------------- */

.legal-stack {
  display: grid;

  gap: 18px;
}

.legal-card h2 {
  margin-bottom: 18px;

  font-size: clamp(1.5rem, 2.7vw, 2.45rem);
}

.legal-card ul,
.legal-card ol {
  padding-left: 1.25rem;
}

.legal-card li+li {
  margin-top: 0.55rem;
}

.legal-card a {
  color: var(--purple);

  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-card a:hover,
.legal-card a:focus-visible {
  color: var(--plum);
}


/* ----------------------------------------------------------------------
   AVERTISSEMENT
   ---------------------------------------------------------------------- */

.draft-warning {
  width: min(1180px, calc(100% - 48px));

  margin: 24px auto 0;
  padding: 18px 22px;

  border: 1px solid rgba(138, 36, 118, 0.26);
  border-radius: 16px;

  background: var(--brand-beige);

  color: var(--brand-charcoal);

  font-size: 0.88rem;
  font-weight: 700;
}


/* ----------------------------------------------------------------------
   LOGOS / IMAGES INLINE
   ---------------------------------------------------------------------- */

.inline-logo {
  width: min(360px, 70vw);
}


/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {

  .two-col,
  .project-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .content-page {
    padding-top: var(--header-height-mobile);
  }

  .page-hero {
    min-height: 55vh;

    padding:
      88px 20px 64px;
  }

  .page-hero h1 {
    font-size: clamp(2.9rem, 4vw, 4.8rem);
  }

  .page-hero .lead {
    margin-top: 24px;

    font-size: 1rem;
  }

  .content-section {
    padding:
      56px 20px;
  }

  .project-visual.pair {
    grid-template-columns: 1fr;
  }
}