/* ═══ Alpha Toiture : couleurs de la carte de visite (bleu nuit, vert d'eau, bleu du logo) ═══ */
:root{--bleu:#4a8fe0;--bleu-fonce:#2f6cc0;--or:#2fb3a0;--or-clair:#7ddccd;--noir:#0a1018;--noir2:#0f1722;--panneau:#142031;--ligne:#1f2d40;--gris:#8a96a6;--texte:#eef2f5;--doux:#b4bfcb}
body{background:var(--noir)}
.lien-texte{color:var(--or-clair);border-bottom:1px solid #7ddccd55}

/* logo + marque */
.logo svg{width:46px}
.logo .marque{font:500 19px/1 Jost,sans-serif;letter-spacing:.12em}
.logo .marque b{font-weight:500;color:var(--bleu)}
.logo .marque small{font-size:8.5px;letter-spacing:.34em}
.btn-or{background:linear-gradient(135deg,#8ee6d8,var(--or) 70%);color:#03211d}

/* fond de l'ouverture : courbes vert d'eau de la carte de visite */
.hero{background:radial-gradient(ellipse 55% 60% at 75% 58%,#4a8fe01a,transparent 70%),radial-gradient(ellipse at 15% 0%,#14223a,transparent 60%),var(--noir)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 118% 50%,transparent 0 52%,#2fb3a024 52.2% 53.4%,transparent 53.6% 57%,#2fb3a014 57.2% 57.8%,transparent 58%)}
.hero h1 em{background:linear-gradient(120deg,#9ff0e3,var(--or) 55%,var(--bleu));-webkit-background-clip:text;background-clip:text}

/* ── toit qui se construit (SVG de l'ouverture) ── */
.maison svg .trait{stroke:var(--or-clair)}
.maison svg .trait.fin{stroke:#7ddccd99}
.maison svg .trait.gris{stroke:#3c4a5e}
.facade{opacity:0;stroke:none}
.facade.fb{fill:#101b2b}
.facade.fa{fill:#132236}
.legende{font:500 8.6px Jost,sans-serif;letter-spacing:.2em}
.legende text{fill:var(--doux)}
.legende .num{fill:var(--or)}
.legende circle{fill:var(--or)}
.maison svg .trait.isolant{stroke:#f0c36b;stroke-width:1.2}
.maison svg .trait.membrane{stroke:var(--bleu);stroke-width:3.2;stroke-linecap:butt;opacity:.95}
.maison svg .trait.latte{stroke:#c99a5b;stroke-width:2.4;stroke-linecap:butt}
.maison svg .trait.zinc{stroke:#c9d3de;stroke-width:2}
.maison svg .trait.zinc.fin{stroke:#aab6c4;stroke-width:1.6}
.tuile{fill:url(#tuile-g);stroke:#0a1018;stroke-width:1;opacity:0;animation:tuile .5s cubic-bezier(.2,.9,.25,1.2) forwards;transform-box:fill-box}
.tuile.nez{fill:none;stroke:#bfe1ff;stroke-width:1.1;opacity:0}
.tuile.t-g{--dx:-7px}
.tuile.t-d{--dx:7px}
@keyframes tuile{from{opacity:0;transform:translate(var(--dx),-16px)}to{opacity:1;transform:none}}
.pose-haut{opacity:0;animation:pose-haut .55s cubic-bezier(.2,.9,.25,1.2) forwards}
@keyframes pose-haut{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.faitiere{fill:none;stroke:#bfe1ff;stroke-width:3.2;stroke-linecap:round}
.cheminee{fill:#26354a;stroke:#0a1018;stroke-width:1}
.cheminee-chapeau{fill:#3a4c66}
.solin{stroke:#c9d3de;stroke-width:2.6;stroke-linecap:round}
.velux-cadre{fill:#22324a;stroke:#c9d3de;stroke-width:1}
.velux-verre{fill:url(#verre)}
.carreau{fill:var(--bleu);opacity:0;transform-box:fill-box;transform-origin:center;animation:carreau .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes carreau{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tuile,.tuile.nez,.pose-haut,.facade,.carreau,.legende{opacity:1}}

/* ouverture épinglée (reprise de Sam & Zak) : le contenu reste à l'écran pendant la pose */
.hero.epinglee{height:270vh}
.hero.epinglee::before{position:sticky;top:0;display:block;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh}
@media (max-width:980px){
  .hero.epinglee{height:240vh}
  .hero.epinglee .maison{max-width:min(460px,96%)}
  .hero.epinglee p.intro{font-size:15px}
  .hero::before{background:radial-gradient(circle at 125% 30%,transparent 0 48%,#2fb3a024 48.3% 49.6%,transparent 50%)}
}

/* barre d'appel mobile : Appeler + WhatsApp */
.barre-mobile{display:none}
.btn-wa{background:#1f2d40;color:var(--texte);border:1px solid #2fb3a066}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contacts svg{width:22px;height:22px}
.contacts b.petit{font-size:15.5px;letter-spacing:.01em;word-break:break-all}
@media (max-width:600px){
  .appel-mobile{display:none!important}
  .barre-mobile{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;inset:auto 12px 12px;z-index:55;transform:translateY(160%);transition:transform .35s}
  .barre-mobile.visible{transform:none}
  .barre-mobile .btn{justify-content:center;padding:15px 10px}
}

/* services : 7 cartes + une carte d'appel, sur 4 colonnes */
.carte-cta{background:linear-gradient(160deg,#2fb3a014,transparent 60%),var(--noir)}
.carte-cta .num{color:var(--or)}

/* badge « à confirmer » (démonstration) */
.a-confirmer{display:inline-block;font:500 10px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#f0c36b;border:1px dashed #f0c36b88;padding:4px 9px;border-radius:12px;margin:14px 0 4px}

/* réalisations : mosaïque de vraies photos */
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:12px}
.mosaique .photo{margin:0}
.mosaique .r1{grid-column:span 2;grid-row:span 2}
.mosaique .r2{grid-row:span 2}
.mosaique .r5{grid-row:span 2}
.mosaique .r7{grid-column:span 2}
.photo .media{transition:transform .8s ease}
.photo:hover .media{transform:scale(1.04)}
.photo .tag{z-index:1;text-shadow:0 1px 10px #000}
@media (max-width:980px){.mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.mosaique .r2,.mosaique .r5{grid-row:span 1}}
@media (max-width:600px){.mosaique{grid-auto-rows:150px;gap:8px}.mosaique .r1{grid-row:span 2}.photo .tag{left:12px;bottom:10px;font-size:10px}.photo .tag small{font-size:11.5px}}

/* vidéos de chantier : cadres de téléphone, formats réels */
.tel-video video{aspect-ratio:3/4}
.tel-video.decale video{aspect-ratio:4/5}

/* zone d'intervention */
.zone-sec{padding:90px 0;border-top:1px solid var(--ligne);background:linear-gradient(180deg,var(--noir2),var(--noir))}
.zone-grille{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.villes{display:flex;flex-wrap:wrap;gap:10px}
.villes span{font:400 22px Jost,sans-serif;padding:10px 20px;border:1px solid var(--ligne);border-radius:40px}
.villes span:first-child{border-color:var(--or);color:var(--or-clair)}
.zone-carte .doux{margin-top:12px;font-size:14.5px}
.zone-carte .garanties{margin-top:18px;font-size:15px;color:var(--or-clair);letter-spacing:.02em}
@media (max-width:980px){.zone-grille{grid-template-columns:1fr;gap:28px}}

/* formulaires : consentement, champ piège, contact */
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:13px;color:var(--gris);cursor:pointer;position:relative}
.consent input{margin-top:3px;accent-color:var(--or);width:16px;height:16px;flex:none}
.consent a{color:var(--or-clair);text-decoration:underline}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.champ label small{text-transform:none;letter-spacing:0;color:#5b6878}
.erreur a{color:var(--or-clair);text-decoration:underline}
.contact-sec{border-top:1px solid var(--ligne);background:var(--noir)}
.contact-grille{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}
.contact-form .btn{margin-top:22px}
.contact-form .envoye{display:block;margin-top:12px}
.contact-form button:disabled,.assistant button:disabled{opacity:.6;cursor:wait}
.pas.fin p.doux{font-size:14px;margin-bottom:14px}
@media (max-width:980px){.contact-grille{grid-template-columns:1fr;gap:30px}}

/* pages légales */
.hero-texte{padding:140px 0 60px}
.hero-texte h1{font-size:clamp(34px,5vw,56px);font-weight:300;margin-top:16px}
.etroit{max-width:760px}
.texte-legal{padding-top:60px}
.texte-legal h2{font:400 24px Jost,sans-serif;margin:34px 0 10px;color:var(--texte)}
.texte-legal p{color:var(--doux);margin-bottom:10px}
.texte-legal a{color:var(--or-clair)}
footer .pied-texte{margin-top:20px;max-width:320px}
footer .pied-legal{margin-top:14px;font-size:12px;color:#5b6878}
.bas-pied a:hover{color:var(--or-clair)}

/* ═══ Explorez la toiture : coupe ═══ */
.plan{background:#09111b}
.plan .t path,.plan .t rect,.plan .t polygon{fill:none;stroke:var(--or);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plan .t .fin{stroke:#2fb3a080;stroke-width:1.1}
.plan .t .chevron-c{fill:#c99a5b1c;stroke:#c99a5b;stroke-width:1.1}
.plan .terre{stroke:#ffffff1a!important}
.membrane-c{fill:none;stroke:var(--bleu);stroke-width:2.2;opacity:.85}
.latte-c{fill:#c99a5b}
.tuile-c{fill:#24497a;stroke:#5a9cec;stroke-width:.9}
.ardoise-c{fill:#1a2536;stroke:#56657a;stroke-width:.8}
.faitiere-c{fill:none;stroke:#bfe1ff;stroke-width:4;stroke-linecap:round}
.annexe path{stroke:var(--or)}
/* systèmes */
.plan .sys path,.plan .sys rect,.plan .sys polygon,.plan .sys ellipse{fill:none;stroke:var(--or-clair);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plan .sys .fin{stroke:#7ddccd99;stroke-width:1.1}
.sys{opacity:.5;transition:opacity .5s,filter .5s}
.sys.actif{opacity:1;filter:drop-shadow(0 0 5px #2fb3a088)}
.sys .anim{animation-play-state:paused}
.sys.actif .anim{animation-play-state:running}
.plan .sys .onde{stroke:#7ddccd;stroke-dasharray:6 8;animation:flux-coupe 1.4s linear infinite}
.plan .sys .isolant{stroke:#f0c36b;stroke-width:1.3}
.sys.actif .isolant{animation:isole 1.8s ease-in-out infinite}
@keyframes isole{50%{stroke:#ffe3a6;stroke-width:2}}
.plan .sys .chaleur-retenue{stroke:#f0c36b;stroke-dasharray:4 6;animation:monte-c 1.4s linear infinite}
@keyframes monte-c{to{stroke-dashoffset:20}}
.plan .sys .membrane-vive{stroke:#8cc3ff;stroke-width:4}
.plan .sys .eau{stroke:#cfe9ff;stroke-dasharray:4 7;stroke-width:2;animation:flux-coupe .9s linear infinite}
@keyframes flux-coupe{to{stroke-dashoffset:-22}}
.plan .sys .goutte{stroke:#cfe9ff;stroke-width:1.6;animation:goutte .9s linear infinite}
@keyframes goutte{from{transform:translateY(0);opacity:1}to{transform:translateY(30px);opacity:0}}
.plan .sys .tuile-vive{fill:#2f6cc0;stroke:#bfe1ff;stroke-width:1}
.sys.actif .tuile-vive{animation:brille 2.4s ease-in-out infinite}
@keyframes brille{50%{fill:#5a9cec}}
.plan .sys .pluie{stroke:#cfe9ff;stroke-width:1.4;animation:pluie 1.2s linear infinite;opacity:0}
@keyframes pluie{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(-14px,40px)}}
.plan .sys .mousse{fill:#5f8a3a;stroke:#86b35a;stroke-width:1}
.sys.actif .mousse{animation:mousse 3.6s ease-in-out infinite}
@keyframes mousse{0%,15%{opacity:1}55%,80%{opacity:0;transform:scale(.4)}100%{opacity:1}}
.plan .sys .mousse{transform-box:fill-box;transform-origin:center}
.plan .sys .jet{stroke:#cfe9ff;stroke-width:1.4;stroke-dasharray:2 4;animation:flux-coupe .6s linear infinite}
.plan .sys .brosse{stroke:#f0c36b;stroke-width:3}
.plan .sys .solin-c{stroke:#c9d3de;stroke-width:2.6}
.plan .sys .cadre-v{fill:#22324a;stroke:#c9d3de;stroke-width:1.2}
.plan .sys .verre-v{fill:url(#verre-c);stroke:none}
.plan .sys .rayon{fill:url(#rayon);stroke:none;opacity:0;transition:opacity .6s}
.sys.actif .rayon{opacity:1;animation:respire 2.6s ease-in-out infinite}
@keyframes respire{50%{opacity:.45}}
.plan .sys .souche{fill:#26354a;stroke:#56657a}
.plan .sys .fumee{stroke:#b4bfcb;opacity:0;animation:fumee 2.2s ease-out infinite}
@keyframes fumee{0%{opacity:0;transform:translateY(0)}30%{opacity:.8}100%{opacity:0;transform:translateY(-26px)}}
.plan .sys .epdm{stroke:#e9eef4;stroke-width:3}
.plan .sys .isolant-p{stroke:#f0c36b;stroke-width:1.1}
.plan .sys .coupole{stroke:#bfe1ff;stroke-width:2;fill:#4a8fe033}
.plan .zone{fill:var(--or);fill-opacity:0;stroke:none;transition:fill-opacity .4s}
.plan .zone.actif{fill-opacity:.06}
.point circle{fill:#09111b;stroke:var(--or);stroke-width:calc(1.5px / var(--zoom,1))}
.point circle{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 / var(--zoom,1)))}
.point .pouls{animation:pouls-z 2.2s ease-out infinite}
@keyframes pouls-z{from{transform:scale(calc(1 / var(--zoom,1)));opacity:.7}to{transform:scale(calc(2.6 / var(--zoom,1)));opacity:0}}
.etiq{transform-box:fill-box}
.etiq rect{fill:#09111be6;stroke:var(--or);stroke-width:1}
.etiq text{fill:var(--or-clair)}
@media (max-width:700px){
  .point{transform:none}
  .point circle{transform:scale(calc(1.9 / var(--zoom,1)))}
}
.fiche-tete svg{stroke:var(--or)}
.etiq{transform-origin:center}
.etiq.actif{transform:scale(calc(1.25 / var(--zoom,1)))}
/* étape en cours, écrite sous le toit (téléphone) */
.maison{position:relative}
.etape-hero{display:none}
.tuile.nez{stroke:#cfe8ff;stroke-width:1.2;fill:none}
@media (max-width:980px){
  .maison svg .legende{visibility:hidden}
  .hero.epinglee .etape-hero{display:block;text-align:center;font:500 11px Jost,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--or-clair);min-height:16px;margin-top:2px}
  .hero.epinglee .surtitre{font-size:10px;letter-spacing:.22em}
}
.sys:not(.actif) .goutte,.sys:not(.actif) .pluie,.sys:not(.actif) .jet,.sys:not(.actif) .fumee,.sys:not(.actif) .eau,.sys:not(.actif) .brosse,.sys:not(.actif) .rayon{visibility:hidden}
.mosaique .photo .tag{position:absolute;left:18px;bottom:16px;right:14px;z-index:2}
.mosaique .photo::after{background:linear-gradient(180deg,transparent 50%,#000c)}
@media (max-width:980px){
  .hero.epinglee .maison svg{margin-top:-15%}
  .hero.epinglee .surtitre{display:none}
  .hero.epinglee .etape-hero{margin:4px 0 6px}
}