/* ============================================================
   ÉCHO énergies — version téléphone courte (640 px et moins), décidée le 13/10/2026.
   Feuille chargée avec media="(max-width:640px)" : aucune règle d'ici ne touche l'ordinateur ni la tablette.
   « Voir la page complète sur ce téléphone » coupe cette feuille (media="not all", voir assets/site.js).
   Classes : .ordi = masqué sur téléphone · .tel = affiché seulement sur téléphone (masqué par assets/site.css).
   Rien n'est retiré du code des pages : on masque, on ne supprime pas.
   Pour toute nouvelle section : décider ici ce qu'elle devient sur téléphone, sans toucher aux règles ordinateur.
   ============================================================ */
.tel{display:block}
.btn.tel{display:inline-flex}
span.tel{display:inline}
.ordi{display:none!important}

/* ---------- Commun à toutes les pages ---------- */
h2{font-size:27px}
.sec{padding:44px 0}
.sec-head{margin-bottom:22px}
.sec-head h2{margin:10px 0 12px}
.lead{font-size:16px}

/* G4 : plancher de lisibilité des petits textes */
.kicker{font-size:12px}
.avis .avis-head span:not(.stars),.avis .more,.avis-foot{font-size:13px}
.consent{font-size:14px}
.cert-cap small,.res small,.simu-prog li{font-size:12px}

/* Barre d'action fixe : appeler, lancer l'étude */
.barre-tel{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1.45fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(11,13,16,.08);transition:transform .25s}
.barre-tel .btn{justify-content:center;gap:8px;padding:13px 8px;font-size:15px}
.barre-tel .btn:hover{transform:none}
.barre-tel.masquee,body.menu-open .barre-tel{transform:translateY(115%);visibility:hidden;transition:transform .25s,visibility 0s .25s}

/* Bloc « La suite sur ordinateur » : affiché seulement sur les pages qui ont une version courte (<body class="… court">) */
.tel.vers-ordi{display:none}
.court .tel.vers-ordi{display:block}
.vers-ordi{background:var(--bg-2);border-top:1px solid var(--line);padding:38px 0 42px}
.vers-ordi .vo-ico{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center;margin-bottom:14px}
.vers-ordi .vo-ico svg{width:24px;height:24px;color:#7a5a00}
.vers-ordi h2{font-size:24px;margin:0 0 10px}
.vers-ordi p{font-size:15px;color:var(--ink-3)}
.vo-acts{display:grid;gap:10px;margin-top:18px}
.vo-acts .btn{justify-content:center;white-space:normal;text-align:center}
.vo-note{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}

/* Pied de page : l'essentiel, puis trois rubriques repliables (si le script tourne) */
footer{padding-top:34px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.foot-grid{gap:0;padding-bottom:16px}
.foot-grid>div:first-child{padding-bottom:20px}
.foot-grid>div:first-child>p{display:none}
.foot-logo{margin-bottom:14px}
.foot-logo img{height:40px}
.foot-grid .certs{margin-top:0}
.socials{margin-top:14px}
.foot-grid>div+div{border-top:1px solid rgba(255,255,255,.12)}
.foot-grid>div+div h4{margin:0;padding:16px 0}
.foot-grid>div+div ul{padding-bottom:14px}
.js .foot-grid>div+div h4{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.js .foot-grid>div+div h4::after{content:"+";font-size:22px;font-weight:400;line-height:1;color:rgba(255,255,255,.6)}
.js .foot-grid>div.ouvert h4::after{content:"–"}
.js .foot-grid>div+div:not(.ouvert) ul{display:none}
.foot-bottom{padding-top:16px;gap:4px}

/* ---------- Accueil ---------- */
/* Ordre : haut de page, avis, simulateur, puis le reste */
.pg-accueil main{display:flex;flex-direction:column}
.pg-accueil #top{order:1}
.pg-accueil #avis{order:2}
.pg-accueil #simulateur{order:3}
.pg-accueil #je-suis{order:4}
.pg-accueil #solutions{order:5}
.pg-accueil #echo{order:6}
.pg-accueil #parcours{order:7}
.pg-accueil #espace-client{order:8}
.pg-accueil #serenite{order:9}
.pg-accueil #en-ce-moment{order:10}
.pg-accueil #zones{order:11}
.pg-accueil #faq{order:12}
.pg-accueil #contact{order:13}

/* Haut de page */
.pg-accueil .hero{padding:98px 0 30px}
.pg-accueil .hero h1{font-size:36px;margin:14px 0 14px}
.pg-accueil .hero .lead{margin-bottom:20px}
.pg-accueil .hero .cta-row{margin:0 0 18px}
.pg-accueil .hero .cta-row .btn-ghost{display:none}
.pg-accueil .hero .cta-row .btn-primary{width:100%;justify-content:center}
.pg-accueil .hero .trust>.badge:not(.google){display:none}
.pg-accueil .hero .trust{gap:10px 12px}
.pg-accueil .hero-grid{gap:22px}
.pg-accueil .hero-visual .float{display:none}
.pg-accueil .hero-visual .frame{aspect-ratio:16/10;border-radius:20px}

/* Simulateur : une phrase, puis l'outil */
.pg-accueil .simu .sec-head{margin-bottom:18px}
.pg-accueil .simu .sec-head h2{font-size:24px}
.pg-accueil .simu .sec-head .lead,.pg-accueil .simu-certs{display:none}
.pg-accueil .res-grid{grid-template-columns:1fr}
.pg-accueil .res{padding:14px 16px}
/* Résultat : le bouton « Recevoir mon étude » reste en bas de l'écran pendant la lecture des chiffres */
.pg-accueil .res-cta{display:contents}
.pg-accueil .res-cta .btn-primary{position:sticky;bottom:12px;z-index:3;margin-top:20px;box-shadow:0 10px 28px rgba(11,13,16,.28)}
.pg-accueil .res-cta .btn-dark{margin-top:10px}

/* Je suis… : trois lignes */
.pg-accueil .who{padding:34px 0}
.pg-accueil .who-grid{gap:10px}
.pg-accueil .who-card.has-img{min-height:0;padding:16px 18px;gap:2px;justify-content:center}
.pg-accueil .who-card.has-img::before{background:linear-gradient(90deg,rgba(11,13,16,.94) 0%,rgba(11,13,16,.8) 52%,rgba(11,13,16,.28) 100%)}
.pg-accueil .who-card.has-img p{display:none}
.pg-accueil .who-card.has-img b{font-size:19px}
.pg-accueil .who-card .link{margin-top:0;font-size:14px;min-height:36px}

/* Trois façons de produire : cartes courtes */
.pg-accueil #solutions .sec-head .lead,.pg-accueil .kwh-compare>p,.pg-accueil .brands{display:none}
.pg-accueil .kwh-compare{padding:20px 18px;margin-bottom:16px;gap:14px}
.pg-accueil .kwh-head h3{font-size:18px}
.pg-accueil .cards-3{gap:12px}
.pg-accueil .cards-3 .card{display:grid;grid-template-columns:104px 1fr}
.pg-accueil .cards-3 .card .img{aspect-ratio:auto}
.pg-accueil .cards-3 .card .img img{position:absolute;inset:0}
.pg-accueil .cards-3 .card .img .tag,.pg-accueil .cards-3 .card .check{display:none}
.pg-accueil .cards-3 .card .body{padding:14px 14px 8px;gap:6px}
.pg-accueil .cards-3 .card .body h3{font-size:17px}
.pg-accueil .cards-3 .card .body p{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pg-accueil .cards-3 .card .foot{padding-top:0}

/* Qui est ÉCHO : le titre, quatre chiffres, six visages */
.pg-accueil .identity{padding:42px 0}
.pg-accueil .identity h2{font-size:25px;margin:10px 0 0}
.pg-accueil .identity-grid{gap:20px}
.pg-accueil .identity-grid>div:first-child>p:nth-of-type(-n+2){display:none}
.pg-accueil .words{margin-top:16px;gap:8px}
.pg-accueil .words span{padding:7px 13px;font-size:13px}
.pg-accueil .identity-grid>div:first-child>p{margin-top:8px!important}
.pg-accueil .stats-grid{gap:10px}
.pg-accueil .stat{padding:14px}
.pg-accueil .stat b{font-size:28px}
.pg-accueil .stat span{font-size:13.5px;margin-top:6px}
.pg-accueil .stat em{display:none}
.pg-accueil .tfaces{grid-template-columns:repeat(3,1fr);gap:10px}
.pg-accueil .tface img{margin-bottom:6px;border-radius:12px}
.pg-accueil .tface b{font-size:13px}
.pg-accueil .tface span{display:none}

/* Cinq étapes : voir « Étapes en liste » plus bas (règle commune) */
.pg-accueil #parcours .sec-head .lead,.pg-accueil .parcours-note{display:none}

/* Espace client : le visuel, trois points, le bouton */
.pg-accueil #espace-client .split{gap:22px}
.pg-accueil #espace-client .visual{max-width:300px;margin:0 auto;border-radius:20px}
.pg-accueil #espace-client .feat{margin:16px 0 18px;gap:10px}
.pg-accueil #espace-client .feat li{align-items:center;gap:12px}
.pg-accueil #espace-client .feat li:nth-child(n+4),.pg-accueil #espace-client .feat span,.pg-accueil #espace-client .feat+p{display:none}
.pg-accueil #espace-client .feat .ico{width:34px;height:34px;border-radius:10px}
.pg-accueil #espace-client .btn{width:100%;justify-content:center}

/* ÉCHO Sérénité : la phrase, la formule et son prix */
.pg-accueil #serenite .sec-head .lead,.pg-accueil #serenite .price-card .check{display:none}
.pg-accueil #serenite .ser-grid{display:block}
.pg-accueil #serenite .sec-head{margin-bottom:22px}
.pg-accueil #serenite .price-card{padding:22px}
.pg-accueil #serenite .price-card .btn{width:100%;justify-content:center}

/* Où nous intervenons : deux blocs courts */
.pg-accueil #zones .sec-head .lead,.pg-accueil .zone-card .ill,.pg-accueil .zone-card>p:not(.secteur-links),.pg-accueil .zone-card .depts{display:none}
.pg-accueil .zones-2{gap:12px}
.pg-accueil .zone-card{padding:18px;gap:8px}
.pg-accueil .zone-card h3{font-size:19px}

/* Contact : appeler ou écrire */
.pg-accueil #contact #formBox,.pg-accueil #contact .coord-cert{display:none}
.pg-accueil #contact .contact-grid{gap:0}
.pg-accueil #contact .coords{margin-top:20px;gap:14px}
.contact-acts{display:grid;gap:10px;margin-top:22px}
.contact-acts .btn{justify-content:center}

/* ============================================================
   Pages intérieures (13/10/2026) : règles communes aux pages raccourcies (<body class="… court">),
   puis ce qui est propre à chaque page (.pg-…).
   ============================================================ */
/* Hauts de page */
.court .hero-page{padding:96px 0 30px}
.court .hero-page h1{font-size:31px;margin:10px 0 12px}
.court .hero-page .lead{font-size:16px}
.court .hero-page .cta-row{margin-top:18px;gap:10px}
.court .hero-page .cta-row .btn{width:100%;justify-content:center}
.court .hero-page.split-hero .wrap{gap:22px}
.court .hero-page .frame{aspect-ratio:16/10;border-radius:20px}
.court .hero-page .trust{margin-top:16px}

/* Cartes : le texte sans l'illustration */
.court .box .ill,.court #materiel,.court .brands{display:none}
.court .box{padding:16px 18px}
.court .box h3{font-size:17px}
.court .box p{font-size:14.5px}
.court .grid-2,.court .grid-3{gap:10px}
.court .sec.tight{padding:30px 0}

/* Étapes en liste : numéro, titre, qui s'en occupe */
.court .parcours .sec-head .lead{display:none}
.court .steps{grid-template-columns:1fr;gap:8px}
.court .steps .step{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-radius:14px}
.court .steps .step .ill,.court .steps .step p{display:none}
.court .steps .step::before{position:static;margin:0;padding:0;background:none;box-shadow:none;flex:none}
.court .steps .step h3{font-size:16px;margin:0;flex:1 1 40%}
.court .steps .step .who{margin:0;flex:none;font-size:11px;padding:4px 8px}

/* Bandeau de fin */
.court .cta-band{padding:34px 0}
.court .cta-band .wrap{gap:16px}
.court .cta-band h2{font-size:23px}

/* ---------- Panneaux solaires ---------- */
.pg-panneaux #surplus .sec-head .lead,.pg-panneaux #prix .split>div:first-child .lead+.lead{display:none}
.pg-panneaux #prix .split{gap:20px}

/* ---------- Entreprises ---------- */
.pg-pro .hero{padding:96px 0 30px}
.pg-pro .hero h1{font-size:33px;margin:14px 0 14px}
.pg-pro .hero .lead{margin-bottom:20px}
.pg-pro .hero .cta-row{margin:0 0 18px}
.pg-pro .hero .cta-row .btn-ghost,.pg-pro .hero .trust>.badge{display:none}
.pg-pro .hero .cta-row .btn-primary{width:100%;justify-content:center}
.pg-pro .hero-grid{gap:22px}
.pg-pro #comment .sec-head .lead,.pg-pro #pour-qui .sec-head .lead,.pg-pro #payer .incl,.pg-pro #facture .coords{display:none}
.pg-pro .two{gap:12px}
.pg-pro .who-list{gap:10px}
.pg-pro .who-list .item{padding:16px 18px}
.pg-pro .who-list .item b{font-size:17px}
.pg-pro .facture-grid{gap:20px}

/* ---------- ÉCHO Sérénité ---------- */
.pg-serenite .rung .ill,.pg-serenite #espace-client .visual{display:none}
.pg-serenite .rung{padding:14px 16px;gap:14px;grid-template-columns:34px 1fr}
.pg-serenite .rung h3{font-size:17px}
.pg-serenite .ser-grid{gap:18px;margin-top:20px}
.pg-serenite .price-card{padding:22px}
.pg-serenite .proofs{grid-template-columns:1fr;gap:8px;margin-top:18px}
.pg-serenite .proof{padding:14px 16px}
.pg-serenite .duo{gap:12px}

/* ---------- À propos ---------- */
.pg-apropos .hero-page .lead+.lead,.pg-apropos #histoire .lead,.pg-apropos #equipe .sec-head .lead,.pg-apropos .member p,.pg-apropos .stat em,.pg-apropos .certs-grid .box>p:not(.cert-meta){display:none}
.pg-apropos .stats-grid{gap:10px}
.pg-apropos .stat{padding:14px}
.pg-apropos .stat b{font-size:28px}
.pg-apropos .stat span{font-size:13.5px;margin-top:6px}
.pg-apropos #histoire .split{gap:18px}
.pg-apropos .team-grid{gap:10px}
.pg-apropos .member{padding:10px;gap:8px}
.pg-apropos .member b{font-size:15px}
.pg-apropos .member .role{font-size:10px;padding:4px 7px;margin-top:5px;letter-spacing:.05em}
.pg-apropos .team-side{padding:20px}
.pg-apropos .team-side .big{font-size:21px}
.pg-apropos #zones .sec-head .lead,.pg-apropos .zone-card .ill,.pg-apropos .zone-card>p:not(.secteur-links),.pg-apropos .zone-card .depts{display:none}
.pg-apropos .zones-2{gap:12px}
.pg-apropos .zone-card{padding:18px;gap:8px}
.pg-apropos .zone-card h3{font-size:19px}

/* ---------- Carport, borne ---------- */
.pg-carport #compris .lead,.pg-borne #solaire .lead{display:none}
.pg-carport #compris .split,.pg-borne #solaire .split{gap:18px}

/* ---------- Pages secteur ---------- */
.pg-secteur #secteur .box p,.pg-secteur #communes .lead,.pg-secteur #compris .sec-head .lead{display:none}
.pg-secteur #secteur .box{padding:14px 18px}
.pg-secteur #communes .split{gap:18px}
.pg-secteur .communes{gap:6px}

/* ---------- Contact : le formulaire d'abord (page non raccourcie) ---------- */
.pg-contact .contact-grid>#formBox{order:-1}
.pg-contact .hero-page{padding:96px 0 26px}
.pg-contact .hero-page h1{font-size:31px;margin:10px 0 12px}
.pg-contact .hero-page .lead{font-size:16px}
.pg-contact #formulaire{padding-top:26px}
/* Équipe à 5 (14/10/2026) : le bandeau « Une seule équipe » occupe la 6e case, texte resserré */
.pg-apropos .team-grid:not(:has(>.member:nth-of-type(6))) .team-side{padding:14px}
.pg-apropos .team-grid:not(:has(>.member:nth-of-type(6))) .team-side .big{font-size:17px}
.pg-apropos .team-grid:not(:has(>.member:nth-of-type(6))) .team-side p{font-size:13px;margin-top:8px}