/*
 * A-GIR — l'écran unique, direction « passe-partout » : l'écran tenu comme une carte de la papeterie.
 * Un filet d'or en passe-partout ; la marque en haut, les quatre mots en marge, la devise en grand au pied avec l'appel.
 */
.ecran__cadre {
  width: auto;
  max-width: none;
  margin: var(--passe);
  border: var(--trait) solid var(--or-filet);
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: "signature" "piliers" "." "appel" "mention";
  row-gap: var(--space-6);
}

.propos {
  display: contents;
}

.signature {
  grid-area: signature;
}

.piliers {
  grid-area: piliers;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.appel {
  grid-area: appel;
}

.chapeau {
  margin-top: var(--space-4);
}

.appel .btn {
  width: 100%;
  margin-top: var(--space-6);
}

.mention {
  grid-area: mention;
  padding-top: var(--space-4);
  border-top: var(--trait) solid var(--filet-sombre);
}

@media (min-width: 720px) {
  .appel .btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .ecran__cadre {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: none;
    column-gap: var(--gouttiere);
  }

  .signature {
    grid-area: auto;
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .piliers {
    grid-area: auto;
    grid-column: 9 / -1;
    grid-row: 1;
    align-items: flex-end;
    align-self: start;
    text-align: right;
  }

  .appel {
    grid-area: auto;
    grid-column: 1 / 9;
    grid-row: 3;
  }

  .mention {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: 4;
  }
}