/* ============================================================
   blocs.css — les sections remaniees. Chargee apres typo.css.

   1. .pz-pr : « reperes » et « ce que vous pouvez verifier sur
      nous » reunis. Les deux prenaient 1 180 px de hauteur a
      elles deux, sur toute la largeur, pour dire trois chiffres
      et trois garanties. Ici le chiffre de l annee porte
      l entree, les trois reperes tiennent sur une ligne en
      monospace, et le detail passe derriere un depliant — le
      meme dispositif que l accueil, sans le grand carton.
   ============================================================ */

/* La section portait 136 px de respiration en haut comme en bas, calibres
   pour un bloc deux fois plus grand. On les ramene a la taille du contenu :
   c'est la moitie du gain. */
/* La page fixe sa respiration de section dans son propre <style>, donc plus
   tard dans la cascade : il faut une specificite au-dessus de la sienne. */
section.pz-pr{padding-block:clamp(40px,4.4vw,62px)!important}
.pz-pr .wrap{padding-block:0}

.pz-pr-g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,60px);align-items:start}

/* Le titre descend d'un cran : la section doit se faire discrete,
   elle n'ouvre pas un chapitre, elle le ferme. */
.pz-pr .pz-pr-h{margin:10px 0 0;font-size:clamp(23px,2.2vw,31px)!important;
  font-weight:320!important;letter-spacing:-.032em!important;line-height:1.1}

/* Le chiffre de l'annee : c'est lui qui porte, pas le titre. */
.pz-pr-d{margin:clamp(14px,1.6vw,20px) 0 0;max-width:30ch;
  font-size:clamp(17px,1.5vw,22px);line-height:1.38;font-weight:300;
  letter-spacing:-.024em;color:var(--ink)}
.pz-pr-s{margin:12px 0 0;max-width:44ch;font-size:13.5px;line-height:1.62;
  color:var(--ink-soft)}

/* Les trois reperes, en postes separes par un filet. */
.pz-pr-dl{margin:0}
.pz-pr-dl>div{display:grid;grid-template-columns:clamp(84px,9vw,118px) minmax(0,1fr);
  gap:clamp(14px,1.6vw,24px);padding:13px 0;border-top:1px solid var(--stroke)}
.pz-pr-dl>div:first-child{border-top:0;padding-top:4px}
.pz-pr-dl dt{margin:0;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--warm-deep);padding-top:2px}
.pz-pr-dl dd{margin:0;font-size:13.5px;line-height:1.56;color:var(--ink-soft)}

/* Le depliant : ce qui se verifie, et ou. */
.pz-pr-p{margin-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--stroke)}
.pz-pr-p summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:14px;padding:15px 0 0;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  transition:color .3s}
.pz-pr-p summary::-webkit-details-marker{display:none}
.pz-pr-p summary:hover{color:var(--ink)}
.pz-pr-pm{position:relative;width:12px;height:12px;margin-left:auto}
.pz-pr-pm::before,.pz-pr-pm::after{content:"";position:absolute;
  background:var(--warm-deep);transition:transform .4s var(--ease)}
.pz-pr-pm::before{left:0;top:5.5px;width:12px;height:1px}
.pz-pr-pm::after{left:5.5px;top:0;width:1px;height:12px}
.pz-pr-p[open] .pz-pr-pm::after{transform:scaleY(0)}
.pz-pr-pi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--stroke);margin-top:16px}
.pz-pr-r{background:var(--canvas);padding:15px 17px 17px}
.pz-pr-r b{display:block;font-size:14px;font-weight:600;letter-spacing:-.018em;
  color:var(--navy)}
.pz-pr-r b::before{content:"";display:inline-block;width:8px;height:8px;
  background:var(--warm);margin-right:9px;vertical-align:1px}
.pz-pr-r p{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

/* Sur fond sombre, le meme bloc change d'encre. */
.dark-sec.pz-pr .pz-pr-d,.pz-sec-d.pz-pr .pz-pr-d{color:var(--text-w)}
.dark-sec.pz-pr .pz-pr-s,.pz-sec-d.pz-pr .pz-pr-s,
.dark-sec.pz-pr .pz-pr-dl dd,.pz-sec-d.pz-pr .pz-pr-dl dd{color:var(--text-w2)}
.dark-sec.pz-pr .pz-pr-dl>div,.pz-sec-d.pz-pr .pz-pr-dl>div,
.dark-sec.pz-pr .pz-pr-p,.pz-sec-d.pz-pr .pz-pr-p{border-color:var(--pz-trait-d)}
.dark-sec.pz-pr .pz-pr-pi,.pz-sec-d.pz-pr .pz-pr-pi{background:var(--pz-trait-d)}
.dark-sec.pz-pr .pz-pr-r,.pz-sec-d.pz-pr .pz-pr-r{background:var(--navy-2)}
.dark-sec.pz-pr .pz-pr-r b,.pz-sec-d.pz-pr .pz-pr-r b{color:var(--text-w)}
.dark-sec.pz-pr .pz-pr-r p,.pz-sec-d.pz-pr .pz-pr-r p{color:var(--text-w2)}

@media(max-width:860px){
  .pz-pr-g{grid-template-columns:minmax(0,1fr);gap:24px}
  .pz-pr-pi{grid-template-columns:minmax(0,1fr)}
  .pz-pr-d{max-width:none}
}

/* ============================================================
   2. .pz-offer — « ce qui se passe apres votre appel »
   La section convertit, on ne touche pas a ce qu'elle dit ni a
   son allure : le numero en repere, le titre court, le texte a
   cote. On lui reprend seulement sa respiration, qui etait
   calibree large, et on redonne de la largeur a la colonne de
   texte : a 484 px les paragraphes tombaient sur quatre lignes,
   a 580 ils en font trois.
   ============================================================ */

section.pz-offer{padding-block:clamp(38px,4vw,60px)!important}
.pz-offer .pz-lead{margin-bottom:clamp(18px,2vw,26px)!important;max-width:78ch}

/* La page sert deux mises en page : une colonne de texte sous le numero en
   dessous de 860 px, trois colonnes au-dessus. On ne retouche que la seconde,
   sinon le texte du telephone se retrouve dans la colonne du numero et
   l'etape passe de 130 a 1 200 px de haut. */
@media(min-width:861px){
  .pz-offer .pz-steps>li{padding-block:clamp(13px,1.5vw,18px)!important;
    grid-template-columns:clamp(54px,5vw,76px) minmax(0,.78fr) minmax(0,1.55fr)!important}
  .pz-offer .pz-steps p{max-width:none}
}

/* ============================================================
   3. .avis-sec — la section avis, alignee sur celle de l'accueil

   Le marquage de la page ne bouge pas : memes avis, meme script,
   meme fiche Google. C'est la presentation qui change. Les trois
   cartons a guillemets deviennent trois colonnes de texte
   separees par un filet, la note passe en gros chiffre leger a
   cote du titre, et le badge « avis Google » repete trois fois
   se reduit au G, pose en pied de chaque avis.
   ============================================================ */

/* La note descend sous le titre, comme sur l'accueil : a droite, son libelle
   se cassait sur quatre lignes. */
.avis-sec .avis-head{display:block;padding-bottom:clamp(18px,2.2vw,28px);
  margin-bottom:0!important}
.avis-sec .avis-head h2{max-width:20ch}

.avis-sec .avis-note{display:flex!important;flex-direction:row!important;
  align-items:baseline!important;flex-wrap:wrap;
  gap:0 clamp(14px,1.6vw,24px);text-align:left;justify-content:flex-start;
  width:100%;max-width:none;
  margin:clamp(18px,2vw,26px) auto 0 0!important}
.avis-sec .avis-note b{font-size:clamp(42px,4.4vw,64px);font-weight:250!important;
  letter-spacing:-.045em;line-height:.9;color:var(--text-w);font-family:var(--ft)}
.avis-sec .avis-note small{width:auto;font-family:var(--fm);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-w3);
  max-width:48ch;line-height:1.5}

/* Le grand guillemet ouvrant de chaque carton n'a plus de carton ou se poser. */
.avis-sec .avis::before{content:none!important}

/* Les avis : des colonnes, pas des cartons. Le defilement reste celui de la
   page - huit avis dans un rail horizontal, trois a l'ecran - on ne touche
   qu'a l'habillage : le fond des cartons s'efface, le filet de separation
   passe sur le bord gauche de chaque colonne. */
.avis-sec .avis-row{background:transparent!important;gap:0!important;
  border-top:1px solid rgba(255,255,255,.16);padding-right:0}
.avis-sec .avis{background:transparent!important;border:0!important;
  border-left:1px solid rgba(255,255,255,.16)!important;
  border-radius:0!important;box-shadow:none!important;
  padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,30px) clamp(16px,1.8vw,22px)}
.avis-sec .avis:hover{background:transparent!important}
.avis-sec .avis:first-child{border-left:0!important;padding-left:0}
.avis-sec .avis blockquote{margin:0;padding:0;border:0;order:1}
.avis-sec .avis blockquote::before,.avis-sec .avis blockquote::after{content:none}
.avis-sec .avis blockquote p{margin:0;font-size:13.5px;line-height:1.66;
  color:var(--text-w2);font-style:normal}
.avis-sec .avis footer{order:2;margin-top:auto;padding-top:clamp(14px,1.6vw,20px)}
.avis-sec .avis footer div{font-size:13.5px;font-weight:500;letter-spacing:-.014em;
  color:var(--text-w)}
.avis-sec .avis footer div span{display:block;margin-top:4px;font-family:var(--fm);
  font-size:9.5px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-w3)}

/* Le badge repete trois fois se reduit au G, pose en pied. */
.avis-sec .avis-top{order:3;margin-top:12px;display:flex;align-items:center;
  justify-content:flex-end;gap:0;background:none;border:0;padding:0}
.avis-sec .avis-top span{display:none}
.avis-sec .avis-g-ico{width:15px;height:15px;opacity:.9}

@media(max-width:860px){
  .avis-sec .avis-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .avis-sec .avis{padding-left:clamp(16px,4vw,22px)}
  .avis-sec .avis:first-child{padding-left:0}
}

/* ============================================================
   PR1 — « Rien ne vous engage / Voilà ce qui nous engage »
   La section fusionnée reprise par l'idée : à cet endroit le
   visiteur est convaincu techniquement, ce qui le retient c'est
   le risque. Les deux anciennes sections disaient les deux faces
   d'une même chose. La couleur ne décore pas, elle porte la
   phrase : le papier pour ce qui n'engage à rien, le marine pour
   ce qui engage.
   ============================================================ */
section.pz-pr1{padding:0!important;background:transparent!important}
section.pz-pr1 > .wrap{max-width:none!important;padding:0!important;width:100%}
.pz-pr1-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pz-pr1-c{padding:clamp(32px,3.8vw,50px) clamp(22px,3.6vw,58px) clamp(30px,3.4vw,46px);
  display:flex;flex-direction:column}
/* Le versant clair porte moins de texte que le marine. Plutôt que de
   laisser un fond vide sous ses trois repères, on les répartit sur la
   hauteur : le côté qui n'engage à rien respire, celui qui engage est
   dense. L'écart devient un argument au lieu d'un trou. */
.pz-pr1-clair .pz-pr-dl{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.pz-pr1-clair{background:#F4F6F8;color:#0B1A2B}
.pz-pr1-nuit{background:#0A1F33;color:#F4F6F8}

.pz-pr1-c .pz-k{margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase}
.pz-pr1-clair .pz-k{color:#9A6A1E}
.pz-pr1-nuit .pz-k{color:#C28840}
.pz-pr1-c h2.pz-pr-h{margin:13px 0 0!important;font-size:clamp(24px,2.3vw,32px)!important;
  font-weight:300!important;letter-spacing:-.032em!important;line-height:1.08!important}
.pz-pr1-c h2.pz-pr-h b{font-weight:680!important;letter-spacing:-.038em!important}
.pz-pr1-clair h2.pz-pr-h{color:#0B1A2B!important}
.pz-pr1-nuit h2.pz-pr-h{color:#F4F6F8!important}
.pz-pr1-c .pz-pr-d{margin:13px 0 0;max-width:44ch;font-size:14.5px;line-height:1.6}
.pz-pr1-clair .pz-pr-d{color:#44525F}
.pz-pr1-nuit .pz-pr-d{color:rgba(244,246,248,.74)}

/* le relevé : le repère en monospace à gauche, la précision à droite,
   une ligne par entrée, séparées par un filet */
.pz-pr1-c .pz-pr-dl{margin:24px 0 0}
.pz-pr1-c .pz-pr-dl > div{display:grid;grid-template-columns:118px minmax(0,1fr);
  gap:18px;padding:12px 0;align-items:start}
.pz-pr1-clair .pz-pr-dl > div{border-top:1px solid rgba(11,26,43,.14)}
.pz-pr1-nuit .pz-pr-dl > div{border-top:1px solid rgba(244,246,248,.16)}
.pz-pr1-c .pz-pr-dl dt{font-family:'Geist Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding-top:3px;line-height:1.5}
.pz-pr1-clair .pz-pr-dl dt{color:#9A6A1E}
.pz-pr1-nuit .pz-pr-dl dt{color:#C28840}
.pz-pr1-c .pz-pr-dl dd{margin:0;font-size:13.5px;line-height:1.58}
.pz-pr1-clair .pz-pr-dl dd{color:#44525F}
.pz-pr1-nuit .pz-pr-dl dd{color:rgba(244,246,248,.72)}

@media(max-width:860px){
  .pz-pr1-g{grid-template-columns:minmax(0,1fr)}
  .pz-pr1-c .pz-pr-dl > div{grid-template-columns:minmax(0,1fr);gap:6px}
  .pz-pr1-clair .pz-pr-dl{display:block}
  .pz-pr1-c .pz-pr-dl dt{padding-top:0}
}

/* ============================================================
   V1 — la photo traverse l'arête
   Le constat qui commande tout : sur la page étanchéité de toit
   terrasse, la première vraie photo arrivait à 2 015 px du haut.
   Deux écrans et demi avant qu'un copropriétaire voie un toit.
   Une photo posée à cheval sur l'arête entre la bande claire et
   la bande sombre la fait remonter à 780. Elle appartient au
   sombre et ne mord que d'un cinquième sur le clair : assez pour
   qu'on voie qu'elle traverse, pas assez pour creuser du vide
   blanc au-dessus.
   ============================================================ */
main .enbref:has(+ .pz-v1-surplomb){
  padding-bottom:clamp(34px,5.3vw,76px)!important;border-bottom:0!important}

section.pz-offer-v1{position:relative;padding-block:clamp(34px,3.6vw,52px)!important}
/* Le débord ne vaut que s'il y a une bande claire au-dessus dont le bas est
   vide. Sur les pages de zone, ce qui précède la section est la barre d'ancres :
   la photo passait dessus et mangeait une entrée. Par défaut elle se tient donc
   dans la bande sombre, et elle ne remonte que derrière « en bref ». */
.pz-v1-ph{float:right;width:clamp(240px,27vw,392px);
  margin:4px 0 26px clamp(28px,3.4vw,56px);overflow:hidden;
  box-shadow:0 34px 60px -30px rgba(0,0,0,.8);z-index:2}
.pz-v1-surplomb .pz-v1-ph{position:absolute;float:none;margin:0;
  right:clamp(20px,4.2vw,64px);top:0;transform:translateY(-20%)}
/* le flottant est contenu : sans ca, sur une section ou le texte serait plus
   court que la photo, celle-ci depasserait sur la section suivante */
.pz-offer-v1 .wrap{display:flow-root}
.pz-v1-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Le titre et le chapô se rangent à gauche de la photo. Une largeur en
   ch ne suffit pas : la page impose sa propre largeur au h2. On réserve
   donc la bande de droite en dur, et le contrôle vérifie à chaque
   largeur qu'aucun des deux ne passe sous la photo. */
main .pz-offer-v1 h2.pz-xl{font-size:clamp(27px,2.9vw,40px)!important;
  max-width:none!important}
main .pz-v1-surplomb h2.pz-xl{padding-right:clamp(0px,28vw,350px)}
/* Le libellé est une ligne courte : il lui faut juste de quoi passer à
   gauche de la photo, pas la réserve du titre, sinon il casse en deux. */
/* Le libellé porte déjà une largeur maximale venue de la page : la réserve
   se retranchait dessus et le cassait en deux. On lève la largeur, on garde
   la réserve. */
.pz-offer-v1 .pz-k{max-width:none!important}
.pz-offer-v1 .pz-lead{max-width:none!important;font-size:16px!important}
.pz-v1-surplomb .pz-k{padding-right:clamp(0px,25.5vw,300px)}
.pz-v1-surplomb .pz-lead{padding-right:clamp(0px,28vw,350px)}

/* Les quatre étapes. Deux dispositions selon ce qui précède la section :
   - derrière « en bref », la photo déborde vers le haut, elle ne descend pas
     dans les étapes, qui prennent toute la largeur sur deux rangées de deux ;
   - sinon la photo se tient dans la bande sombre et occupe la droite sur toute
     sa hauteur, donc les étapes se rangent en une colonne à sa gauche.
   Sans ça, sur les pages de zone, la photo passait sur l'étape 02. */
.pz-offer-v1 .pz-steps{display:block;border-top:0!important;
  margin-top:clamp(18px,2vw,26px)!important}
.pz-v1-surplomb .pz-steps{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.6vw,64px)}
.pz-offer-v1 .pz-steps li{display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;gap:0 16px!important;
  align-items:start!important;border-bottom:0!important;
  border-top:1px solid var(--pz-trait-d)!important;padding:17px 0 19px!important}
.pz-offer-v1 .pz-steps li>div{display:block!important;min-width:0}
.pz-offer-v1 .pz-steps b{font-size:19px!important;padding-top:2px}
.pz-offer-v1 .pz-steps h3{font-size:18px!important;font-weight:560!important;
  margin:0 0 7px!important;letter-spacing:-.022em}
.pz-offer-v1 .pz-steps p{font-size:14px!important;line-height:1.56!important;max-width:none!important}

/* ---- la mise en garde -------------------------------------
   Plus de boîte : c'est elle qui faisait ressembler l'alerte à un
   bandeau de cookies. Le signe plus tient lieu de marque, décalé
   d'un cran au-dessus de la ligne du libellé. */
.pz-av{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;
  border-top:1px solid rgba(26,39,54,.18);border-bottom:1px solid rgba(26,39,54,.18);
  padding:20px 0 22px;margin-top:clamp(24px,2.8vw,34px);background:none;box-shadow:none}
.pz-av::before,.pz-av::after{content:none!important}
.pz-av-p{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:29px;
  line-height:1;letter-spacing:-.04em;margin-top:-5px;text-align:center;color:#0A1F33}
.pz-av-k{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#9A6A1E;margin-bottom:9px}
.pz-av p{margin:0!important;font-size:17px!important;line-height:1.52!important;
  font-weight:500!important;letter-spacing:-.016em;color:var(--ink,#1A2736)!important}
.pz-av p b{font-weight:700}

@media(max-width:860px){
  .pz-v1-ph,.pz-v1-surplomb .pz-v1-ph{position:static!important;
    float:none!important;transform:none!important;width:auto!important;margin:0 0 22px!important;
    box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
  .pz-offer-v1 .pz-steps,.pz-v1-surplomb .pz-steps{
    display:block!important;padding-right:0!important}
  main .pz-offer-v1 h2.pz-xl,.pz-offer-v1 .pz-k,.pz-offer-v1 .pz-lead,
  main .pz-v1-surplomb h2.pz-xl,
  .pz-v1-surplomb .pz-k,
  .pz-v1-surplomb .pz-lead{padding-right:0!important}
  main .enbref:has(+ .pz-v1-surplomb){padding-bottom:clamp(28px,3.4vw,40px)!important}
}