/* CHARTE — déclinaison jaune du système visuel PRINT */

:root {
  --section-color: #fff200;
  --section-rgb: 255 242 0;
}

body[data-page="charte"] .liquid,
body[data-page="charte"] .cherry {
  fill: var(--section-color);
}

body[data-page="charte"] .brand {
  color: var(--section-color);
  background: none;
  -webkit-text-fill-color: var(--section-color);
  text-shadow: 0 0 6px rgb(var(--section-rgb) / .58), 0 0 15px rgb(var(--section-rgb) / .24);
}

body[data-page="charte"] .brand-role,
body[data-page="charte"] .brand-separator {
  color: var(--section-color);
  text-shadow: 0 0 6px rgb(var(--section-rgb) / .55), 0 0 15px rgb(var(--section-rgb) / .24);
}

body[data-page="charte"] .print-heading-sign > div > span {
  background: var(--section-color);
}

body[data-page="charte"] .print-heading h1 {
  letter-spacing: .025em;
}

body[data-page="charte"] .charte-shell {
  background:
    linear-gradient(#020714, #020714) padding-box,
    conic-gradient(from var(--screen-angle), #fff200, #fffbd2 15%, #ffb800 31%, #07112b 48%, #fff200 65%, #fff 82%, #ffb800) border-box;
}

body[data-page="charte"] .charte-shell::before {
  background: conic-gradient(from var(--screen-angle), #fff200, transparent 15%, #fff, transparent 34%, #ffb800, transparent 54%, #fff200, transparent 76%, #fff, transparent 89%, #fff200);
}

body[data-page="charte"] .charte-strip {
  overflow: hidden;
  background: #f2efe5;
}

body[data-page="charte"] #printGallery > .print-row {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #f2efe5;
}

body[data-page="charte"] #printGallery > .print-row + .print-row {
  margin-top: -1px !important;
}

body[data-page="charte"] #printGallery img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.charte-chapter-label {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  min-height: clamp(74px, 8vw, 110px);
  padding: clamp(14px, 2.5vw, 28px) clamp(18px, 4vw, 48px);
  color: #fffaf4;
  background:
    linear-gradient(90deg, rgb(var(--section-rgb) / .13), transparent 40%),
    #07112b;
  border-block: 1px solid rgb(var(--section-rgb) / .38);
  line-height: 1;
}

.charte-chapter-label > span {
  display: grid;
  place-items: center;
  width: clamp(46px, 5vw, 66px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  color: #07112b;
  background: var(--section-color);
  box-shadow: 4px 4px 0 rgb(var(--section-rgb) / .38), 0 0 20px rgb(var(--section-rgb) / .24);
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  font-weight: 950;
}

.charte-chapter-label div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.charte-chapter-label strong {
  color: var(--section-color);
  font-family: var(--display);
  font-size: clamp(2rem, 4.8vw, 4.6rem);
  font-weight: 950;
  letter-spacing: .035em;
  line-height: .76;
  text-transform: uppercase;
  text-shadow: 0 0 11px rgb(var(--section-rgb) / .44);
}

.charte-chapter-label small {
  color: #fffaf4;
  font-size: clamp(.53rem, 1vw, .73rem);
  font-weight: 900;
  letter-spacing: .19em;
  line-height: 1.25;
  text-transform: uppercase;
}

.charte-board,
.charte-board-pair,
.charte-chapter-card {
  background: #f4f2ec !important;
}

.charte-board > img,
.charte-board-pair > img,
.charte-chapter-card > img {
  background: #f4f2ec;
}

.charte-signatures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #f4f2ec !important;
}

.charte-signatures > img + img {
  margin-top: -1px !important;
}

.charte-chapter-card .charte-chapter-label {
  border-top: 0;
}

.charte-chapter-card > img {
  padding: clamp(6px, 1vw, 12px) 0;
}

.charte-board-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.charte-board-pair > img {
  height: 100% !important;
  object-fit: cover;
}

.charte-board-pair > img + img {
  margin-left: -1px !important;
}

.charte-shirt-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0;
  padding: clamp(10px, 2vw, 24px) clamp(5px, 1vw, 12px) 0;
  background:
    radial-gradient(circle at 50% 18%, rgb(var(--section-rgb) / .18), transparent 37%),
    linear-gradient(135deg, #0a1021, #17140c 50%, #080d1b) !important;
}

.charte-shirt-pair > img {
  align-self: end;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .34));
}

.charte-shirt-wide {
  padding: clamp(8px, 1.5vw, 18px) 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(var(--section-rgb) / .18), transparent 42%),
    linear-gradient(100deg, #070d1c, #171308 52%, #070d1c) !important;
}

.charte-shirt-wide > img {
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .26));
}

.charte-mobile {
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  background:
    linear-gradient(rgb(var(--section-rgb) / .12) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgb(var(--section-rgb) / .11) 1px, transparent 1px) 0 0 / 34px 100%,
    #091125 !important;
}

.charte-mobile > img {
  width: min(82%, 760px) !important;
  filter: drop-shadow(0 25px 38px rgba(0, 0, 0, .42));
}

.charte-campaign {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(8px, 1.5vw, 18px);
  padding: clamp(10px, 1.8vw, 22px) 0;
  background: #f4f2ec !important;
}

.charte-campaign > img {
  width: 82% !important;
}

.charte-document-label {
  display: grid;
  place-items: center;
  min-height: 0;
  gap: 8px;
  padding: clamp(27px, 4vw, 50px) 16px clamp(23px, 3.4vw, 42px);
  color: #fffaf4;
  background:
    linear-gradient(90deg, transparent, rgb(var(--section-rgb) / .14) 50%, transparent),
    #07112b !important;
  border-block: 1px solid rgb(var(--section-rgb) / .34);
  text-align: center;
}

.charte-document-label::after {
  content: "";
  width: clamp(54px, 8vw, 92px);
  height: 4px;
  margin-top: 5px;
  background: var(--section-color);
  box-shadow: 0 0 9px rgb(var(--section-rgb) / .28);
}

.charte-document-label strong {
  color: var(--section-color);
  font-family: var(--display);
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  font-weight: 950;
  letter-spacing: .025em;
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgb(var(--section-rgb) / .46), 0 0 28px rgb(var(--section-rgb) / .2);
}

.charte-document-label-single {
  padding-block: clamp(22px, 3vw, 36px);
}

.charte-retained-label strong {
  color: var(--section-color);
}

.charte-svg-crop {
  position: relative;
  overflow: hidden;
  background: #f4f2ec !important;
}

body[data-page="charte"] .charte-svg-crop > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.charte-svg-logo { aspect-ratio: 2.35; }
.charte-svg-process { aspect-ratio: 2.15; }
.charte-svg-guide { aspect-ratio: 1.72; }
.charte-svg-elements { aspect-ratio: 2.08; }
.charte-svg-palette { aspect-ratio: 1.72; }

.charte-svg-guide > img,
.charte-svg-palette > img {
  object-position: center bottom;
}

.charte-land-board {
  display: grid;
  place-items: center;
  background: #f4f2ec !important;
}

.charte-land-board > img {
  width: 96% !important;
}

.charte-land-after-label {
  padding-top: clamp(18px, 3vw, 36px);
}

.charte-land-before-label {
  padding-bottom: clamp(18px, 3vw, 36px);
}

.charte-shirt-stack {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: clamp(8px, 1.4vw, 16px) 0;
  background: #f4f2ec !important;
}

.charte-shirt-stack > img {
  width: min(74%, 760px) !important;
  filter: drop-shadow(0 14px 18px rgba(7, 17, 43, .12));
}

.charte-shirt-stack > img + img {
  margin-top: clamp(-40px, -3.4vw, -20px) !important;
}

.charte-shirt-application {
  display: grid;
  place-items: center;
  background: #f4f2ec !important;
}

.charte-shirt-application > img {
  width: 96% !important;
}

.charte-logo-study,
.charte-stello-logo {
  display: grid;
  place-items: center;
}

.charte-logo-study {
  padding: clamp(18px, 4vw, 54px);
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 242, 0, .18), transparent 29%),
    linear-gradient(145deg, #f8f6ef, #e9e7df) !important;
}

.charte-logo-study > img {
  width: min(92%, 900px) !important;
  filter: drop-shadow(0 20px 26px rgba(7, 17, 43, .13));
}

.charte-stello-logo {
  padding: clamp(34px, 7vw, 92px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .92), transparent 34%),
    linear-gradient(135deg, #f7f2ff, #ddd2ff) !important;
}

.charte-stello-logo > img {
  width: min(88%, 920px) !important;
  filter: drop-shadow(0 18px 22px rgba(37, 21, 90, .17));
}

.charte-stello-posters,
.charte-stello-banner,
.charte-stello-social,
.charte-stello-application {
  background: #f7f6f0 !important;
}

.charte-stello-posters > img,
.charte-stello-banner > img,
.charte-stello-social > img,
.charte-stello-application > img {
  margin: -1px 0 0 !important;
}

body[data-page="charte"] .data-trace::after {
  background: linear-gradient(90deg, transparent, #fffbd7 18%, var(--section-color) 48%, #fffdf0 72%, transparent);
}

body[data-page="charte"] .trace-vertical::after {
  background: linear-gradient(180deg, transparent, #fffbd7 18%, var(--section-color) 48%, #fffdf0 72%, transparent);
}

body[data-page="charte"] .project-menu-link .menu-spectrum-stroke {
  stroke: url(#projectMenuSpectrumCharte);
}

body[data-page="charte"] .project-menu-link .menu-spectrum-fill {
  fill: url(#projectMenuSpectrumCharte);
}

body[data-page="charte"] .leaf-cocktail-icon .leaf-spectrum-stroke {
  stroke: url(#leafMenuSpectrumCharte);
}

body[data-page="charte"] .leaf-cocktail-icon .leaf-spectrum-fill {
  fill: url(#leafMenuSpectrumCharte);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="charte"],
  body[data-page="charte"] * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2 20 14l-8 2 4 8-4 2-4-8-5 6Z' fill='%23fff200' stroke='%23fffaf4' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto !important;
  }
}

body[data-page="charte"] .leaf-nav .leaf-menu-entry[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #081126);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

body[data-page="charte"] .leaf-nav .leaf-menu-entry[aria-current="page"] .leaf-service-icon {
  transform: translateY(-1px) rotate(-2deg) scale(1.045);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 72%, transparent));
}

body[data-page="charte"] .leaf-nav .leaf-menu-entry[aria-current="page"] > i {
  color: #081126;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (max-width: 800px) {
  body[data-page="charte"] .print-heading h1 {
    font-size: clamp(4.35rem, 21.5vw, 6.4rem);
  }

  .charte-document-label {
    gap: 7px;
    padding: 20px 12px 17px;
  }

  .charte-document-label strong {
    font-size: clamp(1.75rem, 9vw, 2.8rem);
  }

  .charte-document-label-single {
    padding-block: 19px;
  }

  .charte-shirt-stack > img {
    width: 82% !important;
  }

  .charte-shirt-application > img,
  .charte-land-board > img {
    width: 100% !important;
  }

  .charte-land-after-label { padding-top: 16px; }
  .charte-land-before-label { padding-bottom: 16px; }

  .charte-campaign {
    gap: 6px;
    padding-block: 7px;
  }

  .charte-campaign > img {
    width: 94% !important;
  }

  .charte-chapter-label {
    min-height: 68px;
    padding: 13px 16px;
  }

  .charte-chapter-label strong {
    font-size: clamp(1.85rem, 9vw, 3rem);
  }

  .charte-board-pair {
    grid-template-columns: 1fr;
  }

  .charte-board-pair > img + img {
    margin-top: -1px !important;
    margin-left: 0 !important;
  }

  .charte-mobile {
    padding: 18px 8px;
  }

  .charte-mobile > img {
    width: 96% !important;
  }
}

@media (max-width: 500px) {
  .charte-chapter-label {
    gap: 10px;
  }

  .charte-chapter-label > span {
    width: 43px;
    font-size: 1.35rem;
    box-shadow: 3px 3px 0 rgb(var(--section-rgb) / .36);
  }

  .charte-chapter-label small {
    font-size: .46rem;
    letter-spacing: .13em;
  }

  .charte-shirt-pair {
    padding: 8px 2px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="charte"] .charte-shell,
  body[data-page="charte"] .charte-shell::before {
    animation: none !important;
  }
}