/*
 * Palette chaleureuse webcreations.fr
 * Bleu pétrole · corail · crème · bleu nuit
 * Version dérivée de user-4.css — 1er août 2026
 */
:root {
  --wc-ink: #17243a;
  --wc-muted: #6f6a63;
  --wc-blue: #315f74;
  --wc-blue-dark: #234857;
  --wc-cyan: #477e7f;
  --wc-violet: #c45f49;
  --wc-surface: #f8f4ed;
  --wc-white: #fffdf9;
  --wc-line: rgba(23, 36, 58, .12);
  --wc-radius: 24px;
  --wc-shadow: 0 24px 70px rgba(35, 72, 87, .13);
  --cassiopeia-font-family-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cassiopeia-font-family-headings: Inter, ui-sans-serif, system-ui, sans-serif;
  --cassiopeia-color-primary: var(--wc-blue);
  --cassiopeia-color-link: var(--wc-blue);
}

html { scroll-behavior: smooth; }
body {
  color: var(--wc-ink);
  background: #fffdf9;
  font-size: 1.03rem;
  line-height: 1.72;
}
a { color: var(--wc-blue); }
h1, h2, h3, h4 {
  color: var(--wc-ink);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
}
h1 { font-size: clamp(2.5rem, 6vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }

.container-header {
  background: rgba(255, 253, 249, .94);
  border-bottom: 1px solid var(--wc-line);
  box-shadow: 0 8px 40px rgba(23, 36, 58, .06);
  backdrop-filter: blur(16px);
  color: var(--wc-ink);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  min-height: 82px;
  padding-inline: max(1rem, calc((100vw - 1200px) / 2));
}
.container-header .grid-child {
  width: auto;
  max-width: none;
  padding: 0;
}
.navbar-brand { align-items: center; display: flex; min-height: 82px; }
.brand-logo {
  color: var(--wc-ink) !important;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.045em;
  text-decoration: none;
}
.brand-logo span::after { color: var(--wc-blue); content: "."; }
.container-nav { align-items: center; display: flex; }
.container-header .mod-menu { align-items: center; display: flex; gap: .25rem; }
.container-header .metismenu > li > a {
  color: var(--wc-ink);
  font-weight: 700;
  padding: .75rem .85rem;
  text-decoration: none;
}
.container-header .metismenu > li:last-child > a {
  background: var(--wc-blue);
  border-radius: 999px;
  color: #fff;
  margin-left: .45rem;
  padding-inline: 1.2rem;
}

.site-grid { display: block; }
.container-component { max-width: 1120px; padding: 4.5rem 1.25rem; }
.itemid-101 .container-component { display: none; }
.container-banner { margin: 0; max-width: none; padding: 0; }
.wc-home { overflow: hidden; }
.wc-section { padding: clamp(4.5rem, 9vw, 8rem) 1.25rem; }
.wc-wrap { margin: 0 auto; max-width: 1160px; }
.wc-kicker {
  color: var(--wc-blue);
  display: inline-block;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.wc-lead { color: var(--wc-muted); font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 700px; }
.wc-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.wc-btn {
  align-items: center;
  background: var(--wc-blue);
  border: 2px solid var(--wc-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  gap: .5rem;
  justify-content: center;
  padding: .92rem 1.45rem;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.wc-btn:hover { background: var(--wc-blue-dark); box-shadow: 0 12px 30px rgba(49, 95, 116, .25); transform: translateY(-2px); }
.wc-btn--ghost { background: transparent; color: var(--wc-ink) !important; }

.wc-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(71, 126, 127, .21), transparent 27%),
    radial-gradient(circle at 70% 70%, rgba(196, 95, 73, .15), transparent 26%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 54%, #fff 100%);
  min-height: 720px;
  padding-top: clamp(5rem, 10vw, 9rem);
  position: relative;
}
.wc-hero-grid { align-items: center; display: grid; gap: 4rem; grid-template-columns: 1.14fr .86fr; }
.wc-hero h1 { margin: 0 0 1.5rem; max-width: 800px; }
.wc-gradient { background: linear-gradient(100deg, var(--wc-blue), var(--wc-violet), var(--wc-cyan)); background-clip: text; color: transparent; }
.wc-trust { color: var(--wc-muted); display: flex; flex-wrap: wrap; font-size: .92rem; gap: 1.3rem; margin-top: 2.2rem; }
.wc-trust span::before { color: var(--wc-blue); content: "✓"; font-weight: 900; margin-right: .4rem; }
.wc-browser {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  box-shadow: var(--wc-shadow);
  padding: .75rem;
  transform: rotate(2deg);
}
.wc-browser-bar { display: flex; gap: .35rem; padding: .4rem .35rem .85rem; }
.wc-browser-bar i { background: #e6ded2; border-radius: 50%; height: 9px; width: 9px; }
.wc-screen { background: linear-gradient(145deg, #17243a, #315f74); border-radius: 19px; color: #fff; min-height: 390px; padding: 2.5rem; position: relative; overflow: hidden; }
.wc-screen::after { background: var(--wc-cyan); border-radius: 50%; content: ""; filter: blur(2px); height: 170px; opacity: .4; position: absolute; right: -35px; top: 40px; width: 170px; }
.wc-screen small { color: #c7ded8; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wc-screen strong { display: block; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; margin: 1.2rem 0; max-width: 330px; }
.wc-screen p { color: #d8dfdc; max-width: 290px; }

.wc-center { margin-inline: auto; max-width: 760px; text-align: center; }
.wc-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
.wc-card {
  background: #fff;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius);
  box-shadow: 0 14px 50px rgba(23, 36, 58,.06);
  padding: 2rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wc-card:hover { box-shadow: var(--wc-shadow); transform: translateY(-5px); }
.wc-icon {
  align-items: center;
  background: #f1ebe2;
  border-radius: 16px;
  color: var(--wc-blue);
  display: inline-flex;
  font-size: 1.4rem;
  height: 52px;
  justify-content: center;
  margin-bottom: 1.3rem;
  width: 52px;
}
.wc-card p { color: var(--wc-muted); margin-bottom: 0; }
.wc-surface { background: var(--wc-surface); }
.wc-process { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 3.5rem; }
.wc-step { border-top: 2px solid #d7cfc3; padding-top: 1.5rem; }
.wc-step::before { color: var(--wc-blue); content: "0" counter(step); counter-increment: step; display: block; font-size: .9rem; font-weight: 900; margin-bottom: .8rem; }
.wc-step p { color: var(--wc-muted); font-size: .96rem; }
.wc-cta { background: linear-gradient(135deg, #17243a, #315f74 72%, #477e7f); border-radius: 34px; color: #fff; padding: clamp(2.5rem, 7vw, 5.5rem); }
.wc-cta h2, .wc-cta p { color: #fff; }
.wc-cta p { max-width: 650px; opacity: .82; }

.com-content-article { max-width: 850px; }
.com-content-article h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 2rem; }
.com-content-article h2 { font-size: clamp(1.65rem, 4vw, 2.5rem); margin-top: 3.2rem; }
.wc-page-intro { color: var(--wc-muted); font-size: 1.28rem; }
.wc-list { display: grid; gap: 1rem; list-style: none; margin: 2rem 0; padding: 0; }
.wc-list li { background: var(--wc-surface); border-radius: 16px; padding: 1rem 1.2rem; }
.wc-list li::before { color: var(--wc-blue); content: "✓"; font-weight: 900; margin-right: .65rem; }
.wc-faq details { border-bottom: 1px solid var(--wc-line); padding: 1.2rem 0; }
.wc-faq summary { cursor: pointer; font-size: 1.1rem; font-weight: 800; }
.wc-faq details p { color: var(--wc-muted); }

.container-footer { background: #132833; color: #d8dfdc; padding: 3rem 1.25rem; }
.wc-footer { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; width: 100%; }
.wc-footer strong { color: #fff; font-size: 1.25rem; }
.wc-footer a { color: #d6e7e2; }

@media (max-width: 920px) {
  .container-header { display: block; padding-inline: 1rem; }
  .container-nav { padding-bottom: 1rem !important; }
  .container-header .mod-menu { align-items: flex-start; flex-direction: column; }
  .container-header .metismenu > li:last-child > a { margin-left: 0; }
  .wc-hero-grid { grid-template-columns: 1fr; }
  .wc-browser { max-width: 620px; }
  .wc-grid { grid-template-columns: 1fr 1fr; }
  .wc-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .wc-hero { min-height: auto; }
  .wc-grid, .wc-process { grid-template-columns: 1fr; }
  .wc-screen { min-height: 330px; padding: 1.8rem; }
  .wc-actions .wc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* Article Services — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body:has(.wc-services) .container-component,
body:has(.wc-services) .com-content-article {
  max-width: none;
  padding: 0;
  width: 100%;
}

.wc-services {
  --wcs-ink: #17243a;
  --wcs-muted: #6f6a63;
  --wcs-blue: #315f74;
  --wcs-blue-dark: #234857;
  --wcs-violet: #c45f49;
  --wcs-cyan: #477e7f;
  --wcs-surface: #f8f4ed;
  --wcs-line: rgba(23, 36, 58, 0.12);
  --wcs-white: #fff;
  color: var(--wcs-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-services *,
.wc-services *::before,
.wc-services *::after {
  box-sizing: border-box;
}

.wc-services h1,
.wc-services h2,
.wc-services h3,
.wc-services p {
  margin-top: 0;
}

.wc-services h1,
.wc-services h2,
.wc-services h3 {
  color: var(--wcs-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-services h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin-bottom: 1.5rem;
}

.wc-services h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  margin-bottom: 1.25rem;
}

.wc-services h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: 0.75rem;
}

.wc-services__hero,
.wc-services__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-services__hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 20%, rgba(71, 126, 127, 0.2), transparent 28%),
    radial-gradient(circle at 67% 80%, rgba(196, 95, 73, 0.14), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-services__eyebrow {
  color: var(--wcs-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-services__intro,
.wc-services__heading > p:last-child {
  color: var(--wcs-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-services__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-services__button {
  align-items: center;
  background: var(--wcs-blue);
  border: 2px solid var(--wcs-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-services__button:hover,
.wc-services__button:focus-visible {
  background: var(--wcs-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-services__button--secondary {
  background: transparent;
  color: var(--wcs-ink) !important;
}

.wc-services__proofs {
  color: var(--wcs-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-services__proofs li::before {
  color: var(--wcs-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-services__browser {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.17);
  padding: 0.75rem;
  transform: rotate(2deg);
}

.wc-services__browser-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.35rem 0.85rem;
}

.wc-services__browser-bar i {
  background: #e6ded2;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.wc-services__screen {
  background: linear-gradient(145deg, #17243a, #315f74);
  border-radius: 19px;
  color: #fff;
  min-height: 370px;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.2rem);
  position: relative;
}

.wc-services__screen::after {
  background: var(--wcs-cyan);
  border-radius: 50%;
  content: "";
  height: 180px;
  opacity: 0.35;
  position: absolute;
  right: -45px;
  top: 45px;
  width: 180px;
}

.wc-services__screen > span {
  color: #c7ded8;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.wc-services__screen > strong {
  color: #fff;
  display: block;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 1.2rem 0 2rem;
  max-width: 360px;
  position: relative;
  z-index: 1;
}

.wc-services__screen-line {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  height: 9px;
  margin-bottom: 0.7rem;
  max-width: 280px;
}

.wc-services__screen-line--short {
  max-width: 205px;
}

.wc-services__screen-button {
  background: #fff;
  border-radius: 999px;
  color: var(--wcs-ink);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 1.4rem;
  padding: 0.6rem 1rem;
}

.wc-services__heading {
  margin: 0 auto 3rem;
  max-width: 820px;
  text-align: center;
}

.wc-services__heading > p:last-child {
  margin-inline: auto;
}

.wc-services__grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-services__card {
  background: #fff;
  border: 1px solid var(--wcs-line);
  border-radius: 24px;
  box-shadow: 0 14px 50px rgba(23, 36, 58, 0.06);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-services__card:hover {
  box-shadow: 0 24px 70px rgba(35, 72, 87, 0.13);
  transform: translateY(-5px);
}

.wc-services__card-number {
  align-items: center;
  background: #f1ebe2;
  border-radius: 14px;
  color: var(--wcs-blue);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  margin-bottom: 1.25rem;
  width: 48px;
}

.wc-services__card p,
.wc-services__card li {
  color: var(--wcs-muted);
}

.wc-services__card ul {
  border-top: 1px solid var(--wcs-line);
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 1.2rem 0 0;
}

.wc-services__card li {
  font-size: 0.94rem;
  margin-top: 0.55rem;
  padding-left: 1.25rem;
  position: relative;
}

.wc-services__card li::before {
  color: var(--wcs-blue);
  content: "•";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.wc-services__section--tinted {
  background: var(--wcs-surface);
}

.wc-services__split {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1fr 0.9fr;
  margin: 0 auto;
  max-width: 1160px;
}

.wc-services__split p {
  color: var(--wcs-muted);
}

.wc-services__text-link {
  color: var(--wcs-blue);
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.wc-services__text-link::after {
  content: " →";
}

.wc-services__checklist {
  background: #fff;
  border: 1px solid var(--wcs-line);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(23, 36, 58, 0.08);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.wc-services__checklist ul {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}

.wc-services__checklist li {
  border-top: 1px solid var(--wcs-line);
  color: var(--wcs-muted);
  padding: 0.8rem 0 0.8rem 1.8rem;
  position: relative;
}

.wc-services__checklist li::before {
  color: var(--wcs-blue);
  content: "✓";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.wc-services__steps {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-services__steps li {
  border-top: 2px solid #d7cfc3;
  padding-top: 1.35rem;
}

.wc-services__steps li > span {
  color: var(--wcs-blue);
  display: block;
  font-size: 0.85rem;
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.wc-services__steps p {
  color: var(--wcs-muted);
  font-size: 0.96rem;
}

.wc-services__center-link {
  margin: 2.5rem 0 0;
  text-align: center;
}

.wc-services__section--compact {
  padding-top: 0;
}

.wc-services__included {
  background: linear-gradient(135deg, #17243a, #315f74);
  border-radius: 32px;
  color: #e7eeec;
  display: grid;
  gap: 3rem;
  grid-template-columns: 0.7fr 1.3fr;
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(2rem, 6vw, 4.5rem);
}

.wc-services__included h2,
.wc-services__included strong {
  color: #fff;
}

.wc-services__included .wc-services__eyebrow {
  color: #c7ded8;
}

.wc-services__included-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

.wc-services__included-grid p {
  color: #e7eeec;
  font-size: 0.95rem;
  margin-bottom: 0;
}

.wc-services__faq {
  margin: 0 auto;
  max-width: 900px;
}

.wc-services__faq details {
  border-bottom: 1px solid var(--wcs-line);
  padding: 1.3rem 0;
}

.wc-services__faq summary {
  color: var(--wcs-ink);
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 800;
  padding-right: 2rem;
}

.wc-services__faq details p {
  color: var(--wcs-muted);
  margin: 1rem 0 0;
  max-width: 780px;
}

.wc-services__section--cta {
  padding-top: 0;
}

.wc-services__cta {
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.35), transparent 28%),
    linear-gradient(135deg, #17243a, #315f74 74%);
  border-radius: 34px;
  color: #fff;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(2.3rem, 6vw, 4.5rem);
}

.wc-services__cta h2,
.wc-services__cta p {
  color: #fff;
}

.wc-services__cta > div {
  max-width: 760px;
}

.wc-services__cta .wc-services__eyebrow {
  color: #c7ded8;
}

.wc-services__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcs-ink) !important;
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .wc-services__hero,
  .wc-services__split,
  .wc-services__included {
    grid-template-columns: 1fr;
  }

  .wc-services__visual {
    max-width: 650px;
  }

  .wc-services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .wc-services__steps {
    grid-template-columns: 1fr 1fr;
  }

  .wc-services__cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .wc-services__hero {
    min-height: auto;
  }

  .wc-services__grid,
  .wc-services__steps,
  .wc-services__included-grid {
    grid-template-columns: 1fr;
  }

  .wc-services__actions .wc-services__button {
    width: 100%;
  }

  .wc-services__screen {
    min-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-services *,
  .wc-services *::before,
  .wc-services *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Page Services : aucun espace entre le menu et le hero */
body.itemid-102 .container-component {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.itemid-102 .container-component > main {
  margin: 0 !important;
  padding: 0 !important;
}

body.itemid-102
.container-component
> main
> .com-content-article {
  margin-top: -1rem !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}


/* Article Expertises — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body.itemid-103 .container-component,
body.itemid-103 .container-component > main,
body.itemid-103 .com-content-article,
body.itemid-103 .com-content-article__body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.itemid-103 .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

.wc-expertises {
  --wce-ink: #17243a;
  --wce-muted: #6f6a63;
  --wce-blue: #315f74;
  --wce-blue-dark: #234857;
  --wce-violet: #c45f49;
  --wce-cyan: #477e7f;
  --wce-surface: #f8f4ed;
  --wce-line: rgba(23, 36, 58, 0.12);
  color: var(--wce-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-expertises *,
.wc-expertises *::before,
.wc-expertises *::after {
  box-sizing: border-box;
}

.wc-expertises h1,
.wc-expertises h2,
.wc-expertises h3,
.wc-expertises p {
  margin-top: 0;
}

.wc-expertises h1,
.wc-expertises h2,
.wc-expertises h3 {
  color: var(--wce-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-expertises h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  margin-bottom: 1.5rem;
}

.wc-expertises h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  margin-bottom: 1.25rem;
}

.wc-expertises h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: 0.75rem;
}

.wc-expertises__hero,
.wc-expertises__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-expertises__hero {
  align-items: center;
  background:
    radial-gradient(circle at 82% 25%, rgba(196, 95, 73, 0.2), transparent 27%),
    radial-gradient(circle at 68% 78%, rgba(71, 126, 127, 0.18), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-expertises__eyebrow {
  color: var(--wce-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-expertises__intro,
.wc-expertises__heading > p:last-child {
  color: var(--wce-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-expertises__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-expertises__button {
  align-items: center;
  background: var(--wce-blue);
  border: 2px solid var(--wce-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-expertises__button:hover,
.wc-expertises__button:focus-visible {
  background: var(--wce-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-expertises__button--secondary {
  background: transparent;
  color: var(--wce-ink) !important;
}

.wc-expertises__proofs {
  color: var(--wce-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-expertises__proofs li::before {
  color: var(--wce-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-expertises__orbit {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(49, 95, 116, 0.12) 0 29%, transparent 30%),
    radial-gradient(circle, transparent 0 49%, rgba(49, 95, 116, 0.16) 50% 50.5%, transparent 51%),
    radial-gradient(circle, transparent 0 70%, rgba(196, 95, 73, 0.13) 71% 71.5%, transparent 72%);
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 480px;
  position: relative;
}

.wc-expertises__core {
  align-items: center;
  background: linear-gradient(145deg, #17243a, #315f74);
  border: 8px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.22);
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 230px;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  width: 230px;
}

.wc-expertises__core span {
  color: #c7ded8;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wc-expertises__core strong {
  font-size: 1.65rem;
  line-height: 1.08;
  margin-top: 0.7rem;
}

.wc-expertises__satellite {
  align-items: center;
  background: #fff;
  border: 1px solid var(--wce-line);
  border-radius: 999px;
  box-shadow: 0 15px 40px rgba(23, 36, 58, 0.12);
  color: var(--wce-blue);
  display: flex;
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: center;
  min-height: 58px;
  min-width: 78px;
  padding: 0.8rem;
  position: absolute;
}

.wc-expertises__satellite--one { left: 2%; top: 20%; }
.wc-expertises__satellite--two { right: 1%; top: 27%; }
.wc-expertises__satellite--three { bottom: 12%; right: 17%; }
.wc-expertises__satellite--four { bottom: 16%; left: 9%; }

.wc-expertises__heading {
  margin: 0 auto 3rem;
  max-width: 840px;
  text-align: center;
}

.wc-expertises__heading > p:last-child {
  margin-inline: auto;
}

.wc-expertises__grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-expertises__card {
  background: #fff;
  border: 1px solid var(--wce-line);
  border-radius: 24px;
  box-shadow: 0 14px 50px rgba(23, 36, 58, 0.06);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-expertises__card:hover {
  box-shadow: 0 24px 70px rgba(35, 72, 87, 0.13);
  transform: translateY(-5px);
}

.wc-expertises__card-number {
  align-items: center;
  background: #f1ebe2;
  border-radius: 14px;
  color: var(--wce-blue);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  margin-bottom: 1.25rem;
  width: 48px;
}

.wc-expertises__card p,
.wc-expertises__card li {
  color: var(--wce-muted);
}

.wc-expertises__card ul {
  border-top: 1px solid var(--wce-line);
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 1.2rem 0 0;
}

.wc-expertises__card li {
  font-size: 0.94rem;
  margin-top: 0.55rem;
  padding-left: 1.25rem;
  position: relative;
}

.wc-expertises__card li::before {
  color: var(--wce-blue);
  content: "•";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.wc-expertises__section--tinted {
  background: var(--wce-surface);
}

.wc-expertises__split {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1fr 0.9fr;
  margin: 0 auto;
  max-width: 1160px;
}

.wc-expertises__split p,
.wc-expertises__feature-copy p,
.wc-expertises__seo-layout > div:first-child p {
  color: var(--wce-muted);
}

.wc-expertises__text-link {
  color: var(--wce-blue);
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.wc-expertises__text-link::after {
  content: " →";
}

.wc-expertises__focus {
  background: #fff;
  border: 1px solid var(--wce-line);
  border-radius: 28px;
  box-shadow: 0 22px 65px rgba(23, 36, 58, 0.09);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.wc-expertises__focus-label {
  color: var(--wce-blue) !important;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wc-expertises__focus blockquote {
  border: 0;
  color: var(--wce-ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 1.2rem 0;
  padding: 0;
}

.wc-expertises__feature,
.wc-expertises__seo-layout {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 0.9fr 1.1fr;
  margin: 0 auto;
  max-width: 1160px;
}

.wc-expertises__path {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.wc-expertises__path div {
  background: var(--wce-surface);
  border: 1px solid var(--wce-line);
  border-radius: 20px;
  min-height: 150px;
  padding: 1.5rem;
}

.wc-expertises__path span {
  color: var(--wce-blue);
  display: block;
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.wc-expertises__path strong {
  display: block;
  font-size: 1.25rem;
}

.wc-expertises__path small {
  color: var(--wce-muted);
}

.wc-expertises__section--dark {
  background:
    radial-gradient(circle at 80% 20%, rgba(71, 126, 127, 0.22), transparent 25%),
    linear-gradient(135deg, #132833, #2b5261);
  color: #e7eeec;
}

.wc-expertises__section--dark h2,
.wc-expertises__section--dark h3,
.wc-expertises__section--dark strong {
  color: #fff;
}

.wc-expertises__section--dark p {
  color: #e7eeec;
}

.wc-expertises__section--dark .wc-expertises__eyebrow {
  color: #c7ded8;
}

.wc-expertises__advantages {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-expertises__advantages li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.45fr 1fr;
  padding: 1.2rem 0;
}

.wc-expertises__advantages span {
  color: #d6e7e2;
  font-size: 0.95rem;
}

.wc-expertises__seo-layers {
  display: grid;
  gap: 0.9rem;
}

.wc-expertises__seo-layers > div {
  background: #fff;
  border: 1px solid var(--wce-line);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(23, 36, 58, 0.06);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 42px 0.42fr 1fr;
  padding: 1.2rem 1.4rem;
}

.wc-expertises__seo-layers span {
  color: var(--wce-blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.wc-expertises__seo-layers p {
  color: var(--wce-muted);
  font-size: 0.92rem;
  margin: 0;
}

.wc-expertises__section--compact {
  padding-top: 0;
}

.wc-expertises__quality {
  background: var(--wce-surface);
  border-radius: 32px;
  display: grid;
  gap: 3rem;
  grid-template-columns: 0.7fr 1.3fr;
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(2rem, 6vw, 4.5rem);
}

.wc-expertises__quality-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

.wc-expertises__quality-grid p {
  color: var(--wce-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.wc-expertises__quality-grid strong {
  color: var(--wce-ink);
}

.wc-expertises__section--cta {
  padding-top: 0;
}

.wc-expertises__cta {
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.35), transparent 28%),
    linear-gradient(135deg, #17243a, #315f74 74%);
  border-radius: 34px;
  color: #fff;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(2.3rem, 6vw, 4.5rem);
}

.wc-expertises__cta h2,
.wc-expertises__cta p {
  color: #fff;
}

.wc-expertises__cta > div {
  max-width: 780px;
}

.wc-expertises__cta .wc-expertises__eyebrow {
  color: #c7ded8;
}

.wc-expertises__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wce-ink) !important;
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .wc-expertises__hero,
  .wc-expertises__split,
  .wc-expertises__feature,
  .wc-expertises__seo-layout,
  .wc-expertises__quality {
    grid-template-columns: 1fr;
  }

  .wc-expertises__grid {
    grid-template-columns: 1fr 1fr;
  }

  .wc-expertises__visual {
    margin: auto;
    max-width: 560px;
    width: 100%;
  }

  .wc-expertises__cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .wc-expertises__hero {
    min-height: auto;
  }

  .wc-expertises__grid,
  .wc-expertises__path,
  .wc-expertises__quality-grid {
    grid-template-columns: 1fr;
  }

  .wc-expertises__actions .wc-expertises__button {
    width: 100%;
  }

  .wc-expertises__orbit {
    max-width: 360px;
  }

  .wc-expertises__core {
    height: 190px;
    width: 190px;
  }

  .wc-expertises__satellite {
    min-height: 48px;
    min-width: 66px;
  }

  .wc-expertises__seo-layers > div {
    grid-template-columns: 36px 1fr;
  }

  .wc-expertises__seo-layers p {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-expertises *,
  .wc-expertises *::before,
  .wc-expertises *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* Article Méthode — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body.itemid-104 .container-component,
body.itemid-104 .container-component > main,
body.itemid-104 .com-content-article,
body.itemid-104 .com-content-article__body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.itemid-104 .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

.wc-method {
  --wcm-ink: #17243a;
  --wcm-muted: #6f6a63;
  --wcm-blue: #315f74;
  --wcm-blue-dark: #234857;
  --wcm-violet: #c45f49;
  --wcm-cyan: #477e7f;
  --wcm-surface: #f8f4ed;
  --wcm-line: rgba(23, 36, 58, 0.12);
  color: var(--wcm-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-method *,
.wc-method *::before,
.wc-method *::after {
  box-sizing: border-box;
}

.wc-method h1,
.wc-method h2,
.wc-method h3,
.wc-method p {
  margin-top: 0;
}

.wc-method h1,
.wc-method h2,
.wc-method h3 {
  color: var(--wcm-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-method h1 {
  font-size: clamp(2.7rem, 5.8vw, 5rem);
  margin-bottom: 1.5rem;
}

.wc-method h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  margin-bottom: 1.25rem;
}

.wc-method h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin-bottom: 0.75rem;
}

.wc-method__hero,
.wc-method__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-method__hero {
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.19), transparent 27%),
    radial-gradient(circle at 70% 82%, rgba(196, 95, 73, 0.14), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-method__eyebrow {
  color: var(--wcm-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-method__intro,
.wc-method__heading > p:last-child {
  color: var(--wcm-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-method__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-method__button {
  align-items: center;
  background: var(--wcm-blue);
  border: 2px solid var(--wcm-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-method__button:hover,
.wc-method__button:focus-visible {
  background: var(--wcm-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-method__button--secondary {
  background: transparent;
  color: var(--wcm-ink) !important;
}

.wc-method__proofs {
  color: var(--wcm-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-method__proofs li::before {
  color: var(--wcm-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-method__roadmap {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.17);
  padding: 1.2rem;
  transform: rotate(2deg);
}

.wc-method__roadmap div {
  align-items: center;
  background: var(--wcm-surface);
  border-radius: 16px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 44px 1fr;
  margin-bottom: 0.65rem;
  padding: 1rem 1.2rem;
}

.wc-method__roadmap div:last-child {
  background: linear-gradient(135deg, #17243a, #315f74);
  margin-bottom: 0;
}

.wc-method__roadmap span {
  align-items: center;
  background: #ebe5da;
  border-radius: 12px;
  color: var(--wcm-blue);
  display: flex;
  font-size: 0.75rem;
  font-weight: 900;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.wc-method__roadmap strong {
  color: var(--wcm-ink);
  font-size: 1.15rem;
}

.wc-method__roadmap div:last-child span {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.wc-method__roadmap div:last-child strong {
  color: #fff;
}

.wc-method__heading {
  margin: 0 auto 3rem;
  max-width: 850px;
  text-align: center;
}

.wc-method__heading > p:last-child {
  margin-inline: auto;
}

.wc-method__principles {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-method__principles section {
  border-top: 2px solid #d7cfc3;
  padding: 1.5rem 0.5rem 0;
}

.wc-method__principles span {
  color: var(--wcm-blue);
  display: block;
  font-size: 0.8rem;
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.wc-method__principles p {
  color: var(--wcm-muted);
}

.wc-method__section--tinted {
  background: var(--wcm-surface);
}

.wc-method__timeline {
  list-style: none;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0;
}

.wc-method__timeline > li {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 82px 1fr;
  padding-bottom: 3.5rem;
  position: relative;
}

.wc-method__timeline > li:not(:last-child)::before {
  background: #d7cfc3;
  content: "";
  height: calc(100% - 50px);
  left: 39px;
  position: absolute;
  top: 70px;
  width: 2px;
}

.wc-method__timeline-number {
  align-items: center;
  background: linear-gradient(135deg, var(--wcm-blue), var(--wcm-violet));
  border: 7px solid #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.18);
  color: #fff;
  display: flex;
  font-size: 0.82rem;
  font-weight: 900;
  height: 78px;
  justify-content: center;
  position: relative;
  width: 78px;
  z-index: 1;
}

.wc-method__timeline-content {
  background: #fff;
  border: 1px solid var(--wcm-line);
  border-radius: 24px;
  box-shadow: 0 14px 50px rgba(23, 36, 58, 0.06);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.wc-method__timeline-label {
  color: var(--wcm-blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.wc-method__timeline-content > p:not(.wc-method__timeline-label),
.wc-method__timeline-content li {
  color: var(--wcm-muted);
}

.wc-method__timeline-content ul {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 1.3rem 0;
  padding: 0;
}

.wc-method__timeline-content li {
  font-size: 0.94rem;
  padding-left: 1.3rem;
  position: relative;
}

.wc-method__timeline-content li::before {
  color: var(--wcm-blue);
  content: "✓";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.wc-method__timeline-content aside {
  background: var(--wcm-surface);
  border-left: 3px solid var(--wcm-blue);
  border-radius: 0 12px 12px 0;
  color: var(--wcm-muted);
  font-size: 0.94rem;
  padding: 0.9rem 1rem;
}

.wc-method__timeline-content aside strong {
  color: var(--wcm-ink);
}

.wc-method__split {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1fr 0.9fr;
  margin: 0 auto;
  max-width: 1160px;
}

.wc-method__split p {
  color: var(--wcm-muted);
}

.wc-method__text-link {
  color: var(--wcm-blue);
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.wc-method__text-link::after {
  content: " →";
}

.wc-method__checklist {
  background: #fff;
  border: 1px solid var(--wcm-line);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(23, 36, 58, 0.08);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.wc-method__checklist ul {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
}

.wc-method__checklist li {
  border-top: 1px solid var(--wcm-line);
  color: var(--wcm-muted);
  padding: 0.8rem 0 0.8rem 1.8rem;
  position: relative;
}

.wc-method__checklist li::before {
  color: var(--wcm-blue);
  content: "✓";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.wc-method__section--dark {
  background:
    radial-gradient(circle at 82% 20%, rgba(71, 126, 127, 0.22), transparent 25%),
    linear-gradient(135deg, #132833, #2b5261);
  color: #e7eeec;
}

.wc-method__section--dark h2,
.wc-method__section--dark strong {
  color: #fff;
}

.wc-method__section--dark p {
  color: #e7eeec;
}

.wc-method__section--dark .wc-method__eyebrow {
  color: #c7ded8;
}

.wc-method__seo-stages {
  display: grid;
  gap: 0.8rem;
}

.wc-method__seo-stages div {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.45fr 1fr;
  padding: 1.1rem 1.3rem;
}

.wc-method__seo-stages span {
  color: #c7ded8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wc-method__faq {
  margin: 0 auto;
  max-width: 900px;
}

.wc-method__faq details {
  border-bottom: 1px solid var(--wcm-line);
  padding: 1.3rem 0;
}

.wc-method__faq summary {
  color: var(--wcm-ink);
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 800;
  padding-right: 2rem;
}

.wc-method__faq details p {
  color: var(--wcm-muted);
  margin: 1rem 0 0;
  max-width: 780px;
}

.wc-method__section--cta {
  padding-top: 0;
}

.wc-method__cta {
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.35), transparent 28%),
    linear-gradient(135deg, #17243a, #315f74 74%);
  border-radius: 34px;
  color: #fff;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(2.3rem, 6vw, 4.5rem);
}

.wc-method__cta h2,
.wc-method__cta p {
  color: #fff;
}

.wc-method__cta > div {
  max-width: 780px;
}

.wc-method__cta .wc-method__eyebrow {
  color: #c7ded8;
}

.wc-method__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcm-ink) !important;
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .wc-method__hero,
  .wc-method__split {
    grid-template-columns: 1fr;
  }

  .wc-method__visual {
    max-width: 620px;
  }

  .wc-method__cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .wc-method__hero {
    min-height: auto;
  }

  .wc-method__principles,
  .wc-method__timeline-content ul {
    grid-template-columns: 1fr;
  }

  .wc-method__timeline > li {
    gap: 1rem;
    grid-template-columns: 52px 1fr;
  }

  .wc-method__timeline-number {
    border-width: 5px;
    height: 52px;
    width: 52px;
  }

  .wc-method__timeline > li:not(:last-child)::before {
    height: calc(100% - 35px);
    left: 25px;
    top: 46px;
  }

  .wc-method__actions .wc-method__button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .wc-method__timeline > li {
    display: block;
  }

  .wc-method__timeline-number {
    margin-bottom: 0.8rem;
  }

  .wc-method__timeline > li::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-method *,
  .wc-method *::before,
  .wc-method *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* Article Réalisations — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body.itemid-105 .container-component,
body.itemid-105 .container-component > main,
body.itemid-105 .com-content-article,
body.itemid-105 .com-content-article__body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.itemid-105 .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

.wc-work {
  --wcw-ink: #17243a;
  --wcw-muted: #6f6a63;
  --wcw-blue: #315f74;
  --wcw-blue-dark: #234857;
  --wcw-violet: #c45f49;
  --wcw-cyan: #477e7f;
  --wcw-surface: #f8f4ed;
  --wcw-line: rgba(23, 36, 58, 0.12);
  color: var(--wcw-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-work *,
.wc-work *::before,
.wc-work *::after { box-sizing: border-box; }

.wc-work h1,
.wc-work h2,
.wc-work h3,
.wc-work p { margin-top: 0; }

.wc-work h1,
.wc-work h2,
.wc-work h3 {
  color: var(--wcw-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-work h1 {
  font-size: clamp(2.7rem, 5.8vw, 5rem);
  margin-bottom: 1.5rem;
}

.wc-work h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  margin-bottom: 1.25rem;
}

.wc-work h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin-bottom: 0.75rem;
}

.wc-work__hero,
.wc-work__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-work__hero {
  align-items: center;
  background:
    radial-gradient(circle at 84% 20%, rgba(71, 126, 127, 0.2), transparent 27%),
    radial-gradient(circle at 68% 80%, rgba(196, 95, 73, 0.14), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-work__eyebrow {
  color: var(--wcw-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-work__intro,
.wc-work__heading > p:last-child {
  color: var(--wcw-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-work__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-work__button {
  align-items: center;
  background: var(--wcw-blue);
  border: 2px solid var(--wcw-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-work__button:hover,
.wc-work__button:focus-visible {
  background: var(--wcw-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-work__button--secondary {
  background: transparent;
  color: var(--wcw-ink) !important;
}

.wc-work__proofs {
  color: var(--wcw-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-work__proofs li::before {
  color: var(--wcw-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-work__showcase {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.18);
  padding: 0.75rem;
  transform: rotate(2deg);
}

.wc-work__showcase-top {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.35rem 0.85rem;
}

.wc-work__showcase-top i {
  background: #e6ded2;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.wc-work__showcase-screen {
  background:
    radial-gradient(circle at 90% 15%, rgba(71, 126, 127, 0.42), transparent 30%),
    linear-gradient(145deg, #17243a, #315f74);
  border-radius: 19px;
  color: #fff;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem);
}

.wc-work__showcase-screen > span {
  color: #c7ded8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.wc-work__showcase-screen > strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.05;
  margin: 1.2rem 0 2.5rem;
  max-width: 370px;
}

.wc-work__showcase-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
}

.wc-work__showcase-grid b {
  background: rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  height: 100px;
}

.wc-work__heading {
  margin: 0 auto 3rem;
  max-width: 850px;
  text-align: center;
}

.wc-work__heading > p:last-child { margin-inline: auto; }

.wc-work__criteria {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-work__criteria section {
  border-top: 2px solid #d7cfc3;
  padding: 1.5rem 0.5rem 0;
}

.wc-work__criteria span {
  color: var(--wcw-blue);
  display: block;
  font-size: 0.8rem;
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.wc-work__criteria p { color: var(--wcw-muted); }
.wc-work__section--tinted { background: var(--wcw-surface); }

.wc-work__projects {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-work__project {
  background: #fff;
  border: 1px solid var(--wcw-line);
  border-radius: 28px;
  box-shadow: 0 18px 58px rgba(23, 36, 58, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wc-work__project-image {
  aspect-ratio: 16 / 9;
  background: #f1ebe2;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.wc-work__project-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s ease;
  width: 100%;
}

.wc-work__project:hover .wc-work__project-image img,
.wc-work__project-image:focus-visible img {
  transform: scale(1.025);
}

.wc-work__project-image:focus-visible {
  outline: 3px solid var(--wcw-blue);
  outline-offset: -3px;
}

.wc-work__project-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

.wc-work__project-type {
  color: var(--wcw-blue);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.wc-work__project-copy > p:not(.wc-work__project-type),
.wc-work__project-copy li { color: var(--wcw-muted); }

.wc-work__project-copy ul {
  border-top: 1px solid var(--wcw-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 1.2rem 0 0;
}

.wc-work__project-copy li {
  font-size: 0.9rem;
}

.wc-work__project-copy li::before {
  color: var(--wcw-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.35rem;
}

.wc-work__project-link {
  color: var(--wcw-blue);
  display: inline-block;
  font-weight: 800;
  margin-top: auto;
  padding-top: 1.4rem;
  text-underline-offset: 0.22em;
}

.wc-work__project-link::after {
  content: " ↗";
}

.wc-work__split {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1fr 0.9fr;
  margin: 0 auto;
  max-width: 1160px;
}

.wc-work__split p { color: var(--wcw-muted); }

.wc-work__case-plan {
  display: grid;
  gap: 0.8rem;
}

.wc-work__case-plan div {
  background: var(--wcw-surface);
  border: 1px solid var(--wcw-line);
  border-radius: 16px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 40px 0.55fr 1fr;
  padding: 1rem 1.2rem;
}

.wc-work__case-plan span {
  color: var(--wcw-blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.wc-work__case-plan p {
  font-size: 0.9rem;
  margin: 0;
}

.wc-work__section--dark {
  background:
    radial-gradient(circle at 82% 20%, rgba(71, 126, 127, 0.22), transparent 25%),
    linear-gradient(135deg, #132833, #2b5261);
  color: #e7eeec;
}

.wc-work__section--dark h2,
.wc-work__section--dark strong { color: #fff; }
.wc-work__section--dark p { color: #e7eeec; }
.wc-work__section--dark .wc-work__eyebrow { color: #c7ded8; }

.wc-work__cms { display: grid; gap: 0.8rem; }

.wc-work__cms section {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.45fr 1fr;
  padding: 1.2rem 1.3rem;
}

.wc-work__cms span { color: #d6e7e2; }

.wc-work__steps {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-work__steps li {
  border-top: 2px solid #d7cfc3;
  padding-top: 1.4rem;
}

.wc-work__steps span {
  color: var(--wcw-blue);
  display: block;
  font-size: 0.8rem;
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.wc-work__steps p { color: var(--wcw-muted); }
.wc-work__center-link { margin: 2.5rem 0 0; text-align: center; }

.wc-work__text-link {
  color: var(--wcw-blue);
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.wc-work__text-link::after { content: " →"; }
.wc-work__section--cta { padding-top: 0; }

.wc-work__cta {
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.35), transparent 28%),
    linear-gradient(135deg, #17243a, #315f74 74%);
  border-radius: 34px;
  color: #fff;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(2.3rem, 6vw, 4.5rem);
}

.wc-work__cta h2,
.wc-work__cta p { color: #fff; }
.wc-work__cta > div { max-width: 780px; }
.wc-work__cta .wc-work__eyebrow { color: #c7ded8; }

.wc-work__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcw-ink) !important;
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .wc-work__hero,
  .wc-work__split { grid-template-columns: 1fr; }
  .wc-work__projects { grid-template-columns: 1fr 1fr; }
  .wc-work__visual { max-width: 620px; }
  .wc-work__cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .wc-work__hero { min-height: auto; }
  .wc-work__criteria,
  .wc-work__steps,
  .wc-work__projects { grid-template-columns: 1fr; }
  .wc-work__case-plan div { grid-template-columns: 36px 1fr; }
  .wc-work__case-plan p { grid-column: 2; }
  .wc-work__actions .wc-work__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-work *,
  .wc-work *::before,
  .wc-work *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}



/* Article FAQ — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body.itemid-107 .container-component,
body.itemid-107 .container-component > main,
body.itemid-107 .com-content-article,
body.itemid-107 .com-content-article__body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.itemid-107 .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

.wc-faq {
  --wcf-ink: #17243a;
  --wcf-muted: #6f6a63;
  --wcf-blue: #315f74;
  --wcf-blue-dark: #234857;
  --wcf-violet: #c45f49;
  --wcf-cyan: #477e7f;
  --wcf-surface: #f8f4ed;
  --wcf-line: rgba(23, 36, 58, 0.13);
  color: var(--wcf-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-faq *,
.wc-faq *::before,
.wc-faq *::after { box-sizing: border-box; }

.wc-faq h1,
.wc-faq h2,
.wc-faq h3,
.wc-faq p { margin-top: 0; }

.wc-faq h1,
.wc-faq h2,
.wc-faq h3 {
  color: var(--wcf-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-faq h1 {
  font-size: clamp(2.7rem, 5.8vw, 5rem);
  margin-bottom: 1.5rem;
}

.wc-faq h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  margin-bottom: 1.25rem;
}

.wc-faq__hero,
.wc-faq__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-faq__hero {
  align-items: center;
  background:
    radial-gradient(circle at 83% 18%, rgba(71, 126, 127, 0.2), transparent 28%),
    radial-gradient(circle at 68% 85%, rgba(196, 95, 73, 0.14), transparent 26%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-faq__eyebrow {
  color: var(--wcf-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-faq__intro,
.wc-faq__heading > p:last-child {
  color: var(--wcf-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-faq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-faq__button {
  align-items: center;
  background: var(--wcf-blue);
  border: 2px solid var(--wcf-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-faq__button:hover,
.wc-faq__button:focus-visible {
  background: var(--wcf-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-faq__button--secondary {
  background: transparent;
  color: var(--wcf-ink) !important;
}

.wc-faq__proofs {
  color: var(--wcf-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-faq__proofs li::before {
  color: var(--wcf-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-faq__visual {
  min-height: 420px;
  position: relative;
}

.wc-faq__bubble {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(35, 72, 87, 0.16);
  display: flex;
  gap: 1rem;
  padding: 1.35rem;
  position: absolute;
}

.wc-faq__bubble span {
  align-items: center;
  background: var(--wcf-blue);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 46px;
  font-size: 0.75rem;
  font-weight: 900;
  height: 46px;
  justify-content: center;
}

.wc-faq__bubble strong {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.3;
}

.wc-faq__bubble--one { left: 0; right: 3rem; top: 1rem; transform: rotate(-2deg); }
.wc-faq__bubble--two { left: 3rem; right: 0; top: 145px; transform: rotate(2deg); }
.wc-faq__bubble--three { left: 0.8rem; right: 2rem; top: 285px; transform: rotate(-1deg); }
.wc-faq__bubble--two span { background: var(--wcf-violet); }
.wc-faq__bubble--three span { background: var(--wcf-cyan); }

.wc-faq__heading {
  margin: 0 auto 3rem;
  max-width: 850px;
  text-align: center;
}

.wc-faq__heading > p:last-child { margin-inline: auto; }

.wc-faq__topics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wc-faq__topics a {
  background: #fff;
  border: 1px solid var(--wcf-line);
  border-radius: 16px;
  color: var(--wcf-ink) !important;
  font-weight: 800;
  padding: 1.2rem;
  text-align: center;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-faq__topics a:hover,
.wc-faq__topics a:focus-visible {
  border-color: var(--wcf-blue);
  box-shadow: 0 12px 30px rgba(23, 36, 58, 0.09);
  transform: translateY(-2px);
}

.wc-faq__section--tinted { background: var(--wcf-surface); }

.wc-faq__group {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1.32fr);
  margin: 0 auto;
  max-width: 1160px;
  scroll-margin-top: 7rem;
}

.wc-faq__group + .wc-faq__group {
  border-top: 1px solid var(--wcf-line);
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(4rem, 8vw, 7rem);
}

.wc-faq__group-title {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
}

.wc-faq__group-title > span {
  align-items: center;
  background: var(--wcf-blue);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 48px;
  font-size: 0.78rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
}

.wc-faq__group-title h2 {
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  margin-bottom: 0;
}

.wc-faq__list {
  display: grid;
  gap: 1rem;
}

.wc-faq__item {
  background: #fff;
  border: 1px solid var(--wcf-line);
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(23, 36, 58, 0.05);
  overflow: hidden;
}

.wc-faq__item summary {
  align-items: center;
  color: var(--wcf-ink);
  cursor: pointer;
  display: flex;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 800;
  justify-content: space-between;
  line-height: 1.4;
  list-style: none;
  padding: 1.35rem 4rem 1.35rem 1.5rem;
  position: relative;
}

.wc-faq__item summary::-webkit-details-marker { display: none; }

.wc-faq__item summary::after {
  align-items: center;
  background: #f1ebe2;
  border-radius: 50%;
  color: var(--wcf-blue);
  content: "+";
  display: flex;
  font-size: 1.4rem;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  width: 32px;
}

.wc-faq__item[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}

.wc-faq__item[open] summary {
  color: var(--wcf-blue);
}

.wc-faq__item summary:focus-visible {
  outline: 3px solid rgba(49, 95, 116, 0.3);
  outline-offset: -3px;
}

.wc-faq__answer {
  border-top: 1px solid var(--wcf-line);
  color: var(--wcf-muted);
  padding: 1.35rem 1.5rem 1.5rem;
}

.wc-faq__answer p:last-child { margin-bottom: 0; }

.wc-faq__answer a {
  color: var(--wcf-blue) !important;
  font-weight: 800;
}

.wc-faq__section--cta {
  background:
    radial-gradient(circle at 82% 30%, rgba(71, 126, 127, 0.28), transparent 25%),
    linear-gradient(135deg, #17243a, #315f74);
}

.wc-faq__cta {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr auto;
}

.wc-faq__cta h2,
.wc-faq__cta p { color: #fff; }
.wc-faq__cta .wc-faq__eyebrow { color: #c7ded8; }
.wc-faq__cta p:last-child { color: #e4ece9; margin-bottom: 0; max-width: 760px; }

.wc-faq__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcf-ink) !important;
  white-space: nowrap;
}

.wc-faq__button--light:hover,
.wc-faq__button--light:focus-visible {
  background: #f1ebe2;
  border-color: #f1ebe2;
}

@media (max-width: 960px) {
  .wc-faq__hero { grid-template-columns: 1fr; }
  .wc-faq__visual { margin: 0 auto; max-width: 620px; width: 100%; }
  .wc-faq__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-faq__group { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .wc-faq__hero,
  .wc-faq__section { padding-block: 4rem; }
  .wc-faq__hero { min-height: auto; }
  .wc-faq__visual { min-height: 365px; }
  .wc-faq__bubble--one { right: 1rem; }
  .wc-faq__bubble--two { left: 1rem; top: 125px; }
  .wc-faq__bubble--three { left: 0; right: 1rem; top: 250px; }
  .wc-faq__topics { grid-template-columns: 1fr; }
  .wc-faq__cta { grid-template-columns: 1fr; }
  .wc-faq__button--light { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-faq__button,
  .wc-faq__topics a,
  .wc-faq__item summary::after { transition: none; }
}


/* Article Tarifs — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body:has(.wc-pricing) .container-component,
body:has(.wc-pricing) .container-component > main,
body:has(.wc-pricing) .com-content-article,
body:has(.wc-pricing) .com-content-article__body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body:has(.wc-pricing) .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

.wc-pricing {
  --wcp-ink: #17243a;
  --wcp-muted: #6f6a63;
  --wcp-blue: #315f74;
  --wcp-blue-dark: #234857;
  --wcp-violet: #c45f49;
  --wcp-cyan: #477e7f;
  --wcp-surface: #f8f4ed;
  --wcp-line: rgba(23, 36, 58, 0.13);
  color: var(--wcp-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-pricing *,
.wc-pricing *::before,
.wc-pricing *::after { box-sizing: border-box; }

.wc-pricing h1,
.wc-pricing h2,
.wc-pricing h3,
.wc-pricing p { margin-top: 0; }

.wc-pricing h1,
.wc-pricing h2,
.wc-pricing h3 {
  color: var(--wcp-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-pricing h1 { font-size: clamp(2.7rem, 5.8vw, 5rem); margin-bottom: 1.5rem; }
.wc-pricing h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom: 1.25rem; }
.wc-pricing h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 0.75rem; }

.wc-pricing__hero,
.wc-pricing__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-pricing__hero {
  align-items: center;
  background:
    radial-gradient(circle at 84% 20%, rgba(71, 126, 127, 0.2), transparent 27%),
    radial-gradient(circle at 68% 80%, rgba(196, 95, 73, 0.14), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-pricing__eyebrow {
  color: var(--wcp-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-pricing__intro,
.wc-pricing__heading > p:last-child {
  color: var(--wcp-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-pricing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-pricing__button {
  align-items: center;
  background: var(--wcp-blue);
  border: 2px solid var(--wcp-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-pricing__button:hover,
.wc-pricing__button:focus-visible {
  background: var(--wcp-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-pricing__button--secondary { background: transparent; color: var(--wcp-ink) !important; }

.wc-pricing__proofs {
  color: var(--wcp-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-pricing__proofs li::before {
  color: var(--wcp-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-pricing__visual-card {
  background:
    radial-gradient(circle at 88% 15%, rgba(71, 126, 127, 0.4), transparent 28%),
    linear-gradient(145deg, #17243a, #315f74);
  border: 12px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.2);
  color: #fff;
  min-height: 420px;
  padding: clamp(2rem, 5vw, 3.5rem);
  transform: rotate(2deg);
}

.wc-pricing__visual-card > span {
  color: #c7ded8;
  display: block;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.wc-pricing__visual-card > strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  max-width: 430px;
}

.wc-pricing__visual-lines { margin: 2.5rem 0; }
.wc-pricing__visual-lines i {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  display: block;
  height: 8px;
  margin-top: 0.7rem;
  width: 90%;
}
.wc-pricing__visual-lines i:nth-child(2) { width: 70%; }
.wc-pricing__visual-lines i:nth-child(3) { width: 50%; }

.wc-pricing__visual-card > b {
  background: #fff;
  border-radius: 999px;
  color: var(--wcp-ink);
  display: inline-block;
  padding: 0.7rem 1rem;
}

.wc-pricing__heading {
  margin: 0 auto 3rem;
  max-width: 850px;
  text-align: center;
}

.wc-pricing__heading > p:last-child { margin-inline: auto; }
.wc-pricing__section--tinted { background: var(--wcp-surface); }

.wc-pricing__cards {
  align-items: stretch;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-pricing__card {
  background: #fff;
  border: 1px solid var(--wcp-line);
  border-radius: 26px;
  box-shadow: 0 18px 55px rgba(23, 36, 58, 0.07);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  position: relative;
}

.wc-pricing__card--featured {
  border: 2px solid var(--wcp-blue);
  box-shadow: 0 24px 70px rgba(49, 95, 116, 0.16);
  transform: translateY(-1rem);
}

.wc-pricing__badge {
  background: var(--wcp-blue);
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.35rem 0.8rem;
  position: absolute;
  right: 1.2rem;
  text-transform: uppercase;
  top: -0.9rem;
}

.wc-pricing__card-label {
  color: var(--wcp-blue);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.wc-pricing__card-use { color: var(--wcp-muted); min-height: 5.5rem; }

.wc-pricing__price {
  align-items: baseline;
  border-bottom: 1px solid var(--wcp-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.45rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
}

.wc-pricing__price small { color: var(--wcp-muted); flex-basis: 100%; font-weight: 700; }
.wc-pricing__price strong { color: var(--wcp-ink); font-size: clamp(2.3rem, 4vw, 3.2rem); letter-spacing: -0.05em; }
.wc-pricing__price span { color: var(--wcp-muted); font-size: 0.82rem; font-weight: 800; }

.wc-pricing__card ul {
  color: var(--wcp-muted);
  flex-grow: 1;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.wc-pricing__card li { border-bottom: 1px solid rgba(23, 36, 58, 0.08); padding: 0.65rem 0 0.65rem 1.6rem; position: relative; }
.wc-pricing__card li::before { color: var(--wcp-blue); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.wc-pricing__button--card { width: 100%; }

.wc-pricing__note {
  color: var(--wcp-muted);
  font-size: 0.92rem;
  margin: 2rem auto 0;
  max-width: 850px;
  text-align: center;
}

.wc-pricing__split {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 0.85fr 1.15fr;
}

.wc-pricing__split > div:first-child > p:last-child { color: var(--wcp-muted); }
.wc-pricing__included { display: grid; gap: 1rem; }

.wc-pricing__included article {
  align-items: flex-start;
  border-bottom: 1px solid var(--wcp-line);
  display: flex;
  gap: 1.2rem;
  padding-bottom: 1.2rem;
}

.wc-pricing__included span {
  align-items: center;
  background: #f1ebe2;
  border-radius: 50%;
  color: var(--wcp-blue);
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 0.75rem;
  font-weight: 900;
  height: 44px;
  justify-content: center;
}

.wc-pricing__included h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.wc-pricing__included p { color: var(--wcp-muted); margin-bottom: 0; }

.wc-pricing__section--dark {
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.22), transparent 24%),
    linear-gradient(135deg, #17243a, #294b58);
}

.wc-pricing__section--dark h2,
.wc-pricing__section--dark h3 { color: #fff; }
.wc-pricing__section--dark .wc-pricing__eyebrow { color: #c7ded8; }
.wc-pricing__section--dark .wc-pricing__heading > p:last-child { color: #e0e7e3; }

.wc-pricing__options {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-pricing__options article {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 1.5rem;
}

.wc-pricing__options p { color: #d8e2de; margin-bottom: 0; }

.wc-pricing__steps {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-pricing__steps li { border-top: 2px solid #d7cfc3; padding: 1.5rem 0.4rem 0; }
.wc-pricing__steps span { color: var(--wcp-blue); display: block; font-size: 0.78rem; font-weight: 900; margin-bottom: 0.8rem; }
.wc-pricing__steps p { color: var(--wcp-muted); margin-bottom: 0; }

.wc-pricing__center-link { margin: 2rem 0 0; text-align: center; }
.wc-pricing__center-link a { color: var(--wcp-blue) !important; font-weight: 800; }

.wc-pricing__faq { display: grid; gap: 1rem; margin: 0 auto; max-width: 900px; }
.wc-pricing__faq details { background: #fff; border: 1px solid var(--wcp-line); border-radius: 16px; overflow: hidden; }
.wc-pricing__faq summary { color: var(--wcp-ink); cursor: pointer; font-weight: 800; list-style: none; padding: 1.3rem 3.5rem 1.3rem 1.4rem; position: relative; }
.wc-pricing__faq summary::-webkit-details-marker { display: none; }
.wc-pricing__faq summary::after { color: var(--wcp-blue); content: "+"; font-size: 1.5rem; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); }
.wc-pricing__faq details[open] summary::after { content: "−"; }
.wc-pricing__faq details p { border-top: 1px solid var(--wcp-line); color: var(--wcp-muted); margin: 0; padding: 1.3rem 1.4rem; }

.wc-pricing__section--cta {
  background:
    radial-gradient(circle at 82% 30%, rgba(71, 126, 127, 0.28), transparent 25%),
    linear-gradient(135deg, #17243a, #315f74);
}

.wc-pricing__cta {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr auto;
}

.wc-pricing__cta h2,
.wc-pricing__cta p { color: #fff; }
.wc-pricing__cta .wc-pricing__eyebrow { color: #c7ded8; }
.wc-pricing__cta p:last-child { color: #e4ece9; margin-bottom: 0; max-width: 760px; }

.wc-pricing__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcp-ink) !important;
  white-space: nowrap;
}

.wc-pricing__button--light:hover,
.wc-pricing__button--light:focus-visible { background: #f1ebe2; border-color: #f1ebe2; }

@media (max-width: 960px) {
  .wc-pricing__hero,
  .wc-pricing__split { grid-template-columns: 1fr; }
  .wc-pricing__cards { grid-template-columns: 1fr; margin: 0 auto; max-width: 620px; }
  .wc-pricing__card--featured { transform: none; }
  .wc-pricing__card-use { min-height: 0; }
  .wc-pricing__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-pricing__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wc-pricing__hero,
  .wc-pricing__section { padding-block: 4rem; }
  .wc-pricing__hero { min-height: auto; }
  .wc-pricing__visual-card { min-height: 360px; transform: none; }
  .wc-pricing__options,
  .wc-pricing__steps { grid-template-columns: 1fr; }
  .wc-pricing__cta { grid-template-columns: 1fr; }
  .wc-pricing__button--light { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-pricing__button { transition: none; }
}


/* Correctif du menu principal — webcreations.fr */
.container-header {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: max(1rem, calc((100vw - 1440px) / 2));
}

.container-header .container-nav {
  justify-content: flex-end;
  min-width: 0;
}

.container-header .mod-menu {
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-end;
  width: 100%;
}

.container-header .metismenu > li > a {
  padding-inline: clamp(.55rem, 1vw, .85rem);
  white-space: nowrap;
}

.container-header .metismenu > li:last-child > a {
  margin-left: .5rem;
  padding-inline: 1.15rem;
}

/* Passage plus précoce au menu mobile */
@media (max-width: 1120px) {
  .container-header {
    display: block;
    padding-inline: 1rem;
  }

  .container-header .container-nav {
    justify-content: initial;
    padding-bottom: 1rem !important;
  }

  .container-header .mod-menu {
    align-items: flex-start;
    flex-direction: column;
  }

  .container-header .metismenu > li:last-child > a {
    margin-left: 0;
  }
}

/* Menu mobile Cassiopeia : bouton burger et panneau repliable */
@media (max-width: 1120px) {
  .container-header .container-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .container-header .navbar-toggler {
    align-items: center;
    background: var(--wc-blue);
    border: 0;
    border-radius: 12px;
    color: #fff;
    display: flex !important;
    height: 46px;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: 0.65rem 0.8rem;
    width: 50px;
  }

  .container-header .navbar-toggler:focus-visible {
    outline: 3px solid rgba(47, 111, 126, 0.3);
    outline-offset: 3px;
  }

  .container-header .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
  }

  .container-header .navbar-collapse:not(.show) {
    display: none !important;
  }

  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    display: block !important;
  }

  .container-header .navbar-collapse .mod-menu {
    align-items: stretch;
    padding-top: 1rem;
    width: 100%;
  }

  .container-header .navbar-collapse .metismenu > li,
  .container-header .navbar-collapse .metismenu > li > a {
    width: 100%;
  }
}

/* Alignement mobile : logo à gauche, burger en haut à droite */
@media (max-width: 1120px) {
  .container-header {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 74px;
    padding: 0 1rem;
    position: relative;
  }

  .container-header .navbar-brand {
    grid-column: 1;
    min-height: 74px;
    min-width: 0;
  }

  .container-header .navbar-brand img {
    height: auto;
    max-height: 52px;
    max-width: min(270px, 72vw);
    width: auto;
  }

  .container-header .container-nav {
    display: flex;
    grid-column: 2;
    padding: 0 !important;
    width: auto;
  }

  .container-header .navbar-toggler {
    margin: 0;
  }

  .container-header .navbar-collapse {
    background: rgba(255, 253, 249, 0.98);
    border-top: 1px solid var(--wc-line);
    box-shadow: 0 18px 35px rgba(23, 36, 58, 0.12);
    left: 0;
    padding: 0 1rem 1rem;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 1000;
  }
}

/* Sécurisation du panneau mobile dans la largeur de l'écran */
@media (max-width: 1120px) {
  .container-header .container-nav {
    position: static !important;
  }

  .container-header .navbar-collapse {
    box-sizing: border-box;
    left: 0 !important;
    margin: 0 !important;
    max-width: 100vw;
    overflow-x: hidden;
    right: 0 !important;
    transform: none !important;
  }

  .container-header .navbar-collapse .mod-menu {
    box-sizing: border-box;
    display: flex;
    margin: 0;
    max-width: 100%;
    padding: 0.75rem 0 0;
  }

  .container-header .navbar-collapse .metismenu > li {
    box-sizing: border-box;
    display: block;
    margin: 0;
    max-width: 100%;
  }

  .container-header .navbar-collapse .metismenu > li > a {
    box-sizing: border-box;
    display: block;
    margin: 0 !important;
    max-width: 100%;
    padding: 0.85rem 1rem;
    text-align: left;
    white-space: normal;
  }

  .container-header .navbar-collapse .metismenu > li:last-child > a {
    margin-top: 0.5rem !important;
    text-align: center;
    width: 100%;
  }
}


/* Article Demander un devis — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body:has(.wc-quote) .container-component,
body:has(.wc-quote) .container-component > main,
body:has(.wc-quote) .com-content-article,
body:has(.wc-quote) .com-content-article__body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body:has(.wc-quote) .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

/* Supprime la bande blanche entre l’article Devis et le footer */
body:has(.wc-quote) .com-content-article__body > .wc-quote + p,
body:has(.wc-quote) .com-content-article__body > .wc-quote + br,
body:has(.wc-quote) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.wc-quote) .site-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

body:has(.wc-quote) .container-footer {
  margin-top: -1rem !important;
}

.wc-quote {
  --wcq-ink: #17243a;
  --wcq-muted: #6f6a63;
  --wcq-blue: #315f74;
  --wcq-blue-dark: #234857;
  --wcq-violet: #c45f49;
  --wcq-cyan: #477e7f;
  --wcq-surface: #f8f4ed;
  --wcq-line: rgba(23, 36, 58, 0.13);
  color: var(--wcq-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-quote *,
.wc-quote *::before,
.wc-quote *::after { box-sizing: border-box; }

.wc-quote h1,
.wc-quote h2,
.wc-quote h3,
.wc-quote p { margin-top: 0; }

.wc-quote h1,
.wc-quote h2,
.wc-quote h3 {
  color: var(--wcq-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-quote h1 { font-size: clamp(2.7rem, 5.8vw, 5rem); margin-bottom: 1.5rem; }
.wc-quote h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom: 1.25rem; }
.wc-quote h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 0.75rem; }

.wc-quote__hero,
.wc-quote__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-quote__hero {
  align-items: center;
  background:
    radial-gradient(circle at 84% 20%, rgba(71, 126, 127, 0.2), transparent 27%),
    radial-gradient(circle at 68% 80%, rgba(196, 95, 73, 0.14), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 680px;
}

.wc-quote__eyebrow {
  color: var(--wcq-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-quote__intro,
.wc-quote__heading > p:last-child {
  color: var(--wcq-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-quote__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-quote__button {
  align-items: center;
  background: var(--wcq-blue);
  border: 2px solid var(--wcq-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-quote__button:hover,
.wc-quote__button:focus-visible {
  background: var(--wcq-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-quote__button--secondary { background: transparent; color: var(--wcq-ink) !important; }

.wc-quote__phone-call {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(49, 95, 116, 0.18);
  border-radius: 18px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
}

.wc-quote__phone-call > span {
  color: var(--wcq-muted);
  font-size: 0.92rem;
}

.wc-quote__phone-call > a {
  align-items: center;
  color: var(--wcq-blue) !important;
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none !important;
}

.wc-quote__phone-call > a i {
  align-items: center;
  background: var(--wcq-blue);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-style: normal;
  height: 32px;
  justify-content: center;
  margin-right: 0.55rem;
  width: 32px;
}

.wc-quote__phone-call > a:hover,
.wc-quote__phone-call > a:focus-visible {
  color: var(--wcq-blue-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

.wc-quote__proofs {
  color: var(--wcq-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-quote__proofs li::before {
  color: var(--wcq-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-quote__brief {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.18);
  padding: 0.75rem;
  transform: rotate(2deg);
}

.wc-quote__brief-top { display: flex; gap: 0.35rem; padding: 0.4rem 0.35rem 0.85rem; }
.wc-quote__brief-top i { background: #e6ded2; border-radius: 50%; height: 9px; width: 9px; }

.wc-quote__brief-body {
  background:
    radial-gradient(circle at 88% 18%, rgba(71, 126, 127, 0.4), transparent 29%),
    linear-gradient(145deg, #17243a, #315f74);
  border-radius: 19px;
  color: #fff;
  min-height: 410px;
  padding: clamp(2rem, 4vw, 3rem);
}

.wc-quote__brief-body > span {
  color: #c7ded8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.wc-quote__brief-body > strong {
  display: block;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.08;
  margin: 1rem 0 2rem;
}

.wc-quote__brief-fields { display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; }
.wc-quote__brief-fields b { background: rgba(255, 255, 255, 0.16); border-radius: 10px; height: 50px; }
.wc-quote__brief-fields b:nth-child(3) { grid-column: 1 / -1; height: 75px; }
.wc-quote__brief-fields b:nth-child(4) { display: none; }
.wc-quote__brief-body > em { background: #fff; border-radius: 999px; color: var(--wcq-ink); display: inline-block; font-style: normal; font-weight: 800; margin-top: 1.4rem; padding: 0.65rem 1rem; }

.wc-quote__heading { margin: 0 auto 3rem; max-width: 850px; text-align: center; }
.wc-quote__heading > p:last-child { margin-inline: auto; }

.wc-quote__reasons {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-quote__reasons article { border-top: 2px solid #d7cfc3; padding: 1.5rem 0.5rem 0; }
.wc-quote__reasons span { color: var(--wcq-blue); display: block; font-size: 0.8rem; font-weight: 900; margin-bottom: 0.8rem; }
.wc-quote__reasons p { color: var(--wcq-muted); }
.wc-quote__section--tinted { background: var(--wcq-surface); }

.wc-quote__form-layout {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
  grid-template-columns: 0.76fr 1.24fr;
}

.wc-quote__form-intro > p { color: var(--wcq-muted); }

.wc-quote__tips {
  background: #f1ebe2;
  border-radius: 18px;
  margin-top: 2rem;
  padding: 1.4rem;
}

.wc-quote__tips h3 { font-size: 1.05rem; }
.wc-quote__tips ul { color: var(--wcq-muted); margin-bottom: 0; padding-left: 1.3rem; }
.wc-quote__privacy { font-size: 0.88rem; margin-top: 1.4rem; }

.wc-quote__form-box {
  background: #fff;
  border: 1px solid var(--wcq-line);
  border-radius: 26px;
  box-shadow: 0 22px 65px rgba(23, 36, 58, 0.09);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}

.wc-quote__form-heading { border-bottom: 1px solid var(--wcq-line); margin-bottom: 1.5rem; padding-bottom: 1.4rem; }
.wc-quote__form-heading span { color: var(--wcq-blue); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.wc-quote__form-heading h3 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); margin: 0.5rem 0 0; }

.wc-quote__module .control-group,
.wc-quote__module .form-group { margin-bottom: 1.15rem; }

.wc-quote__module label {
  color: var(--wcq-ink);
  display: block;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.wc-quote__module input:not([type="checkbox"]):not([type="radio"]),
.wc-quote__module select,
.wc-quote__module textarea {
  background: #fffaf4;
  border: 1px solid #d8d0c5;
  border-radius: 10px;
  color: var(--wcq-ink);
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.wc-quote__module textarea { min-height: 150px; resize: vertical; }
.wc-quote__module input:focus,
.wc-quote__module select:focus,
.wc-quote__module textarea:focus { border-color: var(--wcq-blue); box-shadow: 0 0 0 3px rgba(49, 95, 116, 0.14); outline: 0; }

.wc-quote__module button,
.wc-quote__module input[type="submit"] {
  background: var(--wcq-blue);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 0.9rem 1.4rem;
}

.wc-quote__email {
  align-items: center;
  background: #f4eee5;
  border: 1px solid #ded6c9;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  padding: 1.35rem;
  text-align: center;
}

.wc-quote__email > span {
  color: var(--wcq-muted);
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
}

.wc-quote__email > a {
  align-items: center;
  background: #fff;
  border: 2px solid var(--wcq-blue);
  border-radius: 999px;
  color: var(--wcq-blue) !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.75rem 1.1rem;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wc-quote__email > a::before {
  content: "✉";
  font-size: 1.05rem;
  margin-right: 0.55rem;
}

.wc-quote__email > a:hover,
.wc-quote__email > a:focus-visible {
  background: var(--wcq-blue);
  color: #fff !important;
  transform: translateY(-2px);
}

.wc-quote__email > small {
  color: var(--wcq-muted);
  margin-top: 0.55rem;
}

.wc-quote__projects {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wc-quote__projects article {
  background: #fff;
  border: 1px solid var(--wcq-line);
  border-radius: 20px;
  box-shadow: 0 14px 42px rgba(23, 36, 58, 0.06);
  padding: 1.5rem;
}

.wc-quote__projects i { color: var(--wcq-blue); display: block; font-size: 0.78rem; font-style: normal; font-weight: 900; margin-bottom: 1rem; }
.wc-quote__projects p { color: var(--wcq-muted); margin-bottom: 0; }

.wc-quote__section--dark {
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.22), transparent 24%),
    linear-gradient(135deg, #17243a, #294b58);
}

.wc-quote__split {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 0.82fr 1.18fr;
}

.wc-quote__section--dark h2,
.wc-quote__section--dark h3 { color: #fff; }
.wc-quote__section--dark .wc-quote__eyebrow { color: #c7ded8; }
.wc-quote__section--dark .wc-quote__split > div > p:last-child { color: #e0e7e3; }

.wc-quote__timeline { list-style: none; margin: 0; padding: 0; }
.wc-quote__timeline li { border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: flex; gap: 1.2rem; padding: 0 0 1.3rem; }
.wc-quote__timeline li + li { padding-top: 1.3rem; }
.wc-quote__timeline span { align-items: center; background: rgba(147, 197, 253, 0.14); border-radius: 50%; color: #c7ded8; display: inline-flex; flex: 0 0 46px; font-size: 0.76rem; font-weight: 900; height: 46px; justify-content: center; }
.wc-quote__timeline p { color: #d8e2de; margin-bottom: 0; }

.wc-quote__faq { display: grid; gap: 1rem; margin: 0 auto; max-width: 900px; }
.wc-quote__faq details { background: #fff; border: 1px solid var(--wcq-line); border-radius: 16px; overflow: hidden; }
.wc-quote__faq summary { color: var(--wcq-ink); cursor: pointer; font-weight: 800; list-style: none; padding: 1.3rem 3.5rem 1.3rem 1.4rem; position: relative; }
.wc-quote__faq summary::-webkit-details-marker { display: none; }
.wc-quote__faq summary::after { color: var(--wcq-blue); content: "+"; font-size: 1.5rem; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); }
.wc-quote__faq details[open] summary::after { content: "−"; }
.wc-quote__faq details p { border-top: 1px solid var(--wcq-line); color: var(--wcq-muted); margin: 0; padding: 1.3rem 1.4rem; }
.wc-quote__center-link { margin: 2rem 0 0; text-align: center; }
.wc-quote__center-link a { color: var(--wcq-blue) !important; font-weight: 800; }

.wc-quote__section--cta {
  background:
    radial-gradient(circle at 82% 30%, rgba(71, 126, 127, 0.28), transparent 25%),
    linear-gradient(135deg, #17243a, #315f74);
}

.wc-quote__cta {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr auto;
}

.wc-quote__cta h2,
.wc-quote__cta p { color: #fff; }
.wc-quote__cta .wc-quote__eyebrow { color: #c7ded8; }
.wc-quote__cta p:last-child { color: #e4ece9; margin-bottom: 0; max-width: 760px; }

.wc-quote__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcq-ink) !important;
  white-space: nowrap;
}

.wc-quote__button--light:hover,
.wc-quote__button--light:focus-visible { background: #f1ebe2; border-color: #f1ebe2; }

.wc-quote__cta-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.75rem;
}

.wc-quote__cta-link {
  color: #fff !important;
  font-weight: 800;
  text-underline-offset: 0.22em;
}

@media (max-width: 960px) {
  .wc-quote__hero,
  .wc-quote__form-layout,
  .wc-quote__split { grid-template-columns: 1fr; }
  .wc-quote__projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wc-quote__hero,
  .wc-quote__section { padding-block: 4rem; }
  .wc-quote__hero { min-height: auto; }
  .wc-quote__brief { transform: none; }
  .wc-quote__reasons,
  .wc-quote__projects { grid-template-columns: 1fr; }
  .wc-quote__cta { grid-template-columns: 1fr; }
  .wc-quote__cta-actions { align-items: flex-start; }
  .wc-quote__button--light { white-space: normal; }
}

@media (max-width: 480px) {
  .wc-quote__phone-call {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-quote__button { transition: none; }
}



/* Nouvelle page d’accueil — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body.itemid-101 .container-component,
body.itemid-101 .container-component > main,
body.itemid-101 .com-content-article,
body.itemid-101 .com-content-article__body {
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

body.itemid-101 .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

/* Supprime les résidus de l’éditeur et la bande blanche avant le footer */
body.itemid-101 .com-content-article__body > .wc-homepage + p,
body.itemid-101 .com-content-article__body > .wc-homepage + br,
body.itemid-101 .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.itemid-101 .site-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

body.itemid-101 .container-footer {
  margin-top: -1rem !important;
}

.wc-homepage {
  --wch-ink: #17243a;
  --wch-muted: #6f6a63;
  --wch-blue: #315f74;
  --wch-blue-dark: #234857;
  --wch-violet: #c45f49;
  --wch-cyan: #477e7f;
  --wch-surface: #f8f4ed;
  --wch-line: rgba(23, 36, 58, 0.13);
  color: var(--wch-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-homepage *,
.wc-homepage *::before,
.wc-homepage *::after { box-sizing: border-box; }

.wc-homepage h1,
.wc-homepage h2,
.wc-homepage h3,
.wc-homepage p { margin-top: 0; }

.wc-homepage h1,
.wc-homepage h2,
.wc-homepage h3 {
  color: var(--wch-ink);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.wc-homepage h1 { font-size: clamp(2.8rem, 5.7vw, 5.2rem); margin-bottom: 1.5rem; }
.wc-homepage h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 1.25rem; }
.wc-homepage h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 0.75rem; }

.wc-homepage__hero,
.wc-homepage__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-homepage__hero {
  align-items: stretch;
  background: #f4eee5;
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.wc-homepage__hero-copy {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  padding: clamp(3.5rem, 7vw, 6rem) max(1.25rem, calc((100vw - 1160px) / 2));
  position: relative;
  width: 100%;
  z-index: 2;
}

.wc-homepage__hero-copy h1 {
  font-size: clamp(2.8rem, 5.7vw, 5.2rem);
  max-width: 980px;
}

.wc-homepage__eyebrow {
  color: var(--wch-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-homepage__intro,
.wc-homepage__heading > p:last-child {
  color: var(--wch-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-homepage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-homepage__button {
  align-items: center;
  background: var(--wch-blue);
  border: 2px solid var(--wch-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-homepage__button:hover,
.wc-homepage__button:focus-visible {
  background: var(--wch-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-homepage__button--secondary { background: transparent; color: var(--wch-ink) !important; }

.wc-homepage__proofs {
  color: var(--wch-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-homepage__proofs li::before {
  color: var(--wch-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-homepage__visual {
  height: clamp(440px, 50vw, 720px);
  inset: auto;
  margin: 0;
  min-height: 0;
  order: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 0;
}

.wc-homepage__hero-image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  width: 100%;
}

.wc-homepage__visual::after {
  background:
    linear-gradient(0deg, #f4eee5 0%, rgba(244, 238, 229, 0.82) 5%, transparent 28%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.wc-homepage__benefits {
  background: #fff;
  border-bottom: 1px solid var(--wch-line);
  border-top: 1px solid var(--wch-line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-homepage__benefits div { padding: 1.7rem clamp(1rem, 3vw, 2rem); }
.wc-homepage__benefits div + div { border-left: 1px solid var(--wch-line); }
.wc-homepage__benefits strong { display: block; font-size: 1rem; }
.wc-homepage__benefits span { color: var(--wch-muted); font-size: 0.88rem; }

.wc-homepage__section--about {
  background:
    radial-gradient(circle at 14% 18%, rgba(49, 95, 116, 0.1), transparent 27%),
    #fff;
}

.wc-homepage__about {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 7vw, 6.5rem);
  grid-template-columns: 0.72fr 1.28fr;
  margin: 0 auto;
  max-width: 1080px;
}

.wc-homepage__about-portrait {
  align-items: center;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 70% 18%, rgba(71, 126, 127, 0.35), transparent 25%),
    linear-gradient(145deg, #17243a, #315f74);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(35, 72, 87, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 390px;
  overflow: hidden;
  padding: 2rem;
  position: relative;
  transform: rotate(-2deg);
}

.wc-homepage__about-portrait::after {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  content: "";
  height: 260px;
  position: absolute;
  width: 260px;
}

.wc-homepage__about-portrait span {
  color: #fff;
  font-size: clamp(6rem, 13vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.wc-homepage__about-portrait small {
  bottom: 1.6rem;
  color: #d6e7e2;
  font-size: 0.78rem;
  font-weight: 800;
  left: 2rem;
  letter-spacing: 0.08em;
  position: absolute;
  text-transform: uppercase;
  z-index: 1;
}

.wc-homepage__about-copy > p:not(.wc-homepage__eyebrow) { color: var(--wch-muted); }
.wc-homepage__about-lead { color: var(--wch-ink) !important; font-size: clamp(1.08rem, 2vw, 1.25rem); font-weight: 700; }
.wc-homepage__about-points { display: flex; flex-wrap: wrap; gap: 0.65rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.wc-homepage__about-points li { background: var(--wch-surface); border: 1px solid var(--wch-line); border-radius: 999px; color: var(--wch-ink); font-size: 0.88rem; font-weight: 800; padding: 0.55rem 0.9rem; }
.wc-homepage__about-points li::before { color: var(--wch-blue); content: "✓"; margin-right: 0.4rem; }
.wc-homepage__about-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.wc-homepage__about-phone { color: var(--wch-blue) !important; font-size: 1.05rem; font-weight: 900; text-underline-offset: 0.2em; }
.wc-homepage__about-phone::before { content: "☎"; margin-right: 0.45rem; }

.wc-homepage__heading { margin: 0 auto 3rem; max-width: 860px; text-align: center; }
.wc-homepage__heading > p:last-child { margin-inline: auto; }

.wc-homepage__services {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-homepage__services article {
  background: #fff;
  border: 1px solid var(--wch-line);
  border-radius: 22px;
  box-shadow: 0 14px 45px rgba(23, 36, 58, 0.055);
  padding: 1.7rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-homepage__services article:hover { box-shadow: 0 22px 55px rgba(23, 36, 58, 0.1); transform: translateY(-4px); }
.wc-homepage__services span { color: var(--wch-blue); display: block; font-size: 0.78rem; font-weight: 900; margin-bottom: 1rem; }
.wc-homepage__services p { color: var(--wch-muted); margin-bottom: 0; }

.wc-homepage__center-link { margin: 2.2rem 0 0; text-align: center; }
.wc-homepage__center-link a,
.wc-homepage__text-link { color: var(--wch-blue) !important; font-weight: 800; }
.wc-homepage__section--tinted { background: var(--wch-surface); }

.wc-homepage__seo-layout,
.wc-homepage__price-layout {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 0.92fr 1.08fr;
}

.wc-homepage__seo-layout > div:first-child > p,
.wc-homepage__price-layout > div:first-child > p { color: var(--wch-muted); }

.wc-homepage__seo-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(71, 126, 127, 0.22), transparent 26%),
    linear-gradient(145deg, #17243a, #315f74);
  border-radius: 26px;
  box-shadow: 0 24px 65px rgba(35, 72, 87, 0.18);
  padding: clamp(1.6rem, 4vw, 2.5rem);
}

.wc-homepage__seo-card > p { color: #fff; font-size: 1.25rem; font-weight: 800; }
.wc-homepage__seo-card ul { list-style: none; margin: 0; padding: 0; }
.wc-homepage__seo-card li { align-items: start; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 0.2rem 0.8rem; grid-template-columns: auto 1fr; padding: 1rem 0; }
.wc-homepage__seo-card li > span { color: #c7ded8; font-size: 0.76rem; font-weight: 900; grid-row: 1 / 3; }
.wc-homepage__seo-card strong { color: #fff; }
.wc-homepage__seo-card small { color: #d8e2de; font-size: 0.88rem; }

.wc-homepage__cms {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-homepage__cms-card {
  border: 1px solid var(--wch-line);
  border-radius: 24px;
  padding: 2rem;
}

.wc-homepage__cms-card--blue { background: linear-gradient(145deg, #f8f4ed, #f2ece4); }
.wc-homepage__cms-card--violet { background: linear-gradient(145deg, #fff8f2, #f3e8e2); }
.wc-homepage__cms-card--cyan { background: linear-gradient(145deg, #f7f4ee, #edf3ef); }
.wc-homepage__cms-name { color: var(--wch-blue); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.wc-homepage__cms-card--violet .wc-homepage__cms-name { color: var(--wch-violet); }
.wc-homepage__cms-card--cyan .wc-homepage__cms-name { color: #07859a; }
.wc-homepage__cms-card > p:last-child { color: var(--wch-muted); margin-bottom: 0; }

.wc-homepage__section--dark {
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.22), transparent 24%),
    linear-gradient(135deg, #17243a, #294b58);
}

.wc-homepage__section--dark h2,
.wc-homepage__section--dark h3 { color: #fff; }
.wc-homepage__section--dark .wc-homepage__eyebrow { color: #c7ded8; }
.wc-homepage__section--dark .wc-homepage__heading > p:last-child { color: #e0e7e3; }
.wc-homepage__section--dark .wc-homepage__center-link a { color: #c7ded8 !important; }

.wc-homepage__steps {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-homepage__steps li { border-top: 2px solid rgba(147, 197, 253, 0.35); padding: 1.5rem 0.4rem 0; }
.wc-homepage__steps span { color: #c7ded8; display: block; font-size: 0.78rem; font-weight: 900; margin-bottom: 0.8rem; }
.wc-homepage__steps p { color: #d8e2de; margin-bottom: 0; }

.wc-homepage__projects {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-homepage__projects > article {
  background: #fff;
  border: 1px solid var(--wch-line);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(23, 36, 58, 0.065);
  overflow: hidden;
}

.wc-homepage__project-visual {
  aspect-ratio: 16 / 9;
  background: #f1ebe2;
  display: block;
  overflow: hidden;
}

.wc-homepage__project-visual img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s ease;
  width: 100%;
}

.wc-homepage__projects > article:hover .wc-homepage__project-visual img,
.wc-homepage__project-visual:focus-visible img {
  transform: scale(1.025);
}

.wc-homepage__project-visual:focus-visible {
  outline: 3px solid var(--wch-blue);
  outline-offset: -3px;
}

.wc-homepage__project-copy { padding: 1.6rem; }
.wc-homepage__project-copy > p { color: var(--wch-blue); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 0.5rem; text-transform: uppercase; }
.wc-homepage__project-copy > span { color: var(--wch-muted); display: block; margin-bottom: 1rem; }
.wc-homepage__project-copy a { color: var(--wch-blue) !important; font-weight: 800; }

.wc-homepage .wc-homepage__projects-action {
  margin: 0;
  padding-top: 3rem;
  text-align: center;
}

.wc-homepage__projects-action a {
  align-items: center;
  background: #f4eee5;
  border: 2px solid var(--wch-blue);
  border-radius: 999px;
  color: var(--wch-blue) !important;
  display: inline-flex;
  font-weight: 800;
  gap: 0.65rem;
  justify-content: center;
  padding: 0.85rem 1.35rem;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-homepage__projects-action a:hover,
.wc-homepage__projects-action a:focus-visible {
  background: var(--wch-blue);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.2);
  color: #fff !important;
  transform: translateY(-2px);
}

.wc-homepage__projects-action span {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

.wc-homepage__projects-action a:hover span,
.wc-homepage__projects-action a:focus-visible span {
  transform: translateX(3px);
}

.wc-homepage__price-layout { grid-template-columns: 0.9fr 1.1fr; }
.wc-homepage__price-cards { display: grid; gap: 0.9rem; }
.wc-homepage__price-cards article { align-items: center; background: #fff; border: 1px solid var(--wch-line); border-radius: 18px; display: flex; gap: 1rem; justify-content: space-between; padding: 1.25rem 1.4rem; }
.wc-homepage__price-cards span { color: var(--wch-muted); font-weight: 700; }
.wc-homepage__price-cards strong { color: var(--wch-ink); font-size: clamp(1.15rem, 2vw, 1.45rem); white-space: nowrap; }

.wc-homepage__faq { display: grid; gap: 1rem; margin: 0 auto; max-width: 900px; }
.wc-homepage__faq details { background: #fff; border: 1px solid var(--wch-line); border-radius: 16px; overflow: hidden; }
.wc-homepage__faq summary { color: var(--wch-ink); cursor: pointer; font-weight: 800; list-style: none; padding: 1.3rem 3.5rem 1.3rem 1.4rem; position: relative; }
.wc-homepage__faq summary::-webkit-details-marker { display: none; }
.wc-homepage__faq summary::after { color: var(--wch-blue); content: "+"; font-size: 1.5rem; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); }
.wc-homepage__faq details[open] summary::after { content: "−"; }
.wc-homepage__faq details p { border-top: 1px solid var(--wch-line); color: var(--wch-muted); margin: 0; padding: 1.3rem 1.4rem; }

.wc-homepage__section--cta {
  background:
    radial-gradient(circle at 82% 30%, rgba(71, 126, 127, 0.28), transparent 25%),
    linear-gradient(135deg, #17243a, #315f74);
}

.wc-homepage__cta {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr auto;
}

.wc-homepage__cta h2,
.wc-homepage__cta p { color: #fff; }
.wc-homepage__cta .wc-homepage__eyebrow { color: #c7ded8; }
.wc-homepage__cta > div:first-child > p:last-child { color: #e4ece9; margin-bottom: 0; max-width: 760px; }
.wc-homepage__cta-actions { align-items: center; display: flex; flex-direction: column; gap: 0.7rem; }

.wc-homepage__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wch-ink) !important;
  white-space: nowrap;
}

.wc-homepage__button--light:hover,
.wc-homepage__button--light:focus-visible { background: #f1ebe2; border-color: #f1ebe2; }
.wc-homepage__email { color: #d6e7e2 !important; font-size: 0.92rem; font-weight: 700; }

@media (max-width: 960px) {
  .wc-homepage__about,
  .wc-homepage__seo-layout,
  .wc-homepage__price-layout { grid-template-columns: 1fr; }

  .wc-homepage__hero {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding: 0;
  }

  .wc-homepage__visual {
    aspect-ratio: auto;
    height: clamp(340px, 62vw, 560px);
    inset: auto;
    margin-inline: 0;
    min-height: 0;
    order: -1;
    position: relative;
    width: auto;
  }

  .wc-homepage__hero-copy {
    margin-top: 0;
    max-width: none;
    width: 100%;
  }

  .wc-homepage__hero-image {
    object-position: center;
  }
  .wc-homepage__services,
  .wc-homepage__cms,
  .wc-homepage__projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-homepage__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wc-homepage__hero,
  .wc-homepage__section { padding-block: 4rem; }
  .wc-homepage__hero { padding: 0; }
  .wc-homepage__visual::after {
    background: linear-gradient(0deg, #f4eee5 0%, rgba(244, 238, 229, 0.75) 5%, transparent 30%);
  }
  .wc-homepage__about-portrait { aspect-ratio: auto; min-height: 300px; transform: none; }
  .wc-homepage__benefits,
  .wc-homepage__services,
  .wc-homepage__cms,
  .wc-homepage__projects,
  .wc-homepage__steps { grid-template-columns: 1fr; }
  .wc-homepage__benefits div + div { border-left: 0; border-top: 1px solid var(--wch-line); }
  .wc-homepage__price-cards article { align-items: flex-start; flex-direction: column; }
  .wc-homepage__cta { grid-template-columns: 1fr; }
  .wc-homepage__button--light { white-space: normal; }
}

@media (max-width: 520px) {
  .wc-homepage__actions .wc-homepage__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-homepage__button,
  .wc-homepage__services article { transition: none; }
}




/* Article Contact — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body:has(.wc-contact) .container-component,
body:has(.wc-contact) .container-component > main,
body:has(.wc-contact) .com-content-article,
body:has(.wc-contact) .com-content-article__body {
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

body:has(.wc-contact) .container-component > main > .com-content-article {
  margin-top: -1rem !important;
}

.wc-contact {
  --wcc-ink: #17243a;
  --wcc-muted: #6f6a63;
  --wcc-blue: #315f74;
  --wcc-blue-dark: #234857;
  --wcc-violet: #c45f49;
  --wcc-cyan: #477e7f;
  --wcc-surface: #f8f4ed;
  --wcc-line: rgba(23, 36, 58, 0.13);
  color: var(--wcc-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-contact *,
.wc-contact *::before,
.wc-contact *::after { box-sizing: border-box; }

.wc-contact h1,
.wc-contact h2,
.wc-contact h3,
.wc-contact p { margin-top: 0; }

.wc-contact h1,
.wc-contact h2,
.wc-contact h3 {
  color: var(--wcc-ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.wc-contact h1 { font-size: clamp(2.8rem, 5.8vw, 5.1rem); margin-bottom: 1.5rem; }
.wc-contact h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom: 1.25rem; }
.wc-contact h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 0.75rem; }

.wc-contact__hero,
.wc-contact__section {
  padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2));
}

.wc-contact__hero {
  align-items: center;
  background:
    radial-gradient(circle at 84% 20%, rgba(71, 126, 127, 0.2), transparent 27%),
    radial-gradient(circle at 68% 80%, rgba(196, 95, 73, 0.14), transparent 25%),
    linear-gradient(135deg, #fffdf9 0%, #f4eee5 55%, #fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 660px;
}

.wc-contact__eyebrow {
  color: var(--wcc-blue);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wc-contact__intro,
.wc-contact__heading > p:last-child {
  color: var(--wcc-muted);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  max-width: 760px;
}

.wc-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wc-contact__button {
  align-items: center;
  background: var(--wcc-blue);
  border: 2px solid var(--wcc-blue);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-contact__button:hover,
.wc-contact__button:focus-visible {
  background: var(--wcc-blue-dark);
  box-shadow: 0 12px 30px rgba(49, 95, 116, 0.25);
  transform: translateY(-2px);
}

.wc-contact__button--secondary { background: transparent; color: var(--wcc-ink) !important; }

.wc-contact__proofs {
  color: var(--wcc-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.wc-contact__proofs li::before {
  color: var(--wcc-blue);
  content: "✓";
  font-weight: 900;
  margin-right: 0.45rem;
}

.wc-contact__envelope {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.97);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(35, 72, 87, 0.18);
  overflow: hidden;
  transform: rotate(2deg);
}

.wc-contact__envelope-top {
  background: #fff;
  color: var(--wcc-muted);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 1rem 1.3rem;
}

.wc-contact__envelope-body {
  background:
    radial-gradient(circle at 88% 14%, rgba(71, 126, 127, 0.4), transparent 29%),
    linear-gradient(145deg, #17243a, #315f74);
  color: #fff;
  min-height: 380px;
  padding: clamp(2rem, 5vw, 3.5rem);
}

.wc-contact__envelope-body i {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  display: block;
  height: 8px;
  margin-bottom: 0.7rem;
  width: 82%;
}

.wc-contact__envelope-body i:nth-child(2) { width: 62%; }
.wc-contact__envelope-body i:nth-child(3) { width: 44%; }
.wc-contact__envelope-body strong { display: block; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.07; margin: 2rem 0; }
.wc-contact__envelope-body b { background: #fff; border-radius: 999px; color: var(--wcc-ink); display: inline-block; padding: 0.7rem 1rem; }

.wc-contact__heading { margin: 0 auto 3rem; max-width: 850px; text-align: center; }
.wc-contact__heading > p:last-child { margin-inline: auto; }

.wc-contact__channels {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-contact__channels article {
  background: #fff;
  border: 1px solid var(--wcc-line);
  border-radius: 22px;
  box-shadow: 0 14px 45px rgba(23, 36, 58, 0.06);
  padding: 1.7rem;
}

.wc-contact__channels article > span {
  align-items: center;
  background: #f1ebe2;
  border-radius: 14px;
  color: var(--wcc-blue);
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  margin-bottom: 1.2rem;
  width: 48px;
}

.wc-contact__channels p { color: var(--wcc-muted); }
.wc-contact__channels a { color: var(--wcc-blue) !important; font-weight: 800; overflow-wrap: anywhere; }
.wc-contact__section--tinted { background: var(--wcc-surface); }

.wc-contact__form-layout {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
  grid-template-columns: 0.78fr 1.22fr;
}

.wc-contact__form-copy > p { color: var(--wcc-muted); }

.wc-contact__details {
  border-bottom: 1px solid var(--wcc-line);
  border-top: 1px solid var(--wcc-line);
  margin: 2rem 0 1.4rem;
}

.wc-contact__details > div { padding: 1rem 0; }
.wc-contact__details > div + div { border-top: 1px solid var(--wcc-line); }
.wc-contact__details span { color: var(--wcc-muted); display: block; font-size: 0.78rem; font-weight: 800; margin-bottom: 0.2rem; text-transform: uppercase; }
.wc-contact__details a { color: var(--wcc-blue) !important; font-weight: 800; overflow-wrap: anywhere; }
.wc-contact__details strong { color: var(--wcc-ink); }
.wc-contact__privacy { font-size: 0.88rem; }

.wc-contact__form-box {
  background: #fff;
  border: 1px solid var(--wcc-line);
  border-radius: 26px;
  box-shadow: 0 22px 65px rgba(23, 36, 58, 0.09);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}

.wc-contact__form-heading { border-bottom: 1px solid var(--wcc-line); margin-bottom: 1.5rem; padding-bottom: 1.4rem; }
.wc-contact__form-heading span { color: var(--wcc-blue); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.wc-contact__form-heading h3 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); margin: 0.5rem 0 0; }

.wc-contact__module .control-group,
.wc-contact__module .form-group { margin-bottom: 1.15rem; }
.wc-contact__module label { color: var(--wcc-ink); display: block; font-weight: 800; margin-bottom: 0.4rem; }

.wc-contact__module input:not([type="checkbox"]):not([type="radio"]),
.wc-contact__module select,
.wc-contact__module textarea {
  background: #fffaf4;
  border: 1px solid #d8d0c5;
  border-radius: 10px;
  color: var(--wcc-ink);
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.wc-contact__module textarea { min-height: 150px; resize: vertical; }
.wc-contact__module input:focus,
.wc-contact__module select:focus,
.wc-contact__module textarea:focus { border-color: var(--wcc-blue); box-shadow: 0 0 0 3px rgba(49, 95, 116, 0.14); outline: 0; }

.wc-contact__module button,
.wc-contact__module input[type="submit"] {
  background: var(--wcc-blue);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 0.9rem 1.4rem;
}

.wc-contact__email-alternative {
  align-items: center;
  background: #f4eee5;
  border: 1px solid #ded6c9;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding: 1rem;
}

.wc-contact__email-alternative span { color: var(--wcc-muted); font-size: 0.9rem; }
.wc-contact__email-alternative a { color: var(--wcc-blue) !important; font-weight: 800; }

.wc-contact__topics {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wc-contact__topics article { border-top: 2px solid #d7cfc3; padding: 1.5rem 0.4rem 0; }
.wc-contact__topics span { color: var(--wcc-blue); display: block; font-size: 0.78rem; font-weight: 900; margin-bottom: 0.8rem; }
.wc-contact__topics p { color: var(--wcc-muted); margin-bottom: 0; }

.wc-contact__section--dark {
  background:
    radial-gradient(circle at 85% 20%, rgba(71, 126, 127, 0.22), transparent 24%),
    linear-gradient(135deg, #17243a, #294b58);
}

.wc-contact__split {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 0.82fr 1.18fr;
}

.wc-contact__section--dark h2 { color: #fff; }
.wc-contact__section--dark .wc-contact__eyebrow { color: #c7ded8; }
.wc-contact__section--dark .wc-contact__split > div > p:last-child { color: #e0e7e3; }
.wc-contact__checklist { list-style: none; margin: 0; padding: 0; }
.wc-contact__checklist li { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: flex; gap: 1.1rem; padding: 1rem 0; }
.wc-contact__checklist span { color: #c7ded8; font-size: 0.78rem; font-weight: 900; }
.wc-contact__checklist p { color: #fff; margin: 0; }

.wc-contact__section--cta {
  background:
    radial-gradient(circle at 82% 30%, rgba(71, 126, 127, 0.28), transparent 25%),
    linear-gradient(135deg, #17243a, #315f74);
}

.wc-contact__cta {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr auto;
}

.wc-contact__cta h2,
.wc-contact__cta p { color: #fff; }
.wc-contact__cta .wc-contact__eyebrow { color: #c7ded8; }
.wc-contact__cta > div > p:last-child { color: #e4ece9; margin-bottom: 0; max-width: 760px; }

.wc-contact__button--light {
  background: #fff;
  border-color: #fff;
  color: var(--wcc-ink) !important;
  white-space: nowrap;
}

.wc-contact__button--light:hover,
.wc-contact__button--light:focus-visible { background: #f1ebe2; border-color: #f1ebe2; }

@media (max-width: 960px) {
  .wc-contact__hero,
  .wc-contact__form-layout,
  .wc-contact__split { grid-template-columns: 1fr; }
  .wc-contact__channels { grid-template-columns: 1fr; }
  .wc-contact__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wc-contact__hero,
  .wc-contact__section { padding-block: 4rem; }
  .wc-contact__hero { min-height: auto; }
  .wc-contact__envelope { transform: none; }
  .wc-contact__topics { grid-template-columns: 1fr; }
  .wc-contact__cta { grid-template-columns: 1fr; }
  .wc-contact__button--light { white-space: normal; }
}

@media (max-width: 520px) {
  .wc-contact__actions .wc-contact__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-contact__button { transition: none; }
}

/* Supprime la bande blanche sous la page Contact */
body:has(.wc-contact) .com-content-article__body > .wc-contact + p,
body:has(.wc-contact) .com-content-article__body > .wc-contact + br,
body:has(.wc-contact) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.wc-contact) .site-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

body:has(.wc-contact) .container-footer {
  margin-top: -1rem !important;
}


/* FAQ : suppression de la bande blanche avant le footer */
body.itemid-107 .com-content-article__body > .wc-faq + p,
body.itemid-107 .com-content-article__body > .wc-faq + br,
body.itemid-107 .com-content-article__body > p:has(> br:only-child),
body:has(.wc-faq) .com-content-article__body > .wc-faq + p,
body:has(.wc-faq) .com-content-article__body > .wc-faq + br,
body:has(.wc-faq) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.itemid-107 .site-grid,
body:has(.wc-faq) .site-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

body.itemid-107 .container-footer,
body:has(.wc-faq) .container-footer {
  margin-top: -1rem !important;
}


/* Article Référencement naturel — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body:has(.wc-seo) .container-component,
body:has(.wc-seo) .container-component > main,
body:has(.wc-seo) .com-content-article,
body:has(.wc-seo) .com-content-article__body {
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

body:has(.wc-seo) .container-component > main > .com-content-article { margin-top: -1rem !important; }

body:has(.wc-seo) .com-content-article__body > .wc-seo + p,
body:has(.wc-seo) .com-content-article__body > .wc-seo + br,
body:has(.wc-seo) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.wc-seo) .site-grid { gap: 0 !important; margin-bottom: 0 !important; row-gap: 0 !important; }
body:has(.wc-seo) .container-footer { margin-top: -1rem !important; }

.wc-seo {
  --wcs-ink: #17243a;
  --wcs-muted: #6f6a63;
  --wcs-blue: #315f74;
  --wcs-blue-dark: #234857;
  --wcs-violet: #c45f49;
  --wcs-cyan: #477e7f;
  --wcs-surface: #f8f4ed;
  --wcs-line: rgba(23, 36, 58, 0.12);
  color: var(--wcs-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-seo *, .wc-seo *::before, .wc-seo *::after { box-sizing: border-box; }
.wc-seo h1, .wc-seo h2, .wc-seo h3, .wc-seo p { margin-top: 0; }
.wc-seo h1, .wc-seo h2, .wc-seo h3 { color: var(--wcs-ink); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }
.wc-seo h1 { font-size: clamp(2.7rem, 5.8vw, 5rem); margin-bottom: 1.5rem; }
.wc-seo h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom: 1.25rem; }
.wc-seo h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 0.75rem; }

.wc-seo__hero, .wc-seo__section { padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2)); }
.wc-seo__hero {
  align-items: center;
  background: radial-gradient(circle at 84% 22%, rgba(71, 126, 127,.2), transparent 27%), radial-gradient(circle at 68% 80%, rgba(196, 95, 73,.14), transparent 25%), linear-gradient(135deg,#fffdf9 0%,#f4eee5 55%,#fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr .92fr;
  min-height: 680px;
}
.wc-seo__eyebrow { color: var(--wcs-blue); font-size: .8rem; font-weight: 900; letter-spacing: .14em; margin-bottom: 1rem; text-transform: uppercase; }
.wc-seo__intro, .wc-seo__heading > p:last-child { color: var(--wcs-muted); font-size: clamp(1.08rem,2vw,1.25rem); max-width: 780px; }
.wc-seo__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.wc-seo__button { align-items: center; background: var(--wcs-blue); border: 2px solid var(--wcs-blue); border-radius: 999px; color: #fff !important; display: inline-flex; font-weight: 800; justify-content: center; padding: .9rem 1.4rem; text-decoration: none !important; transition: .2s ease; }
.wc-seo__button:hover, .wc-seo__button:focus-visible { background: var(--wcs-blue-dark); box-shadow: 0 12px 30px rgba(49, 95, 116,.25); transform: translateY(-2px); }
.wc-seo__button--secondary { background: transparent; color: var(--wcs-ink) !important; }
.wc-seo__proofs { color: var(--wcs-muted); display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.wc-seo__proofs li::before { color: var(--wcs-blue); content: "✓"; font-weight: 900; margin-right: .45rem; }

.wc-seo__search { background: rgba(255,255,255,.92); border-radius: 28px; box-shadow: 0 28px 80px rgba(35, 72, 87,.18); padding: 1.2rem; transform: rotate(2deg); }
.wc-seo__search-bar { align-items: center; border: 1px solid #e6ded2; border-radius: 999px; display: grid; gap: .8rem; grid-template-columns: 12px 1fr 28px; padding: .85rem 1rem; }
.wc-seo__search-bar span { background: var(--wcs-blue); border-radius: 50%; height: 11px; width: 11px; }
.wc-seo__search-bar b { color: var(--wcs-muted); font-size: .9rem; }
.wc-seo__search-bar i { background: #ece6dc; border-radius: 999px; height: 8px; }
.wc-seo__result { border-top: 1px solid var(--wcs-line); margin-top: 1rem; padding: 1rem .7rem .3rem; }
.wc-seo__result span { background: #e4ddd2; border-radius: 999px; display: block; height: 8px; margin-top: .55rem; width: 88%; }
.wc-seo__result span:last-child { width: 64%; }
.wc-seo__result--featured { background: var(--wcs-surface); border: 0; border-radius: 16px; margin-top: 1rem; padding: 1.3rem; }
.wc-seo__result small { color: #15803d; display: block; font-weight: 700; }
.wc-seo__result strong { color: var(--wcs-blue); display: block; font-size: 1.2rem; margin-top: .35rem; }

.wc-seo__heading { margin: 0 auto 3rem; max-width: 880px; text-align: center; }
.wc-seo__heading > p:last-child { margin-inline: auto; }
.wc-seo__pillars { display: grid; gap: 1.2rem; grid-template-columns: repeat(4,minmax(0,1fr)); }
.wc-seo__pillars section { border-top: 2px solid #d7cfc3; padding: 1.4rem .4rem 0; }
.wc-seo__pillars span { color: var(--wcs-blue); display: block; font-size: .8rem; font-weight: 900; margin-bottom: .7rem; }
.wc-seo__pillars p, .wc-seo__split p, .wc-seo__feature > div > p { color: var(--wcs-muted); }
.wc-seo__section--tinted { background: var(--wcs-surface); }
.wc-seo__split, .wc-seo__feature { align-items: center; display: grid; gap: clamp(3rem,7vw,7rem); grid-template-columns: 1fr .9fr; margin: 0 auto; max-width: 1160px; }

.wc-seo__intentions, .wc-seo__metrics { display: grid; gap: .8rem; }
.wc-seo__intentions div, .wc-seo__metrics div { background: #fff; border: 1px solid var(--wcs-line); border-radius: 16px; display: grid; gap: 1rem; grid-template-columns: .45fr 1fr; padding: 1.1rem 1.3rem; }
.wc-seo__intentions span { color: var(--wcs-blue); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wc-seo__content-plan { list-style: none; margin: 0; padding: 0; }
.wc-seo__content-plan li { align-items: start; border-bottom: 1px solid var(--wcs-line); display: grid; gap: 1rem; grid-template-columns: 46px 1fr; padding: 1rem 0; }
.wc-seo__content-plan li > span { align-items: center; background: #ebe5da; border-radius: 12px; color: var(--wcs-blue); display: flex; font-size: .75rem; font-weight: 900; height: 42px; justify-content: center; width: 42px; }
.wc-seo__content-plan p { color: var(--wcs-muted); margin-bottom: 0; }

.wc-seo__section--dark { background: radial-gradient(circle at 82% 20%,rgba(71, 126, 127,.22),transparent 25%),linear-gradient(135deg,#132833,#2b5261); color: #e7eeec; }
.wc-seo__section--dark h2, .wc-seo__section--dark strong { color: #fff; }
.wc-seo__section--dark p { color: #e7eeec; }
.wc-seo__section--dark .wc-seo__eyebrow { color: #c7ded8; }
.wc-seo__technical-list { list-style: none; margin: 0; padding: 0; }
.wc-seo__technical-list li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; display: grid; gap: 1rem; grid-template-columns: .4fr 1fr; margin-bottom: .7rem; padding: 1rem 1.2rem; }
.wc-seo__technical-list span { color: #e7eeec; }

.wc-seo__steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; }
.wc-seo__steps li { background: #fff; border: 1px solid var(--wcs-line); border-radius: 22px; box-shadow: 0 14px 45px rgba(23, 36, 58,.06); padding: 1.7rem; }
.wc-seo__steps li > span { color: var(--wcs-blue); display: block; font-size: .8rem; font-weight: 900; margin-bottom: 1.3rem; }
.wc-seo__steps p { color: var(--wcs-muted); margin-bottom: 0; }
.wc-seo__center-link { margin: 2rem 0 0; text-align: center; }
.wc-seo__center-link a { color: var(--wcs-blue); font-weight: 800; text-underline-offset: .22em; }
.wc-seo__center-link a::after { content: " →"; }
.wc-seo__metrics { grid-template-columns: 1fr 1fr; }
.wc-seo__metrics div { display: block; }
.wc-seo__metrics strong, .wc-seo__metrics span { display: block; }
.wc-seo__metrics span { color: var(--wcs-muted); font-size: .9rem; margin-top: .3rem; }

.wc-seo__faq { margin: 0 auto; max-width: 900px; }
.wc-seo__faq details { border-bottom: 1px solid var(--wcs-line); padding: 1.3rem 0; }
.wc-seo__faq summary { color: var(--wcs-ink); cursor: pointer; font-size: 1.08rem; font-weight: 800; padding-right: 2rem; }
.wc-seo__faq details p { color: var(--wcs-muted); margin: 1rem 0 0; max-width: 800px; }

.wc-seo__section--cta { padding-top: 0; }
.wc-seo__cta { align-items: center; background: radial-gradient(circle at 85% 20%,rgba(71, 126, 127,.35),transparent 28%),linear-gradient(135deg,#17243a,#315f74 74%); border-radius: 34px; color: #fff; display: flex; gap: 3rem; justify-content: space-between; margin: 0 auto; max-width: 1160px; padding: clamp(2.3rem,6vw,4.5rem); }
.wc-seo__cta h2, .wc-seo__cta p { color: #fff; }
.wc-seo__cta > div { max-width: 780px; }
.wc-seo__cta .wc-seo__eyebrow { color: #c7ded8; }
.wc-seo__button--light { background: #fff; border-color: #fff; color: var(--wcs-ink) !important; flex: 0 0 auto; }

@media (max-width: 960px) {
  .wc-seo__hero, .wc-seo__split, .wc-seo__feature { grid-template-columns: 1fr; }
  .wc-seo__pillars, .wc-seo__steps { grid-template-columns: 1fr 1fr; }
  .wc-seo__visual { max-width: 620px; }
  .wc-seo__cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .wc-seo__hero { min-height: auto; }
  .wc-seo__pillars, .wc-seo__steps, .wc-seo__metrics { grid-template-columns: 1fr; }
  .wc-seo__actions .wc-seo__button { width: 100%; }
  .wc-seo__intentions div, .wc-seo__technical-list li { grid-template-columns: 1fr; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-seo *, .wc-seo *::before, .wc-seo *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* Page Demander un devis : suppression de la bande blanche */
body:has(.wc-quote) .com-content-article__body > .wc-quote + p,
body:has(.wc-quote) .com-content-article__body > .wc-quote + br,
body:has(.wc-quote) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.wc-quote) .site-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

body:has(.wc-quote) .container-footer {
  margin-top: -1rem !important;
}


/* Page Tarifs : suppression de la bande blanche avant le footer */
body:has(.wc-pricing) .com-content-article__body > .wc-pricing + p,
body:has(.wc-pricing) .com-content-article__body > .wc-pricing + br,
body:has(.wc-pricing) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.wc-pricing) .site-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

body:has(.wc-pricing) .container-footer {
  margin-top: -1rem !important;
}


/* Article À propos — webcreations.fr
   À ajouter à media/templates/site/cassiopeia/css/user.css */

body:has(.wc-about) .container-component,
body:has(.wc-about) .container-component > main,
body:has(.wc-about) .com-content-article,
body:has(.wc-about) .com-content-article__body {
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

body:has(.wc-about) .container-component > main > .com-content-article { margin-top: -1rem !important; }
body:has(.wc-about) .com-content-article__body > .wc-about + p,
body:has(.wc-about) .com-content-article__body > .wc-about + br,
body:has(.wc-about) .com-content-article__body > p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:has(.wc-about) .site-grid { gap: 0 !important; margin-bottom: 0 !important; row-gap: 0 !important; }
body:has(.wc-about) .container-footer { margin-top: -1rem !important; }

.wc-about {
  --wca-ink: #17243a;
  --wca-muted: #6f6a63;
  --wca-blue: #315f74;
  --wca-blue-dark: #234857;
  --wca-violet: #c45f49;
  --wca-cyan: #477e7f;
  --wca-surface: #f8f4ed;
  --wca-line: rgba(23, 36, 58, 0.12);
  color: var(--wca-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.wc-about *, .wc-about *::before, .wc-about *::after { box-sizing: border-box; }
.wc-about h1, .wc-about h2, .wc-about h3, .wc-about p { margin-top: 0; }
.wc-about h1, .wc-about h2, .wc-about h3 { color: var(--wca-ink); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }
.wc-about h1 { font-size: clamp(2.7rem, 5.7vw, 4.9rem); margin-bottom: 1.5rem; }
.wc-about h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom: 1.25rem; }
.wc-about h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 0.75rem; }
.wc-about__hero, .wc-about__section { padding: clamp(4.5rem, 8vw, 7.5rem) max(1.25rem, calc((100vw - 1160px) / 2)); }

.wc-about__hero {
  align-items: center;
  background: radial-gradient(circle at 84% 20%, rgba(71, 126, 127,.2), transparent 27%), radial-gradient(circle at 68% 80%, rgba(196, 95, 73,.14), transparent 25%), linear-gradient(135deg,#fffdf9 0%,#f4eee5 55%,#fff 100%);
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 1.08fr .92fr;
  min-height: 680px;
}
.wc-about__eyebrow { color: var(--wca-blue); font-size: .8rem; font-weight: 900; letter-spacing: .14em; margin-bottom: 1rem; text-transform: uppercase; }
.wc-about__intro, .wc-about__heading > p:last-child { color: var(--wca-muted); font-size: clamp(1.08rem,2vw,1.25rem); max-width: 780px; }
.wc-about__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.wc-about__button { align-items: center; background: var(--wca-blue); border: 2px solid var(--wca-blue); border-radius: 999px; color: #fff !important; display: inline-flex; font-weight: 800; justify-content: center; padding: .9rem 1.4rem; text-decoration: none !important; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.wc-about__button:hover, .wc-about__button:focus-visible { background: var(--wca-blue-dark); box-shadow: 0 12px 30px rgba(49, 95, 116,.25); transform: translateY(-2px); }
.wc-about__button--secondary { background: transparent; color: var(--wca-ink) !important; }
.wc-about__proofs { color: var(--wca-muted); display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.wc-about__proofs li::before { color: var(--wca-blue); content: "✓"; font-weight: 900; margin-right: .45rem; }

.wc-about__identity { background: radial-gradient(circle at 80% 15%,rgba(71, 126, 127,.35),transparent 27%),linear-gradient(145deg,#17243a,#315f74); border-radius: 30px; box-shadow: 0 28px 80px rgba(35, 72, 87,.2); color: #fff; min-height: 460px; padding: clamp(2rem,5vw,3rem); transform: rotate(2deg); }
.wc-about__monogram { color: #fff; display: block; font-size: clamp(6rem,13vw,10rem); font-weight: 900; letter-spacing: -.08em; line-height: .9; }
.wc-about__identity small { color: #c7ded8; display: block; font-size: .75rem; font-weight: 900; letter-spacing: .1em; margin: 2rem 0 .7rem; text-transform: uppercase; }
.wc-about__identity strong { color: #fff; display: block; font-size: clamp(1.5rem,3vw,2.25rem); line-height: 1.15; }
.wc-about__identity ul { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.wc-about__identity li { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: .8rem; font-weight: 800; padding: .45rem .75rem; }

.wc-about__split, .wc-about__feature { align-items: center; display: grid; gap: clamp(3rem,7vw,7rem); grid-template-columns: .9fr 1.1fr; margin: 0 auto; max-width: 1160px; }
.wc-about__story p, .wc-about__feature > div > p, .wc-about__split > div > p { color: var(--wca-muted); }
.wc-about__lead { color: var(--wca-ink) !important; font-size: clamp(1.08rem,2vw,1.25rem); font-weight: 700; }
.wc-about__section--tinted { background: var(--wca-surface); }
.wc-about__heading { margin: 0 auto 3rem; max-width: 880px; text-align: center; }
.wc-about__heading > p:last-child { margin-inline: auto; }

.wc-about__projects { display: grid; gap: 1.3rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.wc-about__projects article, .wc-about__commitments article { background: #fff; border: 1px solid var(--wca-line); border-radius: 23px; box-shadow: 0 16px 48px rgba(23, 36, 58,.06); padding: 1.8rem; }
.wc-about__projects article > span, .wc-about__commitments article > span { color: var(--wca-blue); display: block; font-size: .76rem; font-weight: 900; letter-spacing: .08em; margin-bottom: .8rem; text-transform: uppercase; }
.wc-about__projects p, .wc-about__commitments p { color: var(--wca-muted); }
.wc-about__projects a, .wc-about__center-link a, .wc-about__text-link { color: var(--wca-blue) !important; font-weight: 800; text-underline-offset: .22em; }
.wc-about__projects a::after { content: " ↗"; }
.wc-about__center-link { margin: 2rem 0 0; text-align: center; }
.wc-about__center-link a::after, .wc-about__text-link::after { content: " →"; }

.wc-about__checkpoints { list-style: none; margin: 0; padding: 0; }
.wc-about__checkpoints li { align-items: start; border-bottom: 1px solid var(--wca-line); display: grid; gap: 1rem; grid-template-columns: 48px 1fr; padding: 1rem 0; }
.wc-about__checkpoints li > span { align-items: center; background: #ebe5da; border-radius: 12px; color: var(--wca-blue); display: flex; font-size: .75rem; font-weight: 900; height: 44px; justify-content: center; width: 44px; }
.wc-about__checkpoints p { color: var(--wca-muted); margin-bottom: 0; }

.wc-about__section--dark { background: radial-gradient(circle at 82% 20%,rgba(71, 126, 127,.22),transparent 25%),linear-gradient(135deg,#132833,#2b5261); color: #e7eeec; }
.wc-about__section--dark h2, .wc-about__section--dark strong { color: #fff; }
.wc-about__section--dark p { color: #e7eeec !important; }
.wc-about__section--dark .wc-about__eyebrow { color: #c7ded8; }
.wc-about__location-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 24px; padding: clamp(1.7rem,4vw,2.5rem); }
.wc-about__location-card span { color: #c7ded8; display: block; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.wc-about__location-card strong { display: block; font-size: clamp(1.3rem,2.5vw,1.8rem); margin: .35rem 0 1.2rem; }
.wc-about__location-card hr { border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: .3rem 0 1.3rem; }
.wc-about__location-card small { color: #e7eeec; display: block; margin-top: 1rem; }

.wc-about__commitments { display: grid; gap: 1.2rem; grid-template-columns: repeat(4,minmax(0,1fr)); }
.wc-about__skills { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.wc-about__skills li { background: #fff; border: 1px solid var(--wca-line); border-radius: 15px; display: grid; gap: 1rem; grid-template-columns: .38fr 1fr; padding: 1rem 1.2rem; }
.wc-about__skills strong { color: var(--wca-ink); }
.wc-about__skills span { color: var(--wca-muted); }

.wc-about__section--cta { padding-top: 0; }
.wc-about__cta { align-items: center; background: radial-gradient(circle at 85% 20%,rgba(71, 126, 127,.35),transparent 28%),linear-gradient(135deg,#17243a,#315f74 74%); border-radius: 34px; color: #fff; display: flex; gap: 3rem; justify-content: space-between; margin: 0 auto; max-width: 1160px; padding: clamp(2.3rem,6vw,4.5rem); }
.wc-about__cta h2, .wc-about__cta p { color: #fff; }
.wc-about__cta > div:first-child { max-width: 720px; }
.wc-about__cta .wc-about__eyebrow { color: #c7ded8; }
.wc-about__contact-actions { align-items: center; display: flex; flex: 0 0 auto; flex-direction: column; gap: .65rem; }
.wc-about__contact-actions > a:not(.wc-about__button) { color: #d6e7e2 !important; font-size: .9rem; font-weight: 800; text-underline-offset: .2em; }
.wc-about__button--light { background: #fff; border-color: #fff; color: var(--wca-ink) !important; }

@media (max-width: 960px) {
  .wc-about__hero, .wc-about__split, .wc-about__feature { grid-template-columns: 1fr; }
  .wc-about__projects, .wc-about__commitments { grid-template-columns: 1fr 1fr; }
  .wc-about__visual { max-width: 620px; }
  .wc-about__cta { align-items: flex-start; flex-direction: column; }
  .wc-about__contact-actions { align-items: flex-start; }
}

@media (max-width: 640px) {
  .wc-about__hero { min-height: auto; }
  .wc-about__identity { min-height: 380px; transform: none; }
  .wc-about__projects, .wc-about__commitments { grid-template-columns: 1fr; }
  .wc-about__actions .wc-about__button { width: 100%; }
  .wc-about__skills li { grid-template-columns: 1fr; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-about *, .wc-about *::before, .wc-about *::after { scroll-behavior: auto !important; transition: none !important; }
}



/* Menu principal étendu : évite le débordement horizontal */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Grands écrans : menu compact sur une seule ligne */
@media (min-width: 1281px) {
  .container-header {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    padding-inline: clamp(1rem, 2vw, 2.5rem);
  }

  .container-header .container-nav {
    justify-content: flex-end;
    min-width: 0;
  }

  .container-header .mod-menu {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-end;
  }

  .container-header .metismenu > li > a {
    font-size: clamp(0.88rem, 0.82vw, 1rem);
    padding: 0.7rem clamp(0.48rem, 0.72vw, 0.8rem);
    white-space: nowrap;
  }

  .container-header .metismenu > li:last-child > a {
    margin-left: 0.3rem;
    padding-inline: clamp(0.8rem, 1.1vw, 1.15rem);
  }
}

/* Tablettes et petits ordinateurs : menu sur deux lignes */
@media (min-width: 921px) and (max-width: 1280px) {
  .container-header {
    display: block;
    min-height: auto;
    padding-inline: 1rem;
  }

  .container-header .navbar-brand {
    justify-content: center;
    min-height: 64px;
  }

  .container-header .brand-logo img {
    height: auto;
    max-height: 46px;
    max-width: 230px;
  }

  .container-header .container-nav {
    justify-content: center;
    padding-bottom: 0.75rem !important;
    width: 100%;
  }

  .container-header .mod-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.15rem;
    justify-content: center;
    width: 100%;
  }

  .container-header .metismenu > li > a {
    font-size: 0.9rem;
    padding: 0.55rem 0.65rem;
    white-space: nowrap;
  }

  .container-header .metismenu > li:last-child > a {
    margin-left: 0.2rem;
    padding-inline: 1rem;
  }
}

/* Contraste des boutons secondaires sur fond sombre au survol */
.wc-btn--ghost:hover,
.wc-btn--ghost:focus-visible,
.wc-services__button--secondary:hover,
.wc-services__button--secondary:focus-visible,
.wc-expertises__button--secondary:hover,
.wc-expertises__button--secondary:focus-visible,
.wc-method__button--secondary:hover,
.wc-method__button--secondary:focus-visible,
.wc-work__button--secondary:hover,
.wc-work__button--secondary:focus-visible,
.wc-faq__button--secondary:hover,
.wc-faq__button--secondary:focus-visible,
.wc-pricing__button--secondary:hover,
.wc-pricing__button--secondary:focus-visible,
.wc-quote__button--secondary:hover,
.wc-quote__button--secondary:focus-visible,
.wc-homepage__button--secondary:hover,
.wc-homepage__button--secondary:focus-visible,
.wc-contact__button--secondary:hover,
.wc-contact__button--secondary:focus-visible,
.wc-seo__button--secondary:hover,
.wc-seo__button--secondary:focus-visible,
.wc-about__button--secondary:hover,
.wc-about__button--secondary:focus-visible {
  color: #fff !important;
}

/* Correctif final du menu smartphone — structure réelle Cassiopeia */
@media (max-width: 991.98px) {
  .container-header {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 50px !important;
    overflow: visible !important;
    padding: 0 1rem !important;
    position: relative !important;
  }

  .container-header > .grid-child:first-of-type {
    grid-column: 1 !important;
    min-width: 0;
  }

  .container-header .container-nav {
    display: block !important;
    grid-column: 2 !important;
    padding: 0 !important;
    position: static !important;
    width: 50px !important;
  }

  .container-header .container-nav > nav.navbar {
    display: block !important;
    position: static !important;
    width: 50px !important;
  }

  .container-header .navbar-toggler {
    display: flex !important;
    margin: 0 !important;
  }

  .container-header #navbar1.navbar-collapse {
    background: #fffdf9 !important;
    box-shadow: 0 18px 35px rgba(23, 36, 58, 0.16);
    box-sizing: border-box !important;
    left: 0 !important;
    max-height: calc(100vh - 74px);
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0.75rem 1rem 1rem !important;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    transform: none !important;
    width: 100% !important;
    z-index: 10000 !important;
  }

  .container-header #navbar1:not(.show) {
    display: none !important;
  }

  .container-header #navbar1.show,
  .container-header #navbar1.collapsing {
    display: block !important;
  }

  .container-header #navbar1 .mod-menu {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .container-header #navbar1 .metismenu-item,
  .container-header #navbar1 .metismenu-item > a {
    box-sizing: border-box !important;
    display: block !important;
    left: auto !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    position: static !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
  }
}

/* Rythme vertical homogène des liens d'action dans les articles */
[class^="wc-"] [class$="__center-link"],
[class^="wc-"] [class$="__projects-action"] {
  clear: both;
  display: block;
  margin: 0 !important;
  padding-top: clamp(2rem, 3vw, 3rem) !important;
  text-align: center;
}

[class^="wc-"] a[class$="__text-link"] {
  display: inline-block;
  margin-top: 0.9rem;
}

@media (max-width: 700px) {
  [class^="wc-"] [class$="__center-link"],
  [class^="wc-"] [class$="__projects-action"] {
    padding-top: 1.75rem !important;
  }
}