/* DA KOM — direction artistique : éditorial, prune dominant, citron pour attirer l'œil.
   Les sections claires glissent comme des feuilles sur les fonds sombres. */
/* DA KOM — studio créatif : violet profond, bordeaux, rose, orange et vert citron.
   Deux familles seulement : Archivo (titres épais, en majuscules) et Manrope (textes). */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --violet: #2a0a2c;      /* violet profond */
  --prune: #3d0f38;       /* violet foncé (textes et fonds sur papier) */
  --bordeaux: #300a17;    /* bordeaux sombre */
  --magenta: #e2236e;     /* rose magenta (lumières) */
  --orange: #fe7734;      /* orange lumineux */
  --citron: #c8e542;      /* vert citron sur fond sombre */
  --citron-hi: #dbf35a;   /* citron au survol */
  --lime: #e8fb7b;        /* fond vert citron */
  --olive: #556300;       /* seconde couleur des titres sur fond citron (contraste suffisant) */
  --paper: #F7F4EF;       /* blanc cassé */
  --night: #12050b;       /* noir profond */
  --prune-hi: #b0306f;    /* halo lumineux */
  --on-dark-2: #e4d4dc;   /* texte secondaire sur fond sombre */
  --on-paper-2: #5e4f5a;  /* texte secondaire sur papier */
  --on-lime-2: #3c4210;   /* texte secondaire sur citron */
  --line-dark: rgba(247,244,239,.16);
  --line-paper: rgba(18,5,11,.14);
  /* Couleurs de contexte : chaque section les redéfinit selon son fond */
  --hl: var(--citron); --fg2: var(--on-dark-2); --ln: var(--line-dark); --sec-bg: var(--night);
  --display: "Archivo", "Arial Black", Arial, sans-serif;
  --body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --sheet: clamp(28px, 5vw, 56px);
  --head-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Un élément masqué reste masqué, même si son style lui donne display: grid ou flex */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--paper);
  font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(160,172,79,.25); }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-stretch: 108%; margin: 0; letter-spacing: -.02em; line-height: .95; text-wrap: balance; }
h1, h2 { text-transform: uppercase; }
/* Titres bicolores : la seconde partie prend la couleur d'accent de la section */
.hl { color: var(--hl); }
:focus-visible { outline: 2px solid var(--citron); outline-offset: 4px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--citron); color: var(--night); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap {
  max-width: 1280px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
/* Petites phrases d'introduction : capitales espacées */
.kicker { display: block; font-family: var(--body); font-weight: 600; font-size: clamp(.74rem, .95vw, .86rem); line-height: 1.5; letter-spacing: .28em; text-transform: uppercase; color: var(--fg2); }

/* ---------- Logo DA KOM (image) : partout où le nom apparaît en signature ---------- */
.logo-mark { position: relative; display: inline-block; flex: none; aspect-ratio: 691 / 503; height: 40px; line-height: 0; vertical-align: middle; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
/* Le « O » du logo est un objectif : verre sombre, fin cercle citron, reflet */
.logo-mark::after {
  content: ""; position: absolute; left: 44.72%; top: 72.56%; width: 30.1%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 22%), radial-gradient(circle at 50% 50%, #3a1730 0 30%, #0b0508 62%);
  box-shadow: 0 0 0 1.5px #120609, 0 0 0 3px rgba(200,229,66,.85);
}
.nowrap { white-space: nowrap; }
.logo-mark.inline { height: 1.15em; margin: 0 .08em; vertical-align: -.16em; }
.logo-mark.inline::after { box-shadow: 0 0 0 .03em #120609, 0 0 0 .06em rgba(200,229,66,.85); }
.site-footer .foot-brand .logo-mark { height: clamp(90px, 10vw, 130px); }
.site-footer .foot-brand .logo-mark::after { box-shadow: 0 0 0 2px #120609, 0 0 0 4px rgba(200,229,66,.85); }
.card-logo { margin-bottom: 16px; line-height: 0; }
.card-logo .logo-mark { height: 76px; }
.badge .logo-mark.inline { height: 1.9em; vertical-align: -.62em; }

/* ---------- Logotype : le O est un voyant d'enregistrement citron ---------- */
.mark { font-family: var(--display); font-weight: 800; font-stretch: 100%; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.mark i { display: inline-block; width: .62em; height: .62em; margin: 0 .04em; border-radius: 50%; background: var(--citron); vertical-align: baseline; box-shadow: 0 0 .5em rgba(160,172,79,.5); }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 0 4px rgba(160,172,79,.22); animation: rec 2.2s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .3; } }

/* ---------- Bouton principal : citron, flèche qui pivote, fond qui s'éclaire ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--citron); color: var(--night); font: 700 1rem/1 var(--body); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 36px -14px rgba(160,172,79,.75);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--citron-hi); transform: translateX(-101%); transition: transform .45s var(--ease); }
.cta:hover::before { transform: none; }
.cta:hover { box-shadow: 0 16px 44px -14px rgba(160,172,79,.95); }
.cta:active { transform: scale(.97); }
.cta .arrow { width: 42px; height: 42px; margin-right: -18px; border-radius: 50%; background: var(--night); color: var(--citron); display: grid; place-items: center; }
.cta .arrow svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.cta:hover .arrow svg { transform: rotate(-45deg); }
.cta.small { min-height: 46px; padding: 0 20px; gap: 10px; font-size: .92rem; }
.cta.small .arrow { width: 34px; height: 34px; margin-right: -14px; }
.cta[disabled] { opacity: .6; cursor: progress; }
.link-u { position: relative; text-decoration: none; font-weight: 700; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(.35); transform-origin: left; transition: transform .4s var(--ease); }
.link-u:hover::after { transform: scaleX(1); }

/* ---------- Verre dépoli ---------- */
.glass {
  background: rgba(247,244,239,.08); border: 1px solid rgba(247,244,239,.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}

/* ---------- Halos et dégradés flous (dégradés radiaux : pas de filtre coûteux) ---------- */
.glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.g1 { width: 70vmax; height: 70vmax; left: -26vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(138,74,119,.95), rgba(138,74,119,0)); }
.g2 { width: 48vmax; height: 48vmax; right: -16vmax; top: 12%; background: radial-gradient(closest-side, rgba(160,172,79,.42), rgba(160,172,79,0)); }
.g3 { width: 60vmax; height: 60vmax; left: 16%; bottom: -40vmax; background: radial-gradient(closest-side, rgba(27,20,26,.9), rgba(27,20,26,0)); }
.hero .g1 { animation: drift 24s ease-in-out infinite alternate; }
.hero .g2 { animation: drift 28s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
.grain { position: absolute; inset: 0; z-index: 0; opacity: .07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- En-tête : capsule en verre, fixe ---------- */
.site-header { position: fixed; z-index: 30; left: 0; right: 0; top: max(12px, env(safe-area-inset-top, 0px)); pointer-events: none; }
.site-header .wrap {
  pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 1240px; width: calc(100% - 24px); min-height: var(--head-h); padding: 8px 9px 8px 22px; border-radius: 999px;
  background: rgba(27,20,26,.78); border: 1px solid var(--line-dark);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; color: var(--paper); }
.logo .mark { font-size: 1.4rem; }
.logo .tagline { font-size: .8rem; color: var(--on-dark-2); padding-left: 12px; border-left: 1px solid var(--line-dark); line-height: 1.2; }
.nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--on-dark-2); transition: color .2s; }
.nav a:hover { color: var(--paper); }
.menu-btn { display: none; }
/* Sélecteur de langue : drapeau + code, liste déroulante */
.lang { position: relative; flex: none; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--paper); font: 700 .82rem/1 var(--body); letter-spacing: .08em; cursor: pointer; transition: background-color .2s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: rgba(247,244,239,.08); }
.lang .flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.18); flex: none; }
.lang-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; min-width: 196px; margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: rgba(27,20,26,.96); border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.lang-list a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; color: var(--on-dark-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.lang-list a:hover { background: rgba(247,244,239,.08); color: var(--paper); }
.lang-list a[aria-current="true"] { color: var(--citron); }
@media (max-width: 1180px) { .nav { gap: 20px; } }
@media (max-width: 860px) { .lang { position: static; } .lang summary { width: 46px; padding: 0; justify-content: center; } .lang .lang-code { display: none; } .lang-list { left: 0; right: 0; top: calc(100% + 8px); border-radius: 26px; } .lang-list a { min-height: 48px; font-size: 1.05rem; } }
@media (max-width: 1080px) { .logo .tagline { display: none; } }
@media (max-width: 860px) {
  .site-header .wrap { gap: 8px; padding-left: 18px; }
  .site-header .cta.small { margin-left: auto; }
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line-dark); background: transparent; color: var(--paper); cursor: pointer;
  }
  .menu-btn svg { width: 22px; height: 22px; overflow: visible; }
  .menu-btn path { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease); }
  .site-header.open .menu-btn .l1 { transform: translateY(4px) rotate(45deg); }
  .site-header.open .menu-btn .l2 { transform: translateY(-4px) rotate(-45deg); }
  .site-header nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); border-radius: 26px; padding: 6px 22px 12px;
    background: rgba(27,20,26,.94); border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
  }
  .site-header.open nav { display: block; }
  .nav { display: grid; gap: 0; }
  .nav li + li { border-top: 1px solid var(--line-dark); }
  .nav a { display: block; padding: 15px 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--paper); }
}
@media (max-width: 380px) { .logo .mark { font-size: 1.2rem; } .site-header .cta.small { padding: 0 14px; } .site-header .cta.small .arrow { display: none; } }

/* ---------- Feuilles : chaque section glisse sur la précédente ---------- */
.sheet {
  position: relative; z-index: 1; overflow: clip;
  border-radius: var(--sheet) var(--sheet) 0 0; margin-top: calc(var(--sheet) * -1);
  padding-block: clamp(80px, 10vw, 140px) calc(var(--sheet) + clamp(64px, 8vw, 112px));
}
.sheet > .wrap { position: relative; z-index: 1; }
.paper { background: var(--paper); color: var(--night); color-scheme: light; --hl: var(--prune); --fg2: var(--on-paper-2); --ln: var(--line-paper); --sec-bg: var(--paper); }
.dark { background: var(--night); color: var(--paper); --sec-bg: var(--night); }
.prune { background: var(--prune); color: var(--paper); --sec-bg: var(--prune); }
/* Vert citron : texte noir profond, seconde couleur olive */
.lime { background: var(--lime); color: var(--night); color-scheme: light; --hl: var(--olive); --fg2: var(--on-lime-2); --ln: rgba(18,5,11,.18); --sec-bg: var(--lime); }
.lime .glow, .lime .grain { display: none; }
/* Violet profond avec lumières roses et orangées */
.violet { color: var(--paper); --sec-bg: var(--violet); background:
  radial-gradient(60vmax 60vmax at 0% 0%, rgba(226,35,110,.35), rgba(226,35,110,0) 60%),
  radial-gradient(50vmax 50vmax at 100% 100%, rgba(254,119,52,.3), rgba(254,119,52,0) 60%), var(--violet); }
/* Bordeaux sombre */
.bordeaux { color: var(--paper); --sec-bg: var(--bordeaux); background:
  radial-gradient(55vmax 55vmax at 100% 0%, rgba(226,35,110,.28), rgba(226,35,110,0) 60%), var(--bordeaux); }
/* Le fond flouté de l'accueil, repris pour l'invitation finale */
.warm { color: var(--paper); --sec-bg: var(--violet); background: url("../img/fond-accueil.webp") center / cover no-repeat, var(--violet); }
.warm .glow, .warm .grain { display: none; }
.sheet h2 { font-size: clamp(2.2rem, 5.4vw, 4.8rem); }

/* ================= PAGE D'ACCUEIL : « l'objectif » =================
   Trois interactions seulement : l'objectif qui s'ouvre, les vidéos qui se dévoilent comme une story,
   la vidéo qui passe du rush à la publication. Le reste est calme. */

/* ---------- Bouton pause des vidéos d'ambiance (repris partout) ---------- */
.amb-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--paper); background: rgba(27,20,26,.5); border: 1px solid rgba(247,244,239,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .25s, transform .25s var(--ease);
}
.amb-toggle:hover { background: rgba(27,20,26,.75); }
.amb-toggle:active { transform: scale(.94); }
.amb-toggle .ico { width: 12px; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.amb-toggle[aria-pressed="true"] .ico { border: 0; background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.amb-toggle.text { width: auto; height: 40px; padding: 0 16px 0 14px; gap: 10px; grid-auto-flow: column; border-radius: 999px; font: 600 .86rem/1 var(--body); }

/* ---------- 1. Accueil : le logo DA KOM et son objectif ---------- */
.hero2 { position: relative; background: var(--violet); }
.hero-stage { position: relative; overflow: clip; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--head-h) + 40px) calc(var(--sheet) + 44px); }
/* Au défilement, la scène reste fixe le temps que l'objectif s'ouvre et devienne un iPhone */
.hero2.zoom-on { height: 240vh; }
.zoom-on .hero-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.logo-art, .hero-text { will-change: transform, opacity; }
.hero-bg { position: absolute; inset: -4%; z-index: 0; background: url("../img/fond-accueil.webp") center / cover no-repeat, var(--violet); animation: breathe 22s ease-in-out infinite alternate; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(18,5,11,0) 30%, rgba(18,5,11,.55) 100%); }
@keyframes breathe { to { transform: scale(1.06) translate3d(-1.5%, 1%, 0); } }
.hero2-grid { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: clamp(18px, 3vh, 32px); }
.hero-logo { margin: 0; line-height: 0; text-transform: none; }
.logo-art { position: relative; display: block; width: min(86vw, 64vh, 720px); aspect-ratio: 691 / 503; }
.logo-letters { width: 100%; height: 100%; filter: drop-shadow(0 18px 50px rgba(18,5,11,.45)); }
/* Emplacement de l'objectif mesuré dans le logo : centre à 44,7 % / 72,6 %, diamètre 30,1 % de la largeur */
.lens {
  position: absolute; left: 44.72%; top: 72.56%; width: 30.1%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden; background: #0b0508; will-change: opacity;
  box-shadow: 0 0 0 .35vmin #120609, 0 0 0 .7vmin rgba(232,251,123,.75), 0 0 0 1.1vmin #120609, 0 0 4vmin rgba(255,92,138,.35), 0 0 9vmin rgba(254,119,52,.25);
}
.lens img { width: 100%; height: 100%; object-fit: cover; }
.zoom-on .lens img { visibility: hidden; }

/* Le cadre : un iPhone orange dont on ne voit au repos que le rond de l'objectif */
.lens-frame {
  display: none; position: absolute; z-index: 3; left: 0; top: 0; padding: 3.2%; border-radius: 15% / 7%;
  background: linear-gradient(145deg, #ffa25e 0%, #ff6a24 22%, #d9461a 48%, #ff7f3a 70%, #b23a12 100%);
  will-change: transform, clip-path;
}
.zoom-on .lens-frame { display: block; }
.frame-screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 12.5% / 6%; overflow: hidden; background: #000; }
.frame-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-ui { position: absolute; inset: 0; opacity: var(--ui, 0); }
.frame-cue {
  display: none; position: absolute; z-index: 3; left: 50%; top: 0; margin: 0; align-items: center; gap: 10px; pointer-events: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--paper); white-space: nowrap;
  opacity: var(--cue, 0); transform: translate(-50%, var(--cue-y, 0px));
}
.zoom-on .frame-cue { display: inline-flex; }
.frame-cue svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid rgba(247,244,239,.45); color: var(--citron); animation: nudge 1.6s ease-in-out infinite; }
.lens-frame .iris, .lens-frame .glass-glint { position: absolute; inset: auto; left: 50%; top: 50%; width: var(--d, 100px); height: var(--d, 100px); transform: translate(-50%, -50%); }
.iris { pointer-events: none; }
.iris-blades { fill: #120609; fill-rule: evenodd; }
.iris-edges { fill: none; stroke: rgba(247,244,239,.25); stroke-width: .8; }
.glass-glint { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background:
  radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 16%),
  radial-gradient(circle at 72% 78%, rgba(255,92,138,.35), rgba(255,92,138,0) 22%),
  radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 56%, rgba(0,0,0,.55) 100%); }
.hero-text { display: grid; justify-items: center; gap: 14px; max-width: 760px; }
.hero-text .kicker { color: var(--paper); opacity: .85; }
.say { font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.7rem, 4.2vw, 3.4rem); line-height: .95; letter-spacing: -.02em; }
.say .hl { color: var(--citron); white-space: nowrap; }
.for { color: var(--on-dark-2); font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: 6px; }
.cue { display: inline-flex; align-items: center; gap: 14px; margin-top: 6px; text-decoration: none; text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-2); line-height: 1.6; }
.cue .hl { color: var(--paper); }
.cue-ico { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(247,244,239,.4); display: grid; place-items: center; animation: nudge 2.4s ease-in-out infinite; }
.cue-ico svg { width: 18px; height: 18px; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* Ouverture : écran sombre, l'objectif apparaît, les lamelles s'ouvrent, le logo puis le fond se révèlent */
.intro-veil { position: absolute; inset: 0; z-index: 1; background: #07020a; pointer-events: none; opacity: 0; }
.intro .intro-veil { opacity: 1; }
.intro .logo-letters, .intro .hero-text, .intro .site-header { opacity: 0; }
.intro .logo-letters { filter: blur(14px); transform: scale(.96); }
.intro .hero-text { transform: translate3d(0, 18px, 0); }
.intro .lens { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.intro .lens-frame { opacity: 0; }
.intro.go .lens-frame { opacity: 1; transition: opacity .6s ease; }
.intro.go .lens { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .6s ease, transform 1s var(--ease); }
.intro.go .logo-letters { opacity: 1; filter: drop-shadow(0 18px 50px rgba(18,5,11,.45)); transform: none; transition: opacity .9s ease 1.1s, filter 1s ease 1.1s, transform 1.2s var(--ease) 1.1s; }
.intro.go .intro-veil { opacity: 0; transition: opacity 1.1s ease 1.5s; }
.intro.go .hero-text { opacity: 1; transform: none; transition: opacity .8s ease 2s, transform .9s var(--ease) 2s; }
.intro.go .site-header { opacity: 1; transition: opacity .8s ease 2.1s; }
@media (max-width: 700px) {
  .logo-art { width: min(92vw, 58vh); }
  .hero2 { align-items: start; padding-top: calc(var(--head-h) + 56px); }
}

/* ---------- 2. Les univers : quatre iPhone orange, en boucle au défilement ---------- */
.univers {
  position: relative; z-index: 1; overflow: clip; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0;
  background: var(--violet); color: var(--paper); --sec-bg: var(--violet);
}
.univers.loop-on { height: 420vh; }
.univers-stage { position: relative; overflow: clip; min-height: 100svh; display: grid; align-items: center; }
.loop-on .univers-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
/* Lumières floues roses et orangées */
.light { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.light.l1 { width: 60vmax; height: 60vmax; left: -22vmax; top: -24vmax; background: radial-gradient(closest-side, rgba(226,35,110,.55), rgba(226,35,110,0)); }
.light.l2 { width: 54vmax; height: 54vmax; right: -20vmax; bottom: -26vmax; background: radial-gradient(closest-side, rgba(254,119,52,.55), rgba(254,119,52,0)); }
.light.l3 { width: 40vmax; height: 40vmax; right: 18%; top: -18vmax; background: radial-gradient(closest-side, rgba(255,92,138,.3), rgba(255,92,138,0)); }

.track { position: relative; z-index: 1; height: 100%; }
/* Sans boucle (moins d'animations ou pas de JavaScript) : une rangée qu'on fait glisser */
.univers:not(.loop-on) .track { display: flex; gap: 40px; overflow-x: auto; padding: calc(var(--head-h) + 60px) 24px 60px; scroll-snap-type: x mandatory; }
.univers:not(.loop-on) .uni { flex: 0 0 min(300px, 72vw); scroll-snap-align: center; }
.loop-on .uni { position: absolute; left: 0; top: 50%; width: var(--uw); will-change: transform; }

.uni { --uw: clamp(190px, 15.5vw, 250px); display: flex; flex-direction: column; gap: 22px; }
.uni[data-pos="bottom"] { flex-direction: column-reverse; }
.uni-text { position: relative; padding-left: 18px; border-left: 1px solid rgba(247,244,239,.35); transition: opacity .4s ease; }
.uni-text::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 12px rgba(200,229,66,.7); }
.uni-num { display: block; font-size: .8rem; letter-spacing: .2em; color: var(--on-dark-2); margin-bottom: 6px; }
.uni h3 { font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 2.3vw, 2.3rem); line-height: .95; letter-spacing: -.01em; white-space: nowrap; }
.uni h3 .hl { color: var(--citron); }
.uni-text p { margin-top: 8px; font-size: .92rem; line-height: 1.45; color: var(--on-dark-2); max-width: 26ch; }
.loop-on .uni { --act: 0; }
.loop-on .uni-text { opacity: calc(.45 + var(--act) * .55); }

/* L'iPhone orange cuivré : cadre, bordure noire, écran avec Dynamic Island */
.iphone { display: block; width: 100%; text-decoration: none; color: inherit; border-radius: 15% / 7%; }
.iphone:focus-visible { outline: 2px solid var(--citron); outline-offset: 6px; }
.iphone-float { display: block; animation: float var(--fd, 6s) ease-in-out infinite alternate; }
.uni:nth-child(2) .iphone-float { --fd: 7s; animation-delay: -2s; } .uni:nth-child(3) .iphone-float { --fd: 5.5s; animation-delay: -4s; }
.uni:nth-child(4) .iphone-float { --fd: 6.6s; animation-delay: -1s; } .uni:nth-child(5) .iphone-float { --fd: 7.4s; animation-delay: -3s; }
@keyframes float { from { transform: translate3d(0, -7px, 0); } to { transform: translate3d(0, 7px, 0); } }
.iphone-body {
  position: relative; display: block; aspect-ratio: 9 / 19.5; border-radius: 15% / 7%; padding: 3.2%;
  background: linear-gradient(145deg, #ffa25e 0%, #ff6a24 22%, #d9461a 48%, #ff7f3a 70%, #b23a12 100%);
  box-shadow: inset 0 0 0 1px rgba(255,214,180,.55), inset 0 0 0 3px rgba(120,30,8,.35), 0 40px 80px -30px rgba(0,0,0,.7), 0 20px 60px -20px rgba(254,119,52,.45);
}
/* Boutons latéraux */
.iphone-body::before, .iphone-body::after { content: ""; position: absolute; width: 1.6%; border-radius: 2px; background: linear-gradient(90deg, #b23a12, #ff8a45); }
.iphone-body::before { left: -1.2%; top: 18%; height: 7%; box-shadow: 0 9vmin 0 #d9531f, 0 15vmin 0 #d9531f; }
.iphone-body::after { right: -1.2%; top: 26%; height: 11%; }
.iphone-screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 12.5% / 6%; overflow: hidden; background: #000; box-shadow: 0 0 0 2.5px #0a0a0a; }
.iphone-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Reflet subtil sur la vitre */
.iphone-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%); }
.island { position: absolute; z-index: 2; left: 50%; top: 2.2%; width: 31%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.ui-acts { position: absolute; z-index: 2; right: 5%; bottom: 17%; display: grid; gap: 1.6vmin; }
.ui-acts svg, .ui-nav svg { width: clamp(14px, 1.4vw, 20px); height: clamp(14px, 1.4vw, 20px); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ui-acts svg:first-child { fill: #fff; }
.ui-nav { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; padding: 3.5% 6% 6%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75) 40%); }
.ui-nav svg { width: clamp(12px, 1.2vw, 17px); height: clamp(12px, 1.2vw, 17px); }
.ui-nav::after { content: ""; position: absolute; left: 50%; bottom: 2.4%; width: 34%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.8); transform: translateX(-50%); }

@media (max-width: 1000px) { .uni { --uw: clamp(170px, 24vw, 220px); } }
@media (max-width: 700px) {
  .univers.loop-on { height: 360vh; }
  .uni { --uw: min(46vw, 210px); gap: 14px; }
  .uni h3 { font-size: clamp(1.15rem, 5.4vw, 1.5rem); }
  .uni-text p { font-size: .8rem; }
  .iphone-body::before { box-shadow: 0 6vmin 0 #d9531f, 0 10vmin 0 #d9531f; }
}

/* ---------- 2. Portfolio par domaine ---------- */
.work .g2 { top: -8%; right: -26vmax; opacity: .6; }
.pf-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 20px; align-items: end; }
.pf-top h2 { grid-column: 1 / 8; font-size: clamp(3rem, 7.4vw, 6.8rem); }
.pf-note { grid-column: 8 / 13; font-weight: 600; font-size: clamp(.8rem, 1vw, .92rem); letter-spacing: .24em; text-transform: uppercase; line-height: 1.6; color: var(--fg2); }
@media (max-width: 800px) { .pf-top h2, .pf-note { grid-column: 1 / -1; } }

/* Barre des domaines : une pastille citron glisse vers le domaine choisi */
.pf-bar { position: sticky; top: calc(var(--head-h) + 22px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: clamp(36px, 5vw, 64px) 0 clamp(32px, 4vw, 52px); }
.pf-tabs {
  position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: rgba(27,20,26,.72); border: 1px solid var(--ln); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs [role="tab"] {
  position: relative; z-index: 1; flex: none; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 700 .86rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); transition: color .3s;
}
.pf-tabs [role="tab"]:hover { color: var(--paper); }
.pf-tabs [role="tab"][aria-selected="true"] { color: var(--night); }
.pf-tabs [role="tab"]:focus-visible { outline-offset: -2px; }
.pf-pill { position: absolute; z-index: 0; top: 5px; left: 0; height: calc(100% - 10px); width: 0; border-radius: 999px; background: var(--citron); box-shadow: 0 6px 24px -8px rgba(160,172,79,.8); transition: transform .45s var(--ease), width .45s var(--ease); }
/* Sans JavaScript, l'onglet choisi garde son fond citron */
.pf-tabs:not(.ready) [role="tab"][aria-selected="true"] { background: var(--citron); }
@media (max-width: 700px) {
  .pf-bar { top: calc(var(--head-h) + 14px); margin-inline: -20px; padding-inline: 20px; }
  .pf-tabs { width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pf-tabs [role="tab"] { padding: 0 16px; }
  .pf-bar .amb-toggle.text { display: none; }
}

/* Présentation du domaine */
.pf-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 20px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.pf-name { grid-column: 1 / -1; font-size: clamp(2.2rem, 8.4vw, 7.6rem); line-height: .88; letter-spacing: -.02em; text-transform: uppercase; font-weight: 900; }
.pf-desc { grid-column: 7 / 13; color: var(--fg2); font-size: 1.05rem; max-width: 46ch; }
@media (max-width: 860px) { .pf-name, .pf-desc { grid-column: 1 / -1; } }

/* Galerie : la première vidéo du domaine est mise en avant et joue sans le son */
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; list-style: none; margin: 0; padding: 0; }
.pf-item { min-width: 0; display: grid; gap: 12px; align-content: start; }
.pf-item.feature { grid-column: span 2; grid-row: span 2; }
.pf-item .thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #2a1f28; border: 1px solid rgba(247,244,239,.1); }
.pf-item.feature .thumb { aspect-ratio: auto; height: 100%; min-height: 0; }
.pf-item.feature { grid-template-rows: 1fr auto; }
.pf-item .thumb img, .pf-item .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-item .thumb img { transition: transform .8s var(--ease); }
.tile { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: 22px; }
.tile:focus-visible { outline: 2px solid var(--citron); outline-offset: 4px; }
.tile:hover .thumb img { transform: scale(1.05); }
.pf-item .play { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; background: var(--citron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231B141A' d='M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E") 56% 50% / 17px no-repeat; transition: transform .4s var(--ease); }
.tile:hover .play { transform: scale(1.1); }
.pf-item .dur { position: absolute; z-index: 2; left: 12px; top: 12px; font-size: .74rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(27,20,26,.6); font-variant-numeric: tabular-nums; }
.pf-item .tag { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hl); }
@media (max-width: 1000px) { .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pf-item.feature { grid-row: auto; }
  .pf-item.feature .thumb { aspect-ratio: 4 / 5; height: auto; }
  .pf-item .play { width: 40px; height: 40px; background-size: 15px; }
}

/* Changement de domaine : sortie floue rapide, entrée en douceur, l'une après l'autre */
.pf-panel.out .pf-heads, .pf-panel.out .pf-grid { opacity: 0; filter: blur(8px); transition: opacity .22s ease, filter .22s ease; }
.pf-panel .pf-heads, .pf-panel .pf-grid { transition: opacity .45s var(--ease), filter .45s var(--ease); }
.pf-panel { min-height: var(--pf-h, 0px); }
.pf-item.enter { animation: pf-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes pf-in { from { opacity: 0; filter: blur(10px); transform: translate3d(0, 18px, 0); } }

/* ---------- Ils nous ont fait confiance ---------- */
.trust-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 20px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.trust-top h2 { grid-column: 1 / 9; font-size: clamp(2.6rem, 6.4vw, 6rem); }
.trust-top p { grid-column: 9 / 13; color: var(--fg2); }
@media (max-width: 860px) { .trust-top h2, .trust-top p { grid-column: 1 / -1; } }
/* ---------- Motion design ---------- */
.motion-sec .light.l1 { left: auto; right: -20vmax; top: -20vmax; }
.motion-sec .light.l2 { right: auto; left: -18vmax; bottom: -24vmax; }
.motion-sec .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; align-items: center; }
.motion-text { grid-column: 1 / 7; display: grid; gap: 18px; }
.motion-text h2 { font-size: clamp(2.6rem, 6.6vw, 6.2rem); }
.motion-text > p:last-child { color: var(--fg2); font-size: 1.08rem; max-width: 46ch; }
.motion-list { grid-column: 7 / 13; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.motion-item { margin: 0; display: grid; justify-items: center; gap: 22px; width: clamp(220px, 22vw, 300px); }
.motion-item .iphone { transform: rotate(4deg); }
/* Vidéo animée avec du texte : affichée en entier, sans recadrage, sur le bleu de son propre fond */
.motion-item .iphone-screen { background: var(--motion-bg, #0a1149); }
.motion-item .iphone-screen video { object-fit: contain; }
.motion-item figcaption { display: grid; justify-items: center; gap: 8px; text-align: center; }
.motion-client { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--citron); }
.motion-title { font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.motion-item .cta { margin-top: 8px; }
@media (max-width: 860px) { .motion-text, .motion-list { grid-column: 1 / -1; } .motion-item { width: min(70vw, 280px); } }

/* Fresque typographique : deux lignes de noms en boucle, en sens inverse */
.fresque { position: relative; z-index: 1; display: grid; gap: clamp(6px, 1.2vw, 16px); margin-top: clamp(8px, 2vw, 24px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee { overflow: hidden; }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-set { display: flex; align-items: center; flex: none; }
.mq-name {
  flex: none; padding: 0 .38em; font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(2.4rem, 7.2vw, 7rem); line-height: 1.12; letter-spacing: -.01em; color: var(--paper); white-space: nowrap;
  transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
}
/* Seconde ligne en lettres contourées, pour donner du relief sans aucun cadre */
.outline .mq-name { color: transparent; -webkit-text-stroke: 1.5px rgba(247,244,239,.75); }
.mq-name:hover { color: var(--citron); -webkit-text-stroke-color: var(--citron); }
.mq-name.more { color: var(--citron); -webkit-text-stroke: 0; }
.mq-name.more b { font-weight: 900; }
.star { flex: none; width: clamp(18px, 2.2vw, 34px); height: clamp(18px, 2.2vw, 34px); fill: var(--citron); filter: drop-shadow(0 0 10px rgba(200,229,66,.5)); }
/* Moins d'animations demandées : les noms s'affichent simplement, à la ligne */
.fresque.static .mq-track { width: auto; flex-wrap: wrap; }
.fresque.static .mq-set { flex-wrap: wrap; }
.fresque.static .mq-name { font-size: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 700px) { .mq-name { font-size: clamp(2rem, 11vw, 3rem); } .outline .mq-name { -webkit-text-stroke-width: 1px; } }

/* ---------- 3. Du rush à la story ---------- */
.rush .g1 { left: auto; right: -30vmax; top: -10vmax; }
.rush-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: end; }
.rush-head h2 { grid-column: 1 / 8; font-size: clamp(3rem, 7.6vw, 7rem); }
.rush-head p { grid-column: 8 / 13; color: var(--fg2); }
.rush-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 20px clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); }
.rush-stick { position: sticky; top: calc(var(--head-h) + 40px); align-self: start; display: grid; justify-items: center; gap: 18px; }
.phone {
  position: relative; width: min(340px, calc((100svh - var(--head-h) - 170px) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 38px; overflow: hidden;
  border: 7px solid var(--night); background: var(--night); box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(247,244,239,.12);
}
.phone video { width: 100%; height: 100%; object-fit: cover; transition: filter .9s var(--ease); }
.phone[data-stage="1"] video { filter: grayscale(1) contrast(.82) brightness(.82); }
.phone[data-stage="2"] video { filter: saturate(.5) contrast(.95); }
.phone .amb-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 3; }
.phone[data-stage="4"] .amb-toggle { bottom: 76px; }
.vf, .layers, .social { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.phone[data-stage="1"] .vf, .phone[data-stage="3"] .layers, .phone[data-stage="4"] .social { opacity: 1; }
.vf .c { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(247,244,239,.85); }
.vf .tl { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; } .vf .tr { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.vf .bl { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; } .vf .br { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }
.vf .thirds { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(247,244,239,.28) calc(33.33% - .5px), rgba(247,244,239,.28) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(247,244,239,.28) calc(66.66% - .5px), rgba(247,244,239,.28) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(0deg, transparent calc(33.33% - .5px), rgba(247,244,239,.28) calc(33.33% - .5px), rgba(247,244,239,.28) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(247,244,239,.28) calc(66.66% - .5px), rgba(247,244,239,.28) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.vf .rec { position: absolute; top: 20px; left: 24px; display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; }
.vf .dot { background: #e5484d; box-shadow: none; }
.vf .tc { position: absolute; top: 20px; right: 24px; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.layers { inset: auto 12px auto auto; top: 22%; display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; justify-items: end; }
.layers li { padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--night); background: var(--citron); transform: translateX(16px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.layers li::before { content: "+ "; }
.phone[data-stage="3"] .layers li { transform: none; opacity: 1; }
.phone[data-stage="3"] .layers li:nth-child(2) { transition-delay: .12s; } .phone[data-stage="3"] .layers li:nth-child(3) { transition-delay: .24s; } .phone[data-stage="3"] .layers li:nth-child(4) { transition-delay: .36s; }
.social { background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 18%, transparent 70%, rgba(0,0,0,.6)); }
.social .who { position: absolute; top: 16px; left: 14px; display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.social .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: var(--night); background: var(--citron); }
.social .acts { position: absolute; right: 12px; bottom: 132px; display: grid; gap: 18px; }
.social .acts svg { width: 26px; height: 26px; }
.social .cap { position: absolute; left: 14px; right: 60px; bottom: 18px; font-size: .84rem; line-height: 1.35; }
.timeline { position: relative; display: flex; gap: 3px; width: min(340px, calc((100svh - var(--head-h) - 170px) * 9 / 16)); height: 30px; padding: 4px; border-radius: 10px; background: rgba(27,20,26,.55); opacity: .25; transition: opacity .6s var(--ease); }
.rush-stick:has(.phone[data-stage="2"]) .timeline { opacity: 1; }
.timeline .clip { flex: 0 0 var(--w); border-radius: 5px; background: var(--prune-hi); }
.timeline .clip:nth-child(even) { background: rgba(160,172,79,.75); }
.timeline .head { position: absolute; top: -4px; bottom: -4px; left: var(--t, 0%); width: 2px; background: var(--paper); border-radius: 2px; }
.rush .steps { list-style: none; margin: 0; padding: 0; }
.rush .step { min-height: 72vh; display: grid; align-content: center; gap: 12px; opacity: .3; transition: opacity .5s var(--ease); }
.rush .step.on { opacity: 1; }
.rush .step .n { font-family: var(--display); font-weight: 700; font-size: 1rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--night); background: var(--citron); }
.rush .step h3 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.02em; }
.rush .step p { color: var(--fg2); font-size: 1.08rem; max-width: 40ch; }
.rush-note { margin-top: 24px; font-size: .86rem; color: var(--fg2); }
@media (max-width: 860px) {
  .rush-head h2, .rush-head p { grid-column: 1 / -1; }
  .rush-grid { grid-template-columns: 1fr; }
  .rush-stick { top: calc(var(--head-h) + 12px); z-index: 2; gap: 10px; margin-inline: -20px; padding: 10px 20px 26px; background: linear-gradient(180deg, var(--sec-bg) 0 82%, transparent); }
  .phone, .timeline { width: min(62vw, calc(40svh * 9 / 16)); }
  .phone { border-width: 5px; border-radius: 26px; }
  .timeline { height: 22px; }
  .rush .step { min-height: 64svh; align-content: end; padding-bottom: 6svh; }
  .rush .step > * { position: relative; }
  .rush .step { background: linear-gradient(180deg, transparent 0 40%, var(--sec-bg) 60%); }
  .layers li, .social .cap, .social .who { font-size: .7rem; }
  .social .acts { bottom: 90px; gap: 12px; } .social .acts svg { width: 20px; height: 20px; }
}

/* ---------- 4. Prestations : des cartes sur violet foncé ---------- */
.offer-top { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); }
.offer-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.svc-card {
  scroll-margin-top: 110px; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border-radius: 26px;
  background: rgba(247,244,239,.06); border: 1px solid rgba(247,244,239,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .45s var(--ease), border-color .3s, background-color .3s;
}
.svc-card:hover { transform: translateY(-4px); border-color: rgba(200,229,66,.55); background: rgba(247,244,239,.09); }
.svc-card:target { border-color: var(--citron); }
.offer-notes dt { font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.01em; line-height: 1.05; }
.offer-notes dd { margin: 0; color: var(--fg2); font-size: .97rem; }
.offer-notes em { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--citron); }
/* Création de sites web : la carte mise en avant, preuve à l'appui */
.svc-card.web { grid-column: span 2; grid-row: span 2; gap: 14px; padding: 32px; border-color: rgba(200,229,66,.5);
  background: radial-gradient(80% 90% at 100% 0%, rgba(254,119,52,.28), rgba(254,119,52,0)), radial-gradient(70% 80% at 0% 100%, rgba(226,35,110,.25), rgba(226,35,110,0)), rgba(247,244,239,.06); }
.svc-card.web dt { font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 900; }
.svc-card.web dd { display: grid; gap: 14px; justify-items: start; font-size: 1.05rem; }
.badge { justify-self: start; padding: 7px 16px; border-radius: 999px; background: var(--night); color: var(--citron); border: 1px solid rgba(200,229,66,.5); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.proof-line { color: var(--paper); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); padding-left: 14px; border-left: 3px solid var(--citron); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(247,244,239,.25); font-size: .82rem; font-weight: 600; }
.offer-also { margin-top: 28px; color: var(--fg2); max-width: 70ch; }
@media (max-width: 900px) { .offer-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .offer-notes { grid-template-columns: 1fr; } .svc-card.web { grid-column: auto; grid-row: auto; padding: 26px 22px; } }

/* ---------- Tall France : un accomplissement ---------- */
.tf .g1 { left: -24vmax; top: -18vmax; }
.tf .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 20px; align-items: start; }
.tf-main { grid-column: 1 / 7; display: grid; gap: 22px; justify-items: start; }
.tf h2 { display: grid; gap: 6px; }
.tf-word { font-size: clamp(2.8rem, 7.6vw, 7rem); line-height: .88; letter-spacing: -.02em; }
.tf h2 .hl { font-size: clamp(1.4rem, 3vw, 2.6rem); line-height: 1.05; }
.tf-text { display: grid; gap: 14px; }
.tf-text p { color: var(--fg2); font-size: 1.08rem; max-width: 52ch; }
.tf-text strong { color: inherit; font-weight: 800; }
.tf-skills { grid-column: 8 / 13; margin: 0; border-top: 1px solid var(--ln); }
.tf-skills > div { padding: 20px 0; border-bottom: 1px solid var(--ln); display: grid; gap: 6px; }
.tf-skills dt { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.035em; line-height: 1.05; }
.tf-skills dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--fg2); }
@media (max-width: 900px) { .tf-main, .tf-skills { grid-column: 1 / -1; } }
/* Galerie Tall France : uniquement les vidéos réalisées pour Tall France */
.tf-reel { grid-column: 1 / -1; display: grid; gap: 22px; }
.tf-reel h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -.02em; }
.tf-reel ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.tf-reel .thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #2a1f28; border: 1px solid rgba(247,244,239,.14); }
.tf-reel .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tf-reel .tile:hover .thumb img { transform: scale(1.05); }
.tf-reel .play { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--citron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231B141A' d='M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E") 56% 50% / 15px no-repeat; transition: transform .4s var(--ease); }
.tf-reel .tile:hover .play { transform: scale(1.1); }
.tf-reel .dur { position: absolute; left: 10px; top: 10px; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(27,20,26,.6); }
.tf-cap { display: block; margin-top: 10px; font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--fg2); }
@media (max-width: 900px) {
  .tf-reel ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 6px; }
  .tf-reel ul::-webkit-scrollbar { display: none; }
  .tf-reel li { flex: 0 0 42vw; max-width: 220px; scroll-snap-align: start; }
}

/* ---------- 5. Derrière DA KOM ---------- */
.about .g2 { left: -20vmax; right: auto; top: 30%; opacity: .5; }
.about .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 6vw, 80px) 20px; align-items: start; }
.about-main { grid-column: 1 / 8; display: grid; gap: 20px; }
.about h2 { font-size: clamp(2.6rem, 6vw, 5.6rem); }
/* Photo de profil ronde, avec son nom */
.profile { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px); margin: 0 0 8px; }
.profile-pic { position: relative; flex: none; width: clamp(108px, 12vw, 156px); aspect-ratio: 1; border-radius: 50%; padding: 5px;
  background: conic-gradient(from 210deg, var(--citron), var(--orange), var(--magenta), var(--citron)); box-shadow: 0 20px 50px -20px rgba(254,119,52,.5); }
.profile-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--night); }
.profile figcaption { display: grid; gap: 6px; }
.profile-name { font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.01em; }
.profile-line { color: var(--fg2); font-size: clamp(.95rem, 1.2vw, 1.08rem); max-width: 30ch; }
.about-text { display: grid; gap: 16px; }
.about-text p { color: var(--fg2); font-size: 1.1rem; max-width: 56ch; }
.about-text strong { color: var(--paper); font-weight: 700; }
.card-id { grid-column: 9 / 13; border-radius: 26px; padding: 26px; background: rgba(247,244,239,.06); border: 1px solid rgba(247,244,239,.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.card-id .mark { font-size: 2.6rem; margin-bottom: 14px; }
.card-id dl { margin: 0; display: grid; }
.card-id dl > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ln); font-size: .93rem; }
.card-id dt { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--citron); padding-top: .2em; }
.card-id dd { margin: 0; }
/* Comment on travaille ensemble : 3 blocs côte à côte, une vraie séquence numérotée */
.how { grid-column: 1 / -1; }
.how h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); text-transform: uppercase; margin-bottom: 20px; }
.how ol { margin: 0; padding: 0; list-style: none; counter-reset: h; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how li {
  counter-increment: h; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border-radius: 26px; color: var(--fg2);
  background: rgba(247,244,239,.06); border: 1px solid rgba(247,244,239,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .45s var(--ease), border-color .3s;
}
.how li:hover { transform: translateY(-4px); border-color: rgba(200,229,66,.55); }
.how li::before { content: "0" counter(h); font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--citron); }
.how b { display: block; color: var(--paper); font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.1; letter-spacing: -.01em; }
@media (max-width: 900px) { .about-main, .card-id { grid-column: 1 / -1; } }
@media (max-width: 760px) { .how ol { grid-template-columns: 1fr; } }

/* ---------- 6. Questions fréquentes (sur papier) ---------- */
.faq .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 20px; }
.faq .intro { grid-column: 1 / 5; display: grid; gap: 16px; align-content: start; }
.qa { grid-column: 6 / 13; border-top: 1.5px solid currentColor; }
.qa details { border-bottom: 1px solid var(--ln); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -.025em; line-height: 1.2; transition: color .25s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8FB7B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .35s var(--ease);
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--hl); }
.qa details p { color: var(--fg2); max-width: 62ch; padding: 0 56px 26px 0; }
@media (max-width: 900px) { .faq .intro, .qa { grid-column: 1 / -1; } }
@media (max-width: 560px) { .qa details p { padding-right: 0; } }

/* ---------- 7. L'invitation ---------- */
.final .g1 { left: auto; right: -24vmax; }
.final .g2 { right: auto; left: -18vmax; top: auto; bottom: -18vmax; }
.final .wrap { display: grid; gap: 34px; }
.final h2 { font-size: clamp(2.6rem, 9vw, 8.6rem); line-height: .88; letter-spacing: -.02em; }
.final h2 .hl { display: block; }
.final .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-top: 28px; border-top: 1px solid var(--ln); }
.final .row p { color: var(--fg2); max-width: 48ch; }
.final .quick { color: var(--paper); }
.final .btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ghost {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 700;
  color: var(--paper); border: 1.5px solid rgba(247,244,239,.5); transition: background-color .3s, color .3s, border-color .3s;
}
.ghost:hover { background: var(--paper); color: var(--prune); border-color: var(--paper); }
@media (max-width: 560px) { .final .btns, .final .btns a { width: 100%; justify-content: center; } }

/* ================= PAGE « CRÉATION DE SITES WEB » ================= */
.ghost.small { min-height: 46px; padding: 0 18px; font-size: .92rem; }
.web-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* L'ordinateur portable : écran 16:10 dans une coque sombre, base en biseau */
.laptop { display: block; width: 100%; }
.laptop-lid { position: relative; display: block; padding: 2.4% 2.4% 3%; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #2a2a2e, #141416); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.75); }
.laptop .cam { position: absolute; left: 50%; top: 1%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3a3a40; }
.laptop-screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #000; }
.laptop-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop-base { position: relative; display: block; width: 112%; margin-left: -6%; height: clamp(10px, 1.4vw, 18px); border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #cfcfd4, #8e8e95 60%, #5d5d63); }
.laptop-base span { position: absolute; left: 50%; top: 0; width: 16%; height: 45%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #7c7c83; }

/* Haut de page : la démo est le sujet */
.sw-hero { position: relative; overflow: clip; background: var(--violet); padding-block: calc(var(--head-h) + clamp(56px, 8vw, 96px)) calc(var(--sheet) + clamp(48px, 6vw, 80px)); }
.sw-hero-bg { position: absolute; inset: 0; background: url("../img/fond-accueil.webp") center / cover no-repeat; opacity: .9; }
.sw-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,5,11,.65), rgba(18,5,11,.15)); }
.sw-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; align-items: center; }
.sw-hero-text { grid-column: 1 / 9; display: grid; gap: 20px; justify-items: start; }
.sw-hero h1 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: .92; }
.sw-lead { color: var(--on-dark-2); font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 44ch; }
.sw-proof { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--paper); }
@media (max-width: 900px) { .sw-hero-text { grid-column: 1 / -1; } }

/* Les réalisations : un grand MacBook par thème, chacun sur sa propre section */
.show { min-height: 100svh; display: grid; align-content: center; padding-block: clamp(56px, 6vw, 88px) calc(var(--sheet) + clamp(48px, 5vw, 80px)); overflow: clip; }
.show-wrap { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 32px); }
.show-head { width: min(100%, max(720px, calc((100svh - 190px) * 1.5))); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.show .show-head h2 { font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: .9; }
.show-client { display: inline-flex; align-items: center; gap: 10px; color: var(--fg2); font-weight: 600; }
/* L'ordinateur occupe presque tout l'écran, sans jamais dépasser sa hauteur */
.show-laptop { position: relative; width: min(100%, max(720px, calc((100svh - 190px) * 1.5))); }
.show-laptop::before { content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 50%; background: var(--hl); opacity: .22; filter: blur(70px); }
.show-video { transition: opacity .35s ease; }
.show-video.swap { opacity: 0; }
.showcase.ready .show-laptop { transform: scale(.86) translateY(48px); transition: transform 1.2s var(--ease); }
.showcase.ready .in .show-laptop { transform: none; }
/* Deux ordinateurs à la suite dans le même bloc */
.show-item { margin: 0; width: 100%; display: grid; justify-items: center; gap: clamp(14px, 1.8vw, 22px); }
.show-item + .show-item { margin-top: clamp(48px, 7vw, 112px); }
.show-label { width: min(100%, max(720px, calc((100svh - 190px) * 1.5))); display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1; color: var(--paper); }
.show-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hl); }
.show-foot { display: grid; justify-items: center; gap: 18px; max-width: 62ch; text-align: center; color: var(--fg2); }
.show-foot .link-u { color: var(--hl); white-space: nowrap; }
@media (max-width: 760px) { .show { min-height: 0; } .show-head { justify-content: flex-start; } .show-laptop { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .showcase.ready .show-laptop { transform: none; transition: none; } }

/* Le futur site : un écran « en construction » */
.wip { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 5%; padding: 4% 6% 7%; background: linear-gradient(160deg, #f4f8fb, #e3edf3); }
.wip i, .wip-bar { display: block; border-radius: 10px; background: #cfdde6; animation: wip 2.4s ease-in-out infinite; }
.wip-bar { height: 6%; min-height: 12px; width: 100%; }
.wip-hero { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto 1fr; gap: 6% 6%; align-content: center; }
.wip-hero i:nth-child(1) { height: 2.4vw; max-height: 34px; min-height: 12px; width: 90%; }
.wip-hero i:nth-child(2) { height: 1.4vw; max-height: 20px; min-height: 8px; width: 70%; grid-row: 2; animation-delay: .2s; }
.wip-hero i:nth-child(3) { grid-column: 2; grid-row: 1 / 4; min-height: 60px; animation-delay: .4s; }
.wip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.wip-row i { height: 5vw; max-height: 72px; min-height: 26px; }
.wip-row i:nth-child(2) { animation-delay: .3s; } .wip-row i:nth-child(3) { animation-delay: .6s; }
.wip-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: .95; font-size: clamp(1.2rem, 3.4vw, 3rem); color: var(--night); text-shadow: 0 0 30px #f4f8fb, 0 0 12px #f4f8fb; }
@keyframes wip { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .wip i, .wip-bar { animation: none; } }

/* Le prix : « 15 000 € » barré face à « 3 000 € » */
.price-duo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px clamp(28px, 6vw, 96px); }
.price-duo p { display: grid; gap: 6px; font-family: var(--display); font-weight: 900; font-stretch: 112%; line-height: .85; letter-spacing: -.02em; }
.price-duo .label { font-family: var(--body); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-lime-2); }
.price-duo .was { font-size: clamp(2.4rem, 6.4vw, 6rem); color: var(--olive); }
.price-duo .was s { text-decoration-thickness: .08em; text-decoration-color: var(--night); }
.price-duo .now { font-size: clamp(3.6rem, 12vw, 11rem); color: var(--night); }
.price-duo .from { font-size: .3em; letter-spacing: 0; margin-right: .1em; vertical-align: .9em; }
.price-note { margin-top: clamp(20px, 3vw, 36px); max-width: 60ch; font-size: 1.08rem; color: var(--on-lime-2); }

/* Les catégories : une liste éditoriale en deux colonnes */
.sw-cats-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 20px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.sw-cats-top h2 { grid-column: 1 / 8; }
.sw-cats-top p { grid-column: 8 / 13; color: var(--fg2); }
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--ln); }
.cats li { padding: 22px 0 24px; border-bottom: 1px solid var(--ln); display: grid; gap: 8px; align-content: start; }
.cats h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); text-transform: uppercase; line-height: 1.1; transition: color .3s; }
.cats li:hover h3 { color: var(--citron); }
.cats p { color: var(--fg2); font-size: .97rem; }
@media (max-width: 900px) { .sw-cats-top h2, .sw-cats-top p { grid-column: 1 / -1; } .cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; } }

/* Ce qui est inclus */
.sw-incl h2, .sw-opts h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1.5px solid currentColor; }
.incl li { padding: 22px 0 24px; border-bottom: 1px solid var(--ln); display: grid; gap: 8px; align-content: start; }
.incl b { font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.incl span { color: var(--fg2); font-size: .97rem; }
@media (max-width: 900px) { .incl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } }

/* Déroulé : 3 blocs numérotés */
.sw-steps h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.how-steps { margin: 0; padding: 0; list-style: none; counter-reset: h; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how-steps li { counter-increment: h; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border-radius: 26px; color: var(--fg2); background: rgba(247,244,239,.06); border: 1px solid rgba(247,244,239,.14); }
.how-steps li::before { content: "0" counter(h); font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--citron); }
.how-steps b { display: block; color: var(--paper); font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.1; }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; } }

/* Bandeau sur l'accueil */
.web-banner .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; align-items: center; }
.wb-text { grid-column: 1 / 6; display: grid; gap: 18px; justify-items: start; }
.wb-text h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.wb-text > p:not(.kicker) { color: var(--on-dark-2); max-width: 46ch; }
.wb-laptop { grid-column: 7 / 13; display: block; text-decoration: none; transition: transform .5s var(--ease); }
.wb-laptop:hover { transform: translateY(-6px) rotate(-.6deg); }
@media (max-width: 900px) { .wb-text, .wb-laptop { grid-column: 1 / -1; } }

/* ---------- Pied de page ---------- */
.site-footer { padding-block: clamp(64px, 8vw, 104px) max(36px, env(safe-area-inset-bottom, 0px)); font-size: .95rem; color: var(--on-dark-2); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.site-footer h3 { font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--citron); margin-bottom: 16px; }
.site-footer .foot-brand { margin-bottom: 18px; }
.site-footer .foot-brand .mark { font-size: clamp(3rem, 6vw, 4.6rem); color: var(--paper); font-style: normal; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; color: var(--paper); transition: color .2s; }
.site-footer a:hover, .site-footer button.link:hover { color: var(--citron); }
.site-footer .bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .85rem; }
button.link { all: unset; cursor: pointer; color: var(--paper); }
button.link:focus-visible { outline: 2px solid var(--citron); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---------- Lecteur vidéo ---------- */
.player { overscroll-behavior: contain; border: 0; padding: 0; background: transparent; color: var(--paper); max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; }
.player::backdrop { background: rgba(27,20,26,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.player[open] { display: grid; place-items: center; animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.player .box {
  display: grid; grid-template-columns: auto minmax(0, 340px); gap: 32px; align-items: center; max-height: 100%;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.player video { height: min(82vh, 760px); width: auto; aspect-ratio: 9 / 16; border-radius: 20px; background: #000; }
.player .meta { display: grid; gap: 12px; }
.player .meta .client { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--citron); }
.player .meta h3 { font-size: 2rem; line-height: 1.02; }
.player .meta p { color: var(--on-dark-2); }
.player .meta .cta { margin-top: 10px; justify-self: start; }
.player .close {
  position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--paper); color: var(--night); cursor: pointer; display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.player .close:hover { transform: rotate(90deg); }
.player .close svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .player .box { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .player video { height: min(66vh, 640px); }
  .player .meta { text-align: center; justify-items: center; }
  .player .meta h3 { font-size: 1.5rem; }
  .player .meta .cta { justify-self: center; }
}

/* ---------- Bannière cookies ---------- */
.cookie {
  position: fixed; z-index: 40; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  margin: 0 auto; max-width: 620px; display: grid; gap: 14px; padding: 18px 20px; border-radius: 22px; font-size: .92rem;
  background: rgba(27,20,26,.92); color: var(--paper); border: 1px solid var(--line-dark); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
}
.cookie p { color: var(--on-dark-2); }
.cookie .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie button { font: 700 .9rem/1 var(--body); min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; border: 1px solid var(--paper); }
.cookie .yes { background: var(--citron); color: var(--night); border-color: var(--citron); }
.cookie .no { background: transparent; color: var(--paper); }

/* ---------- Pages intérieures (devis, légal, 404) ---------- */
.page { background: var(--paper); color: var(--night); color-scheme: light; --hl: var(--prune); --fg2: var(--on-paper-2); --ln: var(--line-paper); padding-block: calc(var(--head-h) + clamp(72px, 10vw, 120px)) calc(var(--sheet) + clamp(64px, 8vw, 104px)); }
.page .wrap { max-width: 860px; }
.page h1 { font-size: clamp(2.5rem, 7vw, 4.8rem); line-height: .95; letter-spacing: -.02em; margin-bottom: 14px; }
.page .updated { color: var(--on-paper-2); font-size: .92rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.1; margin: 44px 0 12px; }
.legal p, .legal li { color: #3a2d37; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; margin: 10px 0 0; display: grid; gap: 6px; }
.legal a { color: var(--prune); font-weight: 600; }
.legal .todo { background: #fff3c4; color: #5a4300; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.notfound { display: grid; gap: 20px; justify-items: start; }
.notfound .big { font-family: var(--display); font-weight: 700; font-size: clamp(7rem, 26vw, 15rem); line-height: .82; letter-spacing: -.02em; color: var(--prune); }
.notfound p { color: var(--on-paper-2); max-width: 46ch; }
.notfound .alt a { color: var(--prune); font-weight: 600; }

/* ---------- Apparition floue au défilement ---------- */
.motion .reveal { opacity: 0; filter: blur(14px); transform: translate3d(0, 26px, 0); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.motion .reveal.in { opacity: 1; filter: none; transform: none; }
@media (max-width: 700px) { .motion .reveal { filter: blur(8px); transform: translate3d(0, 18px, 0); } }

/* Moins d'animations demandées : tout s'affiche directement, sans mouvement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= PAGE « ESSAYEZ VOTRE FUTUR SITE » (configurateur.html) =================
   Un faux site de restaurant dans le MacBook. Le visiteur change couleurs, polices et logo :
   tout passe par des variables CSS posées sur .mk. Le logo ne quitte jamais le navigateur. */
.cfg { position: relative; color: var(--paper); background:
  radial-gradient(60vmax 60vmax at 0% 0%, rgba(226,35,110,.3), rgba(226,35,110,0) 60%),
  radial-gradient(50vmax 50vmax at 100% 100%, rgba(254,119,52,.24), rgba(254,119,52,0) 60%), var(--violet);
  padding-block: calc(var(--head-h) + clamp(40px, 6vw, 72px)) calc(var(--sheet) + clamp(56px, 7vw, 96px)); }
.cfg-head { display: grid; gap: 16px; justify-items: start; max-width: 860px; margin-bottom: clamp(28px, 4vw, 48px); }
.cfg-head h1 { font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: .92; }
.cfg-lead { color: var(--on-dark-2); max-width: 60ch; }
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(24px, 3.5vw, 52px); align-items: start; }
.cfg-stage { position: sticky; top: calc(var(--head-h) + 24px); }
.cfg-laptop { position: relative; }
.cfg-laptop::before { content: ""; position: absolute; inset: 10% 6% -6%; z-index: -1; border-radius: 50%; background: var(--mk-accent, var(--citron)); opacity: .28; filter: blur(70px); transition: background-color .5s; }
.cfg-screen { container-type: inline-size; overflow: hidden; } /* pas de défilement propre : il suit celui de la page (configurateur.js) */
.cfg-screen:focus-visible { outline-offset: 2px; }

/* ---------- Palettes (partagées par la maquette et les pastilles) ---------- */
[data-palette="ardoise"], .sw[data-p="ardoise"] { --mk-bg: #1f2a2e; --mk-soft: #2b3a3f; --mk-ink: #f4efe4; --mk-ink2: #b9c4bf; --mk-accent: #e8ab2e; --mk-on: #1f2a2e; }
[data-palette="or"], .sw[data-p="or"] { --mk-bg: #141210; --mk-soft: #24201b; --mk-ink: #f5efe3; --mk-ink2: #bfb4a2; --mk-accent: #d4a94c; --mk-on: #141210; }
[data-palette="mono"], .sw[data-p="mono"] { --mk-bg: #f5f5f3; --mk-soft: #e3e3e0; --mk-ink: #0e0e0e; --mk-ink2: #555553; --mk-accent: #0e0e0e; --mk-on: #ffffff; }
[data-palette="lin"], .sw[data-p="lin"] { --mk-bg: #f3ece0; --mk-soft: #e6dac6; --mk-ink: #2a1a14; --mk-ink2: #6b5548; --mk-accent: #a63a26; --mk-on: #fff8ef; }
[data-palette="olive"], .sw[data-p="olive"] { --mk-bg: #eceedd; --mk-soft: #d8ddbf; --mk-ink: #1f2b19; --mk-ink2: #56634a; --mk-accent: #4f6d23; --mk-on: #f5f7ea; }
[data-palette="marine"], .sw[data-p="marine"] { --mk-bg: #f5f7fc; --mk-soft: #dfe6f6; --mk-ink: #0f2148; --mk-ink2: #4c5b7c; --mk-accent: #2950e0; --mk-on: #ffffff; }
[data-palette="nuit"], .sw[data-p="nuit"] { --mk-bg: #1a1424; --mk-soft: #2a2138; --mk-ink: #f7eaf0; --mk-ink2: #c2adbb; --mk-accent: #ff7096; --mk-on: #1a1424; }
[data-palette="citron"], .sw[data-p="citron"] { --mk-bg: #2a0a2c; --mk-soft: #3d0f38; --mk-ink: #f7f4ef; --mk-ink2: #e4d4dc; --mk-accent: #c8e542; --mk-on: #12050b; }

/* ---------- Duos de polices : uniquement Archivo et Manrope (fichiers du dossier fonts/) ---------- */
[data-fonts="affiche"], .ft[data-f="affiche"] { --mk-dfam: var(--display); --mk-dw: 900; --mk-ds: 125%; --mk-dt: uppercase; --mk-dl: -.01em; --mk-dlh: .9; --mk-bfam: var(--body); }
[data-fonts="condense"], .ft[data-f="condense"] { --mk-dfam: var(--display); --mk-dw: 700; --mk-ds: 62%; --mk-dt: uppercase; --mk-dl: .01em; --mk-dlh: .92; --mk-bfam: var(--body); }
[data-fonts="rond"], .ft[data-f="rond"] { --mk-dfam: var(--body); --mk-dw: 800; --mk-ds: 100%; --mk-dt: none; --mk-dl: -.035em; --mk-dlh: 1; --mk-bfam: var(--body); }
[data-fonts="sobre"], .ft[data-f="sobre"] { --mk-dfam: var(--display); --mk-dw: 500; --mk-ds: 100%; --mk-dt: none; --mk-dl: -.025em; --mk-dlh: 1.02; --mk-bfam: var(--display); }

/* ---------- La maquette : tailles en cqw pour qu'elle garde ses proportions dans l'écran ---------- */
.mk { min-height: 100%; background: var(--mk-bg); color: var(--mk-ink); font-family: var(--mk-bfam); font-size: max(8px, 1.45cqw); line-height: 1.5; color-scheme: light;
  transition: background-color .45s var(--ease), color .45s var(--ease); }
.mk * { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.mk-title, .mk-name, .mk-name-2, .mk-sub, .mk-menu b { font-family: var(--mk-dfam); font-weight: var(--mk-dw); font-stretch: var(--mk-ds); text-transform: var(--mk-dt); letter-spacing: var(--mk-dl); }
.mk-nav { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 2.4cqw 5cqw; border-bottom: 1px solid color-mix(in srgb, var(--mk-ink) 14%, transparent); }
.mk-brand { display: inline-flex; align-items: center; gap: 1.2cqw; min-width: 0; }
.mk-name { font-size: max(10px, 2.1cqw); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34cqw; }
.mk-logo { height: max(18px, 4.2cqw); width: auto; max-width: 22cqw; object-fit: contain; }
.mk-links { display: flex; align-items: center; gap: 2.6cqw; color: var(--mk-ink2); font-weight: 600; white-space: nowrap; }
.mk-pill { padding: .7cqw 1.8cqw; border-radius: 99px; background: var(--mk-accent); color: var(--mk-on); }
.mk-hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 4cqw; padding: 5cqw 5cqw 4.5cqw; }
.mk-hero-text { display: grid; gap: 2.2cqw; justify-items: start; }
.mk-title { font-size: 5.6cqw; line-height: var(--mk-dlh); text-wrap: balance; }
.mk-text { color: var(--mk-ink2); font-size: max(8px, 1.6cqw); max-width: 40ch; }
.mk-btns { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.mk-btn { padding: 1.1cqw 2.4cqw; border-radius: 99px; background: var(--mk-accent); color: var(--mk-on); font-weight: 700; }
.mk-btn.alt { background: transparent; color: var(--mk-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mk-ink) 40%, transparent); }
/* L'assiette : dessinée en CSS, elle prend les couleurs de la palette */
.mk-plate { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--mk-bg) 0 54%, var(--mk-soft) 55% 70%, color-mix(in srgb, var(--mk-ink) 10%, var(--mk-soft)) 71%); box-shadow: 0 3cqw 6cqw -3cqw rgba(0,0,0,.45); }
.mk-plate i { position: absolute; border-radius: 50%; background: var(--mk-accent); }
.mk-plate i:nth-child(1) { left: 31%; top: 34%; width: 26%; height: 22%; border-radius: 48% 52% 40% 60%; }
.mk-plate i:nth-child(2) { left: 50%; top: 48%; width: 18%; height: 18%; background: color-mix(in srgb, var(--mk-accent) 55%, var(--mk-ink)); }
.mk-plate i:nth-child(3) { left: 38%; top: 58%; width: 9%; height: 9%; background: var(--mk-ink2); }
.mk-hours { display: flex; flex-wrap: wrap; justify-content: center; gap: .6cqw 4cqw; padding: 1.6cqw 5cqw; background: var(--mk-accent); color: var(--mk-on); font-weight: 700; }
.mk-menu { padding: 4.5cqw 5cqw 3.5cqw; display: grid; gap: 2cqw; }
.mk-sub { font-size: 3cqw; line-height: 1; }
.mk-menu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.mk-menu li { display: grid; gap: 1cqw; padding: 2cqw; border-radius: 1.2cqw; background: var(--mk-soft); }
.mk-menu b { font-size: max(8px, 1.6cqw); line-height: 1.15; text-transform: none; }
.mk-menu li span { color: var(--mk-accent); font-weight: 800; }
[data-palette="mono"] .mk-menu li span, [data-palette="lin"] .mk-menu li span, [data-palette="olive"] .mk-menu li span, [data-palette="marine"] .mk-menu li span { color: var(--mk-ink); }
.mk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1cqw 3cqw; padding: 2.4cqw 5cqw 3cqw; color: var(--mk-ink2); border-top: 1px solid color-mix(in srgb, var(--mk-ink) 14%, transparent); }
.mk-name-2 { color: var(--mk-ink); }

/* ---------- Le panneau de réglages ---------- */
.cfg-panel { display: grid; gap: 22px; padding: clamp(20px, 2.4vw, 28px); border-radius: 28px; background: rgba(18,5,11,.55); border: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cfg-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.cfg-set legend { padding: 0; margin-bottom: 12px; font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 1.15rem; text-transform: uppercase; }
.cfg-set + .cfg-set { padding-top: 4px; }
.sw-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sw, .ft { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 16px; cursor: pointer; border: 1.5px solid var(--line-dark); transition: border-color .25s, background-color .25s; }
.sw:hover, .ft:hover { border-color: rgba(247,244,239,.45); }
.sw input, .ft input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sw:has(input:checked), .ft:has(input:checked) { border-color: var(--citron); background: rgba(200,229,66,.1); }
.sw:has(input:focus-visible), .ft:has(input:focus-visible) { outline: 2px solid var(--citron); outline-offset: 3px; }
.sw-dots { display: flex; flex: none; }
.sw-dots i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(18,5,11,.6); }
.sw-dots i + i { margin-left: -6px; }
.sw-dots i:nth-child(1) { background: var(--mk-bg); } .sw-dots i:nth-child(2) { background: var(--mk-ink); } .sw-dots i:nth-child(3) { background: var(--mk-accent); }
.sw-name { font-size: .88rem; font-weight: 600; line-height: 1.2; }
.ft-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ft { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; }
.ft-aa { grid-row: 1 / 3; font-family: var(--mk-dfam); font-weight: var(--mk-dw); font-stretch: var(--mk-ds); letter-spacing: var(--mk-dl); font-size: 1.7rem; line-height: 1; color: var(--citron); min-width: 1.8em; }
.ft-name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.ft-desc { font-size: .78rem; line-height: 1.25; color: var(--on-dark-2); }
.cfg-field { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.cfg-field input { font: 500 1rem/1.3 var(--body); min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--paper); background: rgba(247,244,239,.07); border: 1.5px solid var(--line-dark); }
.cfg-field input::placeholder { color: rgba(228,212,220,.55); }
.cfg-field input:focus-visible { border-color: var(--citron); outline-offset: 2px; }
.cfg-field textarea { font: 500 1rem/1.45 var(--body); min-height: 96px; padding: 12px 14px; border-radius: 14px; resize: vertical; color: var(--paper); background: rgba(247,244,239,.07); border: 1.5px solid var(--line-dark); }
.cfg-field textarea::placeholder { color: rgba(228,212,220,.55); }
.cfg-field textarea:focus-visible { border-color: var(--citron); outline-offset: 2px; }
.cfg-idea { padding-bottom: 22px; border-bottom: 1px solid var(--line-dark); }
.cfg-show { justify-self: start; }
.cfg-status.done { color: var(--citron); font-weight: 700; }

/* Illustration de la maquette selon le métier détecté (mêmes trois formes, placées autrement) */
.mk-plate, .mk-plate i { transition: border-radius .5s var(--ease), background-color .45s var(--ease), left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease); }
[data-kind="menage"] .mk-plate { background: var(--mk-soft); }
[data-kind="menage"] .mk-plate i { border-radius: 50%; background: color-mix(in srgb, var(--mk-bg) 70%, transparent); box-shadow: inset 0 0 0 .5cqw var(--mk-accent); }
[data-kind="menage"] .mk-plate i:nth-child(1) { left: 18%; top: 22%; width: 42%; height: 42%; }
[data-kind="menage"] .mk-plate i:nth-child(2) { left: 55%; top: 46%; width: 26%; height: 26%; }
[data-kind="menage"] .mk-plate i:nth-child(3) { left: 34%; top: 68%; width: 14%; height: 14%; }
[data-kind="beaute"] .mk-plate { border-radius: 50% 50% 6% 6% / 38% 38% 6% 6%; background: var(--mk-soft); }
[data-kind="beaute"] .mk-plate i:nth-child(1) { left: 30%; top: 26%; width: 40%; height: 40%; border-radius: 50%; }
[data-kind="beaute"] .mk-plate i:nth-child(2) { left: 22%; top: 74%; width: 56%; height: 6%; border-radius: 99px; background: var(--mk-ink2); }
[data-kind="beaute"] .mk-plate i:nth-child(3) { left: 62%; top: 18%; width: 10%; height: 10%; background: var(--mk-ink); }
[data-kind="sport"] .mk-plate { background: none; box-shadow: none; }
[data-kind="sport"] .mk-plate i { border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.6cqw var(--mk-accent); }
[data-kind="sport"] .mk-plate i:nth-child(1) { left: 0; top: 0; width: 100%; height: 100%; }
[data-kind="sport"] .mk-plate i:nth-child(2) { left: 18%; top: 18%; width: 64%; height: 64%; box-shadow: inset 0 0 0 1.6cqw var(--mk-ink); }
[data-kind="sport"] .mk-plate i:nth-child(3) { left: 36%; top: 36%; width: 28%; height: 28%; background: var(--mk-accent); }
[data-kind="boutique"] .mk-plate { border-radius: 3cqw; background: var(--mk-soft); }
[data-kind="boutique"] .mk-plate i:nth-child(1) { left: 24%; top: 34%; width: 52%; height: 46%; border-radius: 1cqw 1cqw 3cqw 3cqw; }
[data-kind="boutique"] .mk-plate i:nth-child(2) { left: 36%; top: 18%; width: 28%; height: 26%; border-radius: 50% 50% 0 0; background: none; box-shadow: inset 0 0 0 1cqw var(--mk-ink); }
[data-kind="boutique"] .mk-plate i:nth-child(3) { left: 45%; top: 52%; width: 10%; height: 10%; background: var(--mk-on); }
[data-kind="artisan"] .mk-plate { border-radius: 2cqw; background: var(--mk-soft); }
[data-kind="artisan"] .mk-plate i { border-radius: .8cqw; }
[data-kind="artisan"] .mk-plate i:nth-child(1) { left: 16%; top: 54%; width: 68%; height: 26%; }
[data-kind="artisan"] .mk-plate i:nth-child(2) { left: 26%; top: 26%; width: 30%; height: 26%; background: var(--mk-ink2); }
[data-kind="artisan"] .mk-plate i:nth-child(3) { left: 58%; top: 26%; width: 18%; height: 26%; background: var(--mk-ink); }
[data-kind="autre"] .mk-plate { border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; background: var(--mk-soft); }
[data-kind="autre"] .mk-plate i:nth-child(1) { left: 26%; top: 28%; width: 34%; height: 34%; border-radius: 50%; }
[data-kind="autre"] .mk-plate i:nth-child(2) { left: 52%; top: 50%; width: 22%; height: 22%; border-radius: 30%; }
[data-kind="autre"] .mk-plate i:nth-child(3) { left: 34%; top: 66%; width: 10%; height: 10%; }
@media (prefers-reduced-motion: reduce) { .mk-plate, .mk-plate i { transition: none; } }
.cfg-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cfg-file-btn { cursor: pointer; }
.cfg-logo:has(input:focus-visible) .cfg-file-btn { outline: 2px solid var(--citron); outline-offset: 4px; }
.cfg-remove { font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }
.cfg-hint { font-size: .84rem; line-height: 1.45; color: var(--on-dark-2); }
.cfg-err { font-size: .88rem; font-weight: 700; color: #ffb3c8; }
.cfg-err:empty { display: none; }
.cfg-go { display: grid; gap: 10px; justify-items: start; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.cfg-go .cta { width: 100%; }
.sw-actions .ghost svg { width: 18px; height: 18px; margin-left: 10px; }

@media (max-width: 960px) {
  .cfg-grid { grid-template-columns: 1fr; }
  /* Sur téléphone, l'ordinateur reste visible en haut pendant qu'on fait ses choix */
  .cfg-stage { top: 84px; z-index: 2; margin-inline: -20px; padding: 6px 20px 14px; transition: background-color .25s; }
  .cfg-stage.stuck { background: var(--violet); box-shadow: 0 -100px 0 0 var(--violet), 0 18px 30px -18px rgba(0,0,0,.6); }
  .cfg-laptop::before { display: none; }
  .cfg-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18,5,11,.72); }
}
@media (max-width: 560px) {
  .cfg-laptop .laptop-lid { border-radius: 12px 12px 4px 4px; }
  .mk-hero { grid-template-columns: 1fr .7fr; }
  .mk-links span:not(.mk-pill) { display: none; }
  .mk-menu ul { grid-template-columns: 1fr; }
  .cfg-panel { padding: 18px 14px; }
  .sw { padding: 8px 10px; gap: 8px; }
  .sw-dots i { width: 15px; height: 15px; }
  .sw-name { font-size: .82rem; }
  .ft { column-gap: 8px; padding: 8px 10px; }
  .ft-aa { font-size: 1.35rem; min-width: 1.6em; }
  .ft-desc { display: none; }
  .ft { grid-template-rows: auto; }
}
@media (max-height: 560px) and (max-width: 960px) { .cfg-stage { position: static; } }

/* ---------- Aperçu : fond flou, textes déplaçables, mention « essai fictif » ---------- */
.mk-hero { position: relative; isolation: isolate; }
.mk-blur { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mk-blur i { position: absolute; border-radius: 50%; filter: blur(5cqw); opacity: .55; transition: background-color .45s var(--ease); }
.mk-blur i:nth-child(1) { left: -8%; top: -30%; width: 48%; height: 110%; background: var(--mk-accent); opacity: .35; }
.mk-blur i:nth-child(2) { right: -6%; bottom: -40%; width: 52%; height: 120%; background: var(--mk-soft); opacity: .9; }
.mk-blur i:nth-child(3) { left: 40%; top: 10%; width: 22%; height: 60%; background: var(--mk-ink2); opacity: .18; }
.mk.can-drag { -webkit-user-select: none; user-select: none; }
.mk [data-drag] { position: relative; translate: calc(var(--dx, 0) * 1cqw) calc(var(--dy, 0) * 1cqw); }
.mk.can-drag [data-drag] { cursor: grab; }
.mk.can-drag [data-drag]:hover { outline: 1px dashed color-mix(in srgb, var(--mk-ink) 55%, transparent); outline-offset: .6cqw; }
.mk [data-drag].dragging { cursor: grabbing; z-index: 3; outline: 1.5px solid var(--mk-accent); outline-offset: .6cqw; }
.cfg-note { display: grid; gap: 6px; margin-top: 18px; text-align: center; justify-items: center; }
.cfg-move { font-size: .9rem; color: var(--on-dark-2); }
.cfg-reset { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--citron); }
.cfg-fake { font-size: .82rem; font-style: italic; color: var(--on-dark-2); max-width: 52ch; }
@media (hover: none) { .cfg-move span { display: none; } }
@media (max-width: 960px) { .cfg-note { margin-top: 8px; gap: 2px; } .cfg-fake { font-size: .74rem; line-height: 1.35; } }

/* Photos d'exemple (IA) dans la maquette : la forme de l'illustration sert de cadre */
.mk-plate.has-photo { overflow: hidden; background: var(--mk-soft); }
.mk-plate.has-photo i { display: none; }
[data-kind="sport"] .mk-plate.has-photo { border-radius: 50%; box-shadow: 0 0 0 1.2cqw var(--mk-accent), 0 3cqw 6cqw -3cqw rgba(0,0,0,.45); }
.mk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mk-card-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .8cqw; background: color-mix(in srgb, var(--mk-ink) 8%, transparent); pointer-events: none; }
[data-kind="barbier"] .mk-plate { border-radius: 2cqw; }
[data-kind="agent"] .mk-plate { aspect-ratio: 4 / 5; border-radius: 1cqw; }

/* Couleurs tapées librement : un champ + trois pastilles qui montrent la palette calculée */
.cfg-colors-row { display: flex; align-items: center; gap: 12px; }
.cfg-colors-row input { flex: 1; min-width: 0; }
.cfg-dots i { width: 22px; height: 22px; }
.cfg-dots:not(.on) { opacity: .35; }
.cfg-dots.on i:nth-child(1) { background: var(--c-bg); } .cfg-dots.on i:nth-child(2) { background: var(--c-ink); } .cfg-dots.on i:nth-child(3) { background: var(--c-accent); }

/* Accueil : les sites web passent en premier, avant la création de contenus */
.web-intro .wrap { display: grid; gap: 18px; justify-items: start; }
.web-intro h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.web-intro .wrap > p:not(.kicker) { color: var(--on-dark-2); max-width: 52ch; }
.web-outro .wrap { display: grid; gap: 18px; justify-items: center; text-align: center; }
.web-outro p { font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; }

/* ---------- Premier iPhone (accueil) : version réaliste ----------
   Fin cadre en aluminium orange, bordure noire autour de l'écran, barre d'état, reflet sur la vitre. */
.lens-frame {
  padding: 1.05%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,230,210,.55) 2.2%, rgba(255,255,255,0) 6%, rgba(255,255,255,0) 94%, rgba(255,230,210,.45) 97.8%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #ff9a5c 0%, #f06a2a 14%, #d9541c 50%, #e8632a 86%, #b8461a 100%);
  box-shadow: inset 0 0 0 1px rgba(255,214,180,.7), inset 0 0 0 2.5px rgba(110,32,8,.45);
}
.frame-screen { border-radius: 13.6% / 6.3%; background: #050505; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.frame-screen video, .frame-ui { inset: 1.15% 2.5%; width: auto; height: auto; border-radius: 11.4% / 5.2%; overflow: hidden; }
.frame-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: var(--ui, 0);
  background: linear-gradient(115deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%); }
.frame-ui .island { top: 1.6%; width: 30%; height: 3.6%; }
.sbar { position: absolute; z-index: 2; left: 0; right: 0; top: 1.9%; display: flex; justify-content: space-between; align-items: center; padding: 0 8.5% 0 10%; color: #fff; pointer-events: none;
  font: 600 clamp(9px, .95vw, 13px)/1 var(--body); letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.sb-icons { display: inline-flex; align-items: center; gap: .32em; }
.sb-icons svg { height: .82em; width: auto; fill: #fff; stroke: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.sb-icons svg:last-child { height: .9em; }
.sb-icons svg:last-child rect:first-child { stroke: rgba(255,255,255,.75); }

/* Page Sites web : la phrase d'accroche sous le prix */
.sw-punch { font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.05; letter-spacing: -.01em; color: var(--paper); margin-top: -4px; }