/* Layout B — pages texte long (construction.php?page=...&lang=...)
   Objectif: hiérarchie (titre / sous-titre / box), lisibilité, proportions.
   Nettoyage: pas de hover, pas de patches empilés, pas de doublons.
*/

/* 1) Titre: espace sous la topbar */
.main-title.main-title-construction {
  margin-top: 100px;
  margin-bottom: 17px;
  font-size: 4.2rem;
}

/* 2) Sous-titre: aligné avec le bloc blanc
   Le container .content-blocks a max-width:980px + padding:0 18px
   → le bloc blanc fait au max 980-36=944px.
   La barre subtitle doit faire la même largeur pour s'aligner parfaitement. */
.construction-subtitle {
  max-width: calc(980px - 36px); /* 944px = même largeur que le bloc blanc */
  width: calc(100% - 36px);      /* responsive: même offset sur petits écrans */
  margin: 10px auto 18px auto;
  padding: 10px 16px;
  border-radius: 0;  /* sprint-06 retour Arnaud : coins carrés partout (cf. D29 sprint-05) */
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.58);
  text-align: center;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,0.70);
}

.construction-subtitle p {
  margin: 0;                    /* pas de marge parasite */
  text-align: center;
  text-align-last: center;
}


/* 3) Container principal */
.content-blocks.construction-content {
  display: block;
  max-width: 980px;
  margin: 0 auto 6px auto;
  padding: 0 18px;
}

/* 4) Bloc blanc: rendu stable + on écrase les styles globaux de .square-block */
.content-blocks.construction-content .square-block {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;

  display: block !important;
  text-align: left !important;

  border-radius: 0;  /* sprint-06 retour Arnaud : coins carrés partout */

  /* padding final (fusion des versions précédentes) */
  padding: 14px 28px 26px 28px;

  /* Fond + bordure (alignés sur landing-box index) */
  background: var(--card-bg, rgba(0, 0, 0, 0.28)) !important;
  backdrop-filter: var(--card-blur, blur(3px)) !important;
  -webkit-backdrop-filter: var(--card-blur, blur(3px)) !important;
  border: var(--card-border, 1px solid rgba(255, 255, 255, 0.15)) !important;
  color: #ffffff !important;

  /* Animation douce comme l'index (hover géré plus bas) */
  transition: var(--card-transition, background 0.3s, transform 0.25s) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Hover : on ASSOMBRIT au lieu d'éclaircir.
 * Raison : sur toutes les pages layout-b (about, approche, transparence,
 * syndic, property, services, change, legal, logiciel), le texte est dense
 * en blanc sur fond translucide sombre. Le hover qui éclaircissait
 * (rgba(255,255,255,0.18)) réduisait drastiquement le contraste — texte
 * blanc sur fond presque blanc. Le hover sombre augmente le contraste
 * tout en conservant le feedback visuel translateY(-2px). */
.content-blocks.construction-content .square-block:hover {
  background: rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-2px);
}

/* ============================================================
   PAGE LOGICIEL — 3 cards clones EXACTS du canon .landing-box index
   (validé Arnaud 2026-05-16 : "index est le modèle, mêmes titres,
   police, espacement").
   Reproduit à l'identique :
   - padding 18px 32px (canon landing-box)
   - border-radius 16px
   - background rgba(0,0,0,0.28) + border 1px translucide
   - display flex column + gap 10px (espacement vertical h2/p/ul)
   - h2 : font-size 1.5em (= .box-right .box-title pour 3 cards),
     font-weight 700, text-shadow 0 2px 8px rgba(0,0,0,0.5), margin 0
   - p : font-size 0.9em, opacity 0.85, line-height 1.6 (= .box-desc)
   ============================================================ */
body.page-logiciel .content-blocks.construction-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1280px;
  align-items: stretch;
}

body.page-logiciel .content-blocks.construction-content .square-block {
  margin: 0 !important;
  padding: 18px 32px !important;
  border-radius: 0 !important;  /* sprint-06 retour Arnaud : coins carrés partout */
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  color: #fff !important;
}

/* Titre h2 = .box-title canon index (font-size 1.5em pour 3 cards) */
body.page-logiciel .content-blocks.construction-content .square-block h2 {
  font-size: 1.5em;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 0;
  line-height: 1.2;
  color: #fff;
}

/* Paragraphes = .box-desc canon index */
body.page-logiciel .content-blocks.construction-content .square-block p {
  font-size: 0.9em;
  opacity: 0.85;
  line-height: 1.6;
  margin: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* Listes à puces : gardent text-align left (lisibilité bullet+texte),
 * centrées en bloc dans la card (inline-block + auto margins). */
body.page-logiciel .content-blocks.construction-content .square-block ul {
  font-size: 0.9em;
  opacity: 0.85;
  line-height: 1.6;
  text-align: left !important;
  display: inline-block;
  margin: 0 auto !important;
  padding-left: 22px !important;
}

body.page-logiciel .content-blocks.construction-content .square-block li {
  margin-bottom: 6px;
}

/* Hover dédié page-logiciel : override le background !important du base rule
 * (sinon la règle générique .content-blocks .square-block:hover ne gagne pas
 * en spécificité face à body.page-logiciel ...). Assombrit pour lisibilité
 * contenu blanc dense (canon pages layout-b). */
body.page-logiciel .content-blocks.construction-content .square-block:hover {
  background: rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-3px);
}

/* Typo */
.content-blocks.construction-content .square-block p {
  margin: 0 0 14px 0;
  line-height: 1.62;
}

.content-blocks.construction-content .square-block h2 {
  margin: 18px 0 10px 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.content-blocks.construction-content .square-block h3 {
  margin: 16px 0 8px 0;
  font-size: 1.1rem;
  line-height: 1.25;
}

/* Alignement lecture: texte et listes en colonne */

.construction-content .square-block p {
  text-align: justify;
  text-align-last: left;
}

.construction-content .square-block h2,
.construction-content .square-block h3,
.construction-content .square-block strong {
  text-align: left;
}

/* Listes: indentation unique (suppression des doublons 18/26) */
.construction-content .square-block ul {
  margin: 10px 0 16px 0 !important;
  padding-left: 26px !important;
}

.construction-content .square-block li {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Liens */
.content-blocks.construction-content .square-block a {
  text-decoration: underline;
}

/* CTA (dernier paragraphe): on conserve ton rendu actuel (pas de hover) */
.content-blocks.construction-content .square-block p:last-child a {
  display: inline-block;
}

/* CTA wrapper: reduce gap between content and button + centrage (était inline) */
.cta-wrapper {
  margin-top: 0 !important;
  padding: 6px 20px 20px !important;
  text-align: center;
}

/* Mobile */
@media (max-width: 768px) {
  .main-title.main-title-construction {
    margin-top: 70px;
    margin-bottom: 10px;
    font-size: 1.8rem;
  }

  .construction-subtitle {
    padding: 10px 14px;
    font-size: 0.95rem;
    margin-top: 8px;
    margin-bottom: 14px;
  }

  .content-blocks.construction-content {
    padding: 0 12px;
  }

  .content-blocks.construction-content .square-block {
    padding: 14px 16px 22px 16px;
    border-radius: 0;  /* sprint-06 retour Arnaud : coins carrés partout, override mobile */
  }
}

/* --- FIX: homogénéiser l'interligne et empêcher les décalages causés par les retours à la ligne/espaces --- */
.content-blocks .square-block,
.construction-content .square-block {
  white-space: normal;          /* neutralise pre-line/pre-wrap si présent ailleurs */
}

.content-blocks .square-block p,
.content-blocks .square-block li {
  line-height: 1.35;            /* même rythme partout (paragraphes + bullets) */
}

.content-blocks .square-block p {
  margin: 0 0 10px 0;           /* évite les gros écarts entre paragraphes */
}

.content-blocks .square-block ul {
  margin: 6px 0 12px 18px;      /* cohérent visuellement */
  padding: 0;
}

.content-blocks .square-block li {
  margin: 0 0 4px 0;            /* bullets plus “serrés” et propres */
}


/* --- CANON: layout B (construction) --- */
.content-blocks.construction-content .square-block {
  text-align: left; /* titres et structure */
}

.content-blocks.construction-content .square-block h2,
.content-blocks.construction-content .square-block h3,
.content-blocks.construction-content .square-block strong {
  text-align: left;
}

/* Paragraphes: justifiés, interligne maîtrisé */
.content-blocks.construction-content .square-block p {
  text-align: justify;
  text-align-last: left;
  line-height: 1.25;
  margin: 0 0 8px 0;
}

/* Listes: lisibles et alignées à gauche (pas de justify sur li) */
.content-blocks.construction-content .square-block ul {
  padding-left: 26px;
  margin: 6px 0 10px 0;
}

.content-blocks.construction-content .square-block li {
  text-align: left;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
/* tighten bullets spacing (construction only) */
.content-blocks.construction-content .square-block ul {
  margin: 6px 0 10px 0 !important;
  padding-left: 26px !important;
}

.content-blocks.construction-content .square-block li {
  margin: 0 0 2px 0 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

/* ===== HERO 3 IMAGES (Services / A propos / Espace client) =====
   Objectif: 3 visuels selon la grande section, sans toucher au HTML.
   On s'appuie sur les classes body: page-syndic / page-property / page-services / page-about / page-approche / page-transparence / page-client
*/
body.construction-page {
  position: relative;
}


/* Prevent flash of global body background (style.css) on construction pages */
body.construction-page {
  background: none !important;
  background-image: none !important;
}

/* overlay global pour lisibilite */
body.construction-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  transform: scale(1.06);
  transform-origin: center;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.06);
  will-change: transform;
  animation: petzBgZoomTransform 3s ease-out forwards;
  background-repeat: no-repeat;
}

body.construction-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,0.25);
}

/* SERVICES: syndic + administration de biens + services complementaires */
body.construction-page.page-syndic::before,
body.construction-page.page-property::before,
body.construction-page.page-services::before {
  background-image: image-set(
    url("../img/pfaffenthal.webp") type("image/webp"),
    url("../img/pfaffenthal.jpg") type("image/jpeg")
  );
}

/* A PROPOS: about + approche + transparence */
body.construction-page.page-about::before,
body.construction-page.page-approche::before,
body.construction-page.page-transparence::before {
  background-image: image-set(
    url("../img/grund.webp") type("image/webp"),
    url("../img/grund.jpg") type("image/jpeg")
  );
  background-position: center 20%; /* montre le toit de l'église */
}

/* ESPACE CLIENT */
body.construction-page.page-client::before {
  background-image: image-set(
    url("../img/cathedrale.webp") type("image/webp"),
    url("../img/cathedrale.jpg") type("image/jpeg")
  );
}

/* Background zoom (same spirit as index, single-layer safe) */
@keyframes petzBgZoomTransform {
  from { transform: scale(1.06); }
  to   { transform: scale(1.00); }
}
/* --- Blog / Newsletter hero background --- */
body.construction-page.page-blog::before {
  background-image: image-set(
    url("../img/blog.avif") type("image/avif"),
    url("../img/blog.webp") type("image/webp"),
    url("../img/blog.jpg")  type("image/jpeg")
  );
}

/* --- Mentions légales --- */
body.construction-page.page-legal::before {
  background-image: image-set(
    url("../img/background_legal.avif") type("image/avif"),
    url("../img/background_legal.webp") type("image/webp"),
    url("../img/background_legal.jpg")  type("image/jpeg")
  );
}

/* --- Logiciel & Formations --- */
body.construction-page.page-logiciel::before {
  background-image: image-set(
    url("../img/bridge.webp") type("image/webp"),
    url("../img/bridge.jpg")  type("image/jpeg")
  );
}

/* --- Changement de syndic --- */
body.construction-page.page-change::before {
  background-image: image-set(
    url("../img/limpertsberg.webp") type("image/webp"),
    url("../img/limpertsberg.jpg")  type("image/jpeg")
  );
}

/* Évite que le CTA en bas de page passe sous la bottombar fixée */
body.construction-page {
  padding-bottom: 64px;
}