/* Une identité commune, un accent réservé à chaque activité. */
:root {
  --tone: #515965;
  --tone-dark: #3d4652;
  --tone-line: #bfc6ce;
  --tone-soft: #eff1f4;
  --tone-wash: #f7f8fa;
  --tone-bright: #dadee5;
  --tone-on-dark: #d4d7dd;
}
body { color: var(--ink); }
body[data-page="solar"], .solar-card, .solar-feature, .button-solar {
  --tone: #247c3d;
  --tone-dark: #1c6230;
  --tone-line: #9fcba6;
  --tone-soft: #eaf5ec;
  --tone-wash: #f3f8f3;
  --tone-bright: #c5e6bd;
  --tone-on-dark: #c5e6bd;
  --accent: #d6ebcb;
  --accent-dark: #1c6230;
}
body[data-page="repair"], .repair-card, .button-repair {
  --tone: #1d5da8;
  --tone-dark: #174c8b;
  --tone-line: #a4bfde;
  --tone-soft: #eaf1fa;
  --tone-wash: #f3f6fb;
  --tone-bright: #c8dcf5;
  --tone-on-dark: #bdd5f5;
  --accent: #dce8fa;
  --accent-dark: #174c8b;
}
body[data-page="home"], body[data-page="engineering"], .engineering-card {
  --tone: #e51e21;
  --tone-dark: #bd171c;
  --tone-line: #eeb4b6;
  --tone-soft: #fceced;
  --tone-wash: #fff;
  --tone-bright: #f9d2d3;
  --tone-on-dark: #ff9c9f;
  --accent: #e51e21;
  --accent-dark: #bd171c;
}
.official-brand-logo { width: 96px; height: 68px; object-fit: contain; }
.brand-signature { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 2px; }
.brand-signature > .brand-company { color: #e51e21; font-size: .8rem; font-weight: 800; line-height: 1; letter-spacing: .035em; }
.entity-logo > .brand-signature { width: var(--mark-width); }
.brand-signature > .entity-mark { width: 100%; height: auto; aspect-ratio: 797 / 567; object-fit: contain; }
.entity-logo {
  --mark-width: 90px;
  --name-size: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  max-width: 100%;
}
.entity-logo > .entity-mark {
  width: var(--mark-width);
  height: auto;
  aspect-ratio: 797 / 567;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0;
}
.entity-logo > .entity-name {
  border-left: 1px solid var(--tone-line);
  padding-left: 15px;
  color: var(--tone-dark);
  font-size: var(--name-size);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .015em;
}
.header .entity-logo { width: 248px; height: 83px; }
.footer .official-brand-logo { width: 112px; height: 80px; }
.footer .entity-logo { width: 270px; height: 91px; }
.footer-main { grid-template-columns: 1.25fr 1fr 1.1fr; }
.footer-main > div > a:not(.brand) { overflow-wrap: anywhere; }
.header .nav { gap: 22px; }
.nav > a[aria-current], .nav > a:not(.button):hover { color: var(--tone-dark); }
.nav > a[aria-current]::after { background: var(--tone); }
:is(a, button, summary):focus-visible { outline-color: var(--tone); }
.button-solar, .solar-feature .button,
body:is([data-page="home"], [data-page="solar"], [data-page="repair"], [data-page="engineering"]) .button:not(.button-outline) {
  background: var(--tone);
  border-color: var(--tone);
  color: #fff;
}
.button-solar:hover, .solar-feature .button:hover,
body:is([data-page="home"], [data-page="solar"], [data-page="repair"], [data-page="engineering"]) .button:not(.button-outline):hover {
  background: var(--tone-dark);
  border-color: var(--tone-dark);
}
.button-repair { color: var(--tone-dark); border-color: var(--tone-line); }
.button-outline:hover { color: var(--ink); }
.contact-band .eyebrow { color: var(--tone-on-dark); }
.solar-feature { background: var(--tone-wash); }
.hero-note { color: #1e3822; }
.hero-note p { color: var(--tone-dark); }
.expertise-solar .icon { color: #247c3d; }
.expertise-repair .icon { color: #1d5da8; }
.expertise-engineering .icon { color: #e51e21; }
.service-card:hover { border-color: var(--tone); }
.service-card .service-symbol {
  width: auto;
  height: 73px;
  left: 18px;
  right: 18px;
  bottom: 14px;
  padding: 8px 14px;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.service-symbol .entity-logo { --mark-width: 78px; --name-size: .85rem; width: 100%; height: 100%; gap: 12px; }
.service-symbol .entity-name { padding-left: 12px; }
.service-body .eyebrow { color: var(--tone-dark); }
.service-body .text-link { border-color: var(--tone); }
.entity-image-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: #fff;
  padding: 12px 20px;
  border-left: 4px solid var(--tone);
  border-radius: 3px;
  width: min(340px, calc(100% - 48px));
}
.entity-image-badge .entity-logo { --mark-width: 100px; --name-size: 1.05rem; width: 100%; height: 93px; }
body:is([data-page="solar"], [data-page="repair"]) .benefits-grid article { border-top: 2px solid var(--tone); }
body:is([data-page="solar"], [data-page="repair"]) .soft-section { background: var(--tone-wash); }
body:is([data-page="solar"], [data-page="repair"]) .service-hero { border-bottom: 1px solid var(--line); }
@media (max-width: 1220px) {
  .header .entity-logo { --mark-width: 80px; --name-size: .85rem; width: 218px; height: 74px; gap: 12px; }
  .header .entity-name { padding-left: 12px; }
  .header .nav { gap: 16px; }
  .header .nav > a:not(.button) { font-size: .8rem; }
  .header .nav .button { font-size: .75rem; padding: 11px 12px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .header .entity-logo { --mark-width: 65px; --name-size: .75rem; width: 178px; height: 60px; gap: 10px; }
  .header .entity-name { padding-left: 10px; }
  .header .nav { gap: 13px; }
  .header .nav > a:not(.button) { font-size: .75rem; }
}
@media (max-width: 900px) {
  .header .official-brand-logo { width: 78px; height: 55px; }
  .header .entity-logo { --mark-width: 78px; --name-size: .8rem; width: 212px; height: 70px; }
  .header .nav > a:not(.button), .header .nav .button { font-size: .875rem; }
  .footer .entity-logo { --mark-width: 90px; width: min(245px, 100%); height: auto; }
  .service-card .service-symbol { height: 62px; padding: 8px 10px; left: 10px; right: 10px; }
  .service-symbol .entity-logo { --mark-width: 62px; --name-size: .8rem; gap: 10px; }
  .service-symbol .entity-name { padding-left: 10px; }
}
@media (max-width: 640px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .service-card .service-symbol { left: 20px; right: 20px; height: 78px; padding: 8px 14px; }
  .service-symbol .entity-logo { --mark-width: 84px; --name-size: .9rem; gap: 15px; }
  .service-symbol .entity-name { padding-left: 15px; }
  .entity-image-badge { left: 17px; bottom: 17px; width: min(290px, calc(100% - 34px)); padding: 9px 14px; }
  .entity-image-badge .entity-logo { --mark-width: 92px; --name-size: .95rem; height: 83px; }
}