/* ENTREPRISE PONTOU — ACCUEIL.CSS
   Feuille de style de la page d’accueil. À placer dans /css/.
   Laisser les feuilles plugins.css, style.css et responsive.css chargées avant celle-ci.
   Photos, six services, titres réduits et pied de page marine inclus.
*/

:root {
  --pp-ink: #071426; --pp-navy: #0a1f3b; --pp-navy-2: #102b4f; --pp-blue: #1468a8; --pp-blue-soft: #e7f1f9;
  --pp-gold: #c9a14a; --pp-gold-2: #f0d27b; --pp-grey: #f2f4f7; --pp-stone: #e5e8ed; --pp-text: #253246;
  --pp-muted: #667085; --pp-white: #ffffff; --pp-shadow: 0 28px 70px rgba(7, 20, 38, 0.16); --pp-radius: 28px;
}
html { scroll-behavior: smooth; }
body { color: var(--pp-text); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.pp-home-premium {
  overflow: hidden;
  background: radial-gradient(circle at 92% 8%, rgba(20, 104, 168, .09), transparent 28rem),
                linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #ffffff 100%);
}
.pp-home-premium * { box-sizing: border-box; }
.pp-home-premium a { transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
#header.dark #header-wrap { background: rgba(7, 20, 38, .94); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); }
#header #mainMenu nav > ul > li > a { font-family: Montserrat, Arial, sans-serif; letter-spacing: .015em; }
.pp-container { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.pp-section { position: relative; padding: 105px 0; }
.pp-section-tight { padding: 78px 0; }
.pp-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--pp-gold);
  font: 800 12px/1 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: .18em;
}
.pp-kicker:before { content: ""; width: 46px; height: 2px; background: linear-gradient(90deg, var(--pp-gold), rgba(201, 161, 74, .18)); }
.pp-title {
  margin: 0; color: var(--pp-ink); font-family: Montserrat, Arial, sans-serif; font-size: clamp(24px, 2.5vw, 34px);
  line-height: .98; font-weight: 800; letter-spacing: -.055em;
}
.pp-title span { color: var(--pp-blue); }
.pp-lead { margin: 24px 0 0; color: var(--pp-muted); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.78; }
.pp-grid-2 { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr); gap: clamp(34px, 5.6vw, 78px); align-items: center; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.pp-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px;
  padding: 15px 25px; overflow: hidden; border-radius: 999px; border: 1px solid transparent;
  font: 800 13px/1 Montserrat, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  isolation: isolate;
}
.pp-btn:after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-105%) skewX(-18deg);
  background: rgba(255,255,255,.18); transition: transform .45s ease;
}
.pp-btn:hover:after { transform: translateX(105%) skewX(-18deg); }
.pp-btn:hover, .pp-btn:focus { text-decoration: none; transform: translateY(-2px); }
.pp-btn-gold { color: var(--pp-ink); background: linear-gradient(135deg, var(--pp-gold-2), var(--pp-gold)); box-shadow: 0 18px 36px rgba(201, 161, 74, .28); }
.pp-btn-gold:hover, .pp-btn-gold:focus { color: var(--pp-ink); }
.pp-btn-blue { color: #fff; background: linear-gradient(135deg, var(--pp-blue), #0c4779); box-shadow: 0 18px 36px rgba(20, 104, 168, .22); }
.pp-btn-blue:hover, .pp-btn-blue:focus { color: #fff; }
.pp-btn-ghost { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.pp-btn-ghost:hover, .pp-btn-ghost:focus { color: #fff; border-color: rgba(240, 210, 123, .72); background: rgba(255,255,255,.13); }
.pp-hero-luxe {
  position: relative; min-height: 760px; display: grid; align-items: center; padding: 124px 0 110px; color: #fff;
  background: linear-gradient(115deg, rgba(7,20,38,.96) 0%, rgba(7,20,38,.84) 46%, rgba(7,20,38,.27) 100%),
                url("../images/pontou/perigueux-entreprise-peinture-batiment-pontou.jpg") center/cover no-repeat;
}
.pp-hero-luxe:before {
  content: ""; position: absolute; inset: 0; opacity: .52;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(90deg, black, transparent 76%); pointer-events: none;
}
.pp-hero-luxe:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 86px;
  background: linear-gradient(180deg, transparent, #fff 84%); pointer-events: none;
}
.pp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 46px; align-items: end; }
.pp-hero-copy { max-width: 860px; }
.pp-hero-mark {
  display: inline-flex; align-items: center; gap: 13px; margin-bottom: 23px; padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.07); backdrop-filter: blur(10px); font: 700 12px/1 Montserrat, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .12em;
}
.pp-hero-mark strong {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--pp-ink);
  background: var(--pp-gold); letter-spacing: 0;
}
.pp-hero-luxe h1 {
  margin: 0; max-width: 820px; color: #fff; font-family: Montserrat, Arial, sans-serif; font-size: clamp(32px, 3.8vw, 48px);
  line-height: .93; font-weight: 800; letter-spacing: -.065em;
}
.pp-hero-luxe h1 em { color: var(--pp-gold-2); font-style: normal; }
.pp-hero-luxe p { max-width: 770px; margin: 27px 0 0; color: rgba(255,255,255,.88); font-size: clamp(18px, 2vw, 23px); line-height: 1.7; }
.pp-hero-panel {
  position: relative; padding: 28px; border: 1px solid rgba(255,255,255,.20); border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  box-shadow: 0 24px 60px rgba(0,0,0,.24); backdrop-filter: blur(14px);
}
.pp-hero-panel:before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201,161,74,.42); border-radius: 18px; pointer-events: none; }
.pp-hero-panel small {
  display: block; color: rgba(255,255,255,.66); font: 800 11px/1.35 Montserrat, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
}
.pp-hero-panel strong {
  display: block; margin-top: 15px; color: #fff; font-family: Montserrat, Arial, sans-serif; font-size: 54px;
  line-height: .86; letter-spacing: -.055em;
}
.pp-hero-panel span { display: block; margin-top: 17px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65; }
.pp-proof-strip { position: relative; z-index: 3; margin-top: -48px; }
.pp-proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-radius: var(--pp-radius); background: #fff;
  box-shadow: var(--pp-shadow);
}
.pp-proof-item { position: relative; min-height: 140px; padding: 30px 34px; border-right: 1px solid var(--pp-stone); }
.pp-proof-item:last-child { border-right: 0; }
.pp-proof-item:before { content: ""; position: absolute; top: 0; left: 34px; width: 48px; height: 4px; background: var(--pp-gold); }
.pp-proof-item b {
  display: block; margin-bottom: 10px; color: var(--pp-ink); font-family: Montserrat, Arial, sans-serif; font-size: 15px;
  text-transform: uppercase; letter-spacing: .08em;
}
.pp-proof-item span { color: var(--pp-muted); line-height: 1.65; }
/* Photo de famille 1200 x 1500 : rapport 4/5, sans recadrage. */
.pp-signature-card {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: 38px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,31,59,.08), rgba(10,31,59,.12)),
    url("../images/pontou/photo-entreprise-familiale.jpg") center center / cover no-repeat;
  box-shadow: var(--pp-shadow);
}
.pp-signature-card:before { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,.34); border-radius: 26px; }
.pp-signature-card:after { content: none; display: none; }
.pp-signature-card .pp-floating-note { display: none; }
.pp-copy-block p { margin-bottom: 20px; font-size: 17px; line-height: 1.82; }
.pp-highlight-list { display: grid; gap: 12px; margin-top: 30px; }
.pp-highlight-list div {
  display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-radius: 16px; background: #fff;
  border: 1px solid var(--pp-stone);
}
.pp-highlight-list i {
  flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--pp-ink);
  background: var(--pp-gold); font-style: normal; font-weight: 900;
}
.pp-services { background: linear-gradient(180deg, var(--pp-grey), #fff); }
.pp-heading-row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(280px, .58fr); gap: 48px; align-items: end; margin-bottom: 46px; }
.pp-heading-row .pp-lead { margin-top: 0; }
.pp-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pp-service-tile {
  position: relative; min-height: 390px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  padding: 30px; border-radius: 28px; color: #fff; background: var(--pp-navy); box-shadow: 0 18px 42px rgba(7,20,38,.12);
  isolation: isolate;
}
.pp-service-tile:before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(7,20,38,.20), rgba(7,20,38,.92)); }
.pp-service-tile:after {
  content: ""; position: absolute; inset: auto -30% -34% auto; z-index: -1; width: 210px; height: 210px; border-radius: 50%;
  background: rgba(201,161,74,.18); transition: transform .32s ease, opacity .32s ease;
}
.pp-service-tile:hover { transform: translateY(-7px); box-shadow: 0 30px 70px rgba(7,20,38,.18); }
.pp-service-tile:hover:after { transform: scale(1.35); opacity: .9; }
.pp-service-tile:nth-child(1) {
  background-image: linear-gradient(180deg, rgba(7,20,38,.16), rgba(7,20,38,.92)),
                url("../images/pontou/perigueux-entreprise-peinture-batiment-pontou.jpg");
  background-size: cover; background-position: center;
}
.pp-service-tile:nth-child(2) {
  background: radial-gradient(circle at 18% 16%, rgba(240,210,123,.26), transparent 16rem),
                linear-gradient(140deg, #0a1f3b 0%, #1468a8 100%);
}
.pp-service-tile:nth-child(3) { background: linear-gradient(140deg, #102b4f 0%, #1468a8 100%); }
.pp-service-tile:nth-child(4) {
  background-image: linear-gradient(180deg, rgba(7,20,38,.12), rgba(7,20,38,.92)),
                url("../images/pontou/slider/pontou-renovation-pont-metallique.jpg");
  background-size: cover; background-position: center;
}
.pp-service-no { position: absolute; top: 25px; left: 28px; color: rgba(255,255,255,.34); font: 900 54px/.8 Montserrat, Arial, sans-serif; letter-spacing: -.07em; }
.pp-service-tile h3 { margin: 0 0 15px; color: #fff; font-family: Montserrat, Arial, sans-serif; font-size: 23px; line-height: 1.12; }
.pp-service-tile p { margin: 0; color: rgba(255,255,255,.83); line-height: 1.65; }
.pp-service-tile a { color: inherit; text-decoration: none; }
.pp-dark-band {
  color: #fff;
  background: radial-gradient(circle at 14% 12%, rgba(201,161,74,.18), transparent 24rem),
                radial-gradient(circle at 86% 58%, rgba(20,104,168,.28), transparent 28rem),
                linear-gradient(135deg, #071426 0%, #0a1f3b 62%, #102b4f 100%);
}
.pp-dark-band .pp-title, .pp-dark-band .pp-lead { color: #fff; }
.pp-difference-layout { display: grid; grid-template-columns: .42fr .58fr; gap: 56px; align-items: start; }
.pp-big-number {
  position: sticky; top: 116px; padding: 36px; border-radius: 32px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); backdrop-filter: blur(10px);
}
.pp-big-number strong { display: block; color: var(--pp-gold-2); font: 900 clamp(74px, 10vw, 132px)/.82 Montserrat, Arial, sans-serif; letter-spacing: -.08em; }
.pp-big-number span { display: block; margin-top: 18px; color: rgba(255,255,255,.76); font-size: 18px; line-height: 1.55; }
.pp-difference-list { display: grid; gap: 16px; }
.pp-difference-card {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px; border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07);
}
.pp-difference-card i {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; color: var(--pp-ink);
  background: linear-gradient(135deg, var(--pp-gold-2), var(--pp-gold)); font-style: normal; font-weight: 900;
}
.pp-difference-card h3 { margin: 0 0 7px; color: #fff; font-family: Montserrat, Arial, sans-serif; font-size: 19px; }
.pp-difference-card p { margin: 0; color: rgba(255,255,255,.75); line-height: 1.65; }
.pp-testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pp-quote {
  position: relative; min-height: 280px; padding: 30px; border-radius: 28px; background: #fff;
  border: 1px solid var(--pp-stone); box-shadow: 0 14px 36px rgba(7,20,38,.06);
}
.pp-quote:before { content: "“"; position: absolute; top: 8px; right: 22px; color: rgba(201,161,74,.28); font: 900 98px/.8 Georgia, serif; }
.pp-quote p { position: relative; margin: 0; color: var(--pp-text); font-size: 16px; line-height: 1.72; }
.pp-quote cite {
  display: block; margin-top: 24px; color: var(--pp-blue); font: 800 13px/1 Montserrat, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .12em; font-style: normal;
}
.pp-quote:nth-child(2), .pp-quote:nth-child(4) { transform: translateY(28px); }
.pp-zone-card {
  position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; overflow: hidden;
  padding: clamp(30px, 5vw, 58px); border-radius: 38px; color: #fff;
  background: linear-gradient(135deg, rgba(10,31,59,.96), rgba(20,104,168,.88)),
                url("../images/pontou/perigueux-entreprise-peinture-batiment-pontou.jpg") center/cover no-repeat;
  box-shadow: var(--pp-shadow);
}
.pp-zone-card:before {
  content: ""; position: absolute; right: -80px; top: -100px; width: 330px; height: 330px;
  border: 1px solid rgba(240,210,123,.34); border-radius: 50%;
}
.pp-zone-card .pp-title, .pp-zone-card .pp-lead { color: #fff; }
.pp-town-list { position: relative; display: flex; flex-wrap: wrap; gap: 10px; align-content: center; justify-content: flex-end; }
.pp-town-list span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 11px 15px; border-radius: 999px; color: #fff;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); backdrop-filter: blur(8px); font-weight: 700;
}
.pp-final-cta {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center;
  padding: clamp(32px, 5vw, 58px); overflow: hidden; border-radius: 38px; background: #fff;
  border: 1px solid var(--pp-stone); box-shadow: var(--pp-shadow);
}
.pp-final-cta:before {
  content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 100%;
  background: linear-gradient(180deg, var(--pp-gold-2), var(--pp-blue));
}
.pp-final-cta .pp-title { font-size: clamp(23px, 2.3vw, 30px); }
.pp-final-cta .pp-actions { justify-content: flex-end; margin-top: 0; min-width: 304px; }
.pp-final-cta .pp-btn-ghost { color: var(--pp-blue); border-color: rgba(20,104,168,.28); background: #fff; }
.pp-final-cta .pp-btn-ghost:hover, .pp-final-cta .pp-btn-ghost:focus { color: var(--pp-ink); border-color: var(--pp-gold); }
@media (max-width: 1100px) {
  .pp-hero-inner, .pp-grid-2, .pp-heading-row, .pp-difference-layout, .pp-zone-card, .pp-final-cta { grid-template-columns: 1fr; }
  .pp-hero-panel { max-width: 420px; }
  .pp-service-grid, .pp-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-quote:nth-child(2), .pp-quote:nth-child(4) { transform: none; }
  .pp-final-cta .pp-actions, .pp-town-list { justify-content: flex-start; }
  .pp-final-cta .pp-actions { min-width: 0; margin-top: 4px; }
}
@media (max-width: 767px) {
  .pp-container { width: min(100% - 28px, 1180px); }
  .pp-section { padding: 72px 0; }
  .pp-hero-luxe { min-height: auto; padding: 104px 0 88px; }
  .pp-hero-luxe h1 { font-size: clamp(28px, 7.8vw, 34px); }
  .pp-hero-luxe p { font-size: 17px; }
  .pp-hero-panel { padding: 24px; }
  .pp-proof-strip { margin-top: -24px; }
  .pp-proof-grid { grid-template-columns: 1fr; }
  .pp-proof-item { min-height: 0; border-right: 0; border-bottom: 1px solid var(--pp-stone); padding: 26px; }
  .pp-service-grid, .pp-testimonial-grid { grid-template-columns: 1fr; }
  .pp-service-tile { min-height: 310px; }
  .pp-signature-card { min-height: 0; border-radius: 28px; }
  .pp-difference-card { grid-template-columns: 1fr; }
  .pp-big-number { position: relative; top: 0; }
  .pp-actions { flex-direction: column; align-items: stretch; }
  .pp-btn { width: 100%; text-align: center; }
  .pp-town-list span { width: 100%; justify-content: center; }
}
.pp-home-premium { font-size: 15px; line-height: 1.65; }
.pp-home-premium p { font-size: 15px; line-height: 1.65; }
.pp-title { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.pp-hero-luxe h1 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.13; letter-spacing: -.035em; }
.pp-hero-luxe p { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.68; }
.pp-lead, .pp-copy-block p { font-size: 15px; line-height: 1.75; }
.pp-final-cta .pp-title { font-size: clamp(23px, 2.3vw, 30px); }
.pp-hero-panel strong { font-size: 46px; }
.pp-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pp-service-tile {
  min-height: 335px;
  background-image: linear-gradient(180deg, rgba(7,20,38,.10) 0%, rgba(7,20,38,.35) 42%, rgba(7,20,38,.94) 100%), var(--service-photo);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: transform .32s ease, box-shadow .32s ease, background-size .32s ease;
}
.pp-service-tile:nth-child(n) {
  background-image: linear-gradient(180deg, rgba(7,20,38,.10) 0%, rgba(7,20,38,.35) 42%, rgba(7,20,38,.94) 100%), var(--service-photo);
  background-position: center; background-size: cover;
}
.pp-service-tile::before { background: linear-gradient(180deg, transparent 20%, rgba(7,20,38,.34) 100%); transition: background .3s ease; }
.pp-service-tile:hover::before, .pp-service-tile:focus-within::before { background: linear-gradient(180deg, rgba(20,104,168,.12), rgba(7,20,38,.65)); }
.pp-service-tile h3 { font-size: 20px; line-height: 1.25; }
.pp-service-tile p { font-size: 14px; line-height: 1.55; }
.pp-service-tile a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pp-service-tile:focus-within { outline: 3px solid var(--pp-gold); outline-offset: 3px; }
.pp-difference-list { margin-top: 34px; }
#footer.pp-footer {
  color: #fff;
  background: radial-gradient(circle at 14% 12%, rgba(201,161,74,.18), transparent 24rem),
                radial-gradient(circle at 86% 58%, rgba(20,104,168,.28), transparent 28rem),
                linear-gradient(135deg, #071426 0%, #0a1f3b 62%, #102b4f 100%);
}
#footer.pp-footer .footer-content, #footer.pp-footer .copyright-content, #footer.pp-footer .widget { background: transparent; color: #fff; }
#footer.pp-footer h4, #footer.pp-footer p, #footer.pp-footer li, #footer.pp-footer .post-thumbnail-content, #footer.pp-footer .copyright-text, #footer.pp-footer strong {
  color: #fff;
}
#footer.pp-footer a { color: rgba(255,255,255,.92); }
#footer.pp-footer a:hover, #footer.pp-footer a:focus { color: var(--pp-gold-2); }
#footer.pp-footer .copyright-content { border-top: 1px solid rgba(255,255,255,.18); }
#footer.pp-footer .list-icon i { color: var(--pp-gold-2); }
@media (max-width: 1100px) {
  .pp-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pp-hero-luxe h1 { font-size: clamp(28px, 7.8vw, 34px); }
  .pp-hero-luxe p, .pp-lead, .pp-copy-block p { font-size: 15px; }
  .pp-title, .pp-final-cta .pp-title { font-size: clamp(22px, 6vw, 27px); }
  .pp-service-grid { grid-template-columns: 1fr; }
  .pp-service-tile { min-height: 310px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-service-tile { transition: none; }
}


/* ==========================================================
   SERVICES — PHOTOS EN HTML (solution sans variables CSS)
   Les images sont de vraies balises <img>, puis un overlay CSS.
   Ce bloc peut rester à la fin de css/accueil.css.
   ========================================================== */
.pp-home-premium .pp-service-grid > .pp-service-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0a1f3b;
}
.pp-home-premium .pp-service-grid > .pp-service-tile > img.pp-service-photo {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: transform .4s ease;
}
.pp-home-premium .pp-service-grid > .pp-service-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,rgba(7,20,38,.10) 0%,rgba(7,20,38,.34) 42%,rgba(7,20,38,.94) 100%);
    pointer-events: none;
}
.pp-home-premium .pp-service-grid > .pp-service-tile::after {
    z-index: 2;
    pointer-events: none;
}
.pp-home-premium .pp-service-grid > .pp-service-tile .pp-service-no,
.pp-home-premium .pp-service-grid > .pp-service-tile h3,
.pp-home-premium .pp-service-grid > .pp-service-tile p {
    position: relative;
    z-index: 3;
}
.pp-home-premium .pp-service-grid > .pp-service-tile .pp-service-no {
    position: absolute;
}
.pp-home-premium .pp-service-grid > .pp-service-tile:hover > img.pp-service-photo {
    transform: scale(1.055);
}
.pp-home-premium .pp-service-grid > .pp-service-tile:hover::before {
    background: linear-gradient(180deg,rgba(7,20,38,.08) 0%,rgba(7,20,38,.30) 42%,rgba(7,20,38,.88) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .pp-home-premium .pp-service-grid > .pp-service-tile > img.pp-service-photo {
        transition: none;
    }
}

/* ==========================================
   ENTREPRISE PONTOU
   ZONES D'INTERVENTION + CTA
   DEUX COLONNES
   ========================================== */

/* Section commune */
.pp-zone-cta-section {
    padding: 80px 0;
}

/* Deux colonnes de largeur égale */
.pp-zone-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Mise en forme commune des deux pavés */
.pp-zone-cta-grid .pp-zone-card,
.pp-zone-cta-grid .pp-final-cta {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 480px;
    height: 100%;
    padding: 38px;
    border-radius: 28px;
}

/* Titres harmonisés */
.pp-zone-cta-grid .pp-title,
.pp-zone-cta-grid .pp-final-cta .pp-title {
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.22;
}

/* Paragraphes */
.pp-zone-cta-grid .pp-lead {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.75;
}

/* ==========================================
   COLONNE GAUCHE : ZONES
   ========================================== */

.pp-zone-cta-grid .pp-zone-card {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(20,104,168,.28),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            #071426 0%,
            #0a1f3b 60%,
            #102b4f 100%
        );

    color: #fff;
}

/* Titre et texte blancs */
.pp-zone-cta-grid .pp-zone-card .pp-title,
.pp-zone-cta-grid .pp-zone-card .pp-lead {
    color: #fff;
}

/* Villes alignées en bas du pavé */
.pp-zone-cta-grid .pp-town-list {
    margin-top: auto;
    padding-top: 30px;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 9px;
}

/* Étiquettes des villes */
.pp-zone-cta-grid .pp-town-list span {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================
   COLONNE DROITE : CTA
   ========================================== */

.pp-zone-cta-grid .pp-final-cta {
    background: #fff;
    border: 1px solid #e5e8ed;
}

/* Trait décoratif doré */
.pp-zone-cta-grid .pp-final-cta:before {
    width: 5px;
    background: linear-gradient(
        180deg,
        #f0d27b,
        #c9a14a
    );
}

/* Boutons alignés en bas */
.pp-zone-cta-grid .pp-final-cta .pp-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-top: auto;
    padding-top: 30px;
}

/* Boutons légèrement plus compacts */
.pp-zone-cta-grid .pp-final-cta .pp-btn {
    min-height: 48px;
    padding: 13px 20px;
    font-size: 12px;
}

/* ==========================================
   RESPONSIVE TABLETTE
   ========================================== */

@media (max-width: 900px) {

    .pp-zone-cta-grid {
        grid-template-columns: 1fr;
    }

    .pp-zone-cta-grid .pp-zone-card,
    .pp-zone-cta-grid .pp-final-cta {
        min-height: 0;
    }
}

/* ==========================================
   RESPONSIVE MOBILE
   ========================================== */

@media (max-width: 767px) {

    .pp-zone-cta-section {
        padding: 55px 0;
    }

    .pp-zone-cta-grid {
        gap: 20px;
    }

    .pp-zone-cta-grid .pp-zone-card,
    .pp-zone-cta-grid .pp-final-cta {
        padding: 28px 24px;
        border-radius: 24px;
    }

    .pp-zone-cta-grid .pp-title,
    .pp-zone-cta-grid .pp-final-cta .pp-title {
        font-size: 25px;
    }

    .pp-zone-cta-grid .pp-final-cta .pp-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pp-zone-cta-grid .pp-final-cta .pp-btn {
        width: 100%;
    }
}

/* =========================================
   ENTREPRISE PONTOU
   QUALIFICATIONS ET ENGAGEMENTS
   SOUS LE SLIDER
   ========================================= */

.pp-qualifications-strip {
    position: relative;
    z-index: 5;
    margin-top: -45px;
    padding-bottom: 35px;
}

/* Conteneur principal */
.pp-qualifications-inner {
    padding: 30px 34px 34px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(7,20,38,.14);
    border: 1px solid #e5e8ed;
}

/* Titre */
.pp-qualifications-heading {
    text-align: center;
    margin-bottom: 25px;
}

.pp-qualifications-heading .pp-kicker {
    margin-bottom: 12px;
}

.pp-qualifications-heading h2 {
    margin: 0;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    color: #071426;
}

/* Grille des cinq logos */
.pp-qualifications-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
}

/* Chaque qualification */
.pp-qualification-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 155px;
    padding: 16px 12px;
    border: 1px solid #e5e8ed;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

/* Images */
.pp-qualification-item img {
    display: block;
    width: 100%;
    max-width: 150px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 14px;
}

/* Légendes */
.pp-qualification-item span {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #253246;
}

/* Effet au survol */
.pp-qualification-item:hover {
    transform: translateY(-5px);
    border-color: #c9a14a;
    box-shadow: 0 12px 28px rgba(7,20,38,.10);
}

/* TABLETTE */
@media (max-width: 1000px) {

    .pp-qualifications-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

/* MOBILE */
@media (max-width: 600px) {

    .pp-qualifications-strip {
        margin-top: -22px;
    }

    .pp-qualifications-inner {
        padding: 25px 15px;
        border-radius: 22px;
    }

    .pp-qualifications-heading h2 {
        font-size: 22px;
    }

    .pp-qualifications-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }

    .pp-qualification-item {
        min-height: 135px;
        padding: 12px 8px;
    }

    .pp-qualification-item img {
        height: 75px;
        margin-bottom: 10px;
    }

    .pp-qualification-item:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================
   ENTREPRISE PONTOU
   BOUTONS DES CARTES SERVICES
   ========================================== */

/* Désactiver l'ancien lien couvrant toute la carte */
.pp-home-premium .pp-service-tile a::after {
    content: none;
    display: none;
}

/* Bouton de découverte */
.pp-home-premium .pp-service-tile .pp-service-cta {
    position: relative;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 10px;

    margin-top: 22px;
    padding: 12px 18px;

    border-radius: 30px;
    border: 1px solid #c9a14a;

    background: #c9a14a;
    color: #071426;

    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;

    text-decoration: none;

    transition: background .25s ease,
                color .25s ease,
                transform .25s ease;
}

/* Effet au survol */
.pp-home-premium .pp-service-tile .pp-service-cta:hover,
.pp-home-premium .pp-service-tile .pp-service-cta:focus {
    background: #f0d27b;
    color: #071426;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Flèche */
.pp-service-cta span {
    font-size: 18px;
    line-height: 1;
}

/* Navigation au clavier */
.pp-service-cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}


/* TITRES CLIQUABLES DES CARTES SERVICES */

/* Supprime l'ancien lien invisible sur toute la carte */
.pp-home-premium .pp-service-tile h3 a::after {
    content: none;
    display: none;
}

.pp-home-premium .pp-service-tile .pp-service-title-link {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 10px 15px;
    border: 1px solid rgba(240,210,123,.65);
    border-radius: 10px;

    background: rgba(7,20,38,.35);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;

    transition: background .25s ease,
                border-color .25s ease;
}

/* Flèche dorée */
.pp-service-title-link span {
    color: #f0d27b;
    font-size: 22px;
}

/* Effet au survol */
.pp-home-premium .pp-service-tile .pp-service-title-link:hover,
.pp-home-premium .pp-service-tile .pp-service-title-link:focus {
    background: rgba(201,161,74,.25);
    border-color: #f0d27b;
    color: #ffffff;
}

/* ==============================================================
   ENTREPRISE PONTOU — CARROUSEL CHANTIERS AVANT / APRÈS
   À ajouter à la FIN de css/accueil.css
   Photos source : portrait 1200 × 1600 px (3:4), même angle et même cadrage.
   ============================================================== */

/* À l’écran large, texte à gauche + comparateur vertical à droite :
   section compacte malgré les photos en portrait. */
.pp-home-premium .pp-ba-section { padding: 76px 0; }
.pp-home-premium .pp-ba-heading { max-width: 850px; margin: 0 auto 34px; text-align: center; }
.pp-home-premium .pp-ba-heading .pp-kicker { justify-content: center; }
.pp-home-premium .pp-ba-heading .pp-title { color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.25; }
.pp-home-premium .pp-ba-heading .pp-lead { margin: 17px auto 0; color: rgba(255,255,255,.83); font-size: 15px; }

.pp-home-premium .pp-ba-carousel { width: 100%; max-width: 485px; min-width: 0; margin: 0 auto; }
.pp-home-premium .pp-ba-slide {
    margin: 0; padding: 12px; border-radius: 24px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.21);
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
}
.pp-home-premium .pp-ba-slide[hidden] { display: none !important; }
.pp-home-premium .pp-ba-visual {
    --pp-ba-reveal: 18%;
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    border-radius: 16px; overflow: hidden; isolation: isolate;
    background: #1d3550;
}
.pp-home-premium .pp-ba-photo {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    /* contain garantit qu'aucune partie d'une photo portrait n'est coupée.
       Idéalement les deux photos d'un chantier sont au même ratio 3:4. */
    object-fit: contain; object-position: center;
    max-width: none; margin: 0; border: 0;
    user-select: none; pointer-events: none;
}
.pp-home-premium .pp-ba-photo-after { z-index: 1; }
.pp-home-premium .pp-ba-photo-before {
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--pp-ba-reveal)) 0 0);
}
.pp-home-premium .pp-ba-tag {
    position: absolute; z-index: 3; top: 14px;
    padding: 7px 13px; border-radius: 999px;
    font: 800 11px/1.2 Montserrat, Arial, sans-serif;
    text-transform: uppercase; letter-spacing: .08em;
    pointer-events: none;
}
.pp-home-premium .pp-ba-tag-before { left: 14px; background: rgba(7,20,38,.88); color: #fff; }
.pp-home-premium .pp-ba-tag-after { right: 14px; background: #f0d27b; color: #071426; }
.pp-home-premium .pp-ba-handle {
    position: absolute; z-index: 4; top: 0; bottom: 0;
    left: var(--pp-ba-reveal); width: 2px; background: #fff;
    transform: translateX(-50%); pointer-events: none;
    box-shadow: 0 0 0 1px rgba(7,20,38,.16);
}
.pp-home-premium .pp-ba-handle span {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    border: 3px solid #fff; color: #fff;
    background: rgba(7,20,38,.76);
    box-shadow: 0 4px 22px rgba(0,0,0,.20);
    font: 800 25px/1 Arial,sans-serif;
}
.pp-home-premium .pp-ba-range {
    position: absolute; inset: 0; z-index: 5;
    display: block; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize;
    -webkit-appearance: none; appearance: none;
    touch-action: pan-y;
}
.pp-home-premium .pp-ba-visual:focus-within { outline: 3px solid #f0d27b; outline-offset: -4px; }
.pp-home-premium .pp-ba-caption {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 14px;
    padding: 17px 13px 7px; color: #fff;
}
.pp-home-premium .pp-ba-caption h3 {
    margin: 0; color: #fff; font: 800 18px/1.3 Montserrat,Arial,sans-serif;
}
.pp-home-premium .pp-ba-caption span { color: rgba(255,255,255,.75); font-size: 13px; }
.pp-home-premium .pp-ba-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-top: 23px; color: #fff;
}
.pp-home-premium .pp-ba-arrow {
    width: 44px; height: 44px; display: inline-grid; place-items: center;
    padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.10); color: #fff;
    font-size: 23px; line-height: 1; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.pp-home-premium .pp-ba-arrow:hover,
.pp-home-premium .pp-ba-arrow:focus-visible { background: rgba(240,210,123,.22); border-color: #f0d27b; }
.pp-home-premium .pp-ba-count {
    font: 700 13px/1.3 Montserrat,Arial,sans-serif;
    letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.pp-home-premium .pp-ba-toggle {
    margin-left: 8px; padding: 8px 12px; border-radius: 999px;
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.85); cursor: pointer;
    font: 600 12px/1.4 Montserrat,Arial,sans-serif;
}
.pp-home-premium .pp-ba-toggle:hover,
.pp-home-premium .pp-ba-toggle:focus-visible { color: #f0d27b; border-color: #f0d27b; }

@media (min-width: 901px) {
    .pp-home-premium .pp-ba-section > .pp-container {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: clamp(30px, 5vw, 76px);
    }
    .pp-home-premium .pp-ba-heading {
        margin: 0;
        max-width: none;
        text-align: left;
    }
    .pp-home-premium .pp-ba-heading .pp-kicker {
        justify-content: flex-start;
    }
}


@media (max-width: 900px) {
    .pp-home-premium .pp-ba-carousel { max-width: 455px; }
}

@media (max-width: 767px) {
    .pp-home-premium .pp-ba-section { padding: 58px 0; }
    .pp-home-premium .pp-ba-heading { margin-bottom: 25px; }
    .pp-home-premium .pp-ba-heading .pp-title { font-size: 25px; }
    .pp-home-premium .pp-ba-slide { padding: 7px; border-radius: 18px; }
    .pp-home-premium .pp-ba-visual { border-radius: 12px; aspect-ratio: 3 / 4; }
    .pp-home-premium .pp-ba-tag { top: 9px; padding: 5px 9px; font-size: 9px; }
    .pp-home-premium .pp-ba-tag-before { left: 9px; }
    .pp-home-premium .pp-ba-tag-after { right: 9px; }
    .pp-home-premium .pp-ba-handle span { width: 38px; height: 38px; font-size: 20px; }
    .pp-home-premium .pp-ba-caption { padding: 13px 8px 7px; }
    .pp-home-premium .pp-ba-caption h3 { font-size: 16px; }
    .pp-home-premium .pp-ba-caption span { font-size: 11px; }
    .pp-home-premium .pp-ba-controls { gap: 12px; flex-wrap: wrap; }
    .pp-home-premium .pp-ba-toggle { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-home-premium .pp-ba-arrow { transition: none; }
}