/* ==========================================================================
   SOLAR - univers PUBLIC : sites Studio Solaire, sites Solar et sites clients
   Chargé par includes/header.php, après le socle (solar.css). Bleu nuit solaire · mobile first · WCAG 2.1 AA
   ========================================================================== */

/* ---------------------------------------------------------------- Base */
.sombre :focus-visible, .section-sombre :focus-visible { outline-color: #ffd166; }
/* ---------------------------------------------------------------- Typo utilitaires */
.surtitre { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: var(--e-3); }
.sombre .surtitre, .section-sombre .surtitre { color: var(--texte-inverse-doux); }
.chapeau { font-size: var(--t-md); color: var(--texte-doux); max-width: 46ch; }
.sombre .chapeau, .section-sombre .chapeau { color: var(--texte-inverse-doux); }
/* ---------------------------------------------------------------- Boutons */
.btn-clair { background: var(--blanc); border-color: var(--blanc); color: var(--nuit-900); }
.btn-clair:hover { background: var(--nuit-100); border-color: var(--nuit-100); color: var(--nuit-900); }
.sombre .btn-contour, .section-sombre .btn-contour { color: var(--blanc); border-color: rgba(255,255,255,.55); }
.sombre .btn-contour:hover, .section-sombre .btn-contour:hover { background: rgba(255,255,255,.08); border-color: var(--blanc); }
/* Carte claire posée sur une section sombre (tarifs) : le bouton contour reprend les couleurs claires */
.sombre .tarif .btn-contour, .section-sombre .tarif .btn-contour { color: var(--nuit-900); border-color: var(--ligne-forte); }
.section-sombre .tarif .btn-contour:hover, .sombre .tarif .btn-contour:hover { background: var(--fond-alt); border-color: var(--nuit-900); }
/* ---------------------------------------------------------------- Header public */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ligne); backdrop-filter: saturate(140%) blur(8px); }
.entete.sombre { background: var(--nuit-950); border-bottom-color: rgba(255,255,255,.08); color: var(--blanc); }
.entete-int { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 68px; }
.nav-principale { display: none; }
.nav-principale ul { list-style: none; display: flex; gap: var(--e-1); margin: 0; padding: 0; }
.nav-principale a { position: relative; display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 .7rem; color: inherit; text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.nav-principale a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 8px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform .15s ease; }
.nav-principale a:hover::after, .nav-principale a:focus-visible::after { transform: scaleX(1); opacity: .5; }
.nav-principale a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }
/* En-tête sombre : le survol global des liens (bleu nuit) ne s'applique jamais au logo ni aux liens de l'en-tête */
.entete.sombre a:not(.btn):hover, .entete.sombre a:not(.btn):focus-visible { color: var(--blanc); }
.entete .logo, .entete .logo:hover { text-decoration: none; }
.entete-actions { display: flex; align-items: center; gap: var(--e-2); }
.entete-actions .btn { display: none; }
.entete.sombre .bouton-menu { border-color: rgba(255,255,255,.25); }
.menu-mobile { display: none; border-top: 1px solid var(--ligne); padding: var(--e-3) 0 var(--e-5); }
.menu-mobile.ouvert { display: block; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile a:not(.btn) { display: flex; align-items: center; min-height: var(--cible); color: inherit; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--ligne); }
.entete.sombre .menu-mobile, .entete.sombre .menu-mobile a:not(.btn) { border-color: rgba(255,255,255,.1); }
.menu-mobile .groupe-btn { margin-top: var(--e-4); }
@media (min-width: 1024px) {
  .nav-principale { display: block; }
  .entete-actions .btn { display: inline-flex; }
}
/* ---------------------------------------------------------------- Sections */
.section { padding: var(--e-7) 0; }
@media (min-width: 768px) { .section { padding: var(--e-8) 0; } }
.section-alt { background: var(--fond-alt); }
.section-sombre, .sombre { background: var(--nuit-900); color: var(--texte-inverse); }
.section-sombre { background: radial-gradient(1200px 500px at 85% 0%, var(--nuit-700) 0%, transparent 60%), var(--nuit-900); }
.section-tete { display: grid; gap: var(--e-4); margin-bottom: var(--e-6); }
.section-tete h2 { margin: 0; }
.section-tete p { margin: 0; color: var(--texte-doux); }
.section-sombre .section-tete p { color: var(--texte-inverse-doux); }
@media (min-width: 900px) { .section-tete.deux-col { grid-template-columns: 1.3fr 1fr; align-items: end; } }
/* ---------------------------------------------------------------- Hero */
.hero { position: relative; overflow: hidden; padding: var(--e-7) 0; }
.hero-grille { display: grid; gap: var(--e-6); align-items: center; }
.hero h1 { margin-bottom: var(--e-4); }
.hero .groupe-btn { margin: var(--e-5) 0; }
.hero-media { position: relative; min-height: 260px; border-radius: var(--rayon-lg); overflow: hidden; }
.hero-media img, .hero-media .img-attente { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-badge { position: absolute; left: var(--e-4); bottom: var(--e-4); max-width: 230px; background: rgba(6,13,28,.82); color: var(--blanc); padding: var(--e-3) var(--e-4); border-radius: var(--rayon); font-size: var(--t-sm); border: 1px solid rgba(255,255,255,.15); }
@media (min-width: 900px) {
  .hero { padding: var(--e-8) 0; }
  .hero-grille { grid-template-columns: 1.1fr 1fr; }
  .hero-media { min-height: 420px; }
}
.reassurance { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); color: var(--texte-inverse-doux); }
/* Socle chargé avant cette feuille : l'utilitaire d'espacement posé sur la réassurance garde la priorité qu'il avait */
.reassurance.mt-4 { margin-top: var(--e-4); }
.reassurance li { display: inline-flex; align-items: center; gap: .4rem; }
.reassurance .ico { width: 18px; height: 18px; }
/* ---------------------------------------------------------------- Cartes */
@media (min-width: 1024px) {
  .grille-4 { grid-template-columns: repeat(4, 1fr); }
  .grille-5 { grid-template-columns: repeat(5, 1fr); }
}
.carte-ligne { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); }
.carte-ligne h3 { margin-top: 0; }
.carte-lien { display: inline-flex; margin-top: var(--e-3); color: var(--nuit-900); }
.section-sombre .carte-verre { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--blanc); }
.panneau-check { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--rayon); padding: var(--e-5); }
/* ---------------------------------------------------------------- Étapes */
.etapes { display: grid; gap: var(--e-4); counter-reset: etape; list-style: none; padding: 0; margin: 0; }
.etape { position: relative; }
.etape-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--nuit-900); color: var(--blanc); font-weight: 600; font-size: var(--t-sm); }
.section-sombre .etape-num { background: var(--blanc); color: var(--nuit-900); }
.etape-tete { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); }
.etape-tete .ico { width: 26px; height: 26px; }
@media (min-width: 900px) {
  .etapes-3 { grid-template-columns: repeat(3, 1fr); }
  .etapes-4 { grid-template-columns: repeat(4, 1fr); }
  .etapes-5 { grid-template-columns: repeat(5, 1fr); }
  .etapes[class*="etapes-"] .etape:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 6px; color: var(--texte-doux); }
  .section-sombre .etapes[class*="etapes-"] .etape:not(:last-child)::after { color: var(--texte-inverse-doux); }
}
/* ---------------------------------------------------------------- Tarifs */
.bascule-periode { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--ligne); }
.bascule-periode button { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 0; background: transparent; font: 600 var(--t-sm) var(--police-texte); color: var(--texte); cursor: pointer; }
.bascule-periode button[aria-pressed="true"] { background: var(--nuit-900); color: var(--blanc); }
.bascule-periode small { display: block; font-weight: 500; font-size: .68rem; color: var(--texte-doux); }
.bascule-periode button[aria-pressed="true"] small { color: var(--texte-inverse-doux); }
.tarifs { display: grid; gap: var(--e-5); align-items: stretch; }
@media (min-width: 900px) { .tarifs { grid-template-columns: repeat(3, 1fr); } }
.tarif { display: flex; flex-direction: column; position: relative; background: var(--blanc); color: var(--texte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: var(--e-6) var(--e-5) var(--e-5); }
.tarif.populaire { border: 2px solid var(--nuit-900); box-shadow: var(--ombre); }
.tarif-badge { position: absolute; top: -1px; left: -2px; right: -2px; transform: translateY(-100%); background: var(--nuit-900); color: var(--blanc); font-size: var(--t-xs); font-weight: 600; padding: .35rem var(--e-4); border-radius: var(--rayon-sm) var(--rayon-sm) 0 0; }
.tarif h3 { font-size: var(--t-md); margin: 0 0 var(--e-2); }
.tarif-prix { font-family: var(--police-titre); font-size: 2.1rem; font-weight: 600; line-height: 1.1; }
.tarif-prix small { font: 400 var(--t-sm) var(--police-texte); color: var(--texte-doux); }
.tarif-accroche { color: var(--texte-doux); font-size: var(--t-sm); margin: var(--e-2) 0 var(--e-4); }
.tarif .liste-check { flex: 1; margin-bottom: var(--e-5); }
.tarif .liste-check .ico { color: var(--nuit-900); }
.note-tarifs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-5); padding: var(--e-3) var(--e-4); border: 1px solid var(--ligne); border-radius: var(--rayon); font-size: var(--t-sm); background: var(--blanc); color: var(--texte); }
/* ---------------------------------------------------------------- Bandeau produit */
.bandeau-produit { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .bandeau-produit { grid-template-columns: 1fr 1fr; } }
.capture { position: relative; border-radius: var(--rayon); background: var(--blanc); color: var(--texte); box-shadow: var(--ombre-forte); padding: var(--e-4); }
.capture-barre { display: flex; gap: 6px; margin-bottom: var(--e-3); }
.capture-barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--ligne-forte); }
.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.mini-kpi { border: 1px solid var(--ligne); border-radius: var(--rayon-sm); padding: var(--e-2) var(--e-3); font-size: var(--t-xs); color: var(--texte-doux); }
.mini-kpi strong { display: block; font-size: var(--t-lg); color: var(--texte); }
.sparkline { width: 100%; height: 90px; margin-top: var(--e-3); color: var(--accent); }
/* ---------------------------------------------------------------- Chat (maquette Solar-Chat) */
.chat-demo { background: var(--blanc); color: var(--texte); border-radius: var(--rayon-lg); box-shadow: var(--ombre-forte); max-width: 360px; overflow: hidden; }
.chat-demo-tete { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--ligne); }
.chat-demo-tete small { display: block; color: var(--succes); font-size: var(--t-xs); }
.chat-demo-corps { padding: var(--e-4); display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.bulle { max-width: 85%; padding: .55rem .8rem; border-radius: 14px; background: var(--fond-alt); }
.bulle.moi { justify-self: end; background: var(--accent); color: var(--blanc); }
.choix-rapides { display: grid; gap: 6px; }
.choix-rapides span { border: 1px solid var(--ligne); border-radius: 999px; padding: .3rem .7rem; font-size: var(--t-xs); color: var(--accent); }
.carte-whatsapp { background: var(--blanc); color: var(--texte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: var(--e-4); font-size: var(--t-sm); max-width: 280px; }
.carte-whatsapp strong { display: flex; align-items: center; gap: .4rem; }
.carte-whatsapp .ico { color: var(--nuit-900); }
/* ---------------------------------------------------------------- Bande métiers / moteurs */
.bande { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-4) var(--e-6); padding: var(--e-5) 0; border-bottom: 1px solid var(--ligne); font-size: var(--t-sm); color: var(--texte-doux); }
.bande span { display: inline-flex; align-items: center; gap: .45rem; }
.bande .ico { width: 20px; height: 20px; }
/* ---------------------------------------------------------------- Chiffres / témoignages (masqués si vides) */
.chiffres { display: grid; gap: var(--e-5); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre strong { display: block; font-family: var(--police-titre); font-size: var(--t-2xl); font-weight: 600; }
.temoignage { display: flex; flex-direction: column; gap: var(--e-3); }
.temoignage blockquote { margin: 0; font-size: var(--t-sm); }
.temoignage figcaption { font-size: var(--t-sm); color: var(--texte-doux); }
.metiers { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .metiers { grid-template-columns: repeat(6, 1fr); } }
.metier .media { aspect-ratio: 4/3; border-radius: var(--rayon-sm); overflow: hidden; margin-bottom: var(--e-2); }
.metier .media img, .metier .media .img-attente { width: 100%; height: 100%; object-fit: cover; }
.metier strong { display: block; font-size: var(--t-sm); }
.metier span { font-size: var(--t-xs); color: var(--texte-doux); }
/* ---------------------------------------------------------------- FAQ / accordéons */
.faq { display: grid; gap: var(--e-2); }
@media (min-width: 900px) { .faq.deux-col { grid-template-columns: 1fr 1fr; gap: var(--e-2) var(--e-5); } }
.accordeon { border: 1px solid var(--ligne); border-radius: var(--rayon-sm); background: var(--blanc); }
.accordeon-bouton { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: var(--cible); padding: .6rem var(--e-4); background: transparent; border: 0; text-align: left; font: 500 var(--t-sm) var(--police-texte); color: var(--texte); cursor: pointer; }
.accordeon-bouton .ico { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .2s; }
.accordeon-bouton[aria-expanded="true"] .ico { transform: rotate(45deg); }
.accordeon-panneau { padding: 0 var(--e-4) var(--e-4); font-size: var(--t-sm); color: var(--texte-doux); }
.accordeon-panneau[hidden] { display: none; }
/* ---------------------------------------------------------------- CTA final */
.cta-final { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 900px) { .cta-final { grid-template-columns: 1.4fr 1fr; } }
/* ---------------------------------------------------------------- Footer */
.pied { background: var(--nuit-950); color: var(--texte-inverse-doux); padding: var(--e-7) 0 var(--e-5); font-size: var(--t-sm); }
.pied a { color: var(--texte-inverse-doux); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied-grille { display: grid; gap: var(--e-6); grid-template-columns: repeat(2, 1fr); }
.pied-marque { grid-column: 1 / -1; color: var(--blanc); }
.pied-marque p { color: var(--texte-inverse-doux); max-width: 34ch; margin-top: var(--e-3); }
@media (min-width: 900px) {
  .pied-grille { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .pied-marque { grid-column: auto; }
}
.pied h2 { font: 600 var(--t-sm) var(--police-texte); color: var(--blanc); margin-bottom: var(--e-3); }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.pied ul a { display: inline-flex; align-items: center; min-height: 32px; }
/* Dernière ligne (D163) : copyright | liens légaux | bloc français | signature, sur un même axe */
.pied-bas{margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px solid rgba(255,255,255,.1);font-size:var(--t-xs);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) 18px}
.pied-bas p{margin:0}
.pied-logo .logo-image-clair{height:38px}
.pied-logo .logo-marque-image{height:52px}
.pied-logo .logo-texte{font-size:.9rem}
.pied-logo .logo-texte span:last-child{font-size:1.12rem;font-weight:700}
.pied-copyright{max-width:9.5rem;line-height:1.35}
.pied-legal-nav{flex:1 1 auto}
.pied .pied-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 10px}
.pied .pied-legal a{min-height:32px;white-space:nowrap}
.pied-label{display:inline-flex;align-items:center;gap:.45rem;line-height:1.2;white-space:nowrap}
.pied-label span{display:flex;flex-direction:column;color:#8fa0bd;font-size:.7rem}
.pied-label strong{color:var(--blanc);font-size:.75rem}
.pied-drapeau{flex:none;border-radius:3px}
.pied-credit{color:#a9b8d2;white-space:nowrap}
.pied .pied-credit a{color:var(--blanc)}
@media (min-width:1100px){.pied-bas{flex-wrap:nowrap;column-gap:14px}.pied>.conteneur{max-width:1440px;padding:0 1.5rem}}
@media (max-width:599px){.pied-legal-nav{flex-basis:100%}.pied .pied-legal{justify-content:flex-start}}
.reseaux { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; width: var(--cible); height: var(--cible); }
/* ---------------------------------------------------------------- Bandeau consentement */
.consentement { position: fixed; z-index: 90; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); max-width: 560px; margin: 0 auto; background: var(--blanc); color: var(--texte); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: var(--e-4); font-size: var(--t-sm); }
.consentement[hidden] { display: none; }
.consentement .groupe-btn { margin-top: var(--e-3); }
/* ---------------------------------------------------------------- Pages légales / contenu */
.contenu-texte { max-width: 760px; }
.contenu-texte h2 { margin-top: var(--e-6); font-size: var(--t-lg); }
.contenu-texte h3 { margin-top: var(--e-5); }
/* ---------------------------------------------------------------- Utilitaires (CSP : aucun style inline) */
.accordeon h3 { font-size: inherit; }
/* Largeurs de progression (CSP) */
.carte.sombre { background: var(--nuit-900); color: var(--blanc); border-color: rgba(255,255,255,.12); }
.carte.sombre p, .carte.sombre .liste-check { color: var(--texte-inverse-doux); }
.section-sombre .etape h3 { color: var(--blanc); }
.section-sombre .etape p { color: var(--texte-inverse-doux); }
.accent-clair { color: #9db8ff; }
/* Pages reprises de la v2 (services, réalisations) */
.fil-ariane { padding-top: var(--e-4); font-size: var(--t-sm); color: var(--texte-doux); }
.fil-ariane a { color: var(--texte-doux); }
.hero-media-bas { min-height: 240px; }
@media (min-width: 900px) {
  .hero-grille.inverse > :first-child { order: 2; }
  .hero-media-bas { min-height: 340px; }
}
.realisations { display: grid; gap: var(--e-5); }
@media (min-width: 900px) { .realisations { grid-template-columns: repeat(3, 1fr); } }
.realisation img { width: 100%; height: auto; border-radius: var(--rayon-sm); aspect-ratio: 16 / 10; object-fit: cover; }
.realisation .tags { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: var(--e-3) 0; }
.prestations td.nombre, .prestations th.nombre { white-space: nowrap; text-align: right; }
/* Prestations ponctuelles : libellé de ligne lisible (pas l'en-tête de colonne en capitales), colonnes identiques d'un tableau à l'autre */
.table.prestations { min-width: 0; table-layout: fixed; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: var(--e-4); }
.table.prestations tbody th { width: 72%; overflow-wrap: anywhere; background: transparent; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--texte); font-weight: 600; }
.table.prestations tbody th .petit { font-weight: 400; }
.table.prestations tr:last-child th { border-bottom: 0; }
@media (max-width: 599px) { .table.prestations { table-layout: auto; } .table.prestations tbody th { width: auto; } .table.prestations th, .table.prestations td { padding-inline: var(--e-3); } }
.site-studio h4 { font-family: var(--police-texte); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xs); color: var(--texte-doux); margin: var(--e-4) 0 var(--e-2); }
.calculateur { display: grid; gap: var(--e-4); }
.calculateur input[type=range] { width: 100%; }
.calculateur output { font-weight: 700; }
.carte-choix { display: block; text-decoration: none; color: var(--texte); transition: border-color .15s, transform .15s; }
.carte-choix:hover, .carte-choix:focus-visible { border-color: var(--nuit-900); transform: translateY(-2px); }
.carte-choix .lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--nuit-900); margin-top: var(--e-2); }
/* ---------------------------------------------------------------- Studio Solaire : identité 2026 (maquette d'accueil) */
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--blanc); }
.btn-accent:hover { background: #1c46b0; border-color: #1c46b0; color: var(--blanc); }
.lien-entete { display: none; align-items: center; min-height: var(--cible); padding: 0 .6rem; color: inherit; text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.lien-entete:hover { text-decoration: underline; color: inherit; }
@media (min-width: 1024px) { .lien-entete { display: inline-flex; } }
.site-studio h1, .site-studio h2 { font-family: var(--police-texte); font-weight: 700; letter-spacing: -.025em; }
.surtitre-accent { color: var(--accent); letter-spacing: .16em; }
.sombre .surtitre-accent, .section-sombre .surtitre-accent { color: #8fb0ff; }
.centre .chapeau, .section-tete.centre p { margin-left: auto; margin-right: auto; }
.section-tete.centre { justify-items: center; text-align: center; }
.accueil-chiffres { background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.chiffres-bande { list-style: none; margin: 0; padding: var(--e-5) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
.chiffres-bande li { display: flex; align-items: center; gap: var(--e-3); }
.chiffres-bande .ico { flex: 0 0 auto; color: var(--accent); }
.chiffres-bande strong { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.chiffres-bande span { font-size: var(--t-sm); color: var(--texte-doux); }
@media (min-width: 900px) {
  .chiffres-bande { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--e-6) 0; }
  .chiffres-bande li { justify-content: center; }
}
.accueil-duo { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 960px) { .accueil-duo { grid-template-columns: .9fr 1.1fr; } }
.accueil-duo h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.appareils { position: relative; margin: 0 6% var(--e-6) 10%; }
.appareil-portable { background: #0b0f17; border-radius: 14px 14px 6px 6px; padding: 10px 10px 16px; box-shadow: var(--ombre-forte); position: relative; }
.appareil-portable::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -10px; height: 12px; background: linear-gradient(#2b3346, #10141d); border-radius: 0 0 14px 14px; }
.appareil-portable img { border-radius: 4px; width: 100%; height: auto; }
.appareil-mobile { position: absolute; left: -8%; bottom: -12%; width: 26%; border: 6px solid #0b0f17; border-radius: 22px; overflow: hidden; box-shadow: var(--ombre-forte); background: #0b0f17; }
.appareil-mobile img { width: 100%; height: auto; }
.note-main { position: absolute; right: 0; top: -2.4rem; font: italic 500 var(--t-sm)/1.3 var(--police-titre); color: var(--texte-doux); max-width: 22ch; text-align: right; }
.section-sombre .note-main { color: var(--texte-inverse-doux); }
@media (max-width: 599px) { .note-main { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); text-align: center; }
.parcours li { position: relative; }
.parcours h3 { margin: var(--e-3) 0 var(--e-2); font-size: var(--t-md); }
.parcours p { font-size: var(--t-sm); color: var(--texte-inverse-doux); max-width: 26ch; margin: 0 auto; }
.parcours-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(91,140,255,.16); border: 1px solid rgba(143,176,255,.4); color: #b9ccff; }
@media (min-width: 900px) {
  .parcours { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-4); }
  .parcours li:not(:last-child)::after { content: "→"; position: absolute; right: -14%; top: 20px; color: var(--texte-inverse-doux); font-size: 1.2rem; }
}
.gamme { display: grid; gap: var(--e-4); }
.gamme-carte { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; padding: var(--e-5); box-shadow: var(--ombre); transition: transform .15s, box-shadow .15s; }
.gamme-carte:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10,22,48,.12); }
.gamme-carte h3 { font-size: var(--t-lg); margin: var(--e-3) 0 var(--e-2); }
.gamme-carte p { font-size: var(--t-sm); color: var(--texte-doux); flex: 1; }
.gamme-ico { color: var(--accent); }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible); font-weight: 600; font-size: var(--t-sm); color: var(--accent); text-decoration: none; }
.lien-fleche:hover { text-decoration: underline; }
@media (min-width: 640px) { .gamme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .gamme { grid-template-columns: repeat(20, minmax(0, 1fr)); }
  .gamme-carte { grid-column: span 4; padding: var(--e-4); }
  .gamme-carte.gamme-grande { grid-column: span 5; padding: var(--e-5); }
  .gamme-carte:not(.gamme-grande) h3 { font-size: var(--t-md); }
}
.liste-check-grande { font-size: var(--t-base); gap: var(--e-3); margin-top: var(--e-5); }
.section-sombre .liste-check-grande .ico { color: #8fb0ff; width: 20px; height: 20px; }
.etoiles { color: #b7791f; letter-spacing: .1em; margin: 0; }
.temoignage-carte { margin: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.temoignage-carte blockquote { margin: 0; }
.accueil-cta-int { display: grid; gap: var(--e-6); align-items: center; }
.accueil-cta .carte-verre { padding: var(--e-5); border-radius: 12px; font-size: var(--t-base); gap: var(--e-4); }
.accueil-cta .carte-verre .ico { color: #8fb0ff; }
@media (min-width: 900px) { .accueil-cta-int { grid-template-columns: 1.4fr 1fr; } }
.accueil-faq { display: grid; gap: var(--e-6); }
@media (min-width: 900px) { .accueil-faq { grid-template-columns: 1fr 1.5fr; align-items: start; } }
.pied-newsletter { grid-column: 1 / -1; align-self: start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: var(--e-5); }
.pied-newsletter p { margin-bottom: var(--e-3); }
.newsletter-champ { display: flex; gap: var(--e-2); }
.newsletter-champ input { flex: 1; min-width: 0; min-height: var(--cible); border-radius: var(--rayon-sm); border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: var(--blanc); padding: 0 var(--e-3); font: inherit; }
.newsletter-champ input::placeholder { color: var(--texte-inverse-doux); }
.newsletter-champ .btn { padding: 0 var(--e-3); flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 900px) {
  .pied-grille:has(.pied-newsletter) { grid-template-columns: 1.4fr repeat(3, 1fr) 1.6fr; }
  .pied-newsletter { grid-column: auto; }
}
/* Accueil Studio Solaire - maquette définitive */
.texte-accent { color: #5b8cff; }
.hero-benefices { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
.hero-benefices li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 500; color: #e3e9f4; }
.hero-benefices .ico { color: #5b8cff; }
@media (min-width: 640px) { .hero-benefices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.appareils-hero { margin-top: var(--e-5); }
.appareil-mobile-droite { left: auto; right: -6%; bottom: -10%; width: 28%; aspect-ratio: 9 / 18; }
.appareil-mobile-droite img { height: 100%; object-fit: cover; object-position: 12% center; }
.accueil-chiffres.sombre { background: var(--nuit-950); border-bottom: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); }
.accueil-chiffres.sombre strong { color: var(--blanc); }
.accueil-chiffres.sombre span { color: var(--texte-inverse-doux); }
.accueil-chiffres.sombre .ico { color: #5b8cff; }
@media (min-width: 900px) { .accueil-chiffres.sombre li + li { border-left: 1px solid rgba(255,255,255,.1); } }
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (min-width: 640px) { .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; height: 100%; min-height: 132px; padding: var(--e-4) var(--e-3);
  border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(143,176,255,.22); color: var(--blanc); text-decoration: none; transition: border-color .15s, background .15s; }
.tuile:hover { background: rgba(91,140,255,.12); border-color: rgba(143,176,255,.6); color: var(--blanc); }
.tuile .ico { color: #5b8cff; margin-bottom: .2rem; }
.tuile strong { font-size: var(--t-sm); line-height: 1.25; }
.tuile span { font-size: var(--t-xs); color: var(--texte-inverse-doux); line-height: 1.35; }
@media (min-width: 960px) { .accueil-duo-inverse { grid-template-columns: 1.1fr .9fr; } }
.accueil-duo-inverse .appareils { margin: 0 6% var(--e-6) 10%; }
.liste-check-accent .ico { color: var(--accent); width: 22px; height: 22px; }
.etapes-az { list-style: none; margin: 0; }
.section-tete-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3); }
.realisations-accueil { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
@media (min-width: 640px) { .realisations-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .realisations-accueil { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.realisation-carte { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; color: var(--blanc); text-decoration: none; box-shadow: var(--ombre); }
.realisation-carte img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.realisation-carte:hover img { transform: scale(1.04); }
.realisation-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,28,0) 35%, rgba(6,13,28,.92) 100%); }
.realisation-legende { position: absolute; left: var(--e-4); right: 4rem; bottom: var(--e-4); z-index: 1; display: grid; gap: 2px; }
.realisation-legende strong { font-size: var(--t-md); }
.realisation-legende span { font-size: var(--t-xs); color: #d5deec; }
.realisation-fleche { position: absolute; right: var(--e-4); bottom: var(--e-4); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanc); color: var(--nuit-900); }
.accueil-faq .btn { margin-top: var(--e-2); }
.sans-coupure { white-space: nowrap; }
.nav-principale a { white-space: nowrap; }
.site-studio .nav-principale a { padding: 0 .55rem; }
@media (max-width: 1279px) { .site-studio .lien-entete { display: none; } }
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-studio .entete-actions .btn { padding: .65rem .9rem; }
  .site-studio .nav-principale a { padding: 0 .4rem; }
}
.section-sombre .carte-verre.liste-check { padding: var(--e-5); border-radius: 12px; gap: var(--e-4); font-size: var(--t-base); background: rgba(6,13,28,.72); }
.section-sombre .carte-verre.liste-check .ico { color: #8fb0ff; }
.appareil-mobile-droite img { object-position: 0 center; }
.entete-actions .btn { white-space: nowrap; }
/* Placeholder des emplacements photo (en attente d'une photo importée dans Solar-Admin → Images du site) */
.img-placeholder .ico { color: #8fb0ff; }
.hero-visuel { position: relative; padding-bottom: 18%; }
.hero-photo { border-radius: var(--rayon-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre-forte); }
.hero-photo img, .hero-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .img-placeholder { justify-content: flex-start; padding-top: 14%; }
.appareils-hero { position: absolute; left: -4%; bottom: 0; width: 76%; margin: 0; }
.hero-visuel .note-main { top: -2.6rem; right: 0; }
.fond-photo img, .fond-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: 0; }
.placeholder-coin.img-placeholder { align-items: flex-end; justify-content: flex-end; padding: var(--e-4) var(--e-6); text-align: right; font-size: var(--t-xs); }
.placeholder-coin.img-placeholder strong { font-size: var(--t-sm); }
.fond-photo::after { background: linear-gradient(90deg, rgba(6,13,28,.92) 0%, rgba(6,13,28,.75) 50%, rgba(6,13,28,.35) 100%) !important; }
@media (max-width: 899px) { .placeholder-coin.img-placeholder { display: none; } }
/* ---------------------------------------------------------------- Identité publique verrouillée (D97)
   Sites publics seulement (body.site-*) : bleu nuit dominant, noir profond, blanc, gris froid. Aucune couleur propre
   à un produit ; ni orange, jaune, violet, vert ni rouge. Solar-Admin et l'espace client ne sont pas concernés. */
body[class^="site-"] .sombre :focus-visible, body[class^="site-"] .section-sombre :focus-visible { outline-color: #ffffff; }
body[class^="site-"] .btn-accent:hover { background: var(--nuit-900); border-color: var(--nuit-900); }
body[class^="site-"] .sombre .surtitre-accent, body[class^="site-"] .section-sombre .surtitre-accent, body[class^="site-"] .accent-clair,
body[class^="site-"] .texte-accent, body[class^="site-"] .hero-benefices .ico, body[class^="site-"] .accueil-chiffres.sombre .ico,
body[class^="site-"] .accueil-hero .reassurance .ico, body[class^="site-"] .tuile .ico, body[class^="site-"] .section-sombre .liste-check-grande .ico,
body[class^="site-"] .accueil-cta .carte-verre .ico, body[class^="site-"] .section-sombre .carte-verre.liste-check .ico, body[class^="site-"] .img-placeholder .ico { color: #c3cee0; }
body[class^="site-"] .sombre .btn-accent, body[class^="site-"] .section-sombre .btn-accent { background: var(--blanc); border-color: var(--blanc); color: var(--nuit-900); }
body[class^="site-"] .tuile:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
body[class^="site-"] .parcours-ico { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
body[class^="site-"] .etoiles { color: var(--nuit-700); }
/* ---------------------------------------------------------------- Accueil Studio Solaire : écosystème (D97), mobile d'abord */
.eco-hero { background: var(--nuit-950); color: var(--blanc); padding: var(--e-6) 0 var(--e-6); }
.eco-hero-int { display: grid; gap: var(--e-5); align-items: center; }
.eco-hero h1 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem); line-height: 1.08; max-width: 18ch; margin-bottom: var(--e-3); }
.eco-hero .chapeau { color: var(--texte-inverse-doux); margin-bottom: var(--e-3); max-width: 52ch; }
.eco-hero .groupe-btn { margin: var(--e-4) 0 var(--e-3); }
.eco-mention { margin: 0; color: var(--texte-inverse-doux); font-size: var(--t-sm); }
.eco-mention strong { color: var(--blanc); font-size: var(--t-md); }
.eco-hero-visuel { display: none; }
.eco-hero-visuel img, .eco-hero-visuel .img-placeholder { width: 100%; border-radius: var(--rayon-lg); }
.eco-duo { display: grid; gap: var(--e-6); align-items: center; }
.eco-problemes, .eco-produits, .eco-packs, .eco-pourqui { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.eco-problemes .carte { display: flex; flex-direction: column; gap: var(--e-2); }
.eco-problemes h3, .eco-produit h3, .eco-pack h3 { margin: 0; }
.eco-problemes p { margin: 0; color: var(--texte-doux); }
.eco-problemes .ico { color: var(--nuit-900); }
.eco-reponse { margin-top: auto !important; padding-top: var(--e-2); font-weight: 600; font-size: var(--t-sm); }
.eco-logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--nuit-900); vertical-align: middle; }
.section-sombre .eco-logo { color: var(--blanc); }
.eco-logo .logo-texte { display: inline-flex; flex-direction: column; line-height: 1; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; }
.eco-prix { font-size: var(--t-md); margin: var(--e-3) 0; }
.eco-prix strong { font-family: var(--police-titre); font-size: var(--t-2xl); }
.eco-liste-2 { font-size: var(--t-base); }
.eco-produit { display: flex; flex-direction: column; gap: var(--e-2); }
.eco-produit h3 span { font-weight: 400; color: var(--texte-doux); }
.eco-produit p { margin: 0; color: var(--texte-doux); font-size: var(--t-sm); }
.eco-produit-logo { margin: 0 0 var(--e-1) !important; }
.eco-produit .eco-produit-prix { color: var(--nuit-900); font-weight: 700; font-size: var(--t-base); margin-top: auto !important; padding-top: var(--e-2); }
.eco-chaine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.eco-chaine li { display: flex; gap: var(--e-4); align-items: flex-start; }
.eco-chaine h3 { margin: 0 0 var(--e-1); }
.eco-chaine p { margin: 0; color: var(--texte-doux); }
.eco-chaine-liens { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-1) !important; font-size: var(--t-sm); font-weight: 600; }
.eco-etape { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nuit-900); color: var(--blanc); font-weight: 700; }
.eco-pack { display: flex; flex-direction: column; gap: var(--e-3); }
.eco-pack-prix { margin: 0; }
.eco-pack-prix strong { font-family: var(--police-titre); font-size: var(--t-xl); color: var(--nuit-900); }
.eco-pack .eco-pack-valeur { margin: auto 0 0; font-size: var(--t-sm); color: var(--texte-doux); }
.eco-pack-valeur strong { display: block; color: var(--texte); }
.eco-360 .eco-prix strong { color: var(--blanc); }
.eco-pourqui li { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4); border: 1px solid var(--ligne); border-radius: var(--rayon); }
.eco-pourqui .ico { color: var(--nuit-900); }
.eco-pourqui span { color: var(--texte-doux); font-size: var(--t-sm); }
@media (min-width: 640px) {
  .eco-problemes, .eco-produits, .eco-packs, .eco-pourqui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-liste-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .eco-hero { padding: var(--e-8) 0; }
  .eco-hero-int, .eco-duo { grid-template-columns: 1.1fr .9fr; }
  .eco-hero-visuel { display: block; }
  .eco-problemes, .eco-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eco-produits, .eco-pourqui { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .eco-chaine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eco-fiche { max-width: 360px; }
.eco-fiche .eco-logo, .eco-fiche .eco-logo .logo, .eco-fiche .eco-logo * { color: var(--nuit-900); }
.eco-fiche .liste-check { margin-bottom: var(--e-3); }
.eco-fiche .liste-check li { font-size: var(--t-sm); }
body[class^="site-"] .liste-check .ico, body[class^="site-"] .chat-demo-tete small { color: var(--nuit-700); }
/* ================================================================ Maquette validée Studio Solaire (D138)
   Nuit profonde, lueurs bleues, cartes claires bleutées ; identique sur bureau, tablette et téléphone (repli en colonnes). */
.site-studio { --largeur: 1320px; --sv3-nuit: #061024; --sv3-nuit-2: #0b1d3d; --sv3-lueur: #4d8dff; --sv3-lueur-2: #9cc3ff; --sv3-carte: #f3f7fd; --sv3-ligne: #dbe5f3; }
.site-studio .logo-slogan { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.logo-accroche { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; max-width: 26ch; line-height: 1.25; }
.site-studio .entete .logo-inner svg { width: 42px; height: 42px; }
.site-studio .entete .logo-image-clair { height: 38px; }
.site-studio .entete .logo-inner { gap: .65rem; }
.site-studio .entete .logo-texte { font-size: .9rem; }
.site-studio .entete .logo-texte span:last-child { font-size: 1.12rem; font-weight: 700; }
.site-studio .entete-int { min-height: 76px; gap: var(--e-3); }
.site-studio .nav-principale ul { gap: 0; }
.site-studio .lien-entete { white-space: nowrap; }
.site-studio .nav-principale a { padding: 0 .7rem; }
.site-studio .nav-principale a::after { left: .7rem; right: .7rem; bottom: 10px; }
@media (min-width: 1024px) and (max-width: 1239px) { .site-studio .nav-principale { display: none; } .site-studio .entete-actions .btn { display: inline-flex; } }
@media (max-width: 1239px) { .site-studio .bouton-menu { display: inline-flex; } }
@media (min-width: 1240px) { .site-studio .bouton-menu { display: none; } }
.site-studio .entete .btn-clair { border-radius: 999px; }
.sv3-logo-grand svg { width: 64px; height: 64px; }
.sv3-logo-grand .logo-image-clair { height: 58px; }
.sv3-logo-grand .logo-texte { font-size: 1.15rem; letter-spacing: .1em; }
.sv3-logo-grand .logo-texte span:last-child { font-size: 1.6rem; font-weight: 800; }
.sv3-logo-sombre { color: var(--sv3-nuit); }
/* Hero et orbite de l'écosystème */
.sv3-hero { background: radial-gradient(900px 520px at 78% 40%, rgba(77,141,255,.22), transparent 62%), linear-gradient(180deg, var(--sv3-nuit) 0%, var(--sv3-nuit-2) 100%); color: var(--blanc); padding: var(--e-7) 0; overflow: hidden; }
.sv3-hero-int { display: grid; gap: var(--e-7); align-items: center; }
.sv3-hero .surtitre { color: var(--texte-inverse-doux); letter-spacing: .2em; }
.sv3-hero h1 { font: 800 clamp(2rem, 1.25rem + 2.3vw, 3rem)/1.1 var(--police-texte); letter-spacing: -.02em; margin-bottom: var(--e-5); max-width: 20ch; text-wrap: balance; }
.sv3-hero .chapeau { color: rgba(255,255,255,.86); max-width: 56ch; margin-bottom: var(--e-5); }
.sv3-hero a:not(.btn):hover { color: var(--blanc); }
.sv3-hero .btn { border-radius: 999px; }
.sv3-hero .btn-contour { color: var(--blanc); border-color: rgba(255,255,255,.55); }
.sv3-hero .btn-contour:hover, .sv3-hero .btn-contour:focus-visible { background: rgba(255,255,255,.1); color: var(--blanc); border-color: var(--blanc); }
.sv3-mention { margin-top: var(--e-4); font-size: var(--t-md); }
.sv3-mention a { color: inherit; text-underline-offset: 3px; }
.sv3-mention strong { font-size: 1.5rem; }
.sv3-mention-prix { white-space: nowrap; }
.sv3-mention small { display: block; margin-top: .3rem; font-size: var(--t-sm); color: rgba(255,255,255,.72); }
.sv3-atouts { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); color: var(--texte-inverse-doux); font-size: var(--t-sm); }
.sv3-atouts li { display: inline-flex; align-items: center; gap: .35rem; }
.sv3-atouts .ico { color: var(--sv3-lueur-2); }
.sv3-orbite { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto var(--e-5); }
.sv3-orbite::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(77,141,255,.35) 0%, rgba(77,141,255,.12) 45%, transparent 70%); pointer-events: none; }
.sv3-orbite ul { list-style: none; margin: 0; padding: 0; }
.sv3-orbite-rayons { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(156,195,255,.7); pointer-events: none; }
.sv3-orbite-anneau { position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(156,195,255,.5); box-shadow: 0 0 60px rgba(77,141,255,.18) inset; }
.sv3-orbite-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #1b3f84 0%, #0b2152 55%, #050f27 100%); border: 2px solid rgba(190,215,255,.85); box-shadow: 0 0 0 6px rgba(77,141,255,.12), 0 0 44px rgba(77,141,255,.55); color: var(--blanc); text-decoration: none; z-index: 1; }
.sv3-orbite-centre:hover, .sv3-orbite-centre:focus-visible { color: var(--blanc); border-color: var(--blanc); }
.sv3-orbite-centre .logo-inner { flex-direction: column; text-align: center; gap: .3rem; }
.sv3-orbite-centre .logo-texte { align-items: center; }
/* La pastille (58 px) est centrée sur son point de l'anneau ; nom et rôle dessous */
.sv3-orbite-n { position: absolute; width: 26%; transform: translate(-50%, -29px); text-align: center; z-index: 1; }
.sv3-orbite-n a { display: flex; flex-direction: column; align-items: center; gap: .15rem; color: var(--blanc); text-decoration: none; }
.sv3-orbite-n a:hover { color: var(--blanc); }
.sv3-orbite-n strong { margin-top: .45rem; }
/* Libellés sur fond de la scène : les rayons passent dessous sans gêner la lecture */
.sv3-orbite-n strong, .sv3-orbite-n span:last-child { text-shadow: 0 0 4px #071634, 0 0 8px #071634, 0 0 12px #071634; }
@media (max-width: 599px) { .sv3-hero .surtitre { letter-spacing: .12em; } }
.sv3-orbite-n strong { font-size: .8rem; letter-spacing: .03em; }
.sv3-orbite-n span:last-child { font-size: .72rem; color: var(--texte-inverse-doux); line-height: 1.2; }
.sv3-orbite-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: #0a1d44; border: 1.5px solid rgba(156,195,255,.7); box-shadow: 0 0 18px rgba(77,141,255,.4); color: #dbe8ff; }
.sv3-orbite-n a:hover .sv3-orbite-ico, .sv3-orbite-n a:focus-visible .sv3-orbite-ico { border-color: var(--blanc); box-shadow: 0 0 30px rgba(156,195,255,.8); }
/* 8 positions sur l'anneau (sens horaire depuis le haut) */
.sv3-orbite-n1 { left: 50%; top: 12%; } .sv3-orbite-n2 { left: 76.9%; top: 23.1%; } .sv3-orbite-n3 { left: 88%; top: 50%; } .sv3-orbite-n4 { left: 76.9%; top: 76.9%; }
.sv3-orbite-n5 { left: 50%; top: 88%; } .sv3-orbite-n6 { left: 23.1%; top: 76.9%; } .sv3-orbite-n7 { left: 12%; top: 50%; } .sv3-orbite-n8 { left: 23.1%; top: 23.1%; }
@media (max-width: 599px) {
  .sv3-orbite { aspect-ratio: auto; display: grid; gap: var(--e-4); }
  .sv3-orbite-anneau, .sv3-orbite-rayons, .sv3-orbite::before { display: none; }
  .sv3-orbite-centre { position: static; transform: none; width: 180px; margin: 0 auto; }
  .sv3-orbite ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
  .sv3-orbite-n { position: static; transform: none; width: auto; }
}
@media (min-width: 1024px) { .sv3-hero-int { grid-template-columns: 1.05fr 1fr; } }
/* Sections claires */
.sv3-section { padding: var(--e-7) 0; }
.sv3-fond-doux { background: linear-gradient(180deg, #f6f9fd, #eef3fa); }
.sv3-tete { display: grid; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-5); }
.sv3-tete h2, .sv3-sous-titre { font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1.15 var(--police-texte); letter-spacing: -.015em; color: var(--sv3-nuit); margin: 0; }
.sv3-tete p { color: var(--texte-doux); margin: 0; max-width: 60ch; }
@media (min-width: 900px) { .sv3-tete { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.sv3-cartes, .sv3-realisations, .sv3-publics, .sv3-chaine, .sv3-etapes, .sv3-leviers, .sv3-mesure-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.sv3-carte { background: var(--sv3-carte); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-5); }
.sv3-carte h3 { font: 700 var(--t-base) var(--police-texte); margin: var(--e-3) 0 var(--e-2); color: var(--sv3-nuit); }
.sv3-carte p { margin: 0; color: var(--texte-doux); font-size: var(--t-sm); }
.sv3-carte .ico { color: var(--sv3-nuit); }
@media (min-width: 640px) { .sv3-cartes-4, .sv3-realisations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sv3-cartes-4 { grid-template-columns: repeat(4, 1fr); } .sv3-realisations { grid-template-columns: repeat(3, 1fr); } }
/* Section « défis » de l'accueil : pastilles d'icônes homogènes, cartes compactes */
.sv3-pastille { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: #e3ecfa; color: var(--sv3-nuit); }
.sv3-pastille .ico { color: inherit; }
.sv3-defis .sv3-tete { margin-bottom: var(--e-6); }
.sv3-defis .sv3-tete h2 { max-width: 36ch; text-wrap: balance; }
/* Titre sur deux lignes : en dessous de 1200 px, titre puis introduction sur toute la largeur ; au-delà, titre large à gauche */
@media (min-width: 900px) and (max-width: 1199px) { .sv3-defis .sv3-tete { grid-template-columns: 1fr; } .sv3-defis .sv3-tete p { max-width: 70ch; } }
@media (min-width: 1200px) { .sv3-defis .sv3-tete { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--e-7); } }
.sv3-defis .sv3-carte { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); }
.sv3-defis .sv3-carte h3 { margin: var(--e-2) 0 0; font-size: 1.05rem; line-height: 1.3; }
.sv3-defis .sv3-carte p { font-size: var(--t-sm); line-height: 1.55; color: #4a5872; }
@media (min-width: 1024px) and (max-width: 1199px) { .sv3-defis .sv3-cartes-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
  .sv3-defis .sv3-carte { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--e-4); row-gap: var(--e-1); padding: var(--e-4); }
  .sv3-defis .sv3-carte .sv3-pastille { grid-row: span 2; }
  .sv3-defis .sv3-carte h3 { margin: 0; }
  .sv3-defis .sv3-question { font-size: var(--t-md); }
  .sv3-defis .sv3-question::before, .sv3-defis .sv3-question::after { display: none; }
}
.sv3-question { display: flex; align-items: center; gap: var(--e-4); justify-content: center; margin: var(--e-7) 0 var(--e-2); font: 800 var(--t-lg) var(--police-texte); color: var(--sv3-nuit); text-align: center; }
.sv3-question::before, .sv3-question::after { content: ""; flex: 0 1 120px; height: 1px; background: var(--ligne-forte); }
/* Bande sombre des leviers */
.sv3-bande { background: linear-gradient(90deg, var(--sv3-nuit), var(--sv3-nuit-2)); color: var(--blanc); padding: var(--e-7) 0; }
.sv3-bande-int { display: grid; gap: var(--e-6); align-items: center; }
.sv3-bande h2 { font: 800 clamp(1.4rem, 1.05rem + 1.2vw, 1.85rem)/1.28 var(--police-texte); letter-spacing: -.01em; margin-bottom: var(--e-4); text-wrap: balance; }
.sv3-bande p { color: rgba(255,255,255,.82); max-width: 56ch; margin: 0; line-height: 1.65; }
/* Bénéfices : une ligne par bénéfice sur mobile (pictogramme à gauche), 2 × 2 sur tablette, 4 colonnes sur grand écran */
.sv3-leviers { grid-template-columns: 1fr; gap: var(--e-4); }
.sv3-leviers li { display: flex; align-items: flex-start; gap: var(--e-3); }
.sv3-pastille-claire { background: rgba(156,195,255,.14); border: 1px solid rgba(156,195,255,.35); color: #dbe8ff; }
.sv3-levier-texte { display: flex; flex-direction: column; gap: .3rem; }
.sv3-leviers strong { font-size: var(--t-base); font-weight: 700; line-height: 1.3; }
.sv3-levier-texte span { font-size: var(--t-sm); line-height: 1.5; color: rgba(255,255,255,.78); }
@media (min-width: 640px) { .sv3-leviers { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); } }
/* Grand écran : présentation en tête (titre à gauche, texte à droite), puis les quatre bénéfices sur toute la largeur,
   espacés et soulignés d'un filet discret au lieu de séparateurs verticaux */
@media (min-width: 1024px) {
  .sv3-bande-int { gap: var(--e-7); }
  .sv3-leviers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
  .sv3-leviers li { flex-direction: column; gap: var(--e-3); padding-top: var(--e-5); border-top: 1px solid rgba(255,255,255,.12); }
}
@media (min-width: 1200px) {
  .sv3-bande-texte { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--e-7); align-items: end; }
  .sv3-bande-texte h2 { margin-bottom: 0; }
  .sv3-leviers { gap: var(--e-7); }
}
/* Socle */
/* Socle : carte de l'offre, contenu regroupé par thème, transition vers les solutions */
.sv3-socle { display: grid; gap: var(--e-6); align-items: start; }
.sv3-socle h2 { font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1.15 var(--police-texte); letter-spacing: -.015em; color: var(--sv3-nuit); margin: 0 0 var(--e-3); }
.sv3-socle-intro { color: #4a5872; max-width: 60ch; margin: 0 0 var(--e-5); }
.sv3-socle-groupes { display: grid; gap: var(--e-5); }
.sv3-socle-groupes h3 { font: 700 var(--t-sm) var(--police-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--sv3-nuit); margin: 0 0 var(--e-3); padding-bottom: var(--e-2); border-bottom: 1px solid var(--sv3-ligne); }
.sv3-socle-carte { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center; background: #e8eef8; border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-5); color: var(--sv3-nuit); text-decoration: none; }
.sv3-socle-carte:hover, .sv3-socle-carte:focus-visible { border-color: var(--sv3-nuit); color: var(--sv3-nuit); }
.sv3-socle-condition { font-size: var(--t-xs); color: #4a5872; }
.sv3-socle-lien { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--e-2); font-size: var(--t-sm); font-weight: 600; }
.sv3-socle-carte:hover .sv3-socle-lien { text-decoration: underline; text-underline-offset: 3px; }
.sv3-ensuite { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center; margin: 0; padding-top: var(--e-5); border-top: 1px solid var(--sv3-ligne); color: #4a5872; }
.sv3-ensuite .ico { flex: none; border: 1.5px solid var(--sv3-nuit); border-radius: 50%; padding: 3px; color: var(--sv3-nuit); }
.sv3-ensuite > span { flex: 1 1 24ch; }
.sv3-ensuite strong { color: var(--sv3-nuit); }
@media (min-width: 640px) { .sv3-socle-groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Accueil : carte et contenu de même hauteur, conditions lisibles, transition seule (le lien vers les solutions, juste en dessous, est retiré) */
.sv3-socle .sv3-socle-carte { justify-content: center; padding: var(--e-6) var(--e-5); }
.sv3-socle-logo { display: block; width: auto; height: 104px; margin-bottom: var(--e-2); }
.sv3-socle .sv3-socle-condition { font-size: var(--t-sm); line-height: 1.45; }
.sv3-socle .sv3-ensuite { flex-wrap: nowrap; align-items: flex-start; gap: var(--e-3); margin-top: var(--e-2); padding-top: var(--e-6); font-size: var(--t-md); line-height: 1.5; }
.sv3-socle .sv3-ensuite .ico { margin-top: .05rem; }
/* Groupes alignés : intitulés sur une même ligne de base, listes au même niveau même si un intitulé passe sur deux lignes */
@media (min-width: 640px) { .sv3-socle .sv3-socle-groupes { grid-template-rows: auto auto; } .sv3-socle .sv3-socle-groupes > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } .sv3-socle .sv3-socle-groupes h3 { align-self: end; } }
@media (min-width: 1024px) { .sv3-socle { grid-template-columns: 280px 1fr; column-gap: var(--e-6); align-items: stretch; } .sv3-ensuite { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .sv3-socle { grid-template-columns: 320px 1fr; column-gap: var(--e-7); } }
.sv3-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--t-sm); }
.sv3-liste li { display: flex; gap: .45rem; align-items: flex-start; }
.sv3-liste .ico { flex: none; color: var(--sv3-nuit); margin-top: .1rem; }
@media (min-width: 640px) { .sv3-liste-2 { grid-template-columns: repeat(2, 1fr); gap: .6rem var(--e-6); } }
/* Prix */
.sv3-prix { margin: 0; color: var(--sv3-nuit); }
.sv3-prix strong { font: 800 1.6rem var(--police-texte); }
.sv3-prix span { font-size: var(--t-xs); color: var(--texte-doux); }
.sv3-prix s { font: 700 1.1rem var(--police-texte); color: var(--texte-doux); }
/* 8 solutions côte à côte */
.sv3-solutions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
.sv3-solution { display: flex; flex-direction: column; gap: var(--e-2); background: var(--sv3-carte); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-4); scroll-margin-top: 90px; }
.sv3-solution-ico { display: inline-flex; justify-content: center; color: #1f4fa8; }
.sv3-solution-nom { font: 800 var(--t-sm) var(--police-texte); letter-spacing: .02em; text-align: center; color: var(--sv3-nuit); margin: 0; }
.sv3-solution-role { text-align: center; font-size: var(--t-xs); color: var(--texte-doux); margin: 0; }
.sv3-solution .sv3-prix { text-align: center; }
.sv3-solution .sv3-liste { font-size: var(--t-xs); }
.sv3-offert { margin: 0; text-align: center; background: #1f4fa8; color: var(--blanc); border-radius: var(--rayon-sm); padding: .35rem; font-size: var(--t-xs); }
.sv3-offert strong { display: block; font-size: 1.15rem; letter-spacing: .04em; }
.sv3-business { background: #e2ebfa; border-radius: var(--rayon-sm); padding: var(--e-2) var(--e-3); font-size: var(--t-xs); }
.sv3-business p { margin: 0 0 .3rem; color: var(--sv3-nuit); }
.sv3-solution-cta { margin: auto 0 0; padding-top: var(--e-2); text-align: center; font-size: var(--t-xs); font-weight: 600; }
@media (min-width: 560px) { .sv3-solutions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sv3-solutions { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .sv3-solutions { grid-template-columns: repeat(8, 1fr); } }
/* Accueil : cartes avec logos officiels ; 1 colonne sur mobile, 2 sur tablette, 3 sur grand écran ; Solar-Rank sur deux
   colonnes (Essentiel et Business côte à côte) ; liens « En parler » alignés en bas */
.sv3-solutions-logos { gap: var(--e-4); }
.sv3-solutions-logos .sv3-solution { gap: var(--e-3); padding: var(--e-5); }
.sv3-solution-logo { display: block; width: auto; height: 84px; margin: 0 auto; }
.sv3-solutions-logos .sv3-solution-role { font-size: var(--t-sm); margin-top: calc(-1 * var(--e-1)); }
.sv3-solutions-logos .sv3-liste { font-size: var(--t-sm); gap: .5rem; line-height: 1.4; }
.sv3-solution-desc { margin: 0; text-align: center; font-size: var(--t-sm); line-height: 1.5; color: #4a5872; }
.sv3-solutions-logos .sv3-solution > .sv3-liste { padding-top: var(--e-3); border-top: 1px solid var(--sv3-ligne); }
.sv3-solutions-logos .sv3-solution-cta { padding-top: var(--e-3); font-size: var(--t-sm); }
.sv3-formules { display: grid; gap: var(--e-3); }
.sv3-formule { display: grid; align-content: start; gap: var(--e-2); background: var(--blanc); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon); padding: var(--e-4); }
.sv3-formule-business { background: #e8eef8; }
.sv3-formule-nom { margin: 0; text-align: center; font: 700 var(--t-sm) var(--police-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--sv3-nuit); }
.sv3-formule .sv3-prix { text-align: center; }
.sv3-formule .sv3-liste { padding-top: var(--e-3); border-top: 1px solid var(--sv3-ligne); }
.sv3-solutions-logos .sv3-offert { padding: var(--e-2) var(--e-3); font-size: var(--t-sm); }
.sv3-solutions-logos .sv3-offert strong { text-transform: uppercase; }
@media (min-width: 640px) {
  .sv3-solutions-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv3-solutions-logos .sv3-solution-rank { grid-column: span 2; }
  .sv3-formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .sv3-solutions-logos .sv3-solution-plan { grid-column: span 2; }
  .sv3-solutions-logos .sv3-solution-plan > .sv3-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-5); }
}
@media (min-width: 1024px) { .sv3-solutions-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); } }
/* Chaîne des solutions */
.sv3-chaine li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; background: var(--blanc); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-4) var(--e-3); }
.sv3-chaine .ico { color: #1f4fa8; }
.sv3-chaine strong { font-size: var(--t-xs); letter-spacing: .03em; color: var(--sv3-nuit); }
.sv3-chaine-outils { font-size: var(--t-xs); color: #1f4fa8; font-weight: 600; }
.sv3-chaine span:last-child { font-size: var(--t-xs); color: var(--texte-doux); }
@media (min-width: 640px) { .sv3-chaine { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sv3-chaine { grid-template-columns: repeat(7, 1fr); gap: var(--e-5); }
  .sv3-chaine li:not(:last-child)::after { content: "→"; position: absolute; right: -1.05rem; top: 45%; color: var(--texte-doux); } }
/* Packs par objectif */
.sv3-packs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.sv3-pack { display: flex; flex-direction: column; gap: var(--e-2); background: var(--sv3-carte); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-4); scroll-margin-top: 90px; }
.sv3-pack-tete { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center; color: var(--sv3-nuit); }
.sv3-pack-tete h3 { font: 800 var(--t-xs) var(--police-texte); letter-spacing: .04em; margin: 0; }
.sv3-pack-objectif { margin: 0; text-align: center; font-size: var(--t-xs); color: var(--texte-doux); }
.sv3-pack .sv3-prix { text-align: center; }
.sv3-inclus { margin: 0; font-size: var(--t-xs); font-weight: 700; color: var(--sv3-nuit); }
.sv3-pack-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--t-xs); }
.sv3-pack-liste li { display: flex; gap: .4rem; align-items: center; }
.sv3-pack-liste .ico { flex: none; color: var(--sv3-nuit); }
.sv3-valeur { margin: auto 0 0; background: #e2ebfa; border-radius: var(--rayon-sm); padding: var(--e-2); text-align: center; font-size: var(--t-xs); color: var(--sv3-nuit); }
@media (min-width: 560px) { .sv3-packs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sv3-packs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .sv3-packs { grid-template-columns: repeat(6, 1fr); } .sv3-pack { padding: var(--e-3); } }
/* Accueil : parcours (pictogramme blanc dans le soleil officiel) et packs selon l'infographie du chef de projet */
.sv3-chaine-v2 li { justify-content: flex-start; gap: .35rem; padding: var(--e-4) var(--e-3); border-color: #cfdcf2; border-radius: var(--rayon-lg); }
.sv3-soleil { position: relative; display: block; width: 92px; margin-bottom: var(--e-2); }
.sv3-soleil img { display: block; width: 100%; height: auto; }
.sv3-soleil .ico { position: absolute; left: 50%; top: 71%; width: 26%; height: auto; transform: translate(-50%, -50%); color: var(--blanc); stroke-width: 2.4; }
.sv3-chaine-v2 strong { font-size: var(--t-sm); line-height: 1.25; }
.sv3-chaine-v2 .sv3-chaine-outils { font-size: var(--t-sm); }
.sv3-chaine-v2 span:last-child { font-size: var(--t-sm); line-height: 1.4; color: #4a5872; }
.sv3-chaine-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (min-width: 640px) and (max-width: 1199px) { .sv3-chaine-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .sv3-chaine-v2 li { padding: var(--e-3) var(--e-2); } .sv3-chaine-v2 .sv3-soleil { width: 76px; } }
@media (min-width: 1100px) { .sv3-chaine-v2 li:not(:last-child)::after { content: none; } }
@media (min-width: 1200px) { .sv3-chaine-v2 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-5); }
  .sv3-chaine-v2 li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--e-5) / 2); top: 50%; transform: translate(50%, -50%); font-size: 1.1rem; color: #1f4fa8; } }
.sv3-packs-section { --pk-nuit: #10265c; --pk-bleu: #2f6fe0; }
/* Bandeau : « Les packs par objectif », trait, sous-titre et pastille Solar-Plan offert */
.sv3-packs-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-5); }
.sv3-packs-bandeau h2 { margin: 0; font: 900 clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem)/1.05 var(--police-texte); letter-spacing: -.01em; text-transform: uppercase; color: var(--pk-nuit); }
.sv3-packs-bandeau h2 span { color: var(--pk-bleu); }
.sv3-packs-trait { flex: 0 0 72px; height: 2px; background: var(--pk-bleu); border-radius: 2px; }
.sv3-packs-sous { margin: 0; font-size: var(--t-md); color: var(--pk-nuit); }
.sv3-packs-plan { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 0 auto; padding: .55rem 1.1rem; background: #e8f0fd; border-radius: 10px; color: var(--pk-bleu); font-size: var(--t-sm); }
.sv3-packs-plan strong { color: var(--pk-nuit); }
@media (max-width: 899px) { .sv3-packs-trait { display: none; } .sv3-packs-plan { margin-left: 0; } }
/* Cartes */
.sv3-packs-v3 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: minmax(0, 1fr); }
.sv3-pk { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); background: linear-gradient(180deg, #eaf1fc 0%, #f6f9fe 45%, #fbfcff 100%); border: 1px solid #dde7f6; border-radius: 14px; scroll-margin-top: 90px; transition: border-color .15s, box-shadow .15s; }
.sv3-pk:hover, .sv3-pk:focus-within { border-color: var(--pk-bleu); box-shadow: 0 8px 22px rgba(16, 38, 92, .1); }
.sv3-pk-tete { display: flex; gap: var(--e-3); align-items: flex-start; }
.sv3-pk-ico { flex: none; width: 56px; height: 56px; }
.sv3-pk-tete h3 { margin: 0 0 .3rem; font: 900 1.02rem/1.15 var(--police-texte); text-transform: uppercase; color: var(--pk-nuit); }
.sv3-pk-lien { color: inherit; text-decoration: none; }
.sv3-pk-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sv3-pk-lien:focus-visible { outline: none; }
.sv3-pk:has(.sv3-pk-lien:focus-visible) { outline: 3px solid var(--pk-bleu); outline-offset: 2px; }
.sv3-pk-tete p { margin: 0; font-size: .88rem; line-height: 1.35; color: #2b3a5e; }
.sv3-pk-prix { margin: 0; text-align: center; color: var(--pk-nuit); }
.sv3-pk-prix strong { font: 900 2.1rem/1 var(--police-texte); }
.sv3-pk-prix span { font-size: 1.05rem; }
.sv3-pk-inclus > p { margin: 0 0 .45rem; font-weight: 800; color: var(--pk-nuit); }
.sv3-pk-inclus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sv3-pk-inclus li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: #1d2b4f; }
.sv3-pk-pico { flex: none; width: 20px; height: 20px; color: var(--pk-nuit); }
.sv3-pk-valeur { margin: auto 0 0; padding: .75rem .5rem; text-align: center; background: #e2ebfa; border-radius: 10px; font-size: .98rem; line-height: 1.45; color: var(--pk-nuit); }
@media (min-width: 640px) { .sv3-packs-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv3-pk { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--e-3); } }
@media (min-width: 1024px) { .sv3-packs-v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Grand écran : les six packs sur une rangée, section élargie, tailles proportionnelles à la largeur */
@media (min-width: 1360px) {
  .sv3-packs-section > .conteneur { max-width: 1880px; }
  .sv3-packs-v3 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
  .sv3-pk { padding: 1rem .8rem .8rem; }
  .sv3-pk-ico { width: clamp(40px, 1rem + 2vw, 60px); height: clamp(40px, 1rem + 2vw, 60px); }
  .sv3-packs-bandeau { flex-wrap: nowrap; gap: .75rem 1.25rem; }
  .sv3-packs-bandeau h2 { white-space: nowrap; font-size: clamp(1.7rem, .9rem + 1.1vw, 2.5rem); }
  .sv3-packs-sous { font-size: clamp(.9rem, .6rem + .35vw, 1.125rem); }
  .sv3-packs-plan { flex: none; white-space: nowrap; }
  .sv3-pk-tete { gap: .6rem; }
  .sv3-pk-tete h3 { font-size: clamp(.8rem, .5rem + .36vw, 1.02rem); }
  .sv3-pk-tete p { font-size: clamp(.72rem, .45rem + .3vw, .88rem); }
  .sv3-pk-prix strong { font-size: clamp(1.5rem, .8rem + .9vw, 2.1rem); }
  .sv3-pk-prix span { font-size: clamp(.85rem, .55rem + .35vw, 1.05rem); }
  .sv3-pk-inclus > p { font-size: clamp(.8rem, .5rem + .35vw, 1rem); }
  .sv3-pk-inclus li { font-size: clamp(.74rem, .42rem + .38vw, .95rem); gap: .5rem; }
  .sv3-pk-pico { width: clamp(15px, .5rem + .5vw, 20px); height: clamp(15px, .5rem + .5vw, 20px); }
  .sv3-pk-valeur { font-size: clamp(.76rem, .45rem + .38vw, .98rem); }
}
/* Solar 360 */
.sv3-360 { background: linear-gradient(90deg, var(--sv3-nuit), var(--sv3-nuit-2)); color: var(--blanc); padding: var(--e-6) 0; scroll-margin-top: 80px; }
.sv3-360-int { display: grid; gap: var(--e-5); align-items: center; }
.sv3-360-titre { display: flex; gap: var(--e-4); align-items: flex-start; }
.sv3-360-titre > .ico { flex: none; color: var(--sv3-lueur-2); }
.sv3-360 h2 { font: 800 clamp(1.3rem, 1rem + 1.1vw, 1.8rem) var(--police-texte); margin: 0 0 var(--e-2); }
.sv3-360-accroche { font-weight: 600; margin: 0 0 var(--e-2); }
.sv3-360 p { color: var(--texte-inverse-doux); margin: 0; font-size: var(--t-sm); }
.sv3-360-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: var(--t-sm); }
.sv3-360-liste li { display: flex; gap: .45rem; align-items: center; }
.sv3-360-liste .ico { color: var(--sv3-lueur); flex: none; }
.sv3-360-prix { border: 1px solid rgba(156,195,255,.45); border-radius: var(--rayon-lg); padding: var(--e-4); display: grid; gap: var(--e-3); }
.sv3-360-prix .sv3-prix, .sv3-360-prix .sv3-prix span { color: var(--blanc); }
.sv3-360-prix .sv3-prix strong { font-size: 2rem; }
.sv3-360-prix p { color: var(--blanc); font-size: var(--t-sm); }
@media (min-width: 1024px) { .sv3-360-int { grid-template-columns: 1.4fr 1fr 280px; } .sv3-360-liste { border-left: 1px solid rgba(255,255,255,.18); padding-left: var(--e-5); } }
/* Publics, étapes, sur mesure */
.sv3-publics li { display: flex; gap: var(--e-4); align-items: center; background: var(--blanc); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-4); }
.sv3-publics strong { display: block; color: var(--sv3-nuit); }
.sv3-publics span { font-size: var(--t-sm); color: var(--texte-doux); }
.sv3-publics .ico { flex: none; color: var(--sv3-nuit); }
@media (min-width: 900px) { .sv3-publics { grid-template-columns: repeat(3, 1fr); } }
.sv3-sous-titre { margin: var(--e-7) 0 var(--e-4); }
.sv3-etapes li { position: relative; display: flex; gap: var(--e-3); align-items: flex-start; }
.sv3-num { font: 800 2rem/1 var(--police-texte); color: var(--sv3-nuit); border-bottom: 2px solid var(--sv3-ligne); padding-bottom: .2rem; }
.sv3-etapes strong { display: block; font-size: var(--t-sm); color: var(--sv3-nuit); }
.sv3-etapes span:not(.sv3-num) { font-size: var(--t-sm); color: var(--texte-doux); }
@media (min-width: 900px) { .sv3-etapes { grid-template-columns: repeat(4, 1fr); gap: var(--e-6); }
  .sv3-etapes li:not(:last-child)::after { content: "→"; position: absolute; right: -1.4rem; top: .6rem; color: var(--texte-doux); } }
.sv3-mesure { display: grid; gap: var(--e-6); align-items: center; }
.sv3-mesure h2 { font: 800 clamp(1.4rem, 1rem + 1.4vw, 2rem) var(--police-texte); color: var(--sv3-nuit); }
.sv3-mesure-liste { grid-template-columns: repeat(2, 1fr); }
.sv3-mesure-liste li { display: flex; gap: var(--e-2); align-items: center; background: var(--sv3-carte); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon); padding: var(--e-3); font-size: var(--t-sm); font-weight: 600; color: var(--sv3-nuit); }
@media (min-width: 900px) { .sv3-mesure { grid-template-columns: 1.2fr 1fr; } }
/* Appel final */
.sv3-cta-final { background: radial-gradient(700px 300px at 20% 50%, rgba(77,141,255,.18), transparent 70%), var(--sv3-nuit); color: var(--blanc); padding: var(--e-6) 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.sv3-cta-final-int { display: grid; gap: var(--e-5); align-items: center; }
.sv3-cta-final h2 { font: 800 clamp(1.3rem, 1rem + 1.2vw, 1.9rem) var(--police-texte); margin: 0 0 var(--e-2); }
.sv3-cta-final p { color: var(--texte-inverse-doux); margin: 0; }
.sv3-cta-final .groupe-btn { margin-top: var(--e-4); }
.sv3-cta-final .btn { border-radius: 999px; }
.sv3-cta-final .btn-contour { color: var(--blanc); border-color: rgba(255,255,255,.55); }
.sv3-cta-final .btn-contour:hover, .sv3-cta-final .btn-contour:focus-visible { background: rgba(255,255,255,.1); color: var(--blanc); border-color: var(--blanc); }
.sv3-cta-marque { margin: 0; }
.sv3-mesure-rassurance{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-sm);color:var(--texte-doux);max-width:52ch}
.sv3-mesure-rassurance .ico{flex:none;margin-top:.15rem;color:var(--succes)}
.sv3-cta-prix strong { font: 800 2rem var(--police-texte); color: var(--blanc); }
@media (min-width: 1024px) { .sv3-cta-final-int { grid-template-columns: auto 1fr auto; } .sv3-cta-marque { padding-right: var(--e-6); border-right: 1px solid rgba(255,255,255,.18); } }
.site-studio .pied { background: var(--sv3-nuit); }
/* Comparateur avant / après à curseur oblique */
.comparateur { margin: 0 0 var(--e-6); }
.comparateur-cadre { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--rayon-lg); border: 1px solid var(--sv3-ligne); background: var(--sv3-nuit); }
.comparateur-cadre img { display: block; width: 100%; height: auto; }
.comparateur-avant { position: absolute; inset: 0; clip-path: polygon(0 0, calc(var(--pos) + 6%) 0, calc(var(--pos) - 6%) 100%, 0 100%); }
.comparateur-avant img { width: 100%; height: 100%; object-fit: cover; }
.comparateur-ligne { position: absolute; top: -5%; bottom: -5%; left: var(--pos); width: 3px; background: var(--blanc); box-shadow: 0 0 12px rgba(0,0,0,.45); transform: translateX(-50%) rotate(6.8deg); pointer-events: none; }
.comparateur-etiquette { position: absolute; top: var(--e-3); padding: .2rem .6rem; border-radius: 999px; background: rgba(6,16,36,.8); color: var(--blanc); font-size: var(--t-xs); font-weight: 700; pointer-events: none; }
.comparateur-etiquette-avant { left: var(--e-3); }
.comparateur-etiquette-apres { right: var(--e-3); }
.comparateur-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparateur-curseur:focus-visible + .comparateur-ligne, .comparateur-cadre:focus-within { outline: 3px solid #ffd166; outline-offset: 3px; }
.comparateur figcaption { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--texte-doux); }
/* Placeholder décoratif (aucun texte côté visiteur) */
.img-placeholder { display: flex; align-items: center; justify-content: center; min-height: 220px; aspect-ratio: 4 / 3; border-radius: var(--rayon-lg); color: rgba(156,195,255,.85);
  background: radial-gradient(circle at 70% 30%, rgba(77,141,255,.35), transparent 55%), linear-gradient(135deg, #0b1d3d, #061024); border: 1px solid rgba(156,195,255,.25); }
.sv3-realisations img { width: 100%; height: auto; border-radius: var(--rayon); aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) { .sv3-etapes-6 { grid-template-columns: repeat(3, 1fr); row-gap: var(--e-6); } .sv3-etapes-6 li:nth-child(3n)::after { content: none; } }
.sv3-hero-page { padding: var(--e-7) 0; }
.sv3-hero-page h1 { max-width: 22ch; }
.sv3-hero-page .chapeau { max-width: 70ch; }
.sv3-carte-lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.sv3-carte-lien .lien-fleche { margin-top: auto; padding-top: var(--e-3); font-size: var(--t-sm); }
.sv3-carte-lien:hover h3 { text-decoration: underline; }
@media (min-width: 640px) { .sv3-cartes-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sv3-cartes-services { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .sv3-cartes-services { grid-template-columns: repeat(5, 1fr); } }
.formulaire-groupe { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: var(--e-4); margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); }
.formulaire-groupe legend { font-weight: 700; padding: 0 var(--e-2); }
.sv3-exemples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
@media (min-width: 700px) { .sv3-exemples { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sv3-exemples { grid-template-columns: repeat(3, 1fr); } }
.sv3-exemple-preuve { display: inline-block; margin-top: var(--e-2); font-size: var(--t-xs); font-weight: 700; color: #1f4fa8; }
.sv3-titre-page { font: 800 clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem)/1.12 var(--police-texte); color: var(--sv3-nuit); margin: 0; }
.sv3-parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); counter-reset: none; }
.sv3-parcours li { display: grid; grid-template-columns: auto auto 1fr; gap: var(--e-3); align-items: start; background: var(--sv3-carte); border: 1px solid var(--sv3-ligne); border-radius: var(--rayon-lg); padding: var(--e-4); }
.sv3-parcours .ico { color: #1f4fa8; margin-top: .3rem; }
.sv3-parcours strong { display: block; color: var(--sv3-nuit); }
.sv3-parcours span:not(.sv3-num) { font-size: var(--t-sm); color: var(--texte-doux); }
@media (min-width: 900px) { .sv3-parcours { grid-template-columns: repeat(2, 1fr); } }
.sv3-solution-nom, .sv3-pack-tete h3, .sv3-orbite-n strong, .sv3-chaine strong, .sv3-360 h2 { text-transform: uppercase; }
/* Apparition au défilement des sites publics (D177, D178) : seul le JS masque, et seulement ce qui est sous l'écran ;
   sans JS, en mouvement réduit ou à l'impression, tout reste visible. Un élément qui reçoit le focus est toujours affiché. */
.reveal-attente { opacity: 0; transform: translateY(16px); }
.reveal-entree { transition: opacity .6s cubic-bezier(.2,.6,.2,1) var(--reveal-delai, 0ms), transform .6s cubic-bezier(.2,.6,.2,1) var(--reveal-delai, 0ms) !important; }
.reveal-attente:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-attente { opacity: 1; transform: none; } }
@media print { .reveal-attente { opacity: 1; transform: none; } }

/* D186 : téléphone */
.entete-tel { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--cible); padding: 0 .4rem; font-weight: 600; font-size: .86rem; white-space: nowrap; text-decoration: none; }
.entete.sombre .entete-tel, .pied-contact a { color: var(--blanc); }
@media (max-width: 419px) { .entete-tel { font-size: .8rem; padding: 0 .2rem; } .entete-tel .ico { display: none; } }
.pied-contact a { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--cible); }