/*
Theme Name: Astonia
Theme URI: https://www.astonia.fr
Author: UlitIA Web Solutions
Description: Theme sur mesure pour Astonia — etancheite et couverture de toitures.
             Aucun constructeur visuel : la mise en page est verrouillee dans le code,
             les contenus sont edites par champs.
Version: 1.6.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: astonia
*/

/* ------------------------------------------------------------------
   Le CSS ci-dessous est repris tel quel de la maquette validee.
   Ne pas le reformater : les valeurs ont ete reglees au curseur avec
   le client et figees (ouverture au logo, parallaxe du bandeau,
   decoupe des realisations, colonne des boutons flottants).
   ------------------------------------------------------------------ */

:root{
  --ink:#242120; --navy:#262D44; --orange:#F4A800; --cream:#EFEBE7;
  --ink-2:#1A1817; --line:rgba(239,235,231,.16);
  --disp:'Bebas Neue','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --text:'Barlow',-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(20px,4vw,64px); --wrap:1600px; --read:1180px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:auto}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--text);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:.95;margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap.read{max-width:var(--read)}
.full{width:100%}
.logo svg{display:block;height:100%;width:auto}
.notice{background:var(--navy);color:var(--cream);font-size:13.5px;padding:9px var(--pad);text-align:center}
.notice b{color:var(--orange)}


/* ================= PAGE CONTACT ================= */
.ct-head{position:relative;overflow:hidden;background:var(--cream);padding:clamp(48px,7vh,86px) 0 clamp(34px,5vh,56px)}
/* la diagonale du depliant : aplat orange qui entre par la droite */
.ct-head:after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(46%,620px);
  background:var(--orange);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);z-index:0}
.ct-head .wrap{position:relative;z-index:1;max-width:var(--read)}
.ct-head h1{font-size:clamp(34px,5vw,62px);line-height:.96;max-width:16ch}
.ct-head .lead{max-width:52ch;margin:22px 0 0;font-size:clamp(16px,1.2vw,18.5px)}

.ct-form{background:#fff;padding:clamp(34px,5vw,60px);margin:-28px auto 0;position:relative;z-index:2;
  max-width:var(--read);box-shadow:0 18px 60px rgba(36,33,32,.09)}
.ct-form .grp{margin-bottom:26px}
.ct-form label,.ct-form .lg{display:block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;font-size:13px;color:var(--navy);margin-bottom:8px}
.ct-form .req:after{content:" *";color:#C0392B}
.ct-form select,.ct-form input[type=text],.ct-form input[type=tel],.ct-form input[type=email],.ct-form textarea{
  width:100%;padding:13px 14px;border:1px solid rgba(38,45,68,.28);background:var(--cream);
  font-family:var(--text);font-size:16px;color:var(--navy);border-radius:0;
  transition:border-color .2s,box-shadow .2s}
.ct-form select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;padding-right:44px}
.ct-form textarea{min-height:132px;resize:vertical}
.ct-form :focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,168,0,.24)}
.ct-form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ct-form fieldset{border:0;padding:0;margin:0 0 8px}
.ct-form legend{font-family:var(--disp);font-size:26px;color:var(--navy);padding:0;margin:34px 0 20px;
  position:relative}
.ct-form legend:after{content:"";display:block;width:52px;height:3px;background:var(--orange);margin-top:10px}
/* le formulaire se deplie : tout est masque tant que l objet n est pas choisi */
.ct-suite{display:none}
.ct-form.open .ct-suite{display:block;animation:ctIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes ctIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#g-soc{display:none} .ct-form.pro #g-soc{display:block}
.ct-drop{border:1px dashed rgba(38,45,68,.34);background:var(--cream);padding:24px;text-align:center}
.ct-drop input{display:block;margin:0 auto;font-family:var(--text);font-size:14px}
.ct-drop .hint{font-size:13.5px;opacity:.66;margin:10px 0 0}
.ct-cgu{display:flex;gap:12px;align-items:flex-start;margin:26px 0 22px;font-size:15px;line-height:1.5}
.ct-cgu input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange);flex:0 0 auto}
.ct-send{background:var(--orange);color:var(--ink);border:0;padding:17px 34px;cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:15px}
.ct-send:hover{background:#FFB811}
.ct-mentions{font-size:13px;line-height:1.62;opacity:.66;margin:26px 0 0;max-width:78ch}
.ct-ok{display:none;background:var(--navy);color:var(--cream);padding:26px 30px;margin-top:24px}
.ct-ok h3{font-size:24px;margin-bottom:8px;color:var(--cream)}
.ct-form.sent .ct-ok{display:block}
.ct-form.sent .ct-suite > fieldset,.ct-form.sent .ct-cgu,.ct-form.sent .ct-send{display:none}
.ct-ko{display:none;background:#8C2F22;color:#fff;padding:20px 24px;margin-top:20px;font-size:15.5px}
.ct-form.rate .ct-ko{display:block}
.ct-send[disabled]{opacity:.55;cursor:progress}

.ct-expl{padding:clamp(46px,7vh,80px) 0}
.ct-expl .wrap{max-width:var(--read)}
.ct-expl p{max-width:74ch;margin:0 0 1.05em}

.faq{background:#fff;padding:clamp(46px,7vh,80px) 0}
.faq .wrap{max-width:var(--read)}
.faq h2{font-size:clamp(28px,3.6vw,46px)}
.faq .h2rule:after{margin-bottom:34px}
.faq details{border-bottom:1px solid rgba(38,45,68,.16)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--disp);font-size:22px;letter-spacing:.02em;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:6px;top:50%;width:15px;height:2px;
  background:var(--orange);transform:translateY(-50%)}
.faq summary:before{content:"";position:absolute;right:12px;top:50%;width:2px;height:15px;
  background:var(--orange);transform:translateY(-50%);transition:transform .3s}
.faq details[open] summary:before{transform:translateY(-50%) scaleY(0)}
.faq details[open] summary{color:var(--orange)}
.faq .ans{padding:0 44px 22px 0;max-width:70ch}
@media (max-width:760px){
  .ct-form .two{grid-template-columns:1fr}
  .ct-head:after{width:64%;clip-path:polygon(52% 0,100% 0,100% 100%,0 100%)}
  .ct-form{margin-top:0}
}

/* ---- BOUTONS FLOTTANTS : bord droit, icone seule, s elargissent au survol ---- */
.dock{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;opacity:0;pointer-events:none;
  /* align-items:flex-end : le bouton elargi pousse vers la GAUCHE et ne deborde pas a droite */
  transition:opacity .7s ease}
.dock.on{opacity:1;pointer-events:auto}
.dock a{position:relative;display:flex;align-items:center;justify-content:flex-start;
  height:64px;width:64px;overflow:hidden;text-decoration:none;
  transition:width .38s cubic-bezier(.2,.7,.2,1)}
.dock a .ic{flex:0 0 64px;width:64px;height:64px;display:grid;place-items:center}
.dock a svg{width:26px;height:26px;fill:currentColor;display:block}
.dock a .lb{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;
  font-weight:600;font-size:12.5px;white-space:nowrap;padding-right:22px;
  opacity:0;transition:opacity .3s ease .06s}
.dock a:hover,.dock a:focus-visible{width:var(--w,214px)}
.dock a:hover .lb,.dock a:focus-visible .lb{opacity:1}
.dock .d1{background:var(--orange);color:var(--ink);--w:206px}
.dock .d2{background:var(--navy);color:var(--cream);--w:196px}
.dock .d3{background:#25D366;color:#fff;--w:178px}   /* vert officiel WhatsApp, glyphe blanc */
@media (max-width:820px){
  .dock{top:auto;bottom:18px;right:16px;transform:none;gap:10px}
  .dock a{width:54px;height:54px;border-radius:50%}
  .dock a .ic{flex:0 0 54px;width:54px;height:54px}
  .dock a:hover{width:54px} .dock .lb{display:none}
  .dock .d1{display:none}          /* le devis est deja dans le bandeau */
}

/* OUVERTURE — le signe net sur la video floutee, puis il s ouvre sur la page */
html.ouv-on{overflow:hidden;touch-action:none}
html.ouv-on .hero-logo,html.ouv-on .hero-claim,html.ouv-on .scrollcue{animation-play-state:paused}
.ouv{position:fixed;inset:0;z-index:200;pointer-events:none;
  --mk:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22213.578%22%20height%3D%22142.387%22%20viewBox%3D%220%200%20213.578%20142.387%22%3E%3Cpath%20d%3D%22M%20213.578%20142.387%20L%20177.984%20142.387%20L%20177.984%2088.992%20L%20213.578%20106.793%20Z%20M%20213.578%20142.387%20%20M%20177.984%200.000%20L%20177.984%2088.992%20L%20160.184%2088.992%20L%20124.586%20142.387%20L%200.000%20142.387%20L%20124.586%200.000%20Z%20M%20177.984%200.000%20%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");--w:600px;--h:400px;--ew:600px;--eh:400px;--iw:596px;--ih:396px;--ox:0px;--oy:0px}
.ouv-veil{position:absolute;inset:0;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  background:rgba(38,45,68,.50);
  -webkit-mask-image:var(--mk),linear-gradient(#000,#000);mask-image:var(--mk),linear-gradient(#000,#000);
  -webkit-mask-size:var(--w) var(--h),100% 100%;mask-size:var(--w) var(--h),100% 100%;
  -webkit-mask-position:center,center;mask-position:center,center;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude}
.ouv-edge{position:absolute;inset:0;background:var(--orange);
  -webkit-mask-image:var(--mk),var(--mk);mask-image:var(--mk),var(--mk);
  -webkit-mask-size:var(--ew) var(--eh),var(--iw) var(--ih);mask-size:var(--ew) var(--eh),var(--iw) var(--ih);
  -webkit-mask-position:calc(50% + var(--ox)) calc(50% + var(--oy)),calc(50% + var(--ox)) calc(50% + var(--oy));
  mask-position:calc(50% + var(--ox)) calc(50% + var(--oy)),calc(50% + var(--ox)) calc(50% + var(--oy));
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude}
@media (prefers-reduced-motion:reduce){.ouv{display:none}}

/* HERO */
.hero{position:relative;height:calc(100svh - 38px);min-height:500px;overflow:hidden;background:var(--ink)}
/* bande verticale de l accueil — d apres les cartes de visite de Le Prisme.
   Le mot est colle au bord gauche, coupe par lui, et l aplat orange vient
   mordre le dernier A. Le bord de l aplat se cale tout seul sur le haut de
   l ecriture (syncBande), avec un biseau qui pivote autour de ce point. */
#qui{position:relative;overflow:hidden}
#qui .wrap{padding-left:calc(126px + var(--pad))}
.vband{position:absolute;left:0;top:0;bottom:0;width:126px;
  overflow:hidden;z-index:1}
.vband .oband{position:absolute;inset:0;background:var(--orange);
  clip-path:polygon(0 var(--b1,44%),100% var(--b2,44%),100% 100%,0 100%)}
.vband .ic{position:absolute;top:180px;left:22%;width:56%;color:var(--orange)}
.vband .ic svg{width:100%;height:auto;display:block}
.vband .vword{position:absolute;left:-15px;bottom:206px;transform:rotate(180deg);
  writing-mode:vertical-rl;height:max-content;font-family:var(--disp);color:var(--cream);
  font-size:110px;line-height:1;letter-spacing:.02em;white-space:nowrap}
@media (max-width:820px){
  .vband{width:96px}
  #qui .wrap{padding-left:calc(96px + var(--pad))}
  .vband .vword{font-size:84px;left:-11px;bottom:150px}
  .vband .ic{top:130px}
}
/* sur telephone la section devient tres haute : l aplat se reduirait a un filet
   en bas et l icone serait a un ecran de distance. On retire la bande. */
@media (max-width:600px){
  .vband{display:none}
  #qui .wrap{padding-left:var(--pad)}
}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0 0 auto 0;height:42%;
  background:linear-gradient(to bottom,rgba(18,16,15,.74),rgba(18,16,15,.42) 46%,rgba(18,16,15,0))}
.hero .scrim-b{position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgba(18,16,15,.78),rgba(18,16,15,.40) 42%,rgba(18,16,15,0))}
.hero-logo{position:absolute;top:clamp(22px,4vh,44px);left:var(--pad);height:clamp(46px,6.4vw,78px);color:var(--orange);
  opacity:0;transform:translateY(-10px);animation:softIn 1.7s cubic-bezier(.2,.7,.2,1) .45s forwards}
@keyframes softIn{to{opacity:1;transform:none}}
.hero-claim{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(76px,11vh,112px);max-width:min(700px,74vw);
  color:var(--cream);text-shadow:0 2px 22px rgba(18,16,15,.55);
  opacity:0;transform:translateY(18px);animation:softIn 1.5s cubic-bezier(.2,.7,.2,1) 1.05s forwards}
.hero-claim h1{font-size:clamp(34px,4.8vw,66px);line-height:1}
.hero-claim p{font-family:var(--cond);font-weight:600;font-size:clamp(13px,1.25vw,17px);letter-spacing:.17em;
  text-transform:uppercase;margin:.85em 0 0;opacity:.92;white-space:nowrap}
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;color:var(--cream);opacity:0;
  animation:cueIn 1.2s ease 2s forwards;
  font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;font-size:12px;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.scrollcue i{display:block;width:1px;height:26px;background:var(--cream);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@keyframes cueIn{to{opacity:.75}}

/* BANDEAU */
#sentinel{display:block;height:1px;margin-bottom:-1px}
/* ------------------------------------------------------------------
   Arrivee sur une ancre : le bandeau est fixe en haut, il faut lui
   reserver sa hauteur sinon il recouvre le titre du bloc vise. La
   valeur suit la hauteur reelle du bandeau une fois colle (--bar).
   ------------------------------------------------------------------ */
:root{--bar:104px}
[id]{scroll-margin-top:calc(var(--bar) + 18px)}
@media (max-width:900px){ :root{--bar:88px} }
@media (max-width:560px){ :root{--bar:76px} }

.bar{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid rgba(38,45,68,.14);transition:box-shadow .3s}
.bar.stuck{box-shadow:0 6px 26px rgba(36,33,32,.13)}
.bar-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:28px}
.bar .logo{height:60px;color:var(--navy);flex:0 0 auto;transition:height .35s cubic-bezier(.2,.7,.2,1);padding:14px 0}
.bar.stuck .logo{height:48px;padding:10px 0}
.bar .logo-mini{display:none}
.bar-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
.row1{display:flex;align-items:center;gap:22px;padding:11px 0 9px;transition:padding .3s}
.bar.stuck .row1{padding:7px 0 5px}
.row1 a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);font-weight:600;font-size:14.5px}
.row1 .pill{width:30px;height:30px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--ink);flex:0 0 auto}
.row1 .pill svg{width:15px;height:15px;fill:currentColor}
.row1 .tel{font-family:var(--cond);font-size:19px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
nav{display:flex;gap:26px;border-top:1px solid rgba(38,45,68,.13);padding:9px 0 11px;transition:padding .3s}
.bar.stuck nav{padding:6px 0 8px}
nav a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:15px;font-weight:600;
  text-decoration:none;color:var(--navy);opacity:1;position:relative;padding-bottom:3px;transition:color .25s}
nav a:hover{color:var(--orange)}
nav a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange)}

/* ------------------------------------------------------------------
   Le volet des six solutions, sous l'entree « Nos solutions ».
   Sur ordinateur il se deplie au survol et au clavier ; sur telephone
   il est simplement empile sous l'entree, en retrait.
   ------------------------------------------------------------------ */
nav .sous{position:relative;display:inline-flex}
nav .vol{position:absolute;top:100%;left:-18px;z-index:80;min-width:322px;
  margin-top:11px;padding:16px 0 8px;background:var(--cream);
  border-top:3px solid var(--orange);
  box-shadow:0 18px 40px rgba(36,33,32,.18);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
nav .sous:hover .vol,nav .sous:focus-within .vol{opacity:1;visibility:visible;transform:none}
nav .vol .vt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;font-weight:600;color:var(--navy);opacity:.5;
  padding:0 22px 10px}
nav .vol a{font-family:var(--sans);text-transform:none;letter-spacing:0;
  font-size:15.5px;font-weight:500;line-height:1.3;padding:9px 22px;color:var(--navy)}
nav .vol a:hover{color:var(--ink);background:rgba(244,168,0,.14)}
nav .vol a:after{display:none}
/* le pont invisible qui evite que le volet se ferme entre l'entree et lui */
nav .sous:after{content:"";position:absolute;left:0;right:0;top:100%;height:13px}
.burger{display:none}

section{padding:clamp(60px,8vw,116px) 0}

/* revelations au defilement */
[data-rev]{opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1.05s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
[data-rev].on{opacity:1;transform:none}
[data-rev="fade"]{transform:none}
[data-rev="side"]{transform:translateX(-30px)}

/* bandeau photo en parallaxe */
.para{position:relative;height:clamp(400px,54vh,580px);overflow:hidden;padding:0;background:var(--ink)}
.para .pimg{position:absolute;left:0;right:0;background-size:cover;background-position:center 75%;
  will-change:transform;transform-origin:50% 50%}
.para .pscrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,16,15,.78) 0%,rgba(18,16,15,.45) 46%,rgba(18,16,15,.15) 100%)}
.para .pin{position:relative;height:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-direction:column;justify-content:center;color:var(--cream)}
.para .eyebrow{color:var(--orange);opacity:1}
.para h2{color:var(--cream);max-width:26ch;font-size:clamp(28px,3.6vw,50px);margin:0 0 28px;
  text-shadow:0 2px 18px rgba(18,16,15,.5)}
.eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:13px;font-weight:600;
  color:var(--navy);opacity:.6;margin:0 0 12px}
h2{font-size:clamp(30px,4.4vw,54px);margin-bottom:26px}
.h2rule:after{content:"";display:block;width:74px;height:4px;background:var(--orange);margin-top:18px}

#qui .wrap{max-width:1400px}
.pres{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4.5vw,80px);align-items:start}
.pres .cols{columns:2;column-gap:46px}
.pres p{margin:0 0 1.05em}
.pres .media{display:grid;gap:14px;align-content:start}
.shot{position:relative;aspect-ratio:4/3;background:#DFD9D2;display:grid;place-items:center;overflow:hidden}
.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;color:#8A8377}
.shot.masked{aspect-ratio:1.5000;background:transparent}
.shot.masked video,.shot.masked span{-webkit-clip-path:url(#astonia-mask);clip-path:url(#astonia-mask)}

.stats{background:var(--navy);color:var(--cream)}
.stats .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}
.stat{padding:14px 10px}
.stat .mark{height:30px;margin:0 auto 14px;color:var(--orange);opacity:.9}
.stat .mark svg{height:100%;width:auto;display:block;margin:0 auto}
.stat b{display:block;font-family:var(--disp);font-size:clamp(44px,6vw,74px);color:var(--orange);line-height:1}
.stat span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:13px;opacity:.88;display:block;margin-top:8px}

.stats .eyebrow{color:var(--orange);opacity:1}
.stats h2{color:var(--cream);margin-bottom:34px}

/* ============ ROULEAUX — mécanique reprise de la démo v4 ============ */
.rolls{background:#FFFFFF;color:var(--navy)}
.rolls h2{color:var(--navy)}
.rolls .eyebrow{color:var(--navy);opacity:.6}
.strip{display:flex;gap:6px;height:clamp(470px,64vh,640px);margin-top:34px;width:100%}

.band{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;isolation:isolate;outline:none;color:var(--cream);
  border:1px solid rgba(36,33,32,.14);transition:flex-grow .55s cubic-bezier(.22,.8,.24,1)}
.band:focus-visible{box-shadow:inset 0 0 0 2px var(--orange)}
.strip:not(.has-open) .band:hover{flex-grow:1.32}
.band.open{flex-grow:3.2;cursor:default}
.strip.has-open .band:not(.open){flex-grow:.86}

.base{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 80% at 30% 15%,rgba(70,74,80,.26),rgba(70,74,80,0) 45%),
    radial-gradient(140% 120% at 75% 110%,rgba(0,0,0,.55),rgba(0,0,0,0) 50%),
    linear-gradient(160deg,#2B2724 0%,#211E1C 45%,#131211 100%)}
.base:before{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.old{position:absolute;inset:0;z-index:2;padding:24px 18px 26px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:opacity .3s ease}
.old .ey{font-family:var(--cond);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:11.5px;color:var(--cream);opacity:.72}
.old h3{font-size:clamp(21px,1.9vw,30px);margin-top:6px;overflow-wrap:normal;hyphens:manual;color:var(--cream)}
.strip.has-open .band:not(.open) .old h3{font-size:clamp(17px,1.4vw,21px)}
.old .arrow{margin-top:12px;font-family:var(--cond);letter-spacing:.13em;text-transform:uppercase;font-size:12px;color:var(--orange)}
.band.open .old{opacity:0}

.membrane{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .3s ease}
.band.open .membrane{opacity:1}
.membrane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% calc(var(--p,0) * 100%)}
.membrane .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,17,.26) 0%,rgba(20,18,17,.54) 46%,rgba(20,18,17,.86) 100%)}

.new{position:absolute;inset:0;z-index:4;padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;justify-content:flex-end;
  clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0);pointer-events:none}
.band.open .new{pointer-events:auto}
.new .num{font-family:var(--cond);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:11.5px;
  color:var(--orange);text-shadow:0 1px 4px rgba(0,0,0,.85)}
.new h4{font-size:clamp(23px,2.4vw,34px);margin:8px 0 0;max-width:20ch;color:var(--cream);text-shadow:0 2px 8px rgba(0,0,0,.85)}
.new .prec{font-family:var(--cond);font-size:14px;letter-spacing:.04em;margin:8px 0 0;max-width:38ch;
  color:var(--cream);opacity:.72;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.new ul{list-style:none;margin:16px 0 20px;padding:0;max-width:34ch}
.new ul.sols li{margin-bottom:6px;break-inside:avoid}
.new ul.deux{columns:2;column-gap:26px;max-width:100%}
.new ul.deux li{font-size:15.5px;margin-bottom:5px}
.new li{font-family:var(--cond);font-size:16.5px;letter-spacing:.03em;padding-left:16px;position:relative;
  color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.85);line-height:1.32}
.new li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--orange);
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.cta{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:var(--orange);color:var(--ink);
  text-decoration:none;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  font-size:14px;padding:13px 22px}
.cta:hover{background:#FFB811}
.close{position:absolute;top:14px;right:16px;z-index:6;background:rgba(20,18,17,.5);border:1px solid rgba(239,235,231,.34);
  color:var(--cream);font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;
  padding:6px 12px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s .4s;backdrop-filter:blur(3px)}
.band.open .close{opacity:1;pointer-events:auto}
.arrow i,.hint i{font-style:normal}
.arrow .hov,.hint .hov{display:none}
@media (hover:hover) and (pointer:fine){.arrow .tap,.hint .tap{display:none}.arrow .hov,.hint .hov{display:inline}}
@media (hover:hover) and (pointer:fine){.close{display:none}}
.close:hover{border-color:var(--orange);color:var(--orange)}

/* chalumeau — repris de la v4 */
.pivot{position:absolute;left:var(--mx,78%);top:calc(var(--p,0) * 100%);z-index:5;pointer-events:none;opacity:0;
  transition:opacity .28s ease;transform:translate(-50%,-100%) rotate(-26deg);transform-origin:50% 100%}
.band.open .pivot{opacity:1}
.torch{position:relative;width:120px;height:150px;transform:scale(.85);transform-origin:50% 100%;mix-blend-mode:screen}
.torch i{position:absolute;left:50%;transform:translateX(-50%);display:block}
.torch .halo{bottom:0;width:90px;height:140px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
  background:radial-gradient(46% 60% at 50% 74%,rgba(255,178,60,.62),rgba(244,168,0,0) 72%);filter:blur(6px)}
.torch .yellow{bottom:6px;width:52px;height:96px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:radial-gradient(46% 60% at 50% 72%,rgba(255,226,120,.92),rgba(244,168,0,0) 70%);filter:blur(3px)}
.torch .blue{bottom:10px;width:30px;height:66px;border-radius:50% 50% 44% 44%/58% 58% 42% 42%;
  background:radial-gradient(44% 58% at 50% 72%,rgba(150,205,255,1),rgba(80,150,255,1) 45%,rgba(60,120,255,0) 76%);filter:blur(1.6px)}
.torch .white{bottom:12px;width:12px;height:30px;border-radius:50% 50% 45% 45%/55% 55% 45% 45%;
  background:radial-gradient(50% 60% at 50% 74%,rgba(255,255,255,.32),rgba(230,245,255,0) 78%);filter:blur(1px)}
.ember{position:absolute;z-index:7;width:2.5px;height:2.5px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 5px 1px rgba(244,168,0,.85);pointer-events:none;animation:rise 1s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:.95}
  100%{opacity:0;transform:translate(var(--dx,3px),-50px) scale(.4)}}
.hint{font-family:var(--cond);text-transform:uppercase;letter-spacing:.15em;font-size:12.5px;color:var(--navy);opacity:.55;
  margin:20px auto 0;max-width:var(--wrap);padding:0 var(--pad)}

/* REALISATIONS */
/* REALISATIONS — photo decoupee dans le signe, titre dans le creux de la diagonale */
.reas .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:14px}
.card{position:relative;aspect-ratio:1.5}
.card .thumb{position:absolute;inset:0;margin:0;background:#DFD9D2;
  -webkit-clip-path:url(#astonia-mask);clip-path:url(#astonia-mask);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:62% 58%;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb img{transform:scale(1.06)}
/* le texte epouse la diagonale : il se resserre a mesure qu il descend */
.card .lg{position:absolute;inset:0;pointer-events:none;padding-right:2px}
.card .lg:before{content:"";float:right;width:100%;height:100%;
  shape-outside:polygon(58.333% 0, 100% 0, 100% 100%, 0 100%);shape-margin:14px}
.card .tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  font-size:11.5px;color:var(--orange);margin:0 0 6px}
.card h3{font-size:20px;line-height:.98;color:var(--navy);hyphens:none;overflow-wrap:normal}
.card .ph{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:#8A8377;
  position:absolute;left:58%;top:52%}
.more{margin-top:36px}
.btn-n{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:var(--cream);text-decoration:none;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:14px;padding:14px 24px}
.btn-n:hover{background:var(--ink)}

footer{background:var(--cream);border-top:1px solid rgba(38,45,68,.16);padding:clamp(44px,6vw,72px) 0 26px}
.f-logo{height:74px;color:var(--navy);margin:0 auto 44px;width:max-content}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
footer h4{font-size:27px;margin:0 0 14px}
footer p{margin:0 0 6px}
.f-right{text-align:right}
.f-right a{color:var(--navy);text-decoration:none;font-weight:600}
.f-right a:hover{text-decoration:underline}
.legal{margin-top:44px;padding-top:18px;border-top:1px solid rgba(38,45,68,.16);display:flex;flex-wrap:wrap;gap:22px}
.legal a{font-size:13.5px;color:var(--navy);opacity:.66;text-decoration:none}
.legal a:hover{opacity:1}
.prov{color:#9A9184;font-size:12.5px;margin-left:auto}

@media (max-width:940px){
  .pres{grid-template-columns:1fr}.pres .cols{columns:1}
  .stats .grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .reas .grid{grid-template-columns:repeat(2,1fr)}
  .card h3{font-size:24px}.card .lg:before{shape-margin:20px}
  nav{display:none}
  /* le menu deroulant : panneau pleine largeur sous le bandeau */
  .bar{position:sticky}
  .bar.nav-on nav{display:flex;flex-direction:column;gap:0;border-top:0;padding:4px var(--pad) 12px;
    position:absolute;left:0;right:0;top:100%;background:var(--cream);z-index:70;
    border-bottom:1px solid rgba(38,45,68,.14);box-shadow:0 16px 34px rgba(36,33,32,.15)}
  .bar.nav-on nav a{padding:15px 0;font-size:16px;border-bottom:1px solid rgba(38,45,68,.11)}
  .bar.nav-on nav a:last-child{border-bottom:0}
  .bar.nav-on nav .sous{display:block;width:100%}
  .bar.nav-on nav .sous:after{display:none}
  .bar.nav-on nav .vol{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0 0 6px;padding:2px 0 6px;border-top:0;box-shadow:none;
    background:transparent}
  .bar.nav-on nav .vol .vt{display:none}
  .bar.nav-on nav .vol a{padding:11px 0 11px 18px;font-size:15px;
    border-bottom:1px solid rgba(38,45,68,.07);
    border-left:2px solid var(--orange);margin-left:2px}
  .bar.nav-on nav a.on:after{display:none}
  .bar.nav-on nav a.on{color:var(--orange)}
  .burger .x{display:none} .bar.nav-on .burger .m{display:none} .bar.nav-on .burger .x{display:inline}
  .burger{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
    font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;color:var(--navy)}
  .row1 .lbl{display:none}
  .bar .logo{height:36px;padding:10px 0}.bar.stuck .logo{height:32px;padding:8px 0}
  .bar-in{gap:12px}.row1{gap:12px;padding:9px 0}.row1 .tel{font-size:17px}
  .row1 .pill{width:27px;height:27px}.row1 .pill svg{width:13px;height:13px}
  .bar-right{align-items:center;flex-direction:row}
  .strip{flex-direction:column;height:auto;gap:8px}
  .band{flex:none;height:140px;transition:height .5s cubic-bezier(.22,.8,.24,1)}
  .band.open{height:520px}
  .new ul.deux{columns:1}
  .strip.has-open .band:not(.open){height:118px}
  .strip:not(.has-open) .band:hover{flex-grow:0}
  .f-grid{grid-template-columns:1fr}.f-right{text-align:left}
}
@media (max-width:640px){.stats .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reas .grid{grid-template-columns:1fr}.f-logo{height:58px}}
@media (max-width:430px){
  :root{--pad:16px}
  .bar .logo-full{display:none}.bar .logo-mini{display:block;height:30px;padding:9px 0}
  .bar.stuck .logo-mini{height:26px;padding:7px 0}
  .bar-in{gap:9px}.row1{gap:9px}.row1 .tel{font-size:16px}.burger{font-size:12px}
  .hero-claim h1{font-size:31px}.hero-claim p{font-size:12px;letter-spacing:.13em}
  .hero-logo{height:34px}.stat b{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.12s!important}
  .scrollcue i{animation:none}
  .ember{display:none}
}


/* ==================================================================
   PAGES INTERIEURES
   Ajoute au theme WordPress : la maquette ne couvrait que l'accueil
   et la page de contact.
   ================================================================== */

.page{padding:clamp(120px,16vh,180px) 0 clamp(60px,8vh,100px)}
.hero + .bar + .page,
body.home .page{padding-top:clamp(50px,7vh,86px)}
.page h1{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:.95;
  font-size:clamp(32px,4.6vw,58px);margin:0}
.page .corps{max-width:74ch}
.page .corps p{margin:0 0 18px}
.page .corps h2{font-family:var(--disp);font-weight:400;font-size:clamp(24px,3vw,34px);
  margin:34px 0 12px}
.page .corps h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;font-size:17px;margin:26px 0 8px}
.page .corps ul{padding-left:20px;margin:0 0 18px}
.page .corps li{margin:0 0 7px}
.page .corps a{color:var(--navy);text-underline-offset:3px}
.page figure.grande{margin:34px 0}
.page figure.grande img{width:100%;height:auto;display:block}
.page .galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;margin:34px 0}
.page .galerie figure{margin:0}
.page .galerie img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1.5}
.page .liste .ligne{border-top:1px solid rgba(38,45,68,.14);padding:22px 0}
.page .liste h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 6px}

/* --- liste des solutions --- */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;margin-top:34px}
.cartes .carte .vue{display:block;overflow:hidden;margin-bottom:14px}
.cartes .carte .vue img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1.5;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cartes .carte .vue:hover img{transform:scale(1.05)}
.cartes .carte h3{font-family:var(--disp);font-weight:400;font-size:23px;line-height:1;margin:0 0 8px}
.cartes .carte h3 a{color:var(--navy);text-decoration:none}
.cartes .carte p{margin:0 0 10px}
.cartes .carte .lire{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:13px;color:var(--navy);text-decoration:none}
.cartes .carte .lire span{color:var(--orange);margin-left:6px}

/* --- page d'une solution --- */
.sol-hero{position:relative;height:clamp(300px,46vh,520px);overflow:hidden;background:var(--ink)}
.sol-hero .sol-img{position:absolute;inset:0}
.sol-hero .sol-img img{width:100%;height:100%;object-fit:cover;display:block}
.sol-hero .sol-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,16,15,.80) 0%,rgba(18,16,15,.45) 55%,rgba(18,16,15,.18) 100%)}
.sol-hero .sol-in{position:relative;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad);display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(28px,5vh,54px);color:var(--cream)}
.sol-hero .eyebrow{color:var(--orange);opacity:1}
.sol-hero h1{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:.95;
  color:var(--cream);font-size:clamp(30px,4.4vw,56px);max-width:22ch;margin:0;
  text-shadow:0 2px 18px rgba(18,16,15,.5)}

.sol .chapo{max-width:64ch;font-size:clamp(18px,2vw,21px);line-height:1.5;margin:0 0 10px}
.sol .chapo p{margin:0 0 14px}
.sol .bloc{margin:clamp(40px,6vh,72px) 0}
.sol .bloc h2{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:.98;
  font-size:clamp(26px,3.4vw,42px);margin:0 0 14px}
.sol .bloc .intro{max-width:70ch;margin:0 0 22px}

.sol .bloc-benefices .cartes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin:0}
.sol .bloc-benefices .carte{background:#fff;padding:24px 22px;border-top:3px solid var(--orange)}
.sol .bloc-benefices .carte .mark{width:26px;color:var(--orange);margin-bottom:12px}
.sol .bloc-benefices .carte .mark svg{width:100%;height:auto;display:block}
.sol .bloc-benefices .carte h3{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;font-size:16px;margin:0 0 8px;color:var(--navy)}
.sol .bloc-benefices .carte p{margin:0;font-size:15.5px;line-height:1.55}

.sol .etapes{list-style:none;padding:0;margin:0;counter-reset:none}
.sol .etapes li{display:flex;gap:18px;padding:16px 0;border-top:1px solid rgba(38,45,68,.13)}
.sol .etapes li:first-child{border-top:0}
.sol .etapes .n{flex:0 0 38px;height:38px;background:var(--navy);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:var(--cond);
  font-weight:600;font-size:17px}
.sol .etapes h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;font-size:16px;margin:6px 0 5px;color:var(--navy)}
.sol .etapes p{margin:0;max-width:72ch}

.sol .bloc-liste.avec-photo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,54px);
  align-items:start}
.sol .points{list-style:none;padding:0;margin:0;max-width:70ch}
.sol .points li{position:relative;padding:0 0 0 22px;margin:0 0 11px}
.sol .points li:before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  background:var(--orange)}
.sol .bloc-liste figure{margin:0}
.sol .bloc-liste figure img{width:100%;height:auto;display:block}
.sol .bloc-liste figure.masked img{-webkit-clip-path:url(#astonia-mask);clip-path:url(#astonia-mask);
  aspect-ratio:1.5;object-fit:cover;object-position:62% 58%}

.sol .bloc-livrable{background:var(--navy);color:var(--cream);padding:clamp(26px,4vw,44px)}
.sol .bloc-livrable h2{color:var(--cream)}
.sol .bloc-livrable .corps{max-width:74ch}
.sol .bloc-livrable .corps p{margin:0 0 14px}
.sol .bloc-livrable .corps ul{padding-left:20px;margin:0 0 14px}
.sol .bloc-livrable .corps li{margin:0 0 7px}

.sol .bloc-photo{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
.sol .bloc-photo img{width:100%;height:auto;display:block}
.sol .bloc-photo figcaption{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;font-weight:600;opacity:.6;padding:10px var(--pad) 0}

.sol .bloc-appel{background:var(--cream);border-top:3px solid var(--orange);
  padding:clamp(26px,4vw,40px)}
.sol .bloc-appel p{max-width:66ch}

@media (max-width:820px){
  .sol .bloc-liste.avec-photo{grid-template-columns:1fr}
}

/* Passages a completer dans les textes legaux : surlignes a l'ecran comme
   dans l'editeur, pour qu'une publication distraite ne passe pas. */
.page .corps mark{background:#FFE9A6;color:var(--ink);padding:1px 5px;font-weight:600}

/* Les boutons flottants disparaissent une fois le pied de page atteint :
   ils y masquaient la colonne de droite et n'ont plus d'usage a cet endroit. */
.dock.bas{opacity:0;pointer-events:none}

/* Cinq compteurs sur deux colonnes : le dernier reste seul sur sa ligne.
   On lui donne toute la largeur pour qu'il soit centre plutot que decale. */
@media (max-width:640px){
  .stats .grid .stat:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ==================================================================
   PAGE CONTACT — habillage facon depliant
   Le signe Astonia a l echelle de la page et deux photos en
   transparence, sans carte blanche. Valeurs reglees au curseur avec
   le client le 29/07 puis figees : ne pas y toucher sans repasser
   par la demonstration.
   ================================================================== */

body.ct{--o1:.30;--o2:.30;--p1w:39%;--p1h:39%;--p2w:39%;--p2h:39%;
  --p1x:-4%;--p1y:0%;--p2x:69%;--p2y:56%;
  --sw:72%;--so:.44;--sx:15%;--sy:-1%;--diag:0;--carte:0;
  background:var(--cream)}

body.ct .plaq{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body.ct .plaq .ph{position:absolute;background-size:cover;background-position:center}
body.ct .plaq .p1{left:var(--p1x);top:var(--p1y);width:var(--p1w);height:var(--p1h);opacity:var(--o1)}
body.ct .plaq .p2{left:var(--p2x);top:var(--p2y);width:var(--p2w);height:var(--p2h);opacity:var(--o2)}
body.ct .plaq .sig{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);
  color:var(--orange);opacity:var(--so)}
body.ct .plaq .sig svg{width:100%;height:auto;display:block}

/* Le contenu passe au-dessus de l habillage. Le bandeau et les boutons
   flottants gardent leur propre rang : leur donner position:relative leur
   ferait perdre leur ancrage, erreur deja commise une fois. */
body.ct .ct-head,body.ct .wrap,body.ct .ct-expl,body.ct .faq,body.ct footer{position:relative;z-index:1}
body.ct .bar{z-index:60}
body.ct .dock{z-index:80}

body.ct .ct-head{background:transparent}
body.ct .ct-head:after{opacity:var(--diag)}
body.ct .ct-form{background:rgba(255,255,255,var(--carte));
  box-shadow:0 18px 60px rgba(36,33,32,calc(.10 * var(--carte)))}
body.ct .faq{background:rgba(255,255,255,var(--carte))}

/* Sans carte blanche, les champs doivent rester lisibles aussi bien sur le
   creme que par-dessus l aplat orange du signe. */
body.ct .ct-form select,body.ct .ct-form input[type=text],body.ct .ct-form input[type=tel],
body.ct .ct-form input[type=email],body.ct .ct-form textarea,body.ct .ct-drop{
  background:#fff;border-color:rgba(38,45,68,.42)}

/* ==================================================================
   PAGES DE SOLUTIONS ET DE REALISATIONS
   Source : demo/extra.css. Ne pas modifier ici, modifier la-bas
   puis relancer ce script — sinon les maquettes et le site
   divergent.
   ================================================================== */

/* ==================================================================
   ASTONIA — traitements ajoutes pour la page solution
   Tout vient des supports print de l'Agence Le Prisme : le signe
   recadre en fond, la bande verticale du verso de carte, les
   polylignes orange des angles, la numerotation de chapitre 01/02/03
   et la diagonale de couverture. Aucune forme inventee, aucune
   couleur hors charte.

   Combinaisons interdites par la charte, jamais employees ici :
   marine sur encre, et encre sur marine.
   ================================================================== */

/* ------------------------------------------------ bandeau de tete en biais */
.hd{position:relative;height:clamp(340px,52vh,560px);overflow:hidden;background:var(--ink)}
.hd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hd .voile{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,16,15,.86) 0%,rgba(18,16,15,.52) 52%,rgba(18,16,15,.14) 100%)}
/* La pente du logo : 124.586 / 142.387, soit 48.8 degres. Reprise telle
   quelle pour le biseau qui entame le bandeau en bas a gauche. */
.hd .biais{position:absolute;left:0;bottom:-1px;width:46%;height:34%;
  background:var(--cream);clip-path:polygon(0 0,0 100%,100% 100%)}
.hd .dedans{position:relative;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) clamp(54px,9vh,90px);
  display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream)}
.hd .eyebrow{color:var(--orange);opacity:1}
.hd h1{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:.95;
  color:var(--cream);font-size:clamp(30px,4.6vw,58px);max-width:22ch;margin:0;
  text-shadow:0 2px 18px rgba(18,16,15,.55)}
/* Le titre monte mot a mot derriere un masque, une fois la page prete. */
.hd h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hd h1 .w i{display:inline-block;font-style:normal;transform:translateY(106%);
  transition:transform .95s cubic-bezier(.16,.84,.16,1);
  transition-delay:calc(var(--i) * .075s)}
.hd.pret h1 .w i{transform:none}
@media (prefers-reduced-motion:reduce){
  .hd h1 .w i{transform:none;transition:none}
}

/* ------------------------------------- le signe recadre, en fond d'aplat */
/* Le signe est agrandi et sort du cadre : il n'est plus un contenant mais
   un fond, sur lequel le texte peut passer. Chaque occurrence en montre un
   fragment different, pose en valeurs absolues et non en proportion. */
.sg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Un peu plus grand que la carte : la parallaxe peut deplacer le motif sans
   decouvrir de bord. Le cadrage lui-meme est fixe par le viewBox. */
.sg svg{position:absolute;inset:-7%;width:114%;height:114%;will-change:transform}
.sg path{fill:currentColor}
/* Sur une carte de 300 px, une parallaxe de quelques pixels ne se voit pas.
   Le signe entre donc en glissant quand la carte arrive a l'ecran : le
   mouvement est court mais visible, et il attire l'oeil sur la forme. */
.sol .cv .sg svg{transform:translate3d(46px,46px,0);opacity:.001;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .8s ease}
.sol .bloc.on .cv .sg svg,.sol .cv.on .sg svg{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .sol .cv .sg svg{transform:none;opacity:1;transition:none}
}

/* --------------------------------- polylignes orange des angles (verso) */
/* Traits fins ouverts qui reprennent le profil du toit et sortent du
   cadre. Ils se tracent quand le bloc entre a l'ecran. */
.pl{position:absolute;pointer-events:none}
.pl svg{width:100%;height:auto;overflow:visible;display:block}
.pl polyline{fill:none;stroke:var(--orange);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-dasharray:2000;stroke-dashoffset:2000;
  transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1) .2s}
.on .pl polyline{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){ .pl polyline{stroke-dashoffset:0;transition:none} }

/* ------------------------------------------ bande photo coupee en biais */
/* Pleine largeur reelle. Le conteneur de texte est plafonne a 1600 px, ce qui
   est bon pour lire mais absurde pour une photo : au-dela, les bandes
   laissaient jusqu'a 480 px de creme de chaque cote sur un 27 pouces, alors
   que le bandeau de tete, lui, debordait. On sort donc du conteneur. */
.sol .bdg{position:relative;
  height:clamp(300px,34vw,620px);overflow:hidden;background:var(--ink)}
.sol .bdg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Quand le script prend la main, il fixe lui-meme hauteur et decalage. */
.sol .bdg img.calque{inset:auto;left:0;right:0;height:auto;will-change:transform;
  transform-origin:50% 50%}
.sol .bdg .pan{position:absolute;left:0;top:0;bottom:0;width:62%;
  clip-path:polygon(0 0,0 100%,58% 100%,100% 0)}
.sol .bdg .pan.or{background:var(--orange)}
.sol .bdg .pan.nv{background:var(--navy)}
.sol .bdg blockquote{position:absolute;left:0;top:0;bottom:0;width:52%;margin:0;
  padding:clamp(26px,4vw,46px) clamp(22px,3vw,40px);display:flex;flex-direction:column;
  justify-content:center;z-index:1}
.sol .bdg blockquote p{font-family:var(--cond);font-weight:500;font-size:clamp(17px,2.1vw,25px);
  line-height:1.24;margin:0;max-width:22ch}
.sol .bdg blockquote cite{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:11.5px;font-weight:600;font-style:normal;margin-top:16px;opacity:.72}
.sol .bdg blockquote.sur-or{color:var(--ink)}
.sol .bdg blockquote.sur-nv{color:var(--cream)}
.sol .bdg .pl{right:1%;bottom:5%;width:24%}
@media (max-width:820px){
  .sol .bdg{height:auto}
  .sol .bdg img{position:relative;height:clamp(190px,44vw,260px)}
  .sol .bdg .pan{position:relative;width:100%;clip-path:none}
  .sol .bdg blockquote{position:relative;width:100%;padding:24px var(--pad) 28px}
  .sol .bdg .pl{display:none}
}

/* ------------------------------------------- les cartes du diagnostic */
/* Structure du verso de carte de visite : un aplat de la charte, le signe
   recadre en fond, le contenu par-dessus, une polyligne dans l'angle.
   Les couleurs alternent marine, orange, encre — les trois declinaisons
   que la presentation print montre reellement. */
.sol .cvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
  gap:clamp(12px,1.4vw,20px);margin:0}
.sol .cv{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:11px;
  min-height:308px;padding:clamp(20px,2.2vw,26px) clamp(17px,1.9vw,23px) clamp(24px,2.6vw,30px)}
.sol .cv h3{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:1;
  font-size:23px;margin:0;color:inherit;position:relative}
.sol .cv p{margin:0;font-size:15px;line-height:1.5;color:inherit;opacity:.92;position:relative}
.sol .cv .pic{width:30px;height:30px;margin:6px 0 4px;position:relative}
.sol .cv .pic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.sol .cv .pl{right:-16%;bottom:-9%;width:78%}

.cv-nv{background:var(--navy);color:var(--cream)}
.cv-nv .sg{color:var(--cream);opacity:.15}
.cv-nv .pic{color:var(--orange)}
.cv-or{background:var(--orange);color:var(--ink)}
.cv-or .sg{color:var(--ink);opacity:.13}
.cv-or .pic{color:var(--ink)}
.cv-or .pl polyline{stroke:var(--ink)}
.cv-ink{background:var(--ink);color:var(--cream)}
.cv-ink .sg{color:var(--orange);opacity:.22}
.cv-ink .pic{color:var(--orange)}

/* ------------------------------------------------------------ la frise */
.sol .frise{position:relative;margin:26px 0 0;padding:0 0 6px}
.sol .frise .rail{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.sol .frise .rail:before{content:"";position:absolute;left:8.33%;right:8.33%;top:19px;
  height:2px;background:var(--orange);opacity:.45;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.2s cubic-bezier(.3,.7,.2,1)}
.on .frise .rail:before{transform:scaleX(1)}
.sol .frise .et{position:relative;text-align:center;padding:0 8px;
  opacity:0;transform:translateY(12px);
  transition:opacity .55s ease,transform .55s ease;
  transition-delay:calc(.35s + var(--i) * .1s)}
.on .frise .et{opacity:1;transform:none}
.sol .frise .n{position:relative;width:40px;height:40px;margin:0 auto 12px;
  background:var(--navy);color:var(--cream);font-family:var(--cond);font-weight:600;
  font-size:17px;display:flex;align-items:center;justify-content:center;z-index:1}
.sol .frise .ti{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;font-size:13px;line-height:1.22;color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .sol .frise .rail:before{transform:none}
  .sol .frise .et{opacity:1;transform:none;transition:none}
}
@media (max-width:820px){
  .sol .frise .rail{grid-template-columns:repeat(3,1fr);row-gap:22px}
  .sol .frise .rail:before{display:none}
}
@media (max-width:460px){ .sol .frise .rail{grid-template-columns:repeat(2,1fr)} }

/* Le detail des etapes, en numerotation de chapitre 01 / 02 / 03 */
.sol .chap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,38px);
  margin-top:clamp(30px,4vh,48px)}
.sol .chap .tete{position:relative;display:flex;align-items:center;margin:0 0 8px}
.sol .chap .num{font-family:var(--cond);font-weight:600;font-size:clamp(34px,4vw,46px);
  line-height:.86;color:var(--ink);letter-spacing:-.01em;padding-right:10px;
  position:relative;z-index:2}
.sol .chap .barre{flex:1;position:relative;z-index:1;background:var(--ink);color:var(--cream);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  font-size:14px;padding:7px 14px}
.sol .chap p{margin:0;padding-left:2px}
@media (max-width:820px){ .sol .chap{grid-template-columns:1fr} }

/* ------------------------- le bloc rapport, en verso de carte de visite */
/* Aplat marine, bande creme a gauche portant l'icone, et ASTONIA qui
   chevauche le bord droit de la bande : sa moitie gauche se confond avec
   le creme, sa moitie droite ressort. C'est le principe du verso. */
.sol .bloc-livrable{position:relative;overflow:hidden;
  padding-left:calc(clamp(26px,4vw,44px) + 92px)}
/* Releve au pixel sur le verso de la carte : la bande creme occupe le quart
   gauche sur TOUTE la hauteur, et l'icone comme le mot ASTONIA y sont en
   marine, decoupes dans le creme. Le mot en creme etait une erreur : sur le
   creme il disparait. */
.sol .bloc-livrable .bv{position:absolute;left:0;top:0;bottom:0;width:88px;
  background:var(--cream);transform:scaleY(0);transform-origin:top;
  transition:transform .85s cubic-bezier(.3,.7,.2,1)}
.bloc-livrable.on .bv{transform:none}
.sol .bloc-livrable .bv .ic{position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:44px;color:var(--navy)}
.sol .bloc-livrable .bv .ic svg{width:100%;height:auto;display:block}
.sol .bloc-livrable .bvw{position:absolute;left:0;width:88px;top:104px;bottom:18px;
  margin:0;display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--disp);font-size:98px;line-height:.9;letter-spacing:.02em;
  color:var(--navy);writing-mode:vertical-rl;transform:rotate(180deg);
  opacity:0;transition:opacity .9s ease .3s;pointer-events:none;overflow:hidden;z-index:1}
.bloc-livrable.on .bvw{opacity:1}
.sol .bloc-livrable .pl{right:1.5%;bottom:5%;width:26%}
.sol .bloc-livrable > h2,.sol .bloc-livrable > .corps{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .sol .bloc-livrable .bv{transform:none;transition:none}
  .sol .bloc-livrable .bvw{opacity:1;transition:none}
}
@media (max-width:820px){
  .sol .bloc-livrable{padding-left:clamp(26px,4vw,44px)}
  .sol .bloc-livrable .bv,.sol .bloc-livrable .bvw,.sol .bloc-livrable .pl{display:none}
}

/* --------------------- ouverture des photos decoupees a la forme du signe */
.sol figure.masked{overflow:hidden;margin:0}
.sol figure.masked img{width:100%;height:auto;display:block;transform:scale(1.14);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.sol .bloc.on figure.masked img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .sol figure.masked img{transform:none;transition:none}
}

/* ------------------- « Ce que comprend une visite d'entretien » ------------
   Un titre de section, deux sous-titres dedans : la hierarchie du texte de
   Mikael, qu'il ne faut pas aplatir. */
.sol .bloc-entretien .deux{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,54px);align-items:start;margin-top:18px}
.sol .bloc-entretien h3{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;font-size:16px;color:var(--navy);
  margin:0 0 12px}
.sol .bloc-entretien .points + h3{margin-top:28px}
.sol .bloc-entretien figure.masked img{-webkit-clip-path:url(#astonia-mask);
  clip-path:url(#astonia-mask);aspect-ratio:1.5;object-fit:cover;object-position:62% 58%}
@media (max-width:820px){ .sol .bloc-entretien .deux{grid-template-columns:1fr} }

/* -------------------------------------------- deux colonnes texte + visuel */
.sol .duo{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,4vw,54px);
  align-items:start}
.sol .duo .vis{position:relative;background:#0d5495;overflow:hidden}
.sol .duo .vis img{width:auto;height:auto;display:block;margin:0 auto;
  max-width:min(58%,240px);padding:30px 0}
.sol .duo .cap{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;font-weight:600;opacity:.6;padding:10px 0 0}
.sol .duo .carte-zone{border:1px solid rgba(38,45,68,.16);background:#fff}
.sol .duo .carte-zone img{width:100%;height:auto;display:block}
@media (max-width:820px){ .sol .duo{grid-template-columns:1fr} }

/* ------------------------------------------------ mention de fin de page */
.rappel{background:var(--navy);color:var(--cream);padding:22px var(--pad);
  font-family:var(--cond);letter-spacing:.04em;font-size:14px;text-align:center}
.rappel b{color:var(--orange);font-weight:600}

/* ------------------------------------------- bande photo en parallaxe */
/* Meme composant que le bandeau photo de l'accueil : le calque est plus haut
   que la fenetre et se deplace plus lentement que la page. Les valeurs de
   hauteur et le coefficient K sont ceux de l'accueil, pour que les deux
   pages bougent de la meme facon. */
.sol .para{position:relative;
  height:clamp(400px,54vh,660px);overflow:hidden;background:var(--ink);padding:0}
.sol .para .pimg{position:absolute;left:0;right:0;background-size:cover;
  background-position:center 50%;will-change:transform;transform-origin:50% 50%}
.sol .legende-para{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;font-weight:600;opacity:.6;margin:10px 0 0}
@media (prefers-reduced-motion:reduce){
  .sol .para .pimg{position:absolute;inset:0;transform:none !important;height:auto !important;
    top:0 !important}
}

/* ------------- bande en biais portant le texte (« Ce que le climat… ») ------
   La hauteur n'est plus fixee : elle suit le texte. Le contenu est dans le
   flux, la photo et l'aplat sont en fond. La couleur reste l'orange demande. */
.sol .bdg-txt{height:auto;min-height:clamp(380px,34vw,620px);
  display:flex;align-items:center}
.sol .bdg-txt .pan{clip-path:polygon(0 0,0 100%,62% 100%,100% 0)}
.sol .bdg-txt .dedans{position:relative;z-index:2;width:38%;color:var(--ink);
  padding:clamp(38px,4.4vw,64px) clamp(28px,3vw,46px)
          clamp(38px,4.4vw,64px) max(calc(50vw - 800px + var(--pad)),var(--pad))}
.sol .bdg-txt h2{color:var(--ink);margin:0 0 14px}
.sol .bdg-txt .intro{max-width:none;margin:0 0 20px}
.sol .bdg-txt .points{max-width:none}
.sol .bdg-txt .points li:before{background:var(--ink)}
.sol .bdg-txt .src{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:11.5px;font-weight:600;margin:22px 0 0;opacity:.66}
@media (max-width:820px){
  .sol .bdg-txt{display:block;min-height:0}
  .sol .bdg-txt .dedans{width:100%;padding:26px var(--pad) 30px}
}

/* --------------------- le chapo et la photo 1, cote a cote ----------------- */
.sol .chapo-duo{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,54px);align-items:center;margin:0 0 clamp(40px,6vh,72px)}
.sol .chapo-duo .chapo{margin:0}
.sol .chapo-duo figure.masked img{-webkit-clip-path:url(#astonia-mask);
  clip-path:url(#astonia-mask);aspect-ratio:1.5;object-fit:cover;object-position:62% 58%}
@media (max-width:820px){ .sol .chapo-duo{grid-template-columns:1fr} }

/* ----------------------- largeur de texte sur grand ecran -----------------
   Le thème plafonne les paragraphes entre 64 et 74 caractères, ce qui laissait
   jusqu'a 900 px de vide a droite sur un 27 pouces. On libere la largeur, et
   au-dela de 1200 px les textes longs passent sur deux colonnes — le meme
   traitement que la section de presentation de l'accueil. */
.sol .chapo,
.sol .bloc .intro,
.sol .points,
.sol .bloc-texte .corps,
.sol .bloc-livrable .corps,
.sol .chap p,
.sol .etapes p{max-width:none}


/* Pas de colonnes : chaque paragraphe court jusqu'au bout de la ligne, et on
   saute une ligne entre deux paragraphes. */
.sol .bloc-texte .corps p{margin:0 0 1.15em}
.sol .bloc-texte .corps p:last-child{margin-bottom:0}
.sol .bloc-livrable .corps p{margin:0 0 1.15em}

/* --------------------- appel a l'action sur photo en parallaxe ------------- */
.sol .para-appel{height:clamp(420px,42vw,640px)}
.sol .para-appel .pscrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,16,15,.82) 0%,rgba(18,16,15,.52) 48%,rgba(18,16,15,.18) 100%)}
.sol .para-appel .pin{position:relative;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 max(calc(50vw - 800px + var(--pad)),var(--pad));
  display:flex;flex-direction:column;justify-content:center;color:var(--cream);z-index:1}
.sol .para-appel .eyebrow{color:var(--orange);opacity:1;margin:0 0 10px}
.sol .para-appel h2{color:var(--cream);margin:0 0 14px;max-width:20ch}
.sol .para-appel p{color:var(--cream);max-width:54ch;margin:0 0 22px}
.sol .para-appel .cta{margin-top:4px}
@media (max-width:820px){ .sol .para-appel{height:auto;min-height:420px} }

/* Les blocs pleine largeur sont maintenant hors du conteneur : les marges
   negatives du theme n'ont plus lieu d'etre et debordaient de 64 px. */
.sol .bloc-photo{margin-left:0;margin-right:0}
.sol .bloc-photo figcaption{padding-left:max(calc(50vw - 800px + var(--pad)),var(--pad));
  padding-right:max(calc(50vw - 800px + var(--pad)),var(--pad))}
.sol .legende-para{padding-left:max(calc(50vw - 800px + var(--pad)),var(--pad));
  padding-right:max(calc(50vw - 800px + var(--pad)),var(--pad))}

/* ======================= largeur reelle de la page =========================
   Le conteneur de texte etait plafonne a 1600 px : au-dela, tout le contenu
   restait au centre avec du creme de chaque cote. Le plafond saute, et une
   seule marge — --marge — aligne le texte du conteneur, celui de l'aplat
   orange, celui de l'appel a l'action et les legendes. */
.sol{--marge:clamp(20px,5vw,150px)}
.sol .wrap{max-width:none;padding-left:var(--marge);padding-right:var(--marge)}
.sol .bdg-txt .dedans{padding-left:var(--marge)}
.sol .para-appel .pin{max-width:none;padding-left:var(--marge);padding-right:var(--marge)}
.sol .bloc-photo figcaption,
.sol .legende-para{padding-left:var(--marge);padding-right:var(--marge)}

/* ------------------- visuels composes fournis par le client ---------------
   Ils portent deja leur titre et leur sous-titre, et arrivent en petite
   definition. On ne les agrandit donc jamais au-dela de leur taille native :
   ils sont poses dans un cadre, centres, sans recadrage. */
.sol .vis-cadre{margin:0;background:var(--ink)}
.sol .vis-cadre img{width:100%;height:auto;display:block}
.sol .vis-cadre.etroit{max-width:300px}
.sol .vis-seul{display:flex;justify-content:center}
.sol .vis-seul .vis-cadre{max-width:640px;width:100%}
.sol .chapo-duo .vis-cadre{align-self:center}
@media (max-width:820px){ .sol .vis-cadre.etroit{max-width:none} }

/* Passages a completer : surlignes comme dans les textes legaux, pour qu'une
   publication distraite ne les laisse pas passer. */
.sol mark{background:#FFE9A6;color:var(--ink);padding:1px 5px;font-weight:600}

/* masque general : toute figure marquee « masked » est decoupee a la forme du
   signe, quel que soit le bloc qui la contient. */
.sol figure.masked img{-webkit-clip-path:url(#astonia-mask);clip-path:url(#astonia-mask);
  aspect-ratio:1.5;object-fit:cover;object-position:62% 58%}

/* La photo de l'aplat orange est calee en haut : son sujet — la tache au
   plafond — est au bord superieur du cadre, et un centrage la faisait sortir
   de la bande. Elle garde son glissement, mais dans une course courte et
   uniquement vers le bas, pour que le sujet ne quitte jamais le champ :
   le calque depasse de 90 px sous la bande, et c'est cette reserve qui
   defile. */
.sol .bdg-txt img.calque{position:absolute;left:0;right:0;top:0;bottom:auto;
  width:100%;height:calc(100% + 90px);object-fit:cover;object-position:50% 0;
  will-change:transform}
/* L'appel a l'action garde le bas du cadre : c'est la que sont les plans
   et le logo sur la feuille. */
.sol .para-appel .pimg{background-position:center 88%}

/* Bloc marine court : quand le texte tient en un paragraphe, le mot ASTONIA
   vertical n'a pas la hauteur pour s'ecrire — il apparaissait tronque en
   « TON ». La bande creme et l'icone suffisent alors a porter le signe. */
.sol .bloc-livrable.court .bvw{display:none}

/* La bande en biais portant le texte, sur telephone : le biais n'a plus de
   sens sous 820 px — la photo passe au-dessus, l'aplat orange dessous, comme
   pour les bandes a citation. Sans cela le texte se posait directement sur la
   photo, illisible. */
@media (max-width:820px){
  .sol .bdg-txt img.calque{position:relative;top:auto;left:auto;right:auto;
    width:100%;height:clamp(190px,44vw,260px);object-fit:cover;object-position:50% 45%;
    transform:none !important}
  .sol .bdg-txt .pan{display:none}
  .sol .bdg-txt .dedans{background:var(--orange);width:100%;padding:26px var(--pad) 30px}
}

/* Appel a l'action sans photo de fond : aplat marine pleine largeur. Meme
   forme et meme place que sur les autres pages — seule la photo manque. */
.sol .para-appel.sans-photo{background:var(--navy)}

/* La question posee dans le bloc marine : elle doit se lire comme une
   question, pas comme la reponse. */
.sol .bloc-livrable .corps p.q{font-family:var(--cond);font-weight:500;
  font-size:clamp(17px,1.5vw,20px);line-height:1.3;color:var(--orange);margin:0 0 16px}

/* ------------------------------------------------ page de realisation -----
   Trois blocs propres aux chantiers de reference : la fiche du chantier, le
   couple avant/apres et la galerie du deroule. Rien d'autre ne change : le
   reste de la page est le gabarit des solutions. */
.sol .fiche{list-style:none;padding:0;margin:0;display:grid;position:relative;z-index:1;
  grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px) clamp(20px,3vw,48px)}
@media (max-width:900px){ .sol .fiche{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .sol .fiche{grid-template-columns:1fr} }
.sol .fiche div{border-top:2px solid var(--orange);padding-top:12px}
.sol .fiche dt{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;font-weight:600;opacity:.7;margin:0 0 5px}
.sol .fiche dd{margin:0;font-size:16.5px;line-height:1.4}

.sol .avap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px)}
.sol .avap figure{margin:0;overflow:hidden}
.sol .avap img{width:100%;height:auto;display:block;aspect-ratio:3/2;
  object-fit:cover;transform:scale(1.08);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.sol .bloc.on .avap img{transform:none}
.sol .avap .cap,.sol .gal figcaption{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;font-weight:600;opacity:.62;padding:10px 0 0;margin:0}
.sol .avap .cap b{color:var(--orange);opacity:1;font-weight:600}

.sol .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));
  gap:clamp(16px,2vw,26px)}
.sol .gal figure{margin:0}
.sol .gal img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){ .sol .avap{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .sol .avap img{transform:none;transition:none}
}

/* ---------------------------------------- comparateur avant / apres -------
   Une seule image apparente, coupee par une barre que l'on deplace. La photo
   « apres » est le fond, la photo « avant » est posee par-dessus et rognee a
   la position de la barre. Le curseur natif, invisible, porte l'interaction :
   souris, doigt et clavier fonctionnent sans code supplementaire.
   Les deux prises de vue doivent etre cadrees au meme endroit, sinon la barre
   fait sauter le decor au lieu de reveler le travail. */
.sol .cmp{position:relative;overflow:hidden;--p:50%;touch-action:pan-y;
  background:var(--ink)}
.sol .cmp > img{width:100%;height:auto;display:block}
.sol .cmp .av{position:absolute;inset:0;
  -webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0);
  clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.sol .cmp .av img{width:100%;height:100%;object-fit:cover;display:block}
.sol .cmp .barre{position:absolute;top:0;bottom:0;left:var(--p);width:2px;
  margin-left:-1px;background:var(--cream);pointer-events:none;
  box-shadow:0 0 0 1px rgba(18,16,15,.25)}
.sol .cmp .rond{position:absolute;top:50%;left:var(--p);width:52px;height:52px;
  margin:-26px 0 0 -26px;border-radius:50%;background:var(--orange);
  display:flex;align-items:center;justify-content:center;gap:5px;
  pointer-events:none;box-shadow:0 6px 20px rgba(18,16,15,.32)}
.sol .cmp .rond i{width:0;height:0;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.sol .cmp .rond i:first-child{border-right:8px solid var(--ink)}
.sol .cmp .rond i:last-child{border-left:8px solid var(--ink)}
.sol .cmp .et{position:absolute;top:14px;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:600;
  padding:6px 11px;pointer-events:none;background:rgba(18,16,15,.62);
  color:var(--cream)}
.sol .cmp .et-av{left:14px}
.sol .cmp .et-ap{right:14px}
.sol .cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;
  background:none}
.sol .cmp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:60px;height:100%}
.sol .cmp input[type=range]:focus-visible{opacity:.001;outline:none}
.sol .cmp:focus-within .rond{outline:3px solid var(--navy);outline-offset:3px}
.sol .cmp-aide{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;font-weight:600;opacity:.62;margin:10px 0 0}

/* La carte d'implantation : son fond a ete ramene au creme de la page, elle
   n'a donc plus besoin de cadre. Elle occupe toute la largeur de la colonne
   sous le texte, sans depasser sa taille native. */
.sol figure.implantation{margin:0}
.sol figure.implantation img{display:block;width:100%;height:auto}
/* Legende sous la figure du chapo, meme traitement que celles des duos. */
.sol .chapo-duo .cap{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;font-weight:600;opacity:.6;padding:10px 0 0;margin:0}

/* Bande en biais inversee : l'aplat passe a droite, la photo reste visible a
   gauche. Utilisee quand le sujet de la photo est du cote gauche du cadre —
   sur l'etancheite neuve, le mur en pierres. Le signe n'est pas retourne : un
   logo ne se lit pas en miroir, il change simplement de bord. */
/* L'aplat ne fait que 62 % de large : pour le passer a droite il faut
   deplacer sa boite ET retourner le polygone a l'interieur. */
.sol .bdg-txt.inverse .pan{left:auto;right:0;
  clip-path:polygon(100% 0,100% 100%,38% 100%,0 0)}
.sol .bdg-txt.inverse .dedans{margin-left:auto;
  padding-left:clamp(28px,3vw,46px);
  padding-right:max(calc(50vw - 800px + var(--pad)),var(--pad))}
.sol .bdg-txt.inverse .pl{left:1%;right:auto}
@media (max-width:820px){
  .sol .bdg-txt.inverse .dedans{margin-left:0;padding:26px var(--pad) 30px}
}

/* Les boutons flottants tombent parfois sur un aplat de leur propre couleur —
   l'orange sur l'orange de la bande en biais. Une ombre courte les detache
   quel que soit le fond. */
.dock a{box-shadow:0 6px 20px rgba(18,16,15,.26)}

/* Visuels composes par Astonia : ils portent deja leur titre et leurs
   chiffres. On les garde a leur taille native, centres, sans jamais les
   etirer ni les recadrer — un recadrage couperait leur texte. */
.sol .vis-cadre.large{max-width:1100px;background:none}

/* Rangees de cartes calees sur cinq colonnes : une rangee de trois garde
   alors la meme largeur de carte qu'une rangee de cinq, au lieu de s'etirer.
   Le sous-titre reprend celui des listes du bloc « entretien ». */
.sol .cvs.cinq{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){ .sol .cvs.cinq{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .sol .cvs.cinq{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .sol .cvs.cinq{grid-template-columns:1fr} }
.sol .bloc-benefices h3.sous{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;font-size:16px;color:var(--navy);
  margin:0 0 14px}
.sol .bloc-benefices .cvs + h3.sous{margin-top:clamp(26px,3vw,40px)}

/* Legende sous un visuel compose, centree sur sa largeur. */
.sol .vis-seul{flex-direction:column;align-items:center}
.sol .vis-seul .cap{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.12em;font-size:11.5px;font-weight:600;opacity:.6;
  margin:10px 0 0;max-width:1100px;width:100%}

/* Signature de la page ecrite a la premiere personne : le « je » doit avoir
   un nom, sinon il n'est celui de personne. */
.sol .signature{margin:26px 0 0;font-family:var(--disp);font-weight:400;
  letter-spacing:.02em;line-height:1;font-size:clamp(24px,2.3vw,31px);color:var(--navy)}
.sol .signature span{display:block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.13em;font-size:11.5px;font-weight:600;opacity:.62;margin-top:9px}

/* ---------------------------------------------- liens des rouleaux --------
   Chaque prestation mene a sa page de solution. Une ligne cliquable doit
   avoir l'air cliquable : la fleche apparait au survol et le trait se pose
   sous l'intitule, sans que la liste change de hauteur au passage. */
.new ul.sols li a{color:inherit;text-decoration:none;position:relative;
  display:inline-block;transition:color .18s ease}
.new ul.sols li a .fl{display:inline-block;margin-left:.4em;
  opacity:0;transform:translateX(-5px);color:var(--orange);
  transition:opacity .2s ease,transform .2s ease}
.new ul.sols li a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:currentColor;opacity:0;transform:scaleX(.4);
  transform-origin:left;transition:opacity .2s ease,transform .25s ease}
.new ul.sols li a:hover .fl,.new ul.sols li a:focus-visible .fl{opacity:1;transform:none}
.new ul.sols li a:hover:after,.new ul.sols li a:focus-visible:after{opacity:.55;transform:none}
.new ul.sols li a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .new ul.sols li a .fl,.new ul.sols li a:after{transition:none}
}

/* ------------------------------------------ blocs du gabarit WordPress ----
   Ce que la maquette produisait en dur et que l'administration doit pouvoir
   produire elle aussi : une banniere sans photo, un paragraphe de conclusion
   apres une liste, et le renvoi vers les autres solutions. */
.hd-nue{background:var(--navy)}
.hd-nue .dedans{position:relative}

.sol .apres{margin-top:20px;max-width:70ch}
.sol .apres p{margin:0 0 12px}
.sol .apres p:last-child{margin-bottom:0}
.sol .bloc-benefices .intro p{max-width:70ch;margin:0 0 14px}

/* Renvoi vers les autres pages : une page trouvee sur un moteur de recherche
   ne doit pas etre un cul-de-sac. */
.sol .autres-sol{border-top:2px solid var(--orange);padding-top:clamp(20px,2.4vw,30px)}
.sol .autres-sol h2{font-size:clamp(22px,2.2vw,30px);margin:0 0 18px}
.sol .autres-sol ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px clamp(20px,3vw,44px)}
.sol .autres-sol li{margin:0;border-bottom:1px solid rgba(38,45,68,.14)}
.sol .autres-sol a{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:13px 0;color:inherit;text-decoration:none;
  font-family:var(--cond);font-weight:500;font-size:17px;line-height:1.25;
  transition:color .18s ease}
.sol .autres-sol a .fl{color:var(--orange);opacity:0;transform:translateX(-6px);
  transition:opacity .2s ease,transform .2s ease}
.sol .autres-sol a:hover,.sol .autres-sol a:focus-visible{color:var(--navy)}
.sol .autres-sol a:hover .fl,.sol .autres-sol a:focus-visible .fl{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sol .autres-sol a,.sol .autres-sol a .fl{transition:none}
}

/* Une liste saisie dans l'editeur n'a pas la classe « points ». On lui donne
   le meme traitement, sinon une liste ajoutee par Astonia n'aurait pas
   l'allure de celles de la maquette. */
.sol .duo ul:not(.points),.sol .bloc-texte .corps ul:not(.points),
.sol .apres ul:not(.points){list-style:none;padding:0;margin:0 0 14px;max-width:70ch}
.sol .duo ul:not(.points) li,.sol .bloc-texte .corps ul:not(.points) li,
.sol .apres ul:not(.points) li{position:relative;padding:0 0 0 22px;margin:0 0 11px}
.sol .duo ul:not(.points) li:before,.sol .bloc-texte .corps ul:not(.points) li:before,
.sol .apres ul:not(.points) li:before{content:"";position:absolute;left:0;top:.62em;
  width:9px;height:2px;background:var(--orange)}