/* 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;
  /* TD-24-2 (sprint-25, retour Arnaud) : +18px d'air entre le titre et le
     sous-titre sur toutes les pages layout-B (à-propos, approche, transparence,
     syndic, property, immeubles-bureaux, services…). 17→35. À affiner à l'œil. */
  margin-bottom: 35px;
  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;

  /* CANON DU FONDU (sprint-26) : ⛔ PAS de backdrop-filter sous le `mask` du <main>.
     backdrop-filter crée une couche composite que le mask NE découpe PAS (Edge) → le
     contenu ne se fond pas sous les barres (bug syndic). Le corps long (.square-block)
     est un PANNEAU DE LECTURE : simple teinte opaque, du CONTENU NORMAL, qui se fond
     EXACTEMENT comme le titre/sous-titre (validés). Pas de verre dépoli ici (le
     background-attachment:fixed ne rend pas sous Edge dans un main masqué+fixe) :
     robustesse tous navigateurs > effet. Les petites cartes (FAQ, KB) gardent le
     verre dépoli, elles. */
  background: rgba(0, 0, 0, 0.42) !important;
  border: var(--card-border, 1px solid rgba(255, 255, 255, 0.15)) !important;
  color: #ffffff !important;
  /* Sprint-24 (retour Arnaud) : texte peu visible sur les pages service — ombre
     portée pour le faire ressortir, sans changer le fond (harmonie avec l'index). */
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.6);

  /* 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.55) !important;
  transform: none;
}

/* ============================================================
   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);
}

/* sprint-25 (retour Arnaud) : la PHOTO est aussi posée À L'INTÉRIEUR de <main>.
   Raison : main porte le `mask` (fondu du texte au scroll) qui l'isole en
   « backdrop-root » ; sans photo DANS main, les boîtes ne peuvent pas la flouter.
   main::before = photo (mêmes images que les bords body::before, définies plus bas),
   main::after = même voile 0.25. Les boîtes floutent CE calque → fondu ET blur. */
body.construction-page main#main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* sprint-26 (retour Arnaud « la photo bouge seulement dans les barres ») : ce
     calque photo INTÉRIEUR était STATIQUE (scale 1.0) alors que body::before ZOOME
     → le mask révélait le calque animé UNIQUEMENT dans ses trous (sous les barres),
     statique au milieu = couture visible. On SYNCHRONISE ce calque sur body::before
     (même départ scale 1.06, même animation 3s) → les deux bougent à l'identique,
     zoom uniforme, plus de couture. */
  transform: translateZ(0) scale(1.06);
  will-change: transform;
  animation: petzBgZoomTransform 3s ease-out forwards;
  pointer-events: none;
}
body.construction-page main#main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* SERVICES: syndic + administration de biens + services complementaires +
   immeubles de bureaux. Sprint-24 : la page immeubles-bureaux n'avait AUCUNE
   règle de fond (→ gris plat, défaut vu en prod) ; elle reprend le MÊME visuel
   (pfaffenthal) que les autres pages « services » pour l'homogénéité. */
body.construction-page.page-syndic::before,
body.construction-page.page-property::before,
body.construction-page.page-services::before,
body.construction-page.page-immeubles-bureaux::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 + Centre de connaissances hero background ---
   sprint-19 (Lot 0.A) : ?page=blog est redirigé (301) vers ?page=connaissances ;
   le KB hérite du MÊME traitement photo que les autres pages (le fond gris plat
   était un défaut — titre + cartes sans photo). Réutilise l'imagerie du Blog. */
body.construction-page.page-blog::before,
body.construction-page.page-connaissances::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/bridge.webp") type("image/webp"),
    url("../img/bridge.jpg")  type("image/jpeg")
  );
}

/* sprint-25 : MÊMES photos, posées sur main::before (calque intérieur à flouter). */
body.construction-page.page-syndic main#main::before,
body.construction-page.page-property main#main::before,
body.construction-page.page-services main#main::before,
body.construction-page.page-immeubles-bureaux main#main::before {
  background-image: image-set(
    url("../img/pfaffenthal.webp") type("image/webp"),
    url("../img/pfaffenthal.jpg") type("image/jpeg")
  );
}
body.construction-page.page-about main#main::before,
body.construction-page.page-approche main#main::before,
body.construction-page.page-transparence main#main::before {
  background-image: image-set(
    url("../img/grund.webp") type("image/webp"),
    url("../img/grund.jpg") type("image/jpeg")
  );
  background-position: center 20%;
}
body.construction-page.page-client main#main::before {
  background-image: image-set(
    url("../img/cathedrale.webp") type("image/webp"),
    url("../img/cathedrale.jpg") type("image/jpeg")
  );
}
body.construction-page.page-blog main#main::before,
body.construction-page.page-connaissances main#main::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")
  );
}
body.construction-page.page-legal main#main::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")
  );
}
body.construction-page.page-logiciel main#main::before,
body.construction-page.page-change main#main::before {
  background-image: image-set(
    url("../img/bridge.webp") type("image/webp"),
    url("../img/bridge.jpg")  type("image/jpeg")
  );
}
/* sprint-26 (TD-25-5) : page-faq omise du calque main#main::before (son fond est
   défini dans layout-a.css:83, pas ici) → les .faq-card n'avaient aucune photo
   intérieure à flouter. On pose la même photo dans main pour rétablir le blur. */
body.construction-page.page-faq main#main::before {
  background-image: image-set(
    url("../img/background_faq.avif") type("image/avif"),
    url("../img/background_faq.webp") type("image/webp"),
    url("../img/background_faq.jpg")  type("image/jpeg")
  );
}

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

/* ============================================================================
 * PAGE LOGICIEL — lisibilité + position (retour Arnaud, sprint-20)
 * Cette page réutilise les .landing-box de l'index (pas .square-block). Sur la
 * photo claire (ville), le texte blanc était « lavé » → on renforce le voile
 * sombre + opacité pleine, et on remonte un peu le contenu sous la topbar.
 * ==========================================================================*/
body.page-logiciel .main-title.main-title-construction {
  margin-top: 70px;   /* remonte le bloc (avant 100px) — « monter un peu ». */
}
body.page-logiciel .landing-box {
  background: rgba(0, 0, 0, 0.50);           /* voile plus dense → texte blanc net */
  border-color: rgba(255, 255, 255, 0.22);
}
body.page-logiciel .landing-box:hover {
  background: rgba(0, 0, 0, 0.60);
}
body.page-logiciel .box-desc {
  opacity: 1;                                 /* plein blanc (avant 0.85) */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); /* décolle le texte de la photo */
}