/* ==========================================================================
   En-tête commun aux deux sites (chargé après style.css)
   ========================================================================== */
html:not([data-aud="pro"]) .only-pro, html[data-aud="pro"] .only-part { display: none !important; }

.header { display: block; padding: 14px var(--gutter) 0; align-items: initial; }
.header.is-scrolled { padding-top: 10px; padding-bottom: 0; }
.header__row { display: flex; align-items: center; gap: 14px; }
.header .logo { flex: 0 0 auto; margin-right: auto; }

/* Mode de réalisation */
.modes { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--chip); }
.mode { display: grid; gap: 2px; text-decoration: none; color: var(--ink-dim); padding: 7px 14px 8px; border-radius: 10px; transition: background .25s, color .25s; }
.mode b { font: 500 14px/1.15 var(--f-display); color: inherit; white-space: nowrap; }
.mode small { font: 400 11px/1.2 var(--f-body); opacity: .8; white-space: nowrap; }
.mode:hover { color: var(--ink); }
.mode.is-on { background: var(--mode-on, var(--ink)); color: var(--mode-on-ink, var(--bg)); }

/* Particulier / Professionnel */
.aud { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
.aud button { font: 500 11px/1 var(--f-mono); letter-spacing: .07em; border: 0; background: transparent; color: var(--ink-dim); padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.aud button:hover { color: var(--ink); }
.aud button.is-on { background: var(--ink); color: var(--bg); }

.menu-btn { display: none; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; border: 1px solid var(--line-2); background: transparent; color: var(--ink); padding: 11px 14px; border-radius: 999px; cursor: pointer; }

/* Onglets des sections */
.subnav { display: flex; gap: 2px; margin-top: 12px; padding: 8px 0 10px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; font-size: 11px; text-decoration: none; color: var(--ink-dim); padding: 7px 11px; border-radius: 999px; transition: background .25s, color .25s; white-space: nowrap; }
.subnav a:hover { color: var(--ink); background: var(--chip); }
.subnav a.is-on { color: var(--ink); background: var(--chip); }

@media (max-width: 1180px) { .mode small { display: none; } }
@media (max-width: 900px) {
  .header { padding-bottom: 12px; }
  .header__row { flex-wrap: wrap; }
  .menu-btn { display: inline-block; }
  .header .modes, .header .aud, .header .hdr-cta, .header .subnav { display: none; }
  .header.is-open { background: var(--bg) !important; bottom: 0; overflow-y: auto; }
  .header.is-open .modes { display: grid; order: 5; flex-basis: 100%; margin-top: 18px; }
  .header.is-open .mode small { display: block; }
  .header.is-open .aud { display: inline-flex; order: 6; margin-top: 10px; }
  .header.is-open .subnav { display: grid; order: 7; flex-basis: 100%; gap: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 6px; }
  .header.is-open .subnav a { font-size: 13px; padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .header.is-open .hdr-cta { display: inline-block; order: 8; margin-top: 18px; }
  .header.is-open .menu-btn { background: var(--ink); color: var(--bg); }
  body.menu-open { overflow: hidden; }
}
/* Toltech Énergie : le mode actif en vert */
.modes .mode.is-on { --mode-on: #10B981; --mode-on-ink: #04261D; }
.aud button.is-on { background: #10B981; color: #04261D; }
/* Lisibilité de l'en-tête sur la vidéo du hero */
.header.dark:not(.is-scrolled) { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, 0) 100%); }
.header.dark .mode:not(.is-on) { color: rgba(255, 255, 255, .78); }
.header.dark .subnav a { color: rgba(255, 255, 255, .8); }
.hdr-cta { white-space: nowrap; }

/* Professionnel : Travailler avec nous → simulateur → preuves (réalisations, prestations) → Cyprien et Gabriel → le reste */
html[data-aud="pro"] main { display: flex; flex-direction: column; }
html[data-aud="pro"] main > * { order: 50; }
html[data-aud="pro"] main > .hero { order: 0; }
html[data-aud="pro"] #professionnels { order: 1; }
html[data-aud="pro"] #simulateur { order: 2; }
html[data-aud="pro"] #realisations { order: 3; }
html[data-aud="pro"] #prestations { order: 4; }
html[data-aud="pro"] #binome { order: 5; }
html[data-aud="pro"] #aides { order: 6; }
html[data-aud="pro"] #avis { order: 7; }
html[data-aud="pro"] #partenaires { order: 8; }
html[data-aud="pro"] #faq { order: 9; }
html[data-aud="pro"] #contact { order: 10; }
html[data-aud="pro"] .subnav a { order: 50; }
html[data-aud="pro"] .subnav a[href$="#professionnels"] { order: 1; }
html[data-aud="pro"] .subnav a[href$="#simulateur"] { order: 2; }
html[data-aud="pro"] .subnav a[href$="#realisations"] { order: 3; }
html[data-aud="pro"] .subnav a[href$="#prestations"] { order: 4; }
html[data-aud="pro"] .subnav a[href$="#binome"] { order: 5; }
html[data-aud="pro"] .subnav a[href$="#aides"] { order: 6; }
html[data-aud="pro"] .subnav a[href$="#avis"] { order: 7; }
html[data-aud="pro"] .subnav a[href$="#partenaires"] { order: 8; }
html[data-aud="pro"] .subnav a[href$="#faq"] { order: 9; }
html[data-aud="pro"] .subnav a[href$="#contact"] { order: 10; }
@media (max-width: 900px) { html[data-aud="pro"] .header.is-open .subnav { display: flex; flex-direction: column; } }

/* Choix du mode et du profil dans le hero (mobile) */
.hero__pick { display: none; }
@media (max-width: 900px) {
  .hero__pick { display: grid; gap: 8px; margin-bottom: 22px; }
  .pick__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .pick__mode { text-align: center; text-decoration: none; color: rgba(255, 255, 255, .85); font: 500 13.5px/1.2 var(--f-display); padding: 10px 6px; border-radius: 10px; }
  .pick__mode.is-on { background: var(--pick-on, #fff); color: var(--pick-on-ink, #111214); }
  .pick__aud { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); }
  .pick__aud button { font: 500 11px/1 var(--f-mono); letter-spacing: .07em; border: 0; background: transparent; color: rgba(255, 255, 255, .85); padding: 10px 8px; border-radius: 999px; cursor: pointer; }
  .pick__aud button.is-on { background: var(--pick-on, #fff); color: var(--pick-on-ink, #111214); }
  .hero { padding-top: 104px; }
}
.hero__pick { --pick-on: #10B981; --pick-on-ink: #04261D; }