/* ==========================================================================
   MNL — Vidéos promotionnelles et sites internet (Haut-Doubs)
   Feuille de style unique du site, fidèle à la maquette Claude Design.

   Sommaire
   1.  Polices
   2.  Variables (couleurs, typo, espacements)
   3.  Base
   4.  Mise en page
   5.  Typographie
   6.  Boutons, pastilles, icônes
   7.  En-tête et menu mobile
   8.  Pied de page
   9.  Bandeaux d'appel (CTA)
   10. Accueil
   11. Site web
   12. Vidéo promotionnelle
   13. Réalisations
   14. Contact
   15. Pages légales et 404
   16. Illustrations (maquettes décoratives)
   17. Animations
   ========================================================================== */


/* 1. Polices — auto-hébergées (aucun appel à Google Fonts)
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Variables
   ========================================================================== */

:root {
  /* Couleur d'accent de la maquette (autres options prévues : #D93A6A, #E3A01B, #1E9E72) */
  --accent: #E8531C;

  --ink: #17141C;
  --ink-2: #3D3843;
  --muted: #6B6570;
  --muted-2: #9A928C;
  --line: #DDD3C4;
  --hairline: #EDE5D8;
  --sand: #EFE6D8;
  --cream: #F7F1E8;
  --paper: #FBF8F3;
  --stone: #F1ECE4;
  --white: #FFFFFF;
  --blue: #2C3AE0;
  --blue-soft: #DDE1FF;
  --peach: #FBDCCB;
  --rust: #9A3412;
  --gold-soft: #F2E6C9;
  --gold: #7A5A10;
  --night-muted: #A79F98;
  --night-soft: #CFC7C0;
  --night-text: #E6DFD8;
  --error: #B42318;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --max: 1200px;
  --gutter: 48px;

  /* Espacements verticaux : valeur maquette à 1440 px, réduite sur mobile */
  --pad-144: clamp(64px, 10vw, 144px);
  --pad-128: clamp(56px, 8.9vw, 128px);
  --pad-112: clamp(56px, 7.8vw, 112px);
  --pad-96: clamp(48px, 6.67vw, 96px);
  --pad-88: clamp(32px, 6.1vw, 88px);
  --pad-80: clamp(40px, 5.56vw, 80px);
  --pad-72: clamp(36px, 5vw, 72px);
  --gap-80: clamp(40px, 5.56vw, 80px);
  --gap-72: clamp(40px, 5vw, 72px);
  --gap-56: clamp(28px, 3.89vw, 56px);

  /* Unité des illustrations : 1 px de maquette (redéfinie dans chaque illustration) */
  --u: 1px;

  /* Courbe des animations : départ vif, arrivée douce */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 1023px) {
  :root { --gutter: 32px; }
}
@media (max-width: 639px) {
  :root { --gutter: 20px; }
}


/* 3. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus, var(--blue));
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

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

@media (max-width: 639px) {
  .hide-sm { display: none; }
}


/* 4. Mise en page
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.section { padding-block: var(--pad-128); }
.section--soft { background: var(--blue-soft); }
.section--peach { background: var(--peach); }

.deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}


/* 5. Typographie
   ========================================================================== */

.t-hero,
.t-page,
.t-cta,
.t-cta-2,
.t-contact,
.t-section,
.t-block,
.t-block-2 {
  font-family: var(--font-display);
  font-weight: 700;
}

.t-hero { font-size: clamp(42px, 5.417vw, 78px); line-height: 1.02; letter-spacing: -0.0333em; }
.t-page { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.0333em; }
.t-cta { font-size: clamp(34px, 4.444vw, 64px); line-height: 1.02; letter-spacing: -0.031em; }
.t-cta-2 { font-size: clamp(34px, 4.167vw, 60px); line-height: 1.02; letter-spacing: -0.0333em; }
.t-contact { font-size: clamp(38px, 4.167vw, 60px); line-height: 1.02; letter-spacing: -0.0333em; }
.t-section { font-size: clamp(32px, 3.889vw, 56px); line-height: 1.06; letter-spacing: -0.032em; }
.t-block { font-size: clamp(30px, 3.611vw, 52px); line-height: 1.08; letter-spacing: -0.031em; }
.t-block-2 { font-size: clamp(30px, 3.333vw, 48px); line-height: 1.08; letter-spacing: -0.031em; }

/* Tablette : une seule colonne, les titres peuvent être plus grands */
@media (min-width: 640px) and (max-width: 959px) {
  .t-hero { font-size: clamp(46px, 7.3vw, 60px); }
  .t-page { font-size: clamp(44px, 6.8vw, 56px); }
  .t-cta, .t-contact { font-size: clamp(40px, 6vw, 50px); }
  .t-cta-2 { font-size: clamp(38px, 5.8vw, 48px); }
  .t-section { font-size: clamp(36px, 5.2vw, 46px); }
  .t-block, .t-block-2 { font-size: clamp(34px, 5vw, 44px); }
}

@media (max-width: 639px) {
  .t-hero, .t-page, .t-cta, .t-cta-2, .t-contact { line-height: 1.06; }
  .t-section, .t-block, .t-block-2 { line-height: 1.1; }
}

.lead {
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.65;
  color: var(--ink-2);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--eb-bg, var(--blue-soft));
  color: var(--eb-fg, var(--blue));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.eyebrow--lg { min-height: 36px; padding-inline: 16px; }
.eyebrow__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--eb-dot, var(--accent));
}
.eyebrow--peach { --eb-bg: var(--peach); --eb-fg: var(--rust); }
.eyebrow--soft { --eb-bg: var(--blue-soft); --eb-fg: var(--blue); }
.eyebrow--white { --eb-bg: var(--white); --eb-fg: var(--blue); }
.eyebrow--white-rust { --eb-bg: var(--white); --eb-fg: var(--rust); }
.eyebrow--glass { --eb-bg: rgba(247, 241, 232, 0.14); --eb-fg: var(--cream); }
.eyebrow--glass-ink { --eb-bg: rgba(23, 20, 28, 0.1); --eb-fg: var(--ink); --eb-dot: var(--ink); }
.eyebrow--accent { --eb-bg: var(--accent); --eb-fg: var(--ink); }

@media (max-width: 639px) {
  .eyebrow { min-height: 30px; padding: 6px 12px; font-size: 11px; }
  .eyebrow--lg { min-height: 32px; }
  .eyebrow__dot { width: 6px; height: 6px; }
}

.section-title { margin-top: 24px; }


/* 6. Boutons, pastilles, icônes
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h, 60px);
  padding: 0 var(--btn-px, 30px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: var(--btn-fs, 17px);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn svg { flex-shrink: 0; }

.btn--sm { --btn-h: 48px; --btn-px: 22px; --btn-fs: 15px; }
.btn--md { --btn-h: 56px; --btn-px: 26px; --btn-fs: 16px; }
.btn--lg { --btn-h: 62px; --btn-px: 32px; }

.btn--accent { background: var(--accent); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--outline { --btn-px: 28px; border: 1.5px solid var(--ink); color: var(--ink); }
.btn--outline-light { --btn-px: 28px; border: 1.5px solid rgba(247, 241, 232, 0.7); color: var(--cream); }
.btn--glow { box-shadow: 0 16px 32px -16px var(--accent); }
.btn--block { display: flex; width: 100%; }
.btn--tabular { font-variant-numeric: tabular-nums; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
}
.icon-btn--accent { background: var(--accent); color: var(--ink); }
.icon-btn--ink { background: var(--ink); color: var(--cream); }

.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tile, 56px);
  height: var(--tile, 56px);
  border-radius: var(--tile-r, 18px);
  background: var(--tile-bg, var(--blue-soft));
  color: var(--tile-fg, var(--blue));
}
.icon-tile--52 { --tile: 52px; --tile-r: 16px; }
.icon-tile--48 { --tile: 48px; --tile-r: 16px; }
.icon-tile--44 { --tile: 44px; --tile-r: 14px; }
.icon-tile--40 { --tile: 40px; --tile-r: 12px; }
.icon-tile--soft { --tile-bg: var(--blue-soft); --tile-fg: var(--blue); }
.icon-tile--peach { --tile-bg: var(--peach); --tile-fg: var(--rust); }
.icon-tile--gold { --tile-bg: var(--gold-soft); --tile-fg: var(--gold); }
.icon-tile--white { --tile-bg: var(--white); --tile-fg: var(--blue); }
.icon-tile--white-rust { --tile-bg: var(--white); --tile-fg: var(--rust); }
.icon-tile--cream { --tile-bg: var(--cream); --tile-fg: var(--blue); }
.icon-tile--glass { --tile-bg: rgba(247, 241, 232, 0.14); --tile-fg: var(--cream); }

.check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--check, 24px);
  height: var(--check, 24px);
  border-radius: 50%;
  background: var(--check-bg, var(--blue-soft));
  color: var(--check-fg, var(--blue));
}
.check--accent { --check-bg: var(--accent); --check-fg: var(--ink); }
.check--blue { --check-bg: var(--blue); --check-fg: var(--cream); }
.check--peach { --check-bg: var(--peach); --check-fg: var(--rust); }
.check--lg { --check: 28px; }

.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.tag--soft { background: var(--blue-soft); color: var(--blue); }
.tag--peach { background: var(--peach); color: var(--rust); }
.tag--gold { background: var(--gold-soft); color: var(--gold); }

.lift { transition: transform 0.25s ease; }
@media (hover: hover) {
  .lift:hover { transform: translateY(-6px); }
}


/* 7. En-tête et menu mobile
   ========================================================================== */

/* En-tête collant : se range quand on descend, revient dès qu'on remonte */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  height: 96px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: transform 0.35s var(--ease-out), background-color 0.3s ease, box-shadow 0.3s ease;
  view-transition-name: site-header;
}
.site-header--soft {
  background: var(--blue-soft);
  border-bottom-color: transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 12px 30px -24px rgba(23, 20, 28, 0.5);
}
.site-header--soft.is-scrolled { background: color-mix(in srgb, var(--blue-soft) 86%, transparent); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--ink);
  text-decoration: none;
}
.logo__dot { color: var(--accent); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--sand);
}
.site-header--soft .main-nav { background: var(--white); }
.main-nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.main-nav a:hover { background: rgba(23, 20, 28, 0.06); }
.main-nav a[aria-current='page'] {
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover span { text-decoration: underline; text-underline-offset: 4px; }

.header-call,
.menu-toggle { display: none; }

@media (max-width: 1199px) {
  .main-nav,
  .header-phone { display: none; }
  .header-call,
  .menu-toggle { display: inline-flex; }
  .site-header__actions { gap: 10px; }
  .site-header__actions .btn { margin-right: 6px; }
}
@media (max-width: 639px) {
  .site-header { height: 72px; }
  .logo { font-size: 28px; }
  .site-header__actions .btn { display: none; }
}

/* Menu mobile (élément <dialog>) */
.mobile-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  overflow-y: auto;
}
.mobile-menu[open] {
  display: flex;
  flex-direction: column;
  animation: mnlMenuIn 0.22s ease;
}
.mobile-menu::backdrop { background: rgba(23, 20, 28, 0.4); }
html:has(.mobile-menu[open]) { overflow: hidden; }

.mobile-menu__bar { border-bottom: 1px solid var(--line); }
.mobile-menu__top {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 639px) {
  .mobile-menu__top { height: 72px; }
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu__nav a[aria-current='page']::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 28px 40px;
}
.mobile-menu__actions .btn { --btn-h: 56px; }

@keyframes mnlMenuIn {
  from { opacity: 0; transform: translateY(-8px); }
}


/* 8. Pied de page
   ========================================================================== */

.site-footer {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--cream);
  padding-block: 80px 40px;
  --focus: var(--cream);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.footer-brand__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1px;
}
.footer-brand__logo span { color: var(--accent); }
.footer-brand p {
  margin-top: 16px;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--night-muted);
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
}
.footer-col__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--night-muted);
}
.footer-col a {
  color: var(--cream);
  text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-col .tabular { font-variant-numeric: tabular-nums; }

.site-footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid rgba(247, 241, 232, 0.15);
  font-size: 13px;
  color: var(--night-muted);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.site-footer__legal a {
  color: var(--night-muted);
  text-decoration: none;
}
.site-footer__legal a:hover { color: var(--cream); }

@media (max-width: 959px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .site-footer { padding-block: 44px 32px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-brand__logo { font-size: 34px; }
  .footer-col { gap: 4px; }
  .footer-col a,
  .footer-col > span:not(.footer-col__title) { display: flex; align-items: center; min-height: 40px; }
  .footer-col__title { margin-bottom: 4px; }
  .site-footer__bottom { flex-direction: column; margin-top: 32px; padding-top: 20px; }
}


/* 9. Bandeaux d'appel (CTA)
   ========================================================================== */

.cta-section { padding-bottom: var(--pad-144); }

.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: var(--pad-88);
  border-radius: 36px;
  background: var(--accent);
  color: var(--ink);
}
.cta-band > :not(.deco) { position: relative; }
.cta-band__blob {
  right: -80px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  background: var(--cream);
  opacity: 0.22;
}
.cta-band__ring {
  right: 180px;
  top: -60px;
  width: 140px;
  height: 140px;
  border: 2px solid rgba(23, 20, 28, 0.25);
}
.cta-band__text p {
  margin-top: 20px;
  max-width: 520px;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.65;
  color: rgba(23, 20, 28, 0.82);
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-band__actions .btn { --btn-h: 62px; }
.cta-band__small { font-size: 15px; }

/* Variante bleue (Réalisations) */
.cta-band--blue {
  grid-template-columns: minmax(0, 1.4fr) auto;
  padding: var(--pad-80) var(--pad-88);
  background: var(--blue);
  color: var(--cream);
  --focus: var(--cream);
}
.cta-band--blue .cta-band__blob {
  right: -60px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  background: var(--accent);
  opacity: 0.9;
}

@media (max-width: 959px) {
  .cta-band,
  .cta-band--blue { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 639px) {
  .cta-band,
  .cta-band--blue { padding: 36px 28px; border-radius: 26px; gap: 24px; }
  .cta-band__blob { right: -70px; bottom: -90px; width: 220px; height: 220px; }
  .cta-band__ring { display: none; }
  .cta-band__text p { margin-top: 14px; }
  .cta-band__actions { gap: 12px; }
  .cta-band__actions .btn { --btn-h: 56px; }
  .cta-band--blue .btn { width: 100%; }
}


/* 10. Accueil
   ========================================================================== */

/* Hero commun */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-88) var(--pad-128);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__title { margin-top: 28px; }
.hero__lead { margin-top: 32px; max-width: 540px; }
.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero--blue,
.hero--accent { padding-block: var(--pad-96) var(--pad-112); }
.hero__price {
  margin-top: 22px;
  font-size: 15px;
  color: rgba(23, 20, 28, 0.78);
}
.hero__price strong {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin-inline: 4px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
}
.hero--blue { background: var(--blue); color: var(--cream); --focus: var(--cream); }
.hero--accent { background: var(--accent); color: var(--ink); }
.hero--blue .hero__title,
.hero--accent .hero__title { margin-top: 26px; }
.hero--blue .hero__lead,
.hero--accent .hero__lead { margin-top: 28px; }
.hero--blue .hero__lead { color: rgba(247, 241, 232, 0.88); }
.hero--accent .hero__lead { color: rgba(23, 20, 28, 0.85); }

.underline-draw {
  position: relative;
  white-space: nowrap;
}
.underline-draw svg {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 18px;
  overflow: visible;
}
.underline-draw path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 959px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__lead { max-width: 640px; }
  .hero .art { max-width: 568px; margin-inline: auto; }
}
@media (max-width: 639px) {
  .hero__title { margin-top: 20px; }
  .hero__lead { margin-top: 22px; }
  .hero--blue .hero__title,
  .hero--accent .hero__title { margin-top: 20px; }
  .hero--blue .hero__lead,
  .hero--accent .hero__lead { margin-top: 22px; }
  .hero__actions { margin-top: 28px; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { --btn-h: 56px; }
  .underline-draw svg { bottom: -7px; height: 12px; }
  .underline-draw path { stroke-width: 5; }
}

/* Services */
.services { padding-bottom: var(--pad-144); }
.services__grid {
  margin-top: var(--gap-56);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.service-card {
  --u: calc(100cqw / 586);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 44px;
  border-radius: 32px;
  text-decoration: none;
}
.service-card > :not(.sc-mock) { position: relative; z-index: 1; }
.service-card--blue {
  --soft: rgba(247, 241, 232, 0.75);
  --desc: rgba(247, 241, 232, 0.85);
  --focus: var(--cream);
  background: var(--blue);
  color: var(--cream);
  box-shadow: 0 36px 60px -34px rgba(44, 58, 224, 0.9);
}
.service-card--accent {
  --soft: rgba(23, 20, 28, 0.7);
  --desc: rgba(23, 20, 28, 0.82);
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 36px 60px -34px var(--accent);
}
.service-card__kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--soft);
}
.service-card__title {
  margin-top: 20px;
  max-width: 420px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.917vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.0286em;
}
.service-card--accent .service-card__title { max-width: 440px; }
.service-card__desc {
  margin-top: 18px;
  max-width: 360px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--desc);
}
.service-card__price {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.service-card__price small {
  font-size: 13px;
  color: var(--soft);
}
.service-card__price strong,
.combo__price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.056vw, 44px);
  letter-spacing: -1px;
}
.service-card__cta {
  margin-top: 20px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.service-card--blue .service-card__cta { background: var(--cream); color: var(--ink); }
.service-card--accent .service-card__cta { background: var(--ink); color: var(--cream); }

.combo {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  border-radius: 32px;
  background: var(--ink);
  color: var(--cream);
  --focus: var(--cream);
}
.combo > :not(.deco) { position: relative; }
.combo__blob {
  right: 280px;
  top: -90px;
  width: 220px;
  height: 220px;
  background: var(--accent);
  opacity: 0.14;
}
.combo__kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--night-muted);
}
.combo__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.639vw, 38px);
  line-height: 1.1;
  letter-spacing: -1px;
}
.combo__title span { color: var(--accent); }
.combo__desc {
  margin-top: 12px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--night-soft);
}
.combo__side {
  display: flex;
  align-items: center;
  gap: 28px;
}
.combo__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.combo__price small {
  font-size: 13px;
  color: var(--night-muted);
}

@media (max-width: 1099px) {
  .service-card { padding: 36px; }
}
@media (max-width: 959px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { min-height: 480px; }
  .service-card__title { font-size: clamp(26px, 4.7vw, 38px); max-width: 480px; }
  .combo__title { font-size: clamp(24px, 4.2vw, 34px); }
  .combo { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px; }
  .combo__side { justify-content: space-between; flex-wrap: wrap; gap: 20px; }
  .combo__price { text-align: left; }
}
@media (max-width: 639px) {
  .services__grid { gap: 16px; }
  .service-card { min-height: 0; padding: 28px; border-radius: 26px; }
  .service-card__title { margin-top: 12px; }
  .service-card__desc { margin-top: 12px; font-size: 16px; }
  .service-card__price { padding-top: 20px; }
  .service-card__cta { height: 44px; margin-top: 16px; }
  .sc-mock { display: none; }
  .combo { padding: 28px; border-radius: 26px; }
  .combo__blob { right: -60px; }
}

/* Étapes */
.steps {
  margin-top: var(--gap-56);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 24px 40px -28px rgba(44, 58, 224, 0.6);
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
}
.step-num--blue { background: var(--blue); color: var(--cream); }
.step-card h3 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
}
.step-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 1099px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px;
    border-radius: 18px;
  }
  .step-num { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 16px; }
  .step-card h3 { grid-column: 2; margin-top: 8px; font-size: 19px; }
  .step-card p { grid-column: 2; font-size: 15px; }
}

/* Qui suis-je */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 96px;
  align-items: center;
}
.about__media {
  position: relative;
  padding: 0 28px 28px 0;
}
.about__media::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  right: 0;
  bottom: 0;
  border-radius: 28px;
  background: var(--blue);
}
.about__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: #E9BFA5;
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__pin {
  position: absolute;
  left: -24px;
  bottom: 72px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 20px 40px -20px rgba(23, 20, 28, 0.5);
  font-size: 15px;
  font-weight: 600;
}
.about__pin svg { color: var(--accent); }
.about__text { display: flex; flex-direction: column; align-items: flex-start; }
.about__text p {
  max-width: 620px;
  font-size: clamp(17px, 1.32vw, 19px);
  line-height: 1.7;
  color: #3D2A20;
}
.about__text .section-title + p { margin-top: 28px; }
.about__text p + p { margin-top: 16px; }

.facts {
  margin-top: 40px;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 16px 30px -24px rgba(122, 58, 26, 0.7);
}
.fact dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rust);
}
.fact dd {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 959px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .about__media { width: min(100%, 440px); }
}
@media (max-width: 639px) {
  .about__media { padding: 0 16px 16px 0; }
  .about__media::before { top: 16px; left: 16px; border-radius: 22px; }
  .about__photo { border-radius: 22px; }
  .about__pin { left: 12px; bottom: 40px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .fact { padding: 16px 18px; }
}

/* FAQ */
.faq { padding-block: var(--pad-144); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 96px;
  align-items: start;
}
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; }
.faq__intro p {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.faq__intro a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.faq__intro a:hover { text-decoration: underline; text-underline-offset: 4px; }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 16px 32px -26px rgba(23, 20, 28, 0.5);
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  border-radius: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-item__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--rust);
  font-size: 14px;
}
.faq-item:nth-child(even) .faq-item__num { background: var(--blue-soft); color: var(--blue); }
.faq-item__q { flex: 1; }
.faq-item__icon {
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open]:not(.is-closing) .faq-item__icon { transform: rotate(45deg); }
.faq-item__a {
  padding: 0 28px 26px 78px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

@media (max-width: 959px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 639px) {
  .faq-item summary { gap: 14px; padding: 20px; font-size: 18px; }
  .faq-item__a { padding: 0 20px 22px 66px; font-size: 16px; }
}


/* 11. Site web
   ========================================================================== */

.hero--blue .hero__ring,
.hero--accent .hero__ring {
  right: -160px;
  top: -200px;
  width: 560px;
  height: 560px;
  border: 1.5px solid rgba(247, 241, 232, 0.16);
}
.hero--accent .hero__ring { border-color: rgba(23, 20, 28, 0.16); }
.hero--blue .hero__blob {
  left: 38%;
  bottom: -220px;
  width: 380px;
  height: 380px;
  background: rgba(247, 241, 232, 0.06);
}
.hero--accent .hero__blob {
  left: 36%;
  bottom: -220px;
  width: 380px;
  height: 380px;
  background: rgba(247, 241, 232, 0.16);
}

/* Ce qui est compris */
.features {
  margin-top: var(--gap-56);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 20px 40px -30px rgba(23, 20, 28, 0.5);
}
.feature-card h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
}
.feature-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.title-wide { max-width: 820px; }

@media (max-width: 1023px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .feature-card { padding: 24px; }
}

/* Formules */
.pricing {
  padding-block: var(--pad-128) clamp(64px, 9.45vw, 136px);
  background: var(--sand);
  scroll-margin-top: 16px;
}
.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pricing__head p {
  margin-top: 20px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
}
.pricing__grid {
  margin-top: var(--gap-80);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}
/* Déroulant de Standard ouvert : seule cette carte s'allonge */
.pricing__grid:has(.price-card__more[open]) { align-items: start; }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(23, 20, 28, 0.04), 0 36px 60px -34px rgba(23, 20, 28, 0.5);
}
.price-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px 32px 28px;
  background: var(--blue-soft);
}
.price-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.price-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--blue);
}
.price-card__tagline {
  font-size: 15px;
  color: var(--ink-2);
}
.price-card__from {
  margin-top: 18px;
  font-size: 13px;
  color: #5A5F9A;
}
.price-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.price-card__perf {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--line);
}
.price-card__perf::before,
.price-card__perf::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sand);
}
.price-card__perf::before { left: -12px; }
.price-card__perf::after { right: -12px; }
.price-card__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 28px 32px;
  list-style: none;
  font-size: 16px;
}
.price-card__list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price-card__foot { margin-top: auto; padding: 0 32px 32px; }
.price-card__foot .btn {
  --btn-h: 54px;
  --btn-fs: 16px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

/* Offre mise en avant : même hauteur que ses voisines, juste un peu plus grande */
.price-card-wrap {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  transform: scale(1.035);
  transition: transform 0.35s var(--ease-out);
}
@media (hover: hover) {
  .price-card-wrap:hover { transform: translateY(-6px) scale(1.035); }
}
.price-card-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: var(--accent);
  transform: rotate(-2.5deg) translate(-5px, 6px);
}
.price-card--featured {
  flex: 1;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 46px 74px -38px rgba(23, 20, 28, 0.75);
  --focus: var(--cream);
}
/* Reflet lumineux qui balaie la carte de temps en temps */
.price-card--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.06) 55%, transparent 62%);
  transform: translateX(-100%);
  animation: mnlSheen 7s cubic-bezier(0.45, 0, 0.2, 1) 1.5s infinite;
}
@keyframes mnlSheen {
  0% { transform: translateX(-100%); }
  18%, 100% { transform: translateX(100%); }
}

/* Mini-déroulant « Voir ce qui est inclus » */
.price-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 32px;
}
.price-card__more summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(247, 241, 232, 0.18);
  border-radius: 16px;
  cursor: pointer;
  list-style: none;
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.price-card__more summary::-webkit-details-marker { display: none; }
.price-card__more summary:hover {
  background: rgba(247, 241, 232, 0.06);
  border-color: rgba(247, 241, 232, 0.32);
}
.price-card__more-label { flex: 1; }
.price-card__more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.price-card__chevron { transition: transform 0.3s var(--ease-out); }
.price-card__more[open]:not(.is-closing) .price-card__chevron { transform: rotate(180deg); }
.price-card__more .price-card__list { padding: 20px 4px 4px; }
.price-card__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.price-card--featured .price-card__head {
  padding-top: 30px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, rgba(23, 20, 28, 0) 60%);
}
.price-card--featured .price-card__name { font-size: 27px; color: var(--cream); }
.price-card--featured .price-card__tagline { font-size: 16px; line-height: 1.5; color: var(--night-text); }
.price-card--featured .price-card__from { color: var(--night-muted); }
.price-card--featured .price-card__price { font-size: 58px; color: var(--accent); }
.price-card--featured .price-card__perf { border-top-color: rgba(247, 241, 232, 0.22); }
.price-card--featured .price-card__list { color: var(--night-text); }
.price-card--featured .price-card__list li { align-items: flex-start; line-height: 1.45; }
.price-card--featured .check { margin-top: 1px; }
.price-card--featured .price-card__foot .btn { --btn-h: 56px; font-weight: 700; box-shadow: 0 18px 36px -18px var(--accent); }
.hl-accent { color: var(--accent); font-weight: 700; }
.hl-white { color: var(--white); font-weight: 700; }

/* Offre Site et vidéo : chaleureuse, sans voler la vedette à Standard */
.price-card--combo {
  box-shadow: 0 1px 0 rgba(23, 20, 28, 0.04), 0 36px 60px -34px rgba(154, 52, 18, 0.45);
}
.price-card--combo .price-card__head { background: var(--peach); }
.price-card--combo .price-card__name { color: var(--rust); }
.price-card--combo .price-card__tagline { color: #4A2616; }
.price-card--combo .price-card__from { color: #9A5B3F; }

@media (min-width: 1024px) and (max-width: 1199px) {
  .price-card__head,
  .price-card__list,
  .price-card__body { padding-inline: 24px; }
  .price-card__foot { padding-inline: 24px; }
  .price-card__foot .btn { --btn-px: 16px; }
}
@media (max-width: 1023px) {
  .pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 480px;
    margin-inline: auto;
  }
  .price-card-wrap { transform: none; }
}
@media (max-width: 639px) {
  .price-card__head { padding: 26px 24px 22px; }
  .price-card__list { padding: 24px; }
  .price-card__body { padding: 20px 24px; }
  .price-card__foot { padding: 0 24px 24px; }
  .price-card__price { font-size: 48px; }
  .price-card--featured .price-card__price { font-size: 50px; }
  .price-card__ribbon { font-size: 12px; letter-spacing: 1.4px; }
}

/* Entretien et suivi */
.care {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-128);
  background: var(--blue);
  color: var(--cream);
  --focus: var(--cream);
}
.care__ring {
  left: -140px;
  bottom: -180px;
  width: 480px;
  height: 480px;
  border: 1.5px solid rgba(247, 241, 232, 0.16);
}
.care__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}
.care__intro { display: flex; flex-direction: column; align-items: flex-start; }
.care__intro p {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(247, 241, 232, 0.88);
}
.care__points {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.care__points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
}

.care-panel {
  position: relative;
  container-type: inline-size;
  padding: 40px;
  border: 4px solid transparent;
  border-radius: 32px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 60px 100px -50px rgba(5, 8, 50, 0.9);
  --focus: var(--blue);
}
.care-panel.is-recommended { border-color: var(--accent); }
.care-panel__badge {
  position: absolute;
  top: -18px;
  left: 40px;
  display: none;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 12px 24px -12px rgba(5, 8, 50, 0.8);
}
.care-panel.is-recommended .care-panel__badge { display: inline-flex; }

.plan-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--sand);
}
.plan-btn {
  min-height: 50px;
  padding: 0 8px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.plan-btn:hover { background: rgba(23, 20, 28, 0.05); }
.plan-btn--star {
  border-color: var(--accent);
  background: var(--peach);
  color: var(--rust);
  font-weight: 800;
}
.plan-btn--star:hover { background: #F8CDB6; }
.plan-btn[aria-pressed='true'] { background: var(--ink); color: var(--cream); }

.care-panel__summary {
  margin-top: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.care-panel__plan { display: flex; flex-direction: column; gap: 6px; }
.care-panel__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
}
.care-panel__desc {
  max-width: 360px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.care-panel__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.care-panel__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 4.444vw, 64px);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--blue);
}
.care-panel.is-recommended .care-panel__amount { color: var(--accent); }
.care-panel__per { font-size: 16px; color: var(--muted); }

.care-rows {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
}
.care-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.care-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
.care-row__icon .icon-minus { display: none; }
.care-row__text { display: flex; flex-direction: column; gap: 2px; }
.care-row__label { font-size: 17px; font-weight: 600; }
.care-row__sub { font-size: 14px; color: var(--muted); }
.care-row__state {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}
.care-row.is-off { display: none; }
.care-row.is-off .care-row__icon { background: var(--stone); color: var(--muted-2); }
.care-row.is-off .icon-check { display: none; }
.care-row.is-off .icon-minus { display: block; }
.care-row.is-off .care-row__label,
.care-row.is-off .care-row__state { color: var(--muted-2); }

.care-example {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--peach);
}
.care-example__text { display: flex; flex-direction: column; gap: 2px; }
.care-example__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rust);
}
.care-example__body { font-size: 16px; line-height: 1.5; }
.care-example__body strong { font-weight: 700; }
.care-note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1023px) {
  .care__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 639px) {
  .care-panel { padding: 28px 20px 24px; border-radius: 26px; }
  .care-panel__badge { left: 20px; font-size: 11px; }
  .care-row { gap: 12px; }
  .care-example { align-items: flex-start; padding: 18px; gap: 14px; }
}
/* Panneau étroit (mobile, ou colonne réduite vers 1024 px) : boutons sur deux lignes */
@container (max-width: 560px) {
  .plan-switch { border-radius: 22px; }
  .plan-btn { min-height: 56px; padding: 6px 4px; border-radius: 18px; font-size: 14px; }
  .plan-btn__name,
  .plan-btn__price { display: block; }
  .plan-btn__sep { display: none; }
  .care-panel__summary { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@container (max-width: 300px) {
  .plan-switch { gap: 2px; padding: 4px; }
  .plan-btn { padding-inline: 2px; font-size: 12.5px; }
}

/* Bandeau final juste après la section bleue */
.care + .cta-section { padding-top: var(--pad-128); }


/* 12. Vidéo promotionnelle
   ========================================================================== */

.uses {
  margin-top: var(--gap-56);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.use-card {
  overflow: hidden;
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 30px 50px -34px rgba(23, 20, 28, 0.55);
}
.use-card__visual {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.use-card__visual--site { background: var(--blue); }
.use-card__visual--social { background: var(--accent); }
.use-card__visual--story { gap: 10px; background: var(--ink); }
.uv-browser {
  width: 62%;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--cream);
}
.uv-browser__bar {
  width: 40%;
  height: 10px;
  border-radius: 3px;
  background: var(--line);
}
.uv-browser__screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--accent);
}
.uv-phone {
  height: 82%;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--cream);
  border-radius: 16px;
  background: var(--ink);
  color: var(--cream);
}
.uv-tile {
  width: 26%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
}
.uv-tile--blue { background: var(--blue); }
.uv-tile--accent { background: var(--accent); }
.uv-tile--gold { background: var(--gold-soft); }
.use-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 30px 32px;
}
.use-card__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
}
.use-card__body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.use-card__body .tag { margin-top: 6px; }

@media (max-width: 1023px) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .uses { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .use-card__body { padding: 22px 24px 26px; }
}

/* Déroulé (fond sombre) */
.process {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-128);
  background: var(--ink);
  color: var(--cream);
  --focus: var(--cream);
}
.process__blob {
  right: -120px;
  top: -160px;
  width: 440px;
  height: 440px;
  background: var(--accent);
  opacity: 0.12;
}
.process .container { position: relative; }
.timeline {
  position: relative;
  margin-top: var(--gap-72);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 23px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
}
.timeline ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.timeline li {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.timeline__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}
.timeline__dot--apricot { background: #F2A36F; }
.timeline__dot--lilac { background: #8C8FF0; }
.timeline__dot--blue { background: var(--blue); color: var(--cream); }
.timeline h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
}
.timeline p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--night-soft);
}

@media (max-width: 899px) {
  .timeline::before { display: none; }
  .timeline ol { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 6px;
  }
  /* Segment vertical entre deux étapes, dans les couleurs des pastilles */
  .timeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: -32px;
    width: 2px;
    background: linear-gradient(180deg, var(--seg-from), var(--seg-to));
  }
  .timeline li:nth-child(1) { --seg-from: var(--accent); --seg-to: #F2A36F; }
  .timeline li:nth-child(2) { --seg-from: #F2A36F; --seg-to: #8C8FF0; }
  .timeline li:nth-child(3) { --seg-from: #8C8FF0; --seg-to: var(--blue); }
  .timeline__dot { grid-row: 1 / span 2; }
  .timeline h3 { margin-top: 10px; font-size: 21px; }
}

/* Ce qui est compris + matériel */
.included__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
}
.included__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.included__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 14px 28px -24px rgba(23, 20, 28, 0.6);
  font-size: 16px;
  font-weight: 500;
}

.gear {
  position: relative;
  margin-top: 58px;
}
.gear::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 18px;
  right: -18px;
  bottom: -18px;
  border-radius: 28px;
  background: var(--accent);
}
.gear__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-radius: 28px;
  background: var(--blue);
  color: var(--cream);
}
.gear__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(247, 241, 232, 0.75);
}
.gear__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
}
.gear__list { margin-top: 28px; }
.gear__list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(247, 241, 232, 0.2);
}
.gear__list div:last-child { border-bottom: 1px solid rgba(247, 241, 232, 0.2); }
.gear__list dt {
  font-size: 15px;
  color: rgba(247, 241, 232, 0.75);
}
.gear__list dd {
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

@media (max-width: 959px) {
  .included__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .gear { margin-top: 0; max-width: 520px; }
}
@media (max-width: 639px) {
  .included__list { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .gear { margin-right: 12px; }
  .gear::before { top: 12px; left: 12px; right: -12px; bottom: -12px; }
  .gear__card { padding: 28px 24px; }
  .gear__title { font-size: 26px; }
}

/* Tarif */
.quote {
  padding-block: var(--pad-112);
  background: var(--peach);
}
.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: center;
}
.quote__intro { display: flex; flex-direction: column; align-items: flex-start; }
.quote__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rust);
}
.quote__from {
  margin-top: 14px;
  font-size: 15px;
  color: #7A4A33;
}
.quote__intro h2 { margin-top: 4px; line-height: 1; font-variant-numeric: tabular-nums; }
.quote__intro p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.7;
  color: #4A2616;
}
.quote__intro .btn { margin-top: 32px; }
.factors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.factor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 24px 40px -30px rgba(122, 58, 26, 0.8);
}
.factor h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.factor p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 1023px) {
  .quote__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 639px) {
  .factors { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .factor { padding: 22px; }
  .quote__intro .btn { width: 100%; --btn-h: 56px; }
}


/* 13. Réalisations
   ========================================================================== */

.hero--soft {
  padding-block: var(--pad-80) var(--pad-96);
  background: var(--blue-soft);
}
.hero--soft .hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 80px;
  align-items: end;
}
.hero--soft .hero__title { margin-top: 24px; }
.hero__halo {
  right: -100px;
  top: -140px;
  width: 420px;
  height: 420px;
  background: var(--white);
  opacity: 0.45;
}
.hero__sun {
  right: 260px;
  bottom: -70px;
  width: 140px;
  height: 140px;
  background: var(--accent);
  opacity: 0.85;
}

.work { padding-block: var(--pad-72) var(--pad-144); }
.work__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-56);
}

.filters {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--line);
}
.filters::-webkit-scrollbar { display: none; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn:focus-visible { outline-offset: -3px; }
.filter-btn[aria-pressed='true'] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.filter-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.filter-btn[aria-pressed='true'] .filter-btn__count { background: var(--accent); }

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 36px;
  align-items: start;
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.project-card__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: var(--p-bg, var(--blue));
  color: var(--p-fg, rgba(247, 241, 232, 0.85));
  box-shadow: 0 30px 50px -32px var(--p-shadow, rgba(44, 58, 224, 0.8));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.project-card__visual img,
.project-card__visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card__type {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: none;
}
.project-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}
.project-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.3px;
}
.project-card__meta {
  font-size: 15px;
  color: var(--muted);
}

/* Couleurs des visuels de remplacement, attribuées selon la position */
.project-card[data-tone='2'] { --p-bg: var(--accent); --p-fg: rgba(23, 20, 28, 0.7); --p-shadow: var(--accent); }
.project-card[data-tone='3'] { --p-bg: var(--ink); --p-fg: rgba(247, 241, 232, 0.75); --p-shadow: rgba(23, 20, 28, 0.8); }
.project-card[data-tone='4'] { --p-bg: var(--peach); --p-fg: var(--rust); --p-shadow: rgba(154, 52, 18, 0.5); }
.project-card[data-tone='5'] { --p-bg: var(--blue-soft); --p-fg: var(--blue); --p-shadow: rgba(44, 58, 224, 0.45); }
.project-card[data-tone='6'] { --p-bg: var(--gold-soft); --p-fg: var(--gold); --p-shadow: rgba(122, 90, 16, 0.5); }

@media (max-width: 1023px) {
  .hero--soft .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; }
}
@media (max-width: 639px) {
  .hero__sun { right: 40px; bottom: -90px; }
  .filters { gap: 28px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .filter-btn { font-size: 16px; padding-bottom: 14px; }
  .projects { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}


/* 14. Contact
   ========================================================================== */

.contact { padding-block: var(--pad-80) var(--pad-144); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: stretch;
}

.contact-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px;
  border-radius: 32px;
  background: var(--blue);
  color: var(--cream);
  --focus: var(--cream);
}
.contact-panel > :not(.deco) { position: relative; }
.contact-panel__blob {
  right: -90px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  background: var(--accent);
  opacity: 0.9;
}
.contact-panel__ring {
  right: 60px;
  top: -80px;
  width: 200px;
  height: 200px;
  border: 1.5px solid rgba(247, 241, 232, 0.2);
}
.contact-panel h1 { margin-top: 24px; }
.contact-panel__intro {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(247, 241, 232, 0.88);
}
.contact-points {
  margin-top: 36px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-point {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(247, 241, 232, 0.1);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.contact-point:hover { background: rgba(247, 241, 232, 0.16); }
.contact-point__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contact-point__label {
  font-size: 13px;
  color: rgba(247, 241, 232, 0.75);
}
.contact-point__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  overflow-wrap: break-word;
}
.contact-point__value.tabular { font-variant-numeric: tabular-nums; }
.next-title {
  margin-top: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}
.next-steps {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.next-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
}
.next-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.next-steps__num--cream { background: var(--cream); color: var(--blue); }

.form-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 48px;
  border-radius: 32px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(23, 20, 28, 0.04), 0 50px 90px -50px rgba(23, 20, 28, 0.55);
}
.form-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.361vw, 34px);
  letter-spacing: -0.8px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.field__label,
.field-group legend {
  font-size: 15px;
  font-weight: 600;
}
.field__input {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
}
textarea.field__input {
  height: 156px;
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}
.field__input::placeholder { color: var(--muted-2); }
.field__input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.field.is-invalid .field__input { border-color: var(--error); }
.field__error {
  font-size: 14px;
  color: var(--error);
}
.field__error:empty { display: none; }

.field-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field-group legend {
  margin-bottom: 12px;
  padding: 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--chip-bg, var(--peach));
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chip input:checked + span { background: var(--ink); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.chip--soft { --chip-bg: var(--blue-soft); }
.chip--gold { --chip-bg: var(--gold-soft); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--blue);
}
.consent label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent a { color: var(--ink); }
.consent-error { margin-top: -16px; }

.form-card .btn[type='submit'] { --btn-h: 62px; }
.form-card .btn[aria-busy='true'] { opacity: 0.7; cursor: progress; }
.form-status {
  font-size: 15px;
  line-height: 1.5;
  color: var(--error);
}
.form-status:empty { display: none; }

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  padding: 64px 48px;
  border-radius: 32px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(23, 20, 28, 0.04), 0 50px 90px -50px rgba(23, 20, 28, 0.55);
}
.form-success > :not(.deco) { position: relative; }
.form-success__blob {
  right: -100px;
  top: -100px;
  width: 320px;
  height: 320px;
  background: var(--blue-soft);
}
.form-success__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}
.form-success__msg {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form-success h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.333vw, 48px);
  line-height: 1.08;
  letter-spacing: -1.4px;
}
.form-success h2:focus { outline: none; }
.form-success p {
  max-width: 480px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
}
.form-success p strong { color: var(--ink); font-weight: 600; }
.form-success p a { color: var(--ink); font-weight: 600; }
.link-btn {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 639px) {
  .contact-panel { padding: 32px 22px; border-radius: 26px; }
  .contact-panel__blob { width: 220px; height: 220px; }
  .contact-point { padding: 14px; gap: 14px; }
  .contact-point__value { font-size: 17px; }
  .form-card { padding: 28px 20px; border-radius: 26px; gap: 22px; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .chip span { height: 44px; padding: 0 16px; }
  .form-card .btn[type='submit'] { --btn-h: 58px; }
  .form-success { padding: 44px 24px; border-radius: 26px; }
}


/* 15. Pages légales et 404
   ========================================================================== */

.page-intro {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-80) var(--pad-72);
  background: var(--sand);
}
.page-intro .container { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.page-intro h1 { margin-top: 24px; }
.page-intro p {
  margin-top: 20px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
}
.page-intro__sun {
  right: -60px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  background: var(--accent);
  opacity: 0.18;
}

.prose {
  max-width: 760px;
  padding-block: var(--pad-72) var(--pad-128);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.prose h2 {
  margin-top: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.todo {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--peach);
  color: var(--rust);
  font-weight: 600;
}

.not-found {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-128);
}
.not-found .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.not-found h1 { margin-top: 24px; }
.not-found p {
  margin-top: 24px;
  max-width: 560px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-2);
}
.not-found .hero__actions { margin-top: 40px; }


/* 16. Illustrations (maquettes décoratives)
   Toutes les cotes sont celles de la maquette, multipliées par --u :
   l'illustration garde ses proportions quelle que soit la largeur.
   ========================================================================== */

.art {
  --u: calc(100cqw / 568);
  position: relative;
  width: 100%;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
}
.art > * { position: absolute; }

/* Pièces communes */
.mock-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: calc(var(--bar-h, 30) * var(--u));
  gap: calc(var(--bar-gap, 6) * var(--u));
  padding: 0 calc(var(--bar-pad, 12) * var(--u));
  background: var(--sand);
}
.mock-dot {
  flex-shrink: 0;
  width: calc(var(--dot, 8) * var(--u));
  height: calc(var(--dot, 8) * var(--u));
  border-radius: 50%;
  background: var(--accent);
}
.mock-dot:nth-child(2) { background: #F2C94C; }
.mock-dot:nth-child(3) { background: #9CA3F5; }
.mock-url {
  flex: 1;
  height: calc(var(--url-h, 16) * var(--u));
  margin-left: calc(var(--url-ml, 12) * var(--u));
  border-radius: 999px;
  background: var(--white);
}
.sk {
  display: block;
  flex-shrink: 0;
  width: var(--w, 100%);
  height: calc(var(--h, 10) * var(--u));
  margin-top: calc(var(--mt, 0) * var(--u));
  border-radius: calc(var(--r, 4) * var(--u));
  background: var(--ink);
}
.sk--line { background: var(--line); }
.sk--accent { background: var(--accent); }
.sk--soft { background: var(--blue-soft); }
.sk--peach { background: var(--peach); }
.sk--gold { background: var(--gold-soft); }
.sk--blue { background: var(--blue); }
.sk-row {
  display: flex;
  gap: calc(var(--g, 8) * var(--u));
  margin-top: calc(var(--mt, 0) * var(--u));
}
.sk-row > .sk { flex: 1; }
.rec {
  position: absolute;
  display: inline-flex;
  align-items: center;
  color: var(--cream);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}
.rec__dot { border-radius: 50%; background: #FF4D3D; }
.play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.play svg { fill: currentColor; }
.progress {
  position: absolute;
  border-radius: 2px;
  background: rgba(247, 241, 232, 0.25);
}
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* Accueil — composition desktop (568 × 640) */
.art--home { aspect-ratio: 568 / 640; }
.ah-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(24 * var(--u));
  overflow: hidden;
  border-radius: calc(36 * var(--u));
  background: var(--blue);
}
.ah-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 241, 232, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 241, 232, 0.07) 1px, transparent 1px);
  background-size: calc(44 * var(--u)) calc(44 * var(--u));
}
.ah-bg__blob {
  position: absolute;
  right: calc(-120 * var(--u));
  bottom: calc(-160 * var(--u));
  width: calc(420 * var(--u));
  height: calc(420 * var(--u));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.ah-bg__ring {
  position: absolute;
  left: calc(-60 * var(--u));
  top: calc(-80 * var(--u));
  width: calc(260 * var(--u));
  height: calc(260 * var(--u));
  border: 1.5px solid rgba(247, 241, 232, 0.18);
  border-radius: 50%;
}
.ah-phone {
  --bar-h: 44; --dot: 8; --bar-gap: 6; --bar-pad: 14; --url-h: 16; --url-ml: 12;
  left: calc(88 * var(--u));
  top: calc(56 * var(--u));
  width: calc(300 * var(--u));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: calc(7 * var(--u)) solid var(--cream);
  border-radius: calc(34 * var(--u));
  background: var(--ink);
  box-shadow: 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-34 * var(--u)) rgba(10, 12, 60, 0.85);
}
.ah-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(18 * var(--u));
  background: var(--cream);
}
.ah-video {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(14 * var(--u));
  background: var(--ink);
}
.ah-video .rec { top: calc(10 * var(--u)); left: calc(12 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(10 * var(--u)); }
.ah-video .rec__dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.ah-video .play { width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: var(--accent); color: var(--ink); }
.ah-video .play svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ah-video .progress { left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(10 * var(--u)); height: calc(3 * var(--u)); }
.ah-video .progress span { width: 46%; }
.ah-cam {
  right: calc(24 * var(--u));
  top: calc(92 * var(--u));
  width: calc(292 * var(--u));
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(7 * var(--u)) solid var(--cream);
  border-radius: calc(22 * var(--u));
  background: var(--ink);
  box-shadow: 0 calc(46 * var(--u)) calc(80 * var(--u)) calc(-34 * var(--u)) rgba(10, 12, 60, 0.8);
}
.ah-cam__corner {
  position: absolute;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border: 0 solid rgba(247, 241, 232, 0.8);
}
.ah-cam__corner--tl { top: calc(12 * var(--u)); left: calc(14 * var(--u)); border-top-width: 2px; border-left-width: 2px; }
.ah-cam__corner--tr { top: calc(12 * var(--u)); right: calc(14 * var(--u)); border-top-width: 2px; border-right-width: 2px; }
.ah-cam__corner--bl { bottom: calc(12 * var(--u)); left: calc(14 * var(--u)); border-bottom-width: 2px; border-left-width: 2px; }
.ah-cam__corner--br { bottom: calc(12 * var(--u)); right: calc(14 * var(--u)); border-bottom-width: 2px; border-right-width: 2px; }
.ah-cam__focus {
  width: calc(96 * var(--u));
  height: calc(62 * var(--u));
  border: 1.5px solid var(--accent);
  border-radius: calc(6 * var(--u));
}
.ah-badge {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(42 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: 999px;
  box-shadow: 0 calc(16 * var(--u)) calc(32 * var(--u)) calc(-14 * var(--u)) rgba(10, 12, 60, 0.8);
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ah-badge svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.ah-badge--site { left: calc(60 * var(--u)); top: calc(28 * var(--u)); background: var(--cream); color: var(--ink); }
.ah-badge--site svg { color: var(--blue); }
.ah-badge--video { right: calc(8 * var(--u)); top: calc(64 * var(--u)); background: var(--accent); color: var(--ink); }
.ah-arrow {
  z-index: 1;
  right: calc(236 * var(--u));
  top: calc(236 * var(--u));
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  overflow: visible;
  color: rgba(247, 241, 232, 0.8);
}
.ah-card {
  z-index: 2;
  right: calc(40 * var(--u));
  bottom: calc(52 * var(--u));
  max-width: calc(268 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--cream);
  box-shadow: 0 calc(30 * var(--u)) calc(56 * var(--u)) calc(-24 * var(--u)) rgba(10, 12, 60, 0.7);
}
.ah-card__label {
  font-size: max(10px, calc(12 * var(--u)));
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.ah-card__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(14px, calc(22 * var(--u)));
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}

/* Accueil — composition mobile (350 × 360) */
.art--home-m {
  --u: calc(100cqw / 350);
  display: none;
  aspect-ratio: 350 / 360;
}
@media (max-width: 639px) {
  .art--home { display: none; }
  .art--home-m { display: block; }
}
.ahm-bg {
  inset: 0;
  overflow: hidden;
  border-radius: calc(28 * var(--u));
  background: var(--blue);
}
.ahm-bg__ring {
  position: absolute;
  right: calc(-80 * var(--u));
  top: calc(-80 * var(--u));
  width: calc(240 * var(--u));
  height: calc(240 * var(--u));
  border: 1.5px solid rgba(247, 241, 232, 0.2);
  border-radius: 50%;
}
.ahm-browser {
  --bar-h: 22; --dot: 7; --bar-gap: 5; --bar-pad: 10;
  left: calc(24 * var(--u));
  top: calc(32 * var(--u));
  width: calc(250 * var(--u));
  height: calc(170 * var(--u));
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: var(--white);
  box-shadow: 0 calc(30 * var(--u)) calc(50 * var(--u)) calc(-24 * var(--u)) rgba(5, 8, 50, 0.7);
}
.ahm-browser__body {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  padding: calc(14 * var(--u));
}
.ahm-video {
  right: calc(20 * var(--u));
  bottom: calc(28 * var(--u));
  width: calc(210 * var(--u));
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(5 * var(--u)) solid var(--cream);
  border-radius: calc(16 * var(--u));
  background: var(--ink);
  box-shadow: 0 calc(30 * var(--u)) calc(50 * var(--u)) calc(-24 * var(--u)) rgba(5, 8, 50, 0.8);
}
.ahm-video .rec { top: calc(9 * var(--u)); left: calc(11 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; }
.ahm-video .rec__dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.ahm-video .play { width: calc(40 * var(--u)); height: calc(40 * var(--u)); background: var(--accent); color: var(--ink); }
.ahm-video .play svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ahm-card {
  z-index: 2;
  left: calc(14 * var(--u));
  bottom: calc(34 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--white);
  box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(23, 20, 28, 0.5);
}
.ahm-card__label { font-size: 11px; font-weight: 600; color: var(--muted); }
.ahm-card__text { font-family: var(--font-display); font-weight: 800; font-size: 18px; }

/* Site web — navigateur + téléphone (568 × 480) */
.art--web,
.art--video { aspect-ratio: 568 / 480; }
.aw-browser {
  --bar-h: 38; --dot: 10; --bar-gap: 7; --bar-pad: 14; --url-h: 18; --url-ml: 14;
  right: 0;
  top: calc(20 * var(--u));
  width: calc(500 * var(--u));
  height: calc(330 * var(--u));
  overflow: hidden;
  border-radius: calc(18 * var(--u));
  background: var(--white);
  box-shadow: 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(5, 8, 50, 0.85);
}
.aw-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: calc(18 * var(--u));
  padding: calc(24 * var(--u));
}
.aw-hero__text { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.aw-hero__media { height: calc(140 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--ink); }
.aw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12 * var(--u));
  padding: 0 calc(24 * var(--u));
}
.aw-phone {
  left: calc(10 * var(--u));
  bottom: 0;
  width: calc(180 * var(--u));
  height: calc(360 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--ink);
  box-shadow: 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(5, 8, 50, 0.9);
}
.aw-screen {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(26 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-radius: calc(24 * var(--u));
  background: var(--cream);
}
.aw-notch { align-self: center; margin-bottom: calc(6 * var(--u)); opacity: 0.2; }
.aw-badge {
  z-index: 2;
  left: calc(224 * var(--u));
  top: calc(401 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(53 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-20 * var(--u)) rgba(5, 8, 50, 0.7);
  font-size: max(12px, calc(15 * var(--u)));
  font-weight: 600;
  white-space: nowrap;
}
.aw-badge__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--accent);
}
.aw-badge__check svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* Vidéo — écran 16:9 + format vertical (568 × 480) */
.av-frame {
  right: 0;
  top: calc(30 * var(--u));
  width: calc(500 * var(--u));
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(8 * var(--u)) solid var(--cream);
  border-radius: calc(24 * var(--u));
  background: var(--ink);
  box-shadow: 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(70, 20, 0, 0.85);
}
.av-frame .rec { top: calc(16 * var(--u)); left: calc(18 * var(--u)); gap: calc(8 * var(--u)); font-size: max(9px, calc(12 * var(--u))); font-weight: 600; }
.av-frame .rec__dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.av-ratio {
  position: absolute;
  top: calc(16 * var(--u));
  right: calc(18 * var(--u));
  color: rgba(247, 241, 232, 0.7);
  font-size: max(9px, calc(12 * var(--u)));
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
}
.av-frame .play { width: calc(72 * var(--u)); height: calc(72 * var(--u)); background: var(--accent); color: var(--ink); }
.av-frame .play svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.av-frame .progress {
  left: calc(18 * var(--u));
  right: calc(18 * var(--u));
  bottom: calc(18 * var(--u));
  height: calc(4 * var(--u));
  background: rgba(247, 241, 232, 0.2);
}
.av-frame .progress span { width: 100%; }
.av-phone {
  left: calc(30 * var(--u));
  bottom: 0;
  width: calc(190 * var(--u));
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(8 * var(--u));
  padding: calc(16 * var(--u));
  border: calc(8 * var(--u)) solid var(--ink);
  border-radius: calc(30 * var(--u));
  background: var(--blue);
  box-shadow: 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(70, 20, 0, 0.9);
}
.av-phone__notch {
  position: absolute;
  top: calc(14 * var(--u));
  left: 50%;
  width: calc(40 * var(--u));
  height: calc(5 * var(--u));
  margin-left: calc(-20 * var(--u));
  border-radius: 3px;
  background: rgba(247, 241, 232, 0.35);
}
.av-phone .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  margin: calc(-24 * var(--u)) 0 0 calc(-24 * var(--u));
  background: var(--cream);
  color: var(--blue);
}
.av-phone .play svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.av-phone__line {
  display: block;
  height: calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
}
.av-phone__line--1 { width: 80%; background: rgba(247, 241, 232, 0.8); }
.av-phone__line--2 { width: 55%; background: rgba(247, 241, 232, 0.5); }
.av-phone__side {
  position: absolute;
  right: -2px;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding-right: calc(10 * var(--u));
}
.av-phone__side span {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: rgba(247, 241, 232, 0.8);
}
.av-badge {
  z-index: 2;
  right: calc(60 * var(--u));
  bottom: calc(40 * var(--u));
  display: inline-flex;
  align-items: center;
  height: calc(46 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-20 * var(--u)) rgba(70, 20, 0, 0.6);
  font-size: max(12px, calc(15 * var(--u)));
  font-weight: 600;
  white-space: nowrap;
}

/* Cartes de service (accueil) — la maquette suit la largeur de la carte (586 px) */
.sc-mock {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.sc-mock--site {
  --bar-h: 30; --dot: 8; --bar-gap: 6; --bar-pad: 12;
  right: calc(-36 * var(--u));
  bottom: calc(-28 * var(--u));
  width: calc(330 * var(--u));
  height: calc(250 * var(--u));
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  background: var(--white);
  transform: rotate(-5deg);
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(10, 12, 60, 0.6);
}
.sc-mock__body {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(18 * var(--u));
}
.sc-mock--video {
  right: calc(-30 * var(--u));
  bottom: calc(-20 * var(--u));
  width: calc(320 * var(--u));
  height: calc(210 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(6 * var(--u)) solid var(--cream);
  border-radius: calc(20 * var(--u));
  background: var(--ink);
  transform: rotate(5deg);
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(60, 20, 0, 0.6);
}
.sc-mock--video .play { width: calc(56 * var(--u)); height: calc(56 * var(--u)); background: var(--cream); color: var(--ink); }
.sc-mock--video .play svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sc-mock--video .progress {
  left: calc(14 * var(--u));
  right: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  height: calc(4 * var(--u));
  background: rgba(247, 241, 232, 0.2);
}
.sc-mock--video .progress span { width: 55%; }


/* 17. Animations
   ========================================================================== */

.draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: mnlDraw 1.1s 0.6s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
@keyframes mnlDraw { to { stroke-dashoffset: 0; } }

.float { animation: mnlFloat 6s ease-in-out infinite; }
@keyframes mnlFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.blink { animation: mnlBlink 1.4s steps(1) infinite; }
@keyframes mnlBlink { 50% { opacity: 0; } }

.af { animation: mnlAF 3s ease-in-out infinite; }
@keyframes mnlAF {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(0.88); opacity: 0.5; }
}

.scrub {
  transform-origin: left;
  animation: mnlScrub 8s linear infinite;
}
@keyframes mnlScrub {
  from { transform: scaleX(0.05); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .draw { stroke-dashoffset: 0; }
}


/* 18. Micro-interactions
   Des effets discrets qui accompagnent la visite sans attirer l'œil.
   Tous disparaissent si le visiteur a demandé à réduire les animations.
   ========================================================================== */

::selection { background: var(--accent); color: var(--ink); }

/* Passage d'une page à l'autre en fondu (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Apparition des blocs au défilement (activée par le script) */
.reveal-on .reveal {
  opacity: 0;
  translate: 0 32px;
  filter: blur(6px);
}
.reveal-on .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition:
    opacity 0.8s var(--ease-out) var(--reveal-delay, 0ms),
    translate 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    filter 0.9s ease var(--reveal-delay, 0ms);
}

/* Boutons : la flèche avance, l'appui s'enfonce à peine */
.btn { transition: transform 0.15s ease, background-color 0.2s ease, filter 0.2s ease; }
.btn > svg:last-child { transition: transform 0.25s var(--ease-out); }
.btn:active { transform: scale(0.97); transition-duration: 0.08s; }
@media (hover: hover) {
  .btn:hover > svg:last-child { transform: translateX(3px); }
  .btn--accent:hover,
  .btn--ink:hover { filter: brightness(1.08); }
  .btn--cream:hover { background: var(--white); }
  .btn--outline:hover { background: rgba(23, 20, 28, 0.05); }
  .btn--outline-light:hover { background: rgba(247, 241, 232, 0.1); }
}

/* Pastilles et icônes qui réagissent au survol des cartes */
.icon-tile,
.step-num,
.timeline__dot,
.service-card__cta svg { transition: transform 0.35s var(--ease-out); }
@media (hover: hover) {
  .feature-card:hover .icon-tile,
  .factor:hover .icon-tile { transform: scale(1.08) rotate(-5deg); }
  .step-card:hover .step-num,
  .timeline li:hover .timeline__dot { transform: scale(1.1); }
  .care__points li:hover .icon-tile { transform: translateX(3px); }
  a.contact-point:hover .icon-tile { transform: scale(1.06); }
  .service-card:hover .service-card__cta svg { transform: translateX(3px); }
}

/* Cartes de service : les maquettes se redressent doucement */
.sc-mock { transition: transform 0.7s var(--ease-out); }
@media (hover: hover) {
  .service-card:hover .sc-mock--site { transform: rotate(-2deg) translateY(-8px); }
  .service-card:hover .sc-mock--video { transform: rotate(2deg) translateY(-8px); }
}

/* Photos : zoom très léger */
.about__photo img,
.project-card__visual img,
.project-card__visual video { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) {
  .about__media:hover .about__photo img,
  .project-card:hover .project-card__visual img,
  .project-card:hover .project-card__visual video { transform: scale(1.04); }
}

/* Liens du pied de page : le soulignement apparaît en douceur */
.footer-col a,
.site-footer__legal a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 7px;
  transition: text-decoration-color 0.25s ease, text-underline-offset 0.25s ease, color 0.2s ease;
}
.footer-col a:hover,
.site-footer__legal a:hover {
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

/* Formulaire */
.field__input { transition: border-color 0.2s ease, background-color 0.2s ease; }
.field__input:hover { border-color: #CDBFAD; }
.field__input:focus { border-color: var(--blue); background: var(--white); }
.chip span { transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s var(--ease-out); }
@media (hover: hover) {
  .chip:hover span { transform: translateY(-1px); }
}

/* Menu mobile : les liens arrivent l'un après l'autre */
.mobile-menu[open] .mobile-menu__nav a,
.mobile-menu[open] .mobile-menu__actions { animation: mnlRise 0.45s var(--ease-out) both; }
.mobile-menu[open] .mobile-menu__nav a:nth-child(2) { animation-delay: 0.04s; }
.mobile-menu[open] .mobile-menu__nav a:nth-child(3) { animation-delay: 0.08s; }
.mobile-menu[open] .mobile-menu__nav a:nth-child(4) { animation-delay: 0.12s; }
.mobile-menu[open] .mobile-menu__nav a:nth-child(5) { animation-delay: 0.16s; }
.mobile-menu[open] .mobile-menu__actions { animation-delay: 0.22s; }
@keyframes mnlRise {
  from { opacity: 0; translate: 0 10px; }
}

/* Formes d'arrière-plan : dérive très lente, presque imperceptible */
.deco,
.ah-bg__blob,
.ah-bg__ring,
.ahm-bg__ring { animation: mnlDrift 24s ease-in-out infinite alternate; }
.deco:nth-of-type(2n),
.ah-bg__ring { animation-duration: 30s; animation-direction: alternate-reverse; }
@keyframes mnlDrift {
  from { translate: 0 0; }
  to { translate: 16px -20px; }
}
.ah-bg::before { animation: mnlGrid 40s linear infinite; }
@keyframes mnlGrid {
  to { background-position: calc(44 * var(--u)) calc(44 * var(--u)); }
}

/* Illustrations : légère profondeur qui suit la souris (script) */
.art > * {
  translate: calc(var(--px, 0) * var(--depth, 0) * 1px) calc(var(--py, 0) * var(--depth, 0) * 1px);
  transition: translate 0.9s var(--ease-out);
}
.ah-bg { --depth: 4; }
.ah-phone,
.aw-browser,
.av-frame { --depth: 8; }
.ah-arrow { --depth: 10; }
.ah-card { --depth: 12; }
.ah-cam,
.aw-phone,
.av-phone { --depth: 13; }
.ah-badge,
.aw-badge,
.av-badge { --depth: 17; }


/* 19. Lumières, bandeau défilant et séquence vidéo (mise à jour novembre 2026)
   Repris de la maquette Claude Design la plus récente.
   ========================================================================== */

main { overflow-x: clip; }

/* Halos lumineux qui « respirent » derrière les visuels */
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: mnlHalo 8s ease-in-out infinite;
}
.halo--late { animation-delay: -4s; }
@keyframes mnlHalo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.15); }
}

/* Reflet de lumière qui balaie une surface */
.sweep {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 35%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: rotate(18deg);
  pointer-events: none;
  animation: mnlSweep 6s ease-in-out infinite;
}
@keyframes mnlSweep {
  0% { left: -60%; }
  55%, 100% { left: 140%; }
}

/* Accueil : halo + reflet dans le panneau bleu du hero */
.ah-bg__halo {
  left: 30%;
  top: 30%;
  width: calc(320 * var(--u));
  height: calc(320 * var(--u));
  background: #8C8FF0;
}
.ahm-bg { overflow: hidden; }
.ahm-bg__halo { left: 20%; top: 25%; width: 220px; height: 220px; background: #8C8FF0; filter: blur(50px); }

/* Accueil : bandeau défilant (sobre) */
.marquee-band {
  position: relative;
  margin: -40px 0 var(--pad-128);
  padding: 22px 0;
  border-top: 1px solid rgba(25, 23, 32, 0.14);
  border-bottom: 1px solid rgba(25, 23, 32, 0.14);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marquee {
  display: flex;
  width: max-content;
  animation: mnlMarquee 60s linear infinite;
}
.marquee__set {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mq-word--alt {
  font-weight: 400;
  font-style: italic;
  color: var(--muted, #6B6672);
}
.mq-star {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: var(--accent);
}
@keyframes mnlMarquee { to { transform: translateX(-50%); } }
@media (hover: hover) {
  .marquee-band:hover .marquee { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}
@media (max-width: 639px) {
  .marquee-band { margin-top: -16px; padding: 16px 0; }
  .marquee__set { gap: 22px; padding-right: 22px; }
  .mq-star { width: 10px; height: 10px; }
}

/* Combo (accueil) et cartes sombres : reflet */
.combo { isolation: isolate; }
.combo > .sweep { position: absolute; z-index: -1; }

/* Site web : prix « Sur devis » */
.price-card__price--quote,
.service-card__price strong.is-quote,
.combo__price strong.is-quote { letter-spacing: -0.02em; }
.price-card__price--quote { font-size: 40px; line-height: 1.1; }

/* Site web : halo derrière la formule Standard et reflet sur la carte */
.price-card-wrap > .halo {
  left: 5%;
  top: 8%;
  width: 90%;
  height: 84%;
  background: var(--accent);
  z-index: -1;
}
.price-card-wrap { isolation: isolate; }
.price-card--featured > .sweep { z-index: 1; }

/* Site web : halos des sections bleues */
.hero--blue > .halo,
.care > .halo { z-index: 0; }
.hero--blue .container,
.care .container { position: relative; z-index: 1; }

/* Site web : garanties */
.guarantees__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.guarantee {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  border-radius: 24px;
}
.guarantee h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.guarantee p { font-size: 16px; line-height: 1.65; }
.guarantee--blue { background: var(--blue-soft); }
.guarantee--blue h3 { color: var(--blue); }
.guarantee--blue p { color: #2A2F63; }
.guarantee--peach { background: var(--peach); }
.guarantee--peach h3 { color: var(--rust); }
.guarantee--peach p { color: #4A2616; }
.guarantee--gold { background: var(--gold-soft); }
.guarantee--gold h3 { color: var(--gold); }
.guarantee--gold p { color: #4A3A12; }
@media (max-width: 899px) {
  .guarantees__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .guarantee { padding: 28px; }
}

/* Vidéo : halos du hero orange, écran avec grille de cadrage */
.hero--accent > .halo { z-index: 0; }
.hero--accent .container { position: relative; z-index: 1; }
.av-frame {
  overflow: hidden;
  background: radial-gradient(120% 100% at 30% 20%, #3A2E4A 0%, var(--ink) 70%);
}
.av-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 0.5px), rgba(247, 241, 232, 0.12) calc(33.3% - 0.5px), rgba(247, 241, 232, 0.12) calc(33.3% + 0.5px), transparent calc(33.3% + 0.5px)),
    linear-gradient(90deg, transparent calc(66.6% - 0.5px), rgba(247, 241, 232, 0.12) calc(66.6% - 0.5px), rgba(247, 241, 232, 0.12) calc(66.6% + 0.5px), transparent calc(66.6% + 0.5px)),
    linear-gradient(transparent calc(33.3% - 0.5px), rgba(247, 241, 232, 0.12) calc(33.3% - 0.5px), rgba(247, 241, 232, 0.12) calc(33.3% + 0.5px), transparent calc(33.3% + 0.5px)),
    linear-gradient(transparent calc(66.6% - 0.5px), rgba(247, 241, 232, 0.12) calc(66.6% - 0.5px), rgba(247, 241, 232, 0.12) calc(66.6% + 0.5px), transparent calc(66.6% + 0.5px));
}
.av-timecode {
  position: absolute;
  right: calc(18 * var(--u));
  bottom: calc(30 * var(--u));
  color: rgba(247, 241, 232, 0.75);
  font-size: max(8px, calc(11 * var(--u)));
  font-weight: 600;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

/* Vidéo : nouvelles illustrations des usages */
.use-card__visual { position: relative; overflow: hidden; }
.use-card__visual > * { position: relative; }
.use-card__visual > .halo,
.use-card__visual > .uv2-grid,
.use-card__visual > .uv2-cursor,
.use-card__visual > .uv2-heart { position: absolute; }
.uv2-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 241, 232, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 241, 232, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.uv2-browser {
  width: 68%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream);
  box-shadow: 0 24px 40px -18px rgba(5, 8, 50, 0.8);
}
.uv2-browser .mock-bar { --bar-h: 18; --dot: 6; --bar-gap: 4; --bar-pad: 8; --u: 1px; }
.uv2-browser .mock-url { --url-h: 8; --url-ml: 8; }
.uv2-hero {
  position: relative;
  overflow: hidden;
  height: 92px;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  background: linear-gradient(135deg, var(--ink) 0%, #3A2E4A 100%);
}
.uv2-lines { position: relative; display: flex; flex-direction: column; gap: 5px; }
.uv2-lines span { height: 8px; border-radius: 3px; background: var(--cream); }
.uv2-lines span:first-child { width: 92px; }
.uv2-lines span:last-child { width: 58px; opacity: 0.55; }
.uv2-live {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}
.uv2-live i { width: 5px; height: 5px; border-radius: 50%; background: #FF4D3D; }
.uv2-progress { height: 3px; background: var(--line); }
.uv2-progress span { display: block; height: 100%; background: var(--accent); }
.uv2-tiles { display: flex; gap: 6px; padding: 8px 10px; }
.uv2-tiles span { flex: 1; height: 18px; border-radius: 4px; background: var(--blue-soft); }
.uv2-tiles span:nth-child(2) { background: var(--peach); }
.uv2-tiles span:nth-child(3) { background: var(--gold-soft); }
.uv2-cursor { left: 63%; top: 60%; }

.uv2-phone {
  height: 84%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 10px 8px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(170deg, var(--blue) 0%, var(--ink) 85%);
  box-shadow: 0 26px 40px -18px rgba(70, 20, 0, 0.75);
}
.uv2-story { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 3px; }
.uv2-story span { flex: 1; height: 2px; border-radius: 1px; background: var(--cream); }
.uv2-story span:last-child { opacity: 0.35; }
.uv2-actions { position: absolute; right: 6px; bottom: 38px; display: flex; flex-direction: column; gap: 8px; color: var(--cream); }
.uv2-caption { position: relative; height: 5px; border-radius: 3px; background: var(--cream); }
.uv2-caption--1 { width: 76%; }
.uv2-caption--2 { width: 50%; opacity: 0.55; }
.uv2-heart { opacity: 0; animation: mnlRiseHeart 3.2s ease-out infinite; }
.uv2-heart--1 { left: 60%; bottom: 22%; color: var(--cream); }
.uv2-heart--2 { left: 64%; bottom: 18%; color: var(--ink); animation-delay: 1.1s; }
.uv2-heart--3 { left: 58%; bottom: 14%; color: #FFF1D6; animation-delay: 2.1s; }
@keyframes mnlRiseHeart {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-80px) scale(1.1); opacity: 0; }
}

.use-card__visual--story { flex-direction: column; align-items: stretch; gap: 16px; padding: 0 24px; }
.uv2-film {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  border-radius: 6px;
  background: #2A2530;
  transform: rotate(-3deg);
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.8);
}
.uv2-holes { display: flex; justify-content: space-between; padding: 0 8px; }
.uv2-holes span { width: 7px; height: 4px; border-radius: 1px; background: var(--ink); }
.uv2-frames { display: flex; gap: 4px; padding: 0 8px; }
.uv2-frames span { flex: 1; height: 46px; border-radius: 3px; }
.uv2-frames span:nth-child(1) { background: linear-gradient(135deg, var(--blue), #8C8FF0); }
.uv2-frames span:nth-child(2) { background: linear-gradient(135deg, var(--accent), #F2A36F); }
.uv2-frames span:nth-child(3) { background: linear-gradient(135deg, var(--gold-soft), #E9BFA5); }
.uv2-frames span:nth-child(4) { background: linear-gradient(135deg, #3A2E4A, #6B5A7A); }
.uv2-timeline { display: flex; flex-direction: column; gap: 4px; }
.uv2-track { display: flex; gap: 3px; }
.uv2-track span { height: 10px; border-radius: 3px; }
.uv2-track--audio span { height: 8px; background: #4A8F6E; }
.uv2-playhead {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  border-radius: 1px;
  background: var(--cream);
  box-shadow: 0 0 10px rgba(247, 241, 232, 0.9);
  animation: sxPlayhead 6s linear infinite;
}

/* Vidéo : séquence « Du repérage à la livraison » */
.process > .halo { z-index: 0; }
.proc {
  position: relative;
  margin-top: var(--gap-72);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.proc__tabs { display: flex; flex-direction: column; gap: 12px; }
.proc-tab {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid rgba(247, 241, 232, 0.08);
  border-radius: 20px;
  background: transparent;
  color: var(--cream);
  text-align: left;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.proc-tab:hover { border-color: rgba(247, 241, 232, 0.18); }
.proc-tab[aria-pressed="true"] { background: rgba(247, 241, 232, 0.08); border-color: rgba(247, 241, 232, 0.22); }
.proc-tab__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(247, 241, 232, 0.1);
  font-weight: 800;
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.proc-tab.is-done .proc-tab__num { background: var(--blue); }
.proc-tab[aria-pressed="true"] .proc-tab__num { background: var(--accent); color: var(--ink); }
.proc-tab__body { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.proc-tab__title { font-weight: 700; font-size: 21px; letter-spacing: -0.015em; color: rgba(247, 241, 232, 0.6); transition: color 0.3s ease; }
.proc-tab[aria-pressed="true"] .proc-tab__title { color: var(--cream); }
.proc-tab__text { display: none; font-size: 15px; line-height: 1.55; color: var(--night-soft); }
.proc-tab[aria-pressed="true"] .proc-tab__text { display: block; animation: sxDrop 0.6s var(--ease-out) both; }
.proc-tab__bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(247, 241, 232, 0.1); }
.proc-tab[aria-pressed="true"] .proc-tab__bar { display: block; }
.proc-tab__fill { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: sxFill 5.5s linear forwards; }
.proc:not(.is-running) .proc-tab__bar { display: none; }

.stage {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid rgba(247, 241, 232, 0.12);
  border-radius: 28px;
  background: #0E0C12;
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.9);
}
.stage__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 680px;
  height: 467.5px;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
}
.stage__hud {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  pointer-events: none;
}
.stage__label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(247, 241, 232, 0.14);
  border-radius: 999px;
  background: rgba(23, 20, 28, 0.6);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.stage__toggle {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247, 241, 232, 0.2);
  border-radius: 50%;
  background: rgba(23, 20, 28, 0.6);
  backdrop-filter: blur(8px);
  color: var(--cream);
}
.stage__toggle .icon-play { display: none; }
.proc.is-paused .stage__toggle .icon-play { display: block; }
.proc.is-paused .stage__toggle .icon-pause { display: none; }
.proc.is-paused .stage *,
.proc.is-paused .proc-tab__fill { animation-play-state: paused !important; }

/* Une scène = un plan : elle arrive floue et grossie, fait la mise au point, puis la caméra avance doucement */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: sxScene 5.5s cubic-bezier(0.22, 0.68, 0, 1) forwards;
}
.scene .halo { filter: blur(60px); }
.sx-drop { opacity: 0; animation: sxDrop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.sx-pop { opacity: 0; animation: sxPop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
.sx-ping { opacity: 0; animation: sxPing 2s ease-out infinite; }
.sx-trace { stroke-dasharray: 520; stroke-dashoffset: 520; animation: sxTrace 2.4s 0.3s cubic-bezier(0.6, 0, 0.3, 1) forwards; }
.sx-af { animation: sxAF 2.4s ease-in-out infinite; }
.sx-clap { transform-origin: left bottom; animation: sxClap 1s 0.5s cubic-bezier(0.6, 0, 0.4, 1) both; }
.sx-flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; animation: sxFlash 0.6s 1.1s ease-out; }
.sx-bar { transform-origin: bottom; animation: sxBar 0.9s ease-in-out infinite alternate; }
.sx-slide { opacity: 0; animation: sxSlide 0.6s cubic-bezier(0.22, 0.68, 0, 1) forwards; }
.sx-wipe { animation: sxWipe 3s ease-in-out infinite alternate; }
.sx-orbit { animation: sxOrbit 2.6s ease-in-out infinite alternate; }
.sx-load { transform-origin: left; transform: scaleX(0); animation: sxLoad 1.9s 1.7s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
.sx-playhead { animation: sxPlayhead 5.5s linear infinite; }

@keyframes sxScene {
  0% { opacity: 0; transform: scale(1.4); filter: blur(10px); }
  14% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 1; transform: scale(1.07); filter: blur(0); }
}
@keyframes sxFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sxDrop { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes sxPop { from { opacity: 0; transform: translateY(30px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes sxPing { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sxTrace { to { stroke-dashoffset: 0; } }
@keyframes sxAF { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(0.86); opacity: 0.55; } }
@keyframes sxClap { 0% { transform: rotate(-30deg); } 60% { transform: rotate(0); } 78% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes sxFlash { 0% { opacity: 0.45; } 100% { opacity: 0; } }
@keyframes sxBar { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes sxSlide { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes sxWipe { from { width: 12%; } to { width: 72%; } }
@keyframes sxOrbit { 0% { transform: translate(-8px, 6px); } 50% { transform: translate(7px, -6px); } 100% { transform: translate(3px, 8px); } }
@keyframes sxLoad { to { transform: scaleX(1); } }
@keyframes sxPlayhead { from { left: 0; } to { left: 100%; } }

@media (max-width: 899px) {
  .proc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .proc__stage { order: -1; }
  .proc-tab { padding: 16px 18px; gap: 14px; }
  .proc-tab__num { width: 36px; height: 36px; font-size: 14px; }
  .proc-tab__body { padding-top: 6px; }
  .proc-tab__title { font-size: 18px; }
  .stage { border-radius: 20px; }
  .stage__hud { padding: 12px; }
  .stage__label { height: 28px; padding: 0 12px; font-size: 12px; }
}

/* Accessibilité : sans animation, tout reste visible et immobile */
@media (prefers-reduced-motion: reduce) {
  .sx-drop, .sx-pop, .sx-slide { opacity: 1 !important; }
  .sx-trace { stroke-dashoffset: 0 !important; }
  .sx-load { transform: none !important; }
  .reveal-on .reveal { filter: none; }
}

/* Pièces des scènes (dessinées pour un plateau de 680 × 467 px, mis à l'échelle par le script) */
.stage__canvas { font-family: var(--font-body); color: var(--cream); }
.scene > *,
.sx-abs { position: absolute; }
.scene > .sweep { position: absolute; }
.sx-pin { width: 0; height: 0; color: var(--pin); }
.sx-ping { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border: 2px solid var(--pin); border-radius: 50%; }
.sx-pin__icon { position: absolute; left: -14px; top: -36px; display: block; }
.sx-pin__label {
  position: absolute;
  left: 20px;
  top: -34px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.sx-pin--left .sx-pin__label { left: auto; right: 20px; }
.sx-glass {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid rgba(247, 241, 232, 0.16);
  border-radius: 16px;
  background: rgba(247, 241, 232, 0.08);
  backdrop-filter: blur(8px);
  color: var(--night-soft);
  font-size: 13px;
}
.sx-glass__title { color: var(--cream); font-weight: 700; font-size: 14px; }
.sx-thirds {
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 0.5px), rgba(247, 241, 232, 0.14) calc(33.3% - 0.5px), rgba(247, 241, 232, 0.14) calc(33.3% + 0.5px), transparent calc(33.3% + 0.5px)),
    linear-gradient(90deg, transparent calc(66.6% - 0.5px), rgba(247, 241, 232, 0.14) calc(66.6% - 0.5px), rgba(247, 241, 232, 0.14) calc(66.6% + 0.5px), transparent calc(66.6% + 0.5px)),
    linear-gradient(transparent calc(33.3% - 0.5px), rgba(247, 241, 232, 0.14) calc(33.3% - 0.5px), rgba(247, 241, 232, 0.14) calc(33.3% + 0.5px), transparent calc(33.3% + 0.5px)),
    linear-gradient(transparent calc(66.6% - 0.5px), rgba(247, 241, 232, 0.14) calc(66.6% - 0.5px), rgba(247, 241, 232, 0.14) calc(66.6% + 0.5px), transparent calc(66.6% + 0.5px));
}
.sx-corner { width: 26px; height: 26px; border: 0 solid var(--cream); }
.sx-hud {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.sx-meters { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.sx-meters .sx-bar { width: 4px; height: 100%; border-radius: 2px; background: #4ADE80; }
.sx-meters__text { margin-left: 10px; font-size: 12px; font-weight: 600; opacity: 0.85; }
.sx-clapboard { width: 120px; }
.sx-clap {
  display: block;
  height: 18px;
  border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(135deg, var(--cream) 0 12px, var(--ink) 12px 24px);
}
.sx-clapboard__body {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding: 10px 12px;
  border: 1.5px solid var(--cream);
  border-radius: 0 0 6px 6px;
  background: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.sx-preview { overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, var(--blue) 0%, #8C8FF0 55%, var(--accent) 100%); }
.sx-tag { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.sx-grading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(247, 241, 232, 0.1);
  border-radius: 14px;
  background: var(--ink);
}
.sx-grading__title { font-size: 11px; font-weight: 700; letter-spacing: 1px; opacity: 0.7; }
.sx-wheels { display: flex; justify-content: space-between; }
.sx-wheel {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(#FF5A5A, #F2C94C, #4ADE80, #4FD1E8, #6B6BFF, #E85AD8, #FF5A5A);
  opacity: 0.85;
}
.sx-wheel .sx-orbit {
  position: absolute;
  left: 19px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--ink);
}
.sx-grading__ramp { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink), var(--cream)); }
.sx-editor {
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(247, 241, 232, 0.08);
  border-radius: 14px;
  background: var(--ink);
}
.sx-editor__inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.sx-track { display: flex; gap: 4px; height: 22%; }
.sx-track > span { border-radius: 4px; }
.sx-wave { display: flex; align-items: center; gap: 3px; height: 30%; }
.sx-wave .sx-bar { flex: 1; border-radius: 2px; background: #4ADE80; transform-origin: center; }
.sx-editor__head {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  border-radius: 1px;
  background: var(--cream);
  box-shadow: 0 0 12px var(--accent);
}
.sx-laptop { display: block; }
.sx-laptop__screen {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 6px solid #2A2530;
  border-radius: 12px;
  background: var(--cream);
}
.sx-laptop__video {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ink), #3A2E4A);
}
.sx-play { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); }
.sx-laptop__base { display: block; height: 9px; margin: 0 -6%; border-radius: 0 0 10px 10px; background: #3A3440; }
.sx-device { overflow: hidden; border: 5px solid #2A2530; }
.sx-device--phone { aspect-ratio: 9 / 19; border-radius: 18px; background: linear-gradient(170deg, var(--accent) 0%, var(--ink) 90%); }
.sx-device--post { aspect-ratio: 1; border-width: 4px; border-radius: 10px; background: linear-gradient(135deg, var(--gold-soft), #E9BFA5); }
.sx-export { gap: 10px; color: var(--cream); }
.sx-export__head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.sx-export__ok { color: #4ADE80; }
.sx-export__track { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(247, 241, 232, 0.14); }
.sx-load { display: block; height: 100%; background: var(--accent); }
.sx-export__chips { display: flex; gap: 6px; font-size: 11px; font-weight: 600; }
.sx-export__chips span { padding: 4px 8px; border-radius: 999px; background: rgba(247, 241, 232, 0.12); }
.sx-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 40px var(--accent);
}
.contact-panel > .halo,
.cta-band > .halo,
.combo > .halo { position: absolute; }
@media (max-width: 639px) {
  .hero > .halo,
  .process > .halo,
  .care > .halo { width: 240px !important; height: 240px !important; filter: blur(50px); }
}


/* ==========================================================
   Photos Unsplash dans les schémas (licence Unsplash, usage libre)
   ========================================================== */
.ah-video { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1577219491135-ce391730fb2c?auto=format&fit=crop&w=800&q=72") center 35% / cover !important; }
.ahm-video { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1577219491135-ce391730fb2c?auto=format&fit=crop&w=800&q=72") center 35% / cover !important; }
.ah-cam { background: linear-gradient(180deg, rgba(20,18,25,0.05), rgba(20,18,25,0.25)), url("https://images.unsplash.com/photo-1517686469429-8bdb88b9f907?auto=format&fit=crop&w=900&q=72") center / cover !important; }
.sc-mock--video { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?auto=format&fit=crop&w=900&q=72") center / cover !important; }
.ah-screen .sk--soft, .sc-mock--site .sk--soft, .ahm-browser .sk--soft { background: url("https://images.unsplash.com/photo-1776763255189-3c8237aec808?auto=format&fit=crop&w=400&q=72") center / cover !important; }
.aw-hero__media { background: url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&q=72") center / cover !important; }
.aw-cards .sk--soft { background: url("https://images.unsplash.com/photo-1642751652611-bb9a7cad58a3?auto=format&fit=crop&w=400&q=72") center / cover !important; }
.aw-phone .sk--blue { background: url("https://images.unsplash.com/photo-1612884610549-ce221d92514a?auto=format&fit=crop&w=500&q=72") center / cover !important; }
.av-frame { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1779031242515-205111711b23?auto=format&fit=crop&w=1200&q=72") center / cover !important; }
.av-phone { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1732565649629-eb4932a1ec09?auto=format&fit=crop&w=600&q=72") 60% center / cover !important; }
.uv2-hero { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1622021142947-da7dedc7c39a?auto=format&fit=crop&w=800&q=72") center 30% / cover !important; }
.uv2-phone { background: linear-gradient(180deg, rgba(20,18,25,0.18) 0%, rgba(20,18,25,0.05) 45%, rgba(20,18,25,0.55) 100%), url("https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=600&q=72") center / cover !important; }
.uv2-frames > span:nth-child(1) { background: url("https://images.unsplash.com/photo-1517686469429-8bdb88b9f907?auto=format&fit=crop&w=300&q=72") center / cover !important; }
.uv2-frames > span:nth-child(2) { background: url("https://images.unsplash.com/photo-1615906655593-ad0386982a0f?auto=format&fit=crop&w=300&q=72") center / cover !important; }
.uv2-frames > span:nth-child(3) { background: url("https://images.unsplash.com/photo-1642751652611-bb9a7cad58a3?auto=format&fit=crop&w=300&q=72") center / cover !important; }
.uv2-frames > span:nth-child(4) { background: url("https://images.unsplash.com/photo-1647776112336-72f4c30fafc1?auto=format&fit=crop&w=300&q=72") center / cover !important; }
#services, #usages { scroll-margin-top: 96px; }

/* Logo MNL Production */
.logo { display: inline-flex; align-items: baseline; white-space: nowrap; }
.logo__sub,
.footer-brand__sub {
  margin-left: 0.32em;
  font-weight: 600;
  font-size: 0.42em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-brand__logo .footer-brand__sub { color: var(--cream, #F7F1E8); opacity: 0.85; }
.logo__sub + .logo__dot,
.footer-brand__sub + span { margin-left: -0.1em; }