/* ==========================================================
   Charte graphique — styles spécifiques
   ========================================================== */

.ch-hero { padding: 220px 0 90px; text-align: center; background: var(--ivory); }
.ch-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.ch-hero .lead { margin: 0 auto; }
.ch-hero-logo { width: min(440px, 80%); margin: 60px auto 0; }

.ch-sec { padding: clamp(70px, 10vw, 130px) 0; }
.ch-head { display: grid; grid-template-columns: 110px 1fr; gap: 20px; margin-bottom: 56px; align-items: start; }
.ch-head h2 { margin-bottom: 12px; }
.ch-head p { max-width: 62ch; margin: 0; }
.ch-n { font-family: var(--serif); font-style: italic; font-size: 3.4rem; line-height: 1; color: var(--gold); }
@media (max-width: 640px) { .ch-head { grid-template-columns: 1fr; gap: 6px; } }

/* 01 — architecture */
.ch-tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ch-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ch-tiles { grid-template-columns: 1fr; } }
.ch-tile { margin: 0; padding: 34px 30px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 420px; }
.ch-tile figcaption { font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; margin-bottom: auto; }
.ch-tile img { width: 78%; height: 210px; object-fit: contain; margin: 30px auto; }
.ch-tile p { font-size: .88rem; line-height: 1.6; margin: auto 0 0; opacity: .8; }
.t-ivory { background: var(--ivory); border: 1px solid var(--line); }
.t-sand { background: var(--sand); }
.t-navy { background: var(--navy); color: #eef1f6; }
.t-blue { background: #1884f1; color: #fff; }

/* 02 — déclinaisons */
.ch-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .ch-variants { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ch-variants { grid-template-columns: 1fr; } }
.ch-variants figure { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); }
.ch-variants .v-area { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ch-variants .v-area img { position: absolute; top: 28px; left: 28px; width: calc(100% - 56px); height: calc(100% - 56px); max-width: none; object-fit: contain; }
.ch-variants figcaption { padding: 14px 18px; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .8rem; }
.ch-variants figcaption b { font-weight: 500; white-space: nowrap; }
.ch-variants figcaption span { color: var(--muted); text-align: right; }
.ch-photo { position: relative; margin-top: 18px; height: 420px; overflow: hidden; }
.ch-photo > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.ch-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,34,.88) 0%, rgba(10,18,34,.6) 45%, rgba(10,18,34,.2) 100%); }
.ch-photo-logo { position: absolute; z-index: 2; left: 8%; top: 50%; transform: translateY(-50%); width: min(260px, 45%); }
.ch-photo-cap { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }

/* 03 — palette */
.ch-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
@media (max-width: 1000px) { .ch-palette { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ch-palette { grid-template-columns: 1fr 1fr; } }
.sw { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sw i { display: block; width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 18px; }
.sw b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.sw code { font-family: var(--sans); font-size: .82rem; letter-spacing: .1em; margin-top: 2px; }
.sw span { font-size: .74rem; color: var(--muted); }
.sw em { font-style: normal; font-size: .78rem; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.ch-ratio { display: flex; height: 64px; margin-top: 60px; border: 1px solid var(--line); }
.ch-ratio span { display: flex; align-items: center; padding: 0 16px; color: #fff; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ch-ratio span:last-child { padding: 0; }

/* 04 — typo */
.ch-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .ch-type { grid-template-columns: 1fr; } }
.ch-type > div { border-top: 1px solid rgba(255,255,255,.2); padding-top: 30px; }
.ch-type .aa { font-size: 7rem; line-height: 1; height: 120px; display: flex; align-items: center; margin-bottom: 26px; color: #fff; }
.ch-type b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: #fff; }
.ch-type span { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin: 4px 0 18px; }
.ch-type p { color: rgba(238,241,246,.75); font-size: .95rem; line-height: 1.7; }

/* 05 — protection */
.ch-protect { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .ch-protect { grid-template-columns: 1fr; } }
.ch-zone { position: relative; padding: 52px; border: 1px dashed var(--gold); background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(194,122,58,.07) 10px 11px); }
.ch-zone-box { background: var(--ivory); outline: 1px solid rgba(14,23,41,.25); padding: 0; }
.ch-zone-box img { width: 100%; max-width: 420px; margin: 0 auto; }
.ch-zone .x { position: absolute; font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.3rem; }
.x-t { top: 12px; left: 50%; } .x-b { bottom: 12px; left: 50%; } .x-l { left: 18px; top: 50%; } .x-r { right: 18px; top: 50%; }
.ch-min { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.ch-min > div { display: grid; grid-template-columns: 140px 1fr; grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.ch-min img { grid-row: span 2; justify-self: center; }
.ch-min b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; align-self: end; }
.ch-min span { color: var(--muted); font-size: .88rem; align-self: start; }

/* 06 — interdits */
.ch-donts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .ch-donts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ch-donts { grid-template-columns: 1fr; } }
.ch-donts figure { margin: 0; }
.ch-donts figure > div { position: relative; aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ch-donts figure > div img { width: 46%; }
.ch-donts figure > div::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: #b4362c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='white' stroke-width='2.4'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E") center/18px no-repeat;
}
.ch-donts figcaption { padding: 14px 0 0; font-size: .9rem; }

/* 07 — applications */
.ch-mocks { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
@media (max-width: 900px) { .ch-mocks { grid-template-columns: 1fr; } }
.ch-mocks figure { margin: 0; background: var(--sand); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 400px; position: relative; overflow: hidden; }
.ch-mocks figcaption { margin-top: 26px; font-size: .78rem; letter-spacing: .06em; color: var(--muted); text-align: center; }
.m-pad { background: linear-gradient(160deg, #e9e2d6, #d9cfbf) !important; }
.m-pad svg { width: 100%; max-width: 480px; filter: drop-shadow(0 24px 30px rgba(14,23,41,.3)); }
.m-cards { background: #d7dde6 !important; perspective: 900px; }
.m-card { width: 300px; max-width: 80%; aspect-ratio: 85 / 55; box-shadow: 0 20px 40px -14px rgba(14,23,41,.45); display: flex; align-items: center; justify-content: center; }
.m-card.front { background: var(--navy); transform: rotate(-6deg) translate(-30px, 10px); }
.m-card.front img { width: 34%; }
.m-card.back { background: var(--ivory); transform: rotate(4deg) translate(40px, -14px); justify-content: flex-start; gap: 16px; padding: 0 22px; border-left: 4px solid var(--gold); }
.m-card.back img { width: 54px; flex: none; }
.m-card.back div { display: flex; flex-direction: column; line-height: 1.35; }
.m-card.back b { font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--navy); }
.m-card.back span { font-size: .56rem; color: var(--muted); letter-spacing: .03em; }
.m-tote svg { width: 240px; filter: drop-shadow(0 20px 26px rgba(14,23,41,.22)); }
.m-sign { background: linear-gradient(180deg, #cfd8e3, #eef1f5) !important; }
.m-sign-arm { width: 70%; height: 10px; background: #2b2f36; margin-bottom: 0; align-self: flex-start; margin-left: 4%; }
.m-sign-panel { display: flex; align-items: center; gap: 20px; background: var(--navy); padding: 26px 34px; border: 2px solid var(--gold); box-shadow: 0 24px 40px -18px rgba(14,23,41,.6); margin-left: -6%; }
.m-sign-panel img:first-child { width: 74px; }
.m-sign-panel img:last-child { width: 220px; max-width: 45vw; }

/* 08 — fichiers */
.ch-files { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.ch-files > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ch-files b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; min-width: 190px; }
.ch-files a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); padding: 8px 14px; transition: background .3s, color .3s, border-color .3s; }
.ch-files a::after { content: " ↓"; color: var(--gold); }
.ch-files a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.m-sign-panel img { height: auto; align-self: center; }