/* Simulateur solaire, moteur commun. Les couleurs et les polices de l'installateur arrivent par les
   variables écrites dans le <head> (--fonce, --accent, --sur-accent, --display, --texte) ; rien ici
   ne nomme une marque. L'accent reste sur les boutons, les curseurs et les états choisis, jamais sur
   du texte. */

:root{
  --encre:#1d2433;
  --gris:#5a6172;
  --filet:#e2e5eb;
  --rayon:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texte);font-size:16px;line-height:1.6;color:var(--encre);background:var(--fonce)}
img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,p{margin:0}

/* ---------- en-tête ---------- */

.top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(16px,5vw,64px)}
.top__logo img{height:44px;width:auto;max-width:none}
/* a dark logo sits on a white plate; it usually carries its own margins, so it gets more height */
.top__logo--plaque{padding:6px 10px;border-radius:10px;background:#fff}
.top__logo--plaque img{height:52px}
.top__tel{font-family:var(--display);font-weight:500;font-size:.95rem;color:#fff;text-decoration:none;white-space:nowrap;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.35)}
.top__tel:hover{border-color:#fff}

/* ---------- hero ---------- */

/* the hero centres its content in the first screen; the text column stays in view (sticky) while
   the card grows on the result step */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(100px,13vh,128px) clamp(16px,5vw,64px) 56px}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 70%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgb(var(--fonce-rgb) / .96) 0%,rgb(var(--fonce-rgb) / .88) 45%,rgb(var(--fonce-rgb) / .66) 100%)}
.hero--sans-photo::after{background:radial-gradient(120% 90% at 85% 10%,rgb(255 255 255 / .07),transparent 60%),var(--fonce)}

.hero__in{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(32px,6vw,88px);align-items:start}

/* the text sits level with the card's middle on the first screen, then stays in view */
.hero__text{position:sticky;top:110px;padding-top:56px;color:#fff;container-type:inline-size}
.hero h1{font-family:var(--display);font-weight:600;font-size:calc(min(clamp(2.1rem,4.4vw,3.4rem),100cqi / 9.4) * var(--titre-echelle,1));line-height:1.08;
  letter-spacing:-.01em;max-width:min(20ch,100%)}
.hero__lead{margin-top:20px;max-width:34ch;font-size:1.08rem;line-height:1.65;color:rgb(255 255 255 / .82)}
.hero__recap{margin-top:22px;max-width:30ch;padding-left:16px;border-left:3px solid var(--accent);
  font-family:var(--display);font-weight:500;font-size:1.15rem;line-height:1.45;color:#fff}
h1,h2,h3{text-wrap:balance}

.facts{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.facts li{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--display);font-weight:500;font-size:.95rem;color:#fff}
.facts li::before{content:"";width:8px;height:8px;margin-top:calc((1lh - 8px) / 2);border-radius:50%;background:var(--accent);flex:none}
.facts--bas{display:none}

/* ---------- carte du simulateur ---------- */

.card{background:#fff;border-radius:20px;padding:28px 28px 26px;box-shadow:0 24px 60px rgb(6 12 26 / .35);
  scroll-margin-top:16px;min-height:470px}

.card__step{font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.bar{height:4px;margin:10px 0 24px;border-radius:4px;background:var(--filet);overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .35s ease}

.step h2{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.3;color:var(--fonce)}
.step h2:focus{outline:none}
.hint{margin-top:6px;font-size:.92rem;color:var(--gris)}

/* facture */
.bill{margin:22px 0 10px;font-family:var(--display);font-weight:700;font-size:2.8rem;line-height:1;color:var(--fonce)}
.bill output{font:inherit}

input[type=range]{--p:0%;width:100%;height:32px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(to right,var(--accent) var(--p),var(--filet) var(--p))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--filet)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--accent);border:4px solid #fff;box-shadow:0 1px 6px rgb(20 33 61 / .35)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:4px solid #fff;
  box-shadow:0 1px 6px rgb(20 33 61 / .35)}
input[type=range]:focus-visible{outline:2px solid var(--fonce);outline-offset:4px;border-radius:6px}

.chips{display:flex;gap:8px;margin-top:14px}
.chips--wrap{flex-wrap:wrap}
.chips button{flex:1 1 auto;min-height:42px;padding:8px 14px;border:1px solid var(--filet);border-radius:999px;background:#fff;
  font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--encre);white-space:nowrap;
  transition:border-color .15s,background .15s}
.chips--4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.chips--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.chips--3 button{white-space:normal;line-height:1.25;border-radius:12px;min-height:52px}
/* even two-column grid; an odd last choice spans the row on purpose */
.chips--grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.chips--grille button{min-height:52px;border-radius:12px;line-height:1.3;white-space:normal}
.chips--grille button:last-child:nth-child(odd){grid-column:1 / -1}
.chips--wrap button{white-space:normal;text-align:center}
.chips button:hover{border-color:#c5cad5}
.chips button.on{border-color:var(--accent);background:var(--accent-pale);box-shadow:inset 0 0 0 1px var(--accent)}

/* choix en cartes */
.opts{display:grid;gap:10px;margin-top:20px}
.opts button{display:block;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--filet);border-radius:var(--rayon);
  background:#fff;transition:border-color .15s,background .15s}
.opts button:hover{border-color:#c5cad5}
.opts button.on{border-color:var(--accent);background:var(--accent-pale);box-shadow:inset 0 0 0 1px var(--accent)}
.opts strong{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--fonce)}
.opts span{display:block;margin-top:2px;font-size:.88rem;line-height:1.45;color:var(--gris)}

/* ville et toit */
.field{display:block;margin:20px 0 8px;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--fonce)}
select{width:100%;min-height:48px;padding:0 40px 0 14px;border:1px solid var(--filet);border-radius:10px;font-size:16px;
  -webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d2433' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center}
select:focus-visible,.opts button:focus-visible,.chips button:focus-visible,.btn:focus-visible,.back:focus-visible{outline:2px solid var(--fonce);outline-offset:2px}

/* navigation de la carte */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 26px;border:0;border-radius:12px;
  background:var(--accent);color:var(--sur-accent);font-family:var(--display);font-weight:600;font-size:1rem;text-decoration:none;
  transition:background .15s}
.btn:hover{background:var(--accent-fort)}
.back{padding:10px 2px;border:0;background:none;font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--gris)}
.back:hover{color:var(--fonce)}
.back--center{display:block;margin:14px auto 0}

/* ---------- résultat ---------- */

.res-main{margin-top:18px;padding:22px 22px 20px;border-radius:var(--rayon);background:var(--fonce);color:#fff}
.res-label{text-wrap:balance;font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgb(255 255 255 / .75)}
.res-big{margin-top:8px;font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1.1;letter-spacing:-.01em}
.res-sous{margin-top:4px;font-family:var(--display);font-weight:500;font-size:.95rem;color:rgb(255 255 255 / .78)}

.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:14px 0 0;background:var(--filet);
  border:1px solid var(--filet);border-radius:var(--rayon);overflow:hidden}
.res-grid div{background:#fff;padding:14px 16px}
.res-grid .large{grid-column:1 / -1}
.res-grid dt{font-size:.8rem;color:var(--gris)}
.res-grid dd{margin:2px 0 0;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--fonce)}
.res-grid dd.sub{margin-top:0;font-family:var(--texte);font-weight:400;font-size:.82rem;color:var(--gris)}

.cover{margin-top:18px}
.cover__bar{display:flex;height:10px;border-radius:10px;overflow:hidden;background:var(--filet)}
.cover__bar span{background:var(--accent)}
.cover__leg{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:.84rem;color:var(--gris)}
.cover__leg span:last-child{text-align:right}
.cover__leg b{font-family:var(--display);font-weight:600;color:var(--fonce)}

/* the battery, a lighter option under the main result: label left, value right */
.option{margin-top:20px;padding:16px 18px 6px;border:1px solid var(--filet);border-radius:var(--rayon)}
.option h3{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--fonce)}
.lignes{margin:10px 0 0}
.lignes div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-top:1px solid var(--filet)}
.lignes dt{font-size:.86rem;color:var(--gris)}
.lignes dd{margin:0;text-align:right;font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--fonce)}

/* étude sur place, au-delà de ce que le simulateur chiffre */
.etude{margin-top:18px;padding:20px 22px;border-radius:var(--rayon);background:var(--fonce);color:#fff}
.etude p + p{margin-top:8px;color:rgb(255 255 255 / .8);font-size:.95rem}
.etude strong{font-family:var(--display);font-weight:600;font-size:1.2rem}

.note{margin-top:14px;font-size:.84rem;line-height:1.55;color:var(--gris)}

.btn--wa{width:100%;margin-top:22px}
.btn--wa svg{width:20px;height:20px;flex:none}
.after{margin-top:10px;text-align:center;font-size:.84rem;color:var(--gris)}
/* the second way out, quieter than the request: the result sent to someone at home */
.btn--ligne{width:100%;margin-top:14px;min-height:46px;padding:10px 20px;border:1px solid var(--filet);background:#fff;color:var(--fonce);
  font-weight:500;font-size:.95rem}
.btn--ligne:hover{background:#fff;border-color:var(--fonce)}
.btn--ligne svg{width:18px;height:18px;flex:none}

/* the installer's own installations: a strip that scrolls sideways, the photos his */
.reals{margin-top:6px}
.reals__liste{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.real{flex:0 0 clamp(140px,44%,180px);scroll-snap-align:start;margin:0;border:1px solid var(--filet);border-radius:12px;overflow:hidden;background:#fff}
.real img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.real figcaption{display:flex;flex-direction:column;gap:1px;padding:9px 11px 11px;font-size:.8rem;line-height:1.35;color:var(--gris)}
.real strong{font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--encre)}
.real__eco{margin-top:3px;font-weight:600;color:var(--encre)}
/* with a mouse, the row would hide what does not fit: a grid instead of a swipe */
@media (hover:hover) and (pointer:fine){
  .reals__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
  .reals__liste[data-n="2"],.reals__liste[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reals__liste[data-n="1"]{grid-template-columns:minmax(0,240px)}
  .reals__liste[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .reals__liste[data-n="5"] .real{grid-column:span 2}
  .reals__liste[data-n="5"] .real:nth-child(n+4){grid-column:span 3}
  .real{flex:none}
}
.reals__source{margin-top:2px;font-size:.76rem;color:var(--gris)}

/* aperçu pour le patron, seulement sur la démo */
.apercu{margin-top:24px;padding:18px 16px 20px;border-radius:var(--rayon);background:#efeae2}
.apercu__titre{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--encre)}
.apercu__info{margin-top:4px;font-size:.84rem;color:var(--gris)}
/* an outgoing WhatsApp message: green, tail at the top right, time and blue ticks */
.apercu__bulle{position:relative;width:fit-content;max-width:88%;margin:14px 8px 0 auto;padding:7px 9px 6px 10px;
  border-radius:8px 0 8px 8px;background:#d9fdd3;color:#111b21;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.86rem;line-height:1.4;white-space:pre-wrap;box-shadow:0 1px .5px rgb(11 20 26 / .13)}
.apercu__bulle::after{content:"";position:absolute;top:0;right:-8px;border-style:solid;border-width:0 0 9px 8px;
  border-color:transparent transparent transparent #d9fdd3}
.apercu__heure{display:flex;justify-content:flex-end;align-items:center;gap:3px;margin-top:2px;font-size:.68rem;color:#667781;white-space:nowrap}
.apercu__heure svg{width:16px;height:11px}

/* ---------- pied de page ---------- */

.foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px 40px;
  padding:36px clamp(16px,5vw,64px);background:var(--fonce-2);color:rgb(255 255 255 / .72);font-size:.9rem}
.foot__logo{height:36px;width:auto;max-width:none}
.foot__logo--plaque{box-sizing:content-box;height:40px;padding:8px 12px;border-radius:10px;background:#fff}
.foot__info p + p{margin-top:4px}
.foot__info a{text-decoration:none;margin-right:16px;color:#fff}
.foot__info a:hover{text-decoration:underline}
.foot__credit a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgb(255 255 255 / .55)}
.foot__credit a:hover{color:#fff}

/* ---------- tablette et téléphone ---------- */

@media (max-width:980px){
  .hero{display:block;min-height:0;padding-bottom:40px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:28px;max-width:600px}
  .hero__text{position:static;padding-top:0}
  .hero__text .facts{display:none}
  .facts--bas{display:flex;flex-direction:column;gap:10px;margin:0}
  .card{min-height:0}
}

@media (max-width:600px){
  .top{padding:16px}
  .top__logo img{height:36px}
  .top__logo--plaque img{height:44px}
  .top__tel{font-size:.88rem}
  .hero{padding:88px 16px 32px}
  .hero h1{font-size:calc(min(2rem,100cqi / 9.4) * var(--titre-echelle,1))}
  .hero__lead{font-size:1rem;margin-top:14px}
  .facts li{font-size:.86rem}
  .card{padding:22px 18px 20px;border-radius:18px}
  .bill{font-size:2.4rem}
  .chips button{padding:8px 10px;font-size:.86rem}
  .chips--4{gap:6px}
  .chips--4 button{padding:8px 2px;font-size:.82rem}
  .res-big{font-size:2.1rem}
  .res-grid{grid-template-columns:1fr}
  .res-grid dd{font-size:1rem}
  .option{padding:14px 14px 4px}
  .lignes dd{font-size:.9rem}
  .chips--3 button{padding:8px 4px;font-size:.84rem}
  .apercu{padding:16px 12px 18px}
  .foot{grid-template-columns:1fr;gap:16px}
  .foot__info a{display:block;margin:0 0 4px}
}

/* the narrowest phones: label above value in the battery option */
@media (max-width:360px){
  .lignes div{display:block}
  .lignes dd{text-align:left;margin-top:2px}
  .res-big{font-size:1.85rem}
  /* a very wide logo (Econosol) and the phone pill must share 320 px: the logo keeps its height and
     proportions inside a narrower box, the pill tightens */
  .top__logo{min-width:0}
  .top__logo img,.theme-clair .top__logo img{max-width:42vw;object-fit:contain;object-position:left center}
  .top__tel,.theme-clair .top__tel{padding:7px 10px;font-size:.8rem}
}

/* small phones (iPhone SE): the first question fits the first screen */
@media (max-width:600px) and (max-height:700px){
  .hero{padding-top:74px}
  .hero h1{font-size:calc(min(1.75rem,100cqi / 9.4) * var(--titre-echelle,1))}
  .hero__lead{margin-top:10px;font-size:.95rem;line-height:1.55}
  .hero__in{gap:20px}
  .card{padding-top:18px}
  .bar{margin-bottom:16px}
  .opts{gap:8px;margin-top:14px}
  .opts button{padding:12px 14px}
  .bill{margin:14px 0 4px;font-size:2.2rem}
  .nav{margin-top:18px}
}

/* ---------- thème clair : une marque dont le site est blanc ----------
   Jad, 2026-11-02, on Solar House: a dark page only makes sense when his brand is dark. Here the page
   reads like his own site: white header with his logo as it is, a thin band of his accent on top,
   a very light page, his dark tone on the words, the accent on buttons and chosen states only. */
.theme-clair{background:#fff}
.theme-clair .top{position:relative;background:#fff;border-top:4px solid var(--accent);border-bottom:1px solid var(--filet);
  padding-top:14px;padding-bottom:14px}
.theme-clair .top__logo img{height:var(--logo-h,60px)}
.theme-clair .top__tel{color:var(--fonce);padding:9px 18px;border:1px solid var(--filet);border-radius:999px}
.theme-clair .top__tel:hover{border-color:var(--accent)}
.theme-clair .hero{min-height:calc(100vh - 94px);min-height:calc(100svh - 94px);padding-top:clamp(40px,7vh,80px);background:var(--fond)}
.theme-clair .hero::after{content:none}
.theme-clair .hero__text{top:32px;padding-top:40px;color:var(--fonce)}
.theme-clair .hero h1{font-weight:700}
.theme-clair .hero__lead{color:var(--gris)}
.theme-clair .hero__recap{color:var(--fonce)}
.theme-clair .facts li{color:var(--encre)}
.theme-clair .card{border:1px solid var(--filet);box-shadow:0 1px 2px rgb(var(--fonce-rgb) / .04),0 24px 56px rgb(var(--fonce-rgb) / .09)}
.theme-clair .res-main,.theme-clair .etude{background:var(--accent-pale);color:var(--fonce);box-shadow:inset 4px 0 0 var(--accent)}
.theme-clair .res-label,.theme-clair .res-sous,.theme-clair .etude p + p{color:var(--gris)}
.theme-clair .foot{background:#fff;border-top:1px solid var(--filet);color:var(--gris)}
.theme-clair .foot__logo{height:calc(var(--logo-h,60px) * .8)}
.theme-clair .foot__info a{color:var(--fonce)}
.theme-clair .foot__credit a{color:var(--gris)}
.theme-clair .foot__credit a:hover{color:var(--fonce)}
@media (max-width:980px){
  .theme-clair .hero{min-height:0}
  .theme-clair .hero__text{padding-top:0}
}
@media (max-width:600px){
  .theme-clair .top{padding-top:10px;padding-bottom:10px}
  .theme-clair .top__logo img{height:calc(var(--logo-h,60px) * .77)}
  .theme-clair .top__tel{padding:7px 12px}
  .theme-clair .hero{padding-top:26px}
}
@media (max-width:600px) and (max-height:700px){
  .theme-clair .hero{padding-top:18px}
}

/* ---------- formes droites : une marque aux boutons carrés ----------
   his buttons have square corners (measured by the collection): the page follows, nearly square */
.formes-droites{--rayon:4px}
.formes-droites .card{border-radius:6px}
.formes-droites .btn,.formes-droites .opts button,.formes-droites .chips button,.formes-droites select,
.formes-droites .res-main,.formes-droites .res-grid,.formes-droites .option,.formes-droites .etude,.formes-droites .real,
.formes-droites .top__tel,.formes-droites .top__logo--plaque,.formes-droites .foot__logo--plaque{border-radius:3px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* a pale accent (yellow on white): the chosen answer is drawn in his dark tone */
.accent-clair .chips button.on,.accent-clair .opts button.on{border-color:var(--fonce);background:var(--accent);color:var(--sur-accent);box-shadow:inset 0 0 0 1px var(--fonce)}

/* logoGrand: a thin wordmark shown at the size his own site gives it */
.theme-clair.logo-grand .top__logo img{height:92px}
.theme-clair.logo-grand .hero{min-height:calc(100vh - 126px);min-height:calc(100svh - 126px)}
.theme-clair.logo-grand .foot__logo{height:64px}
@media (max-width:600px){
  .theme-clair.logo-grand .top__logo img{height:62px}
}

/* ---------- page claire avec sa photo (photo-clair) ----------
   Jad, 2026-11-02, on Econosol: a plain white page is « too basic ». His own home page opens on a photo
   of his installation under a white header, so this one does too: a band under the header, his dark tone
   lightly over it (the photo must still read as his installation), the card riding over its lower edge
   onto the light page. Content starts at the top so nothing jumps between the steps. */
.theme-clair.photo-clair .top{border-top:0;padding-top:8px;padding-bottom:8px}
.top__tel-ico{display:none}
.theme-clair.photo-clair .top__tel{display:inline-flex;align-items:center;gap:8px;background:var(--accent);border-color:var(--accent);
  color:var(--sur-accent);font-weight:600}
.theme-clair.photo-clair .top__tel:hover{background:var(--accent-fort);border-color:var(--accent-fort)}
.theme-clair.photo-clair .top__tel-ico{display:block;width:15px;height:15px;flex:none}
.theme-clair.photo-clair .hero{justify-content:flex-start;min-height:0;padding-bottom:64px}
/* the band stops above the card's foot, as his photo stops above his form's: about 500 px, always taller than
   the words on it (measured down to 1024 px wide) */
.photo-clair .hero__bg{bottom:auto;height:clamp(500px,56svh,560px);max-height:100%}
.theme-clair.photo-clair .hero::after{content:"";bottom:auto;height:clamp(500px,56svh,560px);max-height:100%;
  background:linear-gradient(100deg,rgb(var(--fonce-rgb) / .7) 0%,rgb(var(--fonce-rgb) / .45) 48%,rgb(var(--fonce-rgb) / .1) 100%)}
.theme-clair.photo-clair .hero__text{position:static;padding-top:24px;color:#fff}
.theme-clair.photo-clair .hero__text .facts{margin-top:28px}
.theme-clair.photo-clair .hero__text .facts li{font-weight:600;text-shadow:0 1px 12px rgb(var(--fonce-rgb) / .5)}
.theme-clair.photo-clair .hero h1{text-shadow:0 1px 24px rgb(var(--fonce-rgb) / .35)}
.theme-clair.photo-clair .hero__lead{color:rgb(255 255 255 / .9)}
.theme-clair.photo-clair .hero__recap,.theme-clair.photo-clair .hero__text .facts li{color:#fff}
.photo-clair .card{display:flex;flex-direction:column;min-height:520px}
.photo-clair .card .step:not([hidden]){flex:1;display:flex;flex-direction:column}
.photo-clair .card .nav{margin-top:auto;padding-top:26px}
/* the result on a computer: the title above, the card across the page, the figures and his installations
   on the left, the request on the right (a long card in the right column left an empty page beside it) */
@media (min-width:981px){
  .photo-clair.resultat .hero__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .photo-clair.resultat .hero__text .facts{display:none}
  .photo-clair.resultat .hero__recap{max-width:46ch}
  .photo-clair.resultat .card{padding:34px 40px 32px}
  .photo-clair.resultat .res__cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
  .photo-clair.resultat .res__col + .res__col > .field:first-child{margin-top:18px}
  .photo-clair.resultat .res__col + .res__col{position:sticky;top:24px}
}
/* phones and tablets: the photo sits behind the title only, and the card rides over its lower edge */
@media (max-width:980px){
  .photo-clair .hero__bg,.theme-clair.photo-clair .hero::after{display:none}
  .theme-clair.photo-clair .hero{padding:0 0 40px;min-height:0}
  .photo-clair .hero__in{max-width:none}
  .photo-clair .hero__text{padding:40px max(16px,calc((100% - 600px) / 2)) 96px;
    background:linear-gradient(180deg,rgb(var(--fonce-rgb) / .54),rgb(var(--fonce-rgb) / .72)),url(assets/photo.webp) center 60% / cover}
  .photo-clair .card,.photo-clair .facts--bas{width:min(600px,calc(100% - 32px));margin:0 auto}
  .photo-clair .card{position:relative;margin-top:-88px;min-height:0}
}
@media (max-width:600px){
  .theme-clair.photo-clair .top{padding-top:6px;padding-bottom:6px}
}
@media (max-width:600px) and (max-height:700px){
  .photo-clair .hero__text{padding-top:24px;padding-bottom:80px}
  .photo-clair .card{margin-top:-64px}
}

/* ---------- carte accent : la carte du simulateur est le bloc signature de son site ----------
   Econosol's home page carries its « rappelez-moi » form in a yellow card: the simulator card is that card.
   White fields as on his form, his dark tone on the chosen answer and on the buttons (his black button with
   yellow letters). The accent still never colours text on white. */
.carte-accent .card{background:var(--accent);border:0;box-shadow:0 30px 70px rgb(var(--fonce-rgb) / .28)}
.carte-accent .card__step,.carte-accent .hint,.carte-accent .back,.carte-accent .note,.carte-accent .after,
.carte-accent .cover__leg,.carte-accent .reals__source{color:rgb(var(--fonce-rgb) / .78)}
.carte-accent .back:hover{color:var(--fonce)}
.carte-accent .bar{background:rgb(var(--fonce-rgb) / .14)}
.carte-accent .bar span,.carte-accent .cover__bar span{background:var(--fonce)}
.carte-accent .cover__bar{background:#fff}
.carte-accent .opts button,.carte-accent .chips button,.carte-accent select{border-color:transparent;background-color:#fff}
.carte-accent .opts button:hover,.carte-accent .chips button:hover{border-color:var(--fonce)}
.carte-accent .opts button.on,.carte-accent .chips button.on{border-color:var(--fonce);background:var(--fonce);color:#fff;box-shadow:none}
.carte-accent .opts button.on strong{color:#fff}
.carte-accent .opts button.on span{color:rgb(255 255 255 / .78)}
.carte-accent input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--fonce) var(--p),rgb(255 255 255 / .75) var(--p))}
.carte-accent input[type=range]::-moz-range-track{background:rgb(255 255 255 / .75)}
.carte-accent input[type=range]::-moz-range-progress{background:var(--fonce)}
.carte-accent input[type=range]::-webkit-slider-thumb{background:var(--fonce)}
.carte-accent input[type=range]::-moz-range-thumb{background:var(--fonce)}
.carte-accent .btn{background:var(--fonce);color:var(--accent)}
.carte-accent .btn:hover{background:rgb(var(--fonce-rgb) / .86)}
.carte-accent .btn--ligne{background:#fff;border-color:transparent;color:var(--fonce)}
.carte-accent .btn--ligne:hover{background:#fff;border-color:var(--fonce)}
.carte-accent .res-main,.carte-accent .etude{background:#fff;box-shadow:inset 4px 0 0 var(--fonce)}
.carte-accent .option,.carte-accent .real{background:#fff;border-color:transparent}
.carte-accent .apercu{background:#fff}

/* his card's own corners (carteCoins), read on his site */
.carte-coins .card{border-radius:var(--carte-coins)}
@media (max-width:600px){
  .carte-coins .card{border-radius:var(--carte-coins-tel);padding-bottom:26px}
}

/* puces hexagone: the bullets take the shape of the mark in his logo */
.puces-hexagone .facts li::before{width:10px;height:11px;margin-top:calc((1lh - 11px) / 2);border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ---------- ses installations sous le simulateur (page claire) ----------
   Jad, 2026-11-02, on Econosol: the light page under the photo band « looks super empty ». His own home page
   follows its form with his latest projects, so this one does too. The card shows the same photos with the
   result, so the row steps aside then. */
.vitrine{display:none}
.theme-clair .vitrine{display:block;padding:0 clamp(16px,5vw,64px) 72px;background:var(--fond)}
.theme-clair.resultat .vitrine{display:none}
.vitrine__in{max-width:1180px;margin:0 auto}
.vitrine h2{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2;color:var(--fonce)}
.vitrine__liste{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
.vitrine__liste li{margin:0;background:#fff;border-radius:var(--rayon);overflow:hidden;
  box-shadow:0 1px 2px rgb(var(--fonce-rgb) / .05),0 14px 34px rgb(var(--fonce-rgb) / .07)}
.vitrine__liste img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.vitrine__liste p{display:flex;flex-direction:column;gap:2px;padding:12px 14px 15px;font-size:.86rem;line-height:1.35;color:var(--gris)}
.vitrine__liste strong{font-family:var(--display);font-weight:600;font-size:.97rem;color:var(--fonce)}
/* tablets and phones: a row that slides, the next photo showing at the edge */
@media (max-width:980px){
  .theme-clair .vitrine{padding-bottom:48px}
  .vitrine__in{max-width:600px}
  .vitrine__liste{grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-4px;padding:4px 4px 24px;scroll-padding-inline:4px}
  .vitrine__liste li{scroll-snap-align:start}
}
@media (max-width:600px){
  .vitrine__liste{grid-auto-columns:70%;gap:12px;margin-inline:-16px;padding:4px 16px 24px;scroll-padding-inline:16px}
}
/* phones: one left edge for the card, the facts, the installations and the footer */
@media (max-width:600px){
  .photo-clair .vitrine,.photo-clair .foot{padding-left:16px;padding-right:16px}
}
/* tablets: a wider column, and the header and footer on its edges, not a phone page stretched in the middle */
@media (min-width:601px) and (max-width:980px){
  .photo-clair .hero__text{padding-left:max(32px,calc((100% - 720px) / 2));padding-right:max(32px,calc((100% - 720px) / 2))}
  .photo-clair .card,.photo-clair .facts--bas{width:min(720px,calc(100% - 64px))}
  .photo-clair .vitrine__in{max-width:none}
  .photo-clair .vitrine__liste{margin-right:0;padding-right:32px;scroll-padding-inline:4px 32px}
  .theme-clair.photo-clair .top,.photo-clair .foot{padding-left:max(32px,calc((100% - 720px) / 2));padding-right:max(32px,calc((100% - 720px) / 2))}
  .photo-clair .vitrine{padding-left:max(32px,calc((100% - 720px) / 2));padding-right:0}
}

/* ---------- carte foncée : sa bande foncée, son jaune qui ressort ----------
   Sami Solar: a pale yellow that vanishes on white, and dark #333333 bands on his site. The card takes his dark
   tone, the chosen answers and the buttons his yellow, where it shines. */
.carte-fonce .card{--carte-surface:color-mix(in srgb,var(--fonce) 90%,#fff);background:var(--fonce);border:0;color:#fff;
  box-shadow:0 30px 70px rgb(var(--fonce-rgb) / .35)}
.carte-fonce .card__step,.carte-fonce .hint,.carte-fonce .back,.carte-fonce .note,.carte-fonce .after,.carte-fonce .cover__leg,
.carte-fonce .reals__source,.carte-fonce .opts span,.carte-fonce .res-grid dt,.carte-fonce .res-grid dd.sub,.carte-fonce .lignes dt,
.carte-fonce .real figcaption{color:rgb(255 255 255 / .74)}
.carte-fonce .back:hover{color:#fff}
.carte-fonce .step h2,.carte-fonce .bill,.carte-fonce .field,.carte-fonce .opts strong,.carte-fonce .res-grid dd,.carte-fonce .cover__leg b,
.carte-fonce .option h3,.carte-fonce .lignes dd,.carte-fonce .real strong,.carte-fonce .real__eco{color:#fff}
.carte-fonce .bar,.carte-fonce .cover__bar{background:rgb(255 255 255 / .16)}
.carte-fonce .opts button,.carte-fonce .chips button{border-color:rgb(255 255 255 / .16);background:var(--carte-surface);color:#fff}
.carte-fonce .opts button:hover,.carte-fonce .chips button:hover{border-color:rgb(255 255 255 / .5)}
.carte-fonce .opts button.on,.carte-fonce .chips button.on{border-color:var(--accent);background:var(--accent);color:var(--sur-accent);box-shadow:none}
.carte-fonce .opts button.on strong{color:var(--sur-accent)}
.carte-fonce .opts button.on span{color:rgb(var(--fonce-rgb) / .8)}
.carte-fonce select{border-color:rgb(255 255 255 / .16);background-color:var(--carte-surface);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E")}
.carte-fonce input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) var(--p),rgb(255 255 255 / .2) var(--p))}
.carte-fonce input[type=range]::-moz-range-track{background:rgb(255 255 255 / .2)}
.carte-fonce input[type=range]::-webkit-slider-thumb{border-color:var(--fonce)}
.carte-fonce input[type=range]::-moz-range-thumb{border-color:var(--fonce)}
.carte-fonce select:focus-visible,.carte-fonce .opts button:focus-visible,.carte-fonce .chips button:focus-visible,.carte-fonce .btn:focus-visible,
.carte-fonce .back:focus-visible,.carte-fonce input[type=range]:focus-visible{outline-color:var(--accent)}
/* the saving on his yellow, the rest on the dark */
.carte-fonce .res-main,.carte-fonce .etude{background:var(--accent);color:var(--sur-accent);box-shadow:none}
.carte-fonce .res-label,.carte-fonce .res-sous,.carte-fonce .etude p + p{color:rgb(var(--fonce-rgb) / .78)}
.carte-fonce .res-grid{border-color:rgb(255 255 255 / .14);background:rgb(255 255 255 / .14)}
.carte-fonce .res-grid div{background:var(--fonce)}
.carte-fonce .option{border-color:rgb(255 255 255 / .16)}
.carte-fonce .lignes div{border-top-color:rgb(255 255 255 / .12)}
.carte-fonce .btn--ligne{background:transparent;border-color:rgb(255 255 255 / .3);color:#fff}
.carte-fonce .btn--ligne:hover{background:transparent;border-color:#fff}
.carte-fonce .real{border-color:transparent;background:var(--carte-surface)}

/* puces soleil: the sun of his logo */
.puces-soleil .facts li::before{width:15px;height:15px;margin-top:calc((1lh - 15px) / 2);border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat}

/* ---------- the details, every page (sweep of 2026-11-02 at 360 to 1440) ---------- */
/* the header and the footer start where the page's column starts */
@media (min-width:981px){
  .top,.foot{padding-left:max(clamp(16px,5vw,64px),calc((100% - 1180px) / 2));padding-right:max(clamp(16px,5vw,64px),calc((100% - 1180px) / 2))}
}
@media (min-width:601px) and (max-width:980px){
  .top,.foot{padding-left:max(clamp(16px,5vw,64px),calc((100% - 600px) / 2));padding-right:max(clamp(16px,5vw,64px),calc((100% - 600px) / 2))}
  .foot{grid-template-columns:auto 1fr}
  .foot__credit{grid-column:1 / -1}
  .theme-clair.logo-grand .top__logo img{height:72px}
}
@media (max-width:600px){
  .foot{padding-left:16px;padding-right:16px}
}
/* « C'est pour quand ? » on one line per answer, on every screen */
@media (min-width:601px){
  .chips--3 button{white-space:nowrap;padding-left:8px;padding-right:8px}
}
@media (max-width:600px){
  .chips--3{grid-template-columns:1fr}
  .chips--3 button{min-height:46px}
  /* the request button on one line */
  .btn--wa{gap:8px;padding-left:12px;padding-right:12px;font-size:clamp(.82rem,3.9vw,.98rem)}
  /* sun and grid shares: one line each, not a word left alone */
  .cover__leg{flex-direction:column;align-items:flex-start;gap:2px}
  .cover__leg span:last-child{text-align:left}
  /* his installations in the result card: whole tiles that run to the card's edge */
  .reals__liste{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-padding-inline:18px}
  .real{flex:0 0 58%}
}
.photo-clair.resultat .hero__lead{display:none}
/* no word left alone on its line */
.hero__recap,.real figcaption,.real__eco,.foot__info p,.vitrine__liste p,.facts li,.res-grid dd.sub{text-wrap:balance}
/* phones: the request button on one line down to 320 */
@media (max-width:420px){
  .btn--wa{white-space:nowrap;gap:6px;padding-left:8px;padding-right:8px;font-size:clamp(.74rem,3.45vw,.95rem)}
  .btn--wa svg{width:18px;height:18px}
}

/* ---------- bande unie : sa bande foncée, sans photo à lui (Solar House) ----------
   His site opens on a dark band under a white header and a green bar, white cards riding over its foot.
   No photo of his own: the band is his dark tone, his logo's arc marks the title and the bullets, and its
   three colours line the band's foot. */
.theme-clair.bande-unie .hero::after{background:radial-gradient(80% 120% at 88% 0%,rgb(255 255 255 / .07),transparent 62%),var(--fonce)}
.theme-clair.resultat.bande-unie .hero::before{content:none}
.bande-unie .hero::before{content:"";position:absolute;left:0;right:0;top:clamp(500px,56svh,560px);height:5px;z-index:-1;
  background:var(--arc-ligne,var(--accent))}
@media (max-width:980px){
  .bande-unie .hero::before{content:none}
  .theme-clair.bande-unie .hero__text{background:radial-gradient(90% 90% at 100% 0%,rgb(255 255 255 / .07),transparent 60%),var(--fonce)}
}

/* ---------- bandeau : la barre de contact de son site, sur sa couleur ---------- */
.bandeau{display:none}
.theme-clair .bandeau{display:flex;flex-wrap:wrap;gap:4px 28px;padding:9px clamp(16px,5vw,64px);background:var(--accent);
  color:var(--sur-accent);font-size:.84rem;font-weight:500;line-height:1.4}
.bandeau a{text-decoration:none}
.bandeau a:hover{text-decoration:underline}
@media (min-width:981px){
  .theme-clair .bandeau{padding-left:max(clamp(16px,5vw,64px),calc((100% - 1180px) / 2));padding-right:max(clamp(16px,5vw,64px),calc((100% - 1180px) / 2))}
}
@media (min-width:601px) and (max-width:980px){
  .theme-clair.photo-clair .bandeau{padding-left:max(32px,calc((100% - 720px) / 2));padding-right:max(32px,calc((100% - 720px) / 2))}
}
@media (max-width:600px){
  .theme-clair .bandeau{padding:7px 16px;font-size:.8rem}
  .bandeau__adresse{display:none}
}

/* a light page: the chosen answer filled with his accent, as on Sami Solar (a pale tint read as nothing) */
.theme-clair .chips button.on,.theme-clair .opts button.on{border-color:var(--fonce);background:var(--accent);color:var(--sur-accent);
  box-shadow:inset 0 0 0 1px var(--fonce)}
.theme-clair .opts button.on strong,.theme-clair .opts button.on span{color:var(--sur-accent)}
.carte-accent .opts button.on,.carte-accent .chips button.on{border-color:var(--fonce);background:var(--fonce);color:#fff;box-shadow:none}
.carte-accent .opts button.on strong{color:#fff}
.carte-accent .opts button.on span{color:rgb(255 255 255 / .78)}