/* Concept : des bandes de couleur empilées comme des affiches. Le titre change de casse au clic, le sourire dépasse du logo. */
  :root {
    --brown: #170f0d;
    --cream: #fff8c8;
    --blue: #93b3ec;
    --wine: #66131a;
    --orange: #ea9d57;

    --serif: "Instrument Serif", "Times New Roman", serif;
    --sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gutter: clamp(16px, 5vw, 56px);
    color-scheme: dark;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--brown);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    overflow-x: clip;
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

  .band { position: relative; overflow: clip; }
  .wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    padding-block: clamp(56px, 9vw, 120px);
    position: relative;
  }

  .dark   { background: var(--brown);  color: var(--cream); }
  .cream  { background: var(--cream);  color: var(--brown); }
  .blue   { background: var(--blue);   color: var(--brown); }
  .orange { background: var(--orange); color: var(--brown); }
  .wine   { background: var(--wine);   color: var(--cream); }

  /* ---------- logo ---------- */
  .logo { display: inline-flex; align-items: baseline; gap: .28em; position: relative; text-decoration: none; line-height: 1; padding-bottom: .5em; }
  .logo .w { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; font-size: 1.9rem; }
  .logo .s { font-family: var(--serif); font-size: 1.55rem; letter-spacing: -.01em; }
  .logo .smile { position: absolute; right: -.3em; bottom: -.15em; width: 1.5rem; height: auto; color: var(--blue); transition: transform .3s ease; transform-origin: 40% 60%; }
  .logo:hover .smile { transform: rotate(-12deg) scale(1.15); }
  .cream .logo .smile, .orange .logo .smile { color: var(--blue); }
  .logo.big .w { font-size: clamp(3.4rem, 11vw, 7rem); }
  .logo.big .s { font-size: clamp(2.6rem, 8.5vw, 5.4rem); }
  .logo.big .smile { width: clamp(2.2rem, 6vw, 3.8rem); }

  .doodle { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
  use { stroke-width: 5; }
  .logo use { stroke-width: 9; }

  /* ---------- hero ---------- */
  .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
  .nav { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-weight: 500; font-size: .95rem; }
  .nav a { text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
  .nav a:hover { border-bottom-color: var(--blue); }
  .nav .pill { background: var(--blue); color: var(--brown); padding: 8px 16px; border-radius: 999px; border: 0; }
  .nav .pill:hover { background: var(--cream); }

  .hero { padding-top: clamp(48px, 9vw, 110px); text-align: center; position: relative; z-index: 1; }
  .tilt-label {
    display: inline-block; font-family: var(--sans); font-weight: 800; letter-spacing: -.04em;
    font-size: clamp(1.6rem, 4vw, 2.6rem); transform: rotate(-5deg); margin-bottom: clamp(8px, 2vw, 20px);
  }
  h1 { margin: 0; font-weight: 400; }
  .chaos {
    all: unset; cursor: pointer; display: block; margin-inline: auto;
    font-family: var(--serif); font-size: clamp(3.2rem, 13.5vw, 10.5rem); line-height: .95; letter-spacing: -.01em;
    text-wrap: balance; color: var(--cream);
  }
  .chaos:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; border-radius: 6px; }
  .aside { color: var(--blue); max-width: 34ch; margin: clamp(20px, 4vw, 40px) auto 0; font-size: 1.05rem; }
  .psst { font-size: .85rem; opacity: .75; margin: 10px 0 0; }
  .hero .logo-smile { display: block; width: 96px; height: auto; color: var(--blue); margin: clamp(20px, 4vw, 36px) auto 0; }
  .lead { max-width: 52ch; margin: clamp(28px, 5vw, 48px) auto 0; font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
  .btn {
    display: inline-flex; align-items: center; gap: .5em; font-family: var(--sans); font-weight: 700; font-size: 1rem;
    padding: 14px 24px; border-radius: 999px; text-decoration: none; border: 2px solid currentColor; cursor: pointer;
    background: transparent; color: inherit; transition: transform .2s ease, background .2s ease, color .2s ease;
  }
  .btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
  .btn.solid { background: var(--cream); color: var(--brown); border-color: var(--cream); }
  .btn.solid:hover { background: var(--blue); border-color: var(--blue); }
  .btn.dark { background: var(--brown); color: var(--cream); border-color: var(--brown); }

  .scribble { position: absolute; color: var(--blue); pointer-events: none; z-index: 0; }
  .scribble.a { width: 52px; left: 6%; top: 34%; transform: rotate(-10deg); }
  .scribble.b { width: 38px; right: 9%; top: 24%; transform: rotate(8deg); }
  .scribble.c { width: 84px; right: 5%; bottom: 14%; transform: rotate(-6deg); }
  .scribble.d { width: 64px; left: 4%; bottom: 10%; transform: rotate(12deg); }
  @media (max-width: 720px) { .scribble.c, .scribble.d { display: none; } .scribble.a { left: 2%; top: 44%; width: 36px; } .scribble.b { right: 3%; top: 26%; width: 28px; } }

  /* ---------- titres de section ---------- */
  .eyebrow { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
  h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: .98; margin: 0 0 clamp(28px, 5vw, 56px); text-wrap: balance; letter-spacing: -.01em; }
  h2 em { font-style: italic; }

  /* ---------- services ---------- */
  .services { list-style: none; margin: 0; padding: 0; border-top: 2px dashed currentColor; }
  .service {
    display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 28px; align-items: center;
    padding: clamp(18px, 3vw, 30px) 0; border-bottom: 2px dashed currentColor;
  }
  .service svg { width: 44px; height: 44px; color: var(--orange); transition: transform .3s ease; }
  .service:hover svg { transform: rotate(-14deg) scale(1.12); }
  .service h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1; text-wrap: balance; }
  .service p { margin: 0; font-size: 1rem; max-width: 46ch; }
  @media (max-width: 760px) {
    .service { grid-template-columns: 44px minmax(0, 1fr); }
    .service p { grid-column: 1 / -1; }
    .service svg { width: 36px; height: 36px; }
  }

  /* ---------- façon de faire ---------- */
  .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
  .about .intro { font-size: clamp(1.15rem, 2.3vw, 1.4rem); max-width: 40ch; }
  .about .intro p { margin: 0 0 1em; }
  .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  .rule { background: var(--cream); border-radius: 22px; padding: 22px 24px; transform: rotate(var(--r, 0deg)); transition: transform .25s ease; }
  .rule:hover { transform: rotate(0deg) scale(1.015); }
  .rule .k { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem; display: block; margin-bottom: 4px; }
  .rule .v { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.12; margin: 0; }
  @media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- projets ---------- */
  .project-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: clamp(24px, 4vw, 40px); }
  .project-head p { margin: 0; max-width: 44ch; color: var(--blue); }
  .shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .shot { margin: 0; }
  .shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: #261a17; transition: transform .3s ease; }
  .shot:hover img { transform: translateY(-4px) rotate(-.8deg); }
  .shot figcaption { margin-top: 10px; font-size: .9rem; color: var(--blue); }
  @media (max-width: 860px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .next {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px;
    margin-top: clamp(28px, 5vw, 56px); padding: clamp(22px, 4vw, 40px); border: 2px dashed var(--blue); border-radius: 26px;
  }
  .next p { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1; text-wrap: balance; flex: 1 1 18ch; min-width: 0; }

  /* ---------- contact ---------- */
  .contact-grid { display: grid; gap: 16px; max-width: 760px; }
  .line {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
    background: var(--brown); color: var(--cream); border-radius: 22px; padding: 18px 22px;
  }
  .line .lab { font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); width: 100%; }
  .line .val { font-family: var(--serif); font-size: clamp(1.45rem, 4.4vw, 2.3rem); line-height: 1.1; overflow-wrap: anywhere; min-width: 0; flex: 1 1 14ch; text-decoration: none; }
  a.val:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; text-decoration-thickness: 3px; }
  .copy { font-family: var(--sans); font-weight: 500; font-size: .9rem; background: var(--blue); color: var(--brown); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
  .copy:hover { background: var(--cream); }
  .status { min-height: 1.5em; margin: 14px 0 0; font-weight: 500; }
  .small-note { margin: 18px 0 0; max-width: 52ch; }

  /* ---------- pied ---------- */
  .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-block: clamp(36px, 6vw, 64px); }
  .foot p { margin: 0; font-size: .95rem; max-width: 46ch; }
  .foot .logo .smile { color: var(--blue); }
  .foot .wrap { padding-block: clamp(36px, 6vw, 64px); }

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

/* ---------- blagues ---------- */
.mood { all: unset; display: block; width: 96px; margin: clamp(20px, 4vw, 36px) auto 0; color: var(--blue); cursor: pointer; transition: transform .25s ease; }
.mood svg { display: block; width: 100%; height: auto; }
.mood:hover { transform: rotate(-8deg) scale(1.08); }
.mood:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; border-radius: 8px; }
.mood-cap { margin: 12px auto 0; min-height: 1.6em; max-width: 36ch; font-size: .95rem; color: var(--blue); }

.rule4 { margin-top: 28px; }
.rule4 button { font: inherit; font-weight: 700; background: transparent; color: inherit; border: 2px solid currentColor; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.rule4 button:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.rule4 p { margin: 14px 0 0; font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.1; }

.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; max-width: 760px; }
.picker label { font-weight: 700; }
.picker input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 2px solid var(--brown); border-radius: 12px; background: transparent; cursor: pointer; }
.picker .note { flex-basis: 100%; margin: 0; font-size: .95rem; max-width: 60ch; }

.service p a { font-weight: 700; }
.up { color: var(--blue); }
.up:hover { color: var(--cream); }

/* page projets */
.cream .shot figcaption { color: var(--brown); }
.cream .next { border-color: var(--brown); }
.hero.small { padding-top: clamp(36px, 6vw, 72px); }
.nav a[aria-current="page"] { border-bottom-color: var(--blue); }

/* ---------- projet Bouler Rouler ---------- */
.br { background: var(--brown); color: #faf7e6; }
.br .eyebrow { color: #f1b35b; }
.br .shot figcaption { color: #f1b35b; }
.br .shot img { background: #261a17; }
.br-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(48px, 8vw, 96px); }
h2.chango { font-family: "Chango", var(--serif); font-weight: 400; font-size: clamp(2.5rem, 7.5vw, 5rem); line-height: 1.02; letter-spacing: 0; color: #f1b35b; margin: 0 0 22px; text-wrap: balance; }
.br-lead { font-family: "Barlow", var(--sans); font-size: clamp(1.1rem, 2.2vw, 1.3rem); max-width: 42ch; margin: 0 0 22px; }
.chips { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 2px solid #f1b35b; color: #f1b35b; border-radius: 999px; padding: 5px 14px; font-size: .9rem; font-weight: 500; }
.br-quote { font-family: "Barlow", var(--sans); font-weight: 600; font-size: 1.15rem; margin: 0; color: #faf7e6; }
h3.sub { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: clamp(40px, 6vw, 72px) 0 18px; padding-top: 18px; border-top: 2px dashed #f1b35b; }
.shots.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shots.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66%; }
.hero-shot img { aspect-ratio: 4 / 5; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; }
.jump a { border: 2px solid var(--blue); color: var(--blue); padding: 8px 18px; border-radius: 999px; text-decoration: none; font-weight: 500; }
.jump a:hover { background: var(--blue); color: var(--brown); }
@media (max-width: 860px) {
  .br-intro { grid-template-columns: minmax(0, 1fr); }
  .shots.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots.c2 { max-width: 100%; }
}

.reel { margin: 0; max-width: 380px; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #261a17; }
.reel figcaption { margin-top: 10px; font-size: .9rem; color: #f1b35b; }

/* ---------- projet So Habana ---------- */
.sh { background: var(--brown); color: #fbedd8; }
.sh .eyebrow { color: #fbedd8; opacity: .85; }
.sh .shot figcaption { color: #fbedd8; opacity: .8; }
.sh .shot img { background: #261a17; }
.sh h3.sub { border-top-color: #ca6b3b; }
.sh .chips li { border-color: #ca6b3b; color: #fbedd8; }
h2.amiri { font-family: "Amiri", var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.02; margin: 0 0 22px; color: #fbedd8; text-wrap: balance; }
.sh-lead { font-family: "Tajawal", var(--sans); font-size: clamp(1.1rem, 2.2vw, 1.3rem); max-width: 42ch; margin: 0 0 22px; }
.sh-quote { font-family: "Amiri", var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; margin: 0; }

/* ---------- logo qui change de déclinaison ---------- */
.logo-cycle { display: inline-block; text-decoration: none; color: var(--cream); }
.lc-stage { display: grid; align-items: center; justify-items: start; min-height: 4.2rem; min-width: min(240px, 60vw); }
.lc-v { grid-area: 1 / 1; display: inline-flex; align-items: center; position: relative; line-height: 1; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.lc-v.on { opacity: 1; transform: none; }
.lc-v .w { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; font-size: 2rem; font-style: normal; }
.lc-v .s { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 1.6rem; }
.lc-v .sm { display: block; height: auto; color: var(--blue); }
.lc-v use { stroke-width: 9; }

.lc-inline { align-items: baseline; gap: .3em; padding-bottom: .9rem; }
.lc-inline .sm { position: absolute; right: -.2rem; bottom: 0; width: 1.5rem; }

.lc-stack { flex-direction: column; align-items: flex-start; }
.lc-stack .w { font-size: 2.2rem; }
.lc-stack .s { font-size: 1.75rem; margin: -.18em 0 0 1.5rem; }

.lc-face .sm { width: 3.2rem; color: var(--cream); }

.lc-chip { padding: .55rem 1rem; border-radius: 16px; }
.lc-blue { background: var(--blue); color: var(--brown); }
.lc-blue .w, .lc-blue .sm { color: var(--brown); }
.lc-cream-chip { background: var(--cream); }
.lc-bluetext .w, .lc-bluetext .sm { color: var(--blue); }
.lc-facechip { padding: .55rem .8rem; }
.lc-facechip .sm { width: 2.6rem; }

.cream .logo-cycle, .blue .logo-cycle, .orange .logo-cycle { color: var(--brown); }

.blue .next { border-color: var(--brown); }

@media (prefers-reduced-motion: reduce) {
  .lc-v { transform: none; }
}

/* ---------- choisis ton logo ---------- */
.lc-picker { flex-basis: 100%; margin-top: 8px; padding-top: 24px; border-top: 2px dashed rgba(255, 248, 200, .3); }
.lc-pick-title { margin: 0 0 14px !important; font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.1; max-width: none !important; }
.lc-pick-title span { font-family: var(--sans); font-size: .85rem; opacity: .75; }
.lc-pick-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lc-pick { position: relative; width: 108px; height: 68px; padding: 0; background: transparent; border: 2px dashed rgba(255, 248, 200, .35); border-radius: 14px; cursor: pointer; color: var(--cream); overflow: hidden; }
.lc-pick:hover { border-color: var(--blue); }
.lc-pick[aria-pressed="true"] { border: 2px solid var(--orange); background: rgba(255, 248, 200, .06); }
.lc-pick .lc-v { position: absolute; left: 50%; top: 50%; grid-area: auto; opacity: 1; transform: translate(-50%, -50%) scale(.5); transition: none; }
.lc-auto { font-family: var(--sans); font-weight: 500; font-size: .95rem; color: var(--cream); background: transparent; border: 2px solid currentColor; border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.lc-auto:hover { color: var(--blue); }
.lc-auto[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--brown); }

/* Vrais logos (fichiers de la charte) */
.lc-img img{display:block;height:3.4rem;width:auto}
.lc-img.lc-i7 img{height:4.2rem}
.lc-img.lc-i5 img{height:3.9rem}
.lc-img.lc-imgchip img{height:3.3rem;border-radius:14px}
.lc-pick .lc-img img{max-width:none;width:auto;flex:none}
.lc-pick .lc-v{width:max-content}

/* Mentions légales */
.legal .wrap{max-width:760px}
.legal h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:2rem 0 .4rem}
.legal p,.legal li{line-height:1.6}
.legal ul{padding-left:1.2rem}
.legal .upd{opacity:.7;font-size:.9rem}
.legal a{color:inherit;text-decoration:underline}
.legal a.btn{text-decoration:none}
mark.todo{background:var(--orange);color:var(--brown);padding:.05em .35em;border-radius:6px;font-style:normal}
.legal-link{margin-left:.5rem;white-space:nowrap}

/* Étoile plus basse quand le titre est petit (façon de faire, projets) */
@media (max-width: 720px) { header:has(.hero.small) .scribble.b { top: 50%; } }