/* ==========================================================================
   Fiches projets — kadence-child-adrien (v2, retours client)
   Préfixe .projx- uniquement. Enqueue déjà en place dans functions.php
   (adrien-project, versionné sur la version du thème).
   ========================================================================== */

/* ---------- 1. Hero ---------- */
.projx-hero {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 5rem;
}

.projx-hero .wp-block-cover__inner-container {
  max-width: 900px;
}

.projx-hero h1 {
  color: #fff;
  margin: 0.5rem 0 0;
}

.projx-hero h1 em {
  color: var(--gold);
}

/* ---------- 2. Ruban méta (fin, calé sur la bande stats de la home) ---------- */
.band-dark.projx-meta {
  padding: 1.5rem 1.5rem;
  border-top: 1px solid rgba(217, 180, 33, 0.4);
  border-bottom: 1px solid rgba(217, 180, 33, 0.4);
}

.projx-meta .projx-meta-grid {
  max-width: 1140px;
  margin: 0 auto;
}

.projx-meta .projx-meta-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem 2rem;
}

/* Verrouillage des espacements : aucun block-gap hérité */
body .projx-meta .wp-block-group,
body .projx-meta .wp-block-group__inner-container,
body .projx-meta p {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

.projx-meta-item {
  text-align: center;
}

.projx-meta-item > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}

.projx-meta-item + .projx-meta-item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.projx-meta-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
}

.projx-meta-value {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  color: #fff;
  line-height: 1.25;
}

/* ---------- 3. Corps éditorial ---------- */
/* Numéro de section doré (esprit .card-num, en plus grand) */
.projx-num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.35rem;
}

.projx-num::after {
  content: "";
  display: inline-block;
  width: 52px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* Largeur de lecture ~62ch */
.projx-body > .wp-block-group__inner-container > p:not(.projx-num),
.projx-body > .wp-block-group__inner-container > ul,
.projx-cols p:not(.projx-num) {
  max-width: 62ch;
}

.projx-body h2 {
  margin-top: 0.25rem;
}

/* Colonnes Contexte : image en carte arrondie */
.projx-cols .projx-img {
  margin: 0;
}

.projx-img img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-card);
}

/* Checklist mission : flèches dorées + hairlines (esprit .presta-list, fond clair) */
.projx-checklist {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.projx-checklist li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.8rem;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
  color: var(--ink);
}

.projx-checklist li:last-child {
  border-bottom: none;
}

.projx-checklist li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0.7rem;
  color: var(--gold);
}

/* Phrase clé en exergue */
.projx-quote {
  margin: 2rem 0 0;
  padding: 1.4rem 1.75rem;
  background: var(--gold-soft);
  border-left: 2px solid var(--gold);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- Galerie bonus ---------- */
.projx-visual .overline {
  text-align: center;
}

.projx-gallery figure img {
  border-radius: 12px;
}

/* ---------- 4. Ruban KPI noir (Résultats) ---------- */
.band-dark.projx-kpis {
  padding: 2rem 1.5rem;
  background: linear-gradient(180deg, #17140E 0%, #0C0B09 55%, #0A0A0A 100%);
  border-top: 1px solid rgba(217, 180, 33, 0.4);
  border-bottom: 1px solid rgba(217, 180, 33, 0.4);
}

.projx-kpis .projx-kpi-grid {
  max-width: 1140px;
  margin: 0 auto;
}

.projx-kpi-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem 2rem;
}

body .projx-kpis .wp-block-group,
body .projx-kpis .wp-block-group__inner-container,
body .projx-kpis p {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

.projx-kpi {
  text-align: center;
}

.projx-kpi > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  height: 100%;
}

.projx-kpi + .projx-kpi {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.projx-kpi-num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: var(--gold);
}

.projx-kpi-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  max-width: 30ch;
}

/* ---------- 5. Navigation précédent / suivant ---------- */
.projx-nav {
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.projx-nav .projx-nav-row {
  max-width: 1140px;
  margin: 0 auto;
}

.projx-nav .projx-nav-row > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.projx-nav-prev,
.projx-nav-next {
  margin: 0;
  flex: 1 1 220px;
}

.projx-nav-next {
  text-align: right;
}

.projx-nav-prev a,
.projx-nav-next a {
  text-decoration: none;
  display: inline-block;
}

.projx-nav-dir {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.3rem;
}

.projx-nav-title {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.08rem;
  color: var(--ink);
  transition: color 0.25s ease;
}

.projx-nav-prev a:hover .projx-nav-title,
.projx-nav-next a:hover .projx-nav-title {
  color: var(--gold-dark);
}

.projx-nav-all {
  flex: 0 0 auto;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .projx-meta .projx-meta-grid > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .projx-meta-item:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 640px) {
  .projx-hero {
    min-height: 52vh;
    padding: 7rem 1.25rem 3.5rem;
  }

  .projx-kpi-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  .projx-kpi + .projx-kpi {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1rem !important;
  }

  .projx-nav .projx-nav-row > .wp-block-group__inner-container {
    flex-direction: column;
    text-align: center;
  }

  .projx-nav-prev,
  .projx-nav-next {
    flex: 1 1 auto;
    text-align: center;
  }
}


/* ==========================================================================
   v3 — Navigation precedent/suivant en boutons cartes (retour client :
   tout etait colle a gauche ; rangee flex forcee + jolis boutons)
   ========================================================================== */
.projx-nav .projx-nav-row > .wp-block-group__inner-container {
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.projx-nav-prev,
.projx-nav-next {
  margin: 0 !important;
  flex: 0 1 auto;
  display: flex;
}

.projx-nav-prev a,
.projx-nav-next a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 0.85rem 1.5rem;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.04);
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.projx-nav-prev a:hover,
.projx-nav-next a:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(10, 10, 10, 0.1);
}

.projx-nav-next a {
  align-items: flex-end;
  text-align: right;
}

.projx-nav-prev a .projx-nav-dir,
.projx-nav-next a .projx-nav-dir {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
}

.projx-nav-prev a span:not(.projx-nav-dir),
.projx-nav-next a span:not(.projx-nav-dir) {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
}

.projx-nav-all {
  margin: 0 !important;
  align-self: center;
}

@media (max-width: 720px) {
  .projx-nav .projx-nav-row > .wp-block-group__inner-container {
    flex-direction: column;
    align-items: stretch;
  }
  .projx-nav-prev a,
  .projx-nav-next a {
    width: 100%;
  }
  .projx-nav-next a { align-items: flex-end; }
  .projx-nav-all { order: 3; }
}


/* ==========================================================================
   v4 — Centrage : le reset anti block-gap ecrasait le margin:auto
   des conteneurs de premier niveau (meta, kpis) ; on le retablit.
   ========================================================================== */
body .projx-meta > .wp-block-group__inner-container,
body .projx-kpis > .wp-block-group__inner-container {
  max-width: var(--content-width);
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .projx-meta .projx-meta-grid {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Grille KPIs centree */
.projx-kpi-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
}

@media (max-width: 720px) {
  .projx-kpi-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   v5 — Markup moderne (theme.json enfant) : plus de
   .wp-block-group__inner-container, on style les CLASSES directement.
   Les anciennes regles inner-container restent en surcharge inoffensive.
   ========================================================================== */
/* Ruban meta : 4 col -> 2 col -> 1 col */
.projx-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem 2rem;
}

@media (max-width: 900px) {
  .projx-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .projx-meta-item:nth-child(3) { border-left: none; }
}

@media (max-width: 560px) {
  .projx-meta-grid { grid-template-columns: 1fr; }
  /* body en tete : il faut battre le reset padding-top:0 !important (0,2,1) */
  body .projx-meta-item + .projx-meta-item {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 0.6rem !important;
  }
}

/* Grille KPI : 3 col -> 1 col */
.projx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
}

@media (max-width: 720px) {
  .projx-kpi-grid { grid-template-columns: 1fr; }
}

/* Nav precedent/suivant : rangee flex */
.projx-nav-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .projx-nav-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   9. Reconstruction depuis le CMS Wix (31/07)
   Les règles historiques ci-dessus ciblent `> .wp-block-group__inner-container`,
   conteneur que WP n'émet PLUS depuis l'ajout du theme.json enfant : elles sont
   inertes. On restyle donc les classes en direct.
   ========================================================================== */

/* ---------- Ruban méta : grille rétablie ---------- */
.projx-meta .projx-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem 1.75rem;
  max-width: 1140px;
  margin-inline: auto;
}

.projx-meta .projx-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  text-align: center;
}

/* Le filet vertical n'a de sens que sur une seule rangée : les fiches du CMS
   affichent jusqu'à 9 métadonnées, donc plusieurs rangées -> on l'abandonne
   au profit d'un espacement plus large. */
.projx-meta .projx-meta-item + .projx-meta-item {
  border-left: none;
}

.projx-meta .projx-meta-value {
  overflow-wrap: anywhere;
}

/* ---------- Corps éditorial : largeur de lecture rétablie ---------- */
.projx-body > p:not(.projx-num),
.projx-body > ul,
.projx-body > ol {
  max-width: 62ch;
}

/* Sous-titres issus du CMS (h6 Wix -> h3) */
.projx-body h3,
.projx-cles h3 {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink, #0a0a0a);
  max-width: 62ch;
  margin: 2.25rem 0 0.75rem;
}

.projx-body > h3:first-of-type {
  margin-top: 1rem;
}

/* ---------- « Les clés du succès » ---------- */
.projx-cles ul {
  list-style: none;
  max-width: 68ch;
  margin: 0.5rem 0 0;
  padding: 0;
}

.projx-cles li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.projx-cles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.projx-cles li strong {
  font-weight: 500;
  color: var(--ink, #0a0a0a);
}

/* ---------- « Le mot du client » ---------- */
.projx-avis-sec .projx-avis {
  position: relative;
  max-width: 74ch;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--border, #e4e4e4);
  border-radius: 16px;
  padding: 2.75rem 2.25rem 2.25rem;
}

.projx-avis::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  left: 1.5rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
}

.projx-avis p {
  line-height: 1.75;
  margin: 0 0 0.9rem;
}

.projx-avis p:last-child {
  margin-bottom: 0;
}

.projx-avis em {
  font-style: italic;
}

.projx-avis strong {
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 620px) {
  .projx-avis-sec .projx-avis {
    padding: 2.5rem 1.4rem 1.75rem;
  }
}

/* ---------- Alignement du contenu sur le titre de section ----------
   Chaque bloc porte sa propre max-width (62ch, 68ch, 74ch) et le layout
   « constrained » de WP les centre : les débuts de ligne se décalaient donc
   les uns par rapport aux autres, et par rapport au h2 de section.
   On les cale tous sur le bord gauche de la colonne. */
.projx-body > h3,
.projx-body > p:not(.projx-num),
.projx-body > ul,
.projx-body > ol,
.projx-cles > ul,
.projx-cles > h3,
.projx-cles > p:not(.projx-num),
.projx-avis-sec .projx-avis {
  margin-inline: 0;
}

/* ---------- Mise en exergue sans gras ----------
   La Futura LT auto-hébergée n'a que Light (300) et Book (400) : un <strong>
   ne produit AUCUN changement visible (la Book est déclarée sur la plage
   400-600 pour éviter le faux-gras). On distingue donc les intitulés par la
   couleur plutôt que par la graisse. */
.projx-cles li strong,
.projx-avis strong {
  font-weight: 400;
  color: var(--gold-dark);
  letter-spacing: 0.01em;
}

.projx-cles li {
  color: var(--muted);
}

.projx-cles li strong {
  color: var(--gold-dark);
}

/* Le layout « constrained » de WP centre CHAQUE bloc individuellement dans la
   pleine largeur : deux blocs de max-width differentes (62ch, 68ch, 74ch) ne
   commencent donc pas au meme x, ni au meme x que le h2 de section (qui prend,
   lui, la largeur de contenu du theme). On les cale tous sur le bord gauche de
   cette colonne de contenu ; sous 1140px la marge tombe a 0 d'elle-meme. */
body .projx-body > h3,
body .projx-body > p:not(.projx-num),
body .projx-body > ul,
body .projx-body > ol,
body .projx-cles > h3,
body .projx-cles > p:not(.projx-num),
body .projx-cles > ul,
body .projx-avis-sec .projx-avis {
  margin-left: max(0px, calc((100% - var(--content-width, 1140px)) / 2)) !important;
  margin-right: auto !important;
}

/* =====================================================
   Fiche technique sous les tuiles projet (31/07)
   Reprise des pages catégorie du Wix, qui listent sous chaque carte le
   programme, la localisation, la maîtrise d'ouvrage, la surface, le budget
   et la mission. La carte .proj-tile étant en aspect-ratio + overflow:hidden,
   la fiche vit dans un conteneur .proj-cell, SOUS la carte.
   ===================================================== */
.proj-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.proj-cell > .proj-tile {
  width: 100%;
  flex: 0 0 auto;
}

.proj-meta {
  margin-top: 1.05rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border);
}

/* Le programme : la phrase descriptive du Wix */
.pm-prog {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

.pm-list {
  margin: 0;
  display: grid;
  row-gap: 0.42rem;
}

.pm-row {
  display: grid;
  grid-template-columns: 9.2rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.pm-k {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  line-height: 1.6;
}

.pm-v {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Sous 420px la colonne d'étiquettes n'a plus la place : on empile */
@media (max-width: 420px) {
  .pm-row {
    grid-template-columns: 1fr;
    gap: 0.05rem;
  }
  .pm-k {
    line-height: 1.4;
  }
}

/* Sur /projets/, la fiche technique n'apparaît qu'une fois une catégorie
   choisie (classe show-meta posée par js/filter.js) : sur « Tous les projets »
   les 69 fiches allongeraient la page sans rien apporter.
   Les pages catégorie n'ont pas .filter-grid : elles les affichent toujours. */
.filter-grid .proj-meta {
  display: none;
}

.filter-grid.show-meta .proj-meta {
  display: block;
}

/* WP applique un block-gap vertical aux enfants du groupe .proj-cell : la carte
   traînait 32px de marge, visibles surtout quand la fiche technique est masquée
   (vue « Tous les projets »). L'espacement est déjà géré par le gap de la grille
   et par le margin-top de .proj-meta. */
body .proj-cell > .proj-tile {
  margin-block: 0 !important;
}