/* ==========================================================
   CREAWEB40 — feuille de style unique
   Deux thèmes pilotés par <html data-theme="...">
   - actuel : crème / orange / or (design d'origine)
   - vagues : bleu marine / turquoise / jaune + vagues sous le hero
   ========================================================== */

:root {
  --hero-bg: #F5EFE3;
  --hero-ink: #111111;
  --hero-muted: #665c65;
  --sec-bg: #f5ede0;
  --sec-ink: #111111;
  --sec-muted: rgba(17, 17, 17, .7);
  --alt-bg: #f5ede0;
  --dark-bg: #111111;
  --dark-ink: #FBF6EC;
  --accent: #d4543a;
  --accent-2: #e8b040;
  --btn-bg: #111111;
  --btn-ink: #FBF6EC;
  --card-1: #f0d0c0;
  --card-2: #e8b040;
  --card-3: #d4543a;
  --card-ink: #111111;
  --nav-bg: #111111;
  --nav-ink: #ffffff;
  --line: rgba(17, 17, 17, .3);
  --font-title: Georgia, "Times New Roman", serif;
  --title-weight: 900;
  --title-style: italic;
  --wave-display: none;
  --radius: 24px;
}

:root[data-theme="vagues"] {
  --hero-bg: #02435E;
  --hero-ink: #ffffff;
  --hero-muted: rgba(255, 255, 255, .78);
  --sec-bg: #FBF5DA;
  --sec-ink: #02435E;
  --sec-muted: rgba(2, 67, 94, .78);
  --alt-bg: #F6EFD4;
  --dark-bg: #012C3E;
  --dark-ink: #ffffff;
  --accent: #E97B5A;
  --accent-2: #E8DC74;
  --teal: #17A2AE;
  --yellow: #E8DC74;
  --coral: #E97B5A;
  --btn-bg: #E8DC74;
  --btn-ink: #02435E;
  --card-1: #ffffff;
  --card-2: #E8DC74;
  --card-3: #E97B5A;
  --card-ink: #02435E;
  --nav-bg: #02435E;
  --nav-ink: #ffffff;
  --line: rgba(2, 67, 94, .25);
  --font-title: "Inter", system-ui, sans-serif;
  --title-weight: 800;
  --title-style: normal;
  --wave-display: block;
  --radius: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--sec-bg);
  color: var(--sec-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.msym { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; }

/* ---------- Titres ---------- */
.title { font-family: var(--font-title); font-weight: var(--title-weight); line-height: 1.08; letter-spacing: -.01em; margin: 0; }
.title em { font-style: var(--title-style); color: var(--accent); }
:root[data-theme="vagues"] .title em { font-style: normal; background: var(--coral); color: #fff; padding: 0 .3em; border-radius: 999px; display: inline-block; }
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.kicker::before { content: ""; height: 1px; width: 32px; background: currentColor; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; font-weight: 600; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); background: var(--accent); color: #fff; }
.btn .arr { width: 28px; height: 28px; border-radius: 50%; background: var(--btn-ink); color: var(--btn-bg); display: grid; place-items: center; font-size: 14px; transition: transform .3s; }
.btn:hover .arr { transform: rotate(-45deg); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 600; transition: background .2s, color .2s; }
.btn-ghost:hover { background: var(--hero-ink); color: var(--hero-bg); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); color: var(--nav-ink); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.nav-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 72px; display: flex; align-items: center; justify-content: center; position: relative; }
.nav-links { display: none; align-items: center; gap: 40px; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nav-links a:hover { color: var(--accent-2); }
.nav-links.left { margin-right: 48px; }
.nav-links.right { margin-left: 48px; }
.logo { display: flex; flex-direction: column; align-items: center; padding: 10px 24px; position: relative; }
.logo::before, .logo::after { content: ""; width: 40px; height: 1px; background: var(--accent-2); }
.logo span { font-family: Georgia, serif; font-size: 26px; color: var(--accent-2); margin: 4px 0; line-height: 1; }
.burger { position: absolute; right: 16px; background: none; border: 0; color: inherit; cursor: pointer; padding: 8px; font-size: 32px; }
.mobile-menu { display: none; flex-direction: column; gap: 20px; padding: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 900px) { .nav-links { display: flex; } .burger { display: none; } .mobile-menu { display: none !important; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--hero-bg); color: var(--hero-ink); padding: 48px 0 40px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg i { position: absolute; border-radius: 50%; }
.hero-bg .b1 { top: -12%; left: -8%; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, #F5B13A, transparent 65%); opacity: .45; }
.hero-bg .b2 { top: 20%; right: -10%; width: 560px; height: 560px; background: radial-gradient(circle at 60% 40%, #F2C6B4, transparent 65%); opacity: .6; }
:root[data-theme="vagues"] .hero-bg .b1 { background: radial-gradient(circle at 30% 30%, #17A2AE, transparent 65%); opacity: .5; }
:root[data-theme="vagues"] .hero-bg .b2 { background: radial-gradient(circle at 60% 40%, #E8DC74, transparent 65%); opacity: .18; }
.hero-in { position: relative; display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
.hero h1 { margin: 0 0 16px; font-size: clamp(38px, 6vw, 68px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.hero h1 .brand { display: block; font-family: Georgia, serif; font-style: italic; letter-spacing: .08em; color: var(--accent-2); -webkit-text-stroke: 1.5px rgba(0,0,0,.3); font-size: clamp(38px, 6vw, 68px); }
:root[data-theme="vagues"] .hero h1 .brand { -webkit-text-stroke: 0; color: var(--yellow); text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero h1 .sub { display: block; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12; }
.hero h1 .sub em { font-style: normal; color: var(--accent); }
:root[data-theme="vagues"] .hero h1 .sub em { background: var(--accent-2); color: #02435E; padding: 0 .3em; border-radius: 999px; display: inline-block; }
.hero p.lead { font-size: clamp(18px, 2vw, 22px); color: var(--hero-muted); font-weight: 500; max-width: 560px; margin: 0 0 28px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .note { margin: 22px 0 0; font-size: 14px; opacity: .6; }
.hero .btn { background: var(--btn-bg); color: var(--btn-ink); }

.chips { display: none; position: relative; width: 420px; height: 380px; margin: 0 auto; }
.chip { position: absolute; animation: floatY var(--dur, 4s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.chip > div { width: 96px; padding: 14px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.14); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.chip > div:hover { transform: scale(1.08); }
.chip b { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; text-align: center; line-height: 1.2; }
.c-a { background: var(--card-3); color: #fff; }
.c-b { background: var(--dark-bg); color: var(--accent-2); }
.c-c { background: var(--card-1); color: var(--card-ink); }
.c-d { background: var(--card-2); color: var(--card-ink); }
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); } }
@media (min-width: 900px) { .hero { padding: 64px 0 72px; } .hero-in { grid-template-columns: 1.15fr 1fr; } .chips { display: block; } }

/* ---------- Vagues (thème vagues uniquement) ---------- */
.waves { display: var(--wave-display); position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
.waves svg { display: block; width: 100%; height: clamp(60px, 9vw, 130px); }
.waves .w1 { fill: rgba(23, 162, 174, .5); }
.waves .w2 { fill: rgba(233, 123, 90, .42); }
.waves .w3 { fill: var(--sec-bg); }
.hero.has-waves { padding-bottom: clamp(90px, 12vw, 170px); }

/* ---------- Sections ---------- */
.sec { padding: 72px 0; background: var(--sec-bg); color: var(--sec-ink); }
.sec.alt { background: var(--alt-bg); }
.sec h2 { font-size: clamp(32px, 4.6vw, 54px); }
.head { margin-bottom: 40px; }

/* Services */
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
.card { background: var(--card-1); color: var(--card-ink); border-radius: var(--radius); padding: 28px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s; }
.card:hover { transform: translateY(-8px); }
.card:nth-child(2) { background: var(--card-2); }
.card:nth-child(3) { background: var(--card-3); color: var(--card-ink); }
:root[data-theme="vagues"] .card:nth-child(3) { color: #fff; }
:root[data-theme="vagues"] .card:nth-child(1) { box-shadow: 0 10px 30px rgba(2,67,94,.1); }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.card .num { font-weight: 700; opacity: .4; }
.card .tag { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; opacity: .8; }
.card h3 { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 30px; line-height: 1.1; margin: 0 0 12px; }
.card p { margin: 0 0 20px; font-size: 14px; opacity: .78; }
.card .more { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (min-width: 800px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* Ticker */
.ticker { position: relative; overflow: hidden; background: var(--dark-bg); color: var(--dark-ink); padding: 22px 0; transform: rotate(-1deg) scale(1.05); margin: 12px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 24s linear infinite; }
.ticker-track span { display: inline-flex; align-items: center; gap: 20px; margin: 0 10px; font-family: Georgia, serif; font-style: italic; font-size: 30px; white-space: nowrap; }
.ticker-track span::after { content: "★"; font-style: normal; font-size: 18px; color: var(--accent); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* Réalisations */
.works { display: flex; flex-wrap: wrap; justify-content: center; gap: 64px 80px; }
.work { width: 100%; max-width: 300px; }
.work-in { border-radius: var(--radius); overflow: hidden; border: 8px solid var(--bg-c); background: var(--bg-c); box-shadow: 0 20px 40px rgba(0,0,0,.18); cursor: pointer; position: relative; transition: transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .6s; }
.work:nth-child(1) .work-in { transform: rotate(-4deg); }
.work:nth-child(2) .work-in { transform: rotate(1.5deg); }
.work:nth-child(3) .work-in { transform: rotate(4deg); }
.work-in:hover { box-shadow: 0 40px 60px -12px rgba(0,0,0,.28); }
.work:nth-child(1) .work-in:hover { transform: rotate(-4deg) translateY(-12px); }
.work:nth-child(2) .work-in:hover { transform: rotate(1.5deg) translateY(-12px); }
.work:nth-child(3) .work-in:hover { transform: rotate(4deg) translateY(-12px); }
.work-img { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.work-img img { width: 100%; height: 100%; object-fit: cover; }
.work-over { position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 90%, #000); opacity: 0; transition: opacity .25s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; }
.work-in:hover .work-over { opacity: 1; }
.work-over h4 { margin: 0 0 6px; font-size: 20px; }
.work-over small { opacity: .85; margin-bottom: 14px; }
.work-over em { background: #fff; color: var(--accent); font-style: normal; font-weight: 700; padding: 6px 16px; border-radius: 999px; font-size: 14px; }
.work-foot { padding: 12px; display: flex; justify-content: space-between; align-items: center; color: var(--card-ink); font-weight: 700; font-size: 14px; }
.work-foot span { font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; background: #fff; padding: 4px 12px; border-radius: 999px; border: 2px solid rgba(255,255,255,.5); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; padding: 16px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 84vh; max-width: min(1100px, 100%); border-radius: 16px; }
.lightbox button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); color: #fff; font-size: 22px; cursor: pointer; }

/* Process */
.process { text-align: center; }
.process .kicker { justify-content: center; color: var(--accent); }
.process .kicker::after { content: ""; height: 1px; width: 32px; background: currentColor; }
.steps { position: relative; display: grid; gap: 40px; grid-template-columns: 1fr; margin-top: 56px; }
.steps svg { display: none; position: absolute; top: 10px; left: 14%; width: 72%; height: 90px; z-index: 0; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.step .bubble { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--sec-ink); background: #fff; display: grid; place-items: center; margin-bottom: 18px; font-family: Georgia, serif; font-style: italic; font-weight: 900; font-size: 48px; color: var(--sec-ink); }
.step small { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.step h3 { margin: 0 0 8px; font-size: 22px; }
.step p { margin: 0; max-width: 300px; color: var(--sec-muted); }
.process .cta { margin-top: 48px; }
.process .cta p { margin: 14px 0 0; font-size: 14px; opacity: .65; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps svg { display: block; } }

/* Tarifs */
.pricing { background: var(--dark-bg); color: var(--dark-ink); }
.pricing .kicker { color: var(--accent-2); }
.plans { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 40px; }
.plan { position: relative; border-radius: var(--radius); padding: 36px; background: var(--card-1); color: var(--card-ink); }
.plan.dark { background: transparent; color: var(--dark-ink); border: 1.5px solid rgba(255,255,255,.35); }
.plan .pop { position: absolute; top: -14px; right: 32px; background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.plan small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .7; }
.plan h3 { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 34px; margin: 8px 0 4px; }
.price { font-size: 72px; font-weight: 900; line-height: 1; margin: 14px 0 4px; }
.price sup { font-size: 30px; vertical-align: top; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.plan li::before { content: "✓"; margin-right: 10px; color: var(--accent); font-weight: 800; }
.plan.dark li::before { color: var(--accent-2); }
.plan .btn, .plan .btn-ghost { margin-top: 32px; }
.plan .btn-ghost:hover { background: var(--dark-ink); color: var(--dark-bg); }
.pricing .foot { text-align: center; margin: 32px 0 0; font-size: 14px; opacity: .7; }
@media (min-width: 800px) { .plans { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }

/* FAQ */
.faq { display: grid; gap: 40px; }
.faq-list { display: grid; gap: 12px; }
.qa { border-bottom: 1.5px solid var(--line); }
.qa button { width: 100%; text-align: left; background: none; border: 0; font: inherit; font-weight: 700; font-size: 18px; color: inherit; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; cursor: pointer; }
.qa button::after { content: "+"; font-size: 26px; line-height: 1; color: var(--accent); transition: transform .3s; }
.qa.open button::after { transform: rotate(45deg); }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa.open .ans { grid-template-rows: 1fr; }
.qa .ans div { overflow: hidden; }
.qa .ans p { margin: 0 0 20px; color: var(--sec-muted); }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1.4fr; } }

/* Contact */
.contact { background: var(--alt-bg); }
.contact-grid { display: grid; gap: 32px; }
.form { display: grid; gap: 22px; }
.form label { display: grid; gap: 6px; font-family: monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.form input, .form textarea { background: transparent; border: 0; border-bottom: 1.5px solid var(--sec-ink); padding: 10px 0; font: inherit; font-size: 16px; color: var(--sec-ink); outline: none; width: 100%; }
.form input:focus, .form textarea:focus { border-color: var(--accent); }
.form .two { display: grid; gap: 22px; }
.ok { display: none; text-align: center; padding: 32px; }
.side { background: var(--dark-bg); color: var(--dark-ink); border-radius: var(--radius); padding: 32px; }
.side small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.side h3 { margin: 8px 0; font-size: 26px; }
.side p { opacity: .8; }
.side .btn-ghost { justify-content: center; width: 100%; margin: 16px 0; border-color: var(--dark-ink); }
.side .btn-ghost:hover { background: var(--dark-ink); color: var(--dark-bg); }
.side .stats { display: flex; gap: 32px; margin-top: 8px; }
.side .stats b { display: block; font-size: 22px; color: var(--accent-2); }
@media (min-width: 640px) { .form .two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* Footer */
.footer { background: var(--dark-bg); color: var(--dark-ink); padding: 56px 0 24px; position: relative; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
.footer h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; opacity: .85; }
.footer ul a:hover { color: var(--accent-2); }
.footer p { font-size: 14px; opacity: .75; max-width: 320px; }
.footer .bar { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 13px; opacity: .65; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

/* Apparition */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* ==========================================================
   THÈME VAGUES — vagues entre toutes les sections, fonds qui alternent
   ========================================================== */
:root[data-theme="vagues"] {
  --wave-h: clamp(50px, 7vw, 100px);
  --wave-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 62c210 44 400-40 640-12s390 64 560 30c92-18 170-40 240-60v100H0Z'/%3E%3C/svg%3E");
  --wave-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40c190-36 380 44 620 22s400-62 580-34c90 14 170 40 240 62v30H0Z'/%3E%3C/svg%3E");
}
:root[data-theme="vagues"] .sec { position: relative; padding-bottom: calc(72px + var(--wave-h)); }
:root[data-theme="vagues"] .sec::before,
:root[data-theme="vagues"] .sec::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--wave-h); pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
:root[data-theme="vagues"] .sec::before { -webkit-mask-image: var(--wave-soft); mask-image: var(--wave-soft); background: var(--wave-tint, rgba(23,162,174,.35)); transform: translateY(-14%); }
:root[data-theme="vagues"] .sec::after { -webkit-mask-image: var(--wave-solid); mask-image: var(--wave-solid); background: var(--next-bg); }
:root[data-theme="vagues"] .sec > .wrap { position: relative; z-index: 1; }

/* Enchaînement des fonds : crème > jaune > crème > marine > crème > jaune > marine */
:root[data-theme="vagues"] #services  { background: #FBF5DA; --next-bg: #E8DC74; --wave-tint: rgba(233,123,90,.40); }
:root[data-theme="vagues"] #portfolio { background: #E8DC74; --next-bg: #F6EFD4; --wave-tint: rgba(23,162,174,.40); }
:root[data-theme="vagues"] #process   { background: #F6EFD4; --next-bg: #012C3E; --wave-tint: rgba(233,123,90,.40); }
:root[data-theme="vagues"] #tarifs    { background: #012C3E; --next-bg: #FBF5DA; --wave-tint: rgba(23,162,174,.45); color: #fff; }
:root[data-theme="vagues"] #faq       { background: #FBF5DA; --next-bg: #E8DC74; --wave-tint: rgba(233,123,90,.40); }
:root[data-theme="vagues"] #contact   { background: #E8DC74; --next-bg: #012C3E; --wave-tint: rgba(23,162,174,.40); }

/* Bandeau : orange corail, posé en haut de la section réalisations */
:root[data-theme="vagues"] .ticker { background: var(--coral); color: #02435E; }
:root[data-theme="vagues"] .ticker-track span::after { color: #02435E; }
:root[data-theme="vagues"] .ticker { position: relative; z-index: 3; margin: -34px 0 -34px; box-shadow: 0 8px 24px rgba(2,67,94,.18); }

/* Réalisations sur fond jaune : cartes blanche / corail / turquoise */
:root[data-theme="vagues"] #portfolio .work:nth-child(1) .work-in { --bg-c: #ffffff; }
:root[data-theme="vagues"] #portfolio .work:nth-child(2) .work-in { --bg-c: #E97B5A; }
:root[data-theme="vagues"] #portfolio .work:nth-child(3) .work-in { --bg-c: #17A2AE; }
:root[data-theme="vagues"] .work-over { background: rgba(2,67,94,.9); }
:root[data-theme="vagues"] .work-over em { color: #02435E; }

/* Étapes 1-2-3 : pastilles colorées */
:root[data-theme="vagues"] .step .bubble { border: 0; font-family: "Inter", sans-serif; font-style: normal; font-weight: 800; box-shadow: 0 10px 24px rgba(2,67,94,.18); }
:root[data-theme="vagues"] .step:nth-of-type(1) .bubble { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .step:nth-of-type(2) .bubble { background: var(--teal); color: #fff; }
:root[data-theme="vagues"] .step:nth-of-type(3) .bubble { background: var(--yellow); color: #02435E; }
:root[data-theme="vagues"] .step small { color: var(--coral); opacity: 1; }

/* Détails corail */
:root[data-theme="vagues"] .kicker { color: var(--coral); }
:root[data-theme="vagues"] .pricing .kicker { color: var(--yellow); }
:root[data-theme="vagues"] .btn:hover { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .card:nth-child(3) .tag { color: #fff; }
:root[data-theme="vagues"] .plan .pop { background: var(--coral); }
:root[data-theme="vagues"] .side { background: #02435E; }

/* Vagues PARALLÈLES entre sections (sauf contact > pied de page, qui garde ses vagues croisées).
   Pour revenir aux vagues croisées : retirer data-waves="paralleles" de la balise <html> dans index.html. */
:root[data-theme="vagues"][data-waves] {
  --wave-gap: .26; /* épaisseur de la bande : plus petit = plus fin */
}
:root[data-theme="vagues"][data-waves] .sec:not(#contact)::before {
  transform: none;
  height: calc(var(--wave-h) * (1 + var(--wave-gap)));
  -webkit-mask-image: var(--wave-solid), linear-gradient(#000, #000);
  mask-image: var(--wave-solid), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--wave-h), 100% calc(var(--wave-h) * (var(--wave-gap) + .1));
  mask-size: 100% var(--wave-h), 100% calc(var(--wave-h) * (var(--wave-gap) + .1));
  -webkit-mask-position: 0 0, 0 100%;
  mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Mode « selection » : une seule vague au milieu de la page (tarifs > FAQ), les autres transitions sont des coupes droites.
   Pour revenir à toutes les vagues parallèles : data-waves="paralleles" dans la balise <html> de index.html. */
:root[data-theme="vagues"][data-waves="selection"] .sec:not(#tarifs):not(#contact)::before,
:root[data-theme="vagues"][data-waves="selection"] .sec:not(#tarifs):not(#contact)::after { display: none; }
:root[data-theme="vagues"][data-waves="selection"] .sec:not(#tarifs):not(#contact) { padding-bottom: 72px; }

/* Hero : texte plus aéré (espacements entre titre, accroche, texte et boutons) */
.hero h1 { margin: 0 0 32px; line-height: 1.15; }
.hero h1 .brand { margin-bottom: 22px; line-height: 1.1; }
.hero h1 .sub { line-height: 1.3; }
:root[data-theme="vagues"] .hero h1 .sub em { margin-top: 6px; line-height: 1.2; }
.hero p.lead { line-height: 1.65; margin: 0 0 40px; }
.hero .cta { gap: 18px; }
.hero .note { margin: 32px 0 0; }

/* Hero : hauteur réduite (espacements resserrés à mi-chemin, moins de vide sous le texte) */
.hero h1 { margin: 0 0 22px; line-height: 1.12; }
.hero h1 .brand { margin-bottom: 12px; }
.hero h1 .sub { line-height: 1.22; }
.hero p.lead { line-height: 1.55; margin: 0 0 28px; }
.hero .note { margin: 22px 0 0; }
.hero { padding-top: 36px; }
.hero.has-waves { padding-bottom: clamp(70px, 8vw, 110px); }
@media (min-width: 900px) { .hero { padding-top: 44px; } }

/* Hero : « premium » en orange corail, sans fond */
:root[data-theme="vagues"] .hero h1 .sub em { background: none; color: var(--coral); padding: 0; border-radius: 0; display: inline; margin-top: 0; line-height: inherit; }

/* Hero : bouton « Démarrer mon projet » plus bas, un peu plus d'air au-dessus */
.hero .btn { padding: 11px 22px; font-size: 15px; }
.hero .btn .arr { width: 24px; height: 24px; font-size: 13px; }
.hero p.lead { margin-bottom: 34px; }

/* Ajustement : l'espace supplémentaire va SOUS le bouton (et non au-dessus) */
.hero p.lead { margin-bottom: 28px; }
.hero .cta { margin-bottom: 22px; }

/* Hero : quadrillage de petits points (repris du site d'origine, sans le grain) */
:root { --dot: rgba(21, 18, 16, .18); }
:root[data-theme="vagues"] { --dot: rgba(255, 255, 255, .17); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%);
  opacity: .8;
}
.hero-in { z-index: 2; }
:root[data-theme="vagues"] { --dot: rgba(255, 255, 255, .34); }
:root[data-theme="vagues"] { --dot: rgba(255, 255, 255, .26); }

/* Cartes métiers du hero : plus lisibles (mouvement conservé).
   Pour revenir à l'ancienne taille : retirer data-chips="lisibles" de la balise <html> dans index.html. */
:root[data-chips="lisibles"] .chips { width: 470px; height: 410px; }
:root[data-chips="lisibles"] .chip > div { width: 122px; padding: 16px 10px; gap: 10px; border-radius: 18px; }
:root[data-chips="lisibles"] .chip .msym { font-size: 34px; }
:root[data-chips="lisibles"] .chip b { font-size: 13px; font-weight: 800; letter-spacing: .03em; line-height: 1.15; }

/* Cartes métiers : un peu plus petites et plus espacées (remplace le réglage précédent quand data-chips="lisibles") */
:root[data-chips="lisibles"] .chips { width: 450px; height: 390px; }
:root[data-chips="lisibles"] .chip > div { width: 108px; padding: 14px 8px; gap: 8px; border-radius: 16px; }
:root[data-chips="lisibles"] .chip .msym { font-size: 28px; }
:root[data-chips="lisibles"] .chip b { font-size: 12px; letter-spacing: .03em; }
:root[data-chips="lisibles"] .chip:nth-child(1) { left: 0    !important; top: 6px   !important; }
:root[data-chips="lisibles"] .chip:nth-child(2) { left: 170px !important; top: 0    !important; }
:root[data-chips="lisibles"] .chip:nth-child(3) { left: 340px !important; top: 16px  !important; }
:root[data-chips="lisibles"] .chip:nth-child(4) { left: 82px  !important; top: 138px !important; }
:root[data-chips="lisibles"] .chip:nth-child(5) { left: 258px !important; top: 128px !important; }
:root[data-chips="lisibles"] .chip:nth-child(6) { left: 0    !important; top: 270px !important; }
:root[data-chips="lisibles"] .chip:nth-child(7) { left: 170px !important; top: 282px !important; }
:root[data-chips="lisibles"] .chip:nth-child(8) { left: 340px !important; top: 264px !important; }

/* Bandeau défilant : bleu marine (l'orange faisait doublon avec la carte du dessus) */
:root[data-theme="vagues"] .ticker { background: #02435E; color: #ffffff; }
:root[data-theme="vagues"] .ticker-track span::after { color: #E8DC74; }

/* Hero : un peu plus d'air en haut et en bas */
.hero { padding-top: 56px; }
.hero.has-waves { padding-bottom: calc(clamp(70px, 8vw, 110px) + 16px); }
@media (min-width: 900px) { .hero { padding-top: 64px; } }

/* Réalisations sur fond jaune : la carte du milieu passe en turquoise (le jaune sur jaune ne se voyait pas) */
:root[data-theme="vagues"] #portfolio .work:nth-child(2) .work-in { --bg-c: #17A2AE !important; }

/* Réalisations : les cartes sont des liens vers les vrais sites en ligne */
a.work-in { display: block; color: inherit; }

/* Pop-up des réalisations : légende avec bouton vers le vrai site */
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; color: #fff; font-weight: 700; }
.lb-visit { background: #E8DC74; color: #02435E; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.lb-visit:hover { background: #E97B5A; color: #fff; }
.lightbox img { max-height: 76vh; }

/* Réalisations : 1re carte en bleu marine (le blanc se confondait avec la capture du site) */
:root[data-theme="vagues"] #portfolio .work:nth-child(1) .work-in { --bg-c: #02435E !important; }
:root[data-theme="vagues"] #portfolio .work:nth-child(1) .work-foot { color: #ffffff; }
:root[data-theme="vagues"] #portfolio .work:nth-child(1) .work-foot b { color: #ffffff; }
:root[data-theme="vagues"] #portfolio .work:nth-child(1) .work-foot span { color: #02435E; }

/* ==========================================================
   MON DESIGN : correction des couleurs pour coller à l'original
   (pied de page crème, section contact orange)
   ========================================================== */

/* ==========================================================
   MÉLANGE : design d'origine (crème, noir, or, orange, serif italique)
   + vague sous le hero, quadrillage, cartes lisibles, vague avant le pied de page
   ========================================================== */

/* Vagues du mélange : sous le hero (ci-dessus), fin des tarifs, fin de la section contact */

/* ==========================================================
   MON DESIGN / MÉLANGE : fidélité à l'original (étapes, titre des tarifs, carte Site Vitrine)
   ========================================================== */
/* Étapes : 1 blanche, 2 or, 3 orange (bordure noire, comme l'original) */

/* Tarifs : titre blanc + « pas de frais cachés » en or italique, carte principale crème */

/* Boutons : survol identique à l'original (fond orange, texte crème, flèche qui tourne et devient jaune) */

/* ==========================================================
   FIDÉLITÉ À L'ORIGINAL — polices, FAQ, contact, pied de page
   (Mon design + Mélange)
   ========================================================== */

/* Cartes du hero, bandeau, survol des réalisations */

/* FAQ : titre sans surlignage, boutons ronds + / −, réponse avec filet orange */

@media (min-width: 900px) {
  
  .faq > div:first-child { position: sticky; top: 112px; align-self: start; }
}

/* Contact : titre d'origine (poids normal, grand, sur 2 lignes) */

/* Contact : colonne de droite = carte sombre (avec pastille) + carte or séparée */
.side-wrap { display: grid; gap: 20px; }
.side { position: relative; }
.side small { font-family: monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .6; }

.badge-express { position: absolute; top: -32px; right: -8px; z-index: 40; width: 96px; height: 96px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #f0d0c0; color: #c0401e; border: 4px solid rgba(255,255,255,.4); box-shadow: 0 20px 40px rgba(0,0,0,.3); transform: rotate(12deg); transition: transform .5s; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; }
.badge-express .msym { font-size: 20px; }
.badge-express:hover { transform: rotate(0) scale(1.1); }
@media (min-width: 900px) { .badge-express { right: -28px; } }
:root[data-theme="vagues"] .badge-express { background: var(--yellow); color: #02435E; }
.side-wrap > .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--card-2); color: var(--card-ink); border-radius: var(--radius); padding: 28px; margin: 0; }
.side-wrap > .stats small { display: block; opacity: .7; margin-bottom: 4px; color: inherit; }
.side-wrap > .stats b { display: block; font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.1; color: inherit; }
.side-wrap > .stats div:nth-child(2) b { font-size: 24px; margin-top: 8px; }

/* Pied de page : marque, réseaux, icônes de contact, pastille animée */
.f-name { display: block; font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.f-brand p { margin: 0 0 24px; }
.f-social { display: flex; gap: 16px; }
.f-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: all .2s; }
.f-social a:hover { background: var(--accent-2); color: #111; }
.f-social .msym { font-size: 18px; }
.f-contact { display: grid; gap: 20px; font-size: 14px; }
.f-line { display: flex; gap: 12px; align-items: flex-start; }
.f-line .msym { color: var(--accent-2); font-size: 18px; margin-top: 2px; }
.f-line small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .5; margin-bottom: 2px; }
.f-line a { font-weight: 700; }
.footer .bar { align-items: center; }
.f-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.f-right .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 50% { opacity: .35; } }

/* Mélange : la vague avant le pied de page a des courbes croisées (comme celle sous le hero).
   Seule la vague des tarifs reste parallèle. */

/* Nouveau + vagues : derniers mots des titres en couleur, sans fond.
   Orange corail adapté au fond : plus soutenu sur crème et jaune pour rester lisible. */
:root[data-theme="vagues"] .title em { background: none; color: #D9603F; padding: 0; border-radius: 0; display: inline; }
:root[data-theme="vagues"] #tarifs .title em { color: #E97B5A; }
:root[data-theme="vagues"] #portfolio .title em, :root[data-theme="vagues"] #contact .title em { color: #C0401E; }

/* ==========================================================
   ALLÉGÉ — design « Nouveau + vagues » avec des fonds plus calmes.
   Inchangés : menu du haut, hero (marine) et pied de page (marine foncé).
   Changés : les sections jaunes passent en crème ; deux tons de crème alternent
   pour garder une séparation nette entre les sections.
   ========================================================== */
:root[data-theme="vagues"][data-palette="allege"] #portfolio { background: #F6EFD4; --next-bg: #FBF5DA; }
:root[data-theme="vagues"][data-palette="allege"] #process   { background: #FBF5DA; }
:root[data-theme="vagues"][data-palette="allege"] #contact   { background: #F6EFD4; }
/* Titres : sur crème, le corail soutenu suffit (plus besoin du brique prévu pour le jaune) */
:root[data-theme="vagues"][data-palette="allege"] #portfolio .title em,
:root[data-theme="vagues"][data-palette="allege"] #contact .title em { color: #D9603F; }

/* ==========================================================
   ALLÉGÉ — essais de séparation entre les sections beiges
   Paires concernées : réalisations | comment ça marche, et FAQ | contact.
   Choix via l'attribut data-sep de la balise <html> :
   sable, sable-filet (par défaut), blanc
   ========================================================== */
:root[data-palette="allege"] .sep-switch { display: flex; }

/* 1) Sable : un beige nettement plus foncé pour réalisations et contact */
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable"] #portfolio,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable"] #contact,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] #portfolio,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] #contact { background: #EBDDA8; }
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable"] #portfolio .title em,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable"] #contact .title em,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] #portfolio .title em,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] #contact .title em { color: #C0401E; }
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable"] .side-wrap > .stats,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] .side-wrap > .stats { background: #ffffff; }

/* 2) Filet : une ligne fine en haut de la 2e section de chaque paire (avec le sable) */
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] #process,
:root[data-theme="vagues"][data-palette="allege"][data-sep="sable-filet"] #contact { border-top: 1px solid rgba(2, 67, 94, .22); box-shadow: inset 0 14px 18px -18px rgba(2, 67, 94, .35); }

/* 3) Blanc : « comment ça marche » et FAQ en blanc */
:root[data-theme="vagues"][data-palette="allege"][data-sep="blanc"] #process,
:root[data-theme="vagues"][data-palette="allege"][data-sep="blanc"] #faq { background: #ffffff; }
:root[data-theme="vagues"][data-palette="allege"][data-sep="blanc"] #tarifs { --next-bg: #ffffff; }

/* ==========================================================
   ALLÉGÉ 2 — comme « Allégé », mais avec le fond de « Mon design » (#f5ede0)
   pour les sections réalisations, comment ça marche et FAQ.
   (Le contact garde le beige d'Allégé pour l'instant, à revoir.)
   ========================================================== */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #portfolio,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #process,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq { background: #f5ede0; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #tarifs { --next-bg: #f5ede0; }
/* Contact : on repart du beige clair d'Allégé, sans les réglages de séparation */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #contact { background: #F6EFD4; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #process,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #contact { border-top: 0; box-shadow: none; }
/* Titres : le corail doux suffit sur ces beiges clairs */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #portfolio .title em,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #contact .title em { color: #D9603F; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .side-wrap > .stats { background: var(--card-2); }

/* Menu : petite pointe sous le logo (site d'origine, écrans d'ordinateur seulement).
   Elle est accrochée au logo, donc toujours centrée dessus, et prend la couleur du menu. */
.logo { align-self: stretch; justify-content: center; }
.logo .tip { display: none; }
@media (min-width: 900px) {
  .logo .tip {
    display: block; position: absolute; left: 50%; bottom: -10px; width: 60px; height: 10px;
    transform: translateX(-50%); background: var(--nav-bg); pointer-events: none;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}

/* Menu (ordinateur) : logo exactement au centre de la page.
   Deux colonnes égales de part et d'autre : les liens de gauche collés au logo côté droit,
   ceux de droite collés au logo côté gauche, avec le même espace (48 px) des deux côtés. */
@media (min-width: 900px) {
  .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-links.left { justify-content: flex-end; margin-right: 0; padding-right: 48px; }
  .nav-links.right { justify-content: flex-start; margin-left: 0; padding-left: 48px; }
}

/* ==========================================================
   ALLÉGÉ 2 — couleur retenue à la place du jaune : l'or (#E8B040), celui du logo d'origine
      Le jaune passe par quelques variables : boutons, nom CREAWEB40, logo, cartes,
   étoiles du bandeau, pastilles, titres du pied de page, bouton « Visiter le site ».
   ========================================================== */

:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] {
  --yellow: #E8B040; --accent-2: #E8B040; --btn-bg: #E8B040; --card-2: #E8B040;
}
/* Endroits où le jaune était écrit en dur */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .ticker-track span::after,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .lb-visit { color: #E8B040; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .lb-visit { background: #E8B040; color: #02435E; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .hero-bg .b2 { background: radial-gradient(circle at 60% 40%, #E8B040, transparent 65%); }

/* Mélange : même quadrillage de points que le hero, en fond du pied de page */

/* ==========================================================
   ALLÉGÉ 2 — choix retenus pour la fin de page :
   - fond du contact = beige d'origine (#f5ede0)
   - séparation FAQ / contact = vague à la fin de la FAQ
   ========================================================== */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #contact { background: #f5ede0; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq::before,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq::after { display: block !important; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq { padding-bottom: calc(72px + var(--wave-h)) !important; --next-bg: #f5ede0; }

/* Mes expertises : titre et texte alignés d'une carte à l'autre.
   Le titre démarre à la même hauteur dans les trois cartes (quelle que soit la longueur du texte),
   et le lien « En savoir plus » reste calé en bas. */
.card { justify-content: flex-start; }
.card .top { margin-bottom: 72px; }
.card > div:last-child { display: flex; flex-direction: column; flex: 1; }
.card .more { margin-top: auto; align-self: flex-start; }

/* ==========================================================
   ALLÉGÉ 2 — mêmes polices que « Mélange » / le design d'origine
   Georgia (titres, cartes, tarifs, contact), Manrope (hero, « Comment ça marche », questions FAQ),
   Cinzel (nom CREAWEB40), Inter (texte courant).
   ========================================================== */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] {
  --font-title: Georgia, "Times New Roman", serif;
  --title-weight: 900;
  --title-style: italic;
}
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .title em { font-style: italic; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .hero h1 { font-family: "Manrope", "Inter", sans-serif; font-weight: 800; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .hero h1 .brand { font-family: "Cinzel", Georgia, serif; font-style: italic; font-weight: 700; letter-spacing: .08em; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .process .title { font-family: "Manrope", "Inter", sans-serif; font-weight: 900; font-size: clamp(38px, 6vw, 60px); }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .process .title em { font-family: Georgia, serif; font-style: italic; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .step h3 { font-family: "Manrope", "Inter", sans-serif; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .qa button { font-family: "Manrope", "Inter", sans-serif; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq .title em { font-style: normal; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .pricing .title { font-weight: 700; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #contact .title { font-weight: 400; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .side h3 { font-family: Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.2; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .qa .ans p { font-size: 14px; line-height: 1.65; }

/* Mélange : hero en beige-sable un peu plus foncé, pour qu'il ressorte de la section suivante */

/* Mélange : le pied de page reprend le sable du hero (la page est « encadrée » par la même teinte),
   et la vague de fin de la section contact se raccorde à cette couleur. */

/* ==========================================================
   ALLÉGÉ 2 — même orange que « Mélange » (#d4543a), un peu plus foncé que le corail d'avant
   ========================================================== */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] { --coral: #d4543a; --accent: #d4543a; --card-3: #d4543a; }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .title em,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #tarifs .title em,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #portfolio .title em,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #contact .title em,
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq .title em { color: #d4543a; }
/* Vagues : la couche orange reprend la même teinte */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] .waves .w2 { fill: rgba(212, 84, 58, .38); }
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq { --wave-tint: rgba(212, 84, 58, .40); }

/* Mélange : « demandez… » en orange italique, comme les mots colorés des autres titres de section */

/* ==========================================================
   WORDPRESS — ajouts propres au thème
   ========================================================== */

/* Barre d'administration WordPress : le menu collant descend en dessous */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* Contact : bloc de texte + formulaire (côté au choix) */
.contact-grid { align-items: start; }
.contact-form, .contact-text { min-width: 0; }
.contact-text { align-self: center; }
.contact-text p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; margin: 0 0 20px; max-width: 480px; }
.contact-lines { display: grid; gap: 14px; margin-top: 28px; }
.contact-lines a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.contact-lines .msym { font-size: 22px; opacity: .85; }
@media (min-width: 900px) {
  .contact-grid.form-right { grid-template-columns: 1fr 1.3fr; }
  .contact-grid.form-left  { grid-template-columns: 1.3fr 1fr; }
}
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: rgba(212, 84, 58, .12); color: #a63a24; font-weight: 600; }

/* Tarifs : de 1 à 3 formules */
@media (min-width: 800px) {
  .plans.plans-3 { grid-template-columns: repeat(3, 1fr); }
  .plans.plans-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
}

/* Pages simples, articles, liste du blog */
.entry-sec { min-height: 55vh; padding-bottom: 96px !important; }
.entry-sec .head { margin-bottom: 40px; }
.entry { max-width: 800px; margin: 0 auto; }
.entry .title { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 28px; }
.entry .meta, .post-card .meta { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0 0 12px; }
.entry-content { font-size: 18px; line-height: 1.75; }
.entry-content h2, .entry-content h3 { font-family: var(--font-title); margin: 2em 0 .6em; line-height: 1.2; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { max-width: 100%; height: auto; border-radius: 16px; }
.posts { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .posts { grid-template-columns: repeat(2, 1fr); } }
.post-card { background: var(--card-1); color: var(--card-ink); border-radius: var(--radius); padding: 28px; }
.post-card h2 { font-family: var(--font-title); font-size: 26px; line-height: 1.2; margin: 0 0 10px; }
.post-card .excerpt p { margin: 0 0 16px; }
.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); }
.pagination .page-numbers.current { background: var(--dark-bg); color: var(--dark-ink); border-color: transparent; }

/* ==========================================================
   CONTACT — grande carte à deux panneaux (texte à gauche / formulaire à droite, au choix)
   Le titre reprend la taille des autres titres de section.
   ========================================================== */
.contact-grid {
  gap: 0;
  align-items: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}
.contact-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: clamp(28px, 4vw, 52px);
}
.contact-text p { color: inherit; opacity: .92; max-width: 460px; }
.contact-text p:last-of-type { margin-bottom: 0; }
.contact-lines .msym { color: var(--accent-2); opacity: 1; }
.contact-form {
  background: #FBF6EC;
  color: #111111;
  border-radius: 0;
  padding: clamp(28px, 4vw, 52px);
}
:root[data-theme="vagues"] .contact-form { background: #ffffff; color: var(--sec-ink); }
:root[data-theme="vagues"] .form label { color: var(--sec-ink); }

/* Contact : le formulaire est centré dans son panneau et ses champs sont plus généreux (plus de grand vide sous le formulaire) */
.contact-form { display: flex; flex-direction: column; justify-content: center; }
.contact-form .form { width: 100%; gap: 26px; }
.contact-form .form textarea { min-height: 190px; }

/* Contact : deux cartes distinctes (texte sur fond foncé / formulaire sur fond clair), séparées par un espace.
   Texte du panneau de gauche à la taille du texte courant du site. */
.contact-grid { gap: 24px; border-radius: 0; overflow: visible; box-shadow: none; }
.contact-text { border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }
.contact-form { border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }
.contact-text p { font-size: 16px; line-height: 1.7; margin: 0 0 18px; max-width: none; }
.contact-lines { margin-top: 24px; }
.contact-lines a { font-size: 16px; }
.contact-lines .msym { font-size: 20px; }

/* ==========================================================
   Contact Form 7 — le formulaire garde le design du site
   ========================================================== */
.form .wpcf7-form-control-wrap { display: block; }
.form .btn { justify-self: start; cursor: pointer; border: 0; font-family: inherit; }
.form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-family: "Inter", system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #a63a24; }
.form .wpcf7-spinner { margin: 0 0 0 12px; align-self: center; }
.wpcf7 form .wpcf7-response-output { margin: 4px 0 0 !important; padding: 12px 16px !important; border: 0 !important; border-radius: 12px; font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 600; background: rgba(2, 67, 94, .08); color: inherit; }
.wpcf7 form.sent .wpcf7-response-output { background: rgba(23, 162, 174, .16); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { background: rgba(212, 84, 58, .14); color: #a63a24; }
.wpcf7 form .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }

/* Contact plus compact : texte plus large, formulaire plus étroit, marges et champs resserrés */
#contact .title { margin-bottom: 28px !important; }
@media (min-width: 900px) {
  .contact-grid.form-right { grid-template-columns: 1.25fr 1fr; }
  .contact-grid.form-left  { grid-template-columns: 1fr 1.25fr; }
}
.contact-text, .contact-form { padding: clamp(24px, 3vw, 40px); }
.contact-form .form { gap: 20px; }
.contact-form .form textarea { min-height: 130px; }
.contact-text p { margin-bottom: 14px; }
.contact-lines { margin-top: 18px; gap: 10px; }

/* Contact : champ « Votre projet » plus bas ; le texte de gauche démarre en haut, à la hauteur du haut du formulaire */
.contact-text { justify-content: flex-start; }
.contact-form { justify-content: flex-start; }
.contact-form .form textarea { min-height: 0; height: 80px; }

/* Contact : encore plus compact (sans exemples grisés, champ « projet » réduit, coordonnées calées en bas de la carte de texte) */
.contact-form .form { gap: 16px; }
.contact-form .form textarea { height: 64px; }
.contact-lines { margin-top: auto; padding-top: 18px; }

/* Contact équilibré : bloc plus compact, moins de vide dans la carte sombre */
#contact { padding-top: 52px; padding-bottom: 56px; }
#contact .title { margin-bottom: 22px !important; }
.contact-form .form { gap: 12px; }
.contact-form .form input[type=text],
.contact-form .form input[type=email] { padding-top: 8px; padding-bottom: 8px; }
.contact-form .form textarea { height: 56px; padding-top: 8px; padding-bottom: 8px; }
.contact-form .form .btn { padding-top: 12px; padding-bottom: 12px; }
.contact-lines { padding-top: 14px; }

/* Contact : formulaire encore plus bas pour coller à la hauteur du texte */
.contact-form { padding-top: 30px; padding-bottom: 30px; }
.contact-form .form { gap: 8px; }
.contact-form .form input[type=text],
.contact-form .form input[type=email] { padding-top: 3px; padding-bottom: 3px; font-size: 15px; }
.contact-form .form textarea { height: 44px; padding-top: 3px; padding-bottom: 3px; }
.contact-form .form .btn { padding-top: 10px; padding-bottom: 10px; }

/* Tarifs : 3 formules, boutons alignés en bas */
.plan { display: flex; flex-direction: column; }
.plan .price-pre { margin-top: 18px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .7; }
.plan .price-pre + .price { margin-top: 4px; }
.plan .plan-descr { margin: 12px 0 0; line-height: 1.6; opacity: .85; }
.plan .plan-note { margin: 18px 0 0; font-size: 14px; line-height: 1.6; opacity: .8; }
.plan ul { margin-top: 20px; }
.plan .btn, .plan .btn-ghost { margin-top: auto; align-self: flex-start; }
.plan ul + .plan-note, .plan .plan-note + .plan-note { margin-bottom: 26px; }
.plans.plans-3 .plan { padding: 32px 28px; }
.plans.plans-3 .price { font-size: 56px; }

/* Tarifs : titre des formules sur une seule ligne */
.plans.plans-3 .plan h3 { font-size: 26px; white-space: nowrap; }

/* Tarifs : titre de la section sur une seule ligne (écrans larges) */
@media (min-width: 700px) { #tarifs .title { white-space: nowrap; } }
@media (min-width: 700px) { #tarifs .title { font-size: min(54px, 4.1vw) !important; } }

/* Tarifs : carte « Meilleur choix » mise en avant */
.plan.vedette { border: 3px solid var(--accent); box-shadow: 0 18px 44px rgba(212, 84, 58, .28); }
.plan.vedette .price { color: var(--accent); }
.plan.vedette li::before { color: var(--accent-2); }
.plan.vedette .pop { top: -16px; right: 24px; padding: 7px 16px; box-shadow: 0 6px 16px rgba(212, 84, 58, .35); }

/* Tarifs : toujours un espace entre la liste et le bouton */
.plans.plans-3 .plan ul { margin-bottom: 32px; }

/* Tarifs : bouton de la carte « Meilleur choix » en orange, noir au survol */
.plan.vedette .btn { background: var(--accent); color: #fff; }
.plan.vedette .btn .arr { background: #fff; color: var(--accent); }
.plan.vedette .btn:hover { background: #111 !important; color: #fff !important; }
.plan.vedette .btn:hover .arr { background: #fff; color: #111; }

/* Bouton « Meilleur choix » : le rond devient jaune (doré) au survol seulement */
.plan.vedette .btn:hover .arr { background: var(--accent-2); color: #111; }

/* Hero : la taille du titre suit la largeur de sa colonne (identique quel que soit l’écran) */
.hero-in > div:first-child { container-type: inline-size; }
.hero h1 .sub { font-size: clamp(28px, 6cqw, 44px); }
.nw { white-space: nowrap; }

/* Cartes expertises : le titre suit la largeur de la carte (une seule ligne quand c'est possible) */
.card { container-type: inline-size; }
.card h3 { font-size: clamp(20px, 7.4cqw, 30px); }

/* Pages ville et Nos métiers */
.city .city-head { max-width: 860px; margin-bottom: 40px; }
.city .title { font-size: clamp(30px, 4.4vw, 52px); }
.city-lead { font-size: 19px; line-height: 1.6; margin: 18px 0 0; max-width: 720px; }
.city-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.city-tel { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.city-body { max-width: 760px; margin-bottom: 40px; }
.city-h2 { font-family: var(--font-title); font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; line-height: 1.2; }
.city-cards .card { min-height: 220px; }
.city-more { margin: 28px 0 0; font-weight: 700; }
.city-more a { border-bottom: 1px solid currentColor; }
.city-links, .city-block { margin-top: 48px; }
.city-links-t { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .6; margin: 0 0 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-block; padding: 8px 16px; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; font-size: 14px; }
.pill-lg { padding: 12px 22px; font-size: 16px; font-weight: 600; }
a.pill:hover, .pill-dark { background: #111; color: #FBF6EC; border-color: #111; }
.secteurs { display: grid; gap: 24px; }
.secteur h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.city-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding: 28px; border-radius: var(--radius); background: #111; color: #FBF6EC; }
.city-banner strong { display: block; font-size: 20px; margin-bottom: 6px; }
.city-banner span { opacity: .75; max-width: 640px; display: block; }
.city-cta-final { margin-top: 48px; text-align: center; }

/* Pages ville / métiers : haut de page façon accueil, titres proportionnés */
.city .city-h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 18px; }
.city .city-block { margin-top: 44px; }
.city .secteurs { grid-template-columns: 1fr; }
@media (min-width: 800px) { .city .secteurs { grid-template-columns: repeat(3, 1fr); } }
.city .secteur.card { min-height: 0; justify-content: flex-start; padding: 24px; }
.city .secteur.card:hover { transform: none; }
.city .secteur h3 { font-family: var(--font-title); font-size: 20px; text-transform: none; letter-spacing: 0; margin: 0 0 16px; }
.city .secteur .pill { border-color: rgba(0,0,0,.25); background: rgba(255,255,255,.55); font-size: 13px; padding: 6px 12px; }
.city-body .entry-content, .city .entry-content { font-size: 17px; }

/* ===== Pages ville / Nos métiers : couleurs du design système ===== */
.city .city-h2 { color: #111; }
.city .cards .card:nth-child(1) { background: #f0d0c0; }
.city .cards .card:nth-child(2) { background: #e8b040; }
.city .cards .card:nth-child(3) { background: #d4543a; color: #111; }
.city .secteurs .card:nth-child(1) { background: #f0d0c0; }
.city .secteurs .card:nth-child(2) { background: #e8b040; }
.city .secteurs .card:nth-child(3) { background: #d4543a; }
.city .pills a.pill-lg, .city .pills span.pill-lg { background: #fff; border-color: #111; }
a.pill:hover { background: #d4543a; color: #fff; border-color: #d4543a; }
.city-more a { color: #d4543a; }
.city-final { background: #d4543a; color: #FBF6EC; padding: 64px 0; text-align: center; }
.city-final h2 { font-family: var(--font-title); font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; }
.city-final p { margin: 0 0 24px; opacity: .9; }
.city-final .btn { background: #111; color: #FBF6EC; }
.city-final .btn .arr { background: #e8b040; color: #111; }

/* ===== Nos métiers / pages ville : même structure que l'ancien site, couleurs du design système ===== */
.city-hero h1 .sub em { font-style: italic; }
.city-hero .lead { max-width: 620px; }
.france-banner { background: #111; color: #FBF6EC; }
.france-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; padding-bottom: 28px; }
.france-banner strong { display: block; font-size: 20px; margin-bottom: 4px; }
.france-banner span { display: block; max-width: 680px; font-size: 14px; opacity: .7; line-height: 1.5; }
.btn-gold { display: inline-block; background: #e8b040; color: #111; padding: 14px 26px; border-radius: 999px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.btn-gold:hover { background: #FBF6EC; }
.city-sub { margin: -6px 0 22px; font-size: 14px; opacity: .65; }
.ville-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .ville-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ville-grid { grid-template-columns: repeat(6, 1fr); } }
.ville-card { display: block; background: #fff; border-radius: 16px; padding: 22px 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: transform .2s, background .2s, color .2s; }
a.ville-card:hover { transform: translateY(-3px); background: #e8b040; }
.ville-card b { display: block; font-size: 16px; }
.ville-card small { display: block; margin-top: 4px; font-size: 12px; color: #d4543a; }
.ville-dep { background: #d4543a; color: #fff; }
.ville-dep small { color: rgba(255,255,255,.75); }
a.ville-dep:hover { background: #111; color: #fff; }
.secteur-list { display: grid; gap: 20px; }
.secteur-block { border-radius: 24px; padding: 32px; }
.secteur-block h3 { font-family: var(--font-title); font-size: 24px; margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.secteur-block .pills { gap: 10px; }
.secteur-block .pill { font-size: 13px; padding: 8px 16px; }
.secteur-artisanat { background: #111; color: #FBF6EC; }
.secteur-artisanat .pill { border-color: rgba(251,246,236,.25); background: rgba(255,255,255,.08); }
.secteur-restauration { background: #d4543a; color: #FBF6EC; }
.secteur-restauration .pill { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); }
.secteur-services { background: #FBF6EC; color: #111; }
.secteur-services .pill { border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.05); }
.secteur-block a.pill:hover { background: #e8b040; color: #111; border-color: #e8b040; }
.cta-dark { margin-top: 44px; background: #111; color: #FBF6EC; border-radius: 24px; padding: 44px 24px; text-align: center; }
.cta-dark h2 { font-family: var(--font-title); font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.cta-dark p { margin: 0 0 24px; opacity: .7; }
.city .city-h2 { color: #111; font-size: clamp(24px, 2.6vw, 32px); }

/* Titre des pages ville / Nos métiers : même police, même taille que les titres de section de l'accueil */
:root[data-theme] .city-hero h1 { font-family: var(--font-title); font-weight: var(--title-weight); }
.city-hero h1 .sub { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.01em; }
.city-hero h1 .sub em { font-style: italic; }

/* Nos métiers / pages ville : titre sur toute la largeur, moins de vide sous l'accroche */
.city-hero .hero-in { grid-template-columns: 1fr; }
@media (min-width: 900px) { .city-hero .hero-in { grid-template-columns: 1fr; } }

/* Hero des pages ville / métiers : texte centré (la vague est celle de l'accueil) */
.city-hero .hero-in > div { text-align: center; width: 100%; margin: 0; }
.city-hero .kicker { justify-content: center; }
.city-hero .lead { margin-left: auto; margin-right: auto; }
.city-hero .cta { display: flex; justify-content: center; }
.city-hero .hero-in .lead { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }

/* Bloc « Je travaille dans toute la France » sous la vague */
.france-card { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: #d4543a; color: #FBF6EC; border-radius: 24px; padding: 36px 40px; margin: 0 0 48px; box-shadow: 0 18px 44px rgba(212, 84, 58, .28); }
.france-card::before { content: ""; position: absolute; width: 320px; height: 320px; right: -80px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(232,176,64,.6), rgba(232,176,64,0) 70%); pointer-events: none; }
.france-card::after { content: ""; position: absolute; width: 240px; height: 240px; left: -90px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); pointer-events: none; }
.france-card > * { position: relative; z-index: 1; }
.fc-main { display: flex; align-items: center; gap: 22px; flex: 1 1 520px; }
.fc-ico { flex: none; width: 68px; height: 68px; border-radius: 50%; background: #e8b040; color: #111; display: grid; place-items: center; font-size: 34px; }
.france-card h2 { font-family: var(--font-title); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; margin: 0 0 8px; color: #FBF6EC; }
.france-card p { margin: 0 0 14px; max-width: 620px; opacity: .92; line-height: 1.55; }
.fc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fc-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 13px; font-weight: 600; }
.fc-tags .msym { font-size: 16px; }
.france-card .btn-gold:hover { background: #111; color: #FBF6EC; }
@media (max-width: 640px) { .france-card { padding: 28px 22px; } .fc-main { flex-direction: column; align-items: flex-start; } }

/* Pages ville : cartes à pictogramme, tarifs, zones, boutons */
.city-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn-line { display: inline-flex; align-items: center; padding: 14px 26px; border: 2px solid #111; border-radius: 999px; font-weight: 700; transition: background .2s, color .2s; }
.btn-line:hover { background: #111; color: #FBF6EC; }
.city-cards .card { min-height: 0; gap: 18px; }
.city-cards .emo { font-size: 34px; line-height: 1; }
.tarif-mini { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tarif-mini { grid-template-columns: repeat(3, 1fr); } }
.tarif-item { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.tarif-item h3 { font-family: var(--font-title); font-size: 20px; margin: 0 0 6px; }
.tarif-item .tp { font-weight: 800; font-size: 20px; color: #d4543a; margin: 0 0 8px; }
.tarif-item .td { margin: 0; font-size: 14px; opacity: .7; line-height: 1.5; }
.zone-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .zone-grid { grid-template-columns: repeat(2, 1fr); } }
.zone-card { display: block; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.07); transition: transform .2s, background .2s; }
.zone-card:hover { transform: translateY(-3px); background: #e8b040; }
.zone-card b { display: block; font-size: 17px; margin-bottom: 4px; }
.zone-card span { font-size: 14px; opacity: .7; }
.cta-why { text-align: left; margin-top: 40px; }
.cta-why h2 { margin-bottom: 18px; }
.cta-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cta-why li::before { content: '✓'; color: #e8b040; font-weight: 800; margin-right: 10px; }
.city-cta-mid { text-align: center; margin: 48px 0 8px; }
.city-cta-mid p { margin: 0 0 16px; opacity: .75; }

/* Pages ville : cartes sans grand vide, boutons colorés */
.city .city-cards .card { justify-content: flex-start !important; gap: 14px; padding: 26px 28px; }
.city .city-cards .card .top { margin: 0; }
.city .city-cards .card h3 { margin: 0 0 8px; font-size: 26px; }
.city .city-cards .card p { margin: 0; }
.city .city-links .pill { border: 0; font-weight: 600; color: #111; }
.city .city-links .pills .pill:nth-child(3n+1) { background: #f0d0c0; }
.city .city-links .pills .pill:nth-child(3n+2) { background: #e8b040; }
.city .city-links .pills .pill:nth-child(3n) { background: #d4543a; color: #FBF6EC; }
.city .city-links .pill.pill-lg { background: #111 !important; color: #FBF6EC !important; }
.city .city-links a.pill:hover, .city .city-links span.pill:hover { background: #111; color: #FBF6EC; }
.city .city-links a.pill.pill-lg:hover { background: #d4543a !important; }

/* « Ce que comprend votre site » : bloc compact sur deux colonnes */
.cta-why.inclus { padding: 28px 32px; margin-top: 36px; }
.cta-why.inclus h2 { font-size: 20px; margin: 0 0 16px; }
.cta-why.inclus ul { grid-template-columns: 1fr; gap: 10px 32px; font-size: 14px; }
@media (min-width: 700px) { .cta-why.inclus ul { grid-template-columns: repeat(2, 1fr); } }
.cta-why.inclus li { opacity: .85; }

/* Liens légaux en bas de page */
.f-legal { font-size: 12px; letter-spacing: .04em; opacity: .8; }
.f-legal a { text-decoration: underline; text-underline-offset: 3px; }
.f-legal a:hover { opacity: 1; color: var(--accent); }

/* Pages légales : texte dans une carte lisible */
.legal-hero .hero-in > div { text-align: center; }
.legal-sec { padding-top: 24px; }
.legal-card { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 40px 44px; box-shadow: 0 10px 34px rgba(0,0,0,.08); }
.legal-card .entry-content { font-size: 16px; line-height: 1.7; }
.legal-card .entry-content h2 { font-family: var(--font-title); font-size: 24px; line-height: 1.2; margin: 34px 0 12px; padding-left: 14px; border-left: 4px solid #d4543a; color: #111; }
.legal-card .entry-content h2:first-child { margin-top: 0; }
.legal-card .entry-content p { margin: 0 0 12px; }
.legal-card .entry-content ul { margin: 0 0 12px; padding-left: 22px; }
.legal-card .entry-content li { margin: 4px 0; }
.legal-card .entry-content li::marker { color: #d4543a; }
.legal-card .entry-content a { color: #d4543a; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .legal-card { padding: 28px 22px; border-radius: 20px; } }

/* Bande orange + vagues au-dessus du pied de page (même rendu que la fin de l'accueil) */
.foot-band { position: relative; background: #f5ede0; height: calc(var(--wave-h, 100px) * 1.3); }
.foot-band::before, .foot-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.foot-band::after { height: var(--wave-h, 100px); background: var(--hero-bg, #F0E6D2); -webkit-mask-image: var(--wave-solid); mask-image: var(--wave-solid); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.foot-band::before { height: calc(var(--wave-h, 100px) * (1 + var(--wave-gap, .26))); background: #e08b3e; -webkit-mask-image: var(--wave-solid), linear-gradient(#000, #000); mask-image: var(--wave-solid), linear-gradient(#000, #000); -webkit-mask-size: 100% var(--wave-h, 100px), 100% calc(var(--wave-h, 100px) * (var(--wave-gap, .26) + .1)); mask-size: 100% var(--wave-h, 100px), 100% calc(var(--wave-h, 100px) * (var(--wave-gap, .26) + .1)); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; transform: translateY(-14%); }
.foot-band + .footer { border-radius: 0 !important; }

/* Formulaire de contact : mention sur les données, juste avant le bouton */
.contact-form .form-note { margin: 0; font-size: 12px; line-height: 1.4; opacity: .7; }
.contact-form .form-note a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }

/* ===== Design Allégé 2 : pages ville / métiers / légales et bande du pied de page aux couleurs de la palette ===== */
:root[data-theme="vagues"] .city .city-h2 { color: var(--sec-ink); }
:root[data-theme="vagues"] .city .cards .card:nth-child(1),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(1) { background: #F8DCCF; color: var(--sec-ink); }
:root[data-theme="vagues"] .city .cards .card:nth-child(2),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(2) { background: var(--yellow); color: var(--sec-ink); }
:root[data-theme="vagues"] .city .cards .card:nth-child(3),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(3) { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .city .pills a.pill-lg,
:root[data-theme="vagues"] .city .pills span.pill-lg { background: #fff; border-color: var(--sec-ink); }
:root[data-theme="vagues"] .pill-dark,
:root[data-theme="vagues"] a.pill:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
:root[data-theme="vagues"] .city-more a { color: #C24A29; }
:root[data-theme="vagues"] .city-final { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .city-final .btn { background: var(--dark-bg); color: #fff; }
:root[data-theme="vagues"] .city-final .btn .arr { background: var(--yellow); color: var(--sec-ink); }
:root[data-theme="vagues"] .city-banner,
:root[data-theme="vagues"] .france-banner,
:root[data-theme="vagues"] .cta-dark,
:root[data-theme="vagues"] .secteur-artisanat { background: var(--dark-bg); color: #fff; }
:root[data-theme="vagues"] .secteur-restauration { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .secteur-services { background: var(--alt-bg); color: var(--sec-ink); }
:root[data-theme="vagues"] .secteur-block a.pill:hover { background: var(--yellow); color: var(--sec-ink); border-color: var(--yellow); }
:root[data-theme="vagues"] .btn-gold { background: var(--yellow); color: var(--sec-ink); }
:root[data-theme="vagues"] .btn-gold:hover { background: #fff; }
:root[data-theme="vagues"] .france-card { background: var(--coral); color: #fff; box-shadow: 0 18px 44px rgba(212, 84, 58, .28); }
:root[data-theme="vagues"] .france-card h2 { color: #fff; }
:root[data-theme="vagues"] .france-card .btn-gold:hover { background: var(--dark-bg); color: #fff; }
:root[data-theme="vagues"] .fc-ico { background: var(--yellow); color: var(--sec-ink); }
:root[data-theme="vagues"] .btn-line { border-color: var(--sec-ink); color: var(--sec-ink); }
:root[data-theme="vagues"] .btn-line:hover { background: var(--sec-ink); color: #fff; }
:root[data-theme="vagues"] a.ville-card:hover,
:root[data-theme="vagues"] .zone-card:hover { background: var(--yellow); }
:root[data-theme="vagues"] .ville-card small,
:root[data-theme="vagues"] .tarif-item .tp { color: #C24A29; }
:root[data-theme="vagues"] .ville-dep { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] a.ville-dep:hover { background: var(--dark-bg); color: #fff; }
:root[data-theme="vagues"] .cta-why li::before { color: var(--yellow); }
:root[data-theme="vagues"] .city .city-links .pill { color: var(--sec-ink); }
:root[data-theme="vagues"] .city .city-links .pills .pill:nth-child(3n+1) { background: #F8DCCF; }
:root[data-theme="vagues"] .city .city-links .pills .pill:nth-child(3n+2) { background: var(--yellow); }
:root[data-theme="vagues"] .city .city-links .pills .pill:nth-child(3n) { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .city .city-links .pill.pill-lg { background: var(--sec-ink) !important; color: #fff !important; }
:root[data-theme="vagues"] .city .city-links a.pill:hover,
:root[data-theme="vagues"] .city .city-links span.pill:hover { background: var(--dark-bg); color: #fff; }
:root[data-theme="vagues"] .city .city-links a.pill.pill-lg:hover { background: #C24A29 !important; }
:root[data-theme="vagues"] .legal-card .entry-content h2 { border-left-color: #C24A29; color: var(--sec-ink); }
:root[data-theme="vagues"] .legal-card .entry-content li::marker { color: #C24A29; }
:root[data-theme="vagues"] .legal-card .entry-content a { color: #C24A29; }
:root[data-theme="vagues"] .foot-band { background: var(--sec-bg); }
:root[data-theme="vagues"] .foot-band::before { background: var(--coral); }
:root[data-theme="vagues"] .foot-band::after { background: var(--dark-bg); }
:root[data-theme="vagues"] .city-hero .kicker { color: var(--yellow); }
:root[data-theme="vagues"] .city-hero h1 .sub em { color: #F0906F; }
:root[data-theme="vagues"] .hero .btn-line { border-color: #fff; color: #fff; }
:root[data-theme="vagues"] .hero .btn-line:hover { background: #fff; color: var(--hero-bg); }
:root[data-theme="vagues"] .secteur-restauration .pill { background: rgba(0, 0, 0, .14); }
:root[data-theme="vagues"] .secteur-artisanat .pill,
:root[data-theme="vagues"] .secteur-restauration .pill { color: #fff; }
:root[data-theme="vagues"] .secteur-artisanat .pill { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
:root[data-theme="vagues"] .city .secteur .pill { color: inherit; }
:root[data-theme="vagues"] .city .secteur.secteur-services .pill { color: var(--sec-ink); background: rgba(255, 255, 255, .7); }

/* ===== Design Allégé 2 : accueil, lisibilité (contrastes) ===== */
:root[data-theme="vagues"] .hero h1 .sub em,
:root[data-theme="vagues"] .hero h1 em { color: #F0906F; }
:root[data-theme="vagues"] .sec .kicker { color: #B8431F; }
:root[data-theme="vagues"] .pricing .kicker { color: var(--yellow); }
:root[data-theme="vagues"] .step small { color: #B8431F; }
:root[data-theme="vagues"] .plan.vedette .btn .arr { color: #B8431F; }
:root[data-theme="vagues"] #portfolio .work:nth-child(2) .work-foot b { color: #012C3E; }
:root[data-theme="vagues"] #portfolio .work:nth-child(3) .work-foot b { color: #fff; }
:root[data-theme="vagues"] .france-card li { background: rgba(0, 0, 0, .16); }

/* Allégé 2 : section contact remontée, le contenu ne passe plus sous la vague du bas */
:root[data-theme="vagues"] #contact { padding-top: 24px; padding-bottom: calc(var(--wave-h) + 36px); }
/* Allégé 2 : vague FAQ > contact de la même couleur que celle sous les tarifs (teal 45 % sur fond marine = #0B6170) */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] #faq { --wave-tint: #0B6170; }

/* Visuel du haut de page (image à la place des petites cartes, réglage Creaweb40) */
.hero-visuel { display: none; }
.hero-visuel img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .hero-visuel { display: block; } }
/* un peu plus grande sur grand écran : elle s'étend vers la gauche (espace libre), jamais vers la droite */
@media (min-width: 1280px) { .hero-visuel { width: calc(100% + 48px); margin-left: -48px; } }

/* Image animée du haut de page : les 4 cartes métiers (images 3D) sortent de l'écran et se posent, aux mêmes endroits que sur l'image d'origine (réglage Creaweb40 : « Image animée »).
   Positions et tailles en unités du conteneur (cqw) : --cx/--cy = centre de la carte, --w = largeur, --ar = largeur/hauteur, --sx/--sy = point de départ (le centre de l'écran de l'ordinateur). */
.hero-anime { position: relative; container-type: inline-size; }
.hero-anime > img { position: relative; z-index: 1; }
.ha-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-anime .ha-card {
  position: absolute; display: block; height: auto; max-width: none;
  width: calc(var(--w) * 1cqw);
  left: calc((var(--cx) - var(--w) / 2) * 1cqw);
  top: calc(var(--cy) * 1cqw);
  margin-top: calc(var(--w) / var(--ar) * -0.5cqw);
  rotate: var(--r, 0deg);
  animation: ha-out 1.1s cubic-bezier(.34, 1.56, .64, 1) var(--d) both, ha-float 5.5s ease-in-out calc(var(--d) + 1.3s) infinite;
}
.ha-artisan  { --cx: 7.8;  --cy: 13.4; --w: 17.3; --ar: 1.538; --d: .9s;   --sx: 34.3cqw;  --sy: 18cqw; }
.ha-resto    { --cx: 91.5; --cy: 18.2; --w: 18.6; --ar: 1.6;   --d: 1.15s; --sx: -49.4cqw; --sy: 13.2cqw; --r: 8deg; }
.ha-commerce { --cx: 4.05; --cy: 47.8; --w: 16.8; --ar: 1.527; --d: 1.4s;  --sx: 38cqw;    --sy: -16.4cqw; }
.ha-indep    { --cx: 93.8; --cy: 54.1; --w: 14.7; --ar: 1.55;  --d: 1.65s; --sx: -51.7cqw; --sy: -22.7cqw; }
@keyframes ha-out {
  0%   { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes ha-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.9cqw; } }
@media (prefers-reduced-motion: reduce) { .ha-card { animation: none; } }
/* image à sa taille d'origine (élargie de 24 px vers la gauche sur grand écran) ; seul le sous-titre est réduit d'environ 10 % pour laisser de l'air */
@media (min-width: 1280px) { .hero-visuel.hero-anime { width: calc(100% + 24px); margin-left: -24px; } }
@media (min-width: 1200px) { .hero-in:has(.hero-anime) h1 .sub { font-size: clamp(26px, 5.4cqw, 40px); } }
/* paragraphe sous le titre : 20 px (au lieu de 22) sur grand écran, pour mieux se distinguer du sous-titre */
@media (min-width: 1100px) { .home .hero p.lead { font-size: 20px; } }
@media (min-width: 900px) and (max-width: 1099px) { .home .hero p.lead { font-size: 18px; } }

/* Projets : petite étiquette en bas à droite de chaque carte (Blog, Guides, Personnel) à 11 px au lieu de 9 px */
#portfolio .work-foot span { font-size: 11px; padding: 5px 13px; }
#portfolio .work-foot { flex-wrap: wrap; gap: 6px 10px; }

/* FAQ : réponses à 16 px (comme le reste de la page) ; formulaire : noms des champs un peu plus grands (11 -> 13 px) */
#faq .qa .ans p { font-size: 16px; line-height: 1.6; }
.form label { font-size: 13px; }

/* Cartes « Mes expertises » : moins de vide au-dessus du titre (72 px -> 32 px, plus de hauteur minimale) et texte de la même taille que le reste de la page (16 px) */
#services .card { min-height: 0; }
#services .card .top { margin-bottom: 32px; }
#services .card p { font-size: 16px; }
#services .card .more { font-size: 12px; }
#services .card .tag { font-size: 11px; }

/* Tarifs (3 formules) : la colonne peut rétrécir sur mobile, et le titre d'une formule reste sur une ligne en s'adaptant à la largeur de sa carte
   (12,6 = largeur du plus long titre, « Maintenance & Sérénité », exprimée en fois la taille de police) */
.plans.plans-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .plans.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plans.plans-3 .plan { container-type: inline-size; }
.plans.plans-3 .plan h3 { font-size: min(26px, calc(100cqw / 12.6)); }

/* Projets : rendu « premium » — fenêtre de navigateur autour de chaque capture, ombres en plusieurs couches, halo de la couleur de la carte,
   reflet et inclinaison 3D au survol (voir site.js). Pour revenir à l'ancien rendu : retirer la classe works-3d dans front-page.php. */
.works-3d .work .work-in {
  transform: perspective(1000px) rotate(var(--rot, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s;
  will-change: transform;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .10), 0 8px 16px rgba(0, 0, 0, .14), 0 24px 44px rgba(0, 0, 0, .20), 0 46px 72px -20px color-mix(in srgb, var(--bg-c) 75%, transparent);
}
.works-3d .work:nth-child(1) .work-in { --rot: -4deg; }
.works-3d .work:nth-child(2) .work-in { --rot: 1.5deg; }
.works-3d .work:nth-child(3) .work-in { --rot: 4deg; }
.works-3d .work .work-in:hover {
  transform: perspective(1000px) rotate(var(--rot, 0deg)) translateY(-12px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 2px 3px rgba(0, 0, 0, .10), 0 14px 26px rgba(0, 0, 0, .16), 0 40px 64px rgba(0, 0, 0, .24), 0 64px 96px -22px color-mix(in srgb, var(--bg-c) 85%, transparent);
}
.works-3d .work .work-in.tilting { transition: transform .12s ease-out, box-shadow .55s; }
.works-3d .work-in::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%);
}
.works-3d .work-in:hover::after { opacity: 1; }
.works-3d .work-over { z-index: 4; }

/* Projets : carrousel en éventail (réglage Creaweb40 : « Éventail »). Un projet en grand au milieu, les autres inclinés derrière ; flèches, clavier, glissement du doigt. */
.fan { position: relative; container-type: inline-size; max-width: 980px; margin: 0 auto; outline-offset: 10px; }
.fan-stage { position: relative; height: calc(min(520px, 74cqw) * .75 + 64px); touch-action: pan-y; }
.fan-card {
  position: absolute; top: 28px; left: 50%; display: block; width: min(520px, 74cqw); margin-left: calc(min(520px, 74cqw) / -2); aspect-ratio: 4 / 3;
  border: 5px solid #fff; border-radius: 22px; overflow: hidden; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .5), 0 8px 18px rgba(0, 0, 0, .16);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .5s, filter .5s; will-change: transform;
}
.fan-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fan:not(.ready) .fan-card:not(:first-child) { display: none; }
.fan-card[data-o="0"]  { transform: none; }
.fan-card[data-o="-1"] { transform: translateX(-56%) scale(.78) rotate(-7deg); filter: brightness(.82) saturate(.9); }
.fan-card[data-o="1"]  { transform: translateX(56%) scale(.78) rotate(7deg); filter: brightness(.82) saturate(.9); }
.fan-card[data-o="-2"] { transform: translateX(-92%) scale(.6) rotate(-13deg); filter: brightness(.7) saturate(.85); }
.fan-card[data-o="2"]  { transform: translateX(92%) scale(.6) rotate(13deg); filter: brightness(.7) saturate(.85); }
.fan-card[data-o="x"]  { transform: scale(.5); opacity: 0; pointer-events: none; }
.fan-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.fan-arrow {
  position: absolute; top: calc(min(520px, 74cqw) * .375 + 28px); z-index: 20; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%;
  background: #fff; color: #111; font-size: 30px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0 0 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s;
}
.fan-arrow:hover { transform: scale(1.08); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); }
.fan-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fan-prev { left: 0; }
.fan-next { right: 0; }
.fan-info { text-align: center; margin-top: 6px; }
.fan-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.fan-badge { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: #fff; color: #111; padding: 5px 13px; border-radius: 999px; }
.fan-label { font-size: 14px; font-weight: 700; opacity: .8; }
.fan-name { font-family: var(--font-title); font-weight: var(--title-weight); font-size: clamp(26px, 6.5cqw, 34px); line-height: 1.1; margin: 0 0 8px; }
.fan-sub { margin: 0 auto 20px; max-width: 46ch; font-size: 17px; opacity: .85; }
.fan-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.fan-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, transform .3s; }
.fan-dot.on { opacity: .9; transform: scale(1.35); }
@media (max-width: 560px) { .fan-arrow { width: 42px; height: 42px; margin-top: -21px; font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .fan-card, .fan-arrow, .fan-dot { transition: none; } }

/* Éventail : le texte sous les cartes devient une seule ligne discrète (nom · type · lien), sans description ni pastille */
.fan-stage { height: calc(min(520px, 74cqw) * .75 + 46px); }
.fan-info { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 14px; margin-top: 0; }
.fan-name { order: 1; margin: 0; font-size: 20px; }
.fan-meta { order: 2; margin: 0; }
.fan-link { order: 3; font-size: 14px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fan-link:hover { opacity: .75; }
.fan-dots { order: 4; flex-basis: 100%; margin-top: 12px; }
.fan-badge, .fan-sub { display: none; }
.fan-label { font-size: 14px; font-weight: 500; opacity: .75; }

/* Éventail : on reprend les cartes d'origine (cadre coloré, bandeau en bas, survol) à l'intérieur du carrousel */
.fan-card { border: 8px solid var(--bg-c); border-radius: var(--radius); background: var(--bg-c); aspect-ratio: auto; color: var(--card-ink);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .5s, filter .5s; }
.fan-card:nth-child(1) { --bg-c: var(--card-1); --r0: -3deg; }
.fan-card:nth-child(2) { --bg-c: var(--card-2); --r0: 1.5deg; }
.fan-card:nth-child(3) { --bg-c: var(--card-3); --r0: 3deg; }
:root[data-theme="vagues"] #portfolio .fan-card:nth-child(1) { --bg-c: #02435E; }
:root[data-theme="vagues"] #portfolio .fan-card:nth-child(2) { --bg-c: #17A2AE; }
:root[data-theme="vagues"] #portfolio .fan-card:nth-child(1) .work-foot, :root[data-theme="vagues"] #portfolio .fan-card:nth-child(1) .work-foot b { color: #fff; }
:root[data-theme="vagues"] #portfolio .fan-card:nth-child(1) .work-foot span { color: #02435E; }
:root[data-theme="vagues"] #portfolio .fan-card:nth-child(2) .work-foot b { color: #012C3E; }
:root[data-theme="vagues"] #portfolio .fan-card:nth-child(3) .work-foot b { color: #fff; }
.fan-card[data-o="0"] { transform: rotate(var(--r0, 0deg)); }
.fan-card[data-o="0"]:hover { transform: translateY(-10px) rotate(var(--r0, 0deg)); box-shadow: 0 40px 60px -12px rgba(0, 0, 0, .28); }
.fan-card[data-o="0"]:hover .work-over { opacity: 1; }
.fan-stage { height: calc(min(520px, 74cqw) * .75 + 92px); }
.fan-arrow { top: calc((min(520px, 74cqw) * .75 + 48px) / 2 + 28px); }
.fan-label { display: none; }
.fan-arrow { top: calc(var(--fan-ch, 340px) / 2 + 28px); }

/* Éventail : netteté et taille. La carte du milieu est bien droite (une image inclinée est rééchantillonnée, donc moins nette),
   pas de will-change (il fige la couche à une échelle et floute), cartes un peu plus petites (460 px au lieu de 520 px). */
.fan-card { will-change: auto; width: min(460px, 70cqw); margin-left: calc(min(460px, 70cqw) / -2); }
.fan-card:nth-child(1), .fan-card:nth-child(2), .fan-card:nth-child(3) { --r0: 0deg; }
.fan-card[data-o="0"] { transform: none; }
.fan-card[data-o="0"]:hover { transform: translateY(-8px); }

/* Éventail : lisibilité et place. La capture est affichée à 140 % dans son cadre (on voit le haut du site, avec ses gros titres, au lieu de
   toute la page en minuscule) ; cartes plus petites (410 px) ; moins de vide sous le carrousel, avant la section suivante. */
.fan-card { width: min(410px, 66cqw); margin-left: calc(min(410px, 66cqw) / -2); }
.fan-card .work-img img { width: 140%; height: 140%; max-width: none; object-fit: cover; object-position: 0 0; }
:root #portfolio.sec { padding-bottom: 16px !important; }

/* Éventail : capture entière (plus de recadrage), cadre au format de la capture (1100 x 764) */
.fan-card .work-img { aspect-ratio: 1100 / 764; }
.fan-card .work-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; }

/* Éventail : plus large (les cartes de côté sortent davantage de derrière la carte du milieu) */
.fan { max-width: 1100px; }
.fan-card[data-o="-1"] { transform: translateX(-70%) scale(.78) rotate(-7deg); }
.fan-card[data-o="1"]  { transform: translateX(70%) scale(.78) rotate(7deg); }
.fan-card[data-o="-2"] { transform: translateX(-120%) scale(.6) rotate(-13deg); }
.fan-card[data-o="2"]  { transform: translateX(120%) scale(.6) rotate(13deg); }

/* Bandeau défilant : de la marge au-dessus et en dessous (avant : -34 px en Allégé 2, les sections le touchaient presque) */
:root[data-theme="vagues"] .ticker { margin: 12px 0; }

/* Éventail : basculement au passage de la souris (voir site.js) ; à plat au repos */
.fan-stage { transform-style: preserve-3d; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }

/* Éventail : basculement individuel — chaque carte se tourne vers le pointeur (--ty, posé par site.js) ; la perspective n'est appliquée que pendant le
   mouvement (au repos les cartes gardent leurs transformations d'origine, donc restent nettes). */
.fan-stage { transform-style: flat; transition: none; }
.fan.tilting .fan-card { transition: transform .3s ease-out, opacity .5s, filter .5s; }
.fan.tilting .fan-card[data-o="0"]  { transform: perspective(1000px) rotateY(var(--ty, 0deg)); }
.fan.tilting .fan-card[data-o="-1"] { transform: perspective(1000px) translateX(-70%) rotateY(var(--ty, 0deg)) scale(.78) rotate(-7deg); }
.fan.tilting .fan-card[data-o="1"]  { transform: perspective(1000px) translateX(70%) rotateY(var(--ty, 0deg)) scale(.78) rotate(7deg); }
.fan.tilting .fan-card[data-o="-2"] { transform: perspective(1000px) translateX(-120%) rotateY(var(--ty, 0deg)) scale(.6) rotate(-13deg); }
.fan.tilting .fan-card[data-o="2"]  { transform: perspective(1000px) translateX(120%) rotateY(var(--ty, 0deg)) scale(.6) rotate(13deg); }

/* Allégé 2 : moins d'orange sur les pages ville / métiers / Nos métiers — le bleu, le turquoise et le jaune de l'accueil prennent le relais ;
   l'orange ne reste qu'en petit accent (mot en italique du titre, boutons au survol…). */
:root[data-theme="vagues"] .france-card { background: var(--hero-bg); color: #fff; box-shadow: 0 18px 44px rgba(2, 67, 94, .30); }
:root[data-theme="vagues"] .france-card li { background: rgba(255, 255, 255, .14); }
:root[data-theme="vagues"] .city .cards .card:nth-child(3),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(3) { background: var(--teal); color: #012C3E; }
:root[data-theme="vagues"] .city .city-links .pills .pill:nth-child(3n) { background: #CDEBEC; color: var(--sec-ink); }
:root[data-theme="vagues"] a.pill:hover,
:root[data-theme="vagues"] .pill-dark { background: var(--teal); color: #012C3E; border-color: var(--teal); }
:root[data-theme="vagues"] .city-final { background: var(--hero-bg); color: #fff; }
:root[data-theme="vagues"] .city-final .btn { background: var(--yellow); color: var(--sec-ink); }
:root[data-theme="vagues"] .city-final .btn .arr { background: var(--sec-ink); color: var(--yellow); }
:root[data-theme="vagues"] .secteur-restauration { background: var(--teal); color: #012C3E; }
:root[data-theme="vagues"] .secteur-restauration .pill { color: #012C3E; background: rgba(255, 255, 255, .35); border-color: rgba(1, 44, 62, .25); }
:root[data-theme="vagues"] .ville-dep { background: var(--hero-bg); color: #fff; }
:root[data-theme="vagues"] .foot-band::before { background: var(--teal); }
:root[data-theme="vagues"] .ville-card.ville-dep small { color: var(--yellow); }

/* Allégé 2 : plus de rose — la première carte et les pastilles roses passent au blanc, comme la première carte de l'accueil */
:root[data-theme="vagues"] .city .cards .card:nth-child(1),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(1) { background: var(--card-1); }
:root[data-theme="vagues"] .city .city-links .pills .pill:nth-child(3n+1) { background: #ffffff; }

/* Survols lisibles (Allégé 2) — audit des :hover : pastilles des pages ville/métier (texte blanc sur blanc), boutons, liens légaux du pied de page, cases de villes */
:root[data-theme="vagues"] .city .city-links .pills a.pill:nth-child(n):hover { background: var(--hero-bg); color: #fff; }
:root[data-theme="vagues"] .city .city-links .pills a.pill.pill-lg:nth-child(n):hover { background: #C24A29 !important; color: #fff !important; }
:root[data-theme="vagues"] .btn:hover { background: #C24A29; color: #fff; }
:root[data-theme="vagues"] .btn:hover .arr, :root[data-theme="vagues"] .plan.vedette .btn:hover .arr { background: #fff; color: #C24A29; }
:root[data-theme="vagues"] .f-legal a:hover { color: var(--yellow); }

:root[data-theme="vagues"] a.ville-card:hover small, :root[data-theme="vagues"] a.ville-card.ville-dep:hover small { color: var(--sec-ink); }

/* Survols lisibles (suite) — Allégé 2 : case « Landes » de Nos métiers ; Mélange : pastilles, boutons, liens du pied de page, cases de villes */
:root[data-theme="vagues"] .ville-card.ville-dep:hover small { color: var(--yellow); }

/* Survols lisibles (fin) */
:root[data-theme="vagues"] a.ville-card.ville-dep:hover small { color: var(--yellow); }

/* Allégé 2 : retour de l'orange (corail) de l'accueil sur les pages ville / métier / Nos métiers. Seul le panneau « Je travaille dans toute la France »
   reste en bleu foncé (demande de Joël) ; troisième carte, pastilles, bloc final et bloc Restauration reprennent le corail comme sur l'accueil. */
:root[data-theme="vagues"] .city .cards .card:nth-child(3),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(3) { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .city .city-links .pills .pill:nth-child(3n) { background: #C24A29; color: #fff; }
:root[data-theme="vagues"] .city-final { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .city-final .btn { background: var(--dark-bg); color: #fff; }
:root[data-theme="vagues"] .city-final .btn .arr { background: var(--yellow); color: var(--sec-ink); }
:root[data-theme="vagues"] .secteur-restauration { background: var(--coral); color: #fff; }
:root[data-theme="vagues"] .secteur-restauration .pill { color: #fff; background: rgba(0, 0, 0, .14); border-color: rgba(255, 255, 255, .3); }

/* Allégé 2 : halo retiré du panneau « Je travaille dans toute la France » (les deux taches lumineuses jaune et blanche) */
:root[data-theme="vagues"] .france-card::before, :root[data-theme="vagues"] .france-card::after { display: none; }

/* Pages ville et métier : textes à 16 px (comme le reste du site) — texte des 3 cartes et description sous les prix (avant : 14 px) */
.city .city-cards .card p { font-size: 16px; }
.city .tarif-item p:not(.tp) { font-size: 16px; }

/* Pages ville et métier : petits titres du bas (« Votre secteur d'activité à… », « Je travaille aussi dans », « Autres métiers à… ») à 13 px au lieu de 11 px */
.city .city-links-t { font-size: 13px; }

/* Allégé 2 : le mot en couleur du titre du haut de page (accueil, villes, métiers) reprend le même rouge-orange que dans le corps des pages (il était éclairci en rose) */
:root[data-theme="vagues"] .hero h1 .sub em, :root[data-theme="vagues"] .hero h1 em, :root[data-theme="vagues"] .city-hero h1 .sub em { color: var(--coral); }

/* ===== Corrections de l'audit (30/09) ===== */
/* Carrousel : pas de voile « Voir en grand » ni de soulèvement juste après un changement de projet (tant que la souris n'a pas bougé) ;
   sur tactile (pas de survol réel) le voile n'apparaît jamais : le « survol » restait collé après un appui. */
.fan.quiet .fan-card .work-over { opacity: 0 !important; }
.fan.quiet .fan-card[data-o="0"]:hover { transform: none !important; }
@media (hover: none) {
  .fan-card .work-over { display: none !important; }
  .fan-card[data-o="0"]:hover { transform: none; }
}

/* 1) Contraste : le corail sous du texte blanc passe à un corail un peu plus foncé (4,9 au lieu de 4,1) — Allégé 2 */
:root[data-theme="vagues"][data-palette="allege"][data-variant="2"] { --card-3: #C24A29; }
:root[data-theme="vagues"] .plan.vedette .btn, :root[data-theme="vagues"] .plan .pop { background: #C24A29; }
:root[data-theme="vagues"] .city .cards .card:nth-child(3),
:root[data-theme="vagues"] .city .secteurs .card:nth-child(3),
:root[data-theme="vagues"] .city-final,
:root[data-theme="vagues"] .secteur-restauration { background: #C24A29; }

/* 4) Aucun texte sous 12 px */
.kicker, .card .tag { font-size: 12px; }
.step small, .side small, .footer small { font-size: 12px; }
.f-legal, .f-legal a { font-size: 12px; }

/* 5) Zones tactiles : la zone cliquable est agrandie (sans changer l'aspect) sur mobile et tablette */
@media (max-width: 820px) {
  .card .more, .fan-link, #contact .side a { position: relative; }
  .card .more::after, .fan-link::after, #contact .side a::after { content: ""; position: absolute; inset: -12px -8px; }
}

/* Audit (suite) : étiquettes des cartes Expertises et des cartes projets à 12 px (des règles plus précises les gardaient à 11 px) */
#services .card .tag { font-size: 12px; }
#portfolio .work-foot span { font-size: 12px; }

/* Audit (fin) : liens e-mail et téléphone du bloc contact plus hauts au doigt (mobile et tablette) */
@media (max-width: 820px) { .contact-lines a { min-height: 44px; } }

/* Audit (Mélange) : mentions du pied de page à 12 px */

/* Pied de page : tailles — texte de présentation 16 px, titres des colonnes 14 px, mentions légales et politique de confidentialité 14 px ; libellés « Écrivez-nous / Appelez-nous » retirés (footer.php) */
:root[data-theme] .footer .f-brand p { font-size: 16px; }
:root[data-theme] .footer h4 { font-size: 14px; }
:root[data-theme] .footer .f-legal, :root[data-theme] .footer .f-legal a, :root[data-theme] .footer .bar .f-legal { font-size: 14px; }

/* Pied de page : liens des colonnes 15 px, e-mail et téléphone 16 px */
:root[data-theme] .footer ul a { font-size: 15px; }
:root[data-theme] .footer .f-line a { font-size: 16px; }

/* Menu du haut : liens à 13 px (12 px avant, 14 px essayé puis jugé trop gros) ; écarts un peu réduits sur les écrans moyens pour que tout tienne sur une ligne */
:root[data-theme] .nav-links { font-size: 13px; }
@media (min-width: 900px) and (max-width: 1180px) { :root[data-theme] .nav-links { gap: 22px; } :root[data-theme] .nav-links.left { padding-right: 28px; } :root[data-theme] .nav-links.right { padding-left: 28px; } }

/* Pied de page (4 colonnes) : le texte de présentation démarre à la même hauteur que le premier lien des colonnes voisines (« Votre site ») */
@media (min-width: 800px) { :root[data-theme] .footer .f-brand .f-name { margin-bottom: 6px; } }

/* Accueil : bouton du numéro de téléphone du haut de page à la même hauteur que « Démarrer mon projet » sur mobile */
@media (max-width: 599px) { .hero .cta .btn-line { min-height: 46px; padding-top: 0; padding-bottom: 0; align-items: center; } }

/* Accueil : titre sur deux lignes — « Création de site internet » puis « Mont-de-Marsan et Landes » (seul « et Landes » est en couleur) */
.home .hero h1 .sub .nw::before { content: "\A"; white-space: pre; }

/* Accueil mobile : titre sur deux lignes — police un peu plus petite pour que « Création de site internet » et « Mont-de-Marsan et Landes » tiennent chacun sur une ligne */
@media (max-width: 599px) { :root[data-theme] .home .hero h1 .sub { font-size: clamp(21px, 6.6cqw, 30px); } }

/* Accueil, « Mes expertises » : cartes plus abouties — numéro en grand + filet, pastille avec icône, titre plus grand, lien + rond fléché, forme ondulée dans le coin. Limité à #services (les cartes des pages villes/métiers ne changent pas). Couleurs inchangées. */
#services .card { position: relative; overflow: hidden; padding: 30px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(240, 205, 115, .95), 0 16px 36px -22px rgba(2, 67, 94, .45); transition: transform .3s, box-shadow .3s; }
#services .card:hover { box-shadow: 0 0 0 1px rgba(244, 214, 135, 1), 0 26px 48px -22px rgba(2, 67, 94, .55); }
#services .card { --wv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 130' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.30' d='M0 130C70 127 130 112 190 94 230 82 270 68 300 58V130z'/%3E%3Cpath fill='%23fff' fill-opacity='.30' d='M70 130C140 127 210 114 300 96V130z'/%3E%3C/svg%3E"); }
#services .card:nth-child(1) { --wv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 130' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='.9' d='M0 130C70 127 130 112 190 94 230 82 270 68 300 58V130z'/%3E%3Cpath fill='%23000' fill-opacity='.55' d='M70 130C140 127 210 114 300 96V130z'/%3E%3C/svg%3E"); }
#services .card:nth-child(3) { --wv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 130' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.13' d='M0 130C70 127 130 112 190 94 230 82 270 68 300 58V130z'/%3E%3Cpath fill='%23fff' fill-opacity='.13' d='M70 130C140 127 210 114 300 96V130z'/%3E%3C/svg%3E"); }
#services .card:nth-child(1)::after { background: var(--sec-bg); -webkit-mask: var(--wv) right bottom / 100% 100% no-repeat; mask: var(--wv) right bottom / 100% 100% no-repeat; }
#services .card::after { display: none; content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 36%; background: var(--wv) right bottom / 100% 100% no-repeat; pointer-events: none; }
#services .card > * { position: relative; z-index: 1; }
#services .card .top { align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 10px; }
#services .card .num { order: 0; font-family: var(--font-title); font-size: 40px; font-weight: 600; line-height: 1; opacity: .38; }
#services .card .top::before { content: ""; order: 1; flex: 1 1 24px; height: 1px; background: currentColor; opacity: .22; }
#services .card:nth-child(1) .tag { background: transparent; }
#services .card .tag { order: 2; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; letter-spacing: .16em; padding: 8px 14px; opacity: 1; border-color: rgba(2, 67, 94, .22); background: rgba(23, 162, 174, .1); }
#services .card:nth-child(2) .tag { border-color: rgba(2, 67, 94, .22); background: rgba(255, 255, 255, .38); }
#services .card:nth-child(3) .tag { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); }
#services .card .tag::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#services .card:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); }
#services .card:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h4v10H4V10zm6-6h4v16h-4V4zm6 9h4v7h-4v-7z'/%3E%3C/svg%3E"); }
#services .card:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.48.48 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z'/%3E%3C/svg%3E"); }
#services .card h3 { font-size: clamp(24px, 9cqw, 34px); margin-bottom: 20px; }
#services .card .more-row { display: flex; align-items: center; gap: 16px; margin-top: auto; }
#services .card .more { margin-top: 0; align-self: auto; }
#services .card .go { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card-ink); color: #fff; box-shadow: 0 8px 18px -8px rgba(2, 67, 94, .6); transition: transform .25s; }
#services .card:nth-child(3) .go { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .6); box-shadow: none; }
#services .card:hover .go { transform: translateX(4px); }
@media (max-width: 420px) { #services .card { padding: 24px; } #services .card .num { font-size: 34px; } #services .card .tag { letter-spacing: .12em; padding: 7px 12px; } }
@container (max-width: 300px) { #services .card .top { gap: 10px; flex-wrap: nowrap; } #services .card .num { font-size: 32px; } #services .card .tag { font-size: 11px; letter-spacing: .08em; padding: 6px 10px; gap: 0; } #services .card .tag::before { display: none; } }
@media (prefers-reduced-motion: reduce) { #services .card .go { transition: none; } #services .card:hover .go { transform: none; } }