@font-face { font-family: "Studios Meditera Sans"; src: url("fonts/meditera-sans.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Studios Meditera Script"; src: url("fonts/meditera-script.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Kaio"; src: url("fonts/kaio-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Layout: hero en deux colonnes, puis le dossier à intercalaires dessiné dans un repère fixe (1308 × 798) mis à l'échelle en unités de conteneur. */
:root {
  --paper: #F4F2E5;
  --ink: #051D51;
  --ink-soft: #0F1F44;
  --olive: #9FA200;
  --olive-ink: #393A07;
  --cream: #F7F6ED;
  --blob: #8FAEF2;
  --pink: #FF99D3;   --pink-ink: #FF21A0;
  --sun: #FABB00;    --sun-ink: #FF6F07;
  --navy: #002D91;   --navy-ink: #8FAEF2;
  --sky: #8FAEF2;    --sky-ink: #002D91;
  --da-ink: #454D5E;
  --postit: #FFE36E;
  --white: #FFFEF8;
  --awning-ink: #9B1466;
  --sun-card: #FDD252;
  --grid-bg: #FFFEF5;
  --stamp-shadow: #4D4D4D;

  /* Kaio (version d'essai, sans accents) : onglets seulement. Syne pour les textes accentués. */
  --f-tab: "Kaio", "Syne", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Studios Meditera Script", "Brush Script MT", cursive;
  --f-display: "Studios Meditera Sans", "Arial Narrow", Impact, sans-serif;
  --f-text: "Syne", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Caveat", "Comic Sans MS", cursive;
  color-scheme: light;
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); font-family: var(--f-text); overflow-x: hidden; }

.page {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background-color: var(--paper);
  --grain: url("assets/grain.png");
  background-image: url("assets/ronds.svg");
  background-size: 1644px 1644px;
  background-position: calc(50% - 856px) -150px;
  overflow: clip;
}
/* Grain papier ioio, sur tout le site */
.page::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .5;
  mix-blend-mode: hard-light;
  background-image: var(--grain);
  background-size: 1813px auto;
  background-position: center top;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4.5vw, 64px);
  padding-block: clamp(32px, 5vw, 72px) clamp(48px, 7vw, 96px);
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}

/* ---------- En-tête ---------- */
.intro {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 80px;
  align-items: flex-start;
}
.intro h1 {
  flex: 1 1 520px;
  max-width: 752px;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  line-height: 1.01;
  font-weight: 400;
}
.intro .script {
  font-family: var(--f-script);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  padding-bottom: .2em;
}
.intro .display {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.8vw, 64px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.intro-side {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.intro-side p {
  margin: 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  min-width: 216px;
  padding: 0 28px;
  box-sizing: border-box;
  border: 0.6px solid var(--olive-ink);
  border-radius: 12px;
  box-shadow: 0 2.5px 0 var(--olive-ink);
  font-family: var(--f-display);
  font-size: 18.4px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olive-ink);
  background: var(--cream);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn--olive { background: var(--olive); }
.btn--ink { color: var(--ink); border-color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
.btn--ink:hover { box-shadow: 0 4.5px 0 var(--ink); }
.btn--ink:active { box-shadow: 0 1px 0 var(--ink); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4.5px 0 var(--olive-ink); }
.btn:active { transform: translateY(1.5px); box-shadow: 0 1px 0 var(--olive-ink); }
.btn:focus-visible, .tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Le dossier ---------- */
.dossier-zone {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1308px;
  margin-inline: auto;
  container-type: inline-size;
}
.dossier {
  --u: calc(100cqw / 1308);
  --is: 1;
  position: relative;
  width: 100%;
  height: calc(798 * var(--u));
}
.dossier .folder:last-of-type { filter: drop-shadow(0 4px 11px rgba(5, 29, 81, .22)); }

.folder {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 -2px 5px rgba(5, 29, 81, .16));
  transition: transform .45s cubic-bezier(.25, 1.35, .45, 1);
}
.folder .body {
  position: absolute;
  left: calc(var(--bx) * var(--u));
  top: calc(var(--by) * var(--u));
  width: calc(var(--bw) * var(--u));
  height: calc(var(--bh) * var(--u));
  border-radius: calc(19 * var(--u));
  background: var(--c);
}
.tab {
  position: absolute;
  left: calc(var(--tx) * var(--u));
  top: calc(var(--ty) * var(--u));
  width: calc(var(--tw) * var(--u));
  height: calc(var(--th) * var(--u));
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--lp) * var(--u));
  box-sizing: border-box;
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--f-tab);
  font-weight: 500;
  font-size: calc(var(--fs) * var(--u));
  letter-spacing: -0.02em;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
  -webkit-tap-highlight-color: transparent;
}
.tab svg {
  position: absolute;
  inset: 0 0 calc(-12 * var(--u)) 0;
  width: 100%;
  height: calc(100% + 12 * var(--u));
  z-index: -1;
  fill: var(--c);
}
.tab span { position: relative; font-size: calc(var(--fit, 1) * 1em); }

/* Les cinq intercalaires, du fond vers l'avant */
.f-univers { z-index: 1; --c: var(--pink);  --c-ink: var(--pink-ink); --prot: -3deg;  --bx: 83.2; --by: 84;    --bw: 1141.6; --bh: 640;   --tx: 154.3; --ty: 12;  --tw: 317.4; --th: 89.5; --lp: 22; --fs: 20; }
.f-journal { z-index: 2; --c: var(--sun);   --c-ink: var(--sun-ink);  --prot: 2.5deg; --bx: 83;   --by: 126;   --bw: 1141.6; --bh: 610;   --tx: 437;   --ty: 54;  --tw: 317.4; --th: 89.5; --lp: 22; --fs: 20; }
.f-boutique{ z-index: 3; --c: var(--navy);  --c-ink: var(--navy-ink); --prot: 3deg;   --bx: 79;   --by: 168;   --bw: 1142;   --bh: 580;   --tx: 781;   --ty: 96; --tw: 317.4; --th: 89.5; --lp: 22; --fs: 20; }
.f-da      { z-index: 4; --c: var(--olive); --c-ink: var(--da-ink);   --prot: -2.5deg; --bx: 79; --by: 210;   --bw: 1142;   --bh: 552;   --tx: 214;   --ty: 138; --tw: 317.4; --th: 89.5; --lp: 22; --fs: 20; }
.f-lieux   { z-index: 5; --c: var(--sky);   --c-ink: var(--sky-ink);  --prot: -1.5deg; --bx: 79; --by: 252;   --bw: 1141.6; --bh: 529;   --tx: 480.8; --ty: 186; --tw: 317.4; --th: 78.4; --lp: 19;   --fs: 20; }

.cover {
  position: absolute;
  left: calc(79 * var(--u));
  width: calc(1141.6 * var(--u));
  top: calc(var(--ct, 592) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.cover strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(var(--cfs, 87.4) * var(--u));
  line-height: 1.1;
  color: #000;
  mix-blend-mode: soft-light;
  letter-spacing: .005em;
}
.cover span {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: calc(var(--cfs2, 24.5) * var(--u));
  color: var(--sky-ink);
  mix-blend-mode: soft-light;
}

/* L'intercalaire survolé se soulève légèrement */
.dossier[data-peek="univers"]  .f-univers,
.dossier[data-peek="journal"]  .f-journal,
.dossier[data-peek="boutique"] .f-boutique,
.dossier[data-peek="da"]       .f-da,
.dossier[data-peek="lieux"]    .f-lieux { transform: translateY(calc(-34 * var(--u))) rotate(var(--prot)); }

/* ---------- Les objets qui sortent du dossier ---------- */
.stash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.obj {
  position: absolute;
  left: calc((var(--cx) + var(--dx) * var(--is)) * var(--u));
  top: calc(var(--rest) * var(--u));
  width: calc(var(--w) * var(--is) * var(--u));
  height: calc(var(--h) * var(--is) * var(--u));
  translate: -50% 0;
  transform: rotate(0deg);
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
  transition-delay: 0s;
  box-sizing: border-box;
}
.obj[data-for="univers"]  { --cx: 312.6; }
.obj[data-for="journal"]  { --cx: 595.7; }
.obj[data-for="boutique"] { --cx: 939.7; }
.obj[data-for="da"]       { --cx: 372.7; }
.obj[data-for="lieux"]    { --cx: 639.5; }
.dossier { --rest: 128; --rise: 212; }

.dossier[data-peek="univers"]  .obj[data-for="univers"],
.dossier[data-peek="journal"]  .obj[data-for="journal"],
.dossier[data-peek="boutique"] .obj[data-for="boutique"],
.dossier[data-peek="da"]       .obj[data-for="da"],
.dossier[data-peek="lieux"]    .obj[data-for="lieux"] {
  transform: translateY(calc(var(--rise) * -1 * var(--u))) rotate(var(--rot));
  transition-delay: var(--d, 0s);
}

/* Photo / polaroid */
.photo {
  background: var(--white);
  padding: calc(8 * var(--u) * var(--is)) calc(8 * var(--u) * var(--is)) calc(30 * var(--u) * var(--is));
  box-shadow: 0 2px 6px rgba(5, 29, 81, .18);
  display: flex;
  flex-direction: column;
}
.photo i {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-style: normal;
  font-family: var(--f-text);
  font-size: calc(11 * var(--u) * var(--is));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: repeating-linear-gradient(135deg, #D9DCE8 0 6px, #E6E8F0 6px 12px);
}
.photo b {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(4 * var(--u) * var(--is));
  text-align: center;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: calc(19 * var(--u) * var(--is));
  color: var(--ink);
}
.tape::before {
  content: "";
  position: absolute;
  top: calc(-10 * var(--u) * var(--is));
  left: 50%;
  width: 46%;
  height: calc(22 * var(--u) * var(--is));
  translate: -50% 0;
  rotate: -4deg;
  background: rgba(255, 233, 160, .8);
}
.contact i { background:
  linear-gradient(var(--white) 0 0) 33% 0 / 3px 100% no-repeat,
  linear-gradient(var(--white) 0 0) 66% 0 / 3px 100% no-repeat,
  linear-gradient(var(--white) 0 0) 0 50% / 100% 3px no-repeat,
  repeating-linear-gradient(135deg, #D9DCE8 0 6px, #E6E8F0 6px 12px); }

/* Post-it */
.postit {
  background: var(--postit);
  padding: calc(14 * var(--u) * var(--is));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: calc(22 * var(--u) * var(--is));
  line-height: 1.05;
  color: var(--ink);
  box-shadow: 0 3px 6px rgba(5, 29, 81, .16);
}

/* Nuancier */
.swatch {
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: calc(6 * var(--u) * var(--is));
  gap: calc(4 * var(--u) * var(--is));
  box-shadow: 0 2px 6px rgba(5, 29, 81, .18);
}
.swatch s { flex: 1; text-decoration: none; }

/* Étiquette */
.label {
  background: var(--cream);
  border: 1px solid var(--olive-ink);
  border-radius: calc(8 * var(--u) * var(--is)) calc(26 * var(--u) * var(--is)) calc(26 * var(--u) * var(--is)) calc(8 * var(--u) * var(--is));
  display: flex;
  align-items: center;
  padding-left: calc(40 * var(--u) * var(--is));
  font-family: var(--f-display);
  font-size: calc(26 * var(--u) * var(--is));
  letter-spacing: .03em;
  color: var(--olive-ink);
}
.label::before {
  content: "";
  position: absolute;
  left: calc(14 * var(--u) * var(--is));
  top: 50%;
  width: calc(12 * var(--u) * var(--is));
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  border: 1px solid var(--olive-ink);
  background: var(--paper);
}
.stamp {
  position: absolute;
  top: calc(12 * var(--u) * var(--is));
  right: calc(12 * var(--u) * var(--is));
  width: calc(30 * var(--u) * var(--is));
  height: calc(36 * var(--u) * var(--is));
  background: var(--pink);
  outline: 2px dotted var(--white);
  outline-offset: -3px;
}

/* ---------- Menu : le store de la devanture ---------- */
.awning {
  --band: 68px;
  --scallop-h: 28px;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 70;
  color: var(--ink);
  animation: unroll .7s cubic-bezier(.2, .9, .3, 1.15) both;
}
.awning-band, .awning-edge { position: relative; }
.awning-edge::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cpath d='M0 0H120V1.5C119 25 92 42 60 42S1 25 0 1.5Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / auto 100% round;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cpath d='M0 0H120V1.5C119 25 92 42 60 42S1 25 0 1.5Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / auto 100% round;
}
.awning-band::after, .awning-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 1813px auto;
  mix-blend-mode: hard-light;
  opacity: .5;
}
.awning-band {
  background: var(--pink);
  transition: padding .3s ease;
}
.awning-edge { transition: height .3s ease; }
.awning-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4.5vw, 64px);
  min-height: var(--band);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height .3s ease;
}
.awning-edge {
  height: var(--scallop-h);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cpath d='M0 0H120V1.5C119 25 92 42 60 42S1 25 0 1.5Z' fill='%23FF99D3'/%3E%3Cpath d='M1.5 1C2 25 29 42 60 42S118 25 118.5 1' fill='none' stroke='%239B1466' stroke-width='3'/%3E%3C/svg%3E");
  background-size: auto 100%;
  background-repeat: round;
  margin-top: -1px;
  pointer-events: none;
}


.logo {
  font-family: var(--f-script);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  padding-bottom: 6px;
}
.menu {
  display: flex;
  align-items: center;
  gap: 8px clamp(16px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  background: linear-gradient(var(--awning-ink), var(--awning-ink)) 0 100% / 0 2px no-repeat;
  transition: background-size .25s ease, color .2s ease;
}
.menu a:hover, .menu a:focus-visible { color: var(--awning-ink); background-size: 100% 2px; outline: none; }
.menu a[aria-current="page"] { background-size: 100% 2px; }
.menu .menu-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0.6px solid var(--navy);
  border-radius: 12px;
  box-shadow: 0 2.5px 0 var(--navy);
  background: var(--cream);
  color: var(--navy);
}
.menu .menu-cta:hover, .menu .menu-cta:focus-visible { background: var(--cream); color: var(--navy); transform: translateY(-2px); box-shadow: 0 4.5px 0 var(--navy); }
.menu .menu-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.menu-toggle {
  display: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0.6px solid var(--olive-ink);
  border-radius: 12px;
  box-shadow: 0 2.5px 0 var(--olive-ink);
  background: var(--cream);
  color: var(--olive-ink);
  font-family: var(--f-display);
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@keyframes unroll {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@media (max-width: 860px) {
  .awning { --band: 60px; --scallop-h: 24px; }
  .logo { font-size: 30px; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .awning-inner { flex-wrap: wrap; }
  .menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 20px;
  }
  .awning[data-open] .menu { display: flex; }
  .menu a { font-size: 26px; }
  .menu .menu-cta { margin-top: 10px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .awning { animation: none; }
  .awning-band, .awning-inner, .menu a { transition: none; }
}

/* ---------- Bandeau défilant des savoir-faire ---------- */
.marquee {
  position: relative;
  z-index: 6;
  background: var(--pink);
  color: var(--awning-ink);
  height: 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  flex: none;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.marquee li::after {
  content: "–";
  font-family: var(--f-display);
  font-size: 30px;
  padding-inline: 18px;
}
.marquee .m-sans {
  font-family: var(--f-display);
  font-size: 30px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding-top: 3px;
}
.marquee .m-script {
  font-family: var(--f-script);
  font-size: 34px;
  letter-spacing: -0.02em;
  padding-bottom: 4px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .marquee { height: 64px; }
  .marquee .m-sans, .marquee li::after { font-size: 22px; }
  .marquee .m-script { font-size: 26px; }
  .marquee li::after { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Le studio en trois portes ---------- */
.portes {
  position: relative;
  z-index: 6;
  background-color: var(--grid-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='2' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cg filter='url(%23w)' stroke='%23FBDDF0' stroke-width='9' fill='none'%3E%3Cpath d='M-10 20H160M20 -10V160'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  padding-block: clamp(64px, 8vw, 112px);
}
.portes-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
}
.portes-head { text-align: center; margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-weight: 400; }
.portes-head .script { font-family: var(--f-script); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; }
.portes-head .display { font-family: var(--f-display); font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }

.portes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.porte {
  --fill: var(--sun-card); --stroke: var(--sun-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  aspect-ratio: 540 / 670;
  max-width: 100%;
  padding: 14% 9% 12%;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--ink);
  isolation: isolate;
  transition: transform .4s cubic-bezier(.25, 1.4, .45, 1);
}
.porte svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.porte svg path { fill: var(--fill); stroke: var(--stroke); stroke-width: 7; }
.porte img { width: 34%; height: auto; margin-bottom: 8%; transition: transform .4s cubic-bezier(.25, 1.4, .45, 1); }
.porte h3 { margin: 0 0 6%; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.5vw, 34px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.porte p { margin: 0; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.5; letter-spacing: -0.02em; max-width: 24em; }
.porte .more { margin-top: auto; padding-top: 6%; font-family: var(--f-display); font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.porte--lieu { --fill: var(--pink); --stroke: var(--awning-ink); }
.porte--duree { --fill: var(--sky); --stroke: var(--navy); }
.porte:hover, .porte:focus-visible { transform: translateY(-8px) rotate(var(--tilt, -1.5deg)); outline: none; }
.porte:nth-child(2) { --tilt: 1.5deg; }
.porte:hover img, .porte:focus-visible img { transform: rotate(-6deg) scale(1.06); }
.porte:hover .more, .porte:focus-visible .more { opacity: 1; transform: none; }
.porte:focus-visible svg path { stroke-width: 11; }

@media (max-width: 900px) {
  .portes-list { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .porte .more { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .porte, .porte img, .porte .more { transition: none; }
}

/* ---------- Qui je suis ---------- */
.moi {
  position: relative;
  z-index: 6;
  padding-block: clamp(72px, 9vw, 128px);
  background-color: var(--grid-bg);
  background-image: url("assets/rayures.webp");
  background-size: 1440px auto;
  background-position: center top;
  background-repeat: repeat;
}
.moi-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4.5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(56px, 7vw, 112px);
}
.timbre-zone {
  position: relative;
  flex: 1 1 340px;
  max-width: 460px;
  margin-inline: auto;
  padding: 48px 28px 40px;
  box-sizing: border-box;
}
.timbre {
  position: relative;
  aspect-ratio: 151.14 / 186.17;
  max-width: 100%;
  rotate: -3deg;
  transition: rotate .45s cubic-bezier(.25, 1.4, .45, 1);
  filter: drop-shadow(0 6px 10px rgba(5, 29, 81, .14));
}
.timbre-forme { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
img.portrait { padding: 0; object-fit: cover; object-position: 50% 30%; background: none; }
.timbre-zone:hover .timbre { rotate: 0deg; }
.portrait {
  position: absolute;
  left: 6.62%;
  top: 5.37%;
  width: 86.11%;
  height: 88.72%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  background: repeating-linear-gradient(135deg, #DCE4F7 0 10px, #E9EEFA 10px 20px);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.sticker {
  position: absolute;
  z-index: 2;
  padding: 10px 18px 8px;
  border-radius: 14px;
  font-family: var(--f-display);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(5, 29, 81, .18);
}
.sticker--nom { top: 6px; left: -6px; rotate: -6deg; background: var(--sun); font-size: clamp(28px, 3vw, 38px); }
.sticker--nom em { font-family: var(--f-script); font-style: normal; font-size: 1.08em; }
.sticker--titre { bottom: 18px; left: -14px; rotate: 3deg; background: var(--pink); font-size: clamp(20px, 2vw, 26px); max-width: 16ch; }
.badge {
  position: absolute;
  z-index: 2;
  right: -8px;
  bottom: 70px;
  width: clamp(112px, 11vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  box-shadow: 0 3px 0 rgba(5, 29, 81, .18);
}
.badge svg { width: 100%; height: 100%; display: block; animation: spin 24s linear infinite; }
.badge text { font-family: var(--f-display); font-size: 15.5px; letter-spacing: .06em; fill: var(--navy); }
.badge .star { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 38px; color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

.moi-texte {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: var(--ink);
}
.moi-texte :is(h1, h2) { margin: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.moi-texte :is(h1, h2) .script { font-family: var(--f-script); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; }
.moi-texte :is(h1, h2) .display { font-family: var(--f-display); font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.moi-texte p { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.55; letter-spacing: -0.02em; color: var(--ink-soft); }
.moi-texte .btn { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .badge svg { animation: none; }
  .timbre { transition: none; }
}

/* ---------- Projets : grandes cartes à faire glisser ---------- */
.projets {
  position: relative;
  z-index: 60;
  background: var(--grid-bg);
  padding-block: clamp(72px, 9vw, 128px);
  --gutter: max(clamp(16px, 4.5vw, 64px), calc((100% - 1280px) / 2 + clamp(16px, 4.5vw, 64px)));
}
.projets-head {
  max-width: 1280px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  padding-inline: clamp(16px, 4.5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.projets-head h2 { margin: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 400; color: var(--ink); }
.projets-head .script { font-family: var(--f-script); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; }
.projets-head .display { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.projets-nav { display: flex; align-items: center; gap: 12px; }
.projets-count { font-family: var(--f-display); font-size: 20px; letter-spacing: -0.01em; color: var(--ink); min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; }
.nav-btn {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border: 0.6px solid var(--olive-ink);
  border-radius: 12px;
  box-shadow: 0 2.5px 0 var(--olive-ink);
  background: var(--cream);
  color: var(--olive-ink);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.nav-btn--next { background: var(--olive); }
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 4.5px 0 var(--olive-ink); }
.nav-btn:active { transform: translateY(1.5px); box-shadow: 0 1px 0 var(--olive-ink); }
.nav-btn:disabled { opacity: .35; cursor: default; transform: none; box-shadow: 0 2.5px 0 var(--olive-ink); }
.nav-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.nav-btn svg { width: 22px; height: 22px; }

.slider {
  list-style: none;
  margin: 0;
  padding: 8px var(--gutter) 24px;
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.slider::-webkit-scrollbar { display: none; }
.slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.slider.is-dragging a { pointer-events: none; }
.slide { flex: 0 0 min(62vw, 820px); scroll-snap-align: start; }
.slide a { position: relative; display: block; color: var(--ink); text-decoration: none; border-radius: 18px; overflow: hidden; isolation: isolate; }
.slide-visuel { aspect-ratio: 16 / 10; max-width: 100%; background: var(--paper); }
.slide-visuel img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); -webkit-user-drag: none; user-select: none; }
.slide-fiche {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 64px clamp(18px, 2.2vw, 30px) clamp(16px, 2vw, 26px);
  background: linear-gradient(to top, rgba(5, 29, 81, .55), rgba(5, 29, 81, 0));
  color: var(--cream);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.slide-fiche h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.02em; }
.slide-fiche .metier { font-family: var(--f-script); font-size: clamp(20px, 1.8vw, 24px); line-height: 1; }
.slide a:hover img, .slide a:focus-visible img { transform: scale(1.03); }
.slide a:hover .slide-fiche, .slide a:focus-visible .slide-fiche { opacity: 1; transform: none; }
.slide a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* Téléphone et tablette : pas de survol, le nom s'affiche sous l'image */
@media (hover: none) {
  .slide a { overflow: visible; border-radius: 0; }
  .slide-visuel { border-radius: 18px; overflow: hidden; }
  .slide-fiche {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    color: var(--ink);
    padding: 14px 4px 0;
  }
  .slide-fiche .metier { color: var(--ink-soft); }
}
.slide-fin { flex: 0 0 auto; scroll-snap-align: end; display: flex; align-items: center; }

@media (max-width: 720px) {
  .slide { flex-basis: 80vw; }
  .slide-visuel { aspect-ratio: 4 / 5; }
  .nav-btn { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide-visuel img, .slide-fiche, .slide-fiche .go { transition: none; }
}

/* ---------- Toast pour les pages à venir ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(5, 29, 81, .3);
}

/* ---------- Mobile : intercalaires empilés sur cinq rangs ---------- */
@media (max-width: 720px) {
  .dossier-zone { padding-top: calc(100cqw * 110 / 400); }
  .dossier { --u: calc(100cqw / 400); --is: .62; --rest: 50; --rise: 150; height: calc(560 * var(--u)); }
  .f-univers { --bx: 8; --by: 36;  --bw: 384; --bh: 500; --tx: 16;  --ty: 0;   --tw: 184; --th: 46; --lp: 9; --fs: 16; }
  .f-journal { --bx: 8; --by: 76;  --bw: 384; --bh: 470; --tx: 200; --ty: 40;  --tw: 184; --th: 46; --lp: 9; --fs: 16; }
  .f-boutique{ --bx: 6; --by: 116; --bw: 388; --bh: 436; --tx: 24;  --ty: 80;  --tw: 184; --th: 46; --lp: 9; --fs: 16; }
  .f-da      { --bx: 6; --by: 156; --bw: 388; --bh: 400; --tx: 192; --ty: 120; --tw: 184; --th: 46; --lp: 9; --fs: 16; }
  .f-lieux   { --bx: 6; --by: 196; --bw: 388; --bh: 364; --tx: 104; --ty: 160; --tw: 184; --th: 46; --lp: 9; --fs: 16; }
  .obj[data-for="univers"]  { --cx: 108; }
  .obj[data-for="journal"]  { --cx: 292; }
  .obj[data-for="boutique"] { --cx: 116; }
  .obj[data-for="da"]       { --cx: 284; }
  .obj[data-for="lieux"]    { --cx: 196; }
  .cover { left: calc(6 * var(--u)); width: calc(388 * var(--u)); --ct: 430; --cfs: 56; --cfs2: 15; }
  .folder .body { border-radius: calc(14 * var(--u)); }
  .actions .btn { flex: 1 1 200px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .folder, .obj, .btn { transition: none !important; }
}

/* =====================================================================
   Pages du site : éléments communs
   ===================================================================== */
.inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4.5vw, 64px);
}
.section { position: relative; z-index: 6; padding-block: clamp(72px, 9vw, 128px); }
.section--paper { background: var(--grid-bg); }
.section--grid {
  background-color: var(--grid-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='2' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cg filter='url(%23w)' stroke='%23FBDDF0' stroke-width='9' fill='none'%3E%3Cpath d='M-10 20H160M20 -10V160'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.section--stripes {
  background-color: var(--grid-bg);
  background-image: url("assets/rayures.webp");
  background-size: 1440px auto;
}
.section--navy { background: var(--navy); color: var(--cream); }

.heading { margin: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 400; color: var(--ink); }
.heading .script { font-family: var(--f-script); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; }
.heading .display { font-family: var(--f-display); font-size: clamp(38px, 4.8vw, 68px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.heading--center { text-align: center; align-items: center; }
.section--navy .heading { color: var(--cream); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.lead { margin: 0; max-width: 36em; font-size: 18px; line-height: 1.55; letter-spacing: -0.02em; color: var(--ink-soft); }
.prose p { margin: 0 0 1em; max-width: 36em; font-size: 18px; line-height: 1.6; letter-spacing: -0.02em; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }

.btn--ink { color: var(--ink); border-color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
.btn--ink:hover { box-shadow: 0 4.5px 0 var(--ink); }
.btn--navy { background: var(--navy); color: var(--cream); border-color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
.btn--navy:hover { box-shadow: 0 4.5px 0 var(--ink); }
.btn--small { min-height: 46px; min-width: 0; padding: 0 20px; font-size: 17px; }
button.btn { cursor: pointer; }

/* Emplacement d'image en attente, dans la palette */
.ph {
  --c1: var(--sky);
  --c2: #A9C1F5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, var(--c1) 0 14px, var(--c2) 14px 28px);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 100%;
}
.ph--pink { --c1: var(--pink); --c2: #FFB3DF; }
.ph--sun { --c1: var(--sun); --c2: #FCCB3D; }
.ph--olive { --c1: var(--olive); --c2: #B2B42A; color: var(--olive-ink); }
.ph--navy { --c1: var(--navy); --c2: #123E9E; color: var(--cream); }

/* Pastilles de filtre */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0.6px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .15s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[data-cat][hidden] { display: none !important; }

/* Champs de formulaire */
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; }
.field label { font-family: var(--f-display); font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.field input, .field select, .field textarea {
  min-height: 50px;
  padding: 0 16px;
  border: 0.6px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 2px 0 rgba(5, 29, 81, .06);
}
.field textarea { padding: 14px 16px; min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.form-row { display: flex; flex-wrap: wrap; gap: 20px; }
.form-note { margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--postit); color: var(--ink); font-size: 16px; }

/* ---------- Accueil : boutique ---------- */
.drop {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.drop-visuel { position: relative; }
.drop-visuel .ph { aspect-ratio: 4 / 5; }
.drop-etiquette {
  position: absolute;
  top: 24px;
  right: -12px;
  rotate: 6deg;
  padding: 10px 18px 8px;
  border-radius: 12px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 24px;
  box-shadow: 0 3px 0 rgba(5, 29, 81, .2);
}
.drop-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.drop-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.drop-meta li { padding: 8px 14px; border-radius: 999px; background: var(--pink); color: var(--awning-ink); font-family: var(--f-display); font-size: 17px; text-transform: uppercase; }
.notify { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 520px; align-items: flex-end; }
.notify .field { flex: 1 1 240px; }

/* ---------- Accueil et journal : articles ---------- */
.articles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.article a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.article .ph { aspect-ratio: 4 / 3; transition: transform .4s cubic-bezier(.25, 1.4, .45, 1); }
.article a:hover .ph, .article a:focus-visible .ph { transform: translateY(-6px) rotate(-1deg); }
.article a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 16px; }
.article-cat { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--cream); border: 0.6px solid var(--ink); font-family: var(--f-display); font-size: 15px; text-transform: uppercase; }
.article h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.article p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) { .articles { grid-template-columns: minmax(0, 1fr); } .drop { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Accueil : manifeste ---------- */
.manifeste { text-align: center; }
.manifeste p { margin: 0 auto; max-width: 18ch; font-family: var(--f-display); font-size: clamp(44px, 7vw, 104px); line-height: .98; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.manifeste .script { display: block; margin-bottom: 18px; font-family: var(--f-script); font-size: clamp(28px, 3vw, 40px); color: var(--awning-ink); }

/* ---------- Bandeau contact ---------- */
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.cta-band .heading .display { color: var(--cream); }
.cta-band .heading .script { color: var(--sky); }
.cta-band p { margin: 10px 0 0; color: #D8E2FA; font-size: 18px; }
.btn--cream { background: var(--cream); color: var(--navy); border-color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }

/* ---------- Pied de page ---------- */
.footer { position: relative; z-index: 6; background: var(--navy); color: var(--cream); }
.footer-edge {
  height: 28px;
  margin-top: -27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cpath d='M0 44H120V42.5C119 19 92 2 60 2S1 19 0 42.5Z' fill='%23002D91'/%3E%3C/svg%3E");
  background-size: auto 100%;
  background-repeat: round;
}
.footer-inner { padding-block: clamp(48px, 6vw, 80px) 32px; display: flex; flex-direction: column; gap: 48px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; }
.footer-col .footer-logo { font-family: var(--f-script); font-size: 56px; line-height: 1; color: var(--cream); text-decoration: none; }
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.footer-col h2 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--sky); }
.footer-col a { color: var(--cream); text-decoration: none; font-size: 16px; width: fit-content; }
.footer-col a:hover, .footer-col a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.footer-col .email { user-select: all; font-size: 16px; }
.footer-news { flex: 1 1 300px; max-width: 420px; }
.footer-news form { display: flex; gap: 8px; }
.footer-news input { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 16px; border-radius: 12px; border: 0.6px solid var(--cream); background: transparent; color: var(--cream); font: inherit; }
.footer-news input::placeholder { color: #B9C8F0; }
.footer-news .btn { min-width: 0; min-height: 50px; padding: 0 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(247, 246, 237, .25); font-size: 14px; color: #C9D5F4; }
.footer-bottom a { color: inherit; }
.footer .form-note { margin-top: 10px; }

/* ---------- En-tête des pages intérieures ---------- */
.page-hero { position: relative; z-index: 6; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.page-hero .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 80px; }
.page-hero .heading { flex: 1 1 520px; max-width: 820px; }
.page-hero .heading .display { font-size: clamp(48px, 7vw, 104px); }
.page-hero .lead { flex: 1 1 320px; max-width: 30em; }

/* ---------- Studio ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: etape; }
.etape { position: relative; padding: 64px 24px 28px; border-radius: 18px; background: var(--cream); border: 0.6px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; gap: 10px; }
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: -22px;
  left: 20px;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone, var(--pink));
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 26px;
  rotate: -8deg;
}
.etape:nth-child(2) { --tone: var(--sun); }
.etape:nth-child(3) { --tone: var(--sky); }
.etape:nth-child(4) { --tone: var(--olive); }
.etape h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.etape p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.etape .note { margin-top: auto; padding-top: 8px; font-family: var(--f-script); font-size: 20px; color: var(--awning-ink); }

.offres { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.offre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(20px, 3vw, 40px);
  border-radius: 24px;
  background: var(--fill);
  border: 2px solid var(--stroke);
  scroll-margin-top: 120px;
}
.offre:nth-child(even) .offre-visuel { order: 2; }
.offre--univers { --fill: var(--sun-card); --stroke: var(--sun-ink); }
.offre--lieux { --fill: var(--pink); --stroke: var(--awning-ink); }
.offre--duree { --fill: var(--sky); --stroke: var(--navy); }
.offre-visuel { position: relative; aspect-ratio: 5 / 4; border-radius: 16px; background: var(--cream); display: grid; place-items: center; }
.offre-visuel img { width: 38%; height: auto; }
.offre-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: var(--ink); }
.offre-texte .script { font-family: var(--f-script); font-size: 26px; }
.offre-texte h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.offre-texte p { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.55; }
.offre-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.offre-liste li { padding: 8px 14px; border-radius: 999px; background: var(--cream); border: 0.6px solid var(--ink); font-size: 15px; }
.offre-prix { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.offre-prix strong { font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }

.stickers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
.stickers li { padding: 12px 22px 10px; border-radius: 14px; font-family: var(--f-display); font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); box-shadow: 0 3px 0 rgba(5, 29, 81, .18); }
.stickers li:nth-child(4n+1) { background: var(--pink); rotate: -3deg; }
.stickers li:nth-child(4n+2) { background: var(--sun); rotate: 2deg; }
.stickers li:nth-child(4n+3) { background: var(--sky); rotate: -1.5deg; }
.stickers li:nth-child(4n+4) { background: var(--olive); color: var(--olive-ink); rotate: 3deg; }

.faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq details { border-radius: 16px; background: var(--cream); border: 0.6px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); font-size: 24px; transition: rotate .3s ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 16px; }
.faq details p { margin: 0; padding: 0 24px 22px; max-width: 40em; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 1000px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 760px) {
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .offre { grid-template-columns: minmax(0, 1fr); }
  .offre:nth-child(even) .offre-visuel { order: 0; }
}

/* ---------- Projets : grille ---------- */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.pcard a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.pcard-visuel { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--paper); }
.pcard-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.pcard-visuel .ph { width: 100%; height: 100%; border-radius: 0; }
.pcard a:hover img, .pcard a:focus-visible img { transform: scale(1.03); }
.pcard a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 18px; }
.pcard-legende { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.pcard-legende h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.02em; }
.pcard-legende span { font-family: var(--f-script); font-size: 22px; color: var(--ink-soft); }
.pcard--soon .pcard-legende span { font-family: var(--f-text); font-size: 15px; }
.projets-filtres { margin-bottom: clamp(32px, 4vw, 48px); }
@media (max-width: 720px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page projet ---------- */
.retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--f-display); font-size: 18px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.retour:hover { text-decoration: underline; text-underline-offset: 4px; }
.fiche { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 20px 24px; border-radius: 16px; background: var(--cream); border: 0.6px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.fiche div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fiche dt { font-family: var(--f-script); font-size: 20px; color: var(--awning-ink); }
.fiche dd { margin: 0; font-family: var(--f-display); font-size: 21px; letter-spacing: -0.01em; color: var(--ink); }
.projet-hero-img { position: relative; z-index: 60; }
.projet-hero-img img { display: block; width: 100%; max-height: 82vh; object-fit: cover; border-radius: 24px; }
.histoire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.histoire h2 { margin: 0 0 14px; font-family: var(--f-script); font-weight: 400; font-size: 32px; color: var(--awning-ink); }
.galerie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.galerie > * { min-height: 0; }
.galerie .g-a { grid-column: span 3; aspect-ratio: 4 / 5; }
.galerie .g-b { grid-column: span 3; aspect-ratio: 4 / 5; }
.galerie .g-c { grid-column: span 6; aspect-ratio: 16 / 8; }
.galerie .g-d { grid-column: span 2; aspect-ratio: 1; }
.citation { max-width: 980px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.citation blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.citation cite { font-style: normal; font-family: var(--f-script); font-size: 26px; color: var(--awning-ink); }
.suivant a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; color: var(--ink); }
.suivant img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; display: block; transition: transform .6s ease; }
.suivant a:hover img { transform: scale(1.02); }
.suivant .display { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
@media (max-width: 760px) {
  .histoire, .suivant a { grid-template-columns: minmax(0, 1fr); }
  .galerie .g-a, .galerie .g-b, .galerie .g-c { grid-column: span 6; }
  .galerie .g-d { grid-column: span 3; }
}

/* ---------- Boutique ---------- */
.drop-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 28px;
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
}
.drop-panel .ph { border-radius: 0; aspect-ratio: auto; min-height: 420px; }
.drop-panel-texte { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.drop-panel-texte .script { font-family: var(--f-script); font-size: 30px; color: var(--sky); }
.drop-panel-texte h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.drop-panel-texte p { margin: 0; color: #D8E2FA; font-size: 17px; line-height: 1.55; max-width: 32em; }
.drop-panel .field label { color: var(--cream); }
.drop-panel .form-note { color: var(--ink); }
.produits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.produit { display: flex; flex-direction: column; gap: 10px; }
.produit .ph { aspect-ratio: 4 / 5; }
.produit-etat { align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-family: var(--f-display); font-size: 15px; text-transform: uppercase; background: var(--postit); color: var(--ink); }
.produit-etat--out { background: var(--paper); color: var(--ink-soft); border: 0.6px dashed var(--ink-soft); }
.produit h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.05; letter-spacing: -0.01em; }
.produit .prix { font-size: 16px; color: var(--ink-soft); }
.atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.atelier .ph { aspect-ratio: 5 / 4; }
@media (max-width: 1000px) { .produits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .drop-panel, .atelier { grid-template-columns: minmax(0, 1fr); } .drop-panel .ph { min-height: 280px; } }

/* ---------- Journal ---------- */
.une a { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; text-decoration: none; color: var(--ink); }
.une .ph { aspect-ratio: 16 / 11; }
.une h2 { margin: 12px 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.une p { margin: 0 0 20px; color: var(--ink-soft); font-size: 18px; line-height: 1.55; }
.une a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 16px; }
@media (max-width: 760px) { .une a { grid-template-columns: minmax(0, 1fr); } }

/* ---------- À propos ---------- */
.valeurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.valeur { padding: 32px 28px; border-radius: 22px; background: var(--fill); border: 2px solid var(--stroke); display: flex; flex-direction: column; gap: 12px; }
.valeur:nth-child(1) { --fill: var(--sun-card); --stroke: var(--sun-ink); rotate: -1deg; }
.valeur:nth-child(2) { --fill: var(--pink); --stroke: var(--awning-ink); rotate: 1deg; }
.valeur:nth-child(3) { --fill: var(--sky); --stroke: var(--navy); rotate: -.5deg; }
.valeur h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.valeur p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.complices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.complice { display: flex; flex-direction: column; gap: 10px; }
.complice .ph { aspect-ratio: 1; border-radius: 50%; font-size: 15px; }
.complice h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 24px; text-align: center; }
.complice p { margin: 0; text-align: center; font-family: var(--f-script); font-size: 20px; color: var(--ink-soft); }
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); scroll-margin-top: 110px; }
.contact-infos { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.contact-infos .email { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); color: var(--ink); user-select: all; }
.contact-form { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 3vw, 40px); border-radius: 24px; background: var(--cream); border: 0.6px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
@media (max-width: 900px) {
  .valeurs, .contact { grid-template-columns: minmax(0, 1fr); }
  .complices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.produit .btn { align-self: flex-start; }

/* Grain plus discret sur les fonds bleu nuit */
.section--navy, .footer { z-index: 60; }
.section--navy::after, .footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 1813px auto;
  mix-blend-mode: hard-light;
  opacity: .15;
}
.section--navy > *, .footer > * { position: relative; z-index: 1; }
.section--navy { position: relative; }

/* ---------- Boutique : bientôt ---------- */
.soon { padding-block: clamp(40px, 6vw, 96px) clamp(80px, 10vw, 140px); }
.soon-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.soon-visuel { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin-inline: auto; }
.soon-carte { position: absolute; width: 52%; aspect-ratio: 3 / 4; box-shadow: 0 6px 0 rgba(5, 29, 81, .16); transition: transform .5s cubic-bezier(.25, 1.4, .45, 1); }
.soon-carte--a { left: 4%; top: 10%; rotate: -9deg; }
.soon-carte--b { left: 30%; top: 2%; rotate: 4deg; z-index: 1; }
.soon-carte--c { left: 42%; top: 30%; rotate: 11deg; z-index: 2; }
.soon-visuel:hover .soon-carte--a { transform: translate(-12px, -6px); }
.soon-visuel:hover .soon-carte--c { transform: translate(12px, 8px); }
.soon-tampon {
  position: absolute;
  z-index: 3;
  left: 8%;
  bottom: 6%;
  width: clamp(120px, 14vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--f-script);
  font-size: clamp(30px, 3.4vw, 42px);
  rotate: -12deg;
  box-shadow: 0 4px 0 var(--ink);
}
.soon-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.soon-texte .heading .display { font-size: clamp(48px, 6.4vw, 96px); }
.soon-stickers { justify-content: flex-start; }
.soon-stickers li { font-size: clamp(17px, 1.6vw, 21px); padding: 10px 18px 8px; }
.soon-suite { margin: 0; font-size: 16px; color: var(--ink-soft); }
.soon-suite a { color: var(--ink); }
@media (max-width: 860px) { .soon-inner { grid-template-columns: minmax(0, 1fr); } .soon-visuel { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .soon-carte { transition: none; } }

/* ---------- Appel à contact : la feuille de carnet ---------- */
.cta-zone {
  position: relative;
  z-index: 60;
  padding-block: clamp(80px, 10vw, 140px);
  background: repeating-linear-gradient(90deg, var(--olive) 0 180px, var(--grid-bg) 180px 275px);
}
.cta-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 1813px auto;
  mix-blend-mode: hard-light;
  opacity: .35;
}
.cta-zone .inner { position: relative; z-index: 1; }
.cta-carnet {
  position: relative;
  isolation: isolate;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(120px, 19%, 180px) 12% clamp(90px, 13%, 130px) 6%;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--ink);
}
.cta-feuille { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.cta-script { margin: 0; font-family: var(--f-script); font-size: clamp(26px, 3vw, 40px); }
.cta-titre { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 76px); line-height: .98; letter-spacing: -0.02em; text-wrap: balance; }
.cta-texte { margin: 0; max-width: 26em; font-size: 18px; line-height: 1.5; }
.cta-carnet .btn { margin-top: 6px; }
@media (max-width: 720px) {
  .cta-zone { background: repeating-linear-gradient(90deg, var(--olive) 0 90px, var(--grid-bg) 90px 140px); }
  .cta-carnet { padding: 104px 12% 76px 6%; }
  .cta-carnet .btn { min-width: 0; }
}

/* Pied de page : tous les textes en bleu clair */
.footer, .footer-col a, .footer-col .footer-logo, .footer-col span, .footer-bottom, .footer-bottom a { color: var(--sky); }
.footer-news input { color: var(--sky); border-color: var(--sky); }
.footer-news input::placeholder { color: var(--sky); opacity: .75; }
.footer-news .btn { color: var(--navy); }

/* Accueil : visuel de la boutique plus compact */
.drop { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.drop-visuel { max-width: 380px; width: 100%; justify-self: center; }
.drop-visuel .ph { aspect-ratio: 1; }

/* Quadrillage jaune pour la boutique */
.section--grid-sun {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='2' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cg filter='url(%23w)' stroke='%23FCE3A0' stroke-width='9' fill='none'%3E%3Cpath d='M-10 20H160M20 -10V160'/%3E%3C/g%3E%3C/svg%3E");
}

/* Stickers posés sur le dossier */
.sticker-dossier {
  position: absolute;
  left: calc(var(--sx) * var(--u));
  top: calc(var(--sy) * var(--u));
  width: calc(var(--sw) * var(--u));
  height: auto;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(5, 29, 81, .18));
}
.sticker-ordi { --sx: 124; --sy: 412; --sw: 305; }
.sticker-pot { --sx: 903; --sy: 293; --sw: 245; }
@media (max-width: 720px) {
  .sticker-ordi { --sx: 4; --sy: 250; --sw: 150; }
  .sticker-pot { --sx: 268; --sy: 228; --sw: 120; }
}

/* Objets réels qui sortent du dossier (photos détourées) */
.obj-img { object-fit: contain; filter: drop-shadow(0 6px 10px rgba(5, 29, 81, .25)); }
.stash { z-index: auto; }
.f-univers { z-index: 2; } .f-journal { z-index: 4; } .f-boutique { z-index: 6; } .f-da { z-index: 8; } .f-lieux { z-index: 10; }
.obj[data-for="univers"] { z-index: 3; }
.obj:not([data-for="univers"]) { z-index: 1; }
@media (max-width: 720px) {
  .obj-img[data-for="univers"]:nth-child(1) { --dx: 150 !important; --rise: 163 !important; }
  .obj-img[data-for="univers"]:nth-child(2) { --dx: 240 !important; --rise: 168 !important; }
  .obj-img[data-for="univers"]:nth-child(3) { --dx: 300 !important; --rise: 138 !important; }
}

/* Les objets qui sortent du dossier passent au-dessus de l'en-tête et des boutons */
.dossier-zone { z-index: 12; }
.obj[data-for="journal"] { z-index: 5; }
@media (max-width: 720px) {
  
  .obj-journal[src*="papiers"] { --dx: -10 !important; --rise: 163 !important; }
  .obj-journal[src*="lunettes"] { --dx: -110 !important; --rise: 103 !important; }
}

/* ---------- Accueil : qui je suis, sur le tapis de découpe ---------- */
.tapis {
  position: relative;
  z-index: 60;
  padding-block: clamp(80px, 10vw, 140px);
  background-color: #6F7300;
  background-image:
    linear-gradient(rgba(247, 246, 237, .34) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(247, 246, 237, .34) 1.5px, transparent 1.5px),
    linear-gradient(rgba(247, 246, 237, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 246, 237, .14) 1px, transparent 1px),
    linear-gradient(28deg, transparent 49.85%, rgba(247, 246, 237, .22) 50%, transparent 50.15%);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%;
  overflow: hidden;
}
.tapis::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 1813px auto;
  mix-blend-mode: hard-light;
  opacity: .3;
}
.tapis-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "photo titre" "photo feuille";
  gap: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 96px);
  align-items: start;
}
.tapis-photo {
  grid-area: photo;
  position: relative;
  margin: 0;
  padding: 14px 14px 0;
  background: var(--navy);
  border-radius: 6px;
  rotate: -3deg;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .28);
}
.tapis-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 3px; }
.tapis-photo figcaption { display: flex; align-items: center; gap: 12px; padding: 14px 4px 16px; color: var(--sky); font-size: 15px; letter-spacing: -0.01em; }
.cap-logo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--sun); color: var(--navy); font-family: var(--f-script); font-size: 17px; }
.tapis-titre { grid-area: titre; margin: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 400; color: var(--cream); padding-top: clamp(8px, 3vw, 40px); }
.tapis-titre .script { font-family: var(--f-script); font-size: clamp(28px, 2.8vw, 36px); color: var(--sun); }
.tapis-titre .display { font-family: var(--f-display); font-size: clamp(42px, 5.4vw, 80px); line-height: .98; letter-spacing: -0.02em; text-wrap: balance; }
.tapis-feuille {
  grid-area: feuille;
  position: relative;
  max-width: 560px;
  justify-self: end;
  padding: clamp(40px, 4vw, 56px) clamp(28px, 3.4vw, 48px) clamp(32px, 3.4vw, 44px);
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(5, 29, 81, .08) 31px 32px),
    #F1F1EC;
  color: var(--ink);
  rotate: 1.5deg;
  clip-path: polygon(0.0% 0.5%, 2.5% 0.2%, 5.0% 0.9%, 7.5% 0.3%, 10.0% 0.1%, 12.5% 0.9%, 15.0% 2.0%, 17.5% 1.8%, 20.0% 1.7%, 22.5% 0.5%, 25.0% 1.2%, 27.5% 0.6%, 30.0% 0.4%, 32.5% 0.2%, 35.0% 0.5%, 37.5% 2.0%, 40.0% 1.8%, 42.5% 1.8%, 45.0% 1.8%, 47.5% 0.4%, 50.0% 0.7%, 52.5% 1.4%, 55.0% 1.6%, 57.5% 1.9%, 60.0% 1.9%, 62.5% 0.2%, 65.0% 1.3%, 67.5% 1.5%, 70.0% 1.1%, 72.5% 0.4%, 75.0% 1.0%, 77.5% 0.2%, 80.0% 2.1%, 82.5% 1.9%, 85.0% 1.2%, 87.5% 0.7%, 90.0% 2.0%, 92.5% 1.3%, 95.0% 1.9%, 97.5% 1.9%, 100.0% 1.1%, 99.3% 2.5%, 99.0% 5.0%, 99.3% 7.5%, 99.7% 10.0%, 99.5% 12.5%, 98.7% 15.0%, 99.9% 17.5%, 99.9% 20.0%, 99.0% 22.5%, 99.6% 25.0%, 99.1% 27.5%, 99.2% 30.0%, 99.5% 32.5%, 98.4% 35.0%, 99.7% 37.5%, 99.3% 40.0%, 99.7% 42.5%, 99.0% 45.0%, 99.6% 47.5%, 99.4% 50.0%, 98.8% 52.5%, 99.5% 55.0%, 99.1% 57.5%, 98.6% 60.0%, 99.8% 62.5%, 99.9% 65.0%, 99.6% 67.5%, 98.8% 70.0%, 99.0% 72.5%, 99.6% 75.0%, 99.5% 77.5%, 99.7% 80.0%, 99.3% 82.5%, 99.9% 85.0%, 98.9% 87.5%, 98.6% 90.0%, 98.5% 92.5%, 98.8% 95.0%, 98.5% 97.5%, 100.0% 100.0%, 97.5% 99.2%, 95.0% 97.5%, 92.5% 98.0%, 90.0% 98.9%, 87.5% 97.5%, 85.0% 98.4%, 82.5% 97.9%, 80.0% 99.2%, 77.5% 99.5%, 75.0% 98.8%, 72.5% 99.6%, 70.0% 99.0%, 67.5% 97.5%, 65.0% 99.1%, 62.5% 100.0%, 60.0% 99.9%, 57.5% 99.6%, 55.0% 98.0%, 52.5% 99.1%, 50.0% 99.2%, 47.5% 99.7%, 45.0% 97.4%, 42.5% 98.9%, 40.0% 99.5%, 37.5% 99.8%, 35.0% 99.9%, 32.5% 99.6%, 30.0% 98.2%, 27.5% 99.6%, 25.0% 99.9%, 22.5% 98.7%, 20.0% 99.4%, 17.5% 97.4%, 15.0% 99.7%, 12.5% 98.6%, 10.0% 98.0%, 7.5% 98.9%, 5.0% 97.4%, 2.5% 98.8%, 0.0% 99.4%, 0.7% 97.5%, 0.1% 95.0%, 0.7% 92.5%, 0.4% 90.0%, 1.4% 87.5%, 1.3% 85.0%, 0.8% 82.5%, 0.1% 80.0%, 0.4% 77.5%, 0.4% 75.0%, 0.3% 72.5%, 0.4% 70.0%, 1.4% 67.5%, 0.2% 65.0%, 0.1% 62.5%, 1.5% 60.0%, 0.9% 57.5%, 1.6% 55.0%, 0.6% 52.5%, 1.4% 50.0%, 1.0% 47.5%, 1.3% 45.0%, 1.2% 42.5%, 0.8% 40.0%, 0.1% 37.5%, 0.3% 35.0%, 1.4% 32.5%, 1.4% 30.0%, 1.5% 27.5%, 0.5% 25.0%, 1.1% 22.5%, 1.3% 20.0%, 1.0% 17.5%, 1.3% 15.0%, 0.8% 12.5%, 1.0% 10.0%, 1.1% 7.5%, 0.4% 5.0%, 1.5% 2.5%);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .25));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.feuille-script { margin: 0; font-family: var(--f-script); font-size: clamp(28px, 2.6vw, 34px); color: var(--navy); }
.tapis-feuille p { margin: 0; font-size: 17px; line-height: 1.6; letter-spacing: -0.01em; }
.tapis-feuille .btn { margin-top: 8px; }
.scotch {
  position: absolute;
  z-index: 2;
  height: 46px;
  background: rgba(239, 230, 205, .88);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 30% 8%, 42% 0, 55% 9%, 68% 1%, 80% 8%, 92% 0, 100% 9%, 100% 92%, 94% 100%, 84% 91%, 72% 99%, 60% 92%, 47% 100%, 35% 93%, 22% 100%, 10% 91%, 0 98%);
}
.scotch--photo { top: -24px; left: 30%; width: 44%; rotate: -4deg; }
.scotch--feuille { top: -14px; left: 42%; width: 22%; height: 70px; rotate: 3deg; }
.tapis-deco { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); max-width: none; height: auto; }
.deco-lunettes { width: clamp(150px, 16vw, 240px); left: clamp(-120px, -6vw, -40px); top: 46%; rotate: 18deg; }
.deco-stylo { width: clamp(34px, 3.4vw, 50px); right: 2%; top: -60px; rotate: 32deg; }
.deco-tasse { width: clamp(90px, 9vw, 130px); left: 40%; bottom: -40px; rotate: -10deg; }
.deco-postits { width: clamp(90px, 9vw, 130px); aspect-ratio: 1; right: -40px; bottom: 8%; }
.deco-postits span { position: absolute; inset: 0; background: var(--postit); box-shadow: 0 3px 6px rgba(0, 0, 0, .2); }
.deco-postits span:nth-child(1) { rotate: 12deg; }
.deco-postits span:nth-child(2) { rotate: 4deg; translate: -6px 4px; }
.deco-postits span:nth-child(3) { rotate: -8deg; translate: -12px 8px; }
@media (max-width: 860px) {
  .tapis-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "photo" "feuille"; }
  .tapis-photo { max-width: 360px; justify-self: center; width: 86%; }
  .tapis-feuille { justify-self: stretch; rotate: .8deg; }
  .deco-lunettes { left: -50px; top: 30%; width: 140px; }
  .deco-tasse { left: auto; right: -10px; bottom: auto; top: 38%; width: 80px; }
  .deco-postits { display: none; }
  .deco-stylo { top: -70px; }
}
.tapis-photo { max-width: 420px; width: 100%; justify-self: center; }
.scotch--feuille { top: 0; }
.tapis-feuille { padding-top: clamp(56px, 5vw, 72px); }
@media (max-width: 860px) { .tapis-photo { max-width: 290px; } }

/* Tapis de découpe façon atelier (page À propos) */
.tapis {
  background-color: #0E5B45;
  background-image:
    url("assets/tapis.svg"),
    linear-gradient(rgba(227, 229, 42, .55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(227, 229, 42, .55) 1.5px, transparent 1.5px),
    linear-gradient(rgba(227, 229, 42, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 229, 42, .28) 1px, transparent 1px);
  background-size: 1800px 1100px, 150px 150px, 150px 150px, 30px 30px, 30px 30px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  padding-block: clamp(120px, 12vw, 180px);
}
.tapis-titre .script { color: #E3E52A; }
.tapis-objets { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.drag {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
  height: auto;
  translate: var(--tx, 0px) var(--ty, 0px);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35));
  transition: scale .2s ease, filter .2s ease;
}
.drag:hover { scale: 1.03; }
.drag.is-dragging { cursor: grabbing; scale: 1.08; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .4)); z-index: 10; transition: none; }
.o-carnet { width: clamp(170px, 17vw, 270px); left: 2%; bottom: 4%; rotate: -14deg; }
.o-papiers { width: clamp(170px, 17vw, 260px); right: 1%; top: 3%; rotate: 9deg; }
.o-lunettes { width: clamp(200px, 22vw, 340px); left: 30%; top: 2%; rotate: -6deg; }
.o-stylo { width: clamp(46px, 4.6vw, 72px); left: 45%; bottom: 3%; rotate: 70deg; }
.o-postit { width: clamp(130px, 13vw, 200px); right: 16%; bottom: 2%; rotate: -8deg; }
.o-tasse { width: clamp(110px, 11vw, 170px); left: 2%; top: 8%; rotate: -12deg; }
.o-ordi { width: clamp(140px, 14vw, 220px); right: 2%; bottom: 22%; rotate: 8deg; }
.o-postits { width: clamp(100px, 10vw, 150px); aspect-ratio: 1; left: 22%; bottom: 8%; }
.o-postits span { position: absolute; inset: 0; background: var(--postit); box-shadow: 0 3px 6px rgba(0, 0, 0, .2); }
.o-postits span:nth-child(1) { rotate: 12deg; }
.o-postits span:nth-child(2) { rotate: 4deg; translate: -6px 4px; }
.o-postits span:nth-child(3) { rotate: -8deg; translate: -12px 8px; }
.tapis-psst { position: absolute; z-index: 4; left: 50%; bottom: 18px; translate: -50% 0; margin: 0; font-family: var(--f-script); font-size: 22px; color: #E3E52A; }
.tapis-inner { z-index: 3; }
@media (max-width: 860px) {
  .tapis { padding-block: 150px 220px; }
  .o-carnet { left: -20px; bottom: 1%; width: 140px; }
  .o-papiers { right: -30px; top: 1%; width: 130px; }
  .o-lunettes { left: 4%; top: 2%; width: 170px; }
  .o-postit { right: 2%; bottom: 2%; width: 110px; }
  .o-ordi, .o-tasse { display: none; }
  .o-postits { left: 38%; bottom: 3%; width: 90px; }
  .o-stylo { left: 62%; bottom: 8%; width: 40px; }
}
@media (min-width: 861px) {
  .tapis { padding-block: 150px 320px; }
  .o-papiers { right: 2%; top: auto; bottom: 3%; rotate: 10deg; }
  .o-ordi { right: 36%; bottom: 4%; width: clamp(130px, 12vw, 190px); }
  .o-postit { right: 20%; bottom: 6%; }
  .o-stylo { left: 50%; bottom: 14%; }
  .o-tasse { left: auto; right: 3%; top: 4%; }
}

/* Le store passe par-dessus le haut de chaque page : pas de bande vide sous les festons */
.awning { margin-bottom: calc(-1 * var(--scallop-h)); }
.awning-band, .awning-inner, .awning-edge { transition: none; }

/* Tapis : tout plus resserré autour du contenu */
.tapis-objets { left: 0; right: 0; margin-inline: auto; max-width: 1360px; }
.tapis-inner { max-width: 1080px; column-gap: clamp(28px, 3vw, 48px); }
.tapis-feuille { justify-self: start; }
@media (min-width: 861px) {
  .tapis { padding-block: 130px 260px; }
}
@media (min-width: 861px) { .o-stylo { left: 40%; bottom: 6%; rotate: 60deg; } }

/* Tapis : objets disposés autour du contenu, comme la maquette */
@media (min-width: 861px) {
  .tapis { padding-block: 140px 180px; }
  .tapis-objets { max-width: 1500px; }
  .o-lunettes { left: 27%; top: 5%; bottom: auto; right: auto; rotate: -8deg; }
  .o-tasse { left: 72%; top: 15%; bottom: auto; right: auto; rotate: -12deg; }
  .o-papiers { right: 0; left: auto; top: 22%; bottom: auto; rotate: 6deg; }
  .o-carnet { left: 0; top: 46%; bottom: auto; rotate: -10deg; }
  .o-stylo { left: 34%; top: 58%; bottom: auto; rotate: 68deg; }
  .o-postits { left: 30%; top: 78%; bottom: auto; }
  .o-postit { right: 1%; left: auto; top: 70%; bottom: auto; rotate: 8deg; }
  .o-ordi { right: 26%; left: auto; top: auto; bottom: 2%; rotate: 10deg; }
}

/* Tapis : disposition choisie par Iona */
@media (min-width: 861px) {
  .tapis-objets > .drag { right: auto; bottom: auto; }
  .o-lunettes { left: 27%; top: 40px; width: clamp(240px, 22vw, 330px); rotate: -22deg; }
  .o-carnet { left: -1%; top: 376px; width: clamp(200px, 18vw, 280px); rotate: -8deg; }
  .o-stylo { left: 11%; top: 420px; width: clamp(56px, 4.8vw, 72px); rotate: 78deg; }
  .o-ordi { left: 78%; top: 340px; width: clamp(120px, 10vw, 150px); rotate: 14deg; }
  .o-tasse { left: 83.5%; top: 300px; width: clamp(100px, 8vw, 120px); rotate: -6deg; }
  .o-papiers { left: 93%; top: 196px; width: clamp(200px, 17vw, 260px); rotate: 6deg; }
  .o-postits { left: 89.5%; top: 515px; width: clamp(120px, 10vw, 155px); }
  .o-postit { left: 84%; top: 720px; width: clamp(130px, 12vw, 180px); rotate: 8deg; }
}

/* Photo pliée (page À propos) */
.tapis-photo--plie { background: none; padding: 0; box-shadow: none; rotate: -2deg; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4)); }
.tapis-photo--plie img { aspect-ratio: 1; border-radius: 0; object-fit: contain; }
.tapis-photo--plie .scotch--photo { top: -14px; }
.tapis-photo--plie img { aspect-ratio: auto; height: auto; }
.tapis-photo--plie { rotate: -3deg; }
.tapis-feuille .feuille-fin { font-family: var(--f-script); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; color: var(--awning-ink); }
.tapis-feuille .feuille-fin, .tapis-feuille .feuille-script { font-family: var(--f-script); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; color: var(--navy); }

/* Sticker « Coming soon » (onglet La boutique) */
.sticker-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pink);
  color: var(--navy);
  box-shadow: 0 0 0 calc(4px * var(--is)) var(--cream), 0 6px 10px rgba(5, 29, 81, .28);
  line-height: .9;
  text-align: center;
}
.sticker-soon span:first-child { font-family: var(--f-script); font-size: calc(30 * var(--u) * var(--is)); }
.sticker-soon span:last-child { font-family: var(--f-display); font-size: calc(34 * var(--u) * var(--is)); text-transform: uppercase; letter-spacing: -0.01em; }
.obj[data-for="boutique"] { z-index: 7; }
@media (max-width: 720px) {
  .obj[data-for="boutique"].obj-img { --dx: 40 !important; --rise: 233 !important; }
  .sticker-soon { --dx: 220 !important; --rise: 263 !important; }
}
.obj[data-for="boutique"].obj-img { z-index: 5; }
.obj[data-for="boutique"].obj-img { z-index: 7; }
.obj[data-for="boutique"].sticker-soon { z-index: 7; }

/* Au repos, les objets dépassent à peine de leur pochette */
.obj[data-for="univers"] { --rest: 21; }
.obj[data-for="journal"] { --rest: 63; }
.obj[data-for="boutique"] { --rest: 105; }
@media (max-width: 720px) {
  .obj[data-for="univers"] { --rest: 13; }
  .obj[data-for="journal"] { --rest: 53; }
  .obj[data-for="boutique"] { --rest: 93; }
}
.obj[data-for="da"] { --rest: 147; z-index: 7; }
@media (max-width: 720px) {
  .obj[data-for="da"] { --rest: 133; --dx: 0 !important; --rise: 115 !important; }
}
.obj[data-for="lieux"] { --rest: 151; z-index: 11; }
@media (max-width: 720px) {
  .obj[data-for="lieux"] { --rest: 131; }
  .obj[data-for="lieux"][src*="devanture"] { --dx: -20 !important; --rise: 177 !important; }
  .obj[data-for="lieux"][src*="pinceau"] { --dx: 155 !important; --rise: 75 !important; }
}
.obj[data-for="lieux"] { z-index: 9; }
.o-appareil { width: clamp(160px, 15vw, 230px); left: 86%; top: 62%; rotate: 10deg; }
.o-pinceau { width: clamp(170px, 15vw, 230px); left: 2%; top: 74%; rotate: -24deg; }
@media (min-width: 861px) {
  .o-appareil { left: 88%; top: 520px; }
  .o-pinceau { left: 4%; top: 700px; }
}
@media (max-width: 860px) {
  .o-appareil { width: 120px; left: auto; right: 2%; top: auto; bottom: 4%; }
  .o-pinceau { width: 120px; left: 30%; top: auto; bottom: 2%; }
}

/* Le stylo 4 couleurs qui écrit sur la photo */
.tapis-photo--plie { position: relative; }
.photo-dessin { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.photo-dessin.is-active { pointer-events: auto; touch-action: none; }
.tapis-photo--plie:has(.photo-dessin.is-active) { outline: 3px dashed #E3E52A; outline-offset: 10px; }
.o-stylo.is-en-main { opacity: .25; }
.stylo-barre {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 56px;
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--cream);
  border: 0.6px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink), 0 10px 20px rgba(0, 0, 0, .25);
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}
.stylo-barre-titre { font-family: var(--f-script); font-size: 22px; color: var(--navy); padding-inline: 6px; }
.stylo-couleurs { display: flex; gap: 8px; }
.encre { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--cream); background: var(--c); box-shadow: 0 0 0 1px var(--ink); cursor: pointer; padding: 0; }
.encre[aria-checked="true"] { box-shadow: 0 0 0 2.5px var(--ink); transform: scale(1.12); }
.encre:focus-visible, .stylo-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.stylo-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0.6px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--f-display); font-size: 16px; text-transform: uppercase; cursor: pointer; }
.stylo-btn--ranger { background: var(--navy); color: var(--cream); }
.o-stylo.is-en-main { opacity: 0; pointer-events: none; }
.tapis.stylo-on, .tapis.stylo-on * { cursor: none !important; }
.tapis.stylo-on .stylo-barre, .tapis.stylo-on .stylo-barre * { cursor: pointer !important; }
.stylo-en-main {
  position: fixed;
  z-index: 200;
  width: 58px;
  height: auto;
  max-width: none;
  pointer-events: none;
  transform: translate(-50%, -100%) rotate(28deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(10px 14px 8px rgba(0, 0, 0, .35));
  transition: transform .08s ease;
}
.stylo-en-main.is-ecrit { transform: translate(-50%, -100%) rotate(28deg) scale(.96); filter: drop-shadow(5px 7px 4px rgba(0, 0, 0, .35)); }
@media (min-width: 861px) {
  .o-ordi { width: clamp(170px, 14vw, 220px); left: 75%; top: 330px; }
  .o-tasse { width: clamp(140px, 11vw, 170px); left: 82%; top: 285px; }
  .o-papiers { width: clamp(270px, 22vw, 340px); left: 91%; top: 170px; }
}
@media (min-width: 861px) {
  .o-ordi { left: 78%; top: 360px; }
  .o-tasse { left: 84%; top: 300px; }
}
.valeur-num { font-family: var(--f-script); font-size: 30px; line-height: 1; color: var(--ink); }
.valeur h3 { text-wrap: balance; }
/* Valeurs en cartes festonnées (À propos) */
.porte--valeur { aspect-ratio: auto; min-height: 560px; padding: 70px 9% 80px; justify-content: center; }
.porte-num { font-family: var(--f-script); font-size: clamp(48px, 5vw, 68px); line-height: 1; margin-bottom: 6%; color: var(--ink); }
.porte--valeur:hover { transform: translateY(-8px) rotate(var(--tilt, -1.5deg)); }
@media (max-width: 900px) { .porte--valeur { min-height: 0; padding: 80px 10% 90px; } }

/* Journal : bientôt */
.soon-visuel--journal .soon-objet { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 10px 14px rgba(5, 29, 81, .28)); }
.soon-papiers { width: 52%; left: 30%; top: 4%; rotate: 7deg; }
.soon-carnet { width: 42%; left: 4%; top: 18%; rotate: -12deg; }
.soon-lunettes { width: 58%; left: 22%; top: 58%; rotate: -10deg; z-index: 2; }
.soon-visuel--journal .soon-tampon { left: auto; right: 4%; bottom: 8%; }
.journal-teaser { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.journal-teaser-visuel { position: relative; max-width: 300px; width: 100%; justify-self: center; }
.journal-teaser-visuel img { width: 100%; height: auto; rotate: 6deg; filter: drop-shadow(0 10px 14px rgba(5, 29, 81, .25)); }
.journal-teaser-visuel .soon-tampon { left: -24px; bottom: -10px; }
@media (max-width: 860px) { .journal-teaser { grid-template-columns: minmax(0, 1fr); } .journal-teaser-visuel { max-width: 220px; } }

.obj[data-for="lieux"] { z-index: 9; }

/* =========== Pages projet : planche de marque =========== */
.charte { position: relative; z-index: 60; background: #FFFDF7; color: #1C1C1C; }
.charte-hero { position: relative; min-height: clamp(320px, 38vw, 520px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 120px clamp(16px, 4vw, 48px) 72px; box-sizing: border-box; }
.retour--hero { position: absolute; top: 90px; left: clamp(16px, 4vw, 48px); }
.charte-nom { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(56px, 9vw, 140px); line-height: .92; letter-spacing: -0.02em; text-wrap: balance; }
.charte-tag { margin: 0; font-family: var(--f-text); font-size: clamp(13px, 1.2vw, 16px); letter-spacing: .32em; text-transform: uppercase; }
.charte-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.charte-logo { position: relative; min-height: clamp(220px, 24vw, 340px); display: grid; place-items: center; padding: 32px; box-sizing: border-box; }
.charte-logo strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); line-height: .95; text-align: center; letter-spacing: -0.01em; }
.charte-logo-ph { position: absolute; top: 18px; left: 20px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.charte-bloc { max-width: 1120px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(16px, 4.5vw, 64px) 0; box-sizing: content-box; }
.charte-label { margin: 0 0 clamp(28px, 3vw, 44px); text-align: center; font-family: var(--f-text); font-weight: 500; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; }
.charte-typos, .charte-duo { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.charte-sep { width: 1px; align-self: stretch; background: rgba(28, 28, 28, .25); }
.charte-typo { display: flex; flex-direction: column; gap: 10px; }
.aa { font-size: clamp(56px, 6vw, 84px); line-height: 1; }
.aa--titre { font-family: var(--f-display); }
.aa--texte { font-family: var(--f-text); }
.charte-typo p { margin: 0; font-size: 14px; letter-spacing: .08em; line-height: 1.5; word-break: break-all; }
.charte-typo:first-child p { font-family: var(--f-display); font-size: 16px; }
.charte-note { font-size: 13px; color: #6B6B66; }
.charte-palette { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pastille { width: clamp(64px, 6.4vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 10px; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.charte-elements { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.charte-elements span { width: clamp(80px, 8vw, 110px); aspect-ratio: 1; border: 1px dashed rgba(28, 28, 28, .35); border-radius: 14px; display: grid; place-items: center; font-size: 12px; color: #6B6B66; }
.charte-mood { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 12px; }
.charte-mood > * { width: 100%; height: 100%; border-radius: 0; box-sizing: border-box; }
.charte-mood img { object-fit: cover; display: block; }
.m-a { grid-row: span 2; }
.m-b { grid-row: span 1; }
.m-c { grid-row: span 2; }
.m-d { grid-row: span 2; }
.m-e { grid-row: span 1; }
.m-f { grid-row: span 1; }
.charte-histoire { margin-top: clamp(72px, 9vw, 120px); padding-block: clamp(64px, 8vw, 112px); background: var(--c1); }
.charte-histoire-inner { max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4.5vw, 64px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.charte-histoire .heading .script { color: var(--c3); }
.charte-histoire .heading .display { color: var(--c5); }
.charte-histoire .prose h3 { margin: 0 0 12px; font-family: var(--f-script); font-weight: 400; font-size: 30px; color: var(--c2); }
.charte-histoire .fiche dt { color: var(--c2); }
.charte-citation { margin: 8px 0 0; font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; color: var(--c5); text-wrap: balance; }
.charte-citation cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--f-script); font-size: 24px; color: var(--c3); }
@media (max-width: 760px) {
  .charte-logos { grid-template-columns: minmax(0, 1fr); }
  .charte-typos, .charte-duo { grid-template-columns: minmax(0, 1fr); }
  .charte-sep { width: 100%; height: 1px; }
  .charte-mood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retour--hero { top: 70px; }
}
.pastille { width: clamp(52px, 4.6vw, 70px); font-size: 9px; }
.charte-palette { gap: 8px; flex-wrap: nowrap; }
@media (max-width: 760px) { .charte-palette { flex-wrap: wrap; } }

/* Histoire du projet : neutre, dans l'esprit de la planche, sans la DA ioio */
.charte-histoire .heading { gap: 10px; }
.charte-histoire .heading .script { font-family: var(--f-text); font-weight: 500; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--c5); opacity: .7; }
.charte-histoire .heading .display { font-family: var(--f-text); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.02em; text-transform: none; color: var(--c5); }
.charte-histoire .fiche { background: none; border: 0; border-top: 1px solid rgba(28, 28, 28, .25); border-bottom: 1px solid rgba(28, 28, 28, .25); border-radius: 0; box-shadow: none; padding: 20px 0; gap: 14px 56px; }
.charte-histoire .fiche dt { font-family: var(--f-text); font-weight: 500; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--c5); opacity: .6; }
.charte-histoire .fiche dd { font-family: var(--f-text); font-weight: 500; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--c5); }
.charte-histoire .prose h3 { font-family: var(--f-text); font-weight: 500; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--c5); opacity: .7; margin-bottom: 14px; }
.charte-histoire .prose p { color: var(--c5); font-size: 17px; }
.charte-citation { font-family: var(--f-text); font-weight: 400; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; letter-spacing: -0.01em; text-transform: none; color: var(--c5); border-left: 2px solid var(--c2); padding-left: clamp(18px, 2vw, 28px); }
.charte-citation cite { font-family: var(--f-text); font-style: normal; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--c5); opacity: .65; }

/* ---------- Planche Carafon ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.logo-masque { display: block; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo-masque--principal { width: min(78%, 680px); aspect-ratio: 1200 / 320; }
.logo-masque--secondaire { width: min(46%, 260px); aspect-ratio: 600 / 408; }
.charte-hero .logo-masque--principal { width: min(86vw, 760px); }
.charte-logo .logo-masque--principal { width: min(80%, 420px); }
.charte-declinaisons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.charte-declinaisons span { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.charte-declinaisons .logo-masque { width: 70%; aspect-ratio: 1200 / 320; }
.charte-palette--large { flex-wrap: wrap; gap: 14px; }
.pastille--nom { width: clamp(108px, 10vw, 136px); flex-direction: column; gap: 4px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; padding: 10px; box-sizing: border-box; }
.pastille--nom b { font-family: 'Dela Gothic One', var(--f-display); font-weight: 400; font-size: 12px; line-height: 1.1; text-transform: uppercase; }
.charte-motifs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.charte-motifs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.charte-mood--carafon { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
.charte-mood--carafon img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.charte-mood--carafon .cm-a { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.charte--carafon .charte-typo .charte-note b { color: #651B32; }
@media (max-width: 760px) {
  .charte-declinaisons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-motifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-mood--carafon { grid-template-columns: minmax(0, 1fr); }
}

/* =========== Page Studio : aplats de couleur =========== */
.aplat { position: relative; z-index: 60; padding-block: clamp(72px, 9vw, 128px); }
.aplat--olive { background: var(--olive); color: var(--olive-ink); }
.aplat--cream { background: var(--grid-bg); color: var(--ink); }
.vague { position: relative; z-index: 61; height: 40px; margin-top: -1px; background: var(--vc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 0H240V14C210 14 200 38 180 38S150 14 120 14 90 38 60 38 30 14 0 14Z'/%3E%3C/svg%3E") 0 0 / 240px 40px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 0H240V14C210 14 200 38 180 38S150 14 120 14 90 38 60 38 30 14 0 14Z'/%3E%3C/svg%3E") 0 0 / 240px 40px repeat-x; margin-bottom: -40px; }
.studio-hero { padding-block: clamp(110px, 12vw, 160px) clamp(56px, 7vw, 96px); }
.studio-hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.studio-hero .heading .script { color: var(--cream); }
.studio-hero .heading .display { color: var(--cream); font-size: clamp(44px, 6vw, 88px); }
.studio-hero-texte { display: flex; flex-direction: column; gap: 24px; }
.studio-hero-texte p { margin: 0; max-width: 32em; font-size: 18px; line-height: 1.55; color: var(--cream); }
.btn--cream-olive { background: var(--cream); }
.studio-hero-photo { position: relative; }
.studio-hero-photo img:first-child { width: 100%; height: auto; rotate: 3deg; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.studio-hero-pinceau { position: absolute; width: 34%; height: auto; right: -6%; bottom: -12%; rotate: 18deg; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .3)); }
.titre-geant { margin: 0; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: clamp(48px, 8vw, 120px); line-height: .95; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.sous-titre { margin: 18px auto 0; text-align: center; max-width: 34em; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.frise { list-style: none; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0; max-width: 980px; position: relative; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.frise::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); translate: -50% 0; }
.jalon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); align-items: center; }
.jalon-num { grid-column: 2; justify-self: center; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: var(--ink); font-family: var(--f-display); font-size: 26px; z-index: 1; }
.jalon:nth-child(1) { --tone: var(--pink); } .jalon:nth-child(2) { --tone: var(--sun); } .jalon:nth-child(3) { --tone: var(--sky); } .jalon:nth-child(4) { --tone: var(--olive); }
.jalon-texte { grid-column: 3; grid-row: 1; padding-left: 20px; }
.jalon:nth-child(even) .jalon-texte { grid-column: 1; text-align: right; padding: 0 20px 0 0; }
.jalon h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.jalon-note { display: block; margin: 4px 0 10px; font-family: var(--f-script); font-size: 22px; color: var(--awning-ink); }
.jalon p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.bandeau-nuit { position: relative; z-index: 60; background: var(--ink); color: var(--sun); height: 64px; display: flex; align-items: center; overflow: hidden; }
.bandeau-nuit ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.bandeau-nuit li { white-space: nowrap; font-family: var(--f-script); font-size: 28px; padding-inline: 18px; }
.bandeau-nuit li::after { content: "✱"; font-family: var(--f-display); font-size: 20px; margin-left: 36px; color: var(--pink); }
.aplat-offres { position: relative; z-index: 60; display: flex; flex-direction: column; padding-top: clamp(40px, 5vw, 64px); background: var(--grid-bg); }
.aplat-offre { scroll-margin-top: 110px; }
.aplat-offre-inner { max-width: 1120px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(16px, 4.5vw, 64px); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.aplat-offre img { width: 100%; max-width: 200px; height: auto; justify-self: center; }
.aplat-offre h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 400; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.02em; }
.aplat-pour { margin: 0 0 18px; font-size: 18px; }
.aplat-offre ul { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.aplat-offre li { padding: 8px 14px; border-radius: 999px; background: var(--cream); border: 0.6px solid var(--ink); font-size: 15px; }
@media (max-width: 860px) {
  .studio-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .studio-hero-photo { max-width: 380px; justify-self: center; }
  .frise::before { left: 36px; }
  .jalon { grid-template-columns: 72px minmax(0, 1fr); }
  .jalon-num { grid-column: 1; }
  .jalon-texte, .jalon:nth-child(even) .jalon-texte { grid-column: 2; text-align: left; padding: 0 0 0 16px; }
  .aplat-offre-inner { grid-template-columns: minmax(0, 1fr); }
  .aplat-offre img { max-width: 120px; }
}
.bandeau-nuit .marquee-track { animation: marquee 40s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bandeau-nuit .marquee-track { animation: none; } }

/* Offres en cartes (page Studio) */
.aplat--nuit { background: var(--navy); color: var(--cream); scroll-margin-top: 90px; }
.titre-geant--clair { color: var(--cream); }
.sous-titre--clair { color: var(--sky); }
.offres-cartes { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.offre-carte { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; border: 2px solid var(--cream); color: var(--cream); scroll-margin-top: 110px; }
.offre-carte--pleine { background: var(--cream); color: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.offre-carte-ico { position: absolute; top: 18px; right: 18px; width: 64px; height: auto; rotate: 8deg; }
.offre-carte-pour { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; padding-right: 70px; }
.offre-carte h3 { margin: 10px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1; letter-spacing: -0.01em; }
.offre-carte-prix { margin: 14px 0 0; font-family: var(--f-script); font-size: clamp(36px, 3.4vw, 46px); line-height: 1.1; }
.offre-carte-accroche { margin: 16px 0 14px; font-size: 16px; line-height: 1.5; }
.offre-carte ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.offre-carte ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.offre-carte ul svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.offre-carte-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; border: 1.5px solid currentColor; font-family: var(--f-display); font-size: 17px; text-transform: uppercase; text-decoration: none; color: inherit; transition: transform .15s ease; }
.offre-carte--pleine .offre-carte-btn { background: var(--pink); border-color: var(--ink); color: var(--ink); }
.offre-carte-btn:hover { transform: translateY(-2px); }
.offre-carte-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.offres-note { margin: 32px 0 0; text-align: center; color: var(--sky); font-size: 16px; }
.offres-note a { color: var(--cream); }
@media (max-width: 900px) { .offres-cartes { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; } }
@media (min-width:901px){ .offre-carte h3{ min-height:2.1em; display:flex; align-items:flex-end; } .offre-carte-pour{ min-height:2.6em; padding-right:56px; } }
.aplat--vert { background: #E3E4B5; color: var(--ink); scroll-margin-top: 90px; }
.aplat--vert .sous-titre { color: var(--olive-ink); }
.aplat--vert .offres-note { color: var(--olive-ink); }
.aplat--vert .offres-note a { color: var(--ink); }
.aplat--vert .offre-carte--pleine { background:#fff; }
@media (min-width:901px){ .offre-carte-pour{ min-height:0; } }
.aplat--vert { background: var(--olive); } .aplat--vert .titre-geant{color:var(--olive-ink)} .aplat--vert .sous-titre, .aplat--vert .offres-note{color:var(--olive-ink)}
/* Calendly */
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn--ligne{background:transparent;color:var(--navy);border:2px solid var(--navy);box-shadow:none}
.btn--ligne:hover{background:var(--navy);color:var(--cream)}
.rdv{scroll-margin-top:90px}
.rdv .rdv-titre{color:var(--olive-ink)} .rdv .rdv-sous{color:var(--olive-ink)}
.rdv-cadre{margin:clamp(32px,4vw,48px) auto 0;max-width:1000px;background:#fff;border:2px solid var(--ink);border-radius:22px;box-shadow:0 4px 0 var(--ink);overflow:hidden}
.rdv-cadre iframe{display:block;width:100%;height:700px;border:0}
.rdv-lien{text-align:center;margin-top:18px;color:var(--olive-ink)} .rdv-lien a{color:var(--ink)}
@media (max-width:700px){.rdv-cadre iframe{height:900px}}
/* FAQ pilules */
.faq-rose{background:var(--pink);color:var(--ink)}
.faq-rose-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.faq-rose-titre{margin:0;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(44px,5.4vw,84px);line-height:.95;font-weight:400}
.faq-rose-titre span{display:block} .faq-rose-titre span:first-child{color:var(--cream)}
.faq-pilules{display:flex;flex-direction:column;gap:12px}
.faq-pilules details{background:var(--cream);border:2px solid var(--ink);border-radius:30px;text-align:center;transition:border-radius .2s}
.faq-pilules details[open]{border-radius:26px}
.faq-pilules summary{list-style:none;cursor:pointer;padding:15px 24px;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(16px,1.4vw,20px);letter-spacing:.01em}
.faq-pilules summary::-webkit-details-marker{display:none}
.faq-pilules summary:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:30px}
.faq-pilules details p{margin:0;padding:0 clamp(20px,4vw,48px) 18px;font-size:15px;line-height:1.5}
@media (max-width:900px){.faq-rose-inner{grid-template-columns:minmax(0,1fr)}.faq-rose-titre{text-align:center}}
@media (min-width:901px){.faq-rose-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.faq-rose-titre span{white-space:nowrap}.faq-rose-titre{font-size:clamp(44px,4.6vw,76px)}}
.footer .footer-col a.footer-cta { color: var(--olive-ink); background: var(--olive); border-color: var(--olive-ink); text-decoration: none; margin-bottom: 6px; min-width: 0; }
.footer .footer-col a.footer-cta:hover { text-decoration: none; }
/* ===== Pongo ===== */
.charte-hero--pongo { background: radial-gradient(120% 90% at 30% 10%, #B493FF 0%, #8A5BD6 38%, #550040 78%, #25041D 100%); isolation: isolate; }
.charte-hero--pongo::after { content: ""; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: overlay; opacity: .55; pointer-events: none; z-index: -1; }
.logo-masque--pongo { width: min(80vw, 640px); aspect-ratio: 3.37; }
.charte-logo .logo-masque--pongo-symbole { width: min(36%, 200px); aspect-ratio: 1.1227; }
.charte-logo .pongo-logo { width: min(78%, 440px); height: auto; display: block; }
.charte--pongo .charte-declinaisons .logo-masque { width: 62%; aspect-ratio: 3.37; }
.pongo-phrase { margin: clamp(28px, 4vw, 48px) 0 0; font-weight: 700; font-size: clamp(30px, 4.6vw, 70px); line-height: 1.01; letter-spacing: -.04em; color: #25041D; }
.pongo-grain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pongo-grain img, .pongo-photos img, .pongo-site img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pongo-grain img { aspect-ratio: 1; }
.pongo-grain .pongo-grain-large { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.pongo-photos { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: 16 / 9; }
.pongo-photos img:nth-child(1) { grid-row: 1 / 3; }
.pongo-photos img:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
.pongo-site { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pongo-site img { height: auto; border: 1px solid #E6DDD0; }
.pongo-site .ps-a { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .pongo-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .pongo-photos img, .pongo-photos img:nth-child(1), .pongo-photos img:nth-child(3) { grid-row: auto; grid-column: auto; aspect-ratio: 1; }
  .pongo-site { grid-template-columns: minmax(0, 1fr); }
}
/* Pages projets : ni pois, ni grain */
.page.page--projet { background-image: none; --grain: none; }
.page.page--projet::after { display: none; }
/* ===== Lavernose ===== */
.charte-hero--lavernose .lav-hero-logo { display: block; width: min(86vw, 900px); height: auto; mix-blend-mode: multiply; }
.charte-logo .lav-logo { width: min(80%, 460px); height: auto; display: block; }
.charte-logo .lav-logo--principal { width: auto; max-height: min(300px, 26vw); }
.lav-mascotte { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; background: #FFFDE0; padding: clamp(24px, 4vw, 56px); color: #14542F; }
.lav-mascotte img { width: 100%; max-width: 360px; height: auto; display: block; justify-self: center; }
.lav-mascotte-texte p { margin: 0 0 18px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; }
.lav-mascotte-texte b { display: block; }
.lav-plein { display: block; width: 100%; height: auto; }
.lav-typo { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: center; color: #14542F; }
.lav-typo-nom { display: block; font-family: 'Unbounded', var(--f-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 64px); line-height: 1; letter-spacing: -.03em; margin-bottom: 14px; }
.lav-typo-alpha { margin: 0; font-family: 'Unbounded', var(--f-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.02em; }
.lav-mood { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lav-mood img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lav-mood .lm-a { grid-column: 1 / 3; aspect-ratio: 16 / 9; }
.lav-mood .lm-b { grid-column: 3; grid-row: 1 / 3; }
.lav-mood .lm-c, .lav-mood .lm-d { aspect-ratio: 4 / 3; }
.lav-mood .lm-e, .lav-mood .lm-f { aspect-ratio: 4 / 3; }
.lav-mood .lm-e { grid-column: 1 / 2; } .lav-mood .lm-f { grid-column: 2 / 4; aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) {
  .lav-mascotte, .lav-typo { grid-template-columns: minmax(0, 1fr); }
  .lav-mood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lav-mood img, .lav-mood .lm-a, .lav-mood .lm-b, .lav-mood .lm-e, .lav-mood .lm-f { grid-column: auto; grid-row: auto; aspect-ratio: 1; height: auto; }
  .lav-mood .lm-a { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
.charte-hero--lavernose .lav-hero-logo { mix-blend-mode: normal; }
.lav-typo-nom, .lav-typo-alpha { font-family: 'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif; }
.lav-mood .lm-f { aspect-ratio: 16 / 10; height: auto; }
.lav-mood .lm-e { aspect-ratio: auto; height: 100%; object-position: 72% 55%; }
/* ===== Kafkaf ===== */
.kk-hero-logo { display: block; width: min(86vw, 980px); height: auto; }
.charte-logo .kk-logo { width: min(84%, 520px); height: auto; display: block; }
.charte-logo .kk-logo--principal { width: auto; max-width: 84%; max-height: min(280px, 24vw); }
.kk-symbole { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; background: #FFFDE0; padding: clamp(24px, 4vw, 56px); color: #2C39EC; }
.kk-palmier { width: 100%; max-width: 300px; height: auto; display: block; justify-self: center; }
.kk-symbole-texte p { margin: 0 0 16px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; }
.kk-symbole-texte b { display: block; }
.kk-symbole-texte img { width: min(100%, 420px); height: auto; display: block; margin-top: 12px; }
.kk-plein { display: block; width: 100%; height: auto; }
.kk-typos { display: grid; gap: 12px; }
.kk-typo { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 56px); align-items: center; background: #FFFDE0; color: #2C39EC; padding: clamp(20px, 3vw, 40px); }
.kk-typo--ciel { background: #A2CDFF; }
.kk-typo img { width: 100%; max-width: 640px; height: auto; display: block; justify-self: end; }
.kk-typo--ciel img { max-width: 420px; }
.kk-typo .charte-note { color: #2C39EC; opacity: .8; }
.kk-typo-nom { display: block; font-family: 'Arial Black', var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; letter-spacing: .02em; margin-bottom: 12px; }
.kk-suisse { margin: 0; font-family: 'Suisse Int\'l', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.02em; }
.kk-mood { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kk-mood img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kk-mood .kk-large { grid-column: span 2; grid-row: span 2; height: 100%; aspect-ratio: auto; }
@media (max-width: 760px) {
  .kk-symbole, .kk-typo { grid-template-columns: minmax(0, 1fr); }
  .kk-typo img { justify-self: start; }
  .kk-mood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-mood .kk-large { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; height: auto; }
}
.kk-mood .kk-enseigne { object-position: 40% 55%; }

/* Frise : des fleurs à la place des ronds */
.jalon-num { width: 92px; height: 92px; border-radius: 0; -webkit-mask: var(--fleur) center / contain no-repeat; mask: var(--fleur) center / contain no-repeat; --fleur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='80.00' cy='50.00' r='19'/%3E%3Ccircle cx='71.21' cy='71.21' r='19'/%3E%3Ccircle cx='50.00' cy='80.00' r='19'/%3E%3Ccircle cx='28.79' cy='71.21' r='19'/%3E%3Ccircle cx='20.00' cy='50.00' r='19'/%3E%3Ccircle cx='28.79' cy='28.79' r='19'/%3E%3Ccircle cx='50.00' cy='20.00' r='19'/%3E%3Ccircle cx='71.21' cy='28.79' r='19'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3C/svg%3E"); transition: rotate .4s ease; }
.jalon:nth-child(even) .jalon-num { --fleur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='78.00' cy='50.00' r='22'/%3E%3Ccircle cx='64.00' cy='74.25' r='22'/%3E%3Ccircle cx='36.00' cy='74.25' r='22'/%3E%3Ccircle cx='22.00' cy='50.00' r='22'/%3E%3Ccircle cx='36.00' cy='25.75' r='22'/%3E%3Ccircle cx='64.00' cy='25.75' r='22'/%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3C/svg%3E"); }
.jalon:nth-child(2) .jalon-num { rotate: 12deg; } .jalon:nth-child(3) .jalon-num { rotate: -8deg; } .jalon:nth-child(4) .jalon-num { rotate: 20deg; }
.jalon:hover .jalon-num { rotate: 45deg; }
.jalon-num { font-size: 28px; }
@media (max-width: 860px) { .jalon { grid-template-columns: 84px minmax(0, 1fr); } .jalon-num { width: 80px; height: 80px; } .frise::before { left: 42px; } }
/* Le chiffre reste droit, seule la fleur tourne */
.jalon-num { -webkit-mask: none; mask: none; background: none; rotate: none !important; position: relative; isolation: isolate; }
.jalon-num::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone); -webkit-mask: var(--fleur) center / contain no-repeat; mask: var(--fleur) center / contain no-repeat; transition: rotate .5s ease; }
.jalon:nth-child(2) .jalon-num::before { rotate: 12deg; } .jalon:nth-child(3) .jalon-num::before { rotate: -8deg; } .jalon:nth-child(4) .jalon-num::before { rotate: 20deg; }
.jalon:hover .jalon-num::before { rotate: 60deg; }
@media (prefers-reduced-motion: reduce) { .jalon-num::before { transition: none; } }
/* Mobile : teaser boutique empilé */
@media (max-width: 900px) {
  .drop { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .drop-visuel { max-width: 300px; justify-self: center; }
  .drop-texte { align-items: flex-start; }
}
/* ===== Menu burger (mobile) ===== */
.burger { position: relative; display: block; width: 24px; height: 18px; }
.burger i { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7.75px; } .burger i:nth-child(3) { top: 15.5px; }
.awning[data-open] .burger i:nth-child(1) { top: 7.75px; transform: rotate(45deg); }
.awning[data-open] .burger i:nth-child(2) { opacity: 0; }
.awning[data-open] .burger i:nth-child(3) { top: 7.75px; transform: rotate(-45deg); }
@media (max-width: 860px) {
  .menu-toggle { position: relative; z-index: 2; width: 52px; min-height: 48px; padding: 0; justify-content: center; }
  .awning-inner { flex-wrap: nowrap; position: relative; }
  .logo { position: relative; z-index: 2; }
  .menu {
    display: flex; position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    padding: 110px 24px 48px; margin: 0;
    background: var(--pink); background-image: var(--grain); background-size: 1813px auto; background-blend-mode: hard-light;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    overflow-y: auto;
  }
  .awning[data-open] .menu { display: flex; opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
  .menu li { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
  .awning[data-open] .menu li { opacity: 1; transform: none; }
  .awning[data-open] .menu li:nth-child(2) { transition-delay: .04s; } .awning[data-open] .menu li:nth-child(3) { transition-delay: .08s; }
  .awning[data-open] .menu li:nth-child(4) { transition-delay: .12s; } .awning[data-open] .menu li:nth-child(5) { transition-delay: .16s; }
  .awning[data-open] .menu li:nth-child(6) { transition-delay: .2s; }
  .menu a { font-size: clamp(36px, 11vw, 52px); line-height: 1.15; padding: 4px 0; }
  .menu a[aria-current="page"] { color: var(--awning-ink); }
  .menu .menu-cta { margin-top: 22px; font-size: 20px; min-height: 52px; padding: 0 22px; }
  .menu { overscroll-behavior: contain; }
  html.menu-ouvert .awning-edge { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .menu, .menu li, .burger i { transition: none !important; } }
.awning { animation-fill-mode: backwards; }
/* Burger seul, sans bouton blanc */
@media (max-width: 860px) {
  .menu-toggle { background: transparent; border: 0; box-shadow: none; color: var(--ink); width: 48px; }
  .menu-toggle:hover, .menu-toggle:active { background: transparent; box-shadow: none; transform: none; }
  .burger { width: 28px; height: 20px; }
  .burger i { height: 3px; }
  .burger i:nth-child(2) { top: 8.5px; } .burger i:nth-child(3) { top: 17px; }
  .awning[data-open] .burger i:nth-child(1), .awning[data-open] .burger i:nth-child(3) { top: 8.5px; }
}

/* Intercalaires : même taille de typo partout, avec de la marge */
.tab { padding-inline: calc(28 * var(--u)); }
.tab span { font-size: 1em !important; overflow: hidden; text-overflow: ellipsis; }
.f-univers, .f-journal, .f-boutique, .f-da { --fs: 19; }
.f-lieux { --fs: 19; }
@media (max-width: 720px) {
  .tab { padding-inline: calc(14 * var(--u)); padding-top: calc(12 * var(--u)); }
  .f-univers, .f-journal, .f-boutique, .f-da, .f-lieux { --fs: 14.5; --th: 46; }
  /* Sur mobile, les objets restent rangés : ils ne sortent que quand on touche l'onglet, pour que les noms restent lisibles */
  .obj { opacity: 0; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .25s ease; }
  .dossier[data-peek="univers"]  .obj[data-for="univers"],
  .dossier[data-peek="journal"]  .obj[data-for="journal"],
  .dossier[data-peek="boutique"] .obj[data-for="boutique"],
  .dossier[data-peek="da"]       .obj[data-for="da"],
  .dossier[data-peek="lieux"]    .obj[data-for="lieux"] { opacity: 1; z-index: 20; }
}
@media (max-width: 720px) {
  .f-univers  { --tx: 12;  --tw: 200; }
  .f-journal  { --tx: 188; --tw: 200; }
  .f-boutique { --tx: 18;  --tw: 200; }
  .f-da       { --tx: 182; --tw: 206; }
  .f-lieux    { --tx: 100; --tw: 200; }
  .tab span { overflow: visible; }
}
/* ===== Projets : 3 familles ===== */
.pcard-badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--f-display); font-size: 15px; text-transform: uppercase; letter-spacing: -0.01em; box-shadow: 0 2px 0 var(--ink); }
.pcard-badge--sun { background: var(--sun); }
.charte-perso { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.85); color: #1C1C1C; font-family: var(--f-text); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* ===== Studio : encart peinture à la main ===== */
.peinture { background: var(--navy); color: var(--cream); position: relative; overflow: hidden; scroll-margin-top: 90px; }
.peinture-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.peinture-visuel { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.peinture-photo { display: block; width: 100%; height: auto; background: #fff; padding: 12px 12px 44px; box-sizing: border-box; rotate: -3deg; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.peinture-pinceau { position: absolute; right: -8%; bottom: -10%; width: 42%; height: auto; rotate: 18deg; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.peinture-tampon { position: absolute; top: -18px; left: -14px; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: var(--sun); color: var(--navy); font-family: var(--f-script); font-size: 28px; rotate: -12deg; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.peinture-script { margin: 0; font-family: var(--f-script); font-size: clamp(26px, 2.6vw, 34px); color: var(--sun); }
.peinture-titre { margin: 6px 0 22px; font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 5.6vw, 84px); line-height: .95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--cream); }
.peinture-texte > p { margin: 0 0 22px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: #D8E2FA; max-width: 34em; }
.peinture-etapes { list-style: none; counter-reset: pe; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.peinture-etapes li { counter-increment: pe; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; font-size: 16px; line-height: 1.5; color: #D8E2FA; }
.peinture-etapes li::before { content: counter(pe, decimal-leading-zero); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: var(--ink); font-family: var(--f-display); font-size: 18px; }
.peinture-etapes b { font-family: var(--f-display); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--cream); letter-spacing: -0.01em; }
.peinture .peinture-pourquoi { font-family: var(--f-script); font-size: clamp(22px, 2vw, 28px); color: var(--pink); line-height: 1.3; }
.peinture .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--sun { background: var(--sun); color: var(--ink); border-color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
@media (max-width: 860px) {
  .peinture-inner { grid-template-columns: minmax(0, 1fr); }
  .peinture-visuel { max-width: 340px; margin-bottom: 20px; }
  .peinture-tampon { width: 84px; height: 84px; font-size: 22px; }
}
/* Accueil : un peu d'air sous le store */
.intro { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 720px) { .intro { padding-top: 36px; } }
/* Tapis mobile : objets éparpillés autour du contenu */
@media (max-width: 860px) {
  .tapis { padding-block: 150px 320px; }
  .tapis-objets > .drag { top: auto; bottom: auto; left: auto; right: auto; }
  .tapis-objets > .o-lunettes { display: block; right: -34px; top: 150px; width: 150px; rotate: -18deg; }
  .tapis-objets > .o-papiers  { display: block; left: -54px; top: 31%; width: 120px; rotate: -8deg; }
  .tapis-objets > .o-appareil { display: block; right: -28px; top: 41%; width: 115px; rotate: 12deg; }
  .tapis-objets > .o-carnet   { display: block; left: -26px; bottom: 96px; width: 128px; rotate: -14deg; }
  .tapis-objets > .o-pinceau  { display: block; left: 38%; bottom: 40px; width: 105px; rotate: -32deg; }
  .tapis-objets > .o-ordi     { display: block; right: 3%; bottom: 120px; width: 104px; rotate: 10deg; }
  .tapis-objets > .o-tasse    { display: none; }
  .tapis-objets > .o-stylo    { display: block; right: 22%; bottom: 210px; width: 34px; rotate: 72deg; }
  .tapis-psst { bottom: 250px; width: max-content; max-width: calc(100% - 32px); text-align: center; font-size: 20px; }
}
@media (min-width: 560px) and (max-width: 860px) {
  .tapis-objets > .o-tasse { display: block; left: 4%; top: 150px; width: 95px; rotate: -10deg; }
  .tapis-objets > .o-lunettes { right: 2%; }
}

/* Barre du stylo : toujours visible en bas de l'écran */
.stylo-barre {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  width: max-content;
  max-width: calc(100vw - 24px);
}
@media (max-width: 560px) {
  .stylo-barre { gap: 8px 10px; padding: 10px 12px; border-radius: 22px; }
  .stylo-barre-titre { width: 100%; text-align: center; font-size: 20px; }
  .stylo-btn { min-height: 38px; padding: 0 12px; font-size: 14px; }
  .encre { width: 30px; height: 30px; }
}
@media (max-width: 860px) {
  .tapis { padding-block: 150px 290px; }
  .tapis-objets > .o-stylo { right: 12%; bottom: 168px; }
  .tapis-psst { bottom: 236px; }
  .tapis-objets > .o-carnet { bottom: 70px; }
  .tapis-objets > .o-pinceau { bottom: 24px; }
  .tapis-objets > .o-ordi { bottom: 84px; }
}
@media (min-width: 560px) and (max-width: 860px) {
  .tapis-objets > .o-tasse { left: auto; right: 28%; top: auto; bottom: 40px; width: 100px; }
  .tapis-objets > .o-pinceau { left: 30%; }
}
@media (max-width: 860px) {
  .tapis-psst { bottom: 250px; }
  .tapis-objets > .o-stylo { right: 30%; bottom: 120px; rotate: 60deg; }
  .tapis-objets > .o-ordi { right: 2%; bottom: 150px; }
}
/* Studio : les situations clients */
.studio-cas { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.studio-cas li { position: relative; padding: 12px 16px 12px 46px; border-radius: 14px; background: rgba(247, 246, 237, .14); border: 1px solid rgba(247, 246, 237, .35); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.45; color: var(--cream); }
.studio-cas li::before { content: "→"; position: absolute; left: 16px; top: 11px; font-family: var(--f-display); font-size: 20px; color: var(--sun); }
.studio-cas b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); text-transform: uppercase; letter-spacing: -0.01em; }
.studio-cas li::before { color: var(--olive-ink); }
/* Pastille « Fait main » : texte centré, bien dans le rond */
.peinture-tampon { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: .9; font-size: 30px; top: -22px; left: -10px; padding-top: 4px; box-sizing: border-box; }
.peinture-tampon span { display: block; }
@media (max-width: 860px) {
  .peinture-tampon { width: 86px; height: 86px; font-size: 24px; left: 4px; top: -18px; }
}
/* Tapis mobile : texte « psst » dégagé, stylo plus gros */
@media (max-width: 860px) {
  .tapis { padding-block: 150px 340px; }
  .tapis-psst { bottom: 262px; line-height: 1.25; }
  .tapis-objets > .o-carnet  { left: -26px; bottom: 56px; width: 124px; }
  .tapis-objets > .o-pinceau { left: 27%; bottom: 8px; width: 100px; rotate: -40deg; }
  .tapis-objets > .o-stylo   { right: 24%; bottom: 60px; width: 50px; rotate: 72deg; }
  .tapis-objets > .o-ordi    { right: 2%; bottom: 18px; width: 96px; }
}
@media (min-width: 560px) and (max-width: 860px) {
  .tapis-objets > .o-tasse { right: 4%; bottom: 150px; width: 92px; }
  .tapis-objets > .o-stylo { right: 30%; }
}
/* ===== Studio : haut de page façon accueil, avec le collage ===== */
.studio-hero--collage { background: var(--paper); color: var(--ink); position: relative; overflow: hidden; padding-block: clamp(120px, 11vw, 160px) clamp(64px, 7vw, 110px); }
.studio-hero--collage .heading .script { color: var(--ink); }
.studio-hero--collage .heading .display { color: var(--ink); font-size: clamp(42px, 5vw, 80px); }
.studio-hero--collage .studio-hero-texte p { color: var(--ink); }
.studio-hero--collage .studio-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.studio-hero--collage .studio-hero-texte { position: relative; z-index: 2; }
.studio-hero-collage { position: relative; align-self: stretch; min-height: 100%; }
.studio-hero-collage img { position: absolute; top: 50%; left: 0; translate: 0 -50%; width: min(50vw, 780px); height: auto; max-width: none; display: block; }
.studio-hero--collage .studio-cas li { background: var(--cream); border: 0.6px solid var(--ink); color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
.studio-hero--collage .studio-cas li::before { color: var(--awning-ink); }
.studio-hero--collage .studio-cas b { color: var(--ink); }
@media (max-width: 860px) {
  .studio-hero--collage { padding-top: 110px; }
  .studio-hero--collage .studio-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .studio-hero-collage { order: -1; margin-inline: -16px -16px; min-height: 0; }
  .studio-hero-collage img { position: static; translate: none; width: 100%; max-width: 520px; margin-left: auto; }
}
@media (max-width: 860px) { .studio-hero--collage { padding-top: 84px; } }
/* Studio : motif carreaux et objets séparés */
.studio-hero-collage { background: url("assets/studio-carreau.webp") center / cover no-repeat; }
.studio-hero-collage img { position: relative; top: auto; left: auto; translate: none; width: 100%; max-width: none; height: auto; display: block; filter: drop-shadow(0 14px 20px rgba(5, 29, 81, .25)); }
@media (min-width: 861px) {
  .studio-hero--collage .studio-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .studio-hero-collage { position: absolute; top: 0; bottom: 0; right: 0; width: 48vw; display: grid; place-items: center; padding: 120px 0 40px; box-sizing: border-box; }
  .studio-hero-collage img { width: min(120%, 820px); margin-left: -18%; }
  .studio-hero--collage .studio-hero-inner { grid-template-columns: minmax(0, 1fr) 46vw; }
  .studio-hero--collage .studio-hero-inner::after { content: ""; }
}
@media (max-width: 860px) {
  .studio-hero--collage { padding-top: 0; }
  .studio-hero-collage { order: -1; margin: 0 calc(-1 * clamp(16px, 4.5vw, 64px)) 24px; padding: 64px 4% 26px; min-height: 0; }
  .studio-hero-collage img { width: 100%; max-width: 560px; margin: 0 auto; }
}
/* Encart peinture : sans cadre blanc, avec les stickers échelle et pot */
.peinture-photo { background: none; padding: 0; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.peinture-sticker { position: absolute; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); pointer-events: none; }
.peinture-sticker--echelle { width: 40%; left: -14%; bottom: -12%; rotate: -8deg; }
.peinture-sticker--pot { width: 36%; right: -10%; top: -12%; rotate: 10deg; }
.peinture-pinceau { right: 6%; bottom: -14%; }
@media (max-width: 860px) {
  .peinture-sticker--echelle { width: 38%; left: -6%; bottom: -14%; }
  .peinture-sticker--pot { width: 34%; right: -4%; top: -10%; }
}
.peinture .btn--rose { background: var(--pink); color: var(--ink); border-color: var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
.peinture .btn--rose-ligne { background: transparent; color: var(--pink); border: 1.5px solid var(--pink); box-shadow: 0 2.5px 0 var(--pink); }
.peinture .btn--rose-ligne:hover { box-shadow: 0 4.5px 0 var(--pink); }
/* ===== Page devanture (Chez Riri) ===== */
.devanture { background: var(--paper); color: var(--ink); }
.dev-hero { position: relative; background: #8E8F1E; color: var(--cream); padding-block: clamp(120px, 11vw, 160px) clamp(56px, 6vw, 90px); }
.dev-hero .retour--hero { color: var(--cream); }
.dev-hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dev-script { margin: 0; font-family: var(--f-script); font-size: clamp(26px, 2.6vw, 34px); color: var(--sun); }
.dev-titre { margin: 4px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, 9vw, 140px); line-height: .9; letter-spacing: -0.02em; text-transform: uppercase; }
.dev-sous { margin: 0 0 24px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.dev-intro { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 34em; }
.dev-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid rgba(247, 246, 237, .4); }
.dev-fiche dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.dev-fiche dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 20px; text-transform: uppercase; letter-spacing: -0.01em; }
.dev-insta { font-family: var(--f-script); font-size: 26px; color: var(--cream); }
.dev-hero-photo img { display: block; width: 100%; height: auto; border-radius: 20px; rotate: 2deg; box-shadow: 0 18px 36px rgba(0, 0, 0, .3); }
.dev-bloc { padding-block: clamp(56px, 7vw, 96px) 0; }
.dev-label { margin: 0 0 24px; font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); text-transform: uppercase; letter-spacing: -0.02em; }
.dev-avap, .dev-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dev-avap figure { margin: 0; }
.dev-avap img, .dev-details img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.dev-avap figcaption { margin-top: 10px; font-family: var(--f-script); font-size: 22px; color: var(--ink-soft); }
.dev-histoire { padding-block: clamp(56px, 7vw, 96px); }
.dev-histoire-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dev-histoire .prose h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 400; font-size: 32px; text-transform: uppercase; }
.dev-histoire .prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; }
.dev-citation { margin: 0; padding: clamp(28px, 4vw, 48px); background: var(--pink); border-radius: 24px; border: 0.6px solid var(--ink); box-shadow: 0 4px 0 var(--ink); rotate: -1deg; }
.dev-citation p { margin: 0 0 16px; font-family: var(--f-script); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; color: var(--ink); }
.dev-citation cite { font-style: normal; font-family: var(--f-display); font-size: 18px; text-transform: uppercase; color: var(--awning-ink); }
@media (max-width: 860px) {
  .dev-hero-inner, .dev-histoire-inner { grid-template-columns: minmax(0, 1fr); }
  .dev-hero-photo { max-width: 420px; }
  .dev-avap, .dev-details { gap: 10px; }
}
.dev-hero { padding-top: clamp(130px, 12vw, 180px); }
/* Devantures : modèle commun + correctifs mobile */
.dev-hero { background: var(--dev, #8E8F1E); color: var(--dev-ink, var(--cream)); }
.dev-retour { display: inline-block; margin-bottom: 18px; color: inherit; font-family: var(--f-display); font-size: 15px; text-transform: uppercase; text-decoration: none; opacity: .85; }
.dev-retour:hover { opacity: 1; text-decoration: underline; }
.dev-liens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dev-hero-photo img, .dev-grille img { height: auto; max-width: 100%; }
.dev-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dev-grille figure { margin: 0; }
.dev-grille img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.dev-grille figcaption { margin-top: 10px; font-family: var(--f-script); font-size: 22px; color: var(--ink-soft); line-height: 1.2; }
.dev-citation--cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.dev-citation--cta p { margin: 0; }
@media (max-width: 860px) {
  .dev-hero { padding-top: 104px; padding-bottom: 48px; }
  .dev-titre { font-size: clamp(54px, 15vw, 80px); }
  .dev-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dev-fiche dd { font-size: 17px; }
  .dev-hero-photo { max-width: none; }
  .dev-hero-photo img { rotate: 0deg; border-radius: 16px; }
  .dev-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .dev-grille img { aspect-ratio: 4 / 3; }
  .dev-bloc { padding-top: 48px; }
  .dev-label { font-size: 34px; margin-bottom: 18px; }
  .dev-citation { rotate: 0deg; }
}
.fiche dd a { color: inherit; text-underline-offset: 3px; }
.pcard-visuel img[src*="kafkaf-v3"], .slide-visuel img[src*="kafkaf-v3"] { object-position: 30% 50% !important; }
/* ===== Karmae ===== */
.karmae { background: #F4EEE6; color: #2A2622; }
.km-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 92vh; background: #1F1C1A; color: #F4EEE6; }
.km-hero-img { position: relative; overflow: hidden; }
.km-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.km-hero-texte { padding: clamp(120px, 12vw, 170px) clamp(24px, 6vw, 96px) clamp(48px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.km-hero-texte .dev-retour { color: #F4EEE6; }
.km-hero-texte .charte-perso { margin: 0 0 18px; }
.km-titre { margin: 0; font-family: 'Cormorant Garamond', 'Didot', 'Bodoni 72', Georgia, serif; font-weight: 500; font-size: clamp(72px, 10vw, 160px); line-height: .9; letter-spacing: .04em; text-transform: uppercase; color: #E8C27A; }
.km-sous { margin: 10px 0 26px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.km-intro { margin: 0 0 28px; max-width: 34em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: #E6DED3; }
.km-hero .dev-fiche { border-top-color: rgba(244, 238, 230, .25); width: 100%; max-width: 560px; }
.km-hero .dev-fiche dd { color: #F4EEE6; }
.km-bloc { padding-block: clamp(56px, 7vw, 100px); }
.km-bloc--clair { background: #FBF8F3; }
.km-bloc--sombre { background: #1F1C1A; color: #F4EEE6; }
.km-bloc .dev-label { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: .02em; }
.km-texte { margin: -6px 0 26px; max-width: 40em; font-size: 17px; line-height: 1.6; color: #D9D0C4; }
.km-texte--encre { color: #4A433C; }
.km-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.km-trio figure { margin: 0; }
.km-trio img, .km-grille img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.km-trio figcaption { margin-top: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #6B6259; }
.km-trio figcaption b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 30px; letter-spacing: .04em; color: #2A2622; }
.km-grille { display: grid; gap: 16px; }
.km-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.km-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.km-grille--coffret { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
.km-grille--coffret .km-large { grid-row: 1 / 3; aspect-ratio: auto; }
.km-palette { padding-block: clamp(48px, 6vw, 80px); }
@media (max-width: 860px) {
  .km-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .km-hero-img { aspect-ratio: 4 / 5; order: 2; }
  .km-hero-texte { padding-top: 110px; }
  .km-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .km-trio figcaption b { font-size: 20px; }
  .km-trio figcaption { font-size: 10px; letter-spacing: .06em; }
  .km-grille--2, .km-grille--3, .km-grille--coffret { grid-template-columns: minmax(0, 1fr); }
  .km-grille--coffret .km-large { grid-row: auto; aspect-ratio: 4 / 5; }
}
.km-palette { padding-inline: 0; max-width: none; }
.km-palette .charte-palette { justify-content: flex-start; }
/* Karmae : sans fond noir, typo du site, dégradés de la marque */
.km-hero { background: linear-gradient(160deg, #EE8A5A 0%, #E9A98A 35%, #D9C0D6 70%, #EBD3B2 100%); color: #2A2622; }
.km-hero-texte .dev-retour { color: #2A2622; }
.km-hero-texte .charte-perso { background: rgba(255,255,255,.7); }
.km-titre { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; color: #2A2622; font-size: clamp(72px, 9vw, 140px); }
.km-sous { font-family: var(--f-text); letter-spacing: .12em; }
.km-intro { color: #3A332D; }
.km-hero .dev-fiche { border-top-color: rgba(42, 38, 34, .25); }
.km-hero .dev-fiche dt { color: #3A332D; opacity: .8; }
.km-hero .dev-fiche dd { color: #2A2622; }
.km-bloc .dev-label { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em; }
.km-bloc--sombre { background: linear-gradient(180deg, #E4D6E4 0%, #F1E3D2 100%); color: #2A2622; }
.km-texte { color: #4A433C; }
.km-trio figcaption { font-family: var(--f-text); }
.km-trio figcaption b { font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.km-hero-img img { object-position: 50% 30%; }
@media (max-width: 860px) { .km-trio figcaption b { font-size: 18px; } }
.km-hero-img img { object-position: 50% 100%; }
@media (max-width: 860px) { .km-hero-img { aspect-ratio: 1100 / 1637; } }
.dev-texte { margin: -6px 0 24px; max-width: 44em; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.dev-planche { display: block; width: 100%; height: auto; border-radius: 18px; margin-bottom: 16px; }
.dev-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .dev-grille--3 { grid-template-columns: minmax(0, 1fr); } .dev-grille--3 img { aspect-ratio: 4 / 5; } }
/* ===== Jumppe ===== */
.jumppe { background: #F1ECE6; color: #23232B; }
.jp-hero { background: #3A3AFF; color: #fff; padding-top: clamp(120px, 11vw, 160px); overflow: hidden; }
.jp-hero .dev-retour { color: #fff; }
.jp-logo { display: block; width: clamp(200px, 26vw, 380px); height: auto; margin: 6px 0 14px; }
.jp-sous { margin: 0 0 22px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.jp-intro { margin: 0 0 26px; max-width: 40em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }
.jp-hero .dev-fiche { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; border-top-color: rgba(255,255,255,.35); }
.jp-hero-illu { display: block; width: 100%; height: auto; margin-top: clamp(32px, 4vw, 56px); }
.jp-bloc { padding-block: clamp(56px, 7vw, 100px); }
.jp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.jp-outils { display: block; width: 100%; max-width: 520px; height: auto; justify-self: center; }
.jp-bloc--site { background: #E6DFD6; }
.jp-ecrans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.jp-ecran { margin: 0; }
.jp-ecran img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 24px rgba(35, 35, 43, .15); }
.jp-ecran figcaption { margin-top: 10px; font-family: var(--f-script); font-size: 22px; color: var(--ink-soft); }
.jp-complet { margin-top: 28px; }
.jp-complet summary { cursor: pointer; display: inline-flex; padding: 12px 20px; border-radius: 12px; background: #23232B; color: #fff; font-family: var(--f-display); text-transform: uppercase; font-size: 16px; list-style: none; }
.jp-complet summary::-webkit-details-marker { display: none; }
.jp-scroll { margin-top: 18px; max-height: 80vh; overflow-y: auto; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(35, 35, 43, .15); }
.jp-scroll img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
@media (max-width: 860px) {
  .jp-hero { padding-top: 104px; }
  .jp-hero .dev-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jp-duo, .jp-ecrans { grid-template-columns: minmax(0, 1fr); }
}
/* ===== Château Juvenal ===== */
.juvenal { background: #F3ECE3; color: #1E2A24; }
.jv-hero { background: #1E3A2E; color: #F3ECE3; padding-block: clamp(120px, 11vw, 160px) clamp(56px, 6vw, 90px); }
.jv-hero .dev-retour { color: #F3ECE3; }
.jv-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.jv-h1 { margin: 4px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: clamp(54px, 7vw, 110px); line-height: .92; text-transform: uppercase; letter-spacing: -0.02em; }
.jv-intro { margin: 0 0 26px; max-width: 34em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.jv-hero .dev-fiche { border-top-color: rgba(243,236,227,.35); }
.jv-hero-img { display: block; width: 100%; height: auto; border-radius: 10px; rotate: 2deg; box-shadow: 0 18px 36px rgba(0,0,0,.35); }
.jv-cuvee { padding-block: clamp(56px, 7vw, 96px) 0; }
.jv-num { margin: 0; font-family: var(--f-script); font-size: 26px; color: #C2552B; }
.jv-titre { margin: 2px 0 14px; font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.jv-decl { display: block; width: 100%; height: auto; border-radius: 14px; margin-bottom: 16px; }
.jv-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jv-photos figure { margin: 0; }
.jv-photos img { display: block; width: 100%; height: auto; border-radius: 14px; }
.jv-photos figure:nth-child(3) { grid-column: 1 / -1; }
.jv-photos figcaption { margin-top: 8px; font-family: var(--f-script); font-size: 22px; color: var(--ink-soft); }
.juvenal .dev-histoire { padding-top: clamp(64px, 8vw, 110px); }
@media (max-width: 860px) {
  .jv-hero { padding-top: 104px; }
  .jv-hero-inner, .jv-photos { grid-template-columns: minmax(0, 1fr); }
  .jv-hero-img { rotate: 0deg; }
}
.jv-decl[src*="petit-homme-etiquette"] { max-width: 640px; margin-inline: auto; }
/* Logo ioio design (SVG, prend la couleur du texte) */
.logo-img { display: block; aspect-ratio: 797 / 514; background: currentColor; -webkit-mask: url("assets/logo-ioio.svg") center / contain no-repeat; mask: url("assets/logo-ioio.svg") center / contain no-repeat; }
.logo { display: block; padding: 0; color: var(--navy); line-height: 0; }
.logo .logo-img { height: 50px; }
.footer-col .footer-logo { display: block; line-height: 0; }
.footer-logo .logo-img { height: 72px; }
@media (max-width: 860px) { .logo .logo-img { height: 42px; } }