/**
 * Pierre Maroc — Motion design v1.0 (voir pierremaroc-motion.js)
 * Animations uniquement sur transform / opacity / stroke-dashoffset (composées par le GPU, sans reflow).
 * Hauteurs réservées (min-height) pour éviter tout décalage de mise en page pendant l'hydratation.
 */

/* ---------- 0. Pied de page : masqué tant que sections.js n'a pas fini (supprime le CLS du footer) ---------- */
#footerwrap { visibility: hidden; animation: pm-footer-failsafe 0s 3s forwards; }
body.pm-ready #footerwrap { visibility: visible; animation: none; }
@keyframes pm-footer-failsafe { to { visibility: visible; } }

/* ---------- 0 bis. En-tête figé à sa hauteur finale (supprime le principal CLS sur ordinateur) ----------
   Avant le chargement des polices, le menu passait sur 2 lignes (en-tête 118 px) puis revenait à 78 px,
   et le script « fixed header » du thème recalait la page avec l'ancienne hauteur → tout le contenu sautait.
   Pas d'overflow:hidden : les sous-menus déroulants doivent pouvoir dépasser. */
@media (min-width: 1201px) {
  #headerwrap { height: 78px; }
  #header { height: 77px; }
  #main-nav { white-space: nowrap; }
  /* Même rendu en haut de page et après défilement : le thème changeait la position du logo
     et la hauteur des liens quand la classe « fixed-header-on » apparaissait (barre qui « saute »). 2026-10-01 */
  #header .header-bar, #headerwrap.fixed-header #header .header-bar { display: flex !important; align-items: center !important; height: 77px !important; margin: 0 !important; padding: 0 !important; }
  #site-logo, #headerwrap.fixed-header #site-logo { margin: 0 !important; padding: 0 !important; top: auto !important; position: static !important; line-height: 1 !important; }
  #main-nav, #headerwrap.fixed-header #main-nav { height: 77px !important; display: flex !important; align-items: center !important; margin-top: 0 !important; margin-bottom: 0 !important; top: auto !important; }
  #main-nav > li > a, #headerwrap.fixed-header #main-nav > li > a { padding-top: 13px !important; padding-bottom: 13px !important; line-height: 20px !important; }
  #main-nav > li, #headerwrap.fixed-header #main-nav > li { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ---------- 1. Calculateur ---------- */
.pm-calc {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(135deg, #1c1a17 0%, #2b2620 100%);
  color: #f3eee6;
  border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(28, 26, 23, 0.55);
  min-height: 420px;
  position: relative;
  overflow: hidden;
}
.pm-calc::before { /* halo doré qui respire */
  content: "";
  position: absolute; inset: -40% -20% auto auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(223, 163, 0, 0.22), transparent 65%);
  pointer-events: none;
  animation: pm-breathe 6s ease-in-out infinite;
}
@keyframes pm-breathe { 50% { transform: scale(1.15) translate(-20px, 10px); opacity: 0.7; } }
.pm-calc-head { position: relative; margin-bottom: 24px; }
.pm-calc-head h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; color: #fff; margin: 6px 0 6px; }
.pm-calc-head p { color: rgba(243, 238, 230, 0.75); margin: 0; }
.pm-calc .pm-kicker { color: #dfa300; }
.pm-calc-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
.pm-calc-form { display: flex; flex-direction: column; gap: 18px; }
.pm-calc-field { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 0.95rem; }
.pm-calc-field select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1a17' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: #1c1a17; border: 0; border-radius: 6px; padding: 12px 40px 12px 14px; font-size: 0.98rem;
}
.pm-calc-field output { color: #dfa300; font-variant-numeric: tabular-nums; }
.pm-calc input[type="range"] { width: 100%; accent-color: #dfa300; height: 28px; cursor: pointer; }
.pm-calc-check { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; cursor: pointer; }
.pm-calc-check input { width: 18px; height: 18px; accent-color: #dfa300; }
.pm-calc-check input:disabled + span { opacity: 0.45; text-decoration: line-through; }
.pm-calc-toggle { display: inline-flex; align-self: flex-start; border: 1px solid rgba(223, 163, 0, 0.5); border-radius: 999px; padding: 3px; }
.pm-calc-toggle button {
  background: transparent; color: #f3eee6; border: 0; border-radius: 999px;
  padding: 6px 16px; font-weight: 700; cursor: pointer; transition: background 0.25s ease, color 0.25s ease;
}
.pm-calc-toggle button.is-on { background: #dfa300; color: #1c1a17; }
.pm-calc-result {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(223, 163, 0, 0.25);
  border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
}
.pm-calc-line, .pm-calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pm-calc-line { color: rgba(243, 238, 230, 0.8); transition: opacity 0.3s ease; }
.pm-calc-line.is-off { opacity: 0.45; }
.pm-calc-line strong { color: #fff; font-variant-numeric: tabular-nums; }
.pm-calc-total { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 14px; }
.pm-calc-total em { font-style: normal; color: #dfa300; font-size: 0.8rem; font-weight: 700; }
.pm-calc-total strong {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; color: #dfa300;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pm-pulse { animation: pm-pulse 0.5s ease; }
@keyframes pm-pulse { 40% { transform: scale(1.04); text-shadow: 0 0 18px rgba(223, 163, 0, 0.55); } }
.pm-calc-bar { height: 6px; border-radius: 3px; background: rgba(31, 170, 83, 0.55); overflow: hidden; }
.pm-calc-bar i {
  display: block; height: 100%; background: #dfa300; transform-origin: left;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-calc-note { font-size: 0.82rem; color: rgba(243, 238, 230, 0.6); margin: 0; }
.pm-calc-cta { justify-content: center; margin-top: 4px; }
/* entrée */
.pm-calc .pm-calc-form > *, .pm-calc .pm-calc-result { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pm-calc.pm-in .pm-calc-form > *, .pm-calc.pm-in .pm-calc-result { opacity: 1; transform: none; }
.pm-calc.pm-in .pm-calc-form > *:nth-child(2) { transition-delay: 0.08s; }
.pm-calc.pm-in .pm-calc-form > *:nth-child(3) { transition-delay: 0.16s; }
.pm-calc.pm-in .pm-calc-form > *:nth-child(4) { transition-delay: 0.24s; }
.pm-calc.pm-in .pm-calc-form > *:nth-child(5) { transition-delay: 0.32s; }
.pm-calc.pm-in .pm-calc-result { transition-delay: 0.2s; }
@media (max-width: 760px) {
  .pm-calc { padding: 22px; min-height: 640px; }
  .pm-calc-grid { grid-template-columns: 1fr; }
  .pm-calc-total strong { font-size: 1.4rem; }
}

/* ---------- 2. Parcours carrière → chantier ---------- */
.pm-journey { padding: 72px 0; background: #faf7f2; min-height: 420px; }
.pm-journey-compact { padding: 40px 0; background: transparent; min-height: 0; }
.pm-journey-compact .pm-container { padding: 0; }
.pm-journey-compact .pm-section-head { margin-bottom: 28px; }
.pm-journey-track { position: relative; }
.pm-journey-line {
  position: absolute; top: 34px; left: 12.5%; width: 75%; height: 4px; overflow: visible;
}
.pm-journey-line line {
  stroke: #dfa300; stroke-width: 3; stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.pm-journey.pm-in .pm-journey-line line { stroke-dashoffset: 0; }
.pm-journey-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.pm-journey-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(0.35s + var(--i) * 0.35s); }
.pm-journey.pm-in .pm-journey-step { opacity: 1; transform: none; }
.pm-journey-ico {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: #1c1a17; color: #dfa300; box-shadow: 0 0 0 6px #faf7f2, 0 10px 24px -12px rgba(28, 26, 23, 0.6);
  transform: scale(0.6); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(0.35s + var(--i) * 0.35s);
}
.pm-journey-compact .pm-journey-ico { box-shadow: 0 0 0 6px #fff, 0 10px 24px -12px rgba(28, 26, 23, 0.6); }
.pm-journey.pm-in .pm-journey-ico { transform: scale(1); }
.pm-journey-ico svg { width: 30px; height: 30px; }
.pm-journey-step strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; color: #1c1a17; }
.pm-journey-step > span:last-child { color: #605a51; font-size: 0.92rem; line-height: 1.5; max-width: 220px; }
@media (max-width: 760px) {
  .pm-journey-steps { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .pm-journey-step { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; column-gap: 16px; }
  .pm-journey-step > span:last-child { flex-basis: 100%; padding-left: 84px; margin-top: -8px; }
  .pm-journey-line { display: none; }
  .pm-journey-steps::before { /* ligne verticale qui se dessine */
    content: ""; position: absolute; left: 33px; top: 34px; bottom: 34px; width: 3px; background: #dfa300;
    transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
  }
  .pm-journey.pm-in .pm-journey-steps::before { transform: scaleY(1); }
}

/* ---------- 3. Micro-interactions cartes ---------- */
/* Inclinaison : classe posée par motion.js au survol (desktop), après l'animation d'entrée des cartes */
.pm-card.pm-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  transition: transform 0.2s ease-out, box-shadow 0.35s ease;
}
.pm-card-img { position: relative; }
.pm-card-img::after { /* reflet lumineux qui suit le pointeur */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) 0%, rgba(255, 255, 255, 0.28), transparent 55%);
  opacity: 0; transition: opacity 0.35s ease;
}
.pm-card:hover .pm-card-img::after { opacity: 1; }
.pm-card-body h3 { position: relative; display: inline-block; }
.pm-card-body h3::after { /* trait doré qui se dessine */
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: #dfa300; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-card:hover .pm-card-body h3::after { transform: scaleX(1); }
/* Catalogue : le prix « À partir de… » devient une pastille qui glisse au survol */
.page-id-911 .pm-card-body h3 + p {
  display: inline-block; background: #faf7f2; border: 1px solid #eae4da; border-radius: 999px;
  padding: 4px 12px; font-weight: 700; color: #a16207;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, color 0.35s ease;
}
.page-id-911 .pm-card:hover .pm-card-body h3 + p { transform: translateX(6px); background: #dfa300; color: #1c1a17; }
/* 8 cartes du catalogue : décalage d'apparition étendu */
.pm-stagger.pm-in > *:nth-child(5) { transition-delay: 0.45s; }
.pm-stagger.pm-in > *:nth-child(6) { transition-delay: 0.55s; }
.pm-stagger.pm-in > *:nth-child(7) { transition-delay: 0.65s; }
.pm-stagger.pm-in > *:nth-child(8) { transition-delay: 0.75s; }

/* ---------- 4. Page d'accueil ---------- */
/* Héros : deux boutons côte à côte + indicateur de défilement */
.home .module_row_37-0 .module-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.home .module_row_37-0 .module-buttons .module-buttons-item { margin: 0 !important; }
.pm-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 30px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 3px; line-height: 1 !important;
  color: #fff !important; text-decoration: none !important;
  font: 700 0.85rem/1.2 'Source Sans Pro', Arial, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(28, 26, 23, 0.25); backdrop-filter: blur(2px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.pm-btn-ghost svg { width: 16px; height: 16px; flex: none; }
.home .module_row_37-0 .module-buttons a.pm-btn-ghost { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.home .module_row_37-0 .module-buttons a.pm-btn-ghost svg { display: block; vertical-align: middle; margin: 0; }
.pm-btn-ghost:hover { background: #1faa53; border-color: #1faa53; transform: translateY(-2px); }
.home .module_row_37-0 { position: relative; }
.pm-scroll-cue {
  position: absolute; left: 50%; bottom: 28px; width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 14px; z-index: 3;
}
.pm-scroll-cue span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: #dfa300; animation: pm-scroll 1.8s ease-in-out infinite;
}
@keyframes pm-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* « Notre métier » / « Nos services » : panneaux sombres lisibles, texte droit (plus d'italique gras) */
.home .module_row_37-2 .module-text,
.home .module_row_37-2 .module-buttons { background: rgba(28, 26, 23, 0.82) !important; }
.home .module_row_37-2 .module-text { padding-top: 40px !important; border-top: 3px solid #dfa300; }
.home .module_row_37-2 .module-text,
.home .module_row_37-2 .module-text * {
  color: #f3eee6 !important; font-style: normal !important;
}
.home .module_row_37-2 .module-text p,
.home .module_row_37-2 .module-text p *,
.home .module_row_37-2 .module-text h4,
.home .module_row_37-2 .module-text h5,
.home .module_row_37-2 .module-text h6,
.home .module_row_37-2 .module-text h5 * {
  font-family: 'Source Sans Pro', Arial, sans-serif !important; font-weight: 400 !important;
  font-size: 1.05rem !important; line-height: 1.7 !important;
}
.home .module_row_37-2 .module-text strong { color: #dfa300 !important; font-weight: 600 !important; }
.home .module_row_37-2 .module-text h1, .home .module_row_37-2 .module-text h2, .home .module_row_37-2 .module-text h3 { color: #fff !important; }
/* le texte courant est saisi en <h5> dans Themify : on le rend comme un paragraphe (pas de titre en majuscules) */
.home .module_row_37-2 .module-text h5 { text-transform: none !important; letter-spacing: normal !important; margin: 0 0 8px !important; }
/* Photos : dégradé bas qui masque le bandeau « www.pierremaroc.com » incrusté dans les images */
.home .module_row_37-2 .module_column,
.home .module_row_37-3 .module-image .image-wrap { position: relative; }
.home .module_row_37-2 .module_column::after,
.home .module_row_37-3 .module-image .image-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none;
  background: linear-gradient(to top, #1c1a17 30%, rgba(28, 26, 23, 0));
}
.home .module_row_37-3 .module-image img { border-radius: 8px; }

/* « Travaillons ensemble » : étapes 01-02-03 dorées à la place des photos de banque d'images */
.pm-steps-row { counter-reset: pmstep; }
.pm-steps-row .module-service-menu { counter-increment: pmstep; position: relative; padding-left: 92px !important; }
.pm-steps-row .module-service-menu .tb-image-wrap,
.pm-steps-row .module-service-menu .image-wrap { display: none !important; }
.pm-steps-row .module-service-menu::before {
  content: "0" counter(pmstep); position: absolute; left: 0; top: 2px;
  font: 700 3rem/1 'Playfair Display', Georgia, serif; color: #dfa300;
}
.pm-steps-row .module-service-menu .tb-menu-title, .pm-steps-row .module-service-menu h3 { margin-top: 0 !important; }
.pm-steps-row .module-service-menu .tb-image-content { margin-left: 0 !important; width: auto !important; }

/* FAQ en accordéon */
.pm-faq { padding: 80px 0; background: #fff; }
.pm-faq-list { max-width: 860px; margin: 0 auto; border-top: 1px solid #eae4da; }
.pm-faq-item { border-bottom: 1px solid #eae4da; }
.pm-faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font: 600 1.12rem/1.4 'Playfair Display', Georgia, serif; color: #1c1a17;
  transition: color 0.25s ease;
}
.pm-faq-item summary::-webkit-details-marker { display: none; }
.pm-faq-item summary:hover { color: #a16207; }
.pm-faq-item summary i { position: relative; flex: none; width: 18px; height: 18px; }
.pm-faq-item summary i::before, .pm-faq-item summary i::after {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: #dfa300;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-faq-item summary i::after { transform: rotate(90deg); }
.pm-faq-item[open] summary i::after { transform: rotate(0deg); }
.pm-faq-a { padding: 0 4px 24px; color: #605a51; line-height: 1.75; }
.pm-faq-item[open] .pm-faq-a { animation: pm-faq-open 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pm-faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .pm-steps-row .module-service-menu { padding-left: 64px !important; }
  .pm-steps-row .module-service-menu::before { font-size: 2.2rem; }
  .pm-btn-ghost { padding: 12px 22px; }
}

/* ---------- Accessibilité : réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .pm-calc::before { animation: none; }
  .pm-calc .pm-calc-form > *, .pm-calc .pm-calc-result,
  .pm-journey-step, .pm-journey-ico { opacity: 1; transform: none; transition: none; }
  .pm-journey-line line { stroke-dashoffset: 0; transition: none; }
  .pm-card.pm-tilt { transform: none; }
  .pm-journey-steps::before { transform: none; transition: none; }
  .pm-pulse { animation: none; }
  .pm-scroll-cue span, .pm-faq-item[open] .pm-faq-a { animation: none; }
}