/* Page Charte graphique : espacements 4 8 12 16 24 32 48 64 96 */
.charte-tout { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.charte-tout span { font-size: 18px; }
.charte-sommaire { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 32px; font-weight: 500; }
.charte-sommaire a { display: inline-flex; align-items: center; min-height: 44px; color: var(--vert); text-underline-offset: 4px; }

.page h2[id] { margin-top: 96px; }
.page .charte-grille, .page .charte-couleurs, .page .charte-police, .page .charte-pictos { margin-top: 48px; }
.page p { text-wrap: pretty; }
.charte-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.charte-grille h3, .charte-couleurs h3 { font-weight: 600; font-size: 22px; line-height: 1.2; margin: 24px 0 4px; color: var(--vert); }
.charte-grille p + p { margin-top: 4px; }
.charte-grille a, .charte-zip a, .charte-note a, .charte-pictos a { text-underline-offset: 3px; }

.charte-apercu { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 32px 40px; background: var(--craie); outline: 1px solid var(--vert); outline-offset: -1px; }
.charte-apercu img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.charte-apercu--nuit { background: var(--nuit); outline: 0; }
.charte-apercu--vert { background: var(--vert); outline: 0; }
.charte-apercu--mono { grid-template-columns: 1fr 1fr; gap: 32px; }
.charte-apercu--mono img { max-height: 112px; justify-self: center; }
.charte-apercu--illu { aspect-ratio: auto; padding: 0; outline: 0; }
.charte-apercu--fond { aspect-ratio: 4 / 5; padding: 0; outline: 0; }
.charte-apercu--fond img { width: 100%; height: 100%; object-fit: cover; }
.charte-large { grid-column: span 2; grid-row: span 2; }
.charte-grille--illus .charte-apercu:not(.charte-apercu--illu) { padding: 24px; }
.charte-grille--fonds { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.charte-zip, .charte-note { max-width: 46em; margin-top: 48px; }
.charte-note + .charte-zip { margin-top: 16px; }

.charte-intertitre { font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--vert); margin: 96px 0 32px; }
.charte-regles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.charte-regles h4 { font-weight: 600; font-size: 18px; color: var(--vert); margin: 16px 0 4px; }
.charte-regles p { max-width: 31em; }
.charte-zone, .charte-taille { display: flex; align-items: flex-start; height: 142px; }
.charte-zone img { box-sizing: content-box; width: auto; height: 80px; padding: 31px; outline: 1px dashed var(--vert); outline-offset: 0; }
.charte-taille img { width: 120px; height: auto; }
.charte-interdits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.charte-interdits .charte-apercu { padding: 24px; overflow: hidden; }
.charte-interdits p { margin-top: 12px; }
.interdit-etire { transform: scale(1.35, .8); }
.interdit-teinte { filter: hue-rotate(150deg); }
.interdit-tourne { transform: rotate(-12deg); }
.interdit-ombre { filter: drop-shadow(4px 6px 4px rgba(6, 44, 19, .55)); }

.charte-couleurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.charte-nuance { aspect-ratio: 1; }
.charte-nuance--craie { outline: 1px solid var(--vert); outline-offset: -1px; }
.charte-couleurs dl { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; align-items: baseline; margin-top: 12px; }
.charte-couleurs dt { font-weight: 500; font-size: 14px; letter-spacing: .08em; color: var(--vert); }
.charte-couleurs dd { margin: 0; }
.charte-couleurs button { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.charte-couleurs button.copie { text-decoration: none; color: var(--vert); }
.charte-couleurs p { margin-top: 8px; }

.charte-police li { padding: 32px 0; border-top: 1px solid var(--vert); }
.charte-police li:last-child { border-bottom: 1px solid var(--vert); }
.charte-police__exemple { font-size: 28px; line-height: 1.15; color: var(--vert); margin-bottom: 4px; }
.charte-police li p.charte-police__exemple { font-size: 28px; }
.charte-police li p.charte-police__exemple--titre { font-weight: 900; font-size: 56px; line-height: 1.05; max-width: 14em; text-wrap: balance; margin-bottom: 12px; }
.charte-police__exemple em { font-style: italic; }
.charte-police li:last-child .charte-police__exemple { font-size: 22px; line-height: 1.4; color: var(--nuit); max-width: 31em; }

.charte-pictos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 32px; }
.charte-pictos img { display: block; width: 48px; height: 48px; margin-bottom: 12px; }
.charte-pictos p:first-of-type { font-weight: 600; color: var(--vert); line-height: 1.25; }
.charte-pictos p + p { margin-top: 4px; }

@media (max-width: 1100px) {
  .charte-grille--fonds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-couleurs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .charte-interdits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .charte-pictos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .charte-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-large { grid-row: auto; }
}
@media (max-width: 700px) {
  .page h2[id] { margin-top: 64px; }
  .charte-grille, .charte-regles { grid-template-columns: minmax(0, 1fr); }
  .charte-large { grid-column: auto; }
  .charte-couleurs, .charte-interdits, .charte-grille--fonds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-pictos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-police li p.charte-police__exemple--titre { font-size: 36px; }
  .charte-police li p.charte-police__exemple { font-size: 22px; }
  .charte-zone img { height: 56px; padding: 22px; }
  .charte-zone, .charte-taille { height: 100px; }
}

/* illustrations : une image seule, contenue dans la marge intérieure quel que soit son format */
.charte-grille--illus .charte-apercu { position: relative; }
.charte-grille--illus .charte-apercu > img { position: absolute; top: 24px; left: 24px; width: calc(100% - 48px); height: calc(100% - 48px); max-width: none; max-height: none; object-fit: contain; }
.charte-grille--illus .charte-apercu--illu > img { position: static; width: 100%; height: auto; }
.charte-interdits .interdit-etire { transform: scale(1.25, .8); }

.charte-animation { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 32px; align-items: start; margin-top: 48px; }
.charte-video { display: block; width: 100%; height: auto; background: var(--craie); outline: 1px solid var(--vert); outline-offset: -1px; }
.charte-telechargements li + li { margin-top: 24px; }
.charte-telechargements h3 { font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--vert); margin-bottom: 4px; }
.charte-telechargements a { text-underline-offset: 3px; }
@media (max-width: 900px) { .charte-animation { grid-template-columns: minmax(0, 1fr); } }