/* Mediterranean palette, shared by the home page and every service page. */
:root {
  --navy: #0b2945;
  --gold: #f2c36a;
  --paper: #eef5fa;
  --ink: #17334b;
  --muted: #465d70;
  --line: #d6e3e9;
  --blue: #1554a2;
  --teal: #0b706d;
  --terracotta: #b64a30;
  --blue-soft: #eaf2fc;
  --teal-soft: #e8f5f1;
  --terracotta-soft: #fff0e8;
  --sand: #fff4df;
  --accent: var(--blue);
  --tint: var(--blue-soft);
}
[data-tone="blue"] { --accent: var(--blue); --tint: var(--blue-soft); }
[data-tone="teal"] { --accent: var(--teal); --tint: var(--teal-soft); }
[data-tone="terracotta"] { --accent: var(--terracotta); --tint: var(--terracotta-soft); }
body { background: #fffaf3; }
h1 em, h2 em { color: var(--teal); }
.eyebrow { color: var(--terracotta); }
.topbar { background: linear-gradient(110deg, #123e75, #086564); }
header { background: #fffdf8; border-bottom: 3px solid var(--gold); }
.brand b { color: #97601a; }
.brand img { border-radius: 8px; }
nav a:hover { color: var(--terracotta); }
.menu { background: var(--blue-soft); border-color: #b9cee8; color: var(--blue); }
.button { background: var(--terracotta); border-color: var(--terracotta); color: white; border-radius: 6px; }
.button:hover { background: #953b27; border-color: #953b27; color: white; }
.button.outline { background: transparent; border-color: #ffffff90; color: white; }
.button.outline:hover { background: #ffffff18; border-color: white; }
.text-link { border-color: var(--terracotta); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--blue); }
.showcase :focus-visible, .group-section :focus-visible, .assurance-section :focus-visible,
.service-hero :focus-visible, footer :focus-visible, .topbar :focus-visible { outline-color: var(--gold); }

/* A blue and turquoise introduction, with the gold of the GLA 66 identity. */
.coverflow {
  background: radial-gradient(ellipse at 80% 15%, #167c792e, transparent 55%),
    linear-gradient(125deg, #123e75 5%, #14557c 55%, #086564 100%);
  border-bottom: 5px solid var(--gold);
}
.coverflow-heading h1 em, .coverflow-heading .eyebrow,
.coverflow-heading .text-link { color: var(--gold); }
.coverflow-heading .eyebrow, .coverflow-heading .text-link { color: #fff0cf; }
.coverflow-heading .text-link { border-color: var(--gold); }
.coverflow-heading p:not(.eyebrow) { color: #eef7ff; }
.coverflow-photo { background: #123750; }
.coverflow-copy { background: var(--tint); box-shadow: inset 0 4px var(--accent); }
.coverflow-copy .eyebrow { color: var(--accent); }
.coverflow-copy .button { background: var(--accent); border-color: var(--accent); }
.coverflow-copy .button:hover { filter: brightness(.9); }
.carousel-arrows button { background: #ffffff12; border-color: #ffffff80; border-radius: 6px; }
.carousel-arrows button:hover { background: #ffffff28; }
.carousel-count { color: #ffda91; }
.promise-strip { background: var(--sand); border-color: #ecd3a5; }
.promise-strip b { color: var(--blue); }
.promise-strip span:nth-child(2) b, .promise-strip span:nth-child(4) b { color: var(--teal); }
.promise-strip span:nth-child(3) b { color: var(--terracotta); }

/* Color continues through the service cards and photo galleries. */
#metiers { background: linear-gradient(150deg, #f0f6ff, #e6effa); max-width: none; }
#metiers h2 em { color: var(--blue); }
.trade { background: var(--tint); border-top: 4px solid var(--accent); border-radius: 10px; }
.trade:hover { box-shadow: 0 18px 35px #174e7f18; }
.trade-num { background: var(--accent); color: white; }
.trade-body .eyebrow, .trade-link, .trade-link span { color: var(--accent); }
#galerie { background: var(--teal-soft); max-width: none; }
#galerie .eyebrow, #galerie h2 em { color: var(--teal); }
#nouvelles-photos { background: #fff4e9; max-width: none; }
#nouvelles-photos h2 em { color: var(--terracotta); }
.gallery-link { background: var(--tint); border-bottom: 4px solid var(--accent); border-radius: 10px; }
.gallery-link b { color: var(--accent); }
.gallery-link:hover { box-shadow: 0 10px 26px #174e7f1c; }
.group-section { background: linear-gradient(125deg, #093f4d, #0a6264); }
.group-section h2 em { color: var(--gold); }
.group-section .eyebrow, .group-mark p, .values h3 { color: #fff0cf; }
.group-mark { background: #082d3d60; border-color: #ffffff40; border-radius: 12px; }
.group-mark img { border-radius: 8px; }
.group-section > div > p:not(.eyebrow), .values p { color: #ecf7f5; }
.group-section .button:not(.outline), .assurance-section .button:not(.outline),
.service-hero .button:not(.outline) { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.group-section .button:not(.outline):hover, .assurance-section .button:not(.outline):hover,
.service-hero .button:not(.outline):hover { background: #ffda91; border-color: #ffda91; }
#accompagnement { background: var(--sand); max-width: none; }
#accompagnement h2 em { color: var(--terracotta); }
.steps article { border-color: var(--blue); }
.steps span { color: var(--blue); }
.steps article:nth-child(2) { border-color: var(--teal); }
.steps article:nth-child(2) span { color: var(--teal); }
.steps article:nth-child(3) { border-color: var(--terracotta); }
.steps article:nth-child(3) span { color: var(--terracotta); }
.steps article:nth-child(4) { border-color: #94611b; }
.steps article:nth-child(4) span { color: #94611b; }
.assurance-section { background: linear-gradient(120deg, #783520, #a3432b); }
.assurance-section h2 em { color: var(--gold); }
.assurance-section .eyebrow { color: #fff0cf; }
.assurance-section p:not(.eyebrow) { color: #fff0e8; }
.equipment-section { background: var(--blue-soft); }
.equipment-section h2 em { color: var(--blue); }
.equipment-card { border-top: 4px solid var(--blue); border-radius: 9px; }
.equipment-card:nth-child(3n+2) { border-top-color: var(--teal); }
.equipment-card:nth-child(3n+3) { border-top-color: var(--terracotta); }
.equipment-domain { color: var(--blue); }
.flyer-section { background: linear-gradient(110deg, #fff6e4, #fbe9cc); }
.flyer-section h2 em { color: var(--terracotta); }
.flyer-preview img { box-shadow: 0 16px 40px #97601a20; }
.faq { background: #e6f3ef; }
.faq .eyebrow, .faq h2 em, summary:after { color: var(--teal); }
.faq details { border-color: #aaccc3; }
.faq details[open] summary { color: var(--teal); }
.contact { background: linear-gradient(125deg, #eaf2fc, #e4f2f3); max-width: none; }
.contact h2 em, .contact-phone { color: var(--blue); }
form { background: #fffdf8; border-color: #c7d9e7; border-top-color: var(--teal); border-radius: 10px; }
form .button { background: var(--blue); border-color: var(--blue); }
form .button:hover { background: #103f7c; border-color: #103f7c; }
input:focus, textarea:focus, select:focus { outline-color: var(--teal); }
.client-section { background: var(--terracotta-soft); border-color: #efcebd; }
.client-heading h2 em { color: var(--terracotta); }
.client-card { border-top: 4px solid var(--terracotta); border-radius: 10px; }
.client-card:nth-child(2) { border-top-color: var(--blue); }
footer { background: linear-gradient(115deg, #0b2945, #104b5a); border-top: 4px solid var(--gold); }
.mobile-contact { background: #124e86; }
.mobile-contact a:last-child { background: var(--gold); color: var(--navy); }

/* The same palette follows visitors onto all six service pages. */
.service-page { background: var(--tint); }
.service-hero { background: linear-gradient(120deg, var(--navy), var(--accent)); border-bottom: 5px solid var(--gold); }
.service-hero .eyebrow { color: #fff0cf; }
.service-hero .lead, .breadcrumb { color: #edf5fb; }
.service-content { background: var(--tint); max-width: none; }
.service-content .eyebrow, .service-content h2 em, .service-list li:before { color: var(--accent); }
.service-list li { border-color: #bfcfd7; }
.service-page .category-gallery { background: #fffaf3; max-width: none; }
.service-page main > .section:not(.service-content):not(.category-gallery) { background: #f6f9fc; max-width: none; }
.project-gallery figure { background: var(--tint); border-bottom: 4px solid var(--accent); border-radius: 10px; }
.project-gallery figcaption { color: var(--ink); }
.other-trades a { color: var(--accent); background: var(--tint); border-color: var(--accent); border-radius: 6px; font-weight: 600; }
.other-trades a:hover { background: var(--accent); color: white; }
.legal { background: #fffaf3; }
.legal h1, .legal h2 { color: var(--blue); }

@media (max-width: 900px) {
  nav { background: #fffdf8; border-bottom: 3px solid var(--gold); }
}

/* Validated GLA 66 film replaces the introductory photo carousel. */
.video-hero { background: linear-gradient(120deg, #0b2945, #104b5a); color: white; border-bottom: 4px solid var(--gold); }
.video-frame { max-width: 1280px; margin: auto; background: #071b31; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.video-hero-bar { max-width: 1440px; margin: auto; padding: 22px 5%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.video-hero-label strong { display: block; font-size: 20px; line-height: 1.4; color: #fff0cf; }
.video-hero-label span { display: block; font-size: 14px; color: #dbe8ef; margin-top: 4px; }
.video-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.video-hero .button { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.video-hero .button:hover { background: #ffda91; border-color: #ffda91; }
.video-hero :focus-visible { outline-color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .video-hero-bar { flex-direction: column; align-items: flex-start; padding: 20px 7%; gap: 16px; }
  .video-hero-label strong { font-size: 18px; }
  .video-hero-actions { width: 100%; }
  .video-hero-actions > * { flex: 1; padding-left: 12px; padding-right: 12px; }
}