/* ==========================================================================
   Wallodesign — Feuille de styles
   Langage visuel : bleu roi et sable, sections foncées
   en alternance, graisse 300 même en très grand, filets de 1 px, aucune ombre.
   ========================================================================== */

/* ---------- 0. Police hébergée sur le site (aucun appel à Google) ---------- */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.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;
}

/* ---------- 1. Tokens ---------- */
/* Palette « bleu roi et sable » : toutes les couleurs du site partent de ce bloc.
   Palettes essayées avant ; pour y revenir, remettez leurs valeurs dans le bloc ci-dessous :
   - graphite et orange : --dark #18191d · --dark-2 #222328 · --dark-3 #2e3036 · --pop #ff5b2e · --pop-light #ff5b2e
     --pop-ink #b23a0a · --on-pop #18191d · --mark #ff5b2e · --paper #f2f1ee · --paper-2 #e2e0da · --card #faf9f7
     --line #dad8d2 · --tint #e8e6e1 · --text-2 #44464d · --text-3 #5a5c63 · --text-4 #9a9ba0
     --btn var(--dark) · --on-btn var(--paper) · --btn-hover var(--pop) · --on-btn-hover var(--dark)
   - bleu nuit et citron : --dark #0d1b2a · --dark-2 #142538 · --dark-3 #1d3249 · --pop #d4f25a · --pop-light #d4f25a
     --pop-ink #3f5d0a · --on-pop #0d1b2a · --mark #d4f25a · --paper #f1f4ef · --paper-2 #e3eadf · --card #fafbf7
     --line #d3dbd0 · --tint #e8ede5 · --text-2 #3d4d5c · --text-3 #5b6b78 · --text-4 #8c99a3
     --btn var(--dark) · --on-btn var(--paper) · --btn-hover var(--pop) · --on-btn-hover var(--dark) */
:root {
  --dark: #0e1630;      /* encre bleu nuit : sections foncées, texte */
  --dark-2: #16213f;    /* cartes sur fond foncé */
  --dark-3: #22305a;    /* filets et survols sur fond foncé */
  --pop: #1f6feb;       /* bleu roi : boutons, détails */
  --pop-light: #8db8ff; /* bleu clair : liens et détails sur fond foncé */
  --pop-ink: #1a56c4;   /* bleu lisible sur fond clair (liens, petits titres) */
  --on-pop: #ffffff;    /* texte posé sur le bleu roi */
  --mark: #a9c8ff;      /* surlignage des mots dans les grands titres */
  --paper: #f4efe6;     /* fond clair couleur sable (jamais blanc pur) */
  --paper-2: #e8dfd0;   /* fond des sections alternées */
  --card: #fbf8f2;      /* surface des cartes sur fond clair */
  --line: #e0d7c8;      /* filets sur fond clair */
  --tint: #ede6da;      /* fonds discrets sur fond clair */
  --text-2: #3e4558;    /* texte secondaire */
  --text-3: #5b6275;    /* texte discret */
  --text-4: #9097a6;    /* décor (numéros, points) */
  --btn: var(--pop);              /* boutons pleins sur fond clair */
  --on-btn: var(--on-pop);
  --btn-hover: var(--dark);       /* leur couleur au survol */
  --on-btn-hover: var(--paper);
  --danger: #b3261e;    /* erreurs du formulaire */

  --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --maxw: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(80px, 10vw, 128px);
  --head-y: clamp(56px, 7vw, 96px);
  --radius: 4px;
  --nav-h: 72px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* Rôles des couleurs. Ton clair par défaut ; les sections .tone-dark (foncé), .tone-alt
   (clair alterné) et .tone-pop (couleur vive) les redéfinissent : les composants s'adaptent seuls. */
:root, .tone-light, .form, .screen, .drop {
  --ink: var(--dark);
  --steel: var(--text-2);
  --slate: var(--text-3);
  --smoke: var(--text-4);
  --white: var(--card);
  --mist: var(--tint);
  --frost: var(--line);
  --accent: var(--pop-ink);   /* liens, petits titres, icônes */
  --accent-bright: var(--pop-light);
  --accent-200: color-mix(in srgb, var(--pop) 40%, var(--paper));
  --accent-100: color-mix(in srgb, var(--pop) 22%, var(--paper));
  --accent-50: color-mix(in srgb, var(--pop) 10%, var(--paper));
  --deep: var(--dark-3);
  --solid: var(--btn);        /* boutons pleins, badges */
  --on-solid: var(--on-btn);
  --fill-hi: var(--btn-hover);
  --on-fill: var(--on-btn-hover);
  color-scheme: light;
}
.tone-dark, .loader, .menu, .menu-open .nav, .contact__card {
  --ink: var(--paper);
  --steel: color-mix(in srgb, var(--paper) 78%, var(--dark));
  --slate: color-mix(in srgb, var(--paper) 62%, var(--dark));
  --smoke: color-mix(in srgb, var(--paper) 42%, var(--dark));
  --white: var(--dark-2);
  --mist: color-mix(in srgb, var(--paper) 6%, transparent);
  --frost: color-mix(in srgb, var(--paper) 14%, transparent);
  --accent: var(--pop-light);
  --accent-200: color-mix(in srgb, var(--pop-light) 42%, transparent);
  --accent-100: color-mix(in srgb, var(--pop-light) 24%, transparent);
  --accent-50: color-mix(in srgb, var(--pop-light) 10%, transparent);
  --deep: var(--paper);
  --solid: var(--pop);
  --on-solid: var(--on-pop);
  --fill-hi: var(--paper);
  --on-fill: var(--dark);
  color-scheme: dark;
}
/* Carte en couleur vive (formule recommandée) : le texte prend la couleur prévue sur --pop */
.tone-pop {
  --ink: var(--on-pop);
  --steel: var(--on-pop);
  --slate: var(--on-pop);
  --smoke: color-mix(in srgb, var(--on-pop) 70%, var(--pop));
  --white: color-mix(in srgb, var(--pop) 88%, var(--on-pop));
  --mist: color-mix(in srgb, var(--on-pop) 8%, transparent);
  --frost: color-mix(in srgb, var(--on-pop) 26%, transparent);
  --accent: var(--on-pop);
  --accent-200: color-mix(in srgb, var(--on-pop) 45%, transparent);
  --accent-100: color-mix(in srgb, var(--on-pop) 26%, transparent);
  --accent-50: color-mix(in srgb, var(--on-pop) 10%, transparent);
  --deep: var(--dark-3);
  --solid: var(--on-pop);
  --on-solid: var(--pop);
  --fill-hi: var(--dark);
  --on-fill: var(--paper);
}
.tone-dark { background: var(--dark); color: var(--ink); }
.tone-alt {
  --white: color-mix(in srgb, var(--card) 72%, var(--paper-2));
  --mist: color-mix(in srgb, var(--dark) 5%, var(--paper-2));
  --frost: color-mix(in srgb, var(--dark) 12%, var(--paper-2));
  background: var(--paper-2);
}
.tone-pop { background: var(--pop); color: var(--ink); }
.tone-light { color: var(--ink); }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01" on, "tnum" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

[hidden] { display: none !important; }
a[href^="tel:"] { white-space: nowrap; }
img, canvas, video { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
input, textarea { font: inherit; letter-spacing: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, fieldset, legend { margin: 0; }
em { font-style: normal; }
small { font-size: inherit; }
hr { margin: 0; }

::selection { background: var(--pop); color: var(--on-pop); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 400;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--dark); color: var(--paper);
  font-size: 14px;
  transition: top .3s var(--ease);
}
.skip:focus { top: 16px; }

/* ---------- 3. Typographie & petits composants ---------- */
.h2 {
  max-width: 18ch;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lead {
  max-width: 40ch;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--slate);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}
.eyebrow__line { display: block; width: 28px; height: 1px; background: var(--accent); transform-origin: left; }

.rule { display: block; height: 1px; border: 0; background: var(--frost); transform-origin: left; }

.head {
  display: grid; justify-items: start; gap: 22px;
  padding-top: var(--head-y);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.section { position: relative; padding-bottom: var(--section-y); }

/* Pastille "disponible" */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 14px 0 12px;
  border: 1px solid var(--accent-100);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--white) 80%, transparent);
  font-size: 13px;
  color: var(--ink);
}
.tag__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tag__dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--accent);
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

/* Pilules (listes de caractéristiques) */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills li {
  padding: 5px 11px;
  border: 1px solid var(--frost);
  border-radius: 9999px;
  background: var(--mist);
  font-size: 12.5px; line-height: 1.3;
  color: var(--steel);
  transition: color .4s, border-color .4s, background-color .4s;
}

/* Icônes */
.check { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Flèche façon "hover arrow" : le chevron avance et la tige apparaît */
.arrow { width: 10px; height: 10px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow__line { opacity: 0; transition: opacity .25s var(--ease); }
.arrow__tip { transition: transform .35s var(--ease); }
a:hover .arrow__line, button:hover .arrow__line { opacity: 1; }
a:hover .arrow__tip, button:hover .arrow__tip { transform: translateX(3px); }

/* Lien texte avec soulignement animé */
.link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 400;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 16px; bottom: -3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 4. Boutons ---------- */
.btn {
  --fill: var(--deep);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 400; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease);
}
/* Remplissage circulaire qui part du point d'entrée du curseur */
.btn::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--fx, 50%); top: var(--fy, 50%);
  width: 300%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
/* Texte qui "roule" lettre par lettre au survol */
.btn__label { display: inline-flex; height: 1.25em; overflow: hidden; line-height: 1.25; }
.btn__label .ch {
  display: inline-block;
  text-shadow: 0 1.25em 0 currentColor;
  transition: transform .55s var(--ease);
  transition-delay: calc(var(--ci, 0) * 14ms);
}
@media (hover: hover) {
  .btn:hover::before { transform: translate(-50%, -50%) scale(1); }
  .btn:hover .btn__label .ch { transform: translateY(-1.25em); }
}

.btn .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Bouton plein : bleu nuit sur fond clair, citron sur fond foncé (voir --solid) */
.btn--primary, .btn--white { --fill: var(--fill-hi); background: var(--solid); color: var(--on-solid); }
.btn--ghost { --fill: var(--accent-50); border-color: var(--accent-200); color: var(--accent); }
.btn--ghost:hover { border-color: var(--accent); }
/* Bouton fin pour les fonds bleu nuit (carte Contact) */
.btn--line { --fill: color-mix(in srgb, var(--ink) 12%, transparent); border-color: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
@media (hover: hover) { .btn--primary:hover, .btn--white:hover { color: var(--on-fill); } }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 54px; padding: 0 26px; font-size: 16px; }

/* Petite barre de chargement (envoi du formulaire) */
.btn.is-loading { pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  opacity: .6;
  transform-origin: left;
  animation: loadbar .9s var(--ease) forwards;
}
@keyframes loadbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 5. Préchargeur, progression, cadre de sélection ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: none; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(24px, 6vh, 64px);
  background: var(--dark); color: var(--ink);
}
.is-loading .loader { display: flex; }
.is-loaded .loader { transform: translate3d(0, -100%, 0); transition: transform 1s var(--ease-io); }
.loader__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.loader__brand { font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.loader__brand span { color: var(--accent); }
.loader__count { font-size: clamp(72px, 14vw, 200px); font-weight: 300; line-height: .8; letter-spacing: -0.05em; }
.loader__bar { display: block; height: 1px; margin-top: clamp(20px, 3vh, 32px); background: var(--frost); }
.loader__bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.progress { position: fixed; inset: 0 0 auto; z-index: 150; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.frame {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: 0; height: 0;
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.frame.is-on { opacity: 1; }
.frame > i { position: absolute; width: 7px; height: 7px; border: 1px solid var(--accent); background: var(--white); }
.frame > i:nth-child(1) { left: -4px; top: -4px; }
.frame > i:nth-child(2) { right: -4px; top: -4px; }
.frame > i:nth-child(3) { left: -4px; bottom: -4px; }
.frame > i:nth-child(4) { right: -4px; bottom: -4px; }
.frame__name { position: absolute; left: -1px; bottom: calc(100% + 7px); font-size: 11px; line-height: 1; color: var(--accent); white-space: nowrap; }
.frame__tag {
  position: absolute; left: 50%; top: calc(100% + 8px);
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--accent); color: var(--paper);
  font-size: 11px; line-height: 1.2; white-space: nowrap;
  transform: translateX(-50%);
}

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease), background-color .4s, border-color .4s;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--frost);
}
.nav.is-hidden { transform: translate3d(0, -100%, 0); }
.menu-open .nav { background: var(--dark); border-bottom-color: var(--frost); transform: none; }

.nav__inner { display: flex; align-items: center; gap: 28px; height: 100%; }

.brand { display: inline-flex; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.brand__dot { display: inline-block; color: var(--accent); transition: transform .6s var(--ease-back); }
.brand:hover .brand__dot { transform: translateY(-7px); }

.nav__menu { position: relative; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links > li > a, .nav__drop-btn {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  transition: color .3s;
}
.nav__links > li > a.is-active, .nav__links > li > a[aria-current="page"], .nav__drop-btn.is-current { color: var(--accent); }
.nav__links > li > a::after, .nav__drop-btn::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  transition: transform .4s var(--ease-back);
}
.nav__links > li > a.is-active::after, .nav__links > li > a[aria-current="page"]::after, .nav__drop-btn.is-current::after { transform: translateX(-50%) scale(1); }

/* Menu déroulant « Services » */
.nav__drop { position: relative; }
.nav__chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.nav__drop.is-open .nav__chev { transform: rotate(180deg); }
.drop {
  position: absolute; left: -14px; top: calc(100% + 14px); z-index: 5;
  width: 540px; padding: 10px;
  border: 1px solid var(--frost); border-radius: var(--radius);
  background: var(--white);
  opacity: 0; visibility: hidden;
  transform: translate3d(0, -8px, 0) scale(.98); transform-origin: 18% 0;
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .3s;
}
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* passerelle invisible pour la souris */
.nav__drop.is-open .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
.drop__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.drop__list li { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.nav__drop.is-open .drop__list li { opacity: 1; transform: none; transition-delay: calc(.05s + var(--i, 0) * .045s); }
.drop__link { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius); transition: background-color .3s; }
.drop__link:hover, .drop__link:focus-visible, .drop__link[aria-current="page"] { background: var(--accent-50); }
.drop__ico { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--accent-100); border-radius: var(--radius); background: var(--white); transition: border-color .3s, transform .5s var(--ease-back); }
.drop__link:hover .drop__ico { border-color: var(--accent-200); transform: rotate(-6deg) scale(1.06); }
.drop__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.drop__txt { display: grid; gap: 3px; padding-top: 2px; }
.drop__txt b { font-size: 14.5px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.drop__txt small { font-size: 12.5px; color: var(--slate); }
.drop__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 4px 0; padding: 12px 10px 4px; border-top: 1px solid var(--frost); font-size: 13px; color: var(--slate); }
.drop__foot .link { font-size: 13.5px; }
.nav__pill {
  position: absolute; left: 0; top: 50%; z-index: 0;
  width: 0; height: 36px;
  border-radius: var(--radius);
  background: var(--frost);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.nav__pill.is-on { opacity: 1; }

.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Lieu affiché dans l'en-tête (grands écrans) */
.nav__place { display: none; align-items: center; gap: 6px; margin-left: -12px; font-size: 13px; white-space: nowrap; color: var(--slate); }
.nav__place svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
@media (min-width: 1360px) { .nav__place { display: inline-flex; } }

.burger { position: relative; display: none; width: 44px; height: 44px; margin-right: -10px; border-radius: var(--radius); }
.burger i {
  position: absolute; left: 12px; right: 12px; height: 1.5px;
  background: var(--ink);
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.burger i:nth-of-type(1) { top: 18px; }
.burger i:nth-of-type(2) { top: 25px; }
.burger[aria-expanded="true"] i:nth-of-type(1) { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-of-type(2) { top: 21.5px; transform: rotate(-45deg); }

/* Menu mobile plein écran */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + 16px);
  background: var(--dark); color: var(--ink);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-io), visibility 0s linear .8s;
}
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .8s var(--ease-io), visibility 0s; }
.menu__inner { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding-bottom: 32px; }
.menu__links li { overflow: hidden; border-bottom: 1px solid var(--frost); }
.menu__links a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0;
  font-size: clamp(34px, 9vw, 56px); font-weight: 300; line-height: 1.1; letter-spacing: -0.035em;
  transform: translate3d(0, 105%, 0);
  transition: transform .7s var(--ease);
}
.menu__links a span { font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.menu.is-open .menu__links a { transform: none; transition-delay: calc(.2s + var(--i, 0) * .06s); }
.menu__foot { display: grid; justify-items: start; gap: 16px; padding-top: 32px; }
.menu__contact { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--steel); }
.menu__contact a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-100); }

@media (max-width: 1199px) { .nav__ghost { display: none; } }
@media (max-width: 1099px) {
  .nav__menu { display: none; }
  .burger { display: block; }
  .nav__actions { gap: 4px; }
}
@media (max-width: 519px) { .nav__cta { display: none; } .burger { margin-left: auto; } }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(32px, 7vh, 88px));
  padding-bottom: clamp(64px, 10vh, 112px);
  overflow: clip;
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 72% 46%, #000 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 72% 78% at 72% 46%, #000 18%, transparent 72%);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.hero__content { position: relative; will-change: transform, opacity; }
.hero__title {
  margin-top: 28px;
  font-size: clamp(38px, 4.3vw, 66px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
/* Mots surlignés au citron dans les grands titres sur fond clair (le trait se dessine à l'apparition) */
.hero__title em, .phero__title em {
  color: inherit;
  background: linear-gradient(var(--mark), var(--mark)) 0 86% / 100% .3em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.js [data-split] em { background-size: 0 .3em; transition: background-size 1.1s var(--ease) .5s; }
.js [data-split].is-in em { background-size: 100% .3em; }
.hero__lead {
  max-width: 34em;
  margin-top: 28px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--steel);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; font-size: 14px; color: var(--steel); }
.hero__proof li { display: inline-flex; align-items: center; gap: 8px; }

.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: 28px;
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate);
}
.hero__scroll-line { position: relative; width: 64px; height: 1px; overflow: hidden; background: var(--frost); }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  animation: scrollline 2.4s var(--ease-io) infinite;
}
@keyframes scrollline { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* Mot qui tourne dans le titre */
.rotator {
  display: inline-grid;
  vertical-align: top;
  overflow: hidden;
  padding: .1em 0 .16em; margin: -.1em 0 -.16em;
  color: var(--accent);
}
.rotator > span { grid-area: 1 / 1; white-space: nowrap; transform: translate3d(0, 115%, 0); }
.rotator > span.is-active, .rotator > span.is-exit { transition: transform .9s var(--ease); }
.rotator > span.is-active { transform: none; }
.rotator > span.is-exit { transform: translate3d(0, -115%, 0); }
html:not(.js-ok) .rotator > span:first-child { transform: none; }

/* --- Composition du hero (unités relatives au conteneur : cqw) --- */
.hero__visual { position: relative; aspect-ratio: 1 / .94; container-type: inline-size; }
.layer { position: absolute; will-change: transform; }
.layer--browser { left: 8%; top: 10%; width: 92%; }
.layer--code { left: -3%; top: 55%; width: 54%; }
.layer--score { right: -4%; top: 61%; width: 37%; }
.layer--notif { right: -2%; top: 0; width: 47%; }

.dots { display: inline-flex; gap: 1.1cqw; }
.dots i { display: block; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--frost); }

.win { overflow: hidden; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); }
.win__bar { display: flex; align-items: center; gap: 2cqw; height: 6.2cqw; padding: 0 2.4cqw; border-bottom: 1px solid var(--frost); background: var(--mist); }
.win .dots i { background: var(--frost); }
.win__url {
  display: flex; align-items: center; justify-content: center; gap: .8cqw;
  width: 46%; height: 3.8cqw; margin: 0 auto;
  border: 1px solid var(--frost); border-radius: 3px;
  background: var(--white);
  font-size: 1.75cqw; letter-spacing: 0; color: var(--slate);
  transform: translateX(-4cqw);
}
.win__url svg, .live__url svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: currentColor; stroke-width: 1.2; }

.site { display: grid; gap: 3.4cqw; padding: 3.6cqw 4cqw 4.4cqw; }
.site__nav { display: flex; align-items: center; gap: 2cqw; }
.site__logo { font-size: 2.6cqw; font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.site__links { display: flex; gap: 2.2cqw; margin-left: auto; }
.site__links i { display: block; width: 5.6cqw; height: .9cqw; border-radius: 1cqw; background: var(--frost); }
.site__btn { display: block; width: 9cqw; height: 3.4cqw; border-radius: 2px; background: var(--ink); }
.site__hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3.6cqw; }
.site__copy { display: grid; justify-items: start; gap: 1.6cqw; }
.site__eyebrow { font-size: 1.45cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.site__title { font-size: 4.3cqw; font-weight: 300; line-height: 1.04; letter-spacing: -0.035em; }
.site__text { display: grid; gap: 1cqw; width: 100%; }
.site__text i { display: block; height: .9cqw; border-radius: 1cqw; background: var(--frost); }
.site__text i:last-child { width: 70%; }
.site__cta-wrap { position: relative; margin-top: .8cqw; }
.site__cta {
  position: relative;
  display: inline-flex; align-items: center;
  height: 4.2cqw; padding: 0 2.2cqw;
  border-radius: 2px;
  background: var(--solid); color: var(--on-solid);
  font-size: 1.6cqw; white-space: nowrap;
}
.site__cta::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--accent); border-radius: 3px; opacity: 0; }
.site__media { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 2px; background: var(--accent-50); }
.arch {
  position: absolute; left: 22%; right: 22%; bottom: 0; height: 72%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--accent-200), var(--accent-100));
  transform-origin: bottom;
}
.sun { position: absolute; right: 13%; top: 11%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-bright); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -1.6cqw; } }
.site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.site__cards i { display: block; aspect-ratio: 4 / 2.6; border: 1px solid var(--frost); border-radius: 2px; background: var(--mist); }

/* Faux curseur qui clique sur le bouton du mini-site */
.fcursor { position: absolute; left: 62%; top: 55%; z-index: 2; width: 3.2cqw; height: 3.2cqw; opacity: 0; pointer-events: none; }
.fcursor path { fill: var(--ink); stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; }
.hero-in .fcursor { animation: fcursor 8s var(--ease-io) 2.2s infinite; }
.hero-in .site__cta { animation: ctapress 8s var(--ease) 2.2s infinite; }
.hero-in .site__cta::after { animation: ctaring 8s var(--ease) 2.2s infinite; }
@keyframes fcursor {
  0% { opacity: 0; transform: translate(26cqw, 15cqw); }
  6% { opacity: 1; }
  20% { transform: translate(0, 0); }
  23% { transform: translate(0, 0) scale(.8); }
  26% { transform: translate(0, 0) scale(1); }
  50% { opacity: 1; transform: translate(0, 0); }
  64%, 100% { opacity: 0; transform: translate(14cqw, 9cqw); }
}
@keyframes ctapress { 0%, 22% { transform: none; } 23.5% { transform: scale(.94); } 27%, 100% { transform: none; } }
@keyframes ctaring { 0%, 23% { opacity: 0; transform: scale(1); } 24% { opacity: .9; } 38%, 100% { opacity: 0; transform: scale(1.25, 1.9); } }

/* Éditeur de code */
.code { overflow: hidden; border: 1px solid var(--dark-3); border-radius: var(--radius); background: var(--dark); color: color-mix(in srgb, var(--paper) 72%, var(--dark)); }
.code__bar { display: flex; height: 5.6cqw; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 1.7cqw; }
.code__tab {
  position: relative;
  display: flex; align-items: center;
  padding: 0 2.4cqw;
  border-right: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .42);
  transition: color .4s, background-color .4s;
}
.code__tab.is-active { background: rgba(255, 255, 255, .04); color: var(--paper); }
.code__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent-bright); }
.code__body {
  height: calc(1.7em * 8 + 5.2cqw);
  padding: 2.4cqw 2.8cqw 2.8cqw;
  overflow: hidden;
  font-family: var(--mono); font-size: 1.85cqw; line-height: 1.7; letter-spacing: 0;
  counter-reset: ln;
}
.code__body .line { display: block; min-height: 1.7em; white-space: pre; }
.code__body .line::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 2.4em; color: color-mix(in srgb, var(--paper) 30%, transparent); }
.code__body.is-selected .line > span:not(.caret) { background: color-mix(in srgb, var(--pop) 28%, transparent); }
.caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--accent-bright); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tk-k { color: var(--accent-bright); }
.tk-f { color: color-mix(in srgb, var(--pop-light) 70%, #fff); }
.tk-s { color: color-mix(in srgb, var(--pop-light) 30%, #fff); }
.tk-p { color: var(--text-4); }
.tk-c { color: color-mix(in srgb, var(--paper) 42%, var(--dark)); }
.tk-t { color: color-mix(in srgb, var(--paper) 72%, var(--dark)); }

/* Carte "Audit" */
.score { display: grid; gap: 1.8cqw; padding: 2.8cqw 3cqw 3.2cqw; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); }
.score__title { display: flex; align-items: center; justify-content: space-between; font-size: 1.55cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.score__title span { padding: .3cqw 1cqw; border: 1px solid var(--accent-100); border-radius: 999px; color: var(--accent); letter-spacing: .04em; text-transform: none; }
.score__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .9cqw 2cqw; font-size: 1.9cqw; color: var(--steel); }
.score__row b { font-size: 2.4cqw; font-weight: 400; color: var(--ink); }
.score__ok { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--accent-50); }
.score__ok svg, .live__scores b svg { width: 70%; height: 70%; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.score__bar { display: block; grid-column: 1 / -1; height: .5cqw; overflow: hidden; background: var(--frost); }
.score__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }

/* Notification */
.notif { display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 2.6cqw; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); }
.notif__icon { display: grid; place-items: center; flex: 0 0 auto; width: 6cqw; height: 6cqw; border-radius: var(--radius); background: var(--accent-50); }
.notif__icon svg { width: 3.2cqw; height: 3.2cqw; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.notif__text { display: grid; gap: .4cqw; min-width: 0; }
.notif__text b { font-size: 2.1cqw; font-weight: 400; white-space: nowrap; }
.notif__text span { font-size: 1.7cqw; color: var(--slate); white-space: nowrap; }
.notif__dot { flex: 0 0 auto; width: 1.4cqw; height: 1.4cqw; margin-left: auto; border-radius: 50%; background: var(--accent); }
.hero-in .notif { animation: notif 8s var(--ease) 2.2s infinite both; }
@keyframes notif {
  0%, 26% { opacity: 0; transform: translate3d(0, -1.6cqw, 0) scale(.97); }
  31%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translate3d(0, -1cqw, 0) scale(.98); }
}

@media (max-width: 1099px) {
  .hero__canvas {
    -webkit-mask-image: radial-gradient(ellipse 90% 40% at 50% 76%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 40% at 50% 76%, #000 20%, transparent 75%);
  }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__title { font-size: clamp(34px, 7vw, 60px); }
  .hero__visual { width: 100%; max-width: 640px; margin-top: 16px; }
  .hero__scroll { display: none; }
}

/* ---------- 8. Bandeau défilant ---------- */
.ticker {
  display: grid; gap: clamp(4px, 1vw, 12px);
  padding-block: clamp(40px, 6vw, 80px);
  overflow: hidden;
  border-block: 1px solid var(--frost);
}
.ticker__row { display: flex; width: max-content; will-change: transform; }
.ticker__list { display: flex; flex: 0 0 auto; }
.ticker__list li {
  display: flex; align-items: center;
  font-size: clamp(34px, 5.4vw, 80px); font-weight: 300; line-height: 1.15; letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--smoke);
  transition: color .5s var(--ease);
}
.ticker__list li::after {
  content: ""; flex: 0 0 auto;
  width: .3em; height: .3em; margin: 0 .55em;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 100% no-repeat;
  transition: transform .8s var(--ease);
}
.ticker__row--alt li { color: color-mix(in srgb, var(--accent) 66%, transparent); }
.ticker__list li:hover { color: var(--ink); }
.ticker__row--alt li:hover { color: var(--accent); }
.ticker__list li:hover::after { transform: rotate(90deg); }

/* ---------- 9. Manifeste ---------- */
.manifesto { padding-block: var(--section-y); }
.manifesto__text {
  max-width: 24ch;
  font-size: clamp(30px, 4.6vw, 68px); font-weight: 300; line-height: 1.1; letter-spacing: -0.035em;
  text-wrap: pretty;
}
.manifesto__text em { color: var(--accent); }
.fw { transition: opacity .6s var(--ease); }
.js .fw { opacity: .16; }
.js .fw.is-on { opacity: 1; }
.manifesto__sign { display: flex; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 56px); font-size: 14px; color: var(--slate); }
.manifesto__line { display: block; width: 40px; height: 1px; background: var(--accent); }

/* ---------- 10. Grille "registre" (services, tarifs) ---------- */
.ledger {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; padding: 1px;
  background: var(--frost);
}
/* Les filets s'illuminent autour du curseur */
.ledger::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.ledger:hover::before { opacity: 1; }

/* Halo qui suit le curseur dans chaque carte */
.spot { position: relative; overflow: hidden; }
.spot::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%), var(--spot, var(--accent-50)), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; }

.card { display: flex; flex-direction: column; min-height: 360px; padding: clamp(28px, 3vw, 40px); background: var(--white); }
.spot > .card__index { position: absolute; top: clamp(28px, 3vw, 40px); right: clamp(28px, 3vw, 40px); font-size: 12px; letter-spacing: .06em; color: var(--slate); }
.icon { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon path { stroke-dasharray: 1; }
.js .card .icon path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.js .card.is-in .icon path { stroke-dashoffset: 0; }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.card__title { margin-top: 48px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; line-height: 1.15; letter-spacing: -0.025em; transition: transform .7s var(--ease); }
.card__text { max-width: 34ch; margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--steel); }
.card .pills { margin-top: auto; padding-top: 28px; }
@media (hover: hover) {
  .card:hover .icon path { animation: redraw 1.1s var(--ease); }
  .card:hover .card__title { transform: translateX(6px); }
  .card:hover .pills li, .project:hover .pills li { border-color: var(--accent-100); background: var(--white); color: var(--accent); }
}

/* Prix affiché en bas de chaque carte service */
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--frost); }
.card__price > span { font-size: 13px; color: var(--slate); }
.card__price b { font-size: clamp(26px, 2.2vw, 32px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.card__price .link { margin-left: auto; font-size: 14px; }

.services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services .card { min-height: 0; }
@media (max-width: 639px) { .services { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 11. Méthode : visuel collant ---------- */
.process__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); }
.process__visual { position: sticky; top: max(96px, calc(50vh - 44vw * .42)); align-self: start; }

.screen { position: relative; container-type: inline-size; aspect-ratio: 1 / .84; overflow: hidden; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); }
.screen__bar {
  position: absolute; inset: 0 0 auto;
  display: flex; align-items: center; gap: 2.4cqw;
  height: 7.4cqw; padding: 0 3cqw;
  border-bottom: 1px solid var(--frost);
  background: var(--mist);
  font-size: 2.1cqw; color: var(--slate);
}
.screen .dots i { width: 1.6cqw; height: 1.6cqw; background: var(--frost); }
.screen__label { flex: 1; }
.screen__step b { font-weight: 400; color: var(--accent); }
.screen__body { position: absolute; inset: 7.4cqw 0 0; }

.state {
  position: absolute; inset: 0;
  padding: 6cqw;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 2.5cqw, 0);
  transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s;
}
.state.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease) .15s, transform .9s var(--ease) .15s, visibility 0s; }

@keyframes drawin { to { stroke-dashoffset: 0; } }
@keyframes growx { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } }
@keyframes fadeup { from { opacity: 0; transform: translate3d(0, 2cqw, 0); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes fillx { to { transform: none; } }

/* 01 · Brief */
.brief { display: grid; gap: 4cqw; }
.brief__head { display: flex; align-items: center; gap: 2.6cqw; }
.brief__avatar { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: var(--radius); background: var(--accent-50); color: var(--accent); font-size: 2.6cqw; }
.brief__head b { display: block; font-size: 3.2cqw; font-weight: 400; letter-spacing: -0.02em; }
.brief__head small { display: block; margin-top: .4cqw; font-size: 2.2cqw; color: var(--slate); }
.brief__list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.2cqw 2.6cqw; padding: 2.4cqw 0; border-bottom: 1px solid var(--frost); font-size: 2.7cqw; }
.brief__list li:first-child { border-top: 1px solid var(--frost); }
.brief__list i { display: block; grid-column: 2; width: var(--w, 60%); height: .9cqw; border-radius: 1cqw; background: var(--frost); transform-origin: left; }
.box { display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border: 1px solid var(--accent-200); border-radius: 3px; }
.box svg { width: 70%; height: 70%; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.box path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.brief__foot { display: flex; align-items: center; justify-content: space-between; }
.brief__badge { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 2.2cqw; border-radius: 999px; background: var(--accent-50); color: var(--accent); font-size: 2.3cqw; }
.brief__badge::before { content: ""; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--accent); }
.brief__time { font-size: 2.2cqw; color: var(--slate); }
.state.is-active .box { animation: boxon .4s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .38s); }
.state.is-active .box path { animation: drawin .5s var(--ease) forwards; animation-delay: calc(.62s + var(--i) * .38s); }
.state.is-active .brief__list i { animation: growx 1s var(--ease) both; animation-delay: calc(.6s + var(--i) * .38s); }
.state.is-active .brief__badge { animation: pop .6s var(--ease-back) 2.1s both; }
@keyframes boxon { to { border-color: var(--accent); background: var(--accent); } }

/* 02 · Maquette */
.state--wire { display: grid; grid-template-rows: auto auto; align-content: start; gap: 4cqw; }
.wf { position: relative; display: grid; gap: 3cqw; height: 52cqw; padding: 3cqw; border: 1px dashed var(--accent-200); border-radius: 2px; grid-template-rows: 2.4cqw 26cqw 10cqw; }
.wf__nav { display: flex; align-items: center; gap: 2cqw; }
.wf__nav i { display: block; flex: 0 0 9cqw; height: 2.4cqw; border: 1px dashed var(--accent-200); border-radius: 2px; }
.wf__nav i:first-child { flex-basis: 12cqw; margin-right: auto; }
.wf__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.wf__lines { display: grid; align-content: center; gap: 1.8cqw; }
.wf__lines i { display: block; height: 2.4cqw; border-radius: 2px; background: var(--accent-50); }
.wf__lines i:nth-child(2) { width: 80%; }
.wf__lines i:nth-child(3) { width: 58%; }
.wf__lines b { display: block; width: 40%; height: 4.4cqw; margin-top: 1.4cqw; border: 1px solid var(--accent); border-radius: 2px; }
.wf__img {
  border: 1px dashed var(--accent-200); border-radius: 2px;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--accent-100) calc(50% - .5px), var(--accent-100) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--accent-100) calc(50% - .5px), var(--accent-100) calc(50% + .5px), transparent calc(50% + .5px));
}
.wf__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.wf__cards i { display: block; border: 1px dashed var(--accent-200); border-radius: 2px; }
.wf__sel { position: absolute; left: 2cqw; top: 7.4cqw; width: 41.5cqw; height: 28cqw; border: 1px solid var(--accent); pointer-events: none; }
.wf__sel i { position: absolute; width: 1.4cqw; height: 1.4cqw; border: 1px solid var(--accent); background: var(--white); }
.wf__sel i:nth-child(1) { left: -.7cqw; top: -.7cqw; }
.wf__sel i:nth-child(2) { right: -.7cqw; top: -.7cqw; }
.wf__sel i:nth-child(3) { left: -.7cqw; bottom: -.7cqw; }
.wf__sel i:nth-child(4) { right: -.7cqw; bottom: -.7cqw; }
.wf__bar { display: flex; align-items: center; gap: 1.6cqw; }
.sw { display: block; width: 5cqw; height: 5cqw; border: 1px solid var(--frost); border-radius: 3px; background: var(--c); }
.wf__type { margin-left: auto; font-size: 4cqw; font-weight: 300; letter-spacing: -0.03em; }
.wf__type small { margin-left: 1cqw; font-size: 2cqw; letter-spacing: 0; color: var(--slate); }
.state--wire.is-active .wf > *:not(.wf__sel) { animation: fadeup .7s var(--ease) both; animation-delay: calc(.25s + var(--i, 0) * .14s); }
.state--wire.is-active .wf__sel { animation: wfsel 6.4s var(--ease-io) .8s infinite both; }
.state--wire.is-active .sw { animation: pop .5s var(--ease-back) both; animation-delay: calc(.5s + var(--i) * .1s); }
@keyframes wfsel {
  0%, 24% { left: 2cqw; top: 7.4cqw; width: 41.5cqw; height: 28cqw; }
  32%, 56% { left: 44.5cqw; top: 7.4cqw; width: 41.5cqw; height: 28cqw; }
  64%, 88% { left: 2cqw; top: 36.4cqw; width: 84cqw; height: 12cqw; }
  96%, 100% { left: 2cqw; top: 7.4cqw; width: 41.5cqw; height: 28cqw; }
}

/* 03 · Développement */
.state--code { padding: 0; background: var(--dark); }
.ed { padding: 5cqw 5.5cqw; font-family: var(--mono); font-size: 2.35cqw; line-height: 1.75; letter-spacing: 0; color: color-mix(in srgb, var(--paper) 72%, var(--dark)); counter-reset: ed; }
.ed .ln { display: block; white-space: pre; }
.ed .ln::before { counter-increment: ed; content: counter(ed); display: inline-block; width: 3.2em; color: color-mix(in srgb, var(--paper) 30%, transparent); }
.state--code.is-active .ln { animation: typeline .5s steps(20, end) both; animation-delay: calc(.3s + var(--i) * .16s); }
@keyframes typeline { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 04 · Mise en ligne */
.live { display: grid; gap: 4cqw; }
.live__top { display: flex; align-items: center; justify-content: space-between; }
.live__url { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.4cqw; border: 1px solid var(--frost); border-radius: 3px; font-size: 2.4cqw; }
.live__url svg { width: 2.2cqw; height: 2.2cqw; stroke: var(--accent); }
.live__status { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 2.4cqw; color: var(--accent); }
.live__status i { position: relative; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--accent); }
.live__status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 2.2s var(--ease) infinite; }
.live__chart { padding: 3cqw; border: 1px solid var(--frost); border-radius: var(--radius); }
.live__label { display: flex; justify-content: space-between; margin-bottom: 2cqw; font-size: 2.2cqw; color: var(--slate); }
.live__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.live__area { fill: var(--accent-50); }
.live__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.live__scores { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw 4cqw; }
.live__scores div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1cqw; font-size: 2.3cqw; color: var(--steel); }
.live__scores b { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--accent-50); }
.live__scores i { position: relative; display: block; grid-column: 1 / -1; height: .6cqw; overflow: hidden; background: var(--frost); }
.live__scores i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.state--launch.is-active .live__line { animation: drawin 1.8s var(--ease) .4s forwards; }
.state--launch.is-active .live__area { animation: fadein 1.2s var(--ease) 1s both; }
.state--launch.is-active .live__scores i::after { animation: fillx 1.4s var(--ease) forwards; animation-delay: calc(.8s + var(--i) * .15s); }

/* Étapes + rail de progression */
.process__steps { --rail-gap: clamp(28px, 3vw, 44px); position: relative; padding-left: var(--rail-gap); }
.process__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--frost); }
.process__rail span { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.step { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 68vh; padding-block: 48px; transition: opacity .6s var(--ease); }
.step:first-child { justify-content: flex-start; padding-top: 6px; }
.js .step:not(.is-active) { opacity: .28; }
.step__num { position: relative; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.step__num::before {
  content: ""; position: absolute; left: calc(-1 * var(--rail-gap)); top: 50%;
  width: 9px; height: 9px;
  border: 1px solid var(--accent-200);
  background: var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color .4s, border-color .4s, transform .6s var(--ease-back);
}
.step.is-active .step__num::before { border-color: var(--accent); background: var(--accent); transform: translate(-50%, -50%) rotate(45deg) scale(1.3); }
.step__title { margin-top: 16px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -0.03em; }
.step__text { max-width: 40ch; margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--steel); }
.step .pills { margin-top: 24px; }

@media (max-height: 760px) and (min-width: 900px) { .screen { aspect-ratio: 1 / .78; } .state { padding: 5cqw; } .wf { height: 48cqw; grid-template-rows: 2.4cqw 23cqw 9cqw; } }
@media (max-width: 899px) {
  .process__grid { grid-template-columns: minmax(0, 1fr); }
  .process__visual { display: none; }
  .step, .step:first-child { justify-content: flex-start; min-height: 0; padding: 0 0 56px; }
  .step:last-child { padding-bottom: 0; }
  .js .step:not(.is-active) { opacity: 1; }
}

/* ---------- 12. Réalisations : galerie horizontale ---------- */
.work { position: relative; --card-w: min(84vw, 440px); }
.work__pin { padding-bottom: var(--section-y); }
.work.is-pinned { --card-w: clamp(320px, calc(min(50vh, 460px) * 1.32), 640px); }
.work.is-pinned .work__pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding-bottom: 0; overflow: hidden; }
.work__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: clamp(40px, 6vh, 80px); margin-bottom: clamp(28px, 4vh, 48px); }
.work__top .head { padding-top: 0; margin-bottom: 0; }
.work .h2 { max-width: none; }
.work__meta { display: flex; align-items: center; gap: 16px; padding-bottom: 10px; font-size: 14px; color: var(--slate); white-space: nowrap; }
.work__meta b { font-weight: 400; color: var(--ink); }
.work__bar { position: relative; display: block; width: clamp(80px, 12vw, 180px); height: 1px; background: var(--frost); }
.work__bar span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.work__hint { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.work__note { font-size: 14px; color: var(--slate); }
.work .head { gap: 16px; }
.work__track {
  position: relative;
  display: flex; gap: clamp(16px, 2vw, 28px);
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.work.is-pinned .work__track { will-change: transform; }
.work:not(.is-pinned) .work__track { overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.work:not(.is-pinned) .project { scroll-snap-align: start; }
@media (hover: none) { .work__track { scrollbar-width: none; } .work__track::-webkit-scrollbar { display: none; } }

.project { display: block; flex: 0 0 var(--card-w); width: var(--card-w); color: inherit; }
.project__media { position: relative; aspect-ratio: 1.32; overflow: hidden; container-type: inline-size; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--mist); transition: border-color .5s; }
.shot__bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: 2cqw; height: 5.5cqw; padding: 0 2.4cqw; border-bottom: 1px solid var(--frost); background: var(--white); }
.shot__url { margin: 0 auto; font-size: 1.8cqw; letter-spacing: 0; color: var(--slate); transform: translateX(-3cqw); }
.shot__view { position: absolute; inset: 5.5cqw 0 0; overflow: hidden; }

.project__info { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 16px; padding-top: 18px; }
.project__name { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
.project__name svg { width: 12px; height: 12px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0; transform: translate(-6px, 6px); transition: opacity .4s, transform .6s var(--ease); }
.project__year { padding-top: 5px; font-size: 13px; color: var(--slate); }
.project__type { grid-column: 1 / -1; font-size: 14px; color: var(--slate); }
.project .pills { grid-column: 1 / -1; margin-top: 10px; }
.project__visit { grid-column: 1 / -1; margin-top: 8px; }
/* Emplacement de capture d'écran (réalisation réelle à venir) */
.shot__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1cqw; background: var(--accent-50); color: var(--accent); font-size: 2.4cqw; text-align: center; }
.shot__placeholder b { font-weight: 400; letter-spacing: .04em; }
.shot__placeholder span { font-size: 1.8cqw; color: var(--slate); }
@media (hover: hover) {
  .project:hover .project__media { border-color: var(--accent-100); }
  .project:hover .project__name svg { opacity: 1; transform: none; }
}

/* --- Exemples de sites : chaque mini-site a sa propre direction artistique (typographie,
       mise en page, couleurs), sans rapport avec la charte de ce site. Au survol, la page
       défile dans la fenêtre. Polices système uniquement : rien à télécharger. --- */
.ms { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; transition: transform 1.4s var(--ease-io); }
.ex {
  position: relative;
  display: flex; flex-direction: column;
  height: 200cqw;
  background: var(--x-bg); color: var(--x-fg);
  font-size: 2cqw; line-height: 1.3; letter-spacing: 0;
  font-feature-settings: normal;
  transition: transform 1.4s var(--ease-io);
}
@media (hover: hover) {
  .project:hover .ex, .project:hover .ms { transform: translate3d(0, calc(-100% + 70.2cqw), 0); transition: transform 3.6s cubic-bezier(.45, 0, .2, 1); }
}
:where(.ex) b { font-weight: inherit; }
:where(.ex) i { display: block; font-style: normal; }
.work .project__desc { display: none; }

/* 1 — Restaurant : bistrot sombre, serif italique, mise en page centrée */
.ex--resto { --x-bg: #17110d; --x-fg: #f1e4cc; --x-acc: #c65a3a; --x-gold: #d9b26f; font-family: Georgia, "Times New Roman", serif; text-align: center; }
.rs-top { display: flex; justify-content: space-between; padding: 1.6cqw 5cqw; border-bottom: 1px solid rgba(241, 228, 204, .16); font-family: var(--font); font-size: 1.45cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--x-gold); }
.rs-nav { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; gap: 2cqw; padding: 3.6cqw 5cqw 0; font-family: var(--font); font-size: 1.6cqw; letter-spacing: .1em; text-transform: uppercase; }
.rs-logo { font-family: Georgia, "Times New Roman", serif; font-size: 3.8cqw; font-style: italic; letter-spacing: 0; text-transform: none; }
.rs-hero { display: grid; justify-items: center; gap: 2.4cqw; padding: 7cqw 6cqw 2cqw; }
.rs-kicker { font-family: var(--font); font-size: 1.6cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--x-gold); }
.rs-title { font-size: 9cqw; font-weight: 400; line-height: .98; }
.rs-title em { display: block; font-style: italic; color: var(--x-acc); }
.rs-btn { margin-top: 1.6cqw; padding: 1.7cqw 3.6cqw; border: 1px solid var(--x-gold); font-family: var(--font); font-size: 1.55cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--x-gold); }
.rs-plate {
  width: 50cqw; aspect-ratio: 1; margin: 3cqw auto 0; border-radius: 50%;
  background:
    radial-gradient(circle at 42% 45%, #c65a3a 0 4.6cqw, transparent 4.8cqw),
    radial-gradient(circle at 61% 40%, #e6a84a 0 3cqw, transparent 3.2cqw),
    radial-gradient(circle at 57% 61%, #6f8a3a 0 4.4cqw, transparent 4.6cqw),
    radial-gradient(circle at 41% 64%, #fff6e6 0 2.4cqw, transparent 2.6cqw),
    radial-gradient(circle closest-side, #f5ecdc 0 70%, #e2d1b2 71% 84%, rgba(241, 228, 204, .18) 85% 86%, transparent 87%);
}
.rs-menu { margin: 6cqw 6cqw 0; padding: 4cqw 4.4cqw; border: 1px solid rgba(241, 228, 204, .22); }
.rs-h { margin-bottom: 2.2cqw; font-size: 3.4cqw; font-style: italic; }
.rs-menu li { display: flex; align-items: baseline; gap: 1.4cqw; padding: 1.3cqw 0; font-size: 2.1cqw; text-align: left; }
.rs-menu li i { flex: 1; border-bottom: 1px dotted rgba(241, 228, 204, .45); }
.rs-menu li b { font-family: var(--font); font-size: 1.9cqw; color: var(--x-gold); }
.rs-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin: 5cqw 6cqw 0; font-size: 2cqw; }
.rs-hours div { padding: 3cqw; background: rgba(241, 228, 204, .07); }
.rs-hours small { display: block; margin-bottom: 1cqw; font-family: var(--font); font-size: 1.4cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--x-gold); }
.rs-foot { margin-top: auto; padding: 4.4cqw; border-top: 1px solid rgba(241, 228, 204, .16); font-size: 3cqw; font-style: italic; }

/* 2 — Salon de coiffure : pastel, formes rondes, réservation en avant */
.ex--salon { --x-bg: #fdebe6; --x-fg: #3b1f3a; --x-acc: #ff6f59; --x-lil: #cdb8f5; --x-mint: #bfe8d6; font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif; }
.sl-nav { display: flex; align-items: center; justify-content: space-between; padding: 3.6cqw 5cqw 0; }
.sl-logo { font-size: 3.6cqw; font-weight: 800; letter-spacing: -.03em; }
.sl-logo span { color: var(--x-acc); }
.sl-pill { padding: 1.3cqw 2.8cqw; border-radius: 999px; background: var(--x-fg); color: var(--x-bg); font-size: 1.7cqw; font-weight: 700; }
.sl-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3cqw; padding: 5cqw 5cqw 0; }
.sl-title { font-size: 7.2cqw; font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.sl-sub { margin-top: 2cqw; font-size: 2.1cqw; line-height: 1.4; opacity: .8; }
.sl-btn { display: inline-block; margin-top: 3cqw; padding: 1.8cqw 3.4cqw; border-radius: 999px; background: var(--x-acc); color: #fff; font-size: 1.9cqw; font-weight: 700; }
.sl-photo {
  position: relative; aspect-ratio: 1;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  background:
    radial-gradient(circle at 50% 44%, #f4c6b3 0 13%, transparent 13.6%),
    radial-gradient(ellipse 26% 30% at 50% 40%, #5a2d4f 0 99%, transparent 100%),
    radial-gradient(ellipse 38% 26% at 50% 100%, var(--x-acc) 0 99%, transparent 100%),
    var(--x-lil);
}
.sl-sticker { position: absolute; right: -2cqw; top: 1cqw; display: grid; place-items: center; width: 13cqw; aspect-ratio: 1; padding: 1cqw; border-radius: 50%; background: var(--x-mint); font-size: 1.55cqw; font-weight: 800; line-height: 1.1; text-align: center; transform: rotate(12deg); }
.sl-book { margin: 6cqw 5cqw 0; padding: 3.6cqw; border-radius: 3cqw; background: #fff; }
.sl-h { font-size: 2.6cqw; font-weight: 800; }
.sl-days, .sl-slots { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin-top: 2.2cqw; }
.sl-days span { display: grid; place-items: center; width: 7.4cqw; height: 8cqw; border-radius: 2cqw; background: var(--x-bg); font-size: 1.7cqw; font-weight: 700; }
.sl-slots span { padding: 1.2cqw 2.2cqw; border: 1.5px solid #f2cfc6; border-radius: 999px; font-size: 1.7cqw; font-weight: 700; }
.sl-days .is-on, .sl-slots .is-on { border-color: var(--x-fg); background: var(--x-fg); color: #fff; }
.sl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 5cqw 5cqw 0; }
.sl-cards div { display: grid; gap: .8cqw; padding: 2.4cqw; border-radius: 2.4cqw; background: #fff; font-size: 1.8cqw; }
.sl-cards i { height: 9cqw; border-radius: 1.6cqw; background: var(--x-mint); }
.sl-cards div:nth-child(2) i { background: var(--x-lil); }
.sl-cards div:nth-child(3) i { background: #ffd2c7; }
.sl-cards b { font-size: 2.2cqw; font-weight: 800; }
.sl-cards span { opacity: .7; }
.sl-foot { margin-top: auto; padding: 4cqw 5cqw; background: var(--x-fg); color: var(--x-bg); font-size: 2cqw; font-weight: 700; }

/* 3 — Artisan électricien : jaune et noir, typo condensée, numéro et devis en avant */
.ex--artisan { --x-bg: #f2efe8; --x-fg: #111111; --x-acc: #ffd400; font-family: var(--font); }
.ar-display { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Roboto Condensed", "Oswald", sans-serif-condensed, var(--font); font-weight: 800; font-stretch: condensed; text-transform: uppercase; letter-spacing: .01em; }
.ar-alert { display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 5cqw; background: var(--x-fg); color: var(--x-acc); font-size: 1.6cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ar-nav { display: flex; align-items: center; justify-content: space-between; padding: 3cqw 5cqw; border-bottom: .6cqw solid var(--x-fg); }
.ar-logo { font-size: 4.4cqw; line-height: 1; }
.ar-logo span { display: inline-block; margin-left: .6cqw; padding: 0 1.1cqw; background: var(--x-acc); }
.ar-burger { display: grid; gap: .8cqw; width: 5cqw; }
.ar-burger i { height: .6cqw; background: var(--x-fg); }
.ar-hero { position: relative; padding: 5cqw 5cqw 6cqw; background: var(--x-acc); }
.ar-title { font-size: 12.5cqw; line-height: .88; }
.ar-sub { margin-top: 2.4cqw; font-size: 2.1cqw; font-weight: 600; }
.ar-ctas { display: flex; gap: 1.6cqw; margin-top: 3.6cqw; }
.ar-btn { padding: 2cqw 3cqw; background: var(--x-fg); color: var(--x-acc); font-size: 1.8cqw; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ar-btn--ghost { background: transparent; color: var(--x-fg); box-shadow: inset 0 0 0 .5cqw var(--x-fg); }
.ar-stamp { position: absolute; right: 5cqw; top: 5cqw; display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; border: .6cqw solid var(--x-fg); border-radius: 50%; font-size: 2.2cqw; line-height: 1; text-align: center; transform: rotate(-12deg); }
.ar-tape { height: 4cqw; background: repeating-linear-gradient(-45deg, var(--x-fg) 0 2.4cqw, var(--x-acc) 2.4cqw 4.8cqw); }
.ar-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 5cqw 5cqw 0; border: .3cqw solid var(--x-fg); }
.ar-grid div { display: grid; gap: 1cqw; padding: 3cqw; border: .3cqw solid var(--x-fg); background: #fff; }
.ar-grid b { font-size: 5.4cqw; line-height: 1; }
.ar-grid span { font-size: 1.9cqw; font-weight: 700; text-transform: uppercase; }
.ar-proof { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin: 4cqw 5cqw 0; }
.ar-proof span { padding: 1.2cqw 2cqw; background: var(--x-fg); color: #fff; font-size: 1.7cqw; font-weight: 700; }
.ar-foot { margin-top: auto; padding: 4cqw 5cqw; background: var(--x-fg); color: var(--x-acc); font-size: 2.6cqw; }

/* 4 — Cabinet de kiné : clair et rassurant, cartes arrondies, prise de rendez-vous */
.ex--sante { --x-bg: #f3f7fb; --x-fg: #11304d; --x-acc: #2f6fed; --x-mint: #d6f1e7; --x-sky: #dfe9fb; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.kn-nav { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 5cqw; background: #fff; }
.kn-logo { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.6cqw; font-weight: 700; }
.kn-cross { position: relative; display: block; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: var(--x-acc); }
.kn-cross::before, .kn-cross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 55%; height: 18%; border-radius: .4cqw; background: #fff; transform: translate(-50%, -50%); }
.kn-cross::after { transform: translate(-50%, -50%) rotate(90deg); }
.kn-links { display: flex; gap: 2cqw; margin-left: auto; }
.kn-links i { width: 6cqw; height: .9cqw; border-radius: 1cqw; background: #c9d6e6; }
.kn-btn { padding: 1.4cqw 2.6cqw; border-radius: 1.4cqw; background: var(--x-acc); color: #fff; font-size: 1.7cqw; font-weight: 600; white-space: nowrap; }
.kn-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3cqw; padding: 5cqw 5cqw 0; }
.kn-tag { display: inline-block; padding: .9cqw 1.8cqw; border-radius: 999px; background: var(--x-mint); color: #1f6b52; font-size: 1.5cqw; font-weight: 600; }
.kn-title { margin-top: 2cqw; font-size: 6cqw; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.kn-sub { margin-top: 1.8cqw; font-size: 2cqw; color: #4a6380; }
.kn-card { display: grid; gap: 1.8cqw; padding: 3cqw; border-radius: 2.4cqw; background: #fff; box-shadow: 0 1.6cqw 4cqw rgba(17, 48, 77, .1); font-size: 1.8cqw; font-weight: 600; }
.kn-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.kn-slots span { padding: 1.2cqw; border-radius: 1.2cqw; background: var(--x-sky); color: var(--x-acc); text-align: center; }
.kn-slots span:first-child { background: var(--x-acc); color: #fff; }
.kn-btn--full { text-align: center; }
.kn-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; margin: 6cqw 5cqw 0; }
.kn-icons div { display: grid; justify-items: center; gap: 1.2cqw; padding: 2.6cqw 1cqw; border-radius: 2cqw; background: #fff; font-size: 1.8cqw; font-weight: 600; }
.kn-ico { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--x-sky); }
.kn-icons div:nth-child(even) .kn-ico { background: var(--x-mint); }
.kn-info { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3cqw; margin: 5cqw 5cqw 0; }
.kn-map { position: relative; aspect-ratio: 1.3; border-radius: 2cqw; background: linear-gradient(28deg, transparent 46%, #fff 46% 50%, transparent 50%), linear-gradient(-58deg, transparent 56%, #fff 56% 60%, transparent 60%), #dbe6f2; }
.kn-map::after { content: ""; position: absolute; left: 54%; top: 36%; width: 5cqw; height: 5cqw; border-radius: 50% 50% 50% 0; background: var(--x-acc); transform: rotate(-45deg); }
.kn-h { font-size: 2.6cqw; font-weight: 700; }
.kn-info p + p { margin-top: 1cqw; font-size: 1.8cqw; color: #4a6380; }
.kn-info i { height: .9cqw; margin-top: 1.4cqw; border-radius: 1cqw; background: #c9d6e6; }
.kn-info i:last-child { width: 70%; }
.kn-foot { margin-top: auto; padding: 4cqw 5cqw; background: var(--x-fg); color: var(--x-sky); font-size: 1.9cqw; }

/* Palette affichée sous chaque exemple */
.project__swatches { display: flex; grid-column: 1 / -1; gap: 6px; margin-top: 12px; }
.project__swatches i { display: block; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--dark) 12%, transparent); border-radius: var(--radius); background: var(--s); transition: transform .5s var(--ease-back); }
.project__swatches i:nth-child(2) { transition-delay: .04s; }
.project__swatches i:nth-child(3) { transition-delay: .08s; }
.project__swatches i:nth-child(4) { transition-delay: .12s; }
@media (hover: hover) { .project:hover .project__swatches i { transform: translateY(-4px); } }

/* Carte d'appel à l'action */
.project--cta .project__media { border-color: var(--accent-100); background: var(--accent-50); transition: background-color .6s var(--ease), border-color .6s; }
.cta-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw; }
.cta-card__eyebrow { font-size: 2.2cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); transition: color .6s; }
.cta-card__title { max-width: 12ch; font-size: 7.4cqw; font-weight: 300; line-height: 1.04; letter-spacing: -0.035em; transition: color .6s; }
.cta-card__link { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 2.8cqw; color: var(--accent); transition: color .6s; }
.cta-card__link .arrow { width: 2.4cqw; height: 2.4cqw; }
.project--cta:hover .project__media { border-color: var(--solid); background: var(--solid); }
.project--cta:hover .cta-card__eyebrow, .project--cta:hover .cta-card__title, .project--cta:hover .cta-card__link { color: var(--on-solid); }

@media (max-width: 899px) {
  .work__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .work__hint { display: none; }
}

/* ---------- 13. À propos ---------- */
.about { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(40px, 6vw, 96px); padding-top: var(--head-y); }
.about .head { padding-top: 0; margin-bottom: 28px; }
.about__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--accent-50); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* La photo dézoome doucement à son apparition, et réagit au survol */
.js .about__photo img { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.js .about__photo.is-in img { transform: none; }
@media (hover: hover) { .js .about__photo.is-in:hover img { transform: scale(1.03); } }
.about__caption {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; color: var(--ink);
}
.about__caption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.about__placeholder {
  display: grid; place-content: center; justify-items: center; gap: 8px;
  height: 100%; padding: 24px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--pop-ink) 7%, transparent) 14px 15px), var(--accent-50);
  color: var(--accent); text-align: center;
}
.about__placeholder b { font-size: 15px; font-weight: 400; letter-spacing: .04em; }
.about__placeholder span { font-size: 13px; color: var(--slate); }
.about__text { display: grid; gap: 14px; max-width: 46ch; font-size: clamp(17px, 1.45vw, 20px); font-weight: 300; line-height: 1.55; }
.about__status { font-size: 14px; font-weight: 400; color: var(--slate); }
.about .stats { margin-top: clamp(32px, 4vw, 48px); }
.about .stat__num { font-size: clamp(46px, 4.6vw, 68px); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--frost); }
.stat { padding: 32px 24px 32px 0; border-bottom: 1px solid var(--frost); }
.stat:nth-child(odd) { border-right: 1px solid var(--frost); }
.stat:nth-child(even) { padding-left: 32px; padding-right: 0; }
.stat__num { display: flex; align-items: baseline; gap: .1em; font-size: clamp(52px, 5.8vw, 84px); font-weight: 300; line-height: 1; letter-spacing: -0.045em; }
.stat__unit { font-size: .42em; letter-spacing: -0.02em; color: var(--accent); }
.stat__label { max-width: 24ch; margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--slate); }

.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: clamp(56px, 7vw, 96px); }
.perks li { display: flex; gap: 16px; padding: 28px 0; border-top: 1px solid var(--frost); }
.perks .check { width: 18px; height: 18px; margin-top: 3px; transition: transform .6s var(--ease-back); }
.perks li:hover .check { transform: rotate(-12deg) scale(1.25); }
.perks b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 400; letter-spacing: -0.015em; }
.perks span { font-size: 15px; line-height: 1.55; color: var(--steel); }
.perks span b { color: var(--ink); }

@media (max-width: 1099px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__photo { width: min(100%, 360px); }
}
@media (max-width: 639px) {
  .perks { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: 24px 16px 24px 0; }
  .stat:nth-child(even) { padding-left: 16px; }
}

/* ---------- 14. Tarifs ---------- */
/* Rappel des prix de création (registre sur 3 colonnes) */
.recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--frost); }
.recap__item { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: clamp(22px, 2.4vw, 32px); background: var(--white); transition: background-color .4s; }
.recap__item:hover { background: var(--mist); }
.recap__name { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.recap__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.recap__price small { font-size: 13px; color: var(--slate); }
.recap__price b { font-size: clamp(34px, 3.4vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.recap__note { margin-top: 16px; font-size: 14px; color: var(--steel); }

/* Titre des formules + interrupteur Mensuel / Annuel */
.pricing__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin: clamp(64px, 8vw, 104px) 0 clamp(32px, 4vw, 48px); }
.pricing__intro { display: grid; gap: 10px; }
.pricing__sub { font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.1; letter-spacing: -0.025em; }
.pricing__intro p { font-size: 16px; color: var(--slate); }
.switch {
  position: relative;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px;
  border: 1px solid var(--frost); border-radius: var(--radius);
  background: var(--mist);
}
.switch button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px;
  border-radius: 2px;
  font-size: 14px; white-space: nowrap;
  color: var(--steel);
  transition: color .4s;
}
.switch button[aria-checked="true"] { color: var(--ink); }
.switch button small { font-size: 11px; color: var(--accent); }
.switch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border: 1px solid var(--frost); border-radius: 2px; background: var(--white); transition: transform .6s var(--ease); }
.switch[data-mode="year"] .switch__thumb { transform: translateX(100%); }

.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); background: var(--white); }
.plan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.plan:hover::after { transform: scaleX(1); }
.plan--featured { --spot: rgba(255, 255, 255, .35); background: var(--pop); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.plan__name { font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.badge { padding: 4px 10px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 12px; }
.plan__desc { min-height: 2.6em; margin-top: 18px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 28px; }
.plan__amount { font-size: clamp(52px, 5vw, 72px); font-weight: 300; line-height: 1; letter-spacing: -0.045em; }
.plan__cur { font-size: 26px; font-weight: 300; }
/* Libellé "par mois / par an" qui roule au changement de période */
.plan__note { display: grid; height: 1.45em; margin-top: 10px; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.plan__note span { grid-area: 1 / 1; transition: transform .6s var(--ease), opacity .4s; }
.plan__note .when-year { opacity: 0; transform: translateY(100%); }
.is-year .plan__note .when-month { opacity: 0; transform: translateY(-100%); }
.is-year .plan__note .when-year { opacity: 1; transform: none; color: var(--accent); }
.plan__list { display: grid; flex: 1; align-content: start; gap: 12px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--frost); }
.plan--featured .plan__list { border-top-color: var(--accent-100); }
.plan__list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; }
.plan__list .check { margin-top: 2px; }
.plan__cta { width: 100%; margin-top: 36px; }
/* Bon à savoir */
.goodtoknow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px 40px; margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid var(--frost); }
.goodtoknow__title { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.goodtoknow__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.goodtoknow__list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.goodtoknow__list .check { margin-top: 3px; }
.goodtoknow__vat { grid-column: 2; font-size: 13.5px; color: var(--slate); }

@media (max-width: 899px) {
  .recap { grid-template-columns: minmax(0, 1fr); }
  .recap__item { gap: 10px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan__desc { min-height: 0; }
  .goodtoknow { grid-template-columns: minmax(0, 1fr); }
  .goodtoknow__list { grid-template-columns: minmax(0, 1fr); }
  .goodtoknow__vat { grid-column: auto; }
}

/* ---------- 15. FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: start; gap: clamp(40px, 6vw, 112px); padding-top: var(--head-y); }
.faq__head { position: sticky; top: 112px; padding-top: 0; margin-bottom: 0; }
.faq__head .h2 { max-width: 12ch; }
.faq__list { border-top: 1px solid var(--frost); }
.qa { position: relative; border-bottom: 1px solid var(--frost); }
.qa::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.qa:hover::after, .qa.is-open::after { transform: scaleX(1); }
.qa h3 { font: inherit; }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 28px 0;
  font-size: clamp(18px, 1.7vw, 23px); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em;
  text-align: left;
}
.qa__q > span:first-child { transition: transform .6s var(--ease), color .4s; }
.qa__q:hover > span:first-child { transform: translateX(8px); }
.qa.is-open .qa__q > span:first-child { color: var(--accent); }
.qa__icon { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--frost); border-radius: var(--radius); transition: border-color .4s, background-color .4s; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .5s var(--ease), background-color .4s; }
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa__q:hover .qa__icon { border-color: var(--accent-200); }
.qa.is-open .qa__icon { border-color: var(--solid); background: var(--solid); }
.qa.is-open .qa__icon::before, .qa.is-open .qa__icon::after { background: var(--on-solid); }
.qa.is-open .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa__a > div { overflow: hidden; }
.qa__a p { max-width: 60ch; padding: 0 56px 28px 0; font-size: 16px; line-height: 1.65; color: var(--steel); }
.js .qa__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--ease), visibility 0s linear .6s; }
.js .qa.is-open .qa__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .6s var(--ease), visibility 0s; }
.js .qa__a p { opacity: 0; transform: translateY(-8px); transition: opacity .5s, transform .6s var(--ease); }
.js .qa.is-open .qa__a p { opacity: 1; transform: none; transition-delay: .1s; }

@media (max-width: 899px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__head { position: static; } .qa__a p { padding-right: 0; } }

/* ---------- 16. Contact ---------- */
.contact { scroll-margin-top: 96px; }
.contact__card {
  --mx: 78%; --my: 18%;
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 5.5vw, 88px);
  border-radius: var(--radius);
  background: var(--dark); color: var(--ink);
}
.contact__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact__grid {
  position: absolute; inset: -56px;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridpan 14s linear infinite;
}
.contact__grid--hi { background-image: linear-gradient(color-mix(in srgb, var(--pop) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pop) 50%, transparent) 1px, transparent 1px); }
@keyframes gridpan { to { transform: translate3d(56px, 56px, 0); } }
.contact__mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent); mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent); }
.contact__glow { position: absolute; inset: 0; background: radial-gradient(640px circle at var(--mx) var(--my), color-mix(in srgb, var(--pop) 18%, transparent), transparent 65%); }

.contact__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: clamp(40px, 6vw, 96px); }
.contact__info { display: grid; justify-items: start; gap: 22px; }
.contact .eyebrow { color: rgba(255, 255, 255, .94); }
.contact .eyebrow__line { background: var(--pop-light); }
.contact .lead { color: rgba(255, 255, 255, .94); }
.contact__details { width: 100%; margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .24); }
.contact__details li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; border-bottom: 1px solid rgba(255, 255, 255, .24); font-size: 15px; }
.contact__details li > span:first-child { color: rgba(255, 255, 255, .94); }
.contact__details b { font-weight: 400; text-align: right; }
.copy { display: inline-flex; align-items: center; gap: 12px; text-align: right; }
.copy__text { position: relative; }
.copy__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.copy:hover .copy__text::after { transform: scaleX(1); transform-origin: left; }
.copy__hint { display: inline-grid; height: 24px; padding: 0 10px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; line-height: 24px; }
.copy__hint span { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.copy__hint span + span { transform: translateY(100%); }
.copy.is-copied .copy__hint span:first-child { transform: translateY(-100%); }
.copy.is-copied .copy__hint span + span { transform: none; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.social { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--radius); font-size: 14px; transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.social svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .5s var(--ease); }
.social:hover { border-color: var(--pop); background: var(--pop); color: var(--on-pop); transform: translateY(-3px); }
.social:hover svg { transform: translate(2px, -2px); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.contact__details a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color .3s; }
.contact__details a:hover { text-decoration-color: var(--white); }
.contact__details li > b { max-width: 60%; }
.form__hint { margin-top: -12px; font-size: 13px; color: var(--slate); }
.form__legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Formulaire */
.form { position: relative; display: grid; gap: 26px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { position: relative; display: block; }
.field input, .field textarea {
  display: block; width: 100%;
  padding: 22px 0 10px;
  border: 0; border-bottom: 1px solid var(--frost); border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: 16px;
  outline: none;
  transition: border-color .4s;
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field textarea { min-height: 112px; line-height: 1.5; resize: vertical; }
.field > span { position: absolute; left: 0; top: 22px; font-size: 16px; line-height: 1.5; color: var(--slate); pointer-events: none; transform-origin: left top; transition: transform .5s var(--ease), color .4s; }
.field input:focus + span, .field input:not(:placeholder-shown) + span,
.field textarea:focus + span, .field textarea:not(:placeholder-shown) + span { transform: translateY(-20px) scale(.78); }
.field:focus-within > span { color: var(--accent); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.field--area::after { bottom: 6px; }
.field:focus-within::after { transform: scaleX(1); }
.field.is-error > span { color: var(--danger); }
.field.is-error::after { transform: scaleX(1); background: repeating-linear-gradient(90deg, var(--danger) 0 6px, transparent 6px 10px); }
.field.is-error::before { content: attr(data-error); position: absolute; right: 0; top: 2px; font-size: 12px; color: var(--danger); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 600000s 0s; }

.chips { min-width: 0; padding: 0; border: 0; }
.chips legend { margin-bottom: 12px; padding: 0; font-size: 13px; color: var(--slate); }
.chips__list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--frost); border-radius: 9999px; background: var(--white); color: var(--steel); font-size: 14px; white-space: nowrap; transition: background-color .4s var(--ease), border-color .4s, color .4s; }
.chip > span i { display: inline-block; width: 0; height: 10px; overflow: hidden; transition: width .4s var(--ease), margin .4s var(--ease); }
.chip > span i::before { content: ""; display: block; width: 4px; height: 8px; margin-left: 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.chip:hover input:not(:checked) + span { border-color: var(--accent-200); color: var(--accent); }
.chip input:checked + span { border-color: var(--solid); background: var(--solid); color: var(--on-solid); }
.chip input:checked + span i { width: 10px; margin-right: 7px; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__legal { max-width: 28ch; font-size: 13px; color: var(--slate); }
.form__status { font-size: 14px; color: var(--accent); }
.form__status:empty { display: none; }
.form__done {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--radius);
  background: var(--white);
  opacity: 0; visibility: hidden;
  transform: scale(.98);
  transition: opacity .6s var(--ease), transform .7s var(--ease), visibility 0s linear .6s;
}
.form.is-sent .form__done { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease), visibility 0s; }
.form__check { width: 56px; height: 56px; border: 1px solid var(--accent-100); border-radius: var(--radius); background: var(--accent-50); fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form__check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.form.is-sent .form__check path { animation: drawin .8s var(--ease) .3s forwards; }
.form__done-title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; letter-spacing: -0.03em; }
.form__done p:not(.form__done-title) { max-width: 44ch; color: var(--steel); }
.form__done a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.shake { animation: shake .5s var(--ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

@media (max-width: 1099px) { .contact__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .contact__details li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px 0; }
  .contact__details b, .copy { text-align: left; }
  .contact__details li > b { max-width: none; }
}

/* ---------- 17. Pied de page ---------- */
.footer { overflow: hidden; padding-top: clamp(64px, 8vw, 112px); }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__brand { display: grid; justify-items: start; align-content: start; gap: 18px; }
.footer__brand > p:not(.tag) { max-width: 30ch; font-size: 15px; color: var(--steel); }
.footer__title { margin-bottom: 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.footer__col a { position: relative; display: inline-block; padding: 5px 0; font-size: 15px; transition: color .3s, transform .5s var(--ease); }
.footer__col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.footer__col a:hover { color: var(--accent); transform: translateX(4px); }
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__mark {
  display: flex;
  margin-top: clamp(56px, 8vw, 120px);
  overflow: hidden;
  font-size: clamp(72px, 21vw, 330px); font-weight: 300; line-height: .9; letter-spacing: -0.06em;
  padding-bottom: .16em; /* place pour la queue du « g » */
  white-space: nowrap;
  user-select: none;
}
.mk { display: inline-block; }
.mk:last-child { color: var(--accent); }
.mk__i { display: inline-block; transition: font-weight .5s var(--ease); }
.js .mk { transform: translate3d(0, 125%, 0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--ci, 0) * 70ms); }
.js .footer__mark.is-in .mk { transform: none; }

.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0 32px; border-top: 1px solid var(--frost); font-size: 13px; color: var(--slate); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { transition: color .3s; }
.footer__legal a:hover { color: var(--ink); }
.totop { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.totop__icon { display: inline-flex; overflow: hidden; }
.totop svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.totop:hover svg { animation: up .9s var(--ease) infinite; }
@keyframes up { 0% { transform: none; } 45% { transform: translateY(-130%); } 46% { transform: translateY(130%); } 100% { transform: none; } }

@media (max-width: 899px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 17 bis. Pages légales ---------- */
.legal { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 112px)); padding-bottom: var(--section-y); }
.legal__head { display: grid; justify-items: start; gap: 22px; margin-bottom: clamp(40px, 5vw, 64px); }
.legal__title { font-size: clamp(40px, 6vw, 84px); font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; }
.legal__body { max-width: 980px; }
.legal__block { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px 48px; padding: clamp(28px, 3.6vw, 44px) 0; border-bottom: 1px solid var(--frost); }
.legal__block h2 { padding-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.legal__content { display: grid; gap: 12px; font-size: 17px; line-height: 1.65; }
.legal__content ul { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; }
.legal__content ul li::marker { color: var(--accent); }
.legal__content a[href]:not(.link) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal__list { display: grid; margin: 0; }
.legal__list > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--frost); }
.legal__list > div:first-child { padding-top: 0; border-top: 0; }
.legal__list dt { font-size: 15px; color: var(--slate); }
.legal__list dd { margin: 0; }
.legal__todo { color: var(--accent); }
@media (max-width: 719px) {
  .legal__block, .legal__list > div { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   17 ter. SITE MULTIPAGE — transitions, en-tête de page, composants partagés
   ========================================================================== */

/* Transitions douces entre les pages (navigateurs récents ; ailleurs : navigation classique) */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translate3d(0, -18px, 0); } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } }

/* Menu mobile : bloc des services */
.menu { overflow-y: auto; }
.menu__services { padding-top: 26px; }
.menu__label { margin-bottom: 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.menu__services ul { display: flex; flex-wrap: wrap; gap: 8px; }
.menu__services a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--frost); border-radius: 999px; font-size: 14px; transition: border-color .3s, color .3s; }
.menu__services a:hover { border-color: var(--accent-200); color: var(--accent); }
.menu__links a[aria-current="page"], .menu__services a[aria-current="page"] { color: var(--accent); }
.menu__services a[aria-current="page"] { border-color: var(--accent); }
.footer__legal a[aria-current="page"] { color: var(--ink); }

/* Fil d'Ariane */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--slate); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid var(--smoke); border-right: 1px solid var(--smoke); transform: rotate(45deg); }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* En-tête des pages intérieures */
.phero { position: relative; overflow: clip; padding: calc(var(--nav-h) + clamp(32px, 6vw, 80px)) 0 clamp(56px, 7vw, 104px); }
.phero .hero__canvas {
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 82% 40%, #000 12%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 85% at 82% 40%, #000 12%, transparent 70%);
}
.phero .container { position: relative; }
.phero .crumbs { margin-bottom: clamp(28px, 4vw, 52px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.phero--text .phero__grid { grid-template-columns: minmax(0, 1fr); }
.phero__content { display: grid; justify-items: start; gap: 22px; will-change: transform, opacity; }
.phero__title { max-width: 17ch; font-size: clamp(36px, 4.6vw, 70px); font-weight: 300; line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; }
.phero--text .phero__title { max-width: 20ch; }
.phero__lead { max-width: 42ch; font-size: clamp(17px, 1.45vw, 20px); font-weight: 300; line-height: 1.5; color: var(--steel); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.phero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 18px; border-top: 1px solid var(--frost); font-size: 14px; color: var(--slate); }
.phero__price b { font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
@media (max-width: 1099px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .phero .hero__canvas { -webkit-mask-image: radial-gradient(ellipse 90% 40% at 50% 78%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 90% 40% at 50% 78%, #000 15%, transparent 75%); }
}

/* --- Visuels animés des pages Services (unités cqw = % de la largeur du visuel) --- */
.pv { position: relative; width: 100%; max-width: 640px; justify-self: center; container-type: inline-size; aspect-ratio: 1 / .86; }
.pv .layer--browser { left: 0; top: 4%; width: 84%; }
.pv .layer--phone { right: 0; top: 22%; width: 29%; }
.pv .layer--checks { left: 7%; top: 66%; width: 46%; }
.js .layer--phone .layer__in { transition-delay: .6s; }
.js .layer--checks .layer__in { transition-delay: .85s; }
.mphone { display: grid; grid-template-rows: auto 1fr; aspect-ratio: 9 / 18.5; overflow: hidden; border: 1.5cqw solid var(--ink); border-radius: 5cqw; background: var(--white); }
.mphone__top { display: grid; place-items: center; height: 4.4cqw; }
.mphone__top::before { content: ""; width: 34%; height: 1.2cqw; border-radius: 1cqw; background: var(--ink); }
.mphone__body { display: grid; align-content: start; gap: 2cqw; padding: 2.6cqw 3cqw; }
.mphone__logo { font-size: 2.4cqw; font-weight: 600; letter-spacing: -0.04em; }
.mphone__title { font-size: 3.4cqw; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.mphone__img { display: block; aspect-ratio: 1.15; border-radius: 2px; background: linear-gradient(160deg, var(--accent-50), var(--accent-200)); }
.mphone__btn { display: block; height: 5cqw; border-radius: 2px; background: var(--accent); }
.mphone i { display: block; height: 1cqw; border-radius: 1cqw; background: var(--frost); }
.mphone i:last-of-type { width: 70%; }

/* Avant / après (refonte) */
.ba { --pos: 55%; position: relative; width: 100%; max-width: 640px; justify-self: center; container-type: inline-size; aspect-ratio: 1.2; overflow: hidden; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); user-select: none; }
.ba__pane { position: absolute; inset: 0; overflow: hidden; }
.ba__pane--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__pane .site { height: 100%; padding-top: 5cqw; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: var(--dark); pointer-events: none; }
.ba__handle i { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 7cqw; height: 7cqw; min-width: 36px; min-height: 36px; border-radius: 50%; background: var(--pop); color: var(--on-pop); box-shadow: 0 0 0 2px var(--dark); transform: translate(-50%, -50%); }
.ba__handle svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba__tag { position: absolute; top: 3cqw; z-index: 2; padding: .9cqw 2cqw; border-radius: 999px; font-size: 2.1cqw; color: var(--paper); background: var(--dark); }
.ba__tag--before { left: 3cqw; }
.ba__tag--after { right: 3cqw; background: var(--pop); color: var(--on-pop); }
.ba__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
/* L'ancien site, volontairement daté */
.old { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; background: #e6e6df; color: #333; font-family: Georgia, "Times New Roman", serif; }
.old__head { padding: 2.4cqw 3cqw; background: linear-gradient(#7d8b97, #56636e); color: #fff; font-size: 3.4cqw; font-style: italic; }
.old__nav { display: flex; gap: 2.6cqw; padding: 1.4cqw 3cqw; background: #c8c8c0; font-size: 1.9cqw; }
.old__nav span { color: #1a0dab; text-decoration: underline; }
.old__body { display: grid; grid-template-columns: 28% 1fr; gap: 2.4cqw; padding: 3cqw; }
.old__side { display: grid; align-content: start; gap: 1.4cqw; padding: 1.8cqw; border: 1px solid #b4b4ab; background: #d6d6ce; font-size: 1.8cqw; }
.old__main { text-align: center; }
.old__main b { display: block; margin-bottom: 1.6cqw; font-size: 3.4cqw; color: #8b1a1a; }
.old__main p { margin: 0 0 1.6cqw; font-size: 1.9cqw; line-height: 1.35; }
.old__img { height: 18cqw; border: 2px ridge #999; background: repeating-linear-gradient(45deg, #b6b6ad 0 1cqw, #c6c6be 1cqw 2cqw); }
.old__foot { padding: 1.4cqw 3cqw; background: #c8c8c0; font-size: 1.6cqw; text-align: center; }

/* Recherche locale (référencement) */
.serp { display: grid; align-content: start; gap: 3cqw; width: 100%; max-width: 600px; justify-self: center; padding: 4cqw; container-type: inline-size; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); }
.serp__bar { display: flex; align-items: center; gap: 2cqw; height: 10cqw; padding: 0 3.4cqw; border: 1px solid var(--frost); border-radius: 999px; font-size: 3.4cqw; }
.serp__bar svg { width: 4cqw; height: 4cqw; fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-linecap: round; }
.serp__q { min-height: 1.2em; color: var(--ink); white-space: nowrap; }
.serp__bar .caret { width: .45em; background: var(--accent); }
.serp__map {
  position: relative; height: 38cqw; overflow: hidden; border-radius: var(--radius);
  background:
    linear-gradient(28deg, transparent 46%, #fff 46% 49.5%, transparent 49.5%),
    linear-gradient(-62deg, transparent 57%, #fff 57% 60%, transparent 60%),
    linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--pop-ink) 10%, transparent) 18% 40%, transparent 40%),
    var(--paper-2);
}
.serp__pin { position: absolute; width: 5cqw; height: 5cqw; border-radius: 50% 50% 50% 0; background: var(--smoke); transform: rotate(-45deg); }
.serp__pin::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--white); }
.serp__pin--you { width: 7cqw; height: 7cqw; background: var(--accent); }
.hero-in .serp__pin--you { animation: pinhop 2.6s var(--ease) 1.2s infinite; }
@keyframes pinhop { 0%, 100% { translate: 0 0; } 25% { translate: 0 -3cqw; } 42% { translate: 0 0; } }
.serp__card { display: grid; gap: 1.8cqw; padding: 3.4cqw; border: 1px solid var(--accent-100); border-radius: var(--radius); background: var(--accent-50); }
.serp__card b { font-size: 3.8cqw; font-weight: 400; letter-spacing: -0.02em; }
.serp__card > span { font-size: 2.6cqw; color: var(--steel); }
.serp__actions { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.serp__actions i { padding: 1cqw 2.4cqw; border: 1px solid var(--accent-200); border-radius: 999px; background: var(--white); color: var(--accent); font-size: 2.4cqw; font-style: normal; }
.serp__rows i { display: block; height: 1.4cqw; margin-top: 1.8cqw; border-radius: 1cqw; background: var(--frost); }
.serp__rows i:nth-child(2) { width: 70%; }
.js .serp__card { opacity: 0; transform: translate3d(0, 3cqw, 0) scale(.97); transition: opacity .8s var(--ease) 1s, transform 1s var(--ease) 1s; }
.hero-in .serp__card { opacity: 1; transform: none; }

/* Tableau de bord (maintenance) */
.status { display: grid; gap: 3.4cqw; width: 100%; max-width: 600px; justify-self: center; padding: 4.4cqw; container-type: inline-size; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--white); }
.status__head { display: flex; align-items: center; gap: 2cqw; font-size: 3.4cqw; }
.status__head b { font-weight: 400; }
.status__head em { margin-left: auto; font-size: 2.8cqw; color: var(--accent); }
.status__dot { position: relative; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--accent); }
.status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 2.2s var(--ease) infinite; }
.status__pulse { display: block; width: 100%; height: auto; overflow: visible; }
.status__pulse path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status__pulse .base { stroke: var(--frost); }
.status__pulse .beat { stroke: var(--accent); stroke-dasharray: 70 230; animation: beat 2.6s linear infinite; }
@keyframes beat { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.status__list li { display: flex; justify-content: space-between; gap: 2cqw; padding: 2.3cqw 0; border-bottom: 1px solid var(--frost); font-size: 2.8cqw; color: var(--steel); }
.status__list b { font-weight: 400; color: var(--accent); }
.js .status__list li { opacity: 0; transform: translate3d(-2cqw, 0, 0); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(.8s + var(--i, 0) * .15s); }
.hero-in .status__list li { opacity: 1; transform: none; }
.status__msg { display: grid; gap: 1.4cqw; padding: 3cqw; border: 1px solid var(--frost); border-radius: var(--radius); background: var(--mist); font-size: 2.8cqw; }
.status__msg small { font-size: 2.2cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.status__done { justify-self: start; padding: .9cqw 2.2cqw; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 2.3cqw; }
.hero-in .status__done { animation: donepop 6s var(--ease-back) 1.6s infinite both; }
@keyframes donepop { 0%, 28% { opacity: 0; transform: scale(.6); } 36%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* --- Blocs de contenu des pages --- */
.section--tight { padding-bottom: clamp(56px, 7vw, 96px); }
.card--mini { min-height: 0; }
.card--mini .card__title { margin-top: 28px; font-size: clamp(20px, 1.7vw, 24px); }
.card--link { color: inherit; }
.card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; color: var(--accent); }
.card__price .card__more { margin: 0 0 0 auto; }
.head + .perks { margin-top: 0; }
.rule + .faq-group .faq { padding-top: var(--head-y); }
.feats, .others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .feats, .others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .feats, .feats--4, .others { grid-template-columns: minmax(0, 1fr); } }

/* Pour qui ? */
.audience { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: end; gap: clamp(32px, 5vw, 80px); padding-top: var(--head-y); }
.audience .head { padding-top: 0; margin-bottom: 0; }
.audience__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.audience__chips li { padding: 10px 18px; border: 1px solid var(--frost); border-radius: 999px; background: var(--white); font-size: 15px; transition: border-color .4s, color .4s, transform .5s var(--ease-back); }
.audience__chips li:hover { border-color: var(--accent-200); color: var(--accent); transform: translateY(-3px); }
@media (max-width: 899px) { .audience { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Liste à cocher (signes, engagements) */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ticks li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--frost); font-size: 17px; line-height: 1.45; }
.ticks .check { width: 18px; height: 18px; margin-top: 3px; }
@media (max-width: 699px) { .ticks { grid-template-columns: minmax(0, 1fr); } }

/* Étapes compactes */
.flow { position: relative; padding-top: 36px; }
.flow__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.flow--3 .flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--frost); }
.flow__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform-origin: left; }
.flow li { position: relative; display: grid; align-content: start; gap: 10px; }
.flow li::before { content: ""; position: absolute; left: 0; top: -41px; width: 9px; height: 9px; border: 1px solid var(--accent); background: var(--white); transform: rotate(45deg); }
.flow__num { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.flow__title { font-size: clamp(19px, 1.6vw, 22px); font-weight: 300; letter-spacing: -0.02em; }
.flow__text { font-size: 15px; line-height: 1.55; color: var(--steel); }
@media (max-width: 899px) {
  .flow { padding: 0 0 0 28px; }
  .flow__list, .flow--3 .flow__list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .flow::before, .flow__line { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow__line { transform-origin: top; }
  .js .flow .flow__line[data-draw] { transform: scaleY(0); }
  .js .flow .flow__line[data-draw].is-in { transform: none; }
  .flow li::before { left: -32.5px; top: 4px; }
}

/* Encadré prix */
.pricebox { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; align-items: center; gap: 24px 48px; padding: clamp(26px, 3.4vw, 48px); border: 1px solid var(--frost); border-radius: var(--radius); background: var(--mist); }
.pricebox__amount small { display: block; margin-bottom: 8px; font-size: 13px; color: var(--slate); }
.pricebox__amount b { font-size: clamp(44px, 4.6vw, 66px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.pricebox__list { display: grid; gap: 10px; font-size: 15px; }
.pricebox__list li { display: flex; gap: 12px; }
.pricebox__list .check { margin-top: 2px; }
.pricebox__cta { display: grid; justify-items: start; gap: 14px; }
@media (max-width: 999px) { .pricebox { grid-template-columns: minmax(0, 1fr); } }

/* Note honnête */
.note { display: flex; gap: 16px; max-width: 760px; padding: 22px 24px; border: 1px solid var(--accent-100); border-radius: var(--radius); background: var(--accent-50); font-size: 16px; line-height: 1.55; }
.note svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Lien vers la page suivante */
.next { position: relative; display: block; overflow: hidden; isolation: isolate; border-top: 1px solid var(--frost); color: var(--ink); }
.next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--solid); transform: translate3d(0, 101%, 0); transition: transform .8s var(--ease); }
.next__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(48px, 7vw, 104px); }
.next__label { display: block; margin-bottom: 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); transition: color .5s; }
.next__inner > span:first-child { min-width: 0; }
.next__title { display: block; overflow-wrap: anywhere; font-size: clamp(30px, 7vw, 104px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; transition: transform .8s var(--ease), color .5s; }
.next__go { display: grid; place-items: center; flex: 0 0 auto; width: clamp(56px, 7vw, 92px); aspect-ratio: 1; border: 1px solid var(--accent-200); border-radius: 50%; color: var(--accent); transition: background-color .5s, color .5s, border-color .5s, transform .8s var(--ease); }
.next__go svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .next:hover::before { transform: none; }
  .next:hover .next__title { color: var(--on-solid); transform: translateX(14px); }
  .next:hover .next__label { color: color-mix(in srgb, var(--on-solid) 80%, transparent); }
  .next:hover .next__go { border-color: var(--on-solid); background: var(--on-solid); color: var(--solid); transform: rotate(-45deg); }
}

/* Bandeau d'appel à l'action (réutilise la carte Contact) */
.cta-band .contact__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
.cta-band__actions { display: grid; justify-items: start; gap: 10px; }
.cta-band__actions .btn { width: 100%; max-width: 340px; }
@media (max-width: 1099px) { .cta-band .contact__inner { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Raccourci flottant (mobile) */
.fab { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; display: none; gap: 8px; transform: translate3d(0, 150%, 0); transition: transform .6s var(--ease); }
.fab.is-on { transform: none; }
.fab__cta { display: grid; flex: 1; place-items: center; height: 52px; border-radius: var(--radius); background: var(--pop); color: var(--on-pop); font-size: 15px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dark) 12%, transparent); }
.fab__wa { display: grid; flex: 0 0 52px; place-items: center; height: 52px; border-radius: var(--radius); background: var(--dark); color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 22%, transparent); }
.fab__wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
@media (max-width: 719px) { .fab { display: flex; } }
[data-page="contact"] .fab, .menu-open .fab { display: none !important; }

/* Rappel des prix sur 4 colonnes + éléments cliquables */
.recap--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.recap__item { color: inherit; }
.recap__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--accent); }
@media (max-width: 1099px) { .recap--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .recap--4 { grid-template-columns: minmax(0, 1fr); } }

/* Tableau comparatif des formules */
.compare { overflow-x: auto; border: 1px solid var(--frost); border-radius: var(--radius); }
.compare table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 15px 20px; border-bottom: 1px solid var(--frost); text-align: left; vertical-align: middle; transition: background-color .3s; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--mist); font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.compare thead .badge { margin-left: 8px; letter-spacing: 0; text-transform: none; }
.compare tbody th { font-weight: 400; color: var(--steel); }
.compare .is-featured { background: var(--accent-50); }
.compare tbody tr:hover th, .compare tbody tr:hover td:not(.is-featured) { background: var(--mist); }
.compare__price b { font-size: 34px; font-weight: 300; letter-spacing: -0.04em; }
.compare__price .plan__note { height: 1.45em; margin-top: 2px; }
.compare .no { color: var(--smoke); }
.compare .check { width: 18px; height: 18px; }

/* Galerie de la page Réalisations */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); }
.gallery .project { width: auto; flex: none; }
.gallery .project[data-alma] { grid-column: 1 / -1; }
.project__desc { grid-column: 1 / -1; max-width: 52ch; margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--steel); }
@media (max-width: 799px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* Groupes de questions (FAQ) */
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 72px); }
.faq-group .faq { padding-top: 0; }
.faq__head .h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; }

/* Page Contact */
.contact-page { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); }
.contact-page .crumbs { margin-bottom: 24px; }
.contact__card h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1.04; letter-spacing: -0.03em; }

/* Page 404 */
.notfound { padding: calc(var(--nav-h) + clamp(48px, 8vw, 120px)) 0 var(--section-y); }
.notfound__code { font-size: clamp(110px, 22vw, 300px); font-weight: 300; line-height: .85; letter-spacing: -0.06em; color: var(--accent-100); }
.notfound__links { max-width: 900px; margin-top: clamp(40px, 5vw, 64px); }

/* ==========================================================================
   17 quater. TONS DE SECTION ET AJUSTEMENTS RESPONSIVE
   Ajoutez tone-dark (foncé), tone-alt (clair alterné) ou tone-pop (orange)
   sur une section : couleurs, boutons et cartes s'adaptent seuls.
   ========================================================================== */
.tone-dark > .container > .rule:first-child,
.tone-alt > .container > .rule:first-child,
.work.tone-dark .rule, .work.tone-alt .rule { display: none; }
.section.pad-top { padding-top: var(--head-y); }
.screen { color: var(--ink); }
.ticker.tone-dark { border-block-color: transparent; }

/* Tableau comparatif : sur téléphone, chaque ligne devient « intitulé » + 3 colonnes */
@media (max-width: 719px) {
  .compare { overflow: visible; border: 0; border-radius: 0; }
  .compare table { display: block; min-width: 0; font-size: 14px; }
  .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--frost); border-top: 0; }
  .compare thead { position: sticky; top: 0; z-index: 2; }
  .compare thead tr { border-top: 1px solid var(--frost); border-radius: var(--radius) var(--radius) 0 0; background: var(--white); }
  .compare thead th:first-child { display: none; }
  .compare thead th { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 12px 4px; border: 0; font-size: 11.5px; text-align: center; }
  .compare thead .badge { margin: 0; padding: 2px 8px; font-size: 10.5px; }
  .compare tbody th { grid-column: 1 / -1; padding: 14px 14px 2px; border: 0; font-size: 14px; color: var(--ink); }
  .compare td { display: grid; place-items: center; align-content: center; padding: 8px 4px 14px; border: 0; font-size: 13.5px; text-align: center; }
  .compare__price th, .compare tbody tr:last-child th { display: none; }
  .compare__price td { display: block; padding-top: 16px; }
  .compare__price b { font-size: 28px; }
  .compare tbody tr:last-child { border-radius: 0 0 var(--radius) var(--radius); }
  .compare tbody tr:last-child td { padding: 14px 6px; }
  .compare .btn--sm { width: 100%; padding: 0 8px; }
}

/* ---------- 18. États d'animation pilotés par JS ---------- */
/* Apparition au scroll */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Filets qui se dessinent */
.js [data-draw] { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.js [data-draw].is-in { transform: none; }
/* Texte brouillé */
.js [data-scramble] { opacity: 0; transition: opacity .3s; }
.js [data-scramble].is-in { opacity: 1; }
/* Titres : mots qui montent derrière un masque */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em .16em; margin: -.1em -.02em -.16em; }
.w__i { display: inline-block; }
.js [data-split] .w__i { transform: translate3d(0, 1.4em, 0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--wi, 0) * 50ms + var(--d, 0s)); }
.js [data-split].is-in .w__i { transform: none; }
/* Intro du hero */
.js [data-intro] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--delay, 0s); }
.hero-in [data-intro] { opacity: 1; transform: none; }
.js .layer__in { opacity: 0; transform: translate3d(0, 40px, 0) scale(.96); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.js .layer--browser .layer__in { transition-delay: .35s; }
.js .layer--code .layer__in { transition-delay: .6s; }
.js .layer--score .layer__in { transition-delay: .8s; }
.js .layer--notif .layer__in { transition-delay: 1s; }
.hero-in .layer__in { opacity: 1; transform: none; }
.js .bld { opacity: 0; transform: translate3d(0, 1.6cqw, 0); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(.9s + var(--b, 0) * .12s); }
.hero-in .bld { opacity: 1; transform: none; }
.js .arch { transform: scaleY(0); transition: transform 1.4s var(--ease) 1.3s; }
.hero-in .arch { transform: none; }
.js .sun { scale: 0; transition: scale .9s var(--ease-back) 1.8s; }
.hero-in .sun { scale: 1; }
.js .score__bar i { transform: scaleX(0); transition: transform 1.8s var(--ease); transition-delay: calc(1.4s + var(--sd, 0s)); }
.hero-in .score__bar i { transform: none; }
.js .hero__canvas { opacity: 0; transition: opacity 2s var(--ease) .3s; }
.hero-in .hero__canvas { opacity: 1; }

/* Filet de sécurité : si le script ne se lance pas, tout redevient visible */
@keyframes failsafe { to { opacity: 1; transform: none; scale: 1; } }
@keyframes failsafe-hide { to { visibility: hidden; } }
.js:not(.js-ok) [data-reveal], .js:not(.js-ok) [data-intro], .js:not(.js-ok) [data-draw],
.js:not(.js-ok) [data-scramble], .js:not(.js-ok) .layer__in, .js:not(.js-ok) .bld,
.js:not(.js-ok) .arch, .js:not(.js-ok) .sun, .js:not(.js-ok) .hero__canvas { animation: failsafe .01s 2.5s forwards; }
.js:not(.js-ok) .loader { animation: failsafe-hide .01s 2.5s forwards; }

/* ---------- 19. Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-intro], .js [data-draw], .js [data-scramble],
  .js .layer__in, .js .bld, .js .arch, .js [data-split] .w__i, .js .mk { opacity: 1 !important; transform: none !important; }
  .js .sun { scale: 1 !important; }
  .fcursor, .site__cta::after { display: none; }
  .notif { animation: none !important; opacity: 1 !important; transform: none !important; }
}