/* Charte qualité : page institutionnelle noir et or (version site de l'affiche A4).
   Chargée uniquement par charte-qualite.html. Aucune animation hormis un fondu discret. */
.charte {
  --c-nuit: #090705; --c-or: #c8a96e; --c-or-clair: #ecd9a8; --c-or-fonce: #9a7b43;
  --c-ivoire: #f4f0e8; --c-doux: #c4bcab; --c-filet: rgba(200, 169, 110, .3);
  position: relative; overflow: hidden; margin-top: 1.4rem;
  background:
    radial-gradient(90% 420px at 50% 0%, rgba(200, 169, 110, .16) 0%, rgba(200, 169, 110, 0) 70%),
    radial-gradient(80% 360px at 50% 100%, rgba(200, 169, 110, .09) 0%, rgba(200, 169, 110, 0) 72%),
    var(--c-nuit);
  color: var(--c-ivoire);
}
/* Cadre double, comme l'affiche */
.charte::before, .charte::after { content: ""; position: absolute; pointer-events: none; }
.charte::before { inset: .8rem; border: 1px solid rgba(200, 169, 110, .5); }
.charte::after { inset: 1.05rem; border: 1px solid rgba(200, 169, 110, .22); }
.charte__int {
  position: relative; z-index: 1; width: min(100% - 3rem, 62rem); margin-inline: auto;
  padding-block: clamp(3.2rem, 7vw, 5.6rem) clamp(3rem, 6vw, 4.6rem);
  animation: charte-fondu .9s ease-out both;
}
@keyframes charte-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .charte__int { animation: none; } }

.charte__tete { text-align: center; }
.charte__logo { width: min(15rem, 62%); height: auto; margin: 0 auto 1.4rem; }
.charte__sur {
  margin: 0; color: var(--c-or); font: 400 .78rem/1.5 var(--sans); letter-spacing: .32em;
  text-transform: uppercase; text-align: center; max-width: none;
}
.charte h1 {
  margin: 1.1rem 0 .9rem; max-width: none; color: var(--c-or-clair);
  font: 300 clamp(2.4rem, 8vw, 4.6rem)/1.02 var(--serif); letter-spacing: .16em; text-transform: uppercase;
  padding-left: .16em;
}
.charte__devise { margin: 0 auto; max-width: 34rem; color: var(--c-or-clair); font: italic 400 clamp(1.15rem, 2.6vw, 1.5rem)/1.35 var(--serif); }
.charte__orn { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 1.8rem auto 0; max-width: 20rem; }
.charte__orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--c-or), transparent); }
.charte__orn b { width: .6rem; height: .6rem; transform: rotate(45deg); background: var(--c-or); }

.charte__philo { margin: 1.8rem auto 0; max-width: 40rem; text-align: center; color: var(--c-doux); font-size: 1.06rem; line-height: 1.7; }
.charte__philo strong { color: var(--c-ivoire); font-weight: 400; }

.charte__sur--liste { margin-top: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 1.2rem; }

/* Dix engagements : une colonne sur mobile, deux dès la tablette, filets d'or entre les lignes */
.charte__liste { counter-reset: eng; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--c-filet); position: relative; }
.charte__liste li {
  counter-increment: eng; position: relative; padding: 1.5rem 0 1.5rem 4.2rem;
  border-bottom: 1px solid var(--c-filet);
}
.charte__liste li::before {
  content: counter(eng, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem;
  font: 300 2.5rem/1 var(--serif);
  background: linear-gradient(180deg, var(--c-or-clair), var(--c-or-fonce));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.charte__liste h2 {
  margin: 0; max-width: none; color: var(--c-ivoire);
  font: 500 .86rem/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase;
}
.charte__liste h2::after { content: ""; display: block; width: 2.2rem; height: 1px; margin: .6rem 0; background: var(--c-or); }
.charte__liste p { margin: 0; max-width: none; color: var(--c-doux); font-size: .98rem; line-height: 1.6; }
@media (min-width: 820px) {
  .charte__liste { grid-template-columns: 1fr 1fr; }
  .charte__liste::before {
    content: ""; position: absolute; left: 50%; top: 1.2rem; bottom: 1.2rem; width: 1px;
    background: linear-gradient(180deg, transparent, var(--c-or), transparent); opacity: .55;
  }
  .charte__liste li { padding-right: 2.2rem; }
  .charte__liste li:nth-child(even) { padding-left: 6.4rem; padding-right: 0; }
  .charte__liste li:nth-child(even)::before { left: 2.2rem; }
}

/* Promesse encadrée */
.charte__promesse {
  position: relative; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; max-width: 44rem; padding: 2.1rem clamp(1.2rem, 4vw, 2.6rem) 1.8rem;
  text-align: center; border: 1px solid rgba(200, 169, 110, .55);
}
.charte__promesse::before { content: ""; position: absolute; inset: .3rem; border: 1px solid rgba(200, 169, 110, .26); pointer-events: none; }
.charte__promesse .charte__sur {
  position: absolute; top: -.62rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 0 1.1rem 0 calc(1.1rem + .32em); background: var(--c-nuit); line-height: 1.2;
}
.charte__promesse-texte { margin: 0 auto; max-width: none; color: var(--c-ivoire); font: italic 400 clamp(1.2rem, 2.6vw, 1.5rem)/1.45 var(--serif); }

.charte__sign { margin-top: clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.charte__phi { margin: 0; color: var(--c-or); font: 300 2.4rem/1 var(--serif); }
.charte__signature { margin: .5rem 0 0; color: var(--c-or); font: 400 .8rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.charte__sous { margin: .45rem 0 0; color: var(--c-doux); font-size: .88rem; letter-spacing: .06em; }

@media (max-width: 480px) {
  .charte__sur { letter-spacing: .2em; font-size: .72rem; }
  .charte__promesse .charte__sur { letter-spacing: .24em; }
  .charte__liste li { padding-left: 3.5rem; }
  .charte__liste li::before { font-size: 2.1rem; }
}