/* ===========================================================================
   Pages prestations — /prestations/<slug>
   ===========================================================================
   N'ajoute que ce qui manque a style.css : les couleurs, les polices, les
   boutons (.btn-primary, .btn-secondary) et la grille de cartes (.grid) en
   viennent deja. La variable --accent est posee par le gabarit, prestation par
   prestation, pour que les sept pages se distinguent sans multiplier les
   feuilles de style.
   =========================================================================== */

/* Cette feuille n'est chargée que par les sept fiches prestation. Safari iOS
   peut autoriser un rebond horizontal même quand aucun élément ne dépasse :
   on verrouille donc le document sur l'axe vertical pour ces pages seulement. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body { touch-action: pan-y; }

.ps-hero,
.ps-editorial,
.ps-travaux,
.ps-etapes,
.ps-realisations,
.ps-conseils,
.ps-faq,
.ps-garanties,
.ps-autres,
.ps-cta {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ps-hero { padding-top: 2.5rem; }

/* Depuis que le bandeau signature (inc/partials/hero-page.php) porte le titre,
   le chapo et les boutons, il ne reste ici que le visuel du metier. Il occupe
   toute la largeur utile et sert de transition entre le bandeau et le texte. */
.ps-entete-continu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 28%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 25%, transparent), transparent 28%),
    linear-gradient(135deg, #0b0c0d 0%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 24%, #101113) 62%, #08090a 100%);
}
/* Le bandeau et la photo partagent désormais le même contenant : les calques
   animés du bandeau se calculent sur toute cette hauteur, donc aucune couture
   ne peut apparaître entre les deux zones. */
.ps-entete-continu > .hero-page.fond-coulure {
  position: static;
  overflow: visible;
  isolation: auto;
  background: transparent;
}
.ps-entete-continu .ps-hero-visuel-seul {
  position: relative;
  z-index: 3;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  margin-top: 0;
}
.ps-hero-visuel-seul .ps-hero-visuel {
  position: relative;
}
.ps-hero-visuel-seul .ps-hero-visuel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

/* Premier bloc de texte : nappes fluides inspirées du calculateur. Elles
   couvrent toute la largeur mais restent strictement limitées à cette section.
   --accent-page reprend la teinte exacte de chaque prestation. */
.ps-editorial.ps-editorial-matiere {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.ps-editorial-matiere::before,
.ps-editorial-matiere::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}
.ps-editorial-matiere::before {
  background:
    radial-gradient(70% 95% at 4% 12%, color-mix(in srgb, var(--accent-page) 42%, transparent), transparent 68%),
    radial-gradient(65% 100% at 94% 88%, color-mix(in srgb, var(--accent-page) 34%, transparent), transparent 70%),
    linear-gradient(110deg,
      color-mix(in srgb, var(--accent-page) 24%, #12100e),
      color-mix(in srgb, var(--accent-page) 10%, #15120f) 48%,
      color-mix(in srgb, var(--accent-page) 27%, #101113));
  background-size: 145% 120%;
  animation: psMatiereDerive 20s ease-in-out infinite alternate;
}
.ps-editorial-matiere::after {
  opacity: .38;
  background:
    repeating-linear-gradient(104deg, transparent 0 8px, rgba(255,255,255,.025) 9px, transparent 10px 19px),
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent-page) 42%, transparent) 0 1px, transparent 2px) 0 0 / 58px 58px;
  animation: psMatiereGrain 26s linear infinite;
}
.ps-editorial-matiere .ps-colonne {
  position: relative;
  z-index: 1;
}
@keyframes psMatiereDerive {
  from { background-position: 100% 0%; }
  to { background-position: 0% 100%; }
}
@keyframes psMatiereGrain {
  to { background-position: 78px 38px, -116px -58px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-editorial-matiere::before,
  .ps-editorial-matiere::after { animation: none; }
}

/* --- Fil d'Ariane -------------------------------------------------------- */
.ps-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ps-fil li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
.ps-fil a { color: var(--ink-soft); text-decoration: none; }
.ps-fil a:hover, .ps-fil a:focus-visible { color: var(--ocre); }
.ps-fil [aria-current='page'] { color: var(--ink); }

/* --- Hero ---------------------------------------------------------------- */
.ps-hero-grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.ps-hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1.4rem;
}
.ps-intro {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 2rem;
}
.ps-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.ps-hero-visuel img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}

/* --- Editorial ----------------------------------------------------------- */
.ps-editorial { padding-top: 4.5rem; }
.ps-colonne { max-width: 68ch; }
.ps-colonne p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
}

/* La precaution n'est pas un encart decoratif : elle borne ce que TDH peut
   traiter en finition. Elle doit se distinguer du corps de texte sans crier. */
.ps-precaution {
  margin: 2.2rem 0 0;
  padding: 1.3rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ocre);
  border-radius: 6px;
}
.ps-precaution-titre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ocre);
  margin: 0 0 0.6rem !important;
}
.ps-precaution p:last-child { margin-bottom: 0; color: var(--ink); }

/* --- Titres de section --------------------------------------------------- */
.ps-travaux h2,
.ps-etapes h2,
.ps-realisations h2,
.ps-conseils h2,
.ps-faq h2,
.ps-autres h2,
.ps-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 2rem;
}
.ps-travaux, .ps-etapes, .ps-realisations, .ps-conseils, .ps-faq, .ps-autres { padding-top: 4.5rem; }

.ps-section-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ps-section-tete h2 { margin-bottom: 2rem; }
.ps-lien-plus {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ocre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ps-lien-plus:hover, .ps-lien-plus:focus-visible { border-bottom-color: var(--ocre); }

/* --- Cartes de travaux --------------------------------------------------- */
.ps-cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}
.ps-carte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.ps-carte::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent, var(--blue));
  opacity: 0.75;
}
.ps-carte h3 { font-size: 1.02rem; margin: 0 0 0.6rem; }
.ps-carte p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.ps-carte h3 a { color: inherit; text-decoration: none; }
.ps-carte h3 a:hover, .ps-carte h3 a:focus-visible { color: var(--ocre); }
.ps-carte-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocre);
  margin: 0 0 0.7rem !important;
}

/* --- Etapes -------------------------------------------------------------- */
.ps-liste-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.ps-liste-etapes li { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.ps-etape-num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent, var(--blue));
  line-height: 1;
  min-width: 2.2ch;
}
.ps-liste-etapes h3 { font-size: 1.02rem; margin: 0 0 0.4rem; }
.ps-liste-etapes p { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.ps-faq-liste { display: grid; gap: 0.7rem; max-width: 80ch; }
.ps-faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ps-faq-item summary {
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.ps-faq-item summary::-webkit-details-marker { display: none; }
.ps-faq-item summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  color: var(--ocre);
  flex: none;
  transition: transform 0.2s;
}
.ps-faq-item[open] summary::after { content: '−'; }
.ps-faq-item summary:focus-visible { outline: 2px solid var(--ocre); outline-offset: -2px; }
.ps-faq-reponse { padding: 0 1.3rem 1.2rem; }
.ps-faq-reponse p { font-size: 0.93rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }

/* --- Garanties, autres prestations, appel a l'action --------------------- */
.ps-garanties { padding-top: 3rem; }
.ps-garanties p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  margin: 0;
  max-width: 80ch;
}
.ps-garanties strong { color: var(--ink); }

.ps-mentions {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
}
.ps-mentions li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.ps-mentions li::before { content: '✓'; color: var(--ocre); flex: none; }

.ps-liens-prestations { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ps-liens-prestations a {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
}
.ps-liens-prestations a:hover,
.ps-liens-prestations a:focus-visible { color: var(--ink); border-color: var(--ocre); }

.ps-cta {
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  border-top: 1px solid var(--line);
}
.ps-cta p { color: var(--ink-soft); max-width: 60ch; margin: 0 auto 2rem; line-height: 1.7; }
.ps-cta .ps-actions { justify-content: center; }

/* --- Adaptations ecran --------------------------------------------------- */
@media (max-width: 900px) {
  .ps-hero-grille { grid-template-columns: 1fr; gap: 2rem; }
  .ps-hero-visuel { order: -1; }
  .ps-travaux, .ps-etapes, .ps-realisations, .ps-conseils, .ps-faq, .ps-autres { padding-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-faq-item summary::after { transition: none; }
}